/* 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 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; /* 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)); /* 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); --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)); /* 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'intensita' e' una leva e non un secondo gradiente: le targhette sono meta' dell'altezza di un pulsante, e la stessa alfa distribuita su meta' spazio si legge come il doppio. Chi lo usa ridichiara --velo-alone-forza; qui c'e' il valore dei pulsanti, che sono il caso piu' grande. */ --velo-alone-oro: radial-gradient(120% 200% at 50% 118%, rgb(var(--rgb-accento) / var(--velo-alone-forza, .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 che segue il puntatore. */ --alone: 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; }