/* ===================================================================== TIPOGRAFIA UC — scala unica, proposta di prova (18/08/2026) PROVA, NON APPRODO. Questo foglio si carica DOPO gli altri e vince per ordine: serve a guardare le pagine vere a costo zero, senza toccare i fogli esistenti e senza pubblicare nulla. È SCRITTO IN ATTESA DEL FILE DI TEORIA, che non è ancora arrivato. Le decisioni sono le sue e sono applicate alla lettera; quando il suo file arriva si confrontano e vince il suo — questo serve a non perdere la serata. LA DIAGNOSI, misurata sui tre fogli in chiaro (non sul file unico): sito 32 dimensioni · 16 interlinee · corpo base 16px questionario 9 dimensioni · 7 interlinee · corpo base 18px simulatore 10 dimensioni · 6 interlinee · corpo base 16px Le :root definivano colori, caratteri e raggi ma NON le dimensioni: ogni corpo era cablato nel selettore, quindi non esisteva una fonte unica ed è divergito. È la regola «mai cablare» dimenticata sulla tipografia. LA DECISIONE (Nicola): base 18px, ereditata dal questionario — l'unico dei tre con una scelta presa apposta per il pubblico 45-65. Il sito stava a 16 per impostazione predefinita, non per decisione. PERCHÉ IN rem E NON IN px: chi ha ingrandito il carattere predefinito del browser non deve vedere il nostro sito ignorare la sua scelta. Qui NON si tocca html{font-size}: 1rem resta il default del browser, e il corpo vale 1.125rem — che fa 18px per tutti gli altri. FUORI SCOPO, di proposito: · il blocco @media print del simulatore, che usa i punti — per la carta sono l'unità giusta, e la stampa è il documento che il cliente porta via; · le @font-face e i caratteri auto-ospitati: qui cambiano le DIMENSIONI, non le famiglie. Fraunces e DM Sans restano dove sono, e la proprietà «zero chiamate esterne per i caratteri» non viene sfiorata. DA FARE QUANDO È APPROVATO — e non è un consiglio, è una scadenza: questa scala va in UN FILE SOLO incluso dai tre, non copiata in tre :root, E QUESTO QUARTO BLOCCO DEVE SPARIRE, non restare. Un file di ponte che diventa permanente è la stessa malattia del testo che sopravvive alla cosa che descriveva — la terza volta che la incontriamo in tre settimane. Un quarto blocco che vince per ordine di caricamento è una duplicazione mascherata: funziona finché nessuno tocca le altre tre, e il giorno che qualcuno modifica la :root locale non capirà perché non ha effetto e cercherà nel posto sbagliato. ===================================================================== */ :root { /* cinque gradini, uno solo per uso — 14 / 16 / 18 / 20 / 23 px */ --t-100: 0.875rem; /* SOLO etichette, date, numerali di sezione */ --t-200: 1rem; /* minimo assoluto per qualunque testo che si legge */ --t-300: 1.125rem; /* corpo */ --t-400: 1.25rem; /* sottotitoli, voci di elenco importanti */ --t-500: 1.4375rem; /* attacco di sezione, cifra */ /* TRE TITOLI FLUIDI — i coefficienti vw sono quelli del telefono, non quelli della scrivania. Il sito usava 2,6-4,4vw, questionario e simulatore 5-7,5vw: unificando le scale si unificano due filosofie, e la prima volta ha vinto la meno attenta — a 390px ogni titolo si rimpiccioliva e h2 e h3 diventavano identici. I minimi qui sotto sono quelli originali, che quasi sempre coincidevano fra i tre fogli. */ --t-700: clamp(2.25rem, 7vw, 3.5rem); /* 36 → 56 */ --t-600: clamp(1.875rem, 5.5vw, 2.875rem); /* 30 → 46 */ /* --t-550 esiste perché serviva un gradino fra 500 e 600: 26 → 34, il posto dei titoli di terzo livello (servizi, sezioni delle note, h3 del questionario). Senza questa riga, fra sei mesi sembra un residuo. */ --t-550: clamp(1.625rem, 4.5vw, 2.125rem); /* 26 → 34 */ /* tre interlinee al posto di sedici */ --lh-stretta: 1.2; /* titoli */ --lh-normale: 1.45; /* interfaccia, elenchi brevi */ --lh-lettura: 1.65; /* prosa */ /* COLONNA DI LETTURA — terza versione, ed è quella giusta. La diagnosi di Nicola era esatta (la pagina sembrava decentrata) ma la causa non era la colonna stretta: 616px a 18px fanno ~68 caratteri, dentro la misura ideale. Era COMPOSITIVA — una colonna da 616 sotto un'intestazione da 1180. Rimedio di teoria, e si stringe l'intestazione invece di allargare il testo: titolo, occhiello, corpo e firma nella STESSA colonna, centrata. Il vuoto sparisce perché non c'è più un elemento largo sopra uno stretto, e la riga resta a ~80 caratteri. Perché non 860: a quella misura la riga fa 95 caratteri, ed è la misura in cui l'occhio sbaglia riga tornando a capo — a 55 anni più che a 30. Su una pagina il cui unico scopo è essere letta è il posto sbagliato dove pagare. Se 720 sembrasse magro, si sale a 760: una riga, qui sotto. Vale SOLO per le pagine di lettura. Home, sezioni e schede restano larghe. --container-max NON si tocca: governa la griglia, non il testo. */ --colonna-lettura: 760px; /* 720 sembrava magra a Nicola guardando: un gradino su, come previsto dal file */ } /* --------------------------------------------------------------- 2 · SITO --------------------------------------------------------------- */ body { font-size: var(--t-300); line-height: var(--lh-lettura); } .hero-title { font-size: var(--t-700); line-height: var(--lh-stretta); } .section-title, .manifesto-text, .note-title { font-size: var(--t-600); line-height: var(--lh-stretta); } .service h3, .ns-head h3, .note-body h2, .note-card h3 { font-size: var(--t-550); line-height: var(--lh-stretta); } .hero-lead, .lede, .note-lead { font-size: var(--t-500) !important; line-height: var(--lh-normale); } .hero-place, .value h3, .step h3, .ns-list h4, .footer-brand, .note-body h3, .note-author-name { font-size: var(--t-400) !important; line-height: var(--lh-normale); } /* LA PROSA È CORPO — 18, ovunque si legge. (Correzione del 20/08: la prima mappatura l'aveva schiacciata a 16 e le pagine ballavano fra due corpi.) */ .section-intro, .service p, .value p, .step p, .ns-head p, .ns-list p, .note-body p, .note-body li, .note-card p, .contact-block address, .contact-block p { font-size: var(--t-300) !important; line-height: var(--lh-lettura); } /* il contorno resta a 16: si consulta, non si legge in fila */ .ns-more, .note-sources, .privacy-note, .cta-nota, .primary-nav a, .site-footer { font-size: var(--t-200) !important; line-height: var(--lh-lettura); } /* 14px SOLO dove non si legge un testo: etichette, date, marcature */ .primary-nav, .lang-switch, .hero-eyebrow, .btn, .section-label, .contact-block h3, .contact-block .label, .iban-row .bank, .iban-row .iban, .footer-copy, .footer-link, .note-meta, .back-link, .note-card-date, .note-card-more, .note-author-role, .stat dt { font-size: var(--t-100) !important; line-height: var(--lh-normale); } /* i numerali giganti restano decorazione, non testo */ .service-num, .step-num { line-height: 1; } .stat dd { font-size: var(--t-500); line-height: var(--lh-stretta); } .value-num { font-size: var(--t-100); } /* Il titolo della nota portava «max-width: 860px», misura della proposta scartata: non fa danno perché il contenitore a 720 lo comprime, ma è di nuovo il testo che sopravvive alla cosa che descriveva — quarta volta. Si toglie: la larghezza la decide la colonna, non il titolo. */ .note-title { max-width: none; } /* la colonna di lettura: intestazione E testo, la stessa, centrata. L'imbottitura si aggiunge, come fa il foglio del sito, altrimenti il testo si stringe due volte — è l'errore di stasera. */ .note-body, .note-hero .container { max-width: calc(var(--colonna-lettura) + var(--container-pad, 32px) * 2); } .note-hero .container { margin-inline: auto; } /* --------- «il testo si spalma e si adatta» (Nicola, 18/08 sera) --------- Nel foglio del sito ci sono otto blocchi con una larghezza massima fissa in pixel: 640, 680, 720, 760, 860, 920, 1000. Sono loro a dare l'aria di pagina decentrata, perché ciascuno si ferma a una misura diversa dentro una griglia larga 1180 — non c'è una regola, ci sono otto decisioni prese in momenti diversi. Col corpo cresciuto di due punti si notano di più. Qui diventano tre soli gradini, tutti fluidi: si allargano con lo schermo e si fermano quando la riga diventa troppo lunga per l'occhio. Se qualcuno di questi va stretto, si cambia UNA riga qui, non otto là. */ :root { --largo-testo: min(94vw, 860px); /* prosa lunga */ --largo-medio: min(92vw, 980px); /* attacchi di sezione, elenchi */ --largo-ampio: min(90vw, 1100px); /* blocchi che devono respirare */ } .hero-lead { max-width: var(--largo-testo); } .section-intro { max-width: var(--largo-testo); } .privacy-note { max-width: var(--largo-testo) !important; } .section-head { max-width: var(--largo-medio); } .ns-head { max-width: var(--largo-medio); } .service-body { max-width: var(--largo-medio); } .manifesto-text { max-width: var(--largo-ampio); } /* Rilievo di Nicola, 20/08: la riga dell'informativa stava appiccicata al bottone del percorso. Un pelo d'aria: la promessa si legge come nota a parte, non come coda del tasto. */ .note-cta { margin-bottom: 2em; } .note-cta + .note-sources { margin-top: 1.8em; } /* --------- la casella dello strumento, in cima ai contatti --------- Deve staccarsi dai recapiti senza gridare: stesso impianto dei blocchi contatto, un filo di fondo e il bordo sinistro del verde di casa. */ .contact-strumento { /* Variabili vere del foglio del sito, con valore di ripiego: questo foglio viene caricato anche dal questionario e dal simulatore, dove le variabili del sito NON esistono. Senza ripiego la regola muore in silenzio — che è esattamente il difetto appena corretto, in un'altra forma. */ background: var(--cream-200, #f2f7fb); border-left: 3px solid var(--accent, #5a87a8); border-bottom: 0; padding: 26px 28px; border-radius: 10px; margin-bottom: 34px; } .contact-strumento h3 { font-size: var(--t-400) !important; letter-spacing: 0; text-transform: none; margin-bottom: 10px; } .contact-strumento p { font-size: var(--t-200) !important; line-height: var(--lh-lettura); } .contact-strumento .btn { margin-top: 14px; } /* --------- spaziature: em, non px (teoria, 20/08) --------- Il corpo è cresciuto del 12,5% ma i margini cablati in px no: 8px sotto .value h3 e .ns-list h4, 10px sotto .step h3 — i titoli si appiccicavano al testo. In em crescono col corpo. La regola: un titolo sta più vicino al testo che introduce e più lontano da quello che chiude. .note-body h2 la rispettava già (52 sopra, 18 sotto): NON si tocca. */ .value h3, .ns-list h4, .step h3, .service h3, .ns-head h3, .screen h2, .passo-tit, .contatto-tit, .sez, .organico-tit { margin-top: 1.6em; margin-bottom: 0.45em; } .value h3:first-child, .step h3:first-child, .ns-list h4:first-child, .screen h2:first-child, .passo-tit:first-child { margin-top: 0; } .value p, .step p, .ns-list p { margin-bottom: 1.15em; } /* La voce «Simulatore» nel menù: si distingue dalle ancore perché porta a uno strumento, non a una sezione — colore pieno e peso medio, niente pillole né bordi: il registro del sito resta sobrio. */ .primary-nav .nav-strumento { color: var(--navy-800, #0e72b5); font-weight: 500; } .primary-nav .nav-strumento:hover { color: var(--navy-700, #0c5f96); } /* la barra divisoria IT/EN non è testo: passa a ink-500 — unico ritocco di contrasto, gli altri rapporti sono già sopra soglia (5,06-16,69) */ /* stava su --ink-300, rapporto 2,27: sotto soglia. Non è testo, ma è l'unico ritocco di contrasto che costa zero, quindi si fa. */ .lang-divider { color: var(--ink-500, #64707c); } /* --------------------------------------------------------------- 3 · QUESTIONARIO --------------------------------------------------------------- */ .screen h1 { font-size: var(--t-600); line-height: var(--lh-stretta); } .screen h2 { font-size: var(--t-550); line-height: var(--lh-stretta); } .lead-apertura { font-size: var(--t-400); line-height: var(--lh-normale); } .card p, .grandezza, .ponte, .pos-prof { font-size: var(--t-300); line-height: var(--lh-lettura); } .kicker, .btn { font-size: var(--t-200); line-height: var(--lh-normale); } .step-ind, .badge, .back { font-size: var(--t-100); line-height: var(--lh-normale); } /* le quattro che restavano fuori (criterio: le tabelle scendono di un gradino, il testo che si legge no) */ .lead, button.opt { font-size: var(--t-400); line-height: var(--lh-normale); } .sim-footer p, .sim-footer .muted { font-size: var(--t-200); line-height: var(--lh-normale); } /* --------------------------------------------------------------- 4 · SIMULATORE --------------------------------------------------------------- */ .passo-tit, .rep-titolo { font-size: var(--t-550); line-height: var(--lh-stretta); } .cifra { font-size: var(--t-600); line-height: var(--lh-stretta); } .passo-guida, .passo-nota, .aiuto, .blocco-come, .avvisi li, .contatto-testo, label, .scelta-grande em { font-size: var(--t-300); line-height: var(--lh-lettura); } .nota-tab { font-size: var(--t-200); line-height: var(--lh-normale); } .scelta-grande strong, .contatto-tit, .sez { font-size: var(--t-400); line-height: var(--lh-normale); } .step-ind, .sim-tag, .vedute, .org-nota, .diritti-schermo { font-size: var(--t-100); line-height: var(--lh-normale); } /* --------- le venti che restavano fuori, mappate da teoria --------- Erano quasi tutte selettori di elemento nudo: invisibili a un estrattore che legge il file unico minificato, e infatti gli erano sfuggite. Criterio: LE TABELLE SCENDONO DI UN GRADINO, IL TESTO CHE SI LEGGE NO. */ .vinc { font-size: var(--t-100); } .hint, .sotto, ul.mini, table.tab, table.tab thead th, table.tab-min { font-size: var(--t-200); line-height: var(--lh-normale); } /* «.blocco ul» va a 18 e non a 16 perché sono punti elenco che si LEGGONO, non una tabella: è la differenza fra consultare e leggere. */ .brand, .blocco ul, .frase-fissa, details.dett summary { font-size: var(--t-300); line-height: var(--lh-lettura); } /* Gerarchia interna — correzione di teoria del 20/08, e la diagnosi va ricordata: la prima mappatura aveva unificato i NOMI degli elementi invece dei loro RUOLI. Nel sito h2 è un titolo di sezione; nel simulatore è un titolo interno di blocco, e valeva 24 in una scala ordinata 16/19/24/30. Ora: h4 20 · h3 23 · h2 26→34 · .cifra 30→46 — il risultato spicca sopra ogni titolo interno. */ h4 { font-size: var(--t-400); line-height: var(--lh-normale); } /* i campi a 20 perché sono IL PUNTO DI CONTATTO SUL TELEFONO: lì si tocca, e un bersaglio piccolo si sbaglia. */ .lead, legend, input[type=number], select { font-size: var(--t-400); line-height: var(--lh-normale); } h3, .organico-tit, .soglia-tit { font-size: var(--t-500); line-height: var(--lh-normale); } h2 { font-size: var(--t-550); line-height: var(--lh-stretta); } h1 { font-size: var(--t-700); line-height: var(--lh-stretta); }