/* ========================================================================== GERICO DESIGN SYSTEM — TOKEN Estratti dal sito gericoagency.com il 2026-09-01 (sorgenti + valori realmente serviti, letti con getComputedStyle a 1440x900). ⚠️ DUE TIPI DI VALORE, SEMPRE DISTINTI: [SITO] = misurato sul sito. Non si cambia senza cambiare il sito. [KIT] = scelta del design system dove il sito non ha una regola. Serve a produrre pagine coerenti fuori da WordPress. ========================================================================== */ :root { /* ── COLORE ───────────────────────────────────────────────────────────── Il giallo è un EVENTO, non una superficie: fascia-manifesto, secondo stato dei bottoni, colore che entra nei flip, tratto della transizione. Non è mai il fondo tranquillo di una pagina. */ --g-yellow: #FDC52E; /* [SITO] "giallo Gerico" — l'unico accento */ --g-yellow-shadow: #D39700; /* [SITO] ocra = l'OMBRA del giallo. Base del clip-text */ --g-black: #000000; /* [SITO] fondo della home */ --g-ink-deep: #0A0A0A; /* [SITO] transizione di pagina, stroke 2 */ --g-ink: #111111; /* [SITO] testo su giallo, fondo LP */ --g-ink-mask: #0F0F0F; /* [SITO] mask-transition-03 */ --g-panel: #1A1A1A; /* [SITO] work item, spotlight, bottone secondario */ --g-panel-soft: #1D1D1D; /* [SITO] footer */ --g-panel-svc: #1E1E1E; /* [SITO] fondo sezione servizi */ --g-field: #161616; /* [SITO] fondo dei campi form */ --g-line: #2A2A2A; /* [SITO] bordi sottili, separatori */ --g-paper: #EBEBEB; /* [SITO] ⚠️ il testo chiaro NON è bianco puro */ --g-paper-soft: #EEEEEE; /* [SITO] testi del footer */ --g-white: #FFFFFF; /* [SITO] solo dove serve il bianco pieno */ --g-muted: #9A9A9A; /* [SITO] label, note legali */ --g-placeholder: #6A6A6A; /* [SITO] placeholder dei campi */ --g-clip-grey: #363636; /* [SITO] base del clip-text sul titolone WORK */ --g-danger: #FF6F61; /* [SITO] messaggi di errore del form */ /* Palette servizi — il SECONDO brand. Quattro card a piena altezza che si impilano. Rima 1:1 col set di icone (arch/gear/arrow/ring): il sistema iconografico e quello cromatico sono la stessa cosa. */ --g-svc-lilac: #BD8EC0; /* [SITO] Strategia di marketing → icon-arch-lilac */ --g-svc-orange: #F26C45; /* [SITO] Creazione contenuti → icon-gear-orange */ --g-svc-green: #13B38D; /* [SITO] Campagne advertising → icon-arrow-green */ --g-svc-blue: #3C509F; /* [SITO] Soluzioni AI & ottimizz. → icon-ring-blue */ /* ── TIPOGRAFIA ───────────────────────────────────────────────────────── Tre font, tre ruoli rigidi, zero sovrapposizione: display → URLA · editorial → SUSSURRA · body → RACCONTA */ --g-font-display: "BaseNeue Gerico", "Arial Narrow", Impact, sans-serif; --g-font-editorial: "Silver Editorial Gerico", Georgia, "Times New Roman", serif; /* ⚠️ Il corpo è HELVETICA, non Suisse Intl (decisione di Ludovico, 01/09/2026). Il sito usa Suisse Intl, che è commerciale e senza licenza archiviata: il kit non la distribuisce. Helvetica è della stessa famiglia (neo-grottesca svizzera) ed è la sostituzione più vicina. Lo stack sotto fa prendere a ogni sistema il font più simile che possiede — Arial è metric-compatible con Helvetica, quindi il layout NON si sposta. Se un giorno si compra Suisse: vedi 05-FONT.md, si cambia solo qui e il blocco @font-face in gerico-kit.css. */ --g-font-body: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Segoe UI", Roboto, sans-serif; /* Scala — LA SCALA NON È UNA SCALA, È UN SALTO. Titolone 576px contro corpo 21px @1440 = rapporto 27:1. Nessun gradino intermedio: il testo o è architettura o è didascalia. ⚠️ Se il rapporto titolo/corpo scende sotto 10:1 non è più Gerico. [SITO] i valori a 1440 sono misurati. [KIT] i clamp() sono la scelta del kit: il sito usa vw puro, che fuori da WordPress esplode sui monitor larghi e collassa sui telefoni. Il valore centrale coincide col sito. */ --g-t-monument: clamp(6rem, 40vw, 36rem); /* [KIT] 576px @1440 — il titolone (WORK) */ --g-t-colossal: clamp(3.5rem, 15vw, 13.5rem); /* [KIT] 216px @1440 — sezione display */ --g-t-display: clamp(2.4rem, 6vw, 5.4rem); /* [KIT] 86px @1440 — hero, titoli servizi */ --g-t-statement: clamp(2.2rem, 5.6vw, 6rem); /* [KIT] 96px @1440 — frase di chiusura */ --g-t-card: clamp(1.5rem, 2.5vw, 2.25rem); /* [SITO] 36px @1440 — titolo card work */ --g-t-lead: clamp(1.5rem, 2.8vw, 2.7rem); /* [KIT] 40px @1440 — kicker editoriale hero */ --g-t-body: clamp(1rem, 1.5vw, 1.35rem); /* [KIT] 21.6px @1440 — corpo */ --g-t-small: clamp(0.85rem, 1.05vw, 1.1rem); /* [SITO] paragrafo stretto (rif. truus.co) */ --g-t-micro: 0.75rem; /* [SITO] 12px — note legali, label */ /* Interlinea: i titoli stanno SOTTO 1. Il display è architettura, non testo */ --g-lh-monument: 1; /* [SITO] */ --g-lh-display: 0.9; /* [SITO] hero: 86.4px su 77.76px */ --g-lh-tight: 1.1; /* [SITO] titolo card */ --g-lh-body: 1.5; /* [SITO] */ --g-lh-loose: 1.65; /* [SITO] paragrafo stretto */ /* Spaziatura fra lettere: il negativo STRINGE l'architettura, il positivo DISTANZIA il sussurro. [SITO] */ --g-ls-tight: -0.025rem; /* titolo card work */ --g-ls-normal: normal; --g-ls-wide: 0.02em; /* bottoni */ --g-ls-label: 0.06em; /* label, piede */ /* ── FORMA ────────────────────────────────────────────────────────────── Il sito ha 12 raggi diversi senza scala. [KIT] il design system ne fissa SEI, ognuno legato a un contesto — non a una dimensione. Regola: se ne introduci uno nuovo, dichiara la regola che lo governa. */ --g-r-button: 35px; /* [SITO] bottone principale (h ≈ 50px → quasi pill) */ --g-r-pill: 100px; /* [SITO] pill piccole: menu, cookie, contatti */ --g-r-box: 25px; /* [SITO] contenitori grandi (work item a schermo) */ --g-r-card: 15px; /* [SITO] media delle card, hero */ --g-r-field: 12px; /* [SITO] campi del form */ --g-r-thumb: 8px; /* [SITO] miniature nel menu */ --g-r-flat: 0; /* [SITO] fasce piene: non si arrotondano mai */ /* ── RITMO ────────────────────────────────────────────────────────────── [KIT] Il sito non ha una scala di spazi: ogni sezione ha la sua. Questi valori nascono dai margini ricorrenti (2vw/2rem/3rem/4rem). */ --g-space-1: 0.5rem; --g-space-2: 1rem; --g-space-3: 1.5rem; --g-space-4: 2rem; --g-space-5: 3rem; --g-space-6: 4rem; --g-space-section: clamp(5rem, 12vw, 12rem); /* fra una sezione e l'altra */ --g-pad-x: clamp(1.25rem, 5vw, 5rem); /* aria laterale della pagina */ --g-maxw: 1140px; /* [SITO] container Elementor */ --g-maxw-text: 560px; /* [SITO] colonna di lettura (rif. truus.co, Daniel 13/07) */ /* ── MOVIMENTO ────────────────────────────────────────────────────────── Ogni hover è una COREOGRAFIA A TRE TEMPI, non uno stato. */ --g-ease-pill: cubic-bezier(0.76, 0, 0.24, 1); /* [SITO] clip della pillola */ --g-ease-flip: cubic-bezier(0.645, 0.045, 0.355, 1);/* [SITO] flip 3D del testo */ --g-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* [SITO] uscite, slide */ --g-ease-in: cubic-bezier(0.22, 0.61, 0.36, 1); /* [SITO] entrate */ --g-dur-fast: 0.16s; /* [SITO] swap del cursore */ --g-dur-base: 0.25s; /* [SITO] hover semplici */ --g-dur-flip: 0.3s; /* [SITO] clip + flip */ --g-dur-slow: 0.45s; /* [SITO] pannelli, slide */ /* Coreografia dell'hover — millisecondi, non CSS: li applica il JS. [SITO] replicata identica su tre componenti diversi. */ --g-hover-enter-1: 0ms; --g-hover-enter-2: 250ms; --g-hover-enter-3: 400ms; --g-hover-leave-1: 0ms; --g-hover-leave-2: 200ms; --g-hover-leave-3: 350ms; } /* ── BREAKPOINT ─────────────────────────────────────────────────────────── ⚠️ Il sito ne ha TRE non allineati: Elementor (1024/767), style.css (1000 dominante, poi 1024/767/600), landing di prova (860/480). [KIT] il design system ne adotta DUE, quelli di Elementor — sono la fonte dei valori tipografici e la fascia su cui è stato fatto l'audit iPad dell'11/08. Non sono variabili CSS: le media query non leggono le custom properties. Sono una convenzione da rispettare a mano. telefono → max-width: 767px tablet → min-width: 768px and max-width: 1024px desktop → min-width: 1025px ───────────────────────────────────────────────────────────────────────── */