/* ========================================================================= 12-skin-definitiva.css, @layer skin Pagina definitiva, "la bozza diventa la pagina". Carta editoriale che ospita tre oggetti scuri accesi (l'audit MayerMoover in hero, la mappa del sistema, il calcolatore). L'hover non solleva nulla, il bordo si accende (--edge-a .38 -> .68, filetto ambra, gradino di superficie). Nessun dock dei concept, quindi nessuno spazio riservato. CONTRATTO DELLA SKIN, come per le altre. Solo riassegnazioni di custom property, zero geometria, zero colori letterali. Se qui servisse una regola di layout, manca una variante al componente in 04-components.css. ========================================================================= */ @layer skin { .c-definitiva { /* --- Fondo e inchiostro, la carta e' la base --------------------- */ --page-bg: var(--surface-l-050); --page-ink: var(--on-light-1); --ink-1: var(--on-light-1); --ink-2: var(--on-light-2); --ink-3: var(--on-light-3); --ink-4: var(--on-light-4); --ink-5: var(--on-light-5); /* --- Filetti, piu' presenti di Lauro, meno tecnici di Fratin ----- */ --hair: var(--hair-l-2); --hair-soft: var(--hair-l-1); --hair-strong: var(--hair-l-3); --hair-accent: var(--hair-amber-light); /* --- Ambra, su carta il filetto e il testo devono scurirsi ------- */ --accent: var(--amber); --accent-line: var(--amber-deep); --accent-text: var(--amber-text); --accent-on: var(--ink); --accent-fill: var(--amber-deep); --accent-quiet: var(--amber-deep-a14); /* --- Superfici ---------------------------------------------------- */ --card-surface: var(--surface-l-100); /* Il gradino di hover su carta resta a un passo dal canvas, cosi' il bordo acceso e' il segnale e la superficie solo lo asseconda. */ --card-surface-2: var(--surface-l-050); --card-line: var(--hair-l-2); --well-surface: var(--surface-l-000); /* Il pannello sta un gradino sotto la card, e' cosi' che il nodo centrale della mappa si stacca dagli altri cinque senza bordo. */ --panel-surface: var(--surface-l-050); --raised-surface: var(--surface-l-100); /* --- Materiale, il raggio percepibile sulle superfici ------------ */ --card-radius: var(--radius-sm); --card-pad: clamp(22px, 2.7vw, 32px); --card-elev: var(--elev-2); --card-elev-hover: var(--elev-3); --case-elev: var(--card-elev); --case-elev-hover: var(--card-elev-hover); --btn-radius: var(--radius-pill); --field-radius: var(--radius-sm); --brand-mark-radius: 50%; --edge-surface: var(--surface-l-100); --edge-rgb: var(--amber-deep-rgb); --ph-empty-bg: var(--surface-l-000); --ph-hatch: repeating-linear-gradient(135deg, var(--hair-l-2) 0 1px, transparent 1px 12px); /* --- Movimento, "il bordo si accende" al posto del lift ---------- */ --lift-edge: 0px; --lift-btn: 0px; --lift-card: 0px; --shift-row: 0px; --lift-logo: 0px; --lift-case: 0px; /* --- Nessun dock dei concept in questa pagina -------------------- */ --dock-safe: 0px; /* --- Hover "acceso" sui controlli condivisi: la sezione 25 legge queste property con default uguale allo stato di riposo, cosi' le altre pagine restano identiche anche al passaggio del mouse. */ --brand-hover-ink: var(--accent-text); --hero-scroll-hover-ink: var(--accent-text); --assumptions-hover-ink: var(--accent-text); --segmented-hover-ink: var(--ink-1); --segmented-hover-ring: inset 0 0 0 1px var(--hair-strong); /* Lo scroll cue della hero e' alto 14px: il padding lo porta a 38px di area di tocco senza spostare nulla a riposo. */ --hero-scroll-tap: var(--s-3); /* Il seam fra tesi e mappa respira senza aprire un secondo capitolo. */ --seam-gap: var(--s-8); /* --- Luce, sole basso da sinistra che ruota scendendo ------------ */ --ambient-1: var(--ambient-l-tl); --ambient-2: var(--ambient-l-top); --ambient-3: var(--ambient-l-tr); --ambient-4: var(--ambient-l-cool); --grain-blend-page: multiply; --grain-op-page: .024; --grain-blend-local: multiply; --grain-op-dark: .032; /* --- Focus: l'ambra pura sta sotto il 3:1 sulla carta, quindi l'anello scende all'ambra profonda; nei capitoli scuri risale. */ --focus-ring: var(--amber-deep); /* La testata continua la scena scura della hero, come nel concept 02. */ --header-bg: var(--surface-050); --header-line: var(--hair-d-1); /* L'incasso del calcolatore e' l'unico passaggio carta-scuro senza dissolvenza: l'ombra si allunga per fare da rampa al suo posto. */ --tr-inset-shadow: 0 -64px 140px -44px rgb(var(--ink-rgb) / .26); /* --- Hero, proporzioni del concept 02 ----------------------------- */ --hero-copy-fr: 1fr; --hero-aside-fr: .82fr; /* --- Ritmo editoriale piu' compatto: la pagina e' lunga e i capitoli devono restare leggibili come una sequenza, non come tavole isolate. */ --page: min(1200px, calc(100vw - var(--gutter) * 2)); --section-y: clamp(64px, 7.8vw, 112px); --section-y-lg: clamp(88px, 9.6vw, 138px); --section-y-sm: clamp(44px, 4.8vw, 68px); /* --- Tipografia, caldo sui display, sobrio su tutto il resto ----- */ --fv-wonk-display: 1; --track-label: .14em; /* Il display grande (u-display-l, usato dal finale) si ferma a 68px. */ --fs-display-l: clamp(2.75rem, 1.4rem + 3.2vw, 4.25rem); /* Segno del tool: l'iniziale sale alla scala delle etichette. */ --tool-mark-size: var(--fs-label); --tr-from: var(--surface-l-050); --tone-bg: var(--surface-l-050); /* --- Sfumatura dei fondi ------------------------------------------ Nessuna sezione e' una campitura piatta. Ogni fondo porta la stessa luce: piu' chiaro verso l'angolo alto a sinistra, piu' profondo verso il basso a destra. Un solo angolo su tutta la pagina, --tone-angle, cosi' i capitoli si leggono come un unico foglio illuminato da una sola sorgente e non come tavole con luci diverse. 164deg e' quasi verticale (96% verticale, 28% orizzontale): resta la banda dello screenshot di riferimento ma "punta verso un angolo", ed e' lo stesso angolo implicito delle luci ambientali gia' in palette, che stanno tutte in alto a sinistra (--ambient-tl / --ambient-l-tl). I valori sono veli di bianco e di inchiostro sul --tone-bg, mai colori nuovi: la palette non si allarga, si modula. Le ampiezze sono tarate sul punto peggiore di contrasto, non sull'effetto: carta #FAFAFB -> #F1F1F3 (dL* 3,1) ink-4 resta 4,74:1 pozzo #F2F2F4 -> #E9E9EC (dL* 3,1) non scende mai sotto oggi scuro #18181B -> #0C0C0F (dL* 5,0) ink-4 resta 5,18:1 Sul chiaro il margine e' minimo perche' --on-light-4 nasce gia' a 4,9:1: la carta puo' schiarirsi molto e scurirsi pochissimo. Sul scuro il margine e' ampio in entrambe le direzioni, quindi la sfumatura puo' respirare di piu'. Le fermate sono fitte e irregolari: distribuiscono l'errore di quantizzazione a 8 bit e tengono le bande sotto la soglia di percezione. */ --tone-angle: 164deg; --wash-paper: linear-gradient(var(--tone-angle), rgb(var(--white-rgb) / .50) 0%, rgb(var(--white-rgb) / .38) 16%, rgb(var(--white-rgb) / .25) 32%, rgb(var(--white-rgb) / .13) 48%, rgb(var(--white-rgb) / .05) 61%, rgb(var(--white-rgb) / 0) 71%, rgb(var(--ink-rgb) / .006) 82%, rgb(var(--ink-rgb) / .014) 100%); --wash-well: linear-gradient(var(--tone-angle), rgb(var(--white-rgb) / .40) 0%, rgb(var(--white-rgb) / .30) 20%, rgb(var(--white-rgb) / .19) 42%, rgb(var(--white-rgb) / .09) 64%, rgb(var(--white-rgb) / .03) 84%, rgb(var(--white-rgb) / 0) 100%); --wash-dark: linear-gradient(var(--tone-angle), rgb(var(--white-rgb) / .040) 0%, rgb(var(--white-rgb) / .031) 16%, rgb(var(--white-rgb) / .021) 34%, rgb(var(--white-rgb) / .012) 52%, rgb(var(--white-rgb) / .005) 68%, rgb(var(--white-rgb) / 0) 80%, rgb(var(--black-rgb) / .055) 90%, rgb(var(--black-rgb) / .13) 100%); /* Il piede della rampa scura, cioe' il colore reale in fondo a una sezione invertita. Serve alle dissolvenze che partono dal nero: se partissero da --surface-050 attaccherebbero due livelli piu' chiare del fondo che hanno sopra e aprirebbero un filo di luce sulla cucitura. */ --tone-ink-foot: color-mix(in srgb, var(--surface-050) 87%, rgb(var(--black-rgb))); /* Corsa nominale della sfumatura. Serve ai fondi troppo bassi per contenerla, la testata: mostrano la prima fetta di quella corsa invece di comprimere l'intera rampa in 73px. */ --wash-run: 1100px; } /* Su una pagina prevalentemente chiara, la testata scura resta un punto fermo e lega il primo scroll alla hero senza uno stacco bianco. */ .c-definitiva .site-head { --ink-1: var(--on-dark-1); --ink-2: var(--on-dark-2); --ink-4: var(--on-dark-4); --hair: var(--hair-d-2); --hair-strong: var(--hair-d-3); --panel-surface: var(--surface-100); --card-elev-hover: var(--elev-d-4); } /* Hero piu' vicina al concept 02: ritratto immersivo, titolo dominante e pannello compatto. La scala minima resta prudente sui telefoni stretti. */ .c-definitiva .hero { --fs-display-l: clamp(2.75rem, 1.1rem + 4vw, 4.625rem); /* Il fondo sotto la foto: dove la maschera la dissolve, in alto e in basso, deve restare la scena, non la carta della pagina. */ --page-bg: var(--surface-050); /* Sul telefono il ritratto resta percepibile tra copy e pannello: il pavimento non diventa un rettangolo opaco e lo scrim apre il centro. */ --hero-floor-mobile: linear-gradient(180deg, rgb(var(--ink-rgb) / .94) 0%, rgb(var(--ink-rgb) / .88) 76%, rgb(var(--ink-rgb) / 0) 100%); --hero-scrim-mobile: linear-gradient(var(--tone-angle), rgb(var(--white-rgb) / .045) 0%, rgb(var(--white-rgb) / .018) 40%, rgb(var(--white-rgb) / 0) 68%, rgb(var(--black-rgb) / .10) 100%), linear-gradient(180deg, rgb(var(--ink-rgb) / .94) 0%, rgb(var(--ink-rgb) / .66) 46%, rgb(var(--ink-rgb) / .92) 100%); /* Il velo di scena della hero e' opaco per il suo primo quarto: sopra la colonna del titolo la scena era nera piatta e la sfumatura di sezione non poteva arrivarci, perche' la foto e lo scrim la coprono entrambi. La stessa luce si aggiunge quindi come strato in cima allo scrim, con lo stesso --tone-angle del resto della pagina. Sul lato destro, dove lo scrim e' quasi trasparente, il velo alza appena il ritratto: e' coerente, la luce viene dalla stessa parte. */ --hero-scrim: linear-gradient(var(--tone-angle), rgb(var(--white-rgb) / .045) 0%, rgb(var(--white-rgb) / .020) 38%, rgb(var(--white-rgb) / 0) 66%, rgb(var(--black-rgb) / .10) 100%), linear-gradient(100deg, var(--surface-050) 0%, rgb(var(--ink-rgb) / .94) 26%, rgb(var(--ink-rgb) / .72) 48%, rgb(var(--ink-rgb) / .42) 72%, rgb(var(--ink-rgb) / .28) 100%); } /* Il percorso principale dell'offerta. Su carta la superficie di secondo livello e' a un passo dal bianco, quindi invisibile. La card core non si distingue per colore ma per quota, cioe' con un'ombra di due gradini piu' alta delle sorelle. Restano custom property, il componente non cambia. */ .c-definitiva [data-emphasis="core"] { --card-surface-2: var(--surface-l-100); --card-line: var(--accent-line); --card-elev: var(--elev-4); --card-elev-hover: var(--elev-5); } /* Il pozzo. La striscia di prova scende di un gradino invece di salire. E' il solo movimento di superficie che la carta si concede, e sostituisce un filetto orizzontale in piu'. */ .c-definitiva [data-tone="well"] { --tone-bg: var(--surface-l-000); --card-surface: var(--surface-l-100); --card-line: var(--hair-l-2); --tr-from: var(--surface-l-000); } /* I due capitoli scuri, la tesi con la mappa del sistema e il calcolatore. Dentro l'inversione l'intera rampa si ribalta senza che i componenti sappiano di trovarsi su un fondo diverso. Il calcolatore eredita da qui il proprio tono, nessun data-tone="light" nel markup. */ .c-definitiva [data-tone="invert"] { --page-ink: var(--on-dark-1); --ink-1: var(--on-dark-1); --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3); --ink-4: var(--on-dark-4); --ink-5: var(--on-dark-5); --hair: var(--hair-d-2); --hair-soft: var(--hair-d-1); --hair-strong: var(--hair-d-3); --hair-accent: var(--hair-amber-2); --accent-line: var(--amber); --accent-text: var(--amber); --accent-fill: var(--amber); --accent-quiet: var(--amber-a12); --card-surface: var(--surface-100); --card-surface-2: var(--surface-200); --card-line: var(--hair-d-2); --well-surface: var(--surface-000); --panel-surface: var(--surface-200); --raised-surface: var(--surface-400); --card-elev: var(--elev-d-2); --card-elev-hover: var(--elev-d-4); --edge-surface: var(--surface-100); --edge-rgb: var(--amber-rgb); --ph-empty-bg: var(--surface-100); --ph-hatch: repeating-linear-gradient(135deg, var(--hair-d-2) 0 1px, transparent 1px 12px); --ambient-1: var(--ambient-tl); --ambient-2: var(--ambient-top); --ambient-3: var(--ambient-tr); --ambient-4: var(--ambient-cool); --grain-blend-local: overlay; --grain-op-dark: .045; --tone-bg: var(--surface-050); --tr-from: var(--surface-050); --focus-ring: var(--amber); /* Le property di hover si ricalcolano sul fondo scuro. */ --assumptions-hover-ink: var(--accent-text); --segmented-hover-ink: var(--ink-1); --segmented-hover-ring: inset 0 0 0 1px var(--hair-strong); } /* Il capitolo scuro che si apre dalla carta dissolve la carta, non l'inchiostro: senza questa riga il blocco invert sopra vincerebbe sul selettore data-from di 04-components e il fade sarebbe invisibile. */ .c-definitiva [data-tone="invert"].tr-fade[data-from="paper"] { --tr-from: var(--surface-l-050); } /* Stessa collisione, direzione opposta, e finora la vinceva il tono: il pozzo riassegna --tr-from a se stesso con la stessa specificita' di data-from, quindi sotto la hero la dissolvenza partiva dal colore del pozzo ed era invisibile. Il passaggio piu' netto della pagina, dal nero della hero alla carta, era l'unico rimasto senza passaggio. Qui le dissolvenze che vengono dal nero partono dal piede della rampa scura, non dal suo valore nominale: e' quello il colore che hanno davvero sopra di se'. La specificita' in piu' (tre classi contro due) e' quello che serve per scavalcare il blocco di tono. */ .c-definitiva .tr-fade[data-from="ink"] { --tr-from: var(--tone-ink-foot); } /* ===================================================================== STESURA DELLA LUCE Deroga dichiarata al contratto della skin. Le tre regole che seguono dipingono, non riassegnano: 04-components stende i toni con "background: var(--tone-bg)", cioe' con una shorthand che azzera background-image, e --tone-bg non puo' diventare un gradiente perche' lo stesso token serve anche come colore pieno (il bordo del punto attivo in .journey-bar lo legge dentro "border: 2px solid"). Il layer skin sovrascrive quindi la sola longhand background-image e lascia il colore pieno dove sta. Quando il sistema di toni tornera' in 04-components, queste tre regole diventano una primitiva sola (--tone-wash accanto a --tone-bg) e qui resta il token. ===================================================================== */ /* La carta. E' un fondo continuo: dalla fine del pozzo alla fine del footer i capitoli chiari si susseguono senza interruzione, e una sfumatura per sezione aprirebbe una cucitura a ogni cambio. La stesura sta quindi sul foglio, non sulle sezioni, e resta ancorata al viewport: a ogni altezza di scroll la finestra ha la sua luce, e nessun bordo di sezione la interrompe. Dove attachment: fixed non regge (vecchio Safari su iOS) la sfumatura si distende sull'intero documento e diventa invisibile: si torna alla carta piatta di oggi, mai a un artefatto. */ .c-definitiva { background-image: var(--wash-paper); background-repeat: no-repeat; background-attachment: fixed; } /* Le isole di tono. Hero, tesi e calcolatore sono blocchi isolati dentro la carta, quindi ognuno porta la propria corsa completa: nessun vicino dello stesso colore con cui possa nascere una banda. */ .c-definitiva main > [data-tone="invert"] { background-image: var(--wash-dark); } .c-definitiva main > [data-tone="well"] { background-image: var(--wash-well); } /* La testata e' alta 73px: comprimerci dentro la rampa intera darebbe uno stacco netto proprio sotto il logo. Mostra invece la prima fetta della corsa nominale, cosi' attacca la hero sullo stesso valore. */ .c-definitiva .site-head { background-image: var(--wash-dark); background-repeat: no-repeat; background-size: 100% var(--wash-run); } /* Le dissolvenze fra capitoli sono tolte, tutte e quattro: sotto la hero, dopo "Il punto", prima dell'offerta e fra il calcolatore e la chiusura. Una fascia che sfuma un capitolo dentro l'altro sporca il confine invece di ammorbidirlo, e il difetto peggiora proprio ora che ogni fondo ha una sua sfumatura interna: la fascia ne sovrappone una seconda, con un'altra direzione e un'altra origine. Il confine resta netto, ed e' una scelta, non una rinuncia: i capitoli scuri arrivano al punto piu' profondo in fondo alla propria rampa e la carta riparte dal suo punto piu' chiaro, quindi lo stacco cade dove il contrasto e' massimo e si legge come un taglio voluto. Restano i token --tr-from e --tone-ink-foot, che servono ancora ai componenti, e resta l'ombra di incasso del calcolatore (--tr-inset-shadow): e' un'altra cosa, una rampa di profondita' e non una dissolvenza di colore. */ .c-definitiva .tr-fade::before, .c-definitiva .tr-fade[data-transition="thesis"]::before { content: none; } /* Il calcolatore chiude come ha aperto. .tr-inset nasce come "apertura di capitolo" e arrotonda solo i due angoli in alto: la sezione entrava come una card e usciva squadrata, tagliata di netto contro la carta. Ora che le fasce di dissolvenza non ci sono piu', quel taglio non e' piu' la fine di una rampa, e' solo un bordo mancante. Qui il capitolo diventa un'isola chiusa su tutti e quattro i lati. L'override sta nella skin e non in 04-components perche' .tr-inset e' condivisa dagli altri sette concept in cartella. */ .c-definitiva .tr-inset { border-radius: var(--radius-xl); } /* Lo scavalco serviva a far sporgere il contenuto oltre il confine inferiore. Con il fondo ora chiuso non c'e' piu' un confine da scavalcare, e il margine negativo lasciava sotto la card 23px contro i 138px sopra: il raggio da 32px era piu' alto del respiro che doveva arrotondare. Azzerato solo qui, la classe resta intatta per gli altri concept. */ .c-definitiva .tr-inset > .tr-overlap { margin-bottom: 0; } }