/* * E.SI' — Design token * * ──────────────────────────────────────────────────────────────────────── * COME SI LEGGE IL PDF * * Il PDF di specifica è impaginato su 842×646 pt: un formato che non * corrisponde a nessun viewport reale. Tradurlo in pixel fissi darebbe un * sito che si rompe al primo ridimensionamento. * * Quindi dal PDF prendiamo ciò che è davvero invariante: * - i colori, campionati esattamente; * - i RAPPORTI fra gli elementi (proporzioni del logo, larghezza del menu * rispetto alla pagina, quanto il logo occupa dell'header); * - il ritmo delle spaziature e gli allineamenti. * * Le dimensioni assolute invece sono fluide: scala tipografica in rem legata * a una radice che cresce col viewport, e clamp() dove serve un minimo e un * massimo. Un token in px compare solo dove è giusto che non scali * (spessori di bordo, ecc.). * ──────────────────────────────────────────────────────────────────────── */ /* Radice fluida: tutto ciò che è espresso in rem scala di conseguenza, senza un solo media query. Tra 320px e 1600px di viewport la base passa da 15px a 18px. */ html { font-size: clamp(0.9375rem, 0.875rem + 0.28vw, 1.125rem); } :root { /* ============================================================ COLORI — campionati dai rendering del PDF, non stimati a occhio ============================================================ */ /* Nero istituzionale. È il colore più presente del PDF: fondi delle fasce, testo corrente, logotipo, footer. Non è #000: è un nero caldo. */ --esi-nero: #231F20; --esi-bianco: #FFFFFF; /* Rosso del brand. Ricorre su tutte le pagine: payoff della home, barra "Dati Tecnici", codici prodotto (RC.01, SH.01...), domande FAQ. */ --esi-rosso: #ED1C24; /* Grigio della "E" nell'animazione di costruzione del logo (pag. 1). */ --esi-grigio: #5B6367; /* Grigio dei riquadri segnaposto (es. box "Modulo" a pag. 14). */ --esi-grigio-chiaro: #B1B0B0; /* NOTA — pag. 1 usa per il pallino dell'intro un rosso diverso, #CE374D, più tenue del rosso brand. Compare solo lì. Da chiarire col cliente se è voluto o è un artefatto dell'export: PIANO-PROGETTO.md §12 punto 24. Finché non è confermato, l'intro usa il rosso brand. */ --esi-rosso-intro: var(--esi-rosso); /* Il blu #176FC0 presente nel PDF appartiene alle ANNOTAZIONI del grafico ("DEFINIRE GLI SPAZI", i riferimenti a ferrari.com, kask.com...). Non è un colore del brand e non deve finire nel sito. */ /* --- Ruoli semantici: usare questi nei componenti, non i colori grezzi --- */ --esi-fondo: var(--esi-bianco); --esi-fondo-scuro: var(--esi-nero); --esi-testo: var(--esi-nero); --esi-testo-su-scuro: var(--esi-bianco); --esi-accento: var(--esi-rosso); --esi-bordo: var(--esi-nero); --esi-bordo-tecnico: var(--esi-rosso); /* box "Dati Tecnici" */ /* ============================================================ TIPOGRAFIA ============================================================ Il PDF indica: Bahnschrift + Helvetica Oblique + D3Euronism. ⚠️ Nessuno dei tre è licenziabile per il web così com'è. Mattia sta procurando i file definitivi; fino ad allora restano i fallback qui sotto, scelti metricamente vicini. Quando arrivano: file in assets/fonts/, si scommenta il blocco @font-face in fondo, si mette il nome in testa allo stack. Nient'altro da toccare in tutto il tema. Vedi assets/fonts/LEGGIMI.md. ============================================================ */ --esi-font-base: "Bahnschrift", "DIN Alternate", "DIN Next", "Roboto Condensed", system-ui, -apple-system, "Segoe UI", sans-serif; /* Corsivo di sottotitoli e descrizioni — al posto di Helvetica Oblique. Va sempre accoppiato a font-style: italic. */ --esi-font-corsivo: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Logotipo e fregi — al posto di D3Euronism. */ --esi-font-display: "D3Euronism", "Bahnschrift", "DIN Alternate", system-ui, sans-serif; /* Scala modulare in rem: scala da sola con la radice fluida. Rapporto ~1,25 (terza maggiore) fino a --lg, poi più aperto sui display per reggere i titoli a tutta pagina del PDF. */ --esi-fs-xs: 0.75rem; --esi-fs-sm: 0.875rem; --esi-fs-base: 1rem; --esi-fs-md: 1.125rem; --esi-fs-lg: 1.5rem; /* I tre display hanno anche una componente in vw: sui titoloni della home il salto tra mobile e desktop è troppo ampio perché il solo rem basti. */ --esi-fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --esi-fs-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); --esi-fs-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); --esi-lh-stretto: 1.15; --esi-lh-base: 1.5; --esi-peso-normale: 400; --esi-peso-medio: 500; --esi-peso-grassetto: 700; /* ============================================================ SPAZIATURE — scala in rem, quindi fluida per costruzione ============================================================ */ --esi-sp-1: 0.25rem; --esi-sp-2: 0.5rem; --esi-sp-3: 0.75rem; --esi-sp-4: 1rem; --esi-sp-6: 1.5rem; --esi-sp-8: 2rem; --esi-sp-12: 3rem; --esi-sp-16: 4rem; --esi-sp-24: 6rem; /* Respiro verticale delle fasce: sul PDF sono generose, su mobile diventerebbero voragini. */ --esi-fascia-y: clamp(2.5rem, 1.5rem + 4vw, 6rem); /* Margine laterale del contenuto */ --esi-gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem); --esi-contenitore: 90rem; --esi-contenitore-testo: 56rem; /* ============================================================ RAPPORTI RILEVATI DAL PDF ============================================================ Questi sì che vengono dalla misurazione, ma espressi come proporzioni: restano validi a qualsiasi dimensione. misurato sul PDF rapporto conservato logo 92,0 × 39,3 pt 2,34 : 1 logo alto 39,3 su header alto 68 il logo occupa il 58% dell'header pannello menu 166,4 su pagina 842 19,75% della larghezza riga sotto header 1,9 su 68 ~2,8% dell'altezza header ⚠️ Sul PDF il logo NON è centrato: il suo asse cade 28,7 pt a sinistra della mezzeria. Sembra un'imprecisione del mockup, quindi qui lo centriamo. Da confermare: PIANO-PROGETTO.md §12 punto 25. ============================================================ */ /* Proporzione del logo: invariante, va rispettata sempre. */ --esi-logo-ratio: 2.34; /* Quota dell'header occupata dal logo (dal rapporto 39,3 / 68). */ --esi-logo-quota: 58%; /* Header: fluido tra mobile e desktop, non una misura fissa. */ --esi-header-h: clamp(3.5rem, 2.5rem + 3.5vw, 7rem); /* Pannello del menu: la percentuale del PDF con un tetto in rem, così su schermi molto larghi non diventa una parete e su mobile non straborda. */ --esi-menu-w: min(19.75%, 18rem); --esi-menu-w-mobile: min(85vw, 22rem); /* Spessori: qui il px è corretto: un bordo non deve scalare. */ --esi-bordo-spessore: 2px; --esi-header-riga: 3px; --esi-transizione: 200ms ease; --esi-z-header: 100; --esi-z-menu: 200; --esi-z-intro: 300; } /* ============================================================ @font-face — DA SCOMMENTARE quando arrivano i file licenziati ============================================================ @font-face { font-family: "Bahnschrift"; src: url("../fonts/bahnschrift.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "D3Euronism"; src: url("../fonts/d3euronism.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } */