/* * Garanzie di affidabilità — aspetto * * Origine: .guarantees-* e .guarantee-card di source-clean/styles.css. * Ogni valore letto, compresi i due blocchi @media (max-width: 820px). * * Prefisso delle variabili: --falone-guar-*, abbreviato come nelle altre * sezioni (--falone-ongoing-*, --falone-people-*). * * TERZA occorrenza dei comandi del carosello: pulsanti, barra e griglia * arrivano da .falone-rail-controls / .falone-rail-btn / * .falone-rail-progress del tema. Qui si sovrascrivono SOLO le due cose che * in questa sezione sono diverse: i comandi sono centrati e staccati di * 42px invece di 18. Tutto il resto coincide riga per riga. * * Indice * 1. sezione * 2. intestazione * 3. pista scorrevole * 4. scheda * 5. scheda evidenziata * 6. comandi (dal componente condiviso) * 7. movimento ridotto */ /* ====================================================================== 1. SEZIONE ====================================================================== ⚠️ #f7f7f5 NON e' --wash (#f5f4f1): sono due bianchi sporchi diversi di due unita' per canale, e questo compare solo qui. Nel sorgente non c'e' una custom property che lo contenga, quindi resta un valore letterale e non punta a un Global del Kit: non esiste un Global con questo valore. Molto probabilmente e' una distrazione dell'originale — vedi la nota nel CLAUDE.md. */ .falone-guarantees { padding: 96px 0 108px; /* scavalcato dal controllo Margini interni */ background: var(--falone-guar-bg, #f7f7f5); color: var(--falone-guar-title-color, #121212); overflow: hidden; /* la pista sborda ai lati: qui si taglia */ border-top: 1px solid var(--falone-guar-line, #e7e7e7); border-bottom: 1px solid var(--falone-guar-line, #e7e7e7); } /* ====================================================================== 2. INTESTAZIONE ====================================================================== Centrata e con un titolo molto piu' piccolo delle altre sezioni: qui NON si usa --falone-h2, la scala e' propria di questa fascia. Nel sorgente il contenitore ha due vuoti con `display: none`, piu' un `grid-template-columns: 1fr` sotto gli 820px su un elemento che e' `display: block`. Tre residui di una versione precedente a tre colonne: non portati, non facevano niente. */ .falone-guarantees__head { /* ⚠️ Il modello scrive qui `width: min(100% - 104px, 1120px)` piu' `margin: 0 auto`, che centra l'intestazione e la fa partire da x=152,5. Su richiesta del 31/08 (tutti i titoli dallo stesso punto) parte invece da x=102 come le altre 30 intestazioni del sito. Per tornare al modello: rimettere `auto` nei margini laterali e togliere il margine interno. */ width: auto; max-width: none; margin: 0 0 var(--falone-guar-head-gap, 34px); padding-left: var(--falone-guar-head-x, 102px); padding-right: var(--falone-guar-head-x-right, 52px); } /* con l'intestazione a bandiera anche il testo va a bandiera, o il titolo resterebbe centrato DENTRO il suo riquadro e non partirebbe da 102 */ .falone-guarantees__head .falone-guarantees__h2, .falone-guarantees__head .falone-guarantees__eyebrow { text-align: var(--falone-guar-head-align, start); } .falone-guarantees__h2 { margin: 0; color: var(--falone-guar-title-color, #121212); font-family: var(--falone-font-display, "Jost", sans-serif); /* ⚠️ La formula sta QUI, non nelle impostazioni del widget: il controllo scrive un valore fisso solo se lo si compila, altrimenti vale il clamp del sorgente. Scriverne il massimo (2.1rem) al posto della formula darebbe un titolo giusto solo sopra i 1105px di finestra. */ /* ⚠️ 31/08: questo titolo aveva una scala PROPRIA — clamp(1.2rem, 1.9vw, 2.1rem), peso 500, MAIUSCOLO, centrato — che e' la forma che il modello da' a `.guarantees-heading h2`. Misurato accanto agli altri titoli della stessa pagina: 27,36px / 500 / maiuscolo contro 74,88px / 600 / minuscolo. Stesso carattere (Jost), ma a quel corpo e in maiuscolo si legge come un ALTRO font — ed e' quello che l'utente ha segnalato. Ora prende la scala comune `--falone-h2`, come ogni altro titolo di sezione. Per tornare alla forma del modello basta impostare --falone-guar-h2-size, -weight, -lh e rimettere il maiuscolo. */ font-size: var(--falone-guar-h2-size, var(--falone-h2, clamp(2.35rem, 5.2vw, 5rem))); font-weight: var(--falone-guar-h2-weight, 600); line-height: var(--falone-guar-h2-lh, var(--falone-h2-lh, 1.03)); text-align: start; text-transform: var(--falone-guar-h2-transform, none); } /* ====================================================================== 3. PISTA SCORREVOLE ====================================================================== Scorrimento NATIVO: overflow-x piu' scroll-snap. Senza JavaScript le diciotto schede restano tutte raggiungibili col trascinamento, con la rotella e con le frecce da tastiera. Il .js condiviso aggiunge soltanto i pulsanti e la barra. scroll-padding-inline pari al padding-inline: senza, lo scatto dello snap incollerebbe la scheda al bordo tagliato. */ .falone-guarantees__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax( var(--falone-guar-card-min, 230px), var(--falone-guar-card-vw, 22vw) ); gap: var(--falone-guar-gap, 10px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--falone-guar-rail-inset, 30px); padding-inline: var(--falone-guar-rail-inset, 30px); /* ⚠️ Il sorgente NON ha padding verticale, e questo taglia l'ombra delle schede: `overflow-x: auto` porta anche overflow-y ad `auto` (regola CSS: un asse `visible` accanto a un asse che non lo e' diventa `auto`), quindi il contenitore ritaglia sopra e sotto. L'ombra `0 18px 34px` cade tutta fuori e non si vede mai. Il valore di partenza resta 0 = quello del sorgente. Alzandolo l'ombra ricompare. Misura nel CLAUDE.md. */ padding-block: var(--falone-guar-rail-pad-y, 0px); box-sizing: border-box; /* la barra di scorrimento del sistema si nasconde: c'e' quella disegnata */ scrollbar-width: none; } .falone-guarantees__rail::-webkit-scrollbar { display: none; } /* la pista e' raggiungibile da tastiera (tabindex nel markup): il contorno di messa a fuoco va mostrato, o chi naviga cosi' si perde */ .falone-guarantees__rail:focus-visible { outline: 2px solid var(--falone-guar-accent, #f7941d); outline-offset: 4px; } /* ====================================================================== 4. SCHEDA ====================================================================== ⚠️ Selettore DISCENDENTE, non la sola classe. Le schede sono , ed Elementor pubblica `.elementor a { box-shadow: none; text-decoration: none }` con specificita' (0,1,1): batterebbe `.falone-guarantee` (0,1,0) e l'ombra sparirebbe del tutto — misurato `box-shadow: none` in pagina. E' la stessa trappola di `.elementor img { height: auto }` che aveva svuotato il collage delle Persone: qualunque regola su un elemento che Elementor azzera va scritta come discendente. */ .falone-guarantees__rail .falone-guarantee { min-height: var(--falone-guar-card-h, 104px); display: flex; align-items: center; justify-content: center; padding: var(--falone-guar-card-pad, 20px); scroll-snap-align: start; box-sizing: border-box; border: 1px solid var(--falone-guar-card-border, #f7941d); border-radius: 0; background: var(--falone-guar-card-bg, #fff); color: var(--falone-guar-card-text, #121212); /* ⚠️ Le targhette usavano il carattere dei TITOLI (Jost) in maiuscolo, unico caso sul sito: ogni altra etichetta maiuscola — occhielli, categorie delle schede, numeri — e' in Plus Jakarta Sans con peso 800 e una spaziatura. Misurato accanto a un titolo di cella: Jost 600 contro Plus Jakarta 700. Il corpo e la geometria della targhetta non cambiano: cambia il carattere, che e' quello che si notava. */ font-family: var(--falone-guar-card-font, var(--falone-font-body, "Plus Jakarta Sans", sans-serif)); font-size: var(--falone-guar-card-size, clamp(.9rem, 1vw, 1.05rem)); font-weight: var(--falone-guar-card-weight, 700); letter-spacing: var(--falone-guar-card-ls, .06em); line-height: 1.16; text-align: center; text-transform: uppercase; /* Il sorgente si appoggia al suo `a { text-decoration: none }` globale. Qui lo fa anche Elementor, ma dichiararlo rende la scheda indipendente dal reset di un plugin che potrebbe cambiare. */ text-decoration: none; box-shadow: 0 18px 34px rgba(18, 18, 18, .10); /* ripiego */ box-shadow: 0 var(--falone-guar-shadow-y, 18px) var(--falone-guar-shadow-blur, 34px) color-mix(in srgb, var(--falone-guar-shadow-color, #121212) calc(var(--falone-guar-shadow-op, .10) * 100%), transparent); transition: color var(--falone-dur-fast, .2s) var(--falone-ease, ease), transform var(--falone-dur-fast, .2s) var(--falone-ease, ease), box-shadow var(--falone-dur-fast, .2s) var(--falone-ease, ease); } /* Nel sorgente lo stato attivo cambia SOLO l'ombra e il sollevamento: il colore dichiarato in :hover (var(--black)) e' identico a quello a riposo, quindi non porta alcuna differenza. Non lo riscrivo. */ .falone-guarantees__rail .falone-guarantee:hover, .falone-guarantees__rail .falone-guarantee:focus-visible { outline: 0; transform: translateY(var(--falone-guar-lift, -2px)); box-shadow: 0 22px 40px rgba(18, 18, 18, .14); /* ripiego */ box-shadow: 0 var(--falone-guar-shadow-y-hover, 22px) var(--falone-guar-shadow-blur-hover, 40px) color-mix(in srgb, var(--falone-guar-shadow-color, #121212) calc(var(--falone-guar-shadow-op-hover, .14) * 100%), transparent); } /* chi arriva da tastiera deve vedere dove si trova: il sorgente azzera l'outline e si affida al solo sollevamento di 2px, che con l'ombra ritagliata (vedi sopra) non si distingue. Aggiunta nostra, minima. */ .falone-guarantees__rail .falone-guarantee:focus-visible { outline: 2px solid var(--falone-guar-accent, #f7941d); outline-offset: 3px; } /* ====================================================================== 5. SCHEDA EVIDENZIATA ====================================================================== ⚠️ Nel sorgente .guarantee-card.is-accent dichiara `border-color: var(--accent)` e `background: #fff`, cioe' ESATTAMENTE i valori che la scheda normale ha gia'. La classe alterna su nove schede su diciotto e non produce NESSUNA differenza visibile: e' inerte. Il markup la conserva perche' l'intenzione c'era. Qui i tre valori ereditano dalla scheda normale, quindi di partenza il risultato e' identico al sorgente; compilando i controlli la distinzione diventa reale senza toccare il codice. */ .falone-guarantees__rail .falone-guarantee--accent { border-color: var(--falone-guar-accent-border, var(--falone-guar-card-border, #f7941d)); background: var(--falone-guar-accent-bg, var(--falone-guar-card-bg, #fff)); color: var(--falone-guar-accent-text, var(--falone-guar-card-text, #121212)); } /* ====================================================================== 6. COMANDI ====================================================================== Dal componente condiviso del tema. Coincidono col sorgente in tutto — 44px, barra da 160px minimi, stacco 18px, 560px di larghezza massima, traccia all'34% dell'accento, 18% di riempimento iniziale, e 40/120/12 sotto gli 820px — tranne per due cose, che si sovrascrivono qui: sono CENTRATI e staccati di 42px invece di 18. */ .falone-guarantees .falone-rail-controls { --falone-rail-accent: var(--falone-guar-accent, #f7941d); width: min( 100% - var(--falone-guar-controls-inset, 64px), var(--falone-rail-controls-w, 560px) ); margin: var(--falone-guar-controls-gap, 42px) auto 0; } @media (max-width: 820px) { /* ⚠️ Sotto gli 820px il sorgente TOGLIE il tetto di 560px: i comandi prendono tutta la larghezza meno il rientro. Non e' la stessa cosa che cambiare il rientro dentro la min(): a 820px darebbe 560px, mentre l'originale ne da' 784. */ .falone-guarantees .falone-rail-controls { width: calc(100% - var(--falone-guar-controls-inset, 36px)); } } /* ====================================================================== 7. MOVIMENTO RIDOTTO ====================================================================== Lo scorrimento resta possibile, senza animazione: se ne occupa anche il .js condiviso, che passa a un salto secco invece di 'smooth'. Pulsanti e barra sono gia' gestiti dal componente del tema. */ @media (prefers-reduced-motion: reduce) { .falone-guarantees__rail { scroll-behavior: auto; } .falone-guarantees__rail .falone-guarantee { transition: none; } .falone-guarantees__rail .falone-guarantee:hover, .falone-guarantees__rail .falone-guarantee:focus-visible { transform: none; } } /* ====================================================================== 9. OCCHIELLO ====================================================================== Non c'e' nella home — il sorgente apre la fascia col solo titolo — ma le pagine interne avevano «AFFIDABILITÀ» sopra, e portando qui il carosello quell'informazione sarebbe andata persa. Vuoto non stampa nulla, quindi la home resta identica a prima. */ .falone-guarantees__eyebrow { /* Il titolo di questa fascia e' centrato: un occhiello a bandiera a sinistra lo lascerebbe spaiato. */ text-align: center; margin-bottom: var(--falone-guar-eyebrow-gap, 14px); color: var(--falone-guar-eyebrow-color, var(--falone-accent, #f7941d)); } /* ====================================================================== 10. IL TITOLO COME QUELLO DELLE ALTRE SEZIONI ====================================================================== Richiesta dell'utente (19/08). Il sorgente dava a questa fascia una scala tutta sua — maiuscolo, peso 500, centrato — che accanto agli altri titoli di sezione si legge come una svista. Misurato a 1440 prima dell'intervento: Garanzie 56,02px · peso 500 · MAIUSCOLO · centrato · x=160 gli altri 56,02px · peso 600 · normale · a bandiera · x=102 Il corpo era gia' allineato: cambiano peso, maiuscolo e posizione. ⚠️ L'intestazione era centrata da `width: min(100% - 104px, 1120px)` piu' `margin: 0 auto`. Non basta togliere il maiuscolo: finche' resta quella larghezza il titolo parte da x=160 e resta l'unico fuori squadra della pagina. La pista sotto NON si tocca: sborda ai lati per costruzione. */ /* ⚠️ RIENTRATO il 31/08 su richiesta: qui c'era la riscrittura del 18/08 che portava l'intestazione delle Garanzie a x=102, peso 600, minuscolo e a bandiera, per allinearla alle altre sezioni. Il modello la vuole diversa dalle altre: `.guarantees-heading` e' CENTRATA (`width: min(100% - 104px, 1120px)` piu' `margin: 0 auto`) e `.guarantees-heading h2` e' clamp(1.2rem, 1.9vw, 2.1rem), peso 500, interlinea 1.1, MAIUSCOLA. Valgono ora le regole delle righe 54-70, che sono quelle del modello. */ @media (max-width: 820px) { .falone-guarantees__head { /* ⚠️ 31/08: qui c'era il margine interno del riscritto del 18/08, che sommato al `margin: 0 auto` portava il titolo a x=36. Il modello a 820 dice `width: calc(100% - 36px)` e nessun margine interno: x=18. */ /* ⚠️ 31/08, secondo giro: qui c'era 0 e il titolo partiva da x=0, fuori squadra rispetto a tutti gli altri. La linea comune a 820 e' 42 (18 di fascia + 24 di rientro), a 480 e' 36. */ width: auto; padding-left: var(--falone-guar-head-x-tablet, 42px); padding-right: var(--falone-guar-head-x-right-tablet, 18px); } } /* ⚠️ Sotto i 480 la linea comune del sito e' 36px (18 di fascia + 18 di rientro): senza questo blocco l'intestazione restava a 42 come a 820. */ @media (max-width: 480px) { .falone-guarantees__head { padding-left: var(--falone-guar-head-x-mobile, 36px); padding-right: var(--falone-guar-head-x-right-mobile, 18px); } }