/* SeaStrike: scala tipografica unica. ------------------------------------------------------------------ PERCHE' ESISTE QUESTO FILE Prima i titoli seguivano due leggi diverse: gli H1 erano fluidi (clamp legato alla larghezza della finestra) e gli H2 erano a gradini fissi di Tailwind (text-3xl che diventa text-4xl a 640px). Due leggi che a un certo punto si incrociano: fra 640px e 818px di larghezza il sottotitolo diventava piu' grande del titolo. E' la finestra del tablet in verticale e del browser non a schermo intero. Qui tutti i livelli interpolano nella STESSA finestra, da 375px a 1280px di larghezza. Muovendosi con la stessa legge non possono incrociarsi: l'ordine di grandezza e' garantito a qualsiasi larghezza, dai 320px in su. REGOLA: un titolo prende UNA di queste classi e nient'altro. Niente text-3xl, niente font-bold, niente letter-spacing a mano. Peso, interlinea e crenatura sono gia' dentro il livello: e' quello che tiene insieme nove pagine invece di farle andare ognuna per conto suo. I livelli, dal piu' forte al piu' debole: .t-hero 42 -> 72px il titolo della home, uno per sito .t-titolo 34 -> 56px l'H1 di una pagina interna, uno per pagina .t-sezione 27 -> 38px gli H2, i capitoli della pagina .t-scheda 21 -> 24px gli H3 importanti (le schede in evidenza) .t-voce 18 -> 21px gli H3 minori (elenchi, schede piccole) .occhiello 12px la righetta maiuscola sopra il titolo .lede 16 -> 19px il paragrafo di apertura, non e' un titolo REVISIONE DEL 24/08/2026, I MINIMI. La scala interpolava fra 375px e 1280px ma il corpo del testo no: resta 16px sempre. Cosi' a 375px i livelli bassi finivano addosso al testo che dovevano introdurre. Misurato su 88 titoli: 37 stavano sotto 1,2 volte il proprio paragrafo e 25 erano piu' PICCOLI del paragrafo (.t-voce a 15px sopra un testo da 16px). A 1280px invece andava bene. Quindi si sono alzati i minimi, non i massimi, e ora ogni livello a 375px stacca di almeno 1,16 volte da quello sotto: 42 / 34 / 27 / 21 / 18, con il corpo a 16 e l'occhiello a 12. Il massimo di .t-voce e' 21 e non 19 per un secondo motivo: a 19 finiva esattamente sul .lede, cioe' un titolo piccolo e un paragrafo di apertura avevano lo stesso corpo. L'ordine va tenuto su TUTTA la scala, non solo in fondo. Chi cambia questi numeri rimisuri: il vincolo e' il rapporto col CORPO del testo a 375px, non l'estetica del numero. I DISTACCHI SI APRONO VERSO IL BASSO, NON VERSO L'ALTO. Sullo schermo piccolo lo spazio e' poco e la tentazione e' rimpicciolire il titolo: sbagliato, perche' cosi' titolo e sottotitolo si avvicinano e la gerarchia sparisce proprio dove serve di piu'. Si tiene alto il titolo e si abbassano i livelli sotto. Sul telefono l'H2 e' 1.8 volte piu' piccolo del titolo della home (prima era 1.5) e 1.43 volte piu' piccolo dell'H1 di una pagina interna (prima 1.31, cioe' quasi pari). ------------------------------------------------------------------ */ /* --- I caratteri, ospitati sul nostro dominio come gli altri --------- Archivo per i titoli: e' un grottesco da stampa, con pesi fino a 900. Regge il maiuscolo e i corpi grandi senza sembrare un carattere da presentazione. Inter per il testo, disegnato per lo schermo. Sono variabili: un file copre tutti i pesi. Il file "latin-ext" lo scarica solo chi apre una pagina con caratteri fuori dall'alfabeto base. Vedi ISTRUZIONI-COMPILAZIONE.md. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 100%; font-display: swap; src: url(../fonts/archivo-latin-ext-var.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 100%; font-display: swap; src: url(../fonts/archivo-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/inter-latin-ext-var.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/inter-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Le famiglie ------------------------------------------------------ Attive solo sulle pagine che hanno class="tipo-2" sul , cosi' si puo' provare la tipografia nuova su una pagina sola senza toccare le altre. Quando la scala sara' su tutte, si toglie lo scope. */ body.tipo-2 { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-feature-settings: "cv05" 1; /* la l con la coda: non si confonde con la I */ } body.tipo-2 h1, body.tipo-2 h2, body.tipo-2 h3, body.tipo-2 h4, body.tipo-2 .font-display { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; } /* --- I livelli -------------------------------------------------------- La crenatura si stringe man mano che il corpo cresce: e' il motivo per cui un titolo grande "tiene" invece di sembrare sparpagliato. Al corpo piccolo si allarga, perche' li' serve leggibilita', non compattezza. */ .t-hero { font-size: clamp(2.625rem, 1.8481rem + 3.3149vw, 4.5rem); line-height: .95; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; } .t-titolo { font-size: clamp(2.125rem, 1.5553rem + 2.4309vw, 3.5rem); line-height: 1.02; letter-spacing: -.026em; font-weight: 800; text-wrap: balance; } .t-sezione { font-size: clamp(1.6875rem, 1.4026rem + 1.2155vw, 2.375rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; } .t-scheda { font-size: clamp(1.3125rem, 1.2348rem + 0.3315vw, 1.5rem); line-height: 1.2; letter-spacing: -.012em; font-weight: 700; } .t-voce { font-size: clamp(1.125rem, 1.0473rem + 0.3315vw, 1.3125rem); line-height: 1.35; letter-spacing: -.006em; font-weight: 600; } /* La righetta maiuscola sopra il titolo. Non e' un titolo: e' un'etichetta che dice dove sei. Corpo fermo, perche' crescendo diventerebbe rumore. */ .occhiello { font-size: .75rem; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; } /* Il paragrafo di apertura. Grande quasi come una voce, ma leggero e in grigio: si legge come testo, non compete con i titoli. */ .lede { font-size: clamp(1rem, 0.9223rem + 0.3315vw, 1.1875rem); line-height: 1.6; font-weight: 400; } /* Un titolo su fondo scuro va alleggerito di mezzo peso: il bianco su scuro "ingrassa" otticamente e a peso pieno sembra sbavato. */ body.tipo-2 .su-scuro.t-hero, body.tipo-2 .su-scuro.t-titolo { font-weight: 700; } body.tipo-2 .su-scuro.t-sezione { font-weight: 600; } body.tipo-2 .su-scuro.t-scheda { font-weight: 600; } body.tipo-2 .su-scuro.t-voce { font-weight: 500; } /* --- L'accento dentro il titolo --------------------------------------- Un titolo tutto dello stesso colore e dello stesso peso e' ordinato ma muto: l'occhio non sa dove cade il senso, e la pagina finisce per sembrare un blog. `.acc` stacca la parte che porta il significato. CORRETTO IL 24/08/2026, DOPO AVER MISURATO. Al primo tentativo `.acc` colorava la parte accentata di azzurro medio lasciando il resto pieno. Misurato sulla pagina vera: su fondo navy il bianco ha contrasto 17,56 e quell'azzurro 6,13. Cioe' la parte che doveva arrivare per prima era la MENO visibile del titolo: l'accento faceva arretrare la battuta finale invece di spingerla. Errore classico, e si vede solo guardando. La regola giusta: **non si accende l'accento, si smorza il resto.** La parte accentata resta al massimo del contrasto e la parte introduttiva scende di tono. Cosi' il titolo ha due voci (non e' piu' monocolore) e il peso sta dove deve stare. I due colori dell'accento sono tinte del blu di marca scelte per battere sempre la parte smorzata: | fondo | parte introduttiva | parte accentata | contrasto | |--------|-------------------------|-----------------|-----------| | chiaro | #6E7891 (circa 4,4) | #12447A | circa 8,6 | | scuro | bianco 58% (circa 5,4) | #A8D8FF | circa 11,4| RIVISTO IL 25/08/2026, DOPO AVER MISURATO TUTTE E 13 LE PAGINE. Segnalazione: "i titoli sono poco visibili, sono nascosti". Era vero e misurabile: la parte introduttiva, che e' la maggioranza delle parole del titolo, stava a 4,41 su bianco e a 3,96 sull'azzurro chiaro. Si leggeva come testo disabilitato. Il primo tentativo di correzione (#3E4A66) e' stato SCARTATO perche' risolveva la leggibilita' ma annullava l'effetto: rapporto di luminosita' 1,11 contro l'accento, cioe' le due voci diventavano una sola. Valori scelti, e perche': chiaro: #515C7A -> 6,64 su bianco e 5,96 su #EAF4FC, e resta 1,48 volte piu' chiaro dell'accento: lo stacco si sente ancora. scuro : bianco 70% -> 9,45 su navy, accento 1,34 volte piu' chiaro. NON si sale a 72%: li' il rapporto scende a 1,27 e lo stacco si perde. Misurato, non stimato. In piu' l'accento passa a peso 900: parte dello stacco si sposta dal colore al peso, che e' il modo giusto di farlo su un titolo. REGOLA: **una sola** parte accentata per titolo, e deve essere quella che cambia il senso, non quella che suona bene. Due accenti in un titolo si annullano a vicenda e si torna al monocolore. */ /* la parte introduttiva si smorza, ma solo nei titoli che hanno un accento: un titolo senza `.acc` resta pieno com'era */ body.tipo-2 h1:has(.acc), body.tipo-2 h2:has(.acc), body.tipo-2 h3:has(.acc) { color: #515C7A; } body.tipo-2 .su-scuro:has(.acc) { color: rgba(255,255,255,.70); } /* L'hero fa eccezione: il titolo sta sopra una fotografia, non sopra un navy pieno. Verificato a schermo il 24/08: al 58% il testo si perdeva contro il mare chiaro. Sopra un'immagine la leggibilita' viene prima dello stacco, e l'85% e' abbastanza per far sentire le due voci senza indebolire il titolo. */ body.tipo-2 .t-hero:has(.acc) { color: rgba(255,255,255,.85); } /* la parte che deve arrivare: sempre il contrasto piu' alto del titolo. Il peso 900 e' la seconda voce: dal 25/08/2026 lo stacco non e' piu' affidato al solo colore, perche' alzando la parte smorzata (vedi sotto) la distanza di luminosita' si riduce e da sola non basterebbe piu'. */ body.tipo-2 .acc { color: #12447A; font-weight: 900; } body.tipo-2 .su-scuro .acc, body.tipo-2 .t-hero .acc { color: #A8D8FF; }