/* IL TEMA */ /* ------------------------------------------------ */ /* Questo file contiene SOLO il blocco :root. Nessuna regola, nessun selettore, nessuna eccezione. Serve a poter rispondere in un colpo d'occhio a una domanda sola: quanti valori diversi esistono davvero in questo sito? Nell'export da cui il sito e' stato convertito la risposta era: 27 colori esadecimali, 66 stringhe rgba, 25 ombre, 17 raggi, 53 corpi di testo e 31 gradienti, scritti a mano dentro 490 attributi style. Le stesse tinte comparivano in tre o quattro varianti distanti due punti l'una dall'altra, non per scelta ma per accumulo. Regola d'oro: negli altri fogli non deve comparire NESSUN valore letterale di colore, ombra, raggio o durata. Solo var(). Se serve un valore che qui non c'e', si aggiunge qui e gli si da' un nome. */ :root { /* LE QUATTRO TINTE DI BASE */ /* ------------------------------------------------ */ /* Dichiarate come terne separate da spazi invece che in esadecimale perche' cosi' ogni trasparenza si compone con rgb(... / alfa) e spariscono le 66 stringhe rgba letterali dell'originale. */ --rgb-accento: 201 162 39; /* l'oro, 220 usi nell'export */ --rgb-accento-tenue: 233 212 138; /* l'oro chiaro, 160 usi */ --rgb-accento-scuro: 138 109 29; /* solo per ombre e gradienti */ --rgb-ombra: 0 0 0; /* Servono anche queste tre, per i veli e le sfumature di bordo. */ --rgb-fondo-chiaro: 244 239 227; --rgb-fondo-scuro: 36 29 18; --rgb-testo-su-scuro: 255 253 246; /* FONDI E SUPERFICI */ /* ------------------------------------------------ */ --fondo-chiaro: rgb(var(--rgb-fondo-chiaro)); --fondo-scuro: rgb(var(--rgb-fondo-scuro)); /* Il vetro smerigliato della barra a isola: fondo scuro traslucido piu' una sfocatura di quello che ci passa sotto. */ --vetro-scuro: rgb(var(--rgb-fondo-scuro) / .72); --sfocatura-vetro: blur(14px); /* I due vetri dell'area clienti sono piu' FITTI di quello della vetrina, e non per gusto: e' una misura. Il .72 della vetrina regge quattro parole di menu sopra una fotografia scura. Nell'applicazione lo stesso vetro sta sopra una pagina crema, e composto contro il crema da' un fondo attorno a #5e584d: le voci non attive della barra ci misurano sopra 4,46:1, appena sotto il minimo, e nella tendina del profilo l'email scendeva a 3,15 e «Esci» a 2,45. A .82 le voci salgono a 6,3. Il pannello della tendina va oltre, a .9, perche' li' non ci sono etichette ma testo da leggere — nome, indirizzo, tre comandi — e un pannello che si legge ha bisogno di piu' fondo di una barra che si scorre. */ --vetro-scuro-fitto: rgb(var(--rgb-fondo-scuro) / .82); --vetro-scuro-pannello: rgb(var(--rgb-fondo-scuro) / .9); /* I pannelli che pendono dalla barra — la tendina, il menu del telefono — usano lo stesso vetro della barra, non un fondo diverso: devono sembrare la stessa cosa che si allunga, non un secondo oggetto appoggiato sopra. */ /* La card appoggiata su fondo chiaro e la sua riga alternata. */ --superficie-chiara: #fdfaf2; --superficie-chiara-alt: #f0e9d9; /* Il fondo di un campo da compilare: incassato, quindi piu' cupo della card che lo contiene ma piu' chiaro della pagina. Nessuna delle due superfici esistenti reggeva, alt e' troppo satura e perla-chiara troppo gialla. Ricavata dalla scala del sito. */ --superficie-incassata: #f8f3e8; /* La card appoggiata su fondo scuro, e la sua versione sollevata. */ --superficie-scura: #2e271c; --superficie-scura-alta: #3a2f1e; /* Il fondo del pulsante Login nella barra a isola. Un velo d'oro sul vetro scuro, non la superficie dorata dei bottoni: e' pieno, si vede che e' un pulsante, e non compete con l'unica azione che conta. Fino al 4 settembre 2026 il Login portava --grad-accento-superficie, cioe' lo stesso oro di «Parliamone 30 minuti» — su tutte e 157 le pagine il richiamo piu' forte del sito era una porta per chi e' gia' cliente. Diciotto centesimi e non meno: sotto il quindici il velo sparisce contro il vetro e il pulsante diventa la voce di menu che non e'. Il testo ci va in oro chiaro, che su questo fondo e' l'unica delle tinte dorate che regge il contrasto. */ --superficie-accesso: rgb(var(--rgb-accento) / .18); --superficie-accesso-viva: rgb(var(--rgb-accento) / .3); /* Le tre madreperle della card in evidenza: nell'export erano sei beige distanti due punti l'uno dall'altro, tutti dentro lo stesso gradiente a sette fermate. */ --perla: #f4ecd8; --perla-chiara: #fffaea; --perla-scura: #e8dcc0; /* TESTO */ /* ------------------------------------------------ */ /* Tre livelli per contesto: pieno, attenuato, tenue. Il nome dice su quale fondo il colore e' leggibile, non di che colore e'. */ --testo-su-chiaro: #241d12; --testo-su-chiaro-attenuato: #5c5142; --testo-su-chiaro-tenue: #6f6250; --testo-su-scuro: rgb(var(--rgb-testo-su-scuro)); --testo-su-scuro-attenuato: #d8cdb2; --testo-su-scuro-tenue: #b9a877; /* ACCENTO */ /* ------------------------------------------------ */ --accento: rgb(var(--rgb-accento)); --accento-tenue: #e9d48a; --accento-chiarissimo: #f3e3a4; --accento-scuro: rgb(var(--rgb-accento-scuro)); /* L'oro puro non ha contrasto sufficiente sul crema: per il testo e i collegamenti su fondo chiaro serve questa versione piu' cupa. */ --accento-su-chiaro: #7d6218; --accento-su-chiaro-forte: #6f5712; /* ALLERTA */ /* ------------------------------------------------ */ /* Il rosso non esisteva nel tema: la vetrina non ha stati di errore. L'area clienti si', per il banner che dichiara l'ambiente dimostrativo e per la voce che esce dal conto. Terna e non esadecimale perche' serve anche a .30, .08 e .07. */ --rgb-allerta: 122 26 42; --allerta: rgb(var(--rgb-allerta)); /* CONCLUSO */ /* ------------------------------------------------ */ /* Il verde non esisteva nel tema, e per un anno non e' servito: la vetrina non ha stati. L'area clienti ne ha uno solo — un piano concluso — e finora lo diceva in oro, come lo stato «In corso», per cui i due badge si distinguevano solo leggendoli. Smorzato e caldo, non il verde di una spunta di sistema: qui «completato» vuol dire un obiettivo raggiunto, non un'operazione riuscita, e il registro e' quello del resto della pagina. */ --rgb-concluso: 74 106 74; --concluso: rgb(var(--rgb-concluso)); /* Il rosso su fondo scuro non e' lo stesso rosso schiarito a caso: e' la stessa tinta portata su un fondo bruno, dove il 122-26-42 sparisce. Serve da quando la tendina del profilo e' diventata di vetro scuro e la voce «Esci» si e' trovata su un fondo su cui il rosso pieno non si legge. Schiarito il 3 settembre 2026 dopo averlo misurato: sul vetro della tendina il #d68291 di partenza dava 4,49:1, cioe' un centesimo sotto il minimo. Un centesimo non si vede, ma un controllo che passa per un centesimo non e' passato. */ --allerta-su-scuro: #db8b99; /* BORDI */ /* ------------------------------------------------ */ /* I primi due coprono da soli 49 degli ottanta bordi dell'export. */ --bordo-su-chiaro: rgb(var(--rgb-accento) / .35); --bordo-su-scuro: rgb(var(--rgb-accento-tenue) / .28); --bordo-su-chiaro-forte: rgb(var(--rgb-accento) / .55); --bordo-su-scuro-forte: rgb(var(--rgb-accento-tenue) / .45); --bordo-su-chiaro-tenue: rgb(var(--rgb-accento) / .22); --bordo-su-scuro-tenue: rgb(var(--rgb-accento-tenue) / .18); --bordo-divisorio: rgb(var(--rgb-accento) / .22); /* OMBRE */ /* ------------------------------------------------ */ /* Da 25 valori a sette. Le quattro varianti 24/50-24, 24/50-30, 22/50-30 e 22/46-24 erano la stessa ombra scritta quattro volte. */ --ombra-card-chiara: 0 18px 40px -24px rgb(var(--rgb-accento-scuro) / .5); --ombra-card-scura: 0 24px 50px -24px rgb(var(--rgb-ombra) / .55); /* Le schede dell'area clienti. Due strati e non uno: un contatto di un pixel piu' una diffusione alta. Serve perche' li' una scheda chiara sta su un fondo chiaro, e ombra-card-chiara — che ha una diffusione di quaranta pixel annullata da uno spread di ventiquattro — su quel contrasto non si vede. Sulla vetrina si vede, perche' le sue card stanno su fondi mossi. */ --ombra-scheda-app: 0 1px 2px rgb(var(--rgb-fondo-scuro) / .06), 0 8px 24px -18px rgb(var(--rgb-fondo-scuro) / .3); /* L'isola dell'area clienti e il pannello del patrimonio. Ombre in tinta e non in nero: --ombra-barra e --ombra-card-scura usano --rgb-ombra, che e' nero puro, e sul crema il nero sporca di grigio invece di scurire. Queste restano calde. Due strati anche qui: un contatto di un pixel, che dice che l'oggetto tocca la pagina, piu' una diffusione ampia e molto trasparente, che dice quanto e' sollevato. */ --ombra-isola-app: 0 2px 6px rgb(var(--rgb-fondo-scuro) / .1), 0 18px 44px -20px rgb(var(--rgb-fondo-scuro) / .45); --ombra-pannello-app: 0 1px 2px rgb(var(--rgb-fondo-scuro) / .08), 0 26px 60px -30px rgb(var(--rgb-fondo-scuro) / .55); /* Su una superficie bruna un'ombra non si vede: cio' che stacca il pannello dalla pagina e' un filo chiaro sul suo bordo alto. */ --filo-interno-chiaro: inset 0 1px 0 rgb(var(--rgb-accento-tenue) / .22); --ombra-rilievo: 0 40px 90px -40px rgb(var(--rgb-accento-scuro) / .5); --ombra-barra: 0 8px 30px -12px rgb(var(--rgb-ombra) / .4); --ombra-alone: 0 0 60px -8px rgb(var(--rgb-accento) / .55); --ombra-passaggio: 0 18px 38px -14px rgb(var(--rgb-accento) / .95); --ombra-interna: inset 0 2px 6px rgb(var(--rgb-accento-scuro) / .12); /* RAGGI */ /* ------------------------------------------------ */ /* Da 17 valori a sei: 999px e 99px erano la stessa pillola, e 11/12/13/14 erano una taglia sola. */ --raggio-xs: 3px; --raggio-s: 12px; --raggio-m: 18px; --raggio-l: 22px; --raggio-pillola: 999px; --raggio-cerchio: 50%; /* SPAZIATURE */ /* ------------------------------------------------ */ /* Scala da quattro pixel. Nell'export erano usati quasi tutti gli interi pari fra 2 e 40: l'arrotondamento massimo qui e' 2px. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px; --sp-28: 112px; /* Il margine laterale delle sezioni e il respiro verticale. */ --gutter: 7vw; --sezione-y: clamp(56px, 9vh, 110px); --sezione-y-stretta: clamp(40px, 6vh, 70px); /* Larghezza massima di una colonna di testo leggibile. */ --testo-massimo: 42rem; /* La colonna di un articolo: settantacinque caratteri, che e' la larghezza in cui la riga si legge in un colpo solo senza perdere il segno andando a capo. Vale per l'articolo sul blog, per le pagine scritte in Markdown e per l'articolo letto dentro l'area clienti: sono la stessa lettura, e si cambia di qui. */ --lettura-colonna: 75ch; /* TIPOGRAFIA */ /* ------------------------------------------------ */ /* Marcellus per i titoli, Jost per il testo. Le riserve di sistema sono scelte per metrica simile, cosi' lo scambio a caratteri caricati sposta il testo il meno possibile. */ --font-display: "Marcellus", "Times New Roman", Georgia, serif; --font-testo: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* Marcellus esiste SOLO al peso 400: chiedergliene altri produce una deformazione calcolata dal browser. Questi pesi sono per Jost. */ --peso-leggero: 300; --peso-normale: 400; --peso-medio: 500; --peso-forte: 600; /* Dieci corpi al posto dei 53 dell'export, mezzi pixel compresi. */ --testo-xxs: clamp(10px, 1.2vh, 12px); --testo-xs: 12px; --testo-s: 13px; --testo-m: 15px; --testo-l: 17px; --testo-xl: 20px; --titolo-s: clamp(22px, 2.4vw, 32px); /* Un gradino fra s e m: serve al manifesto della chiusura, dove il corpo m rubava la scena al logo. */ --titolo-sm: clamp(26px, 2.7vw, 39px); --titolo-m: clamp(30px, 3.1vw, 46px); --titolo-l: clamp(34px, 3.6vw, 52px); /* Il titolo dell'eroe. Nell'export cresceva con l'ALTEZZA della finestra, clamp(34px, 7vh, 68px), il che lo faceva rimpicciolire su un portatile basso e ingrandire su uno schermo verticale. Qui cresce con la larghezza, come tutti gli altri; l'altezza entra solo come tetto, perche' su una finestra bassa due righe a 62 pixel valgono trenta pixel che alla fascia certificazioni servono. Da 775 pixel di finestra in su il tetto torna 62. */ --titolo-xl: clamp(38px, 4vw, min(62px, 8svh)); /* Tre interlinee al posto di 19, quattro spaziature al posto di 13. */ --interlinea-stretta: 1.15; --interlinea-media: 1.3; --interlinea-ampia: 1.65; --traccia-s: .06em; --traccia-m: .12em; --traccia-l: .18em; --traccia-xl: .22em; /* MOVIMENTO */ /* ------------------------------------------------ */ /* Le durate lunghe dei cicli ambientali (6s, 32s, 90s) restano nelle regole di animazione: non sono una scala di interfaccia. */ --durata-rapida: .25s; --durata-media: .3s; --durata-lenta: .5s; --durata-carousel: .7s; --curva-standard: cubic-bezier(.4, 0, .2, 1); --curva-uscita: cubic-bezier(.2, .8, .3, 1); /* GRADIENTI */ /* ------------------------------------------------ */ /* Da 31 valori a undici. Il primo nell'export esisteva due volte, identico, una scritto in esadecimale e una in rgb(). */ /* Il riflesso oro sul testo. Va con background-size: 200% e l'animazione riflesso, altrimenti sta fermo. */ --grad-accento-testo: linear-gradient(100deg, var(--accento-scuro) 0%, var(--accento) 30%, var(--accento-chiarissimo) 50%, var(--accento) 70%, var(--accento-scuro) 100%); /* La superficie oro dei bottoni e della card in evidenza. */ --grad-accento-superficie: linear-gradient(120deg, var(--accento-scuro), var(--accento) 45%, var(--accento-tenue) 60%, var(--accento) 75%, var(--accento-scuro)); /* Qui e' vissuto per mezza giornata --grad-accento-opaco, un gradiente di due sole fermate per l'azione principale dell'area clienti. Non serve piu': su un pulsante largo quanto la pagina anche quel dislivello si vedeva, e un gradiente che si vede su una superficie grande e' un effetto, non un materiale. L'oro dell'applicazione e' tinta unita, cioe' --accento, e non ha bisogno di un token suo. Il gradiente qui sopra resta a servire la vetrina, dove far luccicare l'oro e' il mestiere. La trama metallica del pannello del patrimonio. Non e' un'immagine e non e' una texture: sono poche fermate d'oro molto trasparenti su un gradiente quasi orizzontale, il minimo perche' il bruno smetta di sembrare una campitura piatta e cominci a sembrare una superficie. Le due fermate che contano stanno al 4 e al 7 per cento di opacita': sopra il dieci si vede la riga, e una riga che si vede e' una decorazione, non un materiale. */ --grad-trama-metallo: linear-gradient(104deg, rgb(var(--rgb-accento) / 0) 0%, rgb(var(--rgb-accento) / .04) 34%, rgb(var(--rgb-accento-tenue) / .07) 52%, rgb(var(--rgb-accento) / .04) 68%, rgb(var(--rgb-accento) / 0) 100%); /* La madreperla della card del piano in evidenza. */ --grad-perla: linear-gradient(115deg, var(--perla-scura) 0%, var(--perla) 18%, var(--perla-chiara) 34%, var(--perla) 48%, var(--perla-scura) 66%, var(--perla) 84%, var(--perla-scura) 100%); /* Il filetto verticale che sfuma alle estremita'. Usa currentColor, cosi' un solo token serve i tre colori dell'originale. */ --grad-divisore: linear-gradient(180deg, transparent, currentColor, transparent); /* Lo stesso filetto coricato: separa i due dati grandi dell'area clienti. Anche questo su currentColor, quindi riusabile. */ --grad-divisore-orizzontale: linear-gradient(90deg, transparent, currentColor, transparent); /* Il luccichio diagonale che attraversa le card. */ --grad-luccichio: linear-gradient(120deg, rgb(var(--rgb-accento-tenue) / 0) 30%, rgb(var(--rgb-accento-tenue) / .3) 50%, rgb(var(--rgb-accento-tenue) / 0) 70%); /* La lama di luce che passa sui bordi (animazione lampo). */ --grad-lampo: linear-gradient(90deg, rgb(var(--rgb-accento) / 0) 0%, rgb(var(--rgb-accento-tenue) / .55) 45%, rgb(var(--rgb-testo-su-scuro) / .75) 55%, rgb(var(--rgb-accento) / 0) 100%); /* I due riempimenti delle barre di avanzamento del simulatore. */ --grad-barra-piena: linear-gradient(90deg, rgb(var(--rgb-accento) / .2), var(--accento) 70%, var(--accento-tenue)); --grad-barra-tenue: linear-gradient(90deg, var(--accento-scuro), var(--accento-tenue)); /* Il velo dorato dei riquadri di stato dell'area clienti: prossimo versamento, piano concluso, conferma di salvataggio. Nell'export erano tre gradienti distinti per due centesimi di alfa. */ --grad-velo-oro: linear-gradient(100deg, rgb(var(--rgb-accento) / .18), rgb(var(--rgb-accento-tenue) / .08)); /* Il fondo della card di piano intermedia. */ --grad-card-media: linear-gradient(160deg, rgb(185 168 119 / .34), rgb(var(--rgb-accento-scuro) / .22)); /* VELI E BAGLIORI */ /* ------------------------------------------------ */ /* Pellicole appoggiate sopra a un fondo. Tutte con la stessa alfa per contesto: nell'export le stesse quattro esistevano con alfa .1, .12, .13 e .16 senza una ragione visibile. */ /* Pellicola chiarissima sulle card scure: 13 usi nell'originale. */ --velo-chiaro: rgb(var(--rgb-testo-su-scuro) / .045); /* Sfumatura dall'alto sulle card scure. */ --velo-superiore: linear-gradient(180deg, rgb(var(--rgb-accento-tenue) / .22), transparent 70%); /* Sfumatura diagonale d'angolo. */ --velo-diagonale: linear-gradient(150deg, rgb(var(--rgb-accento) / .14), transparent 62%); /* L'alone dorato fermo sopra il marrone dei due pulsanti pieni scuri e delle due targhette dell'eroe. Fisso: non si accende al passaggio del puntatore, ne' con un'animazione. Sale dal basso perche' la luce che si aspetta di vedere su una superficie curva viene da sotto il bordo, non dal centro geometrico. L'alfa e' scritta per esteso e non e' piu' una leva. C'era `var(--velo-alone-forza, .42)`, pensata perche' le targhette dell'eroe la ridichiarassero a .16 — ma quella ridichiarazione non ha mai funzionato, perche' un var() dentro una custom property si risolve dove la property e' DICHIARATA, cioe' qui su :root, non dove viene usata. Le targhette hanno sempre dipinto .42. Il 2 settembre 2026 il velo e' stato tolto dalle targhette, e con lui l'unico tentativo di impostare quella variabile: ora il gradiente resta ai soli pulsanti pieni scuri, per cui .42 era stato tarato. La trappola e' scritta per esteso in CLAUDE.md. */ --velo-alone-oro: radial-gradient(120% 200% at 50% 118%, rgb(var(--rgb-accento) / .42), transparent 64%); /* La dissolvenza in fondo all'eroe, verso la fascia certificazioni. */ --velo-fondo-chiaro: linear-gradient(180deg, rgb(var(--rgb-fondo-chiaro) / 0) 0%, rgb(var(--rgb-fondo-chiaro) / .92) 45%, var(--fondo-chiaro) 100%); /* Scurimento centrale, per far risaltare il testo su un fondo mosso. */ --velo-scuro: radial-gradient(620px 420px at 50% 32%, rgb(var(--rgb-ombra) / .9), transparent 78%); /* Il bagliore d'ambiente delle sezioni. La forma e la posizione si passano dall'esterno, cosi' un token solo serve le cinque collocazioni diverse dell'export. */ --bagliore: radial-gradient(var(--bagliore-forma, 680px 680px) at var(--bagliore-pos, 100% 0%), rgb(var(--rgb-accento) / .13), transparent 66%); /* Sul marrone serve un filo di intensita' in piu' per vedersi. */ --bagliore-su-scuro: radial-gradient(var(--bagliore-forma, 900px 500px) at var(--bagliore-pos, 50% 0%), rgb(var(--rgb-accento) / .16), transparent 60%); /* L'alone morbido: quello che segue il puntatore e quello che vaga da solo sono lo stesso disegno e lo stesso colore. Portato da .5 a .62 il 2 settembre 2026, su richiesta del titolare. Sono DUE token e non uno con la forza parametrica, e non e' una ripetizione per pigrizia: un var() dentro il valore di una custom property viene sostituito dove la property e' DICHIARATA — qui, su :root — non dove viene usata. Scrivere `var(--alone-forza, .62)` qui e poi ridichiarare --alone-forza sulla sezione scura non produce alcun effetto: il valore e' gia' stato risolto. Provato, e misurato che non funzionava. */ --alone: radial-gradient(closest-side, rgb(var(--rgb-accento-tenue) / .62), rgb(var(--rgb-accento-tenue) / 0) 70%); /* Il .5 che l'alone aveva prima di quel ritocco. Lo usa solo il Perche', unica sezione scura che ne ha uno: la' il chiarore in piu' non serviva e allargava la macchia. */ --alone-su-scuro: radial-gradient(closest-side, rgb(var(--rgb-accento-tenue) / .5), rgb(var(--rgb-accento-tenue) / 0) 70%); /* PIANI DI SOVRAPPOSIZIONE */ /* ------------------------------------------------ */ /* Cinque valori dichiarati battono venti numeri sparsi: quando due elementi si contendono la stessa posizione si guarda qui. */ --z-sfondo: 0; --z-contenuto: 1; --z-sollevato: 10; --z-sentinella: 99; --z-testata: 100; }