/* ═══════════════════════════════════════════════════════════════════════════ SLIDE IN GAMES — il vestito, in un file solo v2.0 · agosto 2026 · riconciliazione di `design-tokens.css` v1.0 (brand book) con il `:root` di `public/sito/sito.css`. È IL FOGLIO DI TUTTE E VENTUNO LE PAGINE. Per tutta la migrazione è stato accanto a `sito.css`, e le pagine ci sono passate una per volta — cambiare `sito.css` sotto i piedi avrebbe restilizzato in un colpo solo le dieci che lo linkavano, e il giorno che una non fosse tornata non ci sarebbe stato modo di tornare indietro solo per quella. `sito.css` è sparito con l'ultima. ── COSA È SUCCESSO NELLA RICONCILIAZIONE ───────────────────────────────── I due sistemi NON si scontravano quasi mai: su 31 nomi vecchi e 138 nuovi, ne coincidevano QUATTRO. `--sig-fondo` contro `--sig-sfondo`, `--sig-carta` contro `--sig-superficie`, `--sig-sp-1` contro `--sig-spazio-1`: due vocabolari per le stesse cose. Tenerli tutti e due avrebbe voluto dire due file che convivono in silenzio, ognuno che serve la sua metà delle pagine, e nessun errore da nessuna parte — che è peggio di uno scontro, perché uno scontro si vede subito. Quindi: LA SCALA DEL BRAND È LA SORGENTE, i 31 nomi vecchi diventano RUOLI che puntano lì. Le 297 chiamate `var(--sig-…)` sparse in 24 file continuano a funzionare e prendono la palette nuova da sole. Si riscrivono 31 righe invece di 297 chiamate, e il giorno che si vuole tornare indietro si riscrivono le stesse 31. ── LE CINQUE COSE CHE NON SONO UNA TRADUZIONE ──────────────────────────── 1. IL LIME NON PUÒ FARE DA LINK. `--sig-accento` era il verde #1f6f5c e serviva a due mestieri: fondo dei bottoni e colore dei link. Nel brand nuovo l'azione primaria è il lime #8DC63F, che su fondo chiaro dà 1.90 di contrasto — il brand stesso dice «MAI come testo», e ha ragione. I due mestieri si separano: i bottoni prendono il lime, i link il blu. 2. `--sig-accento-su` SI MUOVE CON L'ACCENTO. Era bianco. Bianco sul lime fa 2.04. Diventa blu-900, che fa 8.46 — ed è la regola che il brand book scrive per esteso: «mai bianco sul lime». 3. `--sig-bordo-forte` NON PRENDE IL VALORE DEL FILE NUOVO. Lì vale #E4EAF2, che su bianco fa 1.21 — cioè MENO di `--sig-bordo` (#DDE6F2, 1.26): un bordo "forte" più debole di quello normale. Sembra uno scambio di valori. Qui vale #C3D0E0 (1.56). Non è una licenza: quel bordo disegna il contorno dei bottoni secondari, e a 1.21 il bottone sparisce. 4. IL TEMA SCURO NON SEGUE IL SISTEMA. Il file del brand faceva scattare la modalità scura su `prefers-color-scheme: dark`. Applicato così, la vetrina diventerebbe scura sul telefono di chiunque abbia il tema scuro attivo — un restyling che nessuno ha chiesto, e le fasce `.sig-sezione.scura` diventerebbero scure su scuro. Qui il tema scuro si chiede: è il gestionale a dichiararlo con `data-tema="scuro"` sul suo ``, perché è scuro di mestiere e non per preferenza di sistema. 5. `.sig-etichetta` ESISTEVA GIÀ, E VOLEVA DIRE UN'ALTRA COSA. In `sito.css` è la pillola che dice «3 posti liberi» (index e area la usano); nel file del brand è una didascalia maiuscoletta. Vince chi ha degli usi: la didascalia si chiama `.sig-microtesto`. ── IL CARATTERE ────────────────────────────────────────────────────────── NON C'È PIÙ NESSUN `@import` QUI. Ogni pagina si porta il proprio `` con i due `preconnect`, che è l'unico modo perché il font parta insieme al foglio: con l'`@import` il browser deve prendere questo file, scoprire l'import, prendere il foglio del font e solo allora il font — tre viaggi in fila prima che si veda una lettera. L'eccezione è `offline.html`, che di proposito NON lo carica: si vede quando la rete non c'è, e tre richieste che non possono riuscire vorrebbero dire una pagina mezza vuota proprio nel momento in cui deve funzionare. Si legge con lo stack di ripiego qui sotto, che per questo non è decorativo. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ══ LA SCALA DEL BRAND ═══════════════════════════════════════════════════ Valori grezzi. Non si usano direttamente nelle regole: si usano i ruoli. */ --sig-blu-900: #0C1B30; /* testo principale, e il navy del marchio */ --sig-blu-800: #122640; --sig-blu-700: #1C3A5E; --sig-blu-500: #2A5A8F; /* la S del logo, sezioni piene, link */ --sig-blu-400: #3D7BC0; --sig-blu-300: #7BA8DC; --sig-blu-100: #D6E4F5; /* ── LA SCALA DI LUMINOSITÀ DEL TEMA SCURO ─────────────────────────────── Il tema scuro prendeva tre navy della scala del marchio — 900, 800, 700 — e li usava come fondo, superficie e superficie premuta. Non erano nati per quel mestiere, e il numero lo diceva: fra il fondo pagina e la superficie di una scheda c'era 1,13 a 1. Cioè NIENTE. Il risultato era blu su blu: tutto sullo stesso piano, e nessun pannello che si staccasse. Un tema scuro fatto bene la profondità la fa con la LUCE, non con la tinta: una scala di livelli della stessa tinta, ognuno visibilmente più chiaro di quello sotto. Questi sono quattro gradini misurati, non scelti a occhio — 1,35 · 1,33 · 1,30 fra un livello e il successivo, cioè un terzo di luce in più ogni volta. `fasce-adattive.test.js` li rimisura a ogni giro: chi ne schiaccia uno trova il rosso. 0 il fondo della pagina: il più scuro, e sotto non c'è niente 1 le superfici: schede, tabelle, il pannello della serata 2 quelle in evidenza: le fasce, le righe sotto il dito, i pannelli che devono staccarsi da una superficie normale 3 i bordi, che devono vedersi sopra il livello 2 Sul tema CHIARO questa scala non serve e non si usa: là la carta bianca sul fondo azzurrino si stacca da sola, e la profondità la danno i bordi. */ --sig-livello-0: #070F1E; --sig-livello-1: #142B4A; --sig-livello-2: #20405F; --sig-livello-3: #2B5178; --sig-petrolio-500: #1E7A8C; /* l'incrocio del logo */ --sig-verde-800: #1B6B2A; /* il verde QUANDO È TESTO su fondo chiaro */ --sig-verde-500: #4DAF4F; /* la G del logo — 2.59 come testo: non è testo */ --sig-lime-500: #8DC63F; /* accento pieno — 1.90 come testo: mai testo */ /* L'unica eccezione alla regola del lime, e ha un nome suo apposta: la CIFRA su fondo scuro. Sul navy il lime sta a 8.5:1 — il divieto vale sul chiaro, e chi usa questo token dichiara che il fondo è scuro. */ --sig-cifra-su-scuro: var(--sig-lime-500); --sig-verde-300: #B8DE7A; --sig-verde-100: #E9F5D2; /* Il gradino che mancava, e che serviva da quando esiste il tema scuro: il verde-100 è una superficie da fondo CHIARO, e sul navy diventa una targhetta che abbaglia. Questo è il suo gemello — era già scritto a mano come fondo degli avvisi «andata bene», e adesso ha un nome. */ --sig-verde-900: #113A16; --sig-oro: #F5A623; /* punti, premi, vittorie. 1.89: mai testo */ --sig-oro-300: #FFD66B; /* l'oro QUANDO È TESTO su un fondo scuro */ /* ══ I COLORI DEI NUMERI DELLE CHIAMATE ═══════════════════════════════════ Il titolare, 4 novembre 2026: ogni numero ha il suo colore, forte e fisso, per riconoscere a colpo d'occhio chi chiamare. Si cambiano solo qui. Ogni numero ha il fondo e il testo scritto sopra (`-su`), a contrasto AA: sono gli stessi nei due temi, e `test/colori-numeri.test.js` li rimisura. Dopo l'ottavo si ricomincia dal primo (`coloreNumero` in chiamate-in-campo.js). */ --sig-numero-1: #C8102E; /* rosso */ --sig-numero-1-su: var(--sig-bianco); --sig-numero-2: #1D4ED8; /* blu */ --sig-numero-2-su: var(--sig-bianco); --sig-numero-3: #15803D; /* verde */ --sig-numero-3-su: var(--sig-bianco); --sig-numero-4: #FFD600; /* giallo */ --sig-numero-4-su: var(--sig-blu-900); --sig-numero-5: #F97316; /* arancione */ --sig-numero-5-su: var(--sig-blu-900); --sig-numero-6: #7E22CE; /* viola */ --sig-numero-6-su: var(--sig-bianco); --sig-numero-7: #38BDF8; /* azzurro */ --sig-numero-7-su: var(--sig-blu-900); --sig-numero-8: #F472B6; /* rosa */ --sig-numero-8-su: var(--sig-blu-900); /* ══ GLI SPICCHI DELLA RUOTA ══════════════════════════════════════════════ Fino al 16 settembre 2026 qui c'erano otto fondi chiari che servivano a DISTINGUERE e basta — uno spicchio non è «andata bene» né «attenzione», è «un altro» — con sopra il nome del bonus scritto in scuro. Non stava in piedi sul telefono. Nove spicchi su un disco da 274 px lasciano a ogni nome sessantadue pixel di corda: «Squadra oltre i cinesini» non ci entra né su una riga né su due, e a 844×390 la corda scende a trentacinque e le parole si spezzano a metà. MISURATO, non immaginato. Quindi lo spicchio non porta più il nome: porta un NUMERO, e il nome per esteso si legge sotto la ruota quando si ferma. E siccome il numero è l'unica cosa che identifica lo spicchio, il colore è libero di dire l'altra cosa — quella che prima non diceva nessuno e che in campo conta per prima: VERDE se è un bonus, ROSSO se è un malus. Si vede mentre la ruota gira, prima ancora di leggere. TRE GRADAZIONI PER FAMIGLIA, non otto colori: servono solo a staccare uno spicchio dal suo vicino, e a distinguerli ci pensa il numero. La pagina le alterna in modo che due spicchi accanto non siano mai uguali. TUTTE E SEI REGGONO UNA CIFRA BIANCA. È il vincolo che le ha scelte: i verdi si fermano prima di `--sig-verde-500` (che col bianco sta a 2,8 e non basta) e i rossi si scuriscono verso il navy invece di schiarirsi. Costruite dai token che ci sono — nessun esadecimale nuovo — e da token che NON cambiano col tema: `--sig-errore-testo` nel buio diventa chiaro, quindi qui non si usa. */ --sig-ruota-bonus-1: var(--sig-verde-900); --sig-ruota-bonus-2: var(--sig-verde-800); /* 68 e non 55: a 55 la cifra bianca ci sta sopra a 4,37, e in orizzontale la cifra è alta 16 px — grassetta ma non abbastanza da contare come «testo grande», quindi la soglia che le tocca è 4,5 e non 3. A 68 sta a 4,96. MISURATO nel browser: `color-mix` lo risolve solo lui. */ --sig-ruota-bonus-3: color-mix(in srgb, var(--sig-verde-800) 68%, var(--sig-verde-500)); --sig-ruota-malus-1: color-mix(in srgb, var(--sig-errore) 55%, var(--sig-blu-900)); --sig-ruota-malus-2: color-mix(in srgb, var(--sig-errore) 78%, var(--sig-blu-900)); --sig-ruota-malus-3: var(--sig-errore); --sig-ruota-cifra: var(--sig-bianco); --sig-gradiente-logo-scuro: linear-gradient(96deg, color-mix(in srgb, var(--sig-blu-500) 65%, var(--sig-blu-900)), color-mix(in srgb, var(--sig-verde-500) 65%, var(--sig-blu-900))); --sig-gradiente-logo: linear-gradient(96deg, var(--sig-blu-500), var(--sig-petrolio-500) 50%, var(--sig-verde-500)); /* ══ I GRADIENTI, E A COSA SERVONO ═══════════════════════════════════════ Non sono decorazione: sono il SOSTITUTO dell'immagine dove l'immagine non c'è. Un sito con poche foto o si riempie di rettangoli grigi con scritto «immagine qui», oppure impara a stare in piedi senza — e questi tre sono il modo. IL VELO SOPRA IL VIDEO. Verticale, da trasparente in alto a navy pieno in basso: il testo sta sempre nella parte piena, e non c'è nessun fotogramma che possa renderlo illeggibile. Il navy è LO STESSO NEI DUE TEMI, ed è il livello 0 della scala. Costruito sul fondo pagina (`--sig-velo-rgb`) il velo diventava quasi bianco in tema chiaro, e il testo dell'eroe — che è bianco, perché sotto c'è una foto — spariva. L'eroe non è un pezzo di pagina che si adatta: è una fascia SCURA, come `.sig-sezione.scura`, e le fasce scure sono scure in tutti e due i temi. Le componenti separate servono perché dentro una `rgba()` un colore intero non ci sta. LA FASCIA SCURA. Il gradiente del marchio schiarito verso il navy: i tre colori del logo restano riconoscibili e il bianco ci sta sopra a contrasto pieno su tutti e tre. È diagonale, e va da sinistra in alto a destra in basso. LA CARTA SENZA FOTO. Tenue, e nella direzione OPPOSTA a quella delle fasce: due gradienti che corrono nello stesso verso si leggono come la stessa cosa, e la carta finirebbe per sembrare un pezzo di fascia. MAI su testo, mai su superfici piccole: un gradiente sotto i cento pixel è una banda sporca, non una sfumatura. */ --sig-eroe-rgb: 7, 15, 30; /* il livello 0, in componenti */ /* ══ LA CODA NON ARRIVA PIÙ AL NERO PIENO ═══════════════════════════════ Il titolare, 13 settembre 2026: «il gradiente copre troppo della foto, voglio più immagine visibile — tenendo la sfumatura senza stacchi». Gli ultimi due fermi erano .94 e 1 (nero pieno), e costavano l'immagine due volte. La prima è ovvia: sotto l'82% dell'altezza la foto non si vede più, qualunque cosa faccia il resto. La seconda è indiretta, ed è quella che pesava di più: un velo che annerisce OLTRE il colore con cui comincia la sezione sotto obbliga la sfumatura dell'eroe a risalire, e per non far vedere quella risalita bisognava allungarla su mezza fotografia. Misurato, tarando le due cose insieme: con la coda intera lo scatto si spegneva a 162 pixel dal fondo e per tenere il passaggio pulito ci voleva una rampa alta il 58%; con la coda ammorbidita si spegne a 86, cioè arriva quasi il doppio più in basso, e alla rampa ne bastano 26 — e il confine resta identico al pixel (1,03 sullo scuro, 1,003 sul chiaro). Il velo non smette di fare il suo mestiere: al 68% è ancora .90, che è dove sta il titolo. Rimisurato dopo: titolo 16,4 sullo scuro e 15,3 sul chiaro, cioè più di prima — la foto sotto è meno schiacciata, ma anche il lavaggio chiaro che la rampa alta ci metteva sopra non c'è più. */ --sig-velo-eroe: linear-gradient(180deg, rgba(var(--sig-eroe-rgb), .18) 0%, rgba(var(--sig-eroe-rgb), .62) 45%, rgba(var(--sig-eroe-rgb), .80) 82%, rgba(var(--sig-eroe-rgb), .86) 100%); /* ══ TRE STOP ERANO POCHI ═════════════════════════════════════════════ Il titolare, guardando il sito accanto ad altri dello stesso mestiere: «i gradienti sono timidi, sembrano quasi tinte piatte». Aveva ragione, e il perché è aritmetico: tre stop equidistanti su una diagonale danno una rampa quasi lineare, e l'occhio una rampa lineare la legge come un colore solo un po' sporco. Quello che si riconosce come «gradiente» è la VARIAZIONE DI VELOCITÀ — un tratto che cambia in fretta accanto a uno che quasi non cambia. Quindi: cinque stop invece di tre, non equidistanti (18, 42, 68, 88), e il navy profondo in coda a chiudere. I tre colori del marchio restano tutti e tre riconoscibili — è la stessa scala, letta più lentamente. E la LUCE: sopra la rampa c'è un alone radiale caldo che entra da un angolo, come una lampada fuori campo. È la cosa che manca alle tinte piatte — non un altro colore, una direzione da cui arriva. Sta come PRIMO strato perché i background-image si impilano dal primo in su. */ --sig-gradiente-fascia: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, 0) 72%), linear-gradient(135deg, color-mix(in srgb, var(--sig-blu-500) 72%, var(--sig-blu-900)) 0%, color-mix(in srgb, var(--sig-blu-500) 52%, var(--sig-blu-900)) 18%, color-mix(in srgb, var(--sig-petrolio-500) 68%, var(--sig-blu-900)) 42%, color-mix(in srgb, var(--sig-petrolio-500) 46%, var(--sig-blu-900)) 68%, color-mix(in srgb, var(--sig-verde-500) 62%, var(--sig-blu-900)) 88%, color-mix(in srgb, var(--sig-verde-500) 40%, var(--sig-blu-900)) 100%); /* Lo stesso gradiente letto dall'altra parte. Serve a due fasce scure vicine: uguali si leggono come una fascia sola ripetuta, specchiate si leggono come due momenti diversi della stessa pagina. */ --sig-gradiente-fascia-rovescio: radial-gradient(120% 90% at 88% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, 0) 72%), linear-gradient(225deg, color-mix(in srgb, var(--sig-verde-500) 40%, var(--sig-blu-900)) 0%, color-mix(in srgb, var(--sig-verde-500) 62%, var(--sig-blu-900)) 12%, color-mix(in srgb, var(--sig-petrolio-500) 46%, var(--sig-blu-900)) 32%, color-mix(in srgb, var(--sig-petrolio-500) 68%, var(--sig-blu-900)) 58%, color-mix(in srgb, var(--sig-blu-500) 52%, var(--sig-blu-900)) 82%, color-mix(in srgb, var(--sig-blu-500) 72%, var(--sig-blu-900)) 100%); /* La carta senza foto: stessa cura, verso opposto. Quattro stop e una luce appena accennata nell'angolo alto — su una superficie piccola l'alone dev'essere molto più discreto, o diventa una macchia. */ --sig-gradiente-carta: radial-gradient(90% 70% at 88% 4%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(315deg, var(--sig-superficie) 0%, color-mix(in srgb, var(--sig-superficie) 60%, var(--sig-superficie-alta)) 38%, color-mix(in srgb, var(--sig-superficie-alta) 80%, var(--sig-superficie)) 74%, var(--sig-superficie-alta) 100%); /* ══ LA GRANA ═════════════════════════════════════════════════════════════ «I fondi piatti sembrano piatti.» Sono piatti: un colore solo su millecinquecento pixel è una superficie che non esiste in natura, e in una foto accanto si vede la differenza. La grana è rumore, disegnato QUI e non scaricato: un `feTurbulence` di SVG dentro una data-URI. Nessun file, nessuna richiesta, nessun host di terzi — e resta nitida a qualunque densità di schermo, perché è un filtro, non un'immagine ingrandita. `baseFrequency` alta (.85) è grana fine, da carta fotografica; più bassa sarebbe nuvola. L'opacità è quella che fa la differenza fra «materiale» e «sporco»: sotto il 4% non si vede, sopra l'8% si legge come un difetto di compressione. Sta a 5, e in tema scuro a 7 — il rumore sul nero si vede meno, e la stessa quantità sembra di meno. */ --sig-grana-forza: .05; --sig-grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"); /* ══ IL BORDO LUMINOSO ════════════════════════════════════════════════════ La riga di luce sul filo alto di una superficie. È come si dice «questa cosa sta SOPRA» senza sfocare niente: la luce arriva dall'alto, il bordo superiore la prende, e il resto no. Un'ombra dice «c'è dello spazio sotto»; il filo dice «c'è uno spessore qui». Servono tutti e due, e costano un `inset` per uno. */ --sig-luce-alto: inset 0 1px 0 rgba(255, 255, 255, .55); --sig-luce-bordo: inset 0 0 0 1px rgba(255, 255, 255, .06); /* ── Neutri ───────────────────────────────────────────────────────────── Mai bianco puro come fondo pagina: il bianco è la carta che ci sta sopra, e serve che si distingua. */ --sig-bianco: #FFFFFF; --sig-base: #F4F7FB; /* ══ IL FONDO PAGINA DEL CHIARO, E PERCHÉ NON È PIÙ `--sig-base` ════════ Il titolare, 12 settembre 2026: «nel tema scuro le sezioni si alternano e si distinguono. Nel chiaro sono quasi tutte bianche di fila, e la pagina sembra piatta». Misurato su 35 pagine, il difetto è UN NUMERO e non il numero di sezioni: fondo → carta ombra della carta scuro 1,34 32% chiaro 1,07 6% I due strumenti che staccano una carta dal fondo sono cinque volte più deboli sul chiaro. E c'è un precedente scritto qui sotto, nel blocco del tema scuro: quello è stato rifatto proprio perché «fra il fondo e una scheda c'era 1,13 a 1 — cioè niente». Il chiaro stava a 1,07: sotto il difetto già bocciato dall'altra parte. `--sig-base` resta dov'era perché non è solo il fondo pagina: è anche il TESTO sopra le fasce scure (`--sig-scuro-testo`) e la superficie inversa del tema scuro. Scurire quello vorrebbe dire spegnere il titolo dell'eroe per sistemare un fondo. QUANTO GIÙ SI PUÒ ANDARE, e non di più: `--sig-superficie-alta` è il blu-100 (1,29 dal bianco), e il fondo gli si avvicina da sotto. A 1,16 i due livelli si distinguono ancora (1,12 fra loro); più giù si toccano, e il livello «in evidenza» sparisce. Il gradino successivo si compra solo riscrivendo anche quello, e quella è un'altra decisione. COSA COSTA: il grigio secondario su questo fondo passa da 5,08 a 4,71 e l'ambra da 3,53 a 3,28. Restano tutti e due sopra la loro soglia (4,5 per il testo, 3 per bordi e testo grande), ma il margine si è ristretto: chi tocca quei due colori adesso ha meno spazio di prima. */ --sig-base-fondo: #E2E9F3; /* era #E8EFF9: la carta bianca ci stava sopra a 1,16:1, cioè non si staccava (giro grafico, 30 ottobre 2026) */ /* Un gradino SOTTO il fondo, come prima: `.sig-sezione.tenue` e lo stato premuto sono un passo verso il blu, non verso il bianco, e il verso non cambia solo perché il fondo si è spostato. Stessa distanza di prima. */ --sig-base-alt: #DFEAF7; --sig-grigio-testo: #475769; /* 6,06 sul fondo, 7,41 sulle carte (30 ottobre 2026). Era #54657A, 5,16 sul fondo: passava, ma era il grigio che faceva il sito «troppo bianco» insieme ai bordi */ /* 5.16 sul fondo, 4.90 sulla superficie-alt, 4.62 sulle carte delle serate e del quiz: passa AA su tutte e tre. Era #5A6B80, che faceva 4,48 e 4,36 sulle ultime due (misurato nel browser, audit del 13 settembre 2026) */ --sig-grigio-chiaro: #B8C4D0; /* secondario su fondo scuro */ --sig-disabilitato: #A8B4C2; /* 1.96: è disabilitato, e si deve vedere che lo è */ /* ── Semantici ──────────────────────────────────────────────────────────*/ --sig-errore: #B03226; /* 5.06 su base */ --sig-errore-sfondo: #FBE9E7; --sig-errore-testo: #8E2A20; /* 7.81 */ --sig-successo: #1B6B2A; /* 6.14 */ --sig-successo-sfondo: #E9F5D2; --sig-successo-testo: #14501F; /* 3.53 su base: basta per bordi e testo grande, NON per un paragrafo. Dove serve testo piccolo si usa `--sig-attenzione-testo`. */ --sig-attenzione: #B87400; --sig-attenzione-sfondo: #FDF0D9; --sig-attenzione-testo: #7A4C00; --sig-info: #2A5A8F; --sig-info-sfondo: #D6E4F5; --sig-info-testo: #1A3F66; /* ══ QUELLO CHE DISEGNA IL BROWSER, NON NOI ═══════════════════════════════ `color-scheme` non e' un colore nostro: e' la frase con cui la pagina dice al browser di che pasta e', e senza di lei il valore resta `normal` — cioe' «pagina chiara», qualunque cosa dicano i nostri token. Quello che restava chiaro sono i pezzi che il browser disegna da se' e che nessuna nostra regola tocca: le BARRE DI SCORRIMENTO, il calendario che si apre da un campo data, l'elenco a tendina di una `select`, il cursore di scrittura, l'evidenziazione del riempimento automatico, e il fondo che si vede attorno alla pagina prima che il foglio arrivi. Su un gestionale che scorre per ore, una barra bianca lungo il fianco di una pagina navy si nota piu' di quanto sembri. Va dichiarata una volta per tema, come tutto il resto. */ color-scheme: light; /* ══ RUOLI ════════════════════════════════════════════════════════════════ Quello che le regole usano davvero. Cambiare tema vuol dire riscrivere questi, non andare a cercare i valori. */ --sig-sfondo: var(--sig-base-fondo); --sig-superficie: var(--sig-bianco); --sig-superficie-alt: var(--sig-base-alt); --sig-superficie-premuta: var(--sig-base-alt); --sig-superficie-inversa: var(--sig-blu-900); /* ══ IL FONDO DELLA FASCIA ALTERNA, E NEL CHIARO NON È PIÙ base-alt ═══════ Il titolare, 12 settembre 2026, dal telefono: «nel tema chiaro fra "Come funziona il format" e "Com'è fatta una serata" non c'è quasi differenza di colore: sembrano una cosa sola. Nel tema scuro si distinguono bene». MISURATO a 393, sezione per sezione, con il colore che il browser dipinge davvero: al confine fra una fascia e la successiva il tema chiaro stava a 1,039 e il tema scuro a 1,441. Non era un'impressione ed è la stessa pagina: lo stesso `tenue` che sullo scuro salta da #070F1E a #20405F, sul chiaro andava da #E8EFF9 a #DFEAF7 — nove livelli di rosso, cinque di verde, due di blu. PERCHÉ È SUCCESSO. `tenue` prendeva `--sig-superficie-alt`, che nel chiaro è `--sig-base-alt`: un colore nato per un'altra cosa — lo STATO PREMUTO di un bottone, dove il gradino dev'essere appena percettibile perché dura un decimo di secondo sotto un dito. Una fascia larga quanto lo schermo che si legge scorrendo vuole l'opposto. Un nome solo per due mestieri opposti, e ha vinto il mestiere sbagliato. Quindi la fascia ha il SUO colore, e `--sig-superficie-alt` torna a fare solo il premuto. Nello scuro i due restano lo stesso livello — là il gradino andava già bene, e questa correzione non lo tocca. QUANTO GIÙ, e perché non di più: a #C9D9ED il confine passa da 1,039 a 1,158 e la fascia piena contro il fondo da 1,052 a 1,240 — cioè il gradino del tema scuro, letto sul chiaro. Il tetto lo mette il TESTO TENUE: su questo fondo il grigio secondario di prima (#5A6B80) scenderebbe a 3,9, e stava già a 4,48 sulla fascia di ieri — sotto la soglia, da prima di questa modifica. Per questo qui sotto la fascia si porta il suo grigio. */ --sig-fascia: #C9D9ED; /* Il secondario LETTO SULLA FASCIA: 4,62 su #C9D9ED, dove quello di pagina ne farebbe 3,9. Non è un secondo grigio nella palette — è lo stesso ruolo misurato sul fondo su cui si posa, e vale solo dentro la fascia. */ --sig-fascia-tenue: #4E5E72; /* ── LA CARTA IN EVIDENZA: il livello che mancava ──────────────────────── Le superfici erano tre — fondo pagina, carta, fascia scura — e in mezzo mancava il gradino di quello che deve staccarsi DA UNA CARTA restando chiaro: il pannello del quiz, la carta della serata che si sta per prendere, il blocco che porta il numero grande. ══ SUL CHIARO VA VERSO IL BASSO, SULLO SCURO VERSO L'ALTO ══════════════ Sullo scuro «in evidenza» vuol dire più chiaro: c'è tutto lo spazio verso la luce, ed è così che funziona un tema scuro fatto bene. Sul chiaro quello spazio non c'è — sopra la carta bianca non c'è niente, il bianco è il tetto — e allora il gradino si prende dall'altra parte: un azzurro un filo più carico, che dalla carta si stacca di 1,29 e dal fondo di 1,20. In tutti e due i casi il livello si VEDE, che è quello che conta; la direzione è quella che il tema concede. È il `blu-100` della scala del marchio, non una tinta nuova. Il testo sopra ha i suoi due token perché il grigio secondario, su questo fondo, scende a 4,23 — sotto la soglia. Qui prende il blu scuro dell'info, che fa 7,5. */ --sig-superficie-alta: var(--sig-blu-100); --sig-superficie-alta-testo: var(--sig-testo); --sig-superficie-alta-tenue: var(--sig-info-testo); --sig-testo: var(--sig-blu-900); --sig-testo-secondario: var(--sig-grigio-testo); --sig-testo-disabilitato: var(--sig-disabilitato); --sig-testo-inverso: var(--sig-bianco); /* Il nome di un minigioco o di una challenge FUORI dal verde. Nel chiaro è il colore del testo intorno; nello scuro l'oro chiaro, solo sopra fondi scuri. */ --sig-nome-gioco: currentColor; /* La famiglia dei giochi: tessere dell'area e carte del catalogo. Il titolare, 4 novembre 2026: «oro sul verde, illeggibile: dove lo sfondo è verde il blu scuro, 8,5 di contrasto». Quell'8,5 esiste solo sul lime: sul verde scuro della famiglia il blu fa 2,15. Quindi nello scuro il fondo è il lime e il testo è il blu; nel chiaro questi valori sono quelli di sempre della famiglia. */ --sig-gioco-sfondo: var(--sig-successo-sfondo); --sig-gioco-testo: var(--sig-successo-testo); --sig-gioco-bordo: var(--sig-successo); --sig-gioco-corpo: var(--sig-testo); --sig-gioco-tenue: color-mix(in srgb, var(--sig-successo-testo) 82%, var(--sig-testo)); --sig-gioco-secondario: color-mix(in srgb, var(--sig-successo-testo) 88%, var(--sig-testo)); /* Il pulsante principale su quel fondo. Nel chiaro il lime di sempre; nello scuro il fondo È il lime, quindi il pulsante gira: blu col testo lime. */ --sig-gioco-primario: var(--sig-azione-primaria); --sig-gioco-primario-hover: var(--sig-azione-primaria-hover); --sig-gioco-primario-su: var(--sig-azione-primaria-testo); --sig-testo-link: var(--sig-blu-500); --sig-testo-link-hover: var(--sig-verde-800); --sig-bordo: #A9BACF; /* il bordo delle carte: 1,62 sul fondo, 1,98 sul bianco. Era #DDE6F2, PIÙ CHIARO del fondo (1,09): le carte non avevano un contorno (30 ottobre 2026) */ --sig-bordo-forte: #74879F; /* vedi nota 3 in cima. Il bordo dei CONTROLLI (bottoni secondari, campi, frecce) e i numeri grandi dei momenti: 3,68 sul bianco, 3,01 sul fondo — la soglia AA dei componenti. Era #C3D0E0, 1,56 (30 ottobre 2026) */ --sig-bordo-default: var(--sig-bordo); --sig-bordo-hover: var(--sig-blu-300); --sig-bordo-attivo: var(--sig-blu-500); --sig-azione-primaria: var(--sig-lime-500); --sig-azione-primaria-hover: #7DB531; --sig-azione-primaria-premuta: #6BA027; --sig-azione-primaria-testo: var(--sig-blu-900); --sig-azione-secondaria: var(--sig-blu-500); --sig-azione-distruttiva: var(--sig-errore); --sig-azione-distruttiva-hover: #A32E22; --sig-azione-distruttiva-premuta: var(--sig-errore-testo); --sig-focus: var(--sig-blu-500); --sig-focus-tenue: rgba(42, 90, 143, 0.25); /* ══ IL PONTE ═════════════════════════════════════════════════════════════ I 31 nomi di `sito.css`, ripuntati sulla scala nuova. Sono l'unica ragione per cui 297 chiamate sparse in 24 file non vanno riscritte una per una. Non è un adattatore da togliere appena si può: è il vocabolario con cui queste pagine sono scritte, e sono nomi migliori di quelli lunghi per le cose che si usano venti volte al giorno. Resta. */ --sig-fondo: var(--sig-sfondo); --sig-fondo-alt: var(--sig-superficie-alt); --sig-carta: var(--sig-superficie); --sig-testo-tenue: var(--sig-testo-secondario); /* L'accento è il FONDO di un'azione, non il colore di un testo — vedi la nota 1. Chi scrive `color: var(--sig-accento)` sta sbagliando variabile e vuole `--sig-testo-link`. */ --sig-accento: var(--sig-azione-primaria); --sig-accento-su: var(--sig-azione-primaria-testo); --sig-accento-scuro: rgba(12, 27, 48, .13); --sig-ok: var(--sig-successo); --sig-no: var(--sig-errore); /* Le fasce scure che spezzano la vetrina. Adesso sono blu-navy, e sono lo stesso blu del tema scuro del gestionale: due parti dello stesso prodotto che finalmente usano lo stesso scuro. */ --sig-scuro: var(--sig-blu-900); --sig-scuro-testo: var(--sig-base); --sig-scuro-tenue: var(--sig-grigio-chiaro); /* ── LA FASCIA CHE SI STACCA, NEI DUE TEMI ──────────────────────────── `--sig-scuro` è il fondo delle fasce piene: quelle di «chi siamo», del format, del saldo punti in area. Sul sito CHIARO è il navy, e si stacca dal fondo di 16 a 1 — si vede dall'altra parte della stanza. Sul sito SCURO quel navy È il fondo pagina, e una fascia che ci si appoggia sopra sparisce: alzarla di un gradino dà 1,13 a 1. Diventa allora il blu dei bordi (1,49) PIÙ un filo che ne dichiara il confine — è il filo a fare il lavoro che sul chiaro fa il salto di sedici a uno. Il valore scuro sta nei due blocchi del tema, più sotto. `--sig-scuro-filo` è trasparente sul chiaro: là la fascia non ha bisogno di essere annunciata, si annuncia da sé. */ --sig-scuro-filo: transparent; /* ── LA FASCIA PRATO ────────────────────────────────────────────────── «Tre passi, e sei dentro»: il verde chiarissimo della scala, l'unico punto in cui il prato si vede. Sul tema scuro diventa un pannello come l'altra fascia, e non è un ripiego: un verde acceso a tutta larghezza su fondo scuro stona, e la coerenza fra le due fasce vale più del richiamo al campo — che resta comunque nelle fotografie. (Decisione del titolare.) */ --sig-prato: var(--sig-verde-100); --sig-prato-testo: var(--sig-testo); --sig-prato-tenue: var(--sig-testo-secondario); /* Il prato ha un filo SUO, e non quello della fascia scura: là il filo è trasparente sul chiaro perché il navy si annuncia da sé, ma il verde chiarissimo sul fondo base sta a 1,06 — la stessa luce, un'altra tinta. Prima il filo glielo prestava `.sig-sezione + .sig-sezione`, poi la regola della fascia gliel'ha spento; per un momento la fascia è stata invisibile sul tema chiaro. Adesso è dichiarato, e nei due temi dice due cose. Sul chiaro era il verde-300, «che ci sta sopra a 1,34 — più del filo standard del sito, che su bianco fa 1,26». ══ E 1,34 NON BASTAVA ═══════════════════════════════════════════════════ Il 12 settembre 2026 le fasce `tenue` hanno preso un fondo loro perché nel chiaro non si staccavano. Misurando tutte le fasce della home una dopo l'altra è saltato fuori che la peggiore non era una di quelle: era QUESTA. Il prato contro il fondo pagina sta a 1,017 — la stessa luce, un'altra tinta, come dice la riga qui sopra — e a separarlo c'è solo il filo. Un filo da un pixel a 1,34 che divide due colori a 1,017 è l'unica cosa che regge il confine, e non regge. Il fondo NON si abbassa, e la ragione è geometrica: sopra il prato c'è la fascia `community`, che è `tenue` (#C9D9ED). Scurendo il verde ci si allontana dalla pagina di sotto ma ci si avvicina alla fascia di sopra — a #D2E7A8 diventano 1,153 da una parte e 1,075 dall'altra, cioè un confine guadagnato e uno perso. Il prato sta in mezzo agli altri due per luce, e da lì non si sposta senza rompere qualcos'altro. Quindi a fare il confine è il filo, e allora che lo faccia: verde-500 al posto del verde-300 (1,96 sul prato, 1,92 sul fondo pagina invece di 1,34 e 1,32) e due pixel invece di uno. È il verde dell'accento, quello dei pulsanti: su questa fascia non arriva un colore nuovo. */ --sig-prato-filo: var(--sig-verde-500); /* ── IL VERDE QUANDO DEVE ESSERE TESTO ──────────────────────────────── Il verde-800 è nato per questo — «il verde QUANDO È TESTO su fondo chiaro», dice la scala. Su fondo SCURO la frase si rovescia: là fa 2,6 e non si legge, e il verde che regge è il 300 (11,3). Serve un nome suo perché è l'unico verde che cambia col tema: gli occhielli sono la didascalia del marchio e stanno su tutte le pagine pubbliche, quindi è il colore che si sarebbe spento più in vista. */ --sig-verde-testo: var(--sig-verde-800); /* La superficie verde tenue: la pastiglia della scheda attiva in area, il riquadro dell'invito a valutare, l'etichetta dello sport. Piccole, e per questo il verde ci resta anche di sera — la decisione di farne un pannello riguardava la FASCIA a tutta larghezza, che è un'altra cosa. Oggi ha gli stessi valori di `--sig-successo-sfondo`, e non è lo stesso token: quello dice «è andata bene», questo dice «è del format». Il giorno che uno dei due cambia, l'altro non deve seguirlo. */ --sig-verde-tenue: var(--sig-verde-100); /* ── LA VELATURA SOPRA LA FOTO D'APERTURA ───────────────────────────── In COMPONENTI e non come colore, perché serve dentro delle `rgba()`: la scena della home è la foto sotto una velatura che si apre a metà e torna piena in fondo, così sfuma nel colore di pagina. Quel colore è il fondo, e in tema scuro è un altro — scritto a mano com'era, la home in scuro avrebbe avuto un blocco quasi bianco in cima e il titolo chiaro sopra. */ --sig-velo-rgb: 244, 247, 251; /* Quale delle due versioni del segno si vede. È un `display` e non un colore, e sta fra i token per la stessa ragione degli altri: così la scelta del tema vive tutta in un blocco solo, e le regole qui sotto non sanno che esistono due temi. */ --sig-segno-chiaro: block; --sig-segno-scuro: none; /* ══ CARATTERE ════════════════════════════════════════════════════════════*/ --sig-font: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sig-font-titoli: var(--sig-font); --sig-peso-regular: 400; --sig-peso-medium: 500; --sig-peso-semibold: 600; --sig-peso-bold: 700; --sig-peso-extrabold: 800; --sig-peso-black: 900; --sig-peso-titoli: var(--sig-peso-extrabold); --sig-traccia-titoli: var(--sig-tracking-sottotitolo); --sig-corpo-display: 100px; --sig-corpo-h1: 56px; --sig-corpo-h2: 40px; --sig-corpo-h3: 26px; --sig-corpo-testo: 16px; --sig-corpo-testo-piccolo: 14px; --sig-corpo-etichetta: 11px; --sig-corpo-bottone: 16px; --sig-corpo-numero: 64px; --sig-corpo-display-mobile: 40px; --sig-corpo-h1-mobile: 32px; --sig-corpo-h2-mobile: 26px; --sig-corpo-h3-mobile: 20px; --sig-corpo-numero-mobile: 40px; --sig-interlinea-display: 0.9; --sig-interlinea-titolo: 0.95; --sig-interlinea-sottotitolo: 1.15; --sig-interlinea-testo: 1.6; --sig-interlinea-etichetta: 1.3; --sig-interlinea-numero: 0.85; --sig-tracking-display: -0.05em; --sig-tracking-titolo: -0.04em; --sig-tracking-sottotitolo: -0.02em; --sig-tracking-testo: 0; --sig-tracking-etichetta: 0.08em; --sig-obliquo: skewX(-10deg); /* La curva dello scatto: parte decisa, supera di un soffio e si pianta. È il movimento di chi arriva sul pallone, non di chi scivola in scena. */ --sig-curva-scatto: cubic-bezier(.22, 1.35, .36, 1); /* ══ SPAZIO ═══════════════════════════════════════════════════════════════ La scala del brand è in pixel, base 4. Quella vecchia era in rem e non coincideva con nessun gradino: `--sig-sp-3` valeva 17.6px, cioè fra il quarto gradino (16) e il quinto (24). Ogni nome vecchio va sul gradino più vicino, e la pagina si stringe o si allarga di uno o due pixel. È il restyling, non un errore. */ --sig-spazio-1: 4px; --sig-spazio-2: 8px; --sig-spazio-3: 12px; --sig-spazio-4: 16px; --sig-spazio-5: 24px; --sig-spazio-6: 32px; --sig-spazio-7: 48px; --sig-spazio-8: 64px; --sig-spazio-9: 96px; --sig-sp-1: var(--sig-spazio-1); /* era .35rem ≈ 5.6px */ --sig-sp-2: var(--sig-spazio-3); /* era .7rem ≈ 11.2px */ --sig-sp-3: var(--sig-spazio-4); /* era 1.1rem ≈ 17.6px */ --sig-sp-4: var(--sig-spazio-5); /* era 1.7rem ≈ 27.2px */ --sig-sp-5: var(--sig-spazio-7); /* era 2.6rem ≈ 41.6px */ --sig-sp-6: var(--sig-spazio-8); /* era 4rem = 64px */ /* ══ RAGGI · nessun angolo vivo ═══════════════════════════════════════════ Gli ~84 `border-radius` in pixel sparsi nelle pagine diventano questi. Il salto è grosso: 8→16 e 12→24. È la regola del brand, ed è la cosa che si vede di più a colpo d'occhio. */ --sig-raggio-input: 16px; --sig-raggio-card: 24px; --sig-raggio-card-grande: 32px; --sig-raggio-pillola: 999px; --sig-raggio-cerchio: 50%; --sig-raggio: var(--sig-raggio-card); /* era 12px */ --sig-raggio-piccolo: var(--sig-raggio-input); /* era 8px */ --sig-raggio-tondo: var(--sig-raggio-pillola); /* ══ OMBRE · navy trasparente, mai grigio ════════════════════════════════*/ /* ══ PESO · i componenti sono oggetti appoggiati ══════════════════════════ Dal riferimento si prende il SISTEMA, non l'aspetto: bordi spessi sugli interattivi, e sotto i bottoni pieni un bordo più scuro che li fa sembrare appoggiati sulla pagina — la profondità la fa il bordo, mai l'ombra. I colori sono i nostri: l'appoggio è il verde della G del logo. */ --sig-spessore-bordo: 2px; /* il bordo degli interattivi: era 1px */ --sig-spessore-appoggio: 4px; /* il bordo sotto dei bottoni pieni */ --sig-appoggio: var(--sig-verde-500); /* ══ E L'OMBRA È L'ALTRA METÀ DELLO STESSO DIFETTO ═══════════════════ Una carta si stacca dal fondo in due modi: il gradino di colore e l'ombra. Sul chiaro erano deboli tutti e due — 1,07 di gradino (vedi `--sig-base-fondo`) e un'ombra al 6%, contro il 32% del tema scuro. Sistemarne uno solo avrebbe lasciato il lavoro a metà. Il 6% nasceva dal principio scritto qui sopra — «la profondità la fa il bordo, mai l'ombra» — e quel principio resta: queste restano ombre corte, non aloni. Ma un'ombra che non si vede non è sobrietà, è un'ombra che non c'è, e il bordo da solo su due bianchi vicini non basta. Ancora circa la metà del tema scuro, che di luce ne ha da vendere. */ --sig-ombra-1: 0 2px 8px rgba(12, 27, 48, 0.10); /* L'ombra delle carte: nel chiaro le stacca dal fondo insieme al bordo; nel tema scuro vale `none`, perché lì le carte si staccano già per luce (i livelli). 30 ottobre 2026. */ --sig-ombra-carta: var(--sig-ombra-1); --sig-ombra-2: 0 8px 24px rgba(12, 27, 48, 0.16); --sig-ombra-3: 0 20px 48px rgba(12, 27, 48, 0.24); --sig-ombra: var(--sig-ombra-1); /* ══ MISURE ═══════════════════════════════════════════════════════════════ `--sig-larghezza` non è `--sig-contenuto-max`: la prima è la COLONNA DI LETTURA, la seconda la larghezza massima della pagina. Servono tutte e due, e confonderle vuol dire righe di testo da 1200px che nessuno legge. */ /* DUE LARGHEZZE, e servono tutte e due. `--sig-larghezza` è la COLONNA DI LETTURA: 680px, la misura oltre la quale una riga di testo diventa faticosa da seguire perché l'occhio perde il capo riga. Vale per la prosa, i moduli, le informative. `--sig-contenuto` è la larghezza della PAGINA: dove ci sono schede in griglia, una colonna da 680 su uno schermo da 1440 lascia 373 pixel di vuoto per lato e fa sembrare il sito la versione telefono ingrandita. */ --sig-larghezza: 680px; --sig-contenuto: 1120px; --sig-tocco: 44px; --sig-tocco-minimo: var(--sig-tocco); --sig-focus-spessore: 3px; --sig-focus-offset: 3px; --sig-bp-mobile: 480px; --sig-bp-tablet: 768px; --sig-bp-desktop: 1024px; /* La barra laterale del gestionale. Era scritta a mano in `gestionale.html` e in nessun altro posto. */ --sig-barra: 220px; /* ══ MOVIMENTO ════════════════════════════════════════════════════════════*/ --sig-durata-istantanea: 100ms; --sig-durata-veloce: 180ms; --sig-durata-media: 280ms; --sig-durata-lenta: 420ms; --sig-curva-standard: cubic-bezier(0.4, 0, 0.2, 1); --sig-curva-entrata: cubic-bezier(0, 0, 0.2, 1); --sig-curva-uscita: cubic-bezier(0.4, 0, 1, 1); --sig-curva-rimbalzo: cubic-bezier(0.34, 1.4, 0.64, 1); } /* ═══════════════════════════════════════════════════════════════════════════ TEMA SCURO — chi lo chiede, e chi segue lo schermo (nota 4 in cima) Ci sono TRE dichiarazioni possibili sul ``, e sono tre cose diverse: (niente) chiaro, sempre. E' la VETRINA, ed e' una scelta: e' un pezzo di marchio, con le sue fasce `.sig-sezione.scura` che sono scure DI PROPOSITO sopra un fondo chiaro. Ribaltarla col tema del telefono vorrebbe dire un restyling che nessuno ha chiesto, e quelle fasce diventerebbero scure su scuro — cioe' invisibili. data-tema="auto" segue l'impostazione dello schermo di chi guarda. E' il GESTIONALE: e' uno strumento, ci si lavora dentro per ore, e uno strumento che ignora il tema del sistema e' uno strumento che acceca alle sette del mattino o alle undici di sera. data-tema="scuro" scuro sempre, qualunque cosa dica lo schermo. data-tema="chiaro" chiaro sempre. ══ PERCHE' L'AUTOMATICO SI CHIEDE, INVECE DI VALERE PER TUTTI ═════════════ Il file del brand faceva scattare il tema scuro su `prefers-color-scheme: dark` a livello di `:root`, e cosi' applicato il problema e' quello scritto sopra: la vetrina ribaltata sul telefono di chiunque, e le fasce scure su scuro. La decisione di allora era giusta, e la parte che valeva la pena tenere non era «mai automatico» — era «non su tutto». Quindi l'automatico c'e', e si dichiara: le pagine che sono STRUMENTI lo chiedono, quelle che sono VETRINA no. Nessun selettore da cliccare in nessuna delle due — e' il documento a dire di che pasta e' fatto, una volta sola, e poi decide lo schermo di chi guarda. I nove nomi del vecchio sistema del gestionale (`--bg`, `--pannello`, …) stanno qui dentro: erano copiaincollati in dieci file, e non erano nemmeno uguali fra loro — `informative.html` aveva `--attesa: #d9a441` invece di `#d8b24c`, e `gestionale.html` e `staff-accesso.html` non ce l'avevano affatto. Un valore solo, in un posto solo. ═══════════════════════════════════════════════════════════════════════════ */ [data-tema="scuro"] { /* I QUATTRO LIVELLI, in ordine di luce. Vedi la scala in cima: qui il tema scuro smette di prendere tre navy del marchio e prende dei gradini misurati, perche' fra il fondo e una scheda c'era 1,13 a 1 — cioe' niente, ed era tutto blu su blu. */ --sig-sfondo: var(--sig-livello-0); --sig-superficie: var(--sig-livello-1); --sig-superficie-alt: var(--sig-livello-2); --sig-superficie-premuta: var(--sig-livello-2); /* La fascia alterna: QUI resta il livello-2 di sempre, cioè esattamente il fondo che aveva prima che diventasse un nome suo. Lo scuro staccava già bene (1,441 al confine, misurato) e non è quello che il titolare ha segnalato: la correzione del 12 settembre 2026 è tutta nel tema chiaro. */ --sig-fascia: var(--sig-livello-2); --sig-fascia-tenue: var(--sig-grigio-chiaro); /* Qui «in evidenza» va verso la LUCE: c'è tutto lo spazio, ed è così che funziona un tema scuro fatto bene. Vedi la nota nel blocco chiaro. */ --sig-superficie-alta: var(--sig-livello-2); --sig-superficie-alta-testo: var(--sig-bianco); --sig-superficie-alta-tenue: var(--sig-grigio-chiaro); --sig-superficie-inversa: var(--sig-base); --sig-testo: var(--sig-bianco); --sig-testo-secondario: var(--sig-grigio-chiaro); --sig-testo-disabilitato: #6B7A8C; --sig-testo-inverso: var(--sig-blu-900); --sig-nome-gioco: var(--sig-oro-300); --sig-gioco-sfondo: var(--sig-lime-500); --sig-gioco-testo: var(--sig-blu-900); --sig-gioco-bordo: var(--sig-verde-800); --sig-gioco-corpo: var(--sig-blu-900); --sig-gioco-tenue: var(--sig-verde-900); --sig-gioco-secondario: var(--sig-verde-900); --sig-gioco-primario: var(--sig-blu-900); --sig-gioco-primario-hover: var(--sig-blu-900); --sig-gioco-primario-su: var(--sig-lime-500); --sig-testo-link: var(--sig-verde-300); --sig-testo-link-hover: var(--sig-verde-100); /* Vedi la nota su `color-scheme` nel blocco chiaro: e' quello che fa seguire il tema anche a quello che disegna il browser. */ color-scheme: dark; --sig-verde-testo: var(--sig-verde-300); --sig-verde-tenue: var(--sig-verde-900); /* Le fasce: qui il navy è il fondo pagina, e una fascia navy sparirebbe. Vedi la nota sopra `--sig-scuro-filo` nel blocco chiaro. */ --sig-scuro: var(--sig-livello-2); --sig-scuro-testo: var(--sig-bianco); --sig-scuro-filo: var(--sig-blu-500); /* ══ E IL PRATO SCURO SCENDE DI UN GRADINO ════════════════════════════════ Il titolare, 12 settembre 2026: «le fasce premi e community nel tema scuro sono dello stesso colore: non si distinguono. Alternale come le altre». Erano LO STESSO COLORE, alla lettera: `--sig-prato` e `--sig-fascia` valevano tutti e due il livello-2, e le due fasce sono adiacenti — sopra «community», che è `tenue`, sotto «premi», che è `prato`. Fra loro restava il filo, a 1,51. Era già venuto fuori misurando le fasce del chiaro, e l'avevo lasciato perché il prato scuro = livello-2 era una decisione scritta del titolare: «coerenza fra le due fasce vale più del richiamo al campo — che resta comunque nelle fotografie». Quella decisione NON si tocca, ed è la ragione per cui si sposta il LIVELLO e non il colore: il prato scuro resta un pannello navy come la fascia scura, niente verde, esattamente come aveva chiesto. Cambia solo di quanto è alzato dal fondo. Livello-1 e non livello-3: così i tre fondi che si incontrano scorrendo stanno su tre gradini diversi e nessuno confina con un uguale — 1,345 dal fondo pagina e 1,330 dalla fascia `tenue`, cioè più dello stacco che nel tema chiaro separa le fasce fra loro (1,240). Il testo ci sta sopra largo: il bianco fa 14,25 e il grigio chiaro 8,03. */ --sig-prato: var(--sig-livello-1); --sig-prato-testo: var(--sig-bianco); --sig-prato-tenue: var(--sig-grigio-chiaro); --sig-prato-filo: var(--sig-blu-500); --sig-velo-rgb: 12, 27, 48; --sig-segno-chiaro: none; --sig-segno-scuro: block; --sig-bordo: var(--sig-livello-3); --sig-bordo-forte: #3C6796; --sig-bordo-hover: var(--sig-blu-500); --sig-bordo-attivo: var(--sig-blu-300); --sig-azione-secondaria: var(--sig-blu-300); --sig-focus: var(--sig-bianco); --sig-focus-tenue: rgba(255, 255, 255, 0.30); /* Su fondo scuro il verde-800 sparisce e il rosso pieno vibra: gli stati prendono le versioni chiare, che è l'inverso esatto del tema chiaro. */ --sig-ok: var(--sig-verde-300); --sig-no: #F5A79E; --sig-attenzione: #F0C46B; /* I FONDI DEGLI AVVISI SALGONO CON LA SCALA. Erano tarati sul fondo pagina di prima, e sopra una superficie del livello 1 stavano a 1,01–1,14: un badge che non si stacca dalla scheda che lo porta non e' un badge. Adesso stanno un gradino sopra, e il testo dentro regge ancora — 4,75 il rosso, 5,3 gli altri. */ --sig-errore-sfondo: #7A3126; --sig-errore-testo: #F5A79E; --sig-successo-sfondo: #1D5C28; --sig-successo-testo: var(--sig-verde-300); --sig-attenzione-sfondo: #66450A; --sig-attenzione-testo: #F0C46B; --sig-info-sfondo: #22497C; --sig-info-testo: var(--sig-blu-100); /* Sul nero la stessa quantità di rumore sembra di meno, e il filo di luce al 55% diventerebbe un bordo bianco: qui la grana sale e la luce scende. Sono gli stessi due token, con i valori del buio. */ --sig-grana-forza: .07; --sig-luce-alto: inset 0 1px 0 rgba(255, 255, 255, .10); --sig-luce-bordo: inset 0 0 0 1px rgba(255, 255, 255, .05); --sig-ombra-1: 0 2px 8px rgba(0, 0, 0, 0.32); --sig-ombra-carta: none; --sig-ombra-2: 0 8px 24px rgba(0, 0, 0, 0.44); --sig-ombra-3: 0 20px 48px rgba(0, 0, 0, 0.56); /* ── I nove nomi del gestionale ────────────────────────────────────────── Restano perché sono usati in dieci file e riscriverli è un lavoro suo, non un pezzo del restyling. Da qui in poi però hanno UNA definizione sola. */ --bg: var(--sig-sfondo); --pannello: var(--sig-superficie); --bordo: var(--sig-bordo); --testo: var(--sig-testo); --tenue: var(--sig-testo-secondario); --ok: var(--sig-ok); --no: var(--sig-no); --attesa: var(--sig-attenzione); --accento: var(--sig-azione-secondaria); --barra: var(--sig-barra); /* I tre fondi degli avvisi, che nelle pagine erano esadecimali nudi (#2b1416, #122417, #2a2415) e adesso hanno un nome. */ --sig-avviso-no: var(--sig-errore-sfondo); --sig-avviso-ok: var(--sig-successo-sfondo); --sig-avviso-attesa: var(--sig-attenzione-sfondo); } /* ── E CHI SEGUE LO SCHERMO ───────────────────────────────────────────────── Gli stessi identici valori, per chi ha dichiarato `data-tema="auto"`. Sono scritti due volte, e la ripetizione e' accettata: il CSS non ha un modo di dire «questo blocco, anche dentro questa media query» senza riscriverne il selettore, e le alternative — un pezzo di JavaScript che sposta un attributo, oppure `light-dark()` su ottanta token — costano piu' di quello che risolvono: la prima un lampo di tema sbagliato al caricamento, la seconda la riscrittura dell'intera tavolozza. La divergenza pero' NON e' accettata, e non dipende da chi ricorda di aggiornare tutti e due: `tema-automatico.test.js` confronta i due blocchi riga per riga e diventa rosso al primo valore che si scosta. E' la stessa regola con cui convivono le due copie di LIVELLI, in persone.js e in sessioni.html. */ @media (prefers-color-scheme: dark) { [data-tema="auto"] { /* I QUATTRO LIVELLI, in ordine di luce. Vedi la scala in cima: qui il tema scuro smette di prendere tre navy del marchio e prende dei gradini misurati, perche' fra il fondo e una scheda c'era 1,13 a 1 — cioe' niente, ed era tutto blu su blu. */ --sig-sfondo: var(--sig-livello-0); --sig-superficie: var(--sig-livello-1); --sig-superficie-alt: var(--sig-livello-2); --sig-superficie-premuta: var(--sig-livello-2); /* La fascia alterna, come nel blocco `scuro` qui sopra: il livello-2 di sempre. Il gradino dello scuro non è quello che si stava correggendo. */ --sig-fascia: var(--sig-livello-2); --sig-fascia-tenue: var(--sig-grigio-chiaro); /* Qui «in evidenza» va verso la LUCE: c'è tutto lo spazio, ed è così che funziona un tema scuro fatto bene. Vedi la nota nel blocco chiaro. */ --sig-superficie-alta: var(--sig-livello-2); --sig-superficie-alta-testo: var(--sig-bianco); --sig-superficie-alta-tenue: var(--sig-grigio-chiaro); --sig-superficie-inversa: var(--sig-base); --sig-testo: var(--sig-bianco); --sig-testo-secondario: var(--sig-grigio-chiaro); --sig-testo-disabilitato: #6B7A8C; --sig-testo-inverso: var(--sig-blu-900); --sig-nome-gioco: var(--sig-oro-300); --sig-gioco-sfondo: var(--sig-lime-500); --sig-gioco-testo: var(--sig-blu-900); --sig-gioco-bordo: var(--sig-verde-800); --sig-gioco-corpo: var(--sig-blu-900); --sig-gioco-tenue: var(--sig-verde-900); --sig-gioco-secondario: var(--sig-verde-900); --sig-gioco-primario: var(--sig-blu-900); --sig-gioco-primario-hover: var(--sig-blu-900); --sig-gioco-primario-su: var(--sig-lime-500); --sig-testo-link: var(--sig-verde-300); --sig-testo-link-hover: var(--sig-verde-100); /* Vedi la nota su `color-scheme` nel blocco chiaro: e' quello che fa seguire il tema anche a quello che disegna il browser. */ color-scheme: dark; --sig-verde-testo: var(--sig-verde-300); --sig-verde-tenue: var(--sig-verde-900); /* Le fasce: qui il navy è il fondo pagina, e una fascia navy sparirebbe. Vedi la nota sopra `--sig-scuro-filo` nel blocco chiaro. */ --sig-scuro: var(--sig-livello-2); --sig-scuro-testo: var(--sig-bianco); --sig-scuro-filo: var(--sig-blu-500); /* Livello-1 come nel blocco `scuro` qui sopra: «premi» e «community» sono adiacenti, e al livello-2 erano lo stesso identico colore. Il perché per esteso sta là. */ --sig-prato: var(--sig-livello-1); --sig-prato-testo: var(--sig-bianco); --sig-prato-tenue: var(--sig-grigio-chiaro); --sig-prato-filo: var(--sig-blu-500); --sig-velo-rgb: 12, 27, 48; --sig-segno-chiaro: none; --sig-segno-scuro: block; --sig-bordo: var(--sig-livello-3); --sig-bordo-forte: #3C6796; --sig-bordo-hover: var(--sig-blu-500); --sig-bordo-attivo: var(--sig-blu-300); --sig-azione-secondaria: var(--sig-blu-300); --sig-focus: var(--sig-bianco); --sig-focus-tenue: rgba(255, 255, 255, 0.30); /* Su fondo scuro il verde-800 sparisce e il rosso pieno vibra: gli stati prendono le versioni chiare, che è l'inverso esatto del tema chiaro. */ --sig-ok: var(--sig-verde-300); --sig-no: #F5A79E; --sig-attenzione: #F0C46B; /* I FONDI DEGLI AVVISI SALGONO CON LA SCALA. Erano tarati sul fondo pagina di prima, e sopra una superficie del livello 1 stavano a 1,01–1,14: un badge che non si stacca dalla scheda che lo porta non e' un badge. Adesso stanno un gradino sopra, e il testo dentro regge ancora — 4,75 il rosso, 5,3 gli altri. */ --sig-errore-sfondo: #7A3126; --sig-errore-testo: #F5A79E; --sig-successo-sfondo: #1D5C28; --sig-successo-testo: var(--sig-verde-300); --sig-attenzione-sfondo: #66450A; --sig-attenzione-testo: #F0C46B; --sig-info-sfondo: #22497C; --sig-info-testo: var(--sig-blu-100); /* Sul nero la stessa quantità di rumore sembra di meno, e il filo di luce al 55% diventerebbe un bordo bianco: qui la grana sale e la luce scende. Sono gli stessi due token, con i valori del buio. */ --sig-grana-forza: .07; --sig-luce-alto: inset 0 1px 0 rgba(255, 255, 255, .10); --sig-luce-bordo: inset 0 0 0 1px rgba(255, 255, 255, .05); --sig-ombra-1: 0 2px 8px rgba(0, 0, 0, 0.32); --sig-ombra-carta: none; --sig-ombra-2: 0 8px 24px rgba(0, 0, 0, 0.44); --sig-ombra-3: 0 20px 48px rgba(0, 0, 0, 0.56); /* ── I nove nomi del gestionale ────────────────────────────────────────── Restano perché sono usati in dieci file e riscriverli è un lavoro suo, non un pezzo del restyling. Da qui in poi però hanno UNA definizione sola. */ --bg: var(--sig-sfondo); --pannello: var(--sig-superficie); --bordo: var(--sig-bordo); --testo: var(--sig-testo); --tenue: var(--sig-testo-secondario); --ok: var(--sig-ok); --no: var(--sig-no); --attesa: var(--sig-attenzione); --accento: var(--sig-azione-secondaria); --barra: var(--sig-barra); /* I tre fondi degli avvisi, che nelle pagine erano esadecimali nudi (#2b1416, #122417, #2a2415) e adesso hanno un nome. */ --sig-avviso-no: var(--sig-errore-sfondo); --sig-avviso-ok: var(--sig-successo-sfondo); --sig-avviso-attesa: var(--sig-attenzione-sfondo); } } /* Chi vuole il chiaro esplicito, per riportare indietro un ramo scuro. */ [data-tema="chiaro"] { --sig-sfondo: var(--sig-base-fondo); --sig-superficie: var(--sig-bianco); --sig-testo: var(--sig-blu-900); --sig-testo-secondario: var(--sig-grigio-testo); /* La fascia alterna e il suo secondario: gli stessi del blocco chiaro in cima. Questo blocco serve a riportare indietro un ramo scuro, e una voce che qui mancasse lascerebbe la fascia col valore dello scuro. */ --sig-fascia: #C9D9ED; --sig-fascia-tenue: #4E5E72; } /* Anche nel tema chiaro i tre fondi degli avvisi hanno un nome: le pagine li chiamano allo stesso modo, e cambia il valore. */ :root { --sig-avviso-no: var(--sig-errore-sfondo); --sig-avviso-ok: var(--sig-successo-sfondo); --sig-avviso-attesa: var(--sig-attenzione-sfondo); } /* ═══════════════════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════════════════ */ /* L'attributo `hidden` non basta da solo: la regola del browser (`[hidden] { display: none }`) perde contro qualunque regola d'autore che dichiari `display`, perché le regole d'autore battono sempre quelle del browser. È costato due segnalazioni sulla sovrimpressione del registro, che per due giorni non si è potuta chiudere in nessun modo. NON SI TOGLIE, e non si toglie nemmeno dalle pagine che un domani linkassero questo foglio: là dentro c'è per le stesse ragioni, e un test la pretende pagina per pagina. */ [hidden] { display: none !important; } /* E `.nascosto` con lei, per la stessa ragione e con lo stesso peso. La classe la mettono e la tolgono gli script di mezzo sistema, e scritta `.nascosto { display: none }` vale (0,1,0) — cioè PERDE contro ogni regola che dichiari un display con un elemento davanti. `button.sig-bottone` vale (0,1,1), e vinceva: nell'area utente si vedevano il pallino degli avvisi con dentro «0», «Condividi invito», «Togli la foto» e «Annulla il cambio email» — quattro comandi che il codice credeva di aver nascosto. La stessa lezione era già stata pagata una volta in home, dove la regola sta col `!important` e un commento accanto. Metterla qui la vale per tutte le pagine, invece che aspettare che ognuna se la ricopi. */ .nascosto { display: none !important; } *, *::before, *::after { box-sizing: border-box; } /* ══ LA GRANA STA SUL FONDO, FISSA ═════════════════════════════════════════ Il rumore lo porta uno strato suo, `body::before`, invece di un `background-image` su body: attaccato al fondo scorrerebbe con la pagina, e una grana che scorre si legge come una texture stampata sopra invece che come la materia della superficie. Fissa, sta ferma mentre il contenuto le passa davanti — che è quello che fa la grana di una fotografia. `pointer-events: none` perché non deve intercettare NIENTE: è uno strato che copre tutta la finestra, e senza quella riga si mangerebbe ogni clic della pagina. COME STA SOTTO AL CONTENUTO, e perché non nel modo ovvio. La prima versione dava `position: relative; z-index: 1` a tutti i figli di `body`, e i figli di `body` comprendono i ``: un dialogo modale lo posiziona il browser con `position: fixed`, ma le regole d'autore battono quelle del browser SEMPRE, anche a specificità più bassa. Cioè: la grana avrebbe scentrato ogni finestra modale del sistema. Adesso è `body` a fare da contesto di impilamento (`isolation: isolate`) e la grana a stare a `z-index: -1`: dentro un contesto, i figli negativi si disegnano SOPRA il fondo dell'elemento e SOTTO tutto il resto. Nessun altro elemento viene toccato. */ /* ══ LA PAGINA SCORRE SU UN BINARIO ═════════════════════════════════════════ Il titolare, 5 novembre 2026: «col dito la pagina si sposta a destra e a sinistra: deve scorrere solo in verticale». Quello che sbordava è corretto alla fonte; questa è la rete sotto. `clip` e non `hidden`: non crea un contenitore che scorre, quindi le barre `sticky` restano attaccate alla finestra. `touch-action` lascia passare il verticale e lo zoom con due dita; le tabelle e i caroselli con `overflow-x: auto` scorrono lo stesso, perché il tocco si ferma al primo contenitore che scorre. */ html, body { overflow-x: clip; overscroll-behavior-x: none; } html > body { touch-action: pan-y pinch-zoom; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sig-grana); opacity: var(--sig-grana-forza); } body { isolation: isolate; margin: 0; font-family: var(--sig-font); font-weight: var(--sig-peso-regular); background: var(--sig-sfondo); color: var(--sig-testo); line-height: var(--sig-interlinea-testo); /* Una parola lunghissima — un indirizzo, un nome incollato — non deve allargare la pagina: si spezza. È il modo più comune in cui compare uno scorrimento orizzontale che nessuno ha chiesto. `break-word` e NON `anywhere`: i due spezzano allo stesso modo, ma `anywhere` abbassa anche la larghezza MINIMA di ogni scatola a una lettera. In una riga flessibile il pulsante si restringeva fino a una lettera (Registro: «Ri/m/an/da»), in una tabella le colonne si comprimevano invece di far scorrere il riquadro (Istruttori: «TELE/FON/O»). Con `break-word` la parola lunga va a capo solo quando non ci sta, e pulsanti e colonne tengono la loro larghezza minima. Chi vuole davvero lo spezzare ovunque — un nome dentro una cella stretta — lo scrive sul suo elemento. */ overflow-wrap: break-word; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; height: auto; display: block; } /* Il link prende il BLU, non l'accento: il lime a 1.90 non si legge. */ a { color: var(--sig-testo-link); text-decoration: none; } /* ══ IL COLORE AL PASSAGGIO VALE PER I LINK NEL TESTO, NON PER I COMPONENTI ═ Era `a:hover`, che pesa (0,1,1): più di una classe sola. Così scavalcava il colore di ogni componente fatto con un `` — la linguetta della Sfida, i bottoni verdi, il bottone fisso — e sul telefono, dove lo stato «sotto il dito» resta attaccato dopo il tocco, la scritta diventava il verde dei link. Misurato il 30 ottobre 2026 a 375: linguetta premuta 1,06:1 nel tema scuro (verde chiarissimo su bianco), «Entra nel gruppo WhatsApp» 1,8:1, bottone fisso 2,1:1 nel chiaro. `:where()` porta il peso a quello di `a` nudo: i link nel testo cambiano colore come prima (questa riga viene dopo `a`), e un componente che si è dato un colore con la sua classe lo tiene anche sotto il dito. */ a:where(:hover) { color: var(--sig-testo-link-hover); } .sig-sezione.scura a { color: var(--sig-scuro-testo); } /* …ma non il bottone pieno: quella regola vale per i link nel testo, e un `` in fascia scura prendeva il bianco sopra il lime (2.04:1, in tutti e due i temi). Il testo del bottone è il suo. */ .sig-sezione.scura a.sig-bottone { color: var(--sig-accento-su); } :focus-visible { outline: var(--sig-focus-spessore) solid var(--sig-focus); outline-offset: var(--sig-focus-offset); } /* ═══════════════════════════════════════════════════════════════════════════ IMPIANTO ═══════════════════════════════════════════════════════════════════════════ */ .sig-colonna { max-width: var(--sig-larghezza); margin: 0 auto; padding: 0 var(--sig-sp-3); } /* La colonna larga: per le sezioni che tengono schede in griglia, dove la colonna di lettura sarebbe uno spreco. Sul telefono è identica all'altra — `max-width` più grande di quanto c'è non cambia niente — e si allarga solo da 1024 in su, dove lo spazio c'è davvero. */ .sig-colonna.larga { max-width: var(--sig-contenuto); } /* 32px: era 48 — sommato fra due sezioni faceva quasi 100px di vuoto a ogni confine, e sul telefono si scrollava più vuoto che contenuto. */ .sig-sezione { padding: var(--sig-spazio-6) 0; } /* Il verso si dichiara in pagina, con una classe, e non si calcola con un `nth-of-type`: le sezioni della home stanno dentro contenitori diversi — i blocchi delle vecchie pagine — e `nth-of-type` conta DENTRO ciascuno. Il risultato erano due fasce vicine con lo stesso verso e la pagina che le leggeva come una fascia sola ripetuta. Misurato, non temuto. */ .sig-sezione.scura.rovescio { background: var(--sig-gradiente-fascia-rovescio); } /* ══ E LE SEZIONI CHIARE SMETTONO DI ESSERE TUTTE UGUALI ═════════════════════ «Scorrendo non si capisce dove finisce una sezione e comincia l'altra: fondi piatti e tutti uguali.» Erano tutti lo stesso `--sig-sfondo`, e fra due sezioni identiche l'unica differenza era un filo da un pixel. `tenue` è il secondo fondo chiaro: una superficie appena sollevata, con la sua rampa verticale e i suoi due fili di luce ai bordi. Non è un colore nuovo — è lo stesso fondo pagina portato di un gradino verso la superficie — e questo è il punto: le sezioni si distinguono senza che la pagina diventi una scacchiera. */ /* ══ E IL GRADINO SI SENTE AL CONFINE, NON A META' FASCIA ═══════════════════ La rampa di prima partiva da un 70% di fascia e 30% di FONDO PAGINA: cioè proprio sul bordo — l'unico punto in cui l'occhio decide se sono due fasce o una — il colore era per un terzo quello della fascia accanto. Il gradino vero (1,052) arrivava a metà altezza, dove non c'è nessun confine da vedere. Al confine ne restava 1,039. Adesso la rampa sta DENTRO: i due bordi sono al colore pieno e a schiarire è il centro. Il gradiente resta — una fascia larga quanto lo schermo tinta piatta si vede che è piatta — ma smette di sfumare proprio dove deve tagliare. Col fondo nuovo il confine passa da 1,039 a 1,240. */ .sig-sezione.tenue { background: linear-gradient(180deg, var(--sig-fascia) 0%, color-mix(in srgb, var(--sig-fascia) 88%, var(--sig-sfondo)) 50%, var(--sig-fascia) 100%); /* I due fili che chiudono la fascia: una riga di luce sopra e una d'ombra sotto, dall'interno. Con la rampa che sfumava erano decorazione; adesso sono il taglio, e il velo bianco al 35% non bastava a farsi vedere su un fondo che si è abbassato. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(12, 27, 48, .14); position: relative; isolation: isolate; /* Il secondario si rilegge sul fondo su cui si posa: dentro la fascia il grigio di pagina scenderebbe a 3,9 (e stava già a 4,48 sulla fascia di prima, cioè sotto soglia da prima di questa modifica). Si sovrascrive il RUOLO e non i singoli selettori, così ogni discendente che già dice `--sig-testo-tenue` — le descrizioni dei sette passi, le parole sotto i quattro numeri, le didascalie della galleria — si corregge da sé. */ --sig-testo-tenue: var(--sig-fascia-tenue); --sig-testo-secondario: var(--sig-fascia-tenue); } /* La grana anche qui: è una superficie larga quanto lo schermo, ed è esattamente il caso in cui una tinta piatta si vede che è piatta. */ .sig-sezione.tenue::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sig-grana); opacity: var(--sig-grana-forza); } /* Fra una `tenue` e la sezione dopo il filo non serve: il cambio di fondo lo fa già, e un tratto in mezzo a due colori diversi è una cucitura di troppo. */ .sig-sezione.tenue + .sig-sezione::before, .sig-sezione.tenue::before { content: none; } /* Il filo non è più un bordo: è il tratto che sfuma sui lati, disegnato dallo pseudo-elemento più sotto. Un `border-top` arriva ai bordi per forza, e quello era il difetto. */ /* La fascia prato: il verde-100 della scala come fondo di sezione. È il colore che mancava — il sito era navy su bianco e basta, e una palette con un prato dentro non lo faceva mai vedere. */ /* La fascia prato: verde chiarissimo sul chiaro, pannello sullo scuro — e in tutti e due i casi il filo la chiude. Vedi `--sig-prato`. */ /* ══ I PASSAGGI FRA UNA SEZIONE E L'ALTRA ══════════════════════════════════ «Il passaggio da una sezione all'altra è troppo netto.» E il caso peggiore non è quello che sembra: non è la fascia colorata — quella si annuncia da sé — è il FILO fra due sezioni dello stesso identico colore. Un tratto da un pixel che attraversa tutto lo schermo per separare bianco da bianco: non divide niente, e si vede solo lui. In una pagina sola, dove le sezioni adesso sono sette, sono sette cuciture. Il filo resta — serve a dire che si è cambiato argomento — ma smette di arrivare ai bordi: sfuma a zero sui due lati, e quello che resta è un tratto corto al centro. È la differenza fra una cucitura e un segno di matita. PRIMA AVEVO PROVATO IL CONTRARIO, e va scritto perché non lo rifaccia nessuno: una sfumatura di venti pixel che portava il colore della PAGINA dentro la fascia. Sulla fascia scura, in tema chiaro, quella sfumatura è una velatura biancastra sul bordo alto — sembra un errore di stampa, non un passaggio. Il colore della pagina non entra nella fascia: la fascia comincia dove comincia, e sono i suoi bordi a doversi ammorbidire da dentro. */ .sig-sezione + .sig-sezione { position: relative; } .sig-sezione + .sig-sezione::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--sig-bordo) 22%, var(--sig-bordo) 78%, transparent 100%); } /* Le fasce colorate il filo non lo vogliono: hanno il loro, che è quello del colore. Quello che vogliono è uno SPESSORE ai bordi — una riga di luce sul filo alto e un velo scuro su quello basso, dall'interno. La fascia smette di essere un rettangolo appoggiato sopra e diventa un pezzo di pagina che sta su un altro piano. */ .sig-sezione.scura + .sig-sezione::before, .sig-sezione.prato + .sig-sezione::before, .sig-sezione.scura::before, .sig-sezione.prato::before { content: none; } .sig-sezione.scura, .sig-sezione.prato { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -14px 22px -14px rgba(7, 15, 30, .45); /* `isolation` per la grana qui sotto: serve a fare della fascia un contesto di impilamento, perché lo strato di rumore possa stare a `z-index: -1` — cioè sopra il fondo della fascia e SOTTO il suo contenuto. Senza, il rumore si poserebbe anche sopra il testo e le carte. */ position: relative; isolation: isolate; } /* La grana anche sulle fasce, e non è un di più: le fasce sono le superfici PIÙ piatte del sito — una tinta o una rampa su tutta la larghezza dello schermo — e la grana del fondo pagina non ci arriva, perché il loro colore la copre. Restavano l'unica cosa che sembrava stampata. */ .sig-sezione.scura::after, .sig-sezione.prato::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sig-grana); opacity: var(--sig-grana-forza); } /* Anche il prato smette di essere una tinta: la stessa cura delle altre, con la sua rampa verticale. Il colore è quello — il verde-100 della scala — solo letto in tre punti invece che in uno. */ /* La rampa dentro e i bordi al colore pieno, come sulla `tenue`: il prato è verde-100 e contro il fondo pagina chiaro sta a 1,017 — cioè niente. A tenerlo separato è il suo FILO, che infatti c'è in tutti e due i temi; ma un filo che nasce da un bordo già sfumato verso il fondo pagina è un filo che divide due colori quasi uguali. Il colore resta quello — qui non si tocca nessun verde del marchio — e cambia solo dove sta la sfumatura. */ .sig-sezione.prato { background: linear-gradient(180deg, var(--sig-prato) 0%, color-mix(in srgb, var(--sig-prato) 90%, var(--sig-sfondo)) 45%, var(--sig-prato) 100%); color: var(--sig-prato-testo); /* `--sig-prato-filo`, non quello della fascia scura: qui il filo serve in TUTTI E DUE i temi. Due pixel e non uno: su questa fascia il filo non accompagna il cambio di fondo — è il cambio di fondo, perché il verde e la pagina hanno la stessa luce. Vedi la nota sul token. */ border-top: 2px solid var(--sig-prato-filo); border-bottom: 2px solid var(--sig-prato-filo); } .sig-sezione.prato p { color: var(--sig-prato-tenue); } .sig-sezione.prato h2, .sig-sezione.prato h3 { color: var(--sig-prato-testo); } /* L'evidenziatore: una pennellata di lime DIETRO il testo, mai come testo. Parte dal basso e copre mezzo rigo, come un tratto di marker. */ /* ══ L'EVIDENZIATORE PORTA IL SUO TESTO ══════════════════════════════════════ Il titolare, 11 settembre 2026: «il testo del contest è illeggibile: contrasto troppo basso. È lo stesso difetto delle stelline e dei bollini dei gradi.» Era un tratto di evidenziatore che copriva solo la parte bassa della riga e NON diceva di che colore fosse il testo: se lo teneva dal padre. Nel tema chiaro il padre è navy e va bene; nel tema scuro è bianco, e bianco sul lime fa 2.04 — sotto anche il 3 dei caratteri grandi. Misurato nel browser, non dedotto. Il testo scuro da solo non bastava: col tratto basso le aste delle lettere restano FUORI dal lime, sul fondo scuro della fascia, e lì lo scuro fa 1.35. Non esiste un colore che contrasti con tutti e due — il lime sta a metà strada — quindi il tratto sale a coprire la riga intera e il testo diventa scuro: la regola dei bollini, «vince il testo che contrasta di più, e lo scuro è il nero», applicata a un fondo che qui c'è per davvero. Nel tema chiaro si perde il tratto di pennarello e si guadagna un blocco pieno: stessa lettura di prima, stesso colore, e una regola sola per tutti e due i temi invece di una che funziona a metà. */ .sig-evidenzia { background: linear-gradient(transparent 8%, var(--sig-lime-500) 8%, var(--sig-lime-500) 94%, transparent 94%); color: var(--sig-blu-900); padding: 0 .08em; } /* La barra sotto i titoli in display: obliqua come loro, lime come l'azione. Con le animazioni attive si disegna da sinistra (le regole del movimento stanno con le altre, sotto body.sig-anima). */ .sig-display.con-barra { position: relative; padding-bottom: .18em; } .sig-display.con-barra::after { content: ''; position: absolute; left: .04em; bottom: 0; width: 1.6em; height: .09em; background: var(--sig-lime-500); } body.sig-anima .sig-display.con-barra::after { transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--sig-curva-scatto) .35s; } body.sig-anima .sig-parole.sig-in-vista.con-barra::after, body.sig-anima .sig-display.con-barra.sig-in-vista::after { transform: scaleX(1); } /* ══ LE FASCE SCURE PORTANO IL GRADIENTE DEL MARCHIO ═════════════════════════ Il titolare: «l'unico blocco fatto bene è la fascia finale "Adesso vieni a giocare": quel gradiente funziona. Tienilo, e porta lo stesso livello di cura sulle altre sezioni.» Quel gradiente era un'eccezione dichiarata sulla sola chiusura. Adesso è il fondo di OGNI fascia scura: era già la cosa giusta, e tenerla per una sezione sola voleva dire avere una fascia bella e cinque piatte. IL VERSO SI ALTERNA, e non è vezzo: due fasce scure a poche schermate di distanza con lo stesso gradiente nello stesso verso si leggono come la stessa fascia ripetuta. A verso invertito si leggono come due momenti. */ .sig-sezione.scura { background: var(--sig-gradiente-fascia); color: var(--sig-scuro-testo); /* Il filo: trasparente sul chiaro, dove la fascia si annuncia da sé; sullo scuro è lui a dire dove comincia e dove finisce. */ border-top: 1px solid var(--sig-scuro-filo); border-bottom: 1px solid var(--sig-scuro-filo); } .sig-sezione.scura .sig-occhiello { color: var(--sig-scuro-tenue); } /* Nelle fasce scure il verde-800 sparirebbe: resta il tenue chiaro, che la regola della sezione scura imposta già. */ .sig-sezione.scura p { color: var(--sig-scuro-tenue); } .sig-sezione.scura h2 { color: var(--sig-scuro-testo); } /* ═══════════════════════════════════════════════════════════════════════════ TESTO ═══════════════════════════════════════════════════════════════════════════ */ h1, h2, h3 { font-family: var(--sig-font-titoli); font-weight: var(--sig-peso-titoli); letter-spacing: var(--sig-traccia-titoli); line-height: var(--sig-interlinea-sottotitolo); margin: 0 0 var(--sig-sp-2); } h1 { font-size: var(--sig-corpo-h1-mobile); } h2 { font-size: var(--sig-corpo-h2-mobile); } h3 { font-size: var(--sig-corpo-h3-mobile); } p { margin: 0 0 var(--sig-sp-3); } p:last-child { margin-bottom: 0; } .sig-occhiello { font-size: var(--sig-corpo-etichetta); text-transform: uppercase; letter-spacing: var(--sig-tracking-etichetta); /* Il verde della scala, finalmente in servizio: gli occhielli sono la didascalia del brand, e in grigio erano solo freddi. Il token cambia col tema — il verde-800 su fondo scuro fa 2,6 e non si legge. */ color: var(--sig-verde-testo); margin: 0 0 var(--sig-sp-2); font-weight: var(--sig-peso-semibold); } /* ── IL SEGNO CHE CAMBIA COL TEMA ──────────────────────────────────────── Il lettermark esiste in due versioni — navy e bianca — e su una pagina che segue lo schermo ne serve una per tema: navy su navy non si vede, e nemmeno bianco su bianco. ══ PERCHÉ LA SCELTA LA FA IL CSS, E NON UN ═════════════════════ Un con `media="(prefers-color-scheme: dark)"` sceglierebbe da solo, senza JavaScript, e sembra la strada giusta. Ha però un difetto che si vede solo il giorno di una pubblicazione: quella scelta sta nell'HTML, che è sempre fresco, mentre i colori stanno nel foglio, che il browser potrebbe avere ancora vecchio. Per il tempo che passa fra i due, il segno sarebbe bianco su una pagina ancora chiara. Con le due immagini in pagina e la scelta nel CSS la domanda è una sola: se il foglio è vecchio, il segno è quello vecchio — sbagliato insieme al resto, che è molto meglio che sbagliato da solo. */ .segno-chiaro { display: var(--sig-segno-chiaro); } .segno-scuro { display: var(--sig-segno-scuro); } .sig-guida { color: var(--sig-testo-tenue); } .sig-tenue { color: var(--sig-testo-tenue); font-size: var(--sig-corpo-testo-piccolo); } /* I titoli obliqui del brand: si chiedono per classe, non capitano da soli. Un `h1` inclinato in una pagina di modulo sarebbe fuori posto. */ .sig-display, .sig-h1 { font-weight: var(--sig-peso-black); text-transform: uppercase; transform: var(--sig-obliquo); margin: 0; } .sig-display { font-size: var(--sig-corpo-display-mobile); line-height: var(--sig-interlinea-display); letter-spacing: var(--sig-tracking-titolo); } .sig-h1 { font-size: var(--sig-corpo-h1-mobile); line-height: var(--sig-interlinea-titolo); letter-spacing: var(--sig-tracking-titolo); } .sig-h2 { font-weight: var(--sig-peso-extrabold); font-size: var(--sig-corpo-h2-mobile); line-height: var(--sig-interlinea-sottotitolo); letter-spacing: var(--sig-tracking-sottotitolo); margin: 0; } .sig-h3 { font-weight: var(--sig-peso-bold); font-size: var(--sig-corpo-h3-mobile); line-height: var(--sig-interlinea-sottotitolo); margin: 0; } /* La didascalia maiuscoletta del brand. Si chiamava `.sig-etichetta` e il nome era già occupato dalla pillola dei posti liberi — vedi la nota 5. */ .sig-microtesto { font-weight: var(--sig-peso-medium); font-size: var(--sig-corpo-etichetta); line-height: var(--sig-interlinea-etichetta); letter-spacing: var(--sig-tracking-etichetta); text-transform: uppercase; color: var(--sig-testo-secondario); } .sig-numero { font-weight: var(--sig-peso-black); font-size: var(--sig-corpo-numero-mobile); line-height: var(--sig-interlinea-numero); letter-spacing: var(--sig-tracking-display); font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ COSE DA PREMERE L'altezza minima sta sulla regola generale, non sul singolo pulsante: così un pulsante aggiunto domani nasce grande abbastanza senza che nessuno debba ricordarsene. ═══════════════════════════════════════════════════════════════════════════ */ /* Il bottone è un OGGETTO APPOGGIATO, non un rettangolo colorato: sotto il fill c'è un bordo più scuro — il verde della G — che gli dà uno spessore, e premendolo si schiaccia davvero: l'appoggio si riduce e il bottone scende di quel tanto. Niente ombre: la profondità la fa il bordo. Il margine sotto compensa l'appoggio: senza, premere il bottone farebbe ballare di 3px tutto quello che sta sotto di lui. */ /* ══ I PULSANTI USANO IL CARATTERE DEL SITO ═════════════════════════════ 11 ottobre 2026. Misurato su telefono e computer: 76 controlli su 486 uscivano in Arial — il panino del menu, le frecce ‹ › dei caroselli, la × della linguetta, l'occhio della password, i numeri nei pallini — perché un `