/* 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); --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. */ --titolo-xl: clamp(38px, 4vw, 62px); /* 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%); /* 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; }