/* ========================================================================== L'identità di gianmarcolandi sopra OS. Ri-punta i token, non tocca un componente: le facce, i pesi dei titoli, la coppia brand e la fascia blu sono dichiarazioni su :root e su uno scope di progetto (.gl-band), lo stesso meccanismo con cui OS stesso cambia pelle tra le superfici. Niente selettore ds-* riscritto, niente valore fuori da questo file: è il posto canonico degli hex del progetto. ── La direzione, dal 26 agosto 2026 ──────────────────────────────────── Il cliente ha scelto l'esplorazione 2 fra le tre proposte (gianmarcolandi.vercel.app/esplorazione-2). Cambia una regola sola, e da quella scende tutto il resto: **l'architettura parla sans, il contenuto parla serif.** Titolo di pagina, titolo di sezione, nomi delle categorie, cifre: Manrope, in corpo grande e peso medio, con la crenatura stretta. Titoli d'articolo e d'evento: Domine, che resta la voce di ciò che è stato scritto. Prima erano Domine tutti e due e la pagina non distingueva l'insegna dal pezzo. La seconda regola è sul blu: **non decora, costruisce.** È la seconda campitura della pagina, non un accento — dove c'è, riempie tutto il campo; fra un campo blu e un campo chiaro non c'è sfumatura, c'è un taglio. Le uniche altre cose colorate sono i filetti, e sono lo stesso blu diluito nel fondo: `--gml-velo` e `--gml-filo` qui sotto. L'identità di partenza viene dal redesign Next (src/styles/theme.css, 17 ago 2026), che l'aveva campionata dal sito X5 del cliente, non scelta a occhio: Domine e Manrope, il blu #0b5394 della fascia d'intestazione, l'azzurro #1b96d4 come brand nello scuro perché il blu profondo sul nero sparisce. La copia servita è public/gl-theme.css, scritta da bin/sync-assets.php. ========================================================================== */ /* ── La faccia, servita da qui ──────────────────────────────────────────── Manrope stava sul CDN di Google, e questo vuol dire che l'indirizzo IP di chiunque apra una pagina arriva a Google prima di aver risposto alla fascia dei cookie. Non e' un cookie e non lo blocca un banner: e' una richiesta che parte comunque, e l'unico modo di non farla partire e' servire il file. Due fette e non sei: latino e latino esteso coprono l'italiano e i nomi che questo sito scrive. Cirillico, greco e vietnamita restavano scaricati solo a chi ne aveva bisogno, e qui non ne ha bisogno nessuno: 39 KB in tutto, contro due connessioni a un dominio di terze parti. `font-display: swap` come lo dava Google: il testo si legge subito col ripiego di sistema e cambia faccia quando il file arriva. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ── Le facce ── la cucitura che type.css di OS documenta come uso previsto. */ /* Una faccia sola. La direzione scelta ad agosto ne accoppiava due — l'architettura sans, il contenuto serif — e il 27 agosto 2026 il proprietario ha deciso che il sito parla solo sans. La cucitura resta dov'era: `--ds-typeface-display` esiste ancora e i ruoli continuano a leggerlo, quindi rimettere Domine è una riga sola e niente altro. */ --ds-typeface-display: "Manrope", system-ui, sans-serif; --ds-typeface-body: "Manrope", system-ui, sans-serif; /* ── Il brand ── hover, active e tint seguono da soli: OS li deriva dal pieno con color-mix, quindi una dichiarazione muove la famiglia. */ --gml-blue: #0b5394; --gml-blue-bright: #1b96d4; /* Il nero dell'apertura, e non e' un nero scelto: e' quello che il ritratto ha gia' nel suo fondo, misurato agli angoli dello scatto fra 7 e 30 su tutti e tre i canali. La campitura e la fotografia sono lo stesso nero, quindi fra le due non c'e' un bordo: c'e' lui, e attorno a lui il buio in cui e' stato fotografato. */ --gml-nero: #0b0d0f; --ds-brand: var(--gml-blue); /* Il contenuto che sta su blu pieno: bianco in entrambi i temi, non segue la tavolozza della pagina. Il campo dietro le locandine idem: hanno cornici chiare e in tema scuro galleggerebbero in un ritaglio nero. */ --gml-header-fg: #ffffff; --gml-header-fg-quiet: rgba(255, 255, 255, 0.78); --gml-poster-bg: #ffffff; /* ── Le tre profondità del blu, e basta ──────────────────────────────── Il pieno è `--gml-blue`; il velo è la stessa tinta al 7% del fondo (lo sfondo tenue di un campo chiaro), il filetto la stessa tinta al 26% (la riga che separa senza disegnare una cornice), il fondo è il pieno scurito (l'hover di una campitura, e la linguetta sulle locandine). Il fondo di pagina entra nella miscela invece del bianco, così velo e filetto seguono il tema da soli. */ --gml-velo: color-mix(in srgb, var(--gml-blue) 7%, var(--ds-surface-0)); --gml-filo: color-mix(in srgb, var(--gml-blue) 26%, var(--ds-surface-0)); --gml-blu-fondo: color-mix(in srgb, var(--gml-blue) 84%, #000000); /* Il corpo delle etichette maiuscole. Era una decisione del progetto, 0.625rem scritto qui con la sua difesa; il 4 settembre 2026 quella decisione è salita in OS come ruolo `micro` — stessa misura, stessa ragione, scritta nei token del sistema — e questo nome è diventato un alias: chi lo legge nei componenti del progetto sta leggendo il ruolo. La difesa storica vive in tokens/surface.css di OS. */ --gml-text-micro: var(--ds-font-micro-size); /* Il moto: una curva sola per tutto il sito. Parte decisa e si posa. */ --gml-ease: cubic-bezier(0.32, 0, 0.2, 1); } /* Nel tema scuro il blu profondo non si vede più su un fondo quasi nero: velo e filetto salgono di dose e il filetto passa al secondo blu, che è quello che il brand diventa quando il fondo si spegne. Le campiture invece non cambiano mai: restano il blu profondo con la scritta bianca in entrambi i temi. Un campo pieno di azzurro chiaro con sopra del bianco farebbe 2.9:1, cioè illeggibile — e l'architettura della pagina non può dipendere da un interruttore. */ :root[data-theme="dark"] { --ds-brand: var(--gml-blue-bright); /* Sull'azzurro acceso le parole sono quasi-nere, non bianche, e l'hover SCHIARISCE: sul chiaro il pieno si scurisce sotto il puntatore, sullo scuro si accende. Numeri del tema Next, non inventati qui. */ --ds-on-brand: #06121c; --ds-brand-hover: #47adde; --ds-brand-active: #6dbde6; --gml-velo: color-mix(in srgb, var(--gml-blue) 16%, var(--ds-surface-0)); --gml-filo: color-mix(in srgb, var(--gml-blue-bright) 30%, var(--ds-surface-0)); } /* ── I titoli: l'architettura ────────────────────────────────────────────── Da 1 a 3 la pagina parla di sé — l'insegna, il capo di una sezione, il nome di una categoria — e lo fa in Manrope. Il corpo e il peso si muovono in direzioni opposte: il titolo più grande della pagina è anche il meno pesante, così la scala non diventa un urlo. La crenatura è negativa e forte perché a queste misure le lettere si allontanano da sole, e la riga deve leggersi come un blocco compatto. Le taglie misurano --ds-viewport come fa OS, così un pannello o un canvas stretto le vede giuste. -------------------------------------------------------------------------- */ [data-surface="web"] { --ds-font-heading-1-face: var(--ds-typeface-body); --ds-font-heading-1-size: clamp(2.75rem, calc(var(--ds-viewport) * 0.074), 6rem); --ds-font-heading-1-weight: var(--ds-weight-robust); --ds-font-heading-1-tracking: -0.045em; --ds-font-heading-1-leading: 0.92; --ds-font-heading-2-face: var(--ds-typeface-body); --ds-font-heading-2-size: clamp(1.5rem, calc(var(--ds-viewport) * 0.026), 2.25rem); --ds-font-heading-2-weight: var(--ds-weight-robust); --ds-font-heading-2-tracking: -0.03em; --ds-font-heading-2-leading: 1.05; --ds-font-heading-3-face: var(--ds-typeface-body); --ds-font-heading-3-size: clamp(1.125rem, calc(var(--ds-viewport) * 0.016), 1.5rem); --ds-font-heading-3-weight: var(--ds-weight-robust); --ds-font-heading-3-tracking: -0.02em; --ds-font-heading-3-leading: 1.5; /* ── I titoli: il contenuto ───────────────────────────────────────────── Da 4 a 6 parlano i pezzi: il titolo di un articolo, quello di un evento, il nome sotto una locandina. Domine, semibold e crenatura quasi a zero — il serif ha già la sua autorevolezza nelle grazie, e il tracking negativo che serve al sans qui chiuderebbe le aperture. Il 6 cambia faccia rispetto a OS, che lo dà al corpo: a 18px un titolo d'articolo resta un titolo d'articolo, e cambiare voce a metà della scala spezzerebbe la regola in due. */ --ds-font-heading-4-weight: var(--ds-weight-robust); --ds-font-heading-4-tracking: -0.01em; --ds-font-heading-4-leading: 1.15; --ds-font-heading-5-weight: var(--ds-weight-robust); --ds-font-heading-5-tracking: -0.01em; --ds-font-heading-5-leading: 1.25; /* I sei titoli hanno un peso solo, il 500 dell'insegna. Dal quarto al sesto erano 600: era il gradino che teneva un titolo piccolo separato dal corpo quando i titoli parlavano serif e il corpo sans. Con una faccia sola quel gradino diventa una seconda voce dove ne serve una, e il proprietario ha scelto il 500 guardando «Il blog di Gianmarco Landi». */ --ds-font-heading-6-face: var(--ds-typeface-display); --ds-font-heading-6-weight: var(--ds-weight-robust); --ds-font-heading-6-tracking: 0; --ds-font-heading-6-leading: 1.25; /* L'occhiello è il segnale più ricorrente della pagina: maiuscolo, stretto di corpo e largo di crenatura. 0.16em e non gli 0.08 di OS, perché a 12px il maiuscoletto si legge come una parola sola se non lo si apre. */ --ds-font-overline-size: var(--ds-font-small-size); /* Il grassetto a 700 e non a 600. E' il peso che ogni editor di testo scrive quando premi il bottone del grassetto, quindi e' quel che chi scrive si aspetta di vedere pubblicato; a 600, dentro un testo lungo in Domine, la parola in evidenza si distingue appena. Il nome e' quello che OS ha aggiunto apposta: muovere la primitiva `--ds-weight-intense` porterebbe a 700 anche gli occhielli e i bottoni, che qui la usano e che a 700 diventano un'altra cosa. */ --ds-bold-weight: 700; --ds-font-overline-weight: var(--ds-weight-intense); --ds-font-overline-tracking: 0.16em; --ds-font-overline-leading: 1.5; } /* ── La traccia e il respiro ────────────────────────────────────────────── La traccia e' larga: 125rem di tetto e un gutter che segue la finestra, che e' la misura del sito prima del redesign e quella che il proprietario ha ripreso il 26 agosto 2026. In OS il gutter sta DENTRO la traccia, quindi il contenuto e' la banda meno due gutter: 1296 a 1440, 1760 a 1920, 351 su un telefono da 390. L'esplorazione era a 1200 fissi con gutter da 24, che e' la misura di Semafor e Rest of World. Su uno schermo largo lasciava due fasce vuote da 120 per lato, e questo sito ha una griglia di copertine e un archivio a tredici righe che di larghezza ne vogliono. Il ritmo verticale scende dagli 80-160 di OS a 64-96. La pagina nuova non separa le sezioni con l'aria ma con il taglio fra un campo e l'altro, e ottanta pixel di vuoto sopra un filetto da 2px lo fanno sembrare dimenticato. Sulla classe del progetto che sta sull'elemento della shell, perché OS dichiara il gutter lì e un :root ereditato perde. Anche sulle sezioni: OS lo ridichiara su ognuna, perché una sezione può stare fuori da qualsiasi shell, e quella dichiarazione batte l'eredità. */ .gl-under-bar, .gl-under-bar .ds-site__section, /* La fascia dei cookie sta fuori dalla shell — è fissa, quindi non le serve starci dentro — ma il suo testo deve cominciare in colonna con quello della pagina, e per farlo le servono le due misure da cui `--gml-bordo` si calcola. Senza, `var(--gml-bordo)` era invalido lì dentro e portava giù tutta la dichiarazione: `padding` calcolato 0, la fascia alta 51 pixel col testo attaccato ai bordi. */ .gl-cookie { /* Il margine segue la finestra invece di restare a 24: mezzo pollice su un telefono, cinque centimetri su uno schermo largo. E' il respiro che il sito vecchio ha ai lati, e a 1440 vale 72. */ --ds-site-gutter: clamp(0.5rem, 5vw, 5rem); } .gl-under-bar, .gl-cookie { --ds-site-band: 125rem; /* Il margine della pagina: quanto c'è fra il bordo dello schermo e la prima lettera. Non un numero ripetuto ma la traccia stessa, letta al contrario, così una revisione della misura muove tutto quel che ci si allinea: la barra fissa, che non è una sezione e non passa dalla banda, e il campo blu del canale, che deve sfondare fino al bordo tenendo il testo in colonna con il resto. */ --gml-bordo: calc(max(0px, (100vw - var(--ds-site-band)) / 2) + var(--ds-site-gutter)); --ds-rhythm-section: clamp(var(--ds-space-16), calc(var(--ds-viewport) * 0.08), var(--ds-space-24)); /* Il ritmo dentro una sezione: titolo e contenuto stanno a 32, non ai 48 del block di OS. */ --ds-rhythm-block: var(--ds-space-8); } @media (max-width: 40rem) { .gl-under-bar, .gl-under-bar .ds-site__section, .gl-cookie { --ds-site-gutter: var(--ds-space-4); } } /* ── Il richiamo ────────────────────────────────────────────────────────── Il bottone del sistema, ri-puntato sui suoi stessi ganci: faccia e peso pieni, crenatura da occhiello, filetto da 2px. È il gesto che l'esplorazione usa ovunque — un richiamo squadrato in maiuscoletto. Il debito qui è stato ripagato il 4 settembre 2026: `--ds-button-case` e `--ds-button-edge-width` sono le manopole che OS ha guadagnato da questo file, e questo blocco è tornato ri-puntamento puro, zero proprietà nei selettori del sistema. L'aritmetica del padding di OS ora sottrae l'edge, quindi il tier regge esatto: il testo dentro il richiamo si è ricentrato di 1px, che è il centro giusto. Il primario è blu, come nel sito attuale: si riscrive il token inverse dentro il bottone e non a :root, perché inverse lo usano anche altri pezzi che devono restare come sono. E il blu è `--gml-blue`, non `--ds-brand`. La differenza si vedeva solo nel tema scuro, dove il brand diventa l'azzurro acceso: lì il bottone pieno usciva azzurro chiaro con le parole quasi nere, mentre in chiaro era blu profondo con le parole bianche. Due bottoni diversi per lo stesso gesto, e quello scuro il proprietario non lo vuole (16 settembre 2026). Il brand resta com'è, perché nel tema scuro l'azzurro acceso regge i filetti, le etichette di categoria e i numeri delle voci, e su un fondo quasi nero il blu profondo lì non si vedrebbe. A cambiare è solo il richiamo, che è quel che era stato chiesto. Le dosi di hover e active sono le stesse che OS deriva dal brand nel tema chiaro, 85 e 72: così il chiaro non si muove di un valore e lo scuro arriva dov'era già il chiaro. */ .ds-button { --ds-inverse: var(--gml-blue); --ds-on-inverse: var(--gml-header-fg); --ds-inverse-hover: color-mix(in srgb, var(--gml-blue) 85%, black); --ds-inverse-active: color-mix(in srgb, var(--gml-blue) 72%, black); /* Il filetto dell'outline no: quello segue il brand, e nel tema scuro è giusto che sia l'azzurro acceso. Un filetto di blu profondo su un fondo quasi nero fa 2.5:1, sotto il 3:1 che una linea deve tenere per essere una linea; l'azzurro ne fa 6. Il riempimento e il filetto qui vogliono due colori diversi perché uno porta del testo sopra di sé e l'altro no: il primo deve reggere il bianco, il secondo deve solo farsi vedere. */ --ds-button-edge: var(--ds-brand); } .gl-under-bar .ds-button { --ds-button-face: var(--ds-typeface-body); --ds-button-weight: var(--ds-weight-intense); --ds-button-tracking: 0.1em; /* OS accoppia il corpo del testo alla taglia del bottone, e scrive perché: 14px dentro un bottone da 64 sembra un errore. Qui il corpo si sgancia e si ferma a 14 su tutte le taglie, perché il maiuscoletto con un decimo di em di crenatura legge più grande del suo corpo nominale — a 16 la riga di richiami diventava il pezzo più pesante dell'apertura, sopra il titolo. L'altezza resta quella della taglia, quindi il bottone grande è ancora grande: cambia solo quanto inchiostro ci mette dentro. */ --ds-button-size: var(--ds-font-label-size); --ds-button-leading: var(--ds-font-label-leading); --ds-button-edge-width: 2px; --ds-button-case: uppercase; } /* ── La testata di una pagina ───────────────────────────────────────────── Ogni pagina apre con lo stesso terzetto — occhiello, titolo, una riga corta — e dal 27 agosto 2026 lo apre anche con lo stesso CORPO. Il titolo di una pagina interna stava sul secondo ruolo, 36px, mentre quello della home sta sul primo, 96: due misure per la stessa cosa, e il proprietario ha scelto la prima. `siteTitle` espone i cinque ganci, quindi si sposta da qui e nessun selettore del sistema viene riscritto. La riga corta prende il tetto di misura che ha già l'attacco della home. Senza, correva per tutti i 1296 della traccia, che a 20px fa più di centocinquanta caratteri per riga: `ch` è la larghezza dello zero, più larga della lettera media, quindi 48ch qui vale poco più di sessanta. */ .gl-under-bar .ds-site-page__title { --ds-site-page-title-face: var(--ds-font-heading-1-face); --ds-site-page-title-size: var(--ds-font-heading-1-size); --ds-site-page-title-weight: var(--ds-font-heading-1-weight); --ds-site-page-title-leading: var(--ds-font-heading-1-leading); --ds-site-page-title-tracking: var(--ds-font-heading-1-tracking); } .gl-under-bar .ds-site-page__lede { max-inline-size: 48ch; } /* ── Le liste nome-valore ───────────────────────────────────────────────── I recapiti, e ogni altra coppia nome-valore del sito, stanno sulla lista di OS. La direzione nuova vuole il nome come tutte le altre etichette della pagina — maiuscoletto micro, molto aperto — e il valore un gradino sopra il corpo, perché in una lista di recapiti il valore È il contenuto. Il corpo del valore ha il suo gancio, `--ds-description-list-size`. Il nome no: la lista espone solo il suo inchiostro, `--ds-description-list-name-ink`, quindi corpo, peso e maiuscolo si scrivono sulla parte interna. È il secondo e ultimo buco di OS che questo progetto tampona da fuori, insieme al `case` del bottone qui sopra: entrambi vanno chiesti al sistema come manopole, non tenuti qui. Nello scope del sito e non su una classe della home, perché la stessa lista sta anche su /contatti: due vestiti per un componente solo sarebbero il difetto, non la rifinitura. */ .gl-under-bar .ds-description-list { --ds-description-list-size: var(--ds-font-heading-6-size); /* L'interlinea sale col corpo. Senza questa riga il valore usciva 18px su una riga di 16, perché la misura veniva dal sesto titolo e l'interlinea era rimasta su quella dell'etichetta: su /contatti si vedeva solo come due pixel fuori dalla riga, su /conferenze — dove i valori vanno a tre righe — le righe si toccavano. È la regola che OS si fa controllare da `npm run check`, e qui il controllo non arriva. */ --ds-description-list-leading: var(--ds-font-heading-6-leading); } /* I recapiti portano un marchio pieno accanto al testo — la busta, il segno di WhatsApp — e un disegno pieno a 0.35em si legge attaccato alla prima lettera, perche' non ha bianco dentro che faccia da stacco. Mezzo em. Ri-puntato SULL'elemento e non su :root, perche' e' li' che `.ds-link` lo dichiara: un token di componente si scrive addosso all'elemento che lo usa, e una dichiarazione su un antenato resta piu' lontana. Stessa trappola del titolo della newsletter, e la seconda volta che la pago. */ .ds-description-list .ds-link { --ds-link-gap: 0.5em; } /* Il secondo debito ripagato lo stesso giorno: il nome della lista ha i suoi cinque mezzi e la manopola del maiuscolo, quindi anche qui solo ri-puntamento. L'interlinea adesso viaggia col corpo per nome, che è la regola che il check di OS si fa rispettare in casa. */ .gl-under-bar .ds-description-list__name { --ds-description-list-name-size: var(--gml-text-micro); --ds-description-list-name-weight: var(--ds-weight-intense); --ds-description-list-name-tracking: 0.16em; --ds-description-list-name-case: uppercase; } /* ── Il marchio ─────────────────────────────────────────────────────────── "Gianmarco Landi" era scritto in due modi: 14px peso 400 in testata, 16px peso 400 nel piede. E' un nome solo e adesso ha un trattamento solo, e le tre misure stanno qui una volta perche' i due posti che lo scrivono le leggano dallo stesso nome. Sans e non serif: il marchio e' architettura, come l'insegna e i capi di sezione. Peso 500 e non 600 perche' e' un nome, non un richiamo. */ :root { --gml-marchio-face: var(--ds-typeface-body); --gml-marchio-size: var(--ds-font-heading-6-size); --gml-marchio-weight: var(--ds-weight-robust); --gml-marchio-leading: 1.4; /* La stessa crenatura dei titoli. Il peso era gia' il loro — 500 in barra e 500 sui sei titoli — e quel che restava diverso era la spaziatura: i titoli chiudono a -0.045em e il nome stava a zero, quindi le stesse lettere si leggevano come due letterings. */ --gml-marchio-tracking: var(--ds-font-heading-1-tracking); } /* Sul componente e non su un antenato: il piede dichiara i propri cinque nomi sulla sua stessa scatola, e un valore ereditato perde sempre contro una dichiarazione che sta sull'elemento. Due classi contro una bastano. */ /* La newsletter e' la sola cosa del piede che chiede qualcosa, e su questo sito e' una fascia e non una riga: piu' larga, con il titolo alla voce di un capo di sezione, e con del respiro sopra e sotto che la stacca dalle colonne di link. I due knob sono di OS; qui si ri-puntano, come per il marchio qui sotto. */ .gl-under-bar .ds-footer__newsletter { --ds-footer-newsletter-width: 46rem; --ds-footer-newsletter-space: var(--ds-rhythm-section); } /* I token della voce stanno SULL'elemento che li usa, non sul blocco: e' il modo in cui OS li dichiara — ogni componente si scrive i suoi addosso — e ri-puntarli sul contenitore non li raggiunge, perche' la dichiarazione del componente e' piu' vicina. Si ri-puntano dove sono. */ /* Il titolo sale a un capo di sezione e la riga sotto scende al corpo: a 23 contro 20 le due si leggevano come un unico blocco di testo, e il titolo non faceva il titolo. Fra due voci ci vuole un gradino, non uno scalino. */ .gl-under-bar .ds-footer__newsletter-title { --ds-footer-newsletter-title-face: var(--ds-font-heading-2-face); --ds-footer-newsletter-title-size: var(--ds-font-heading-2-size); --ds-footer-newsletter-title-leading: var(--ds-font-heading-2-leading); --ds-footer-newsletter-title-tracking: var(--ds-font-heading-2-tracking); --ds-footer-newsletter-title-ink: var(--ds-text-primary-neutral); } .gl-under-bar .ds-footer__newsletter-text { --ds-footer-newsletter-text-size: var(--ds-font-body-size); --ds-footer-newsletter-text-leading: var(--ds-font-body-leading); } .gl-under-bar .ds-footer__brand { --ds-footer-brand-face: var(--gml-marchio-face); --ds-footer-brand-size: var(--gml-marchio-size); --ds-footer-brand-weight: var(--gml-marchio-weight); --ds-footer-brand-leading: var(--gml-marchio-leading); --ds-footer-brand-tracking: var(--gml-marchio-tracking); } /* ── Il piede: i dettagli societari leggono come la riga sopra ──────────── La riga con la ragione sociale e la partita IVA stava a 12px mentre la frase sopra sta a 14: due righe di prosa nella stessa colonna, una piu' piccola dell'altra senza che nessuna delle due sia una didascalia. Sono la stessa cosa detta in due modi, e adesso hanno lo stesso corpo. */ .gl-under-bar .ds-footer__details { --ds-footer-details-size: var(--ds-font-label-size); --ds-footer-details-leading: var(--ds-font-label-leading); /* Ragione sociale, sede e partita IVA sull'inchiostro primario e non sul terziario, che è il grado più tenue dei tre. Sono i dati che rendono identificabile chi c'è dietro il sito: obbligati per legge e messi a 14px in grigio chiaro si leggevano come una nota di servizio. */ --ds-footer-details-ink: var(--ds-text-primary-neutral); } /* ── La fascia ───────────────────────────────────────────────────────────── Il blu d'intestazione è metà dell'identità del sito. Lo scope è una classe del progetto sulla barra, e dentro si ri-puntano i token che l'header legge: fondo, inchiostri, hover. Il contenuto sta su blu pieno in entrambi i temi, quindi è bianco fisso e non segue la tavolozza della pagina. La stessa classe veste ogni bottone che finisce su una campitura blu, ed è per questo che è una classe e non un selettore: la campitura non deve sapere quali bottoni contiene, e il bottone non deve sapere di stare in una campitura. */ .gl-band { --ds-surface-0: var(--gml-blue); --ds-border-subtle: transparent; --ds-border: rgba(255, 255, 255, 0.4); --ds-text-primary-neutral: #ffffff; --ds-text-secondary-neutral: rgba(255, 255, 255, 0.78); --ds-surface-hover: rgba(255, 255, 255, 0.12); --ds-focus: #ffffff; /* Il bottone pieno su blu: bianco con le parole blu. `inverse` è "il colore della pagina rovesciato", e dentro la fascia la pagina È blu. */ --ds-inverse: #ffffff; --ds-on-inverse: var(--gml-blue); --ds-inverse-hover: rgba(255, 255, 255, 0.86); --ds-inverse-active: rgba(255, 255, 255, 0.74); /* E il filetto con loro: qui sopra il bottone lo punta al brand, che sulla fascia sarebbe azzurro su blu. */ --ds-button-edge: #ffffff; }