/* * Design token Falone * * Origine: le custom property :root di source-clean/styles.css, piu' le * durate e gli easing letti dalle transizioni delle singole sezioni. * Ogni valore qui dentro e' stato LETTO dal sorgente, nessuno e' stimato. * * Indice * 1. colori * 2. tipografia * 3. misure di impaginazione * 4. movimento * 5. livelli * * ⚠️ SCOPE: i token stanno su `body`, non su `:root`. * Elementor definisce i suoi Global Colors su `.elementor-kit-N`, che e' una * classe del . Una custom property dichiarata su :root NON vede quelle * definite su un discendente: scrivendo qui * :root { --falone-accent: var(--e-global-color-accent, #f7941d) } * la variabile risulta indefinita e vince sempre il ripiego, quindi il sito * ignora la palette senza dare alcun errore. Su `body` i due insiemi stanno * sullo stesso elemento e la risoluzione funziona. * Misurato in pagina, non supposto. */ body { /* --- 1. colori ------------------------------------------------------ I nove colori del sorgente. Le fasce scure originali usavano #111111: normalizzato su --falone-black per decisione dell'utente (03/08). */ /* ⚠️ I token PUNTANO ai Global Colors del Kit, non li duplicano: cambiando la palette dal pannello cambia tutto il sito, componenti condivisi compresi. Il valore letterale resta come ripiego, ed e' quello del sorgente: se il Kit non fosse caricato il sito e' comunque corretto. Duplicarli sarebbe l'errore classico: la palette cambia e i pulsanti, gli occhielli e i titoli restano del colore vecchio. */ --falone-black: var(--e-global-color-primary, #121212); --falone-ink: var(--e-global-color-secondary, #262626); --falone-soft-ink: var(--e-global-color-text, #666666); --falone-muted: var(--e-global-color-fal_muted, #9a9a9a); --falone-line: var(--e-global-color-fal_line, #e7e7e7); --falone-paper: var(--e-global-color-fal_paper, #ffffff); --falone-wash: var(--e-global-color-fal_wash, #f5f4f1); --falone-accent: var(--e-global-color-accent, #f7941d); --falone-accent-strong: var(--e-global-color-fal_strong, #ee2a24); /* grigio dell'occhiello sulle fasce scure: .eyebrow.muted del sorgente, un valore a se' che non coincide con --falone-muted */ /* ⚠️ Occhiello «attenuato»: dal 18/08 vale l'ACCENTO, per decisione dell'utente — gli occhielli di sezione sono arancioni ovunque, su fondo chiaro e su fondo scuro. Il grigio del sorgente era #b7b7b7: per riportarlo su una sezione basta reimpostare qui, o su quella sezione, questa variabile. */ /* ⚠️ RIENTRATO il 31/08 su richiesta: dal 18/08 valeva l'ACCENTO, per decisione dell'utente. Il modello dice #b7b7b7 (`.eyebrow.muted`) e il modello e' la verita'. Resta il difetto di contrasto del modello: #b7b7b7 su --wash da' 1,82:1 contro i 4,5:1 dello standard. */ --falone-eyebrow-muted: #b7b7b7; /* Veli ricorrenti sulle fotografie. Restano valori letterali: un gradiente composito non si deriva da un solo colore, e color-mix() dentro un token non avrebbe un ripiego. Se la palette cambia molto, questi due vanno rivisti a mano. */ --falone-veil-card: linear-gradient(180deg, rgba(18,18,18,.08), rgba(18,18,18,.92)); --falone-veil-hero: linear-gradient(90deg, rgba(18,18,18,.91), rgba(18,18,18,.61) 46%, rgba(18,18,18,.16)), linear-gradient(180deg, rgba(18,18,18,.1), rgba(18,18,18,.7)); /* --- 2. tipografia --------------------------------------------------- */ --falone-font-body: "Plus Jakarta Sans", system-ui, sans-serif; --falone-font-display: "Jost", "Plus Jakarta Sans", system-ui, sans-serif; /* scala dei titoli: il sorgente usa clamp(), che i controlli Elementor non sanno esprimere. Vive qui e NON va duplicata nei widget. */ --falone-h1: clamp(4.2rem, 10.2vw, 8.6rem); --falone-h1-lh: .86; --falone-h2: clamp(2.35rem, 5.2vw, 5rem); --falone-h2-lh: 1.03; /* Scala dei titoli delle sezioni nelle PAGINE INTERNE. ⚠️ DAL 06/08 E' LA STESSA DELLA HOME, per decisione dell'utente: «i titoli delle sezioni delle pagine devono avere la stessa dimensione che hanno in homepage su tutte le pagine». Prima valeva clamp(1.95rem, 3.3vw, 3rem) con interlinea 1,2, cioe' 46,2px a 1400 contro i 72,8 della home. ⚠️ Il token NON viene appiattito su un valore copiato: PUNTA a --falone-h2. Cosi' resta una sola scala da cambiare, e si eredita da sola anche la riduzione che --falone-h2 ha sotto i 480px. Il token sopravvive perche' i nove modelli che lo usano possano tornare a divergere senza riscriverli. */ --falone-h2-page: var(--falone-h2, clamp(2.35rem, 5.2vw, 5rem)); --falone-h2-page-lh: var(--falone-h2-lh, 1.03); /* ⚠️ SCARTO DAL SORGENTE, chiesto dall'utente il 05/08: +2px su tutti gli occhielli del sito. Il sorgente dice `.68rem`, cioe' 10,88px misurati. Scritto come `calc()` e non come 12,88px fisso: cosi' l'occhiello resta legato al corpo di base e ne segue le variazioni, come faceva prima. Un solo valore per tutte e sette le pagine: 34 occorrenze in tutto. ⚠️ Il ripiego in components.css NON bastava: questo token e' dichiarato su `body`, quindi il var() si risolve sempre e il ripiego non entra mai in gioco. La modifica va fatta QUI. */ --falone-eyebrow-size: .68rem; /* modello: .68rem = 10,88px */ --falone-eyebrow-ls: .32em; /* --- 3. misure di impaginazione --------------------------------------- */ --falone-header-height: 70px; /* ⚠️ SCARTO DAL SORGENTE, deciso dall'utente il 04/08. Nel sorgente --text-left-offset vale 50px (24 sotto gli 820, 18 sotto i 480) e fa rientrare titoli e testo rispetto al bordo della sezione. Ma il logo dell'header sta sul bordo, a 52px: i titoli risultavano 50px piu' a destra del logo. Misurato: logo a x=52, titoli a x=102. A zero i titoli si allineano al logo, perche' il margine interno delle sezioni (52px) coincide con quello dell'header. Vale a ogni soglia: a 820 entrambi valgono 18. */ --falone-indent: 50px; /* --text-left-offset del sorgente: 50px */ --falone-section-pad-y: 112px; --falone-section-pad-x: 52px; /* --- 4. movimento ------------------------------------------------------ Durate lette dalle transizioni del sorgente, non scelte. */ --falone-ease: ease; --falone-dur-fast: .2s; /* pulsanti */ --falone-dur-header: .25s; /* header e scambio dei loghi */ --falone-dur-media: .65s; /* ingrandimento delle foto in hover */ --falone-dur-reveal: .7s; /* entrate in viewport */ --falone-reveal-shift: 28px; /* .reveal { transform: translateY(28px) } */ --falone-reveal-stagger: 90ms; /* cascata: non e' nel sorgente, vedi nota */ /* --- 5. livelli --------------------------------------------------------- */ --falone-z-header: 50; } /* Il sorgente riduce header e rientro sotto gli 820px */ @media (max-width: 820px) { body { --falone-header-height: 74px; --falone-indent: 24px; /* sorgente: 24px */ --falone-section-pad-y: 78px; --falone-section-pad-x: 18px; } } @media (max-width: 480px) { body { --falone-indent: 18px; /* sorgente: 18px */ --falone-h2: clamp(2.2rem, 12vw, 3.6rem); } } /* * NOTA su --falone-reveal-stagger * Nel sorgente la cascata non esiste: l'IntersectionObserver aggiunge * .is-visible a ogni elemento quando entra, senza ritardi progressivi. * I 90ms sono un'aggiunta nostra per gli elenchi di schede, dove far * entrare tutto insieme appiattisce l'effetto. E' l'unico valore di questo * file che NON viene dall'originale: se si vuole fedelta' assoluta, * portarlo a 0. */