/* ===================================================================== GB-CORE.CSS · Sistema di stile unico del sito GBsoftware Token colore/tipografia (:root), tipografia FONDAZIONE (.gb-tipografia) e CLASSICO, sistema pulsanti .gb-pulsante, componenti comuni (eroe, .gb-occhiello, statistiche, etichette-target). Caricato UNA volta via child theme. Le sezioni non ridefiniscono la palette: usano questi token. ===================================================================== */ /* ===================================================================== ROBOTO AUTO-OSPITATO · versione VARIABILE (asse wght 100 -> 900) Due file coprono TUTTI i pesi (300/400/500/600/700/800/900) e i corsivi: 84 KB in totale, dallo stesso dominio del sito. Prima arrivava da fonts.googleapis.com: richiesta esterna bloccante prima del primo disegno, e l'indirizzo IP di ogni visitatore che usciva verso Google. font-display:optional -> il browser da' a Roboto ~100 ms: se arriva in tempo lo usa SUBITO, altrimenti tiene il fallback PER TUTTA LA VISITA e non scambia mai. Prima era `swap`, che scambiava sempre: il salto non c'era (le metriche del fallback qui sotto lo evitano) ma il CAMBIO DI CARATTERE si vedeva a ogni caricamento, ed era brutto. Con `optional` non si vede piu'. IL PREZZO: su una prima visita con rete lenta quel visitatore resta in Arial per tutta la pagina. Dalla seconda visita il font e' in cache e non succede. ⚠ QUESTO RENDE IL PRELOAD ESSENZIALE, non piu' solo un'ottimizzazione: e' lui che fa arrivare il font dentro i 100 ms. Se togli il preload da functions.php, meta' dei visitatori non vedra' mai Roboto. I due pezzi vanno insieme. ATTENZIONE: i percorsi sono relativi a QUESTO file (assets/), non alla pagina. ===================================================================== */ @font-face{ font-family:"Roboto"; font-style:normal; font-weight:100 900; font-display:optional; src:url("font/roboto-var-latin.woff2") format("woff2"); } @font-face{ font-family:"Roboto"; font-style:italic; font-weight:100 900; font-display:optional; src:url("font/roboto-var-latin-italic.woff2") format("woff2"); } /* --- FALLBACK CON LE METRICHE DI ROBOTO (serve a non far ballare la pagina) --- Il testo compare subito col font di sistema. Se i due hanno larghezze e altezze diverse le righe si ricompongono — al momento dello scambio con `swap`, o per sempre con `optional` quando il font non arriva in tempo: in entrambi i casi e' il salto che Core Web Vitals misura come CLS. ⚠ QUESTO BLOCCO SERVE ANCHE CON `optional`, anzi di piu': li' il fallback puo' restare in pagina per tutta la visita, quindi deve occupare lo spazio giusto dal primo disegno. Non toglierlo pensando che senza scambio non serva. Qui prendiamo Arial (presente su Windows e Mac; su Linux il suo clone metrico Liberation Sans) e lo RIDIMENSIONIAMO alle metriche di Roboto, cosi' prima e dopo lo scambio il testo occupa lo stesso spazio. I valori sono MISURATI sui due file reali (tabelle cmap/hmtx/hhea), pesando le larghezze dei glifi sulla frequenza dei caratteri nel testo vero delle sezioni (campione: ~97.000 caratteri). NON sono copiati da un articolo, e NON valgono per un altro font: se un giorno Roboto cambia, vanno rimisurati. Browser senza size-adjust (Safari < 17): ignorano il blocco e usano Arial normale, cioe' esattamente il comportamento di prima. Nessun rischio. */ @font-face{ font-family:"Roboto Fallback"; src:local("Arial"), local("Liberation Sans"); size-adjust:99.68%; ascent-override:93.07%; descent-override:24.49%; line-gap-override:0%; } /* =========================================================================== TIPOGRAFIA GBsoftware — RIFERIMENTO INTEGRATO Due approcci, una sola infrastruttura: A) FONDAZIONE (nuovo sito) -> scope .gb-tipografia · elementi semantici · scala fluida titoli BLACK non corsivi · var(--gb-titolo) B) CLASSICO (sito live) -> classi-ruolo italiane · valori reali del sito titoli spesso corsivi/leggeri · var(--gb-blu) / #333 I due look restano DISTINTI (servono a cose diverse). E' condiviso: - un solo caricamento Roboto (unione pesi) - un solo set di token colore (:root) dalla CODIFICA ufficiale - un solo sistema pulsanti .gb-pulsante In fondo: TABELLA-PONTE ruolo live (classico) -> ruolo nuovo (fondazione). =========================================================================== */ /* ------------------------------------------------------------------ KNOB Token condivisi dai due sistemi. Si tocca solo questo blocco. ------------------------------------------------------------------ */ :root{ /* --- COLORI (CODIFICA ufficiale) --- */ --gb-testo: var(--gb-grigio-80); /* testo corrente = COLORE DEL LOGO */ --gb-titolo: #193E5D; /* titoli fondazione (blu scuro) */ --gb-blu: #2B689E; /* blu logo / link / titoli classico */ --gb-arancio: #F07E00; /* accento principale: FONDI, bordi, icone piene */ --gb-arancio-scuro: #D87100; /* arancio hover (scala) */ /* ARANCIO COME TESTO — scelta di marca: si usa #F07E00 anche come inchiostro. NOTA di accessibilita': su fondo chiaro fa 2,73:1, sotto il minimo di 4,5:1. La scelta e' voluta e confermata. Se un giorno servisse la variante leggibile, basta rimettere #A85600 qui sotto: tutta la libreria la eredita da questi due token, nessun file di sezione va toccato. */ --gb-arancio-inchiostro: var(--gb-arancio); /* usato dove il fondo e' chiaro PER COSTRUZIONE (es. la pillola dell'occhiello) */ --gb-arancio-testo: var(--gb-arancio-inchiostro); /* inchiostro che SEGUE il contesto: .gb-su-scuro lo riporta al colore di marca */ --gb-blu-pulsante: #1A3E5F; /* base pulsante blu */ --gb-blu-pulsante-sc: #112A3F; /* pulsante blu hover (scala) */ --gb-blu-grigio: #44546A; /* blu/grigio etichette */ --gb-grigio: var(--gb-grigio-70); /* testo secondario (era #5E6B79, blu-grigio) */ --gb-grigio-lead: var(--gb-grigio-70); /* era #55606B: a 1,4 punti da --gb-grigio, stesso gradino */ --gb-academy: #B23851; /* bordeaux Academy */ --gb-verde: #007A00; /* check e prezzi (era #009900: 3,78:1 su bianco) */ --gb-rosso: #CC0000; /* alert */ --gb-sfondo: #FFFFFF; /* pagina */ --gb-blu-tenue: #EAF0F5; /* pannelli blu (citazioni/pillole) */ /* --- SCALA DEI GRIGI ------------------------------------------------------ NEUTRI PURI (R=G=B), e non e' un dettaglio: il grigio di marca e' neutro perche' lo e' il LOGO (#424143, che chiude la scala come gradino 80). Prima i grigi erano tirati all'azzurro, copiando --gb-titolo: ma quello e' il colore dei titoli, non la famiglia dei grigi. ⚠ --gb-blu-tenue NON fa parte di questa scala ed e' rimasto sopra apposta: e' un AZZURRO, serve dove il pannello deve leggersi come "blu chiaro" (citazioni, piste dei cursori, schermate finte). Non e' un grigio e non va sostituito con uno. PERCHE' UNA SCALA E NON DEI COLORI SPARSI. Prima di questa c'erano 70 grigi distinti in uso, 41 dei quali inventati da 45 sezioni diverse perche' fra il bordo chiaro e il testo secondario il sistema non offriva NIENTE: 27 valori si accalcavano in cinque punti di luminosita', tutti indistinguibili fra loro. Il buco vero era in mezzo, ed e' il motivo per cui esistono i gradini 40 e 70. DOVE SI PUO' SCRIVERE: dal 60 in giu'. Il 50 (#999999) sta a 2,85:1 su bianco e NON passa nemmeno per il testo grande — e' per icone e segni. Il 60 e' il piu' chiaro che regge il testo normale (4,54:1). */ --gb-grigio-05: #F5F5F5; /* fondi tenui */ --gb-grigio-10: #ECECEC; /* linee e divisori */ --gb-grigio-20: #E0E0E0; /* bordi */ --gb-grigio-25: #D9D9D9; /* bordi marcati */ --gb-grigio-30: #CCCCCC; /* riempimenti spenti */ --gb-grigio-40: #B3B3B3; /* disattivato */ --gb-grigio-50: #999999; /* icone e segni — NON testo */ --gb-grigio-60: #767676; /* testo minimo AA (4,54:1) */ --gb-grigio-70: #5C5C5C; /* testo secondario (6,69:1) */ --gb-grigio-80: #424143; /* testo e LOGO (10,15:1) */ /* I nomi storici restano e puntano alla scala: cosi' le sezioni gia' scritte non si toccano, e chi legge vede subito su che gradino sta. */ --gb-tenue: var(--gb-grigio-05); /* pannelli neutri */ --gb-linea: var(--gb-grigio-10); /* righe / divisori */ /* --- COLORI-MODULO usati nei ruoli (codifica moduli) --- */ /* --- COLORI-FIRMA DEI MODULI --------------------------------------------- Un colore per applicazione. NON sono nuovi: sono gli stessi che il sito usa da anni, oggi scritti a mano dentro gb-legacy.css (i .title-* e le .cta-*), alcuni fino a SETTE volte. Qui prendono un nome, cosi' il colore di un prodotto si cambia in un punto e lo seguono sia le pagine vecchie sia le classi .parola-* qui sotto. ⚠ gb-legacy.css li ha ancora scritti in chiaro: finche' non si rilega anche quello, le due copie vanno tenute d'accordo a mano. */ --gb-mod-revisione: #FFAD00; /* icona etichette-target · title-revisione */ --gb-mod-contabilita: #599842; /* statistica --verde · title-contabilita */ --gb-mod-bilancio: #F58220; /* title-bilancio */ --gb-mod-dichiarazioni: #4BB4E6; /* title-fiscali */ --gb-mod-antiriciclaggio: #E964A1; /* title-antiric */ --gb-mod-paghe: #E7324A; /* title-paghe · cta-pag */ --gb-mod-fatturazione: #449D44; /* title-fatturazione */ --gb-mod-controllo-gestione: #FF5B5B; /* title-cdg · cta-cdg */ --gb-mod-gestione-societa: #008b80; /* cta-gs */ --gb-mod-vigilanza: #FFCF00; /* title-vigilanza */ --gb-mod-ets: #F79B4D; /* title-ets */ --gb-mod-academy: #B23851; /* Academy */ /* aggiunti il 16/09/2026 col ventaglio gb-prod-* (v. blocco VARIANTI DI COLORE in fondo al file): la tabella dei prodotti ne conta 17, qui ce n'erano 13. */ --gb-mod-marketing: #2FAC66; /* Marketing */ --gb-mod-privacy: #82368C; /* Privacy */ --gb-mod-crisi: #c48f65; /* Crisi d'Impresa */ --gb-mod-qualita: #cab636; /* Gestione Qualita' */ /* Integrato non ha un colore suo: e' il blu del marchio. L'alias serve solo perche' anche lui abbia un nome da prodotto come gli altri. */ --gb-mod-integrato: var(--gb-blu); /* #2B689E */ /* --- LEGACY del sito LIVE (solo per i ruoli "classico") --- Equivalente nel nuovo sistema indicato a fianco. Tenuti per fedelta' alla ricostruzione: NON usarli nelle pagine nuove. */ --gb-legacy-claim: #333333; /* titolo-claim live -> nuovo: var(--gb-testo) */ --gb-legacy-evidenza: #666666; /* paragrafo-evidenza -> nuovo: var(--gb-grigio) */ --gb-legacy-hr: #AFADAC; /* hr-landing al centro */ /* --- FAMIGLIA (stack reale del tema Divi) --- "Roboto Fallback" e' il secondo posto apposta: e' Arial ridimensionato alle metriche di Roboto (vedi @font-face in cima), e regge la pagina senza salti nell'istante fra il primo disegno e l'arrivo del font vero. */ --gb-font: "Roboto", "Roboto Fallback", Helvetica, Arial, Lucida, sans-serif; /* --- SCALA FONDAZIONE (fluida: min -> max) --- */ --gb-h1: clamp(2.40rem, 1.75rem + 2.9vw, 3.90rem); --gb-h2: clamp(1.90rem, 1.55rem + 1.6vw, 2.70rem); --gb-h3: clamp(1.45rem, 1.30rem + 0.7vw, 1.90rem); --gb-h4: clamp(1.20rem, 1.13rem + 0.3vw, 1.40rem); --gb-h5: 1.075rem; --gb-h6: 0.875rem; /* coincide con --gb-piccolo: ruoli diversi (titolo vs testo), stesso valore */ --gb-guida: clamp(1.15rem, 1.05rem + 0.5vw, 1.40rem); --gb-corpo: 1.0625rem; /* 17px */ --gb-piccolo: 0.875rem; --gb-micro: 0.78rem; --gb-ui: 1rem; /* etichette dei controlli (pulsanti) */ /* corpo che SCALA col viewport: --gb-corpo e' fisso, questo no. Serve dove il testo deve rimpicciolirsi su mobile (card, tabelle, didascalie fitte). */ --gb-corpo-fluido: clamp(15px, 1.9vw, 18px); /* PARAGRAFO GRANDE: il gradino sopra --gb-guida, per i testi discorsivi che devono avere peso (aperture di pagina, manifesti, blocchi di testo lungo). 26px da ~1080px in su, 23px su tablet, 19px su telefono. Non e' un titolo: per quelli c'e' --gb-titolo-sezione. Classe: .gb-testo-grande */ --gb-corpo-grande: clamp(18px, 0.95rem + 1vw, 26px); /* NB per il paragrafo grande DENTRO UNA COLONNA non esiste un token suo: si riusa --gb-guida (18,4 -> 22,4px), che e' gia' quella misura. Classe: .gb-testo-grande--colonna. Vedi la nota accanto alla classe. */ /* parolone da hero (il titolo di sezione normale e' --gb-titolo-sezione) */ --gb-display: clamp(58px, 12vw, 200px); /* --- INTERLINEA --- */ --gb-il-eroe: 1.04; /* titoloni da hero (38px+): a --gb-il-stretta le righe ballano */ --gb-il-stretta: 1.12; --gb-il-media: 1.30; --gb-il-corpo: 1.72; /* --- SPAZIATURA --- */ --gb-sp-1: 0.5rem; --gb-sp-2: 1rem; --gb-sp-3: 1.6rem; --gb-sp-4: 2.6rem; --gb-sp-5: 4rem; /* --- SEZIONI EROE (17/09/2026) --- hero-minimal-2colonne, sottoprodotti, hero-prodotto-video-esagoni, hero-moduli-barra. Si cambiano QUI e valgono su tutte le pagine, senza toccarle. --gb-eroe-spazio: spazio sopra e sotto il contenuto (40px da 1440px in su, 24px sul telefono). --gb-eroe-bordo-sopra / -sotto: posto in piu' da quel lato, solo se la sezione Divi ha il bordo obliquo li'. Devono essere uguali all'altezza del bordo in Divi: oggi 100px sopra; sotto 80px, che Divi riduce a 75 sul tablet e 40 sul telefono (vedi le due @media subito dopo questo blocco). */ --gb-eroe-spazio: clamp(24px, 2.8vw, 40px); --gb-eroe-bordo-sopra: 100px; --gb-eroe-bordo-sotto: 80px; /* --- MISURE --- */ --gb-misura: 68ch; --gb-colonna: 940px; --gb-raggio: 8px; } /* Bordo obliquo di Divi in fondo alle sezioni eroe: stesse altezze che usa Divi su tablet e telefono. */ @media only screen and (max-width:980px){ :root{ --gb-eroe-bordo-sotto: 75px; } } @media only screen and (max-width:767px){ :root{ --gb-eroe-bordo-sotto: 40px; } } /* GANCIO CONTESTO SCURO — si mette sull'elemento che HA il fondo scuro (la
, oppure la singola card scura). Dentro, l'arancio-inchiostro torna quello di marca, che sul navy e' leggibile e sullo scuro "accende". */ .gb-su-scuro{ --gb-arancio-testo: var(--gb-arancio); --gb-titolo-col: #fff; --gb-sommario-col: rgba(255,255,255,.82); --gb-etichetta-col: rgba(255,255,255,.72); } /* ------------------------------------------------------------------ BASE ⚠ QUESTO BLOCCO E' GLOBALE, ED E' VOLUTO. Non riguarda solo le sezioni della libreria: vale per ogni pagina del sito. Ci si appoggiano il menu (menu.css dichiara font-family:inherit) e i template del child (magazine, focus, ricerca), che non hanno tipografia propria. Conseguenza pratica: cambiare --gb-font, --gb-corpo, --gb-il-corpo o --gb-testo muove TUTTO il sito, non le sole sezioni. Se un giorno lo si vuole circoscrivere, la prova e' semplice: commenta le quattro righe tipografiche di body qui sotto e apri una pagina magazine. Se non cambia nulla, Divi sta gia' applicando gli stessi valori e si possono spostare su .gb-sezione / .gb-tipografia senza conseguenze. ------------------------------------------------------------------ */ *{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--gb-sfondo); color: var(--gb-testo); font-family: var(--gb-font); font-size: var(--gb-corpo); font-weight: 400; line-height: var(--gb-il-corpo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* =========================================================================== A) FONDAZIONE — nuovo sito · scope .gb-tipografia · elementi semantici Lo scope serve perche' qui si stilano ELEMENTI NUDI (h1, p, ul, blockquote): senza un contenitore che li circoscriva colpirebbero tutta la pagina. .gb-occhiello-piano = occhiello in linea (senza pillola). La pillola e' .gb-occhiello. =========================================================================== */ .gb-tipografia :is(h1,h2,h3,h4,h5,h6){ color: var(--gb-titolo); margin: 0 0 var(--gb-sp-2); font-weight: 700; line-height: var(--gb-il-media); text-wrap: balance; } .gb-tipografia h1{ font-size: var(--gb-h1); font-weight: 900; line-height: var(--gb-il-stretta); letter-spacing: -0.015em; } .gb-tipografia h2{ font-size: var(--gb-h2); font-weight: 900; line-height: var(--gb-il-stretta); letter-spacing: -0.01em; } .gb-tipografia h3{ font-size: var(--gb-h3); } .gb-tipografia h4{ font-size: var(--gb-h4); } .gb-tipografia h5{ font-size: var(--gb-h5); } .gb-tipografia h6{ font-size: var(--gb-h6); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gb-blu-grigio); } .gb-tipografia * + h2{ margin-top: var(--gb-sp-5); } .gb-tipografia * + h3{ margin-top: var(--gb-sp-4); } .gb-tipografia * + h4{ margin-top: var(--gb-sp-3); } .gb-occhiello-piano{ display: inline-block; margin: 0 0 var(--gb-sp-1); font-size: var(--gb-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color:var(--gb-arancio-testo); } .gb-tipografia p{ margin: 0 0 var(--gb-sp-3); max-width: var(--gb-misura); } .gb-guida{ font-size: var(--gb-guida); font-weight: 300; line-height: 1.55; color: var(--gb-blu-grigio); max-width: var(--gb-misura); } /* PARAGRAFO GRANDE — testo discorsivo con piu' peso del corpo normale. Differenza da .gb-guida: quella e' un OCCHIELLO DI APERTURA (piu' chiara, peso 300, grigio-blu), questa e' testo normale semplicemente piu' grande. Il font-size e' blindato perche' dentro un Modulo Testo Divi la regola .et_pb_text p ha specificita' piu' alta e altrimenti lo riporterebbe a 17px: e questa classe nasce apposta per essere incollata li' dentro. Larghezza limitata a --gb-misura: una riga di 26px larga tutto lo schermo diventa illeggibile. Per toglierla: .gb-testo-grande{ max-width:none; } */ .gb-testo-grande{ font-size: var(--gb-corpo-grande) !important; line-height: var(--gb-il-corpo); color: var(--gb-testo); max-width: var(--gb-misura); } .gb-testo-grande b, .gb-testo-grande strong{ font-weight: 700; color: var(--gb-titolo); } /* --colonna · da usare quando il paragrafo sta in UNA COLONNA di un layout a due. Il vw non sa in che colonna si trova, quindi 26px in mezza pagina lasciano 51 caratteri per riga: troppo pochi. Qui si scende a ~22px, che in una colonna da ~668px ne da' 61 — la misura di lettura del child. Riusa --gb-guida INVECE di avere un token suo: era gia' esattamente quella misura (22,4px sul desktop). Un token in piu' sarebbe stato un doppione a 0,4px di distanza da uno che ha gia' 34 usi — cioe' proprio la deriva che il linter esiste per impedire, ma nel child, dove il linter non guarda. */ .gb-testo-grande--colonna{ font-size: var(--gb-guida) !important; } .gb-tipografia a{ color: var(--gb-blu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--gb-blu) 35%, transparent); transition: color .15s ease, text-decoration-color .15s ease; } .gb-tipografia a:hover{ color:var(--gb-arancio-testo); text-decoration-color:var(--gb-arancio-testo); } .gb-tipografia a:focus-visible{ outline: 2px solid var(--gb-arancio); outline-offset: 2px; border-radius: 2px; } .gb-tipografia strong, .gb-tipografia b{ font-weight: 700; color: var(--gb-titolo); } .gb-tipografia em, .gb-tipografia i{ font-style: italic; } .gb-tipografia mark{ background: color-mix(in srgb, var(--gb-arancio) 22%, transparent); color: inherit; padding: 0 .12em; border-radius: 2px; } .gb-tipografia .gb-prezzo{ color: var(--gb-verde); font-weight: 700; } .gb-tipografia .gb-alert{ color: var(--gb-rosso); font-weight: 700; } .gb-tipografia small, .gb-tipografia .gb-piccolo{ font-size: var(--gb-piccolo); color: var(--gb-grigio); } .gb-tipografia ul, .gb-tipografia ol{ margin: 0 0 var(--gb-sp-3); padding-left: 1.4em; max-width: var(--gb-misura); } .gb-tipografia li{ margin-bottom: .45em; } .gb-tipografia li::marker{ color:var(--gb-arancio-testo); } .gb-tipografia ol li::marker{ color: var(--gb-blu); font-weight: 700; } .gb-tipografia blockquote{ margin: var(--gb-sp-4) 0; padding: var(--gb-sp-2) var(--gb-sp-3); border-left: 4px solid var(--gb-arancio); background: var(--gb-tenue); border-radius: 0 var(--gb-raggio) var(--gb-raggio) 0; max-width: var(--gb-misura); } .gb-tipografia blockquote p{ margin: 0; font-size: 1.125rem; font-style: italic; color: var(--gb-blu-grigio); } .gb-tipografia blockquote cite{ display: block; margin-top: var(--gb-sp-2); font-style: normal; font-size: var(--gb-piccolo); font-weight: 500; color: var(--gb-grigio); } .gb-tipografia blockquote cite::before{ content: "— "; } .gb-citazione{ position: relative; margin: var(--gb-sp-5) 0; padding: var(--gb-sp-4) var(--gb-sp-4) var(--gb-sp-3); background: var(--gb-blu-tenue); border-radius: var(--gb-raggio); } .gb-citazione::before{ content: "\201C"; position: absolute; top: -0.18em; left: 0.28em; font-size: 5.5rem; line-height: 1; font-weight: 900; color: var(--gb-arancio); opacity: .9; pointer-events: none; } .gb-citazione p{ margin: 0; max-width: none; font-size: var(--gb-citazione); font-weight: 300; font-style: italic; line-height: 1.4; color: var(--gb-titolo); position: relative; z-index: 1; } .gb-citazione footer{ margin-top: var(--gb-sp-3); font-size: var(--gb-piccolo); font-weight: 500; font-style: normal; color: var(--gb-blu); } .gb-citazione footer span{ display: block; color: var(--gb-grigio); font-weight: 400; } /* Citazione a FILETTI (pull-quote centrata) — 2a variante, da sezione-testo-colonne. Si usa da sola su un
. Regge anche il testo su piu colonne. */ .gb-citazione-filetti{ margin: 40px 0; padding: 30px 0; border-top: 2px solid var(--gb-arancio); border-bottom: 2px solid var(--gb-arancio); text-align: center; break-inside: avoid-column; font-size: var(--gb-h3); font-weight: 700; font-style: normal; line-height: var(--gb-il-stretta); color: var(--gb-blu); } .gb-didascalia{ font-size: var(--gb-piccolo); line-height: 1.5; color: var(--gb-grigio); } .gb-divisore{ border: 0; height: 1px; background: var(--gb-linea); margin: var(--gb-sp-5) 0; } /* =========================================================================== B) CLASSICO — sito live · classi-ruolo italiane · valori reali (era: tipografia-gb-CLASSICO.html) · colori ufficiali ora tokenizzati, look LIVE invariato (corsivi / pesi leggeri: e' la ricostruzione del sito) =========================================================================== */ /* >>> INIZIO BLOCCO LEGACY — px fissi AMMESSI E VOLUTI <<< Qui i font-size in px NON sono un difetto: riproducono pixel per pixel il sito live esistente. Tokenizzarli cambierebbe pagine gia' pubblicate. Il linter salta questo blocco (cerca i marcatori): fuori di qui i px fissi restano vietati. Nelle pagine NUOVE non si usano queste classi: si usa la scala a token. */ /* TITOLO PAGINA */ .titolo-pagina{ font-size: 52px; font-weight: 400; line-height: 1.1; color: var(--gb-blu); margin: 0 0 .4em; } /* TITOLO SEZIONE — MAIUSC corsivo (live) */ .titolo-sezione{ font-size: clamp(32px, 5.65vw - 11px, 70px); font-weight: 400; line-height: 1; text-transform: uppercase; font-style: italic; color: var(--gb-blu); margin: 0; padding-bottom: 10px; text-align: center; } /* SOTTOTITOLO SEZIONE */ .sottotitolo-sezione{ font-size: 28px; font-weight: 400; line-height: 1; font-style: normal; color: var(--gb-blu); margin: 0; padding-bottom: 10px; text-align: center; } /* SOMMARIO SEZIONE (lead) */ .sommario-sezione{ font-size: clamp(20px, 0.89vw + 13.2px, 26px); font-weight: 300; line-height: 1.3; color: var(--gb-grigio-lead); text-transform: none; font-style: normal; margin: 0; text-align: center; } /* TITOLO-CLAIM — 800 MAIUSC corsivo · live #333 (nuovo equivalente: var(--gb-testo)) */ .titolo-claim{ font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; font-style: italic; color: var(--gb-legacy-claim); margin: 0; padding-bottom: 10px; } /* TITOLO A BARRA — H2 a due tinte (antracite + blu) con barra arancio · MAIUSC corsivo 900 accento = (o .accento) sulla parola in blu */ .titolo-barra{ --barra-larghezza: 88px; /* lunghezza barra arancio */ --barra-spessore: 5px; /* il font si dichiara, non si eredita: nel core la famiglia e' impostata su body, e dentro Divi un Modulo Testo con un font scelto in Design vince sull'ereditarieta'. Le sorelle (.gb-titolo-pagina, .gb-sottotitolo, .gb-sezione) ce l'hanno gia': questa era rimasta indietro. */ font-family: var(--gb-font); font-size: clamp(2.125rem, 1.55rem + 1.9vw, 3.25rem); /* 34 -> 52px */ font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; color: var(--gb-testo); /* prima parola: antracite */ margin: 0; text-align: left; } .titolo-barra b, .titolo-barra .accento{ color: var(--gb-blu); font-weight: inherit; font-style: inherit; } /* parola in blu */ .titolo-barra::after{ content:""; display:block; width: var(--barra-larghezza); height: var(--barra-spessore); border-radius: 2px; background: var(--gb-arancio); margin-top: clamp(14px, 1.4vw, 20px); } /* SOTTOTITOLO ARANCIO */ .sottotitolo-arancio{ font-size: 30px; font-weight: 300; line-height: 1.2; text-align: left; color:var(--gb-arancio-testo); margin: 0; padding-bottom: 10px; } /* PARAGRAFO */ .paragrafo{ font-size: 16px; font-weight: 300; line-height: 1.5; margin: 0 0 1em; } /* PARAGRAFO EVIDENZA — live #666 (nuovo equivalente: var(--gb-grigio)) */ .paragrafo-evidenza{ font-size: 22px; font-weight: 300; line-height: 1.5; color: var(--gb-legacy-evidenza); text-align: justify; margin: 0 0 1em; } /* PARAGRAFO CENTRATO */ .paragrafo-centrato{ font-size: 26px; font-weight: 300; line-height: 1.3; text-align: center; margin: 0 0 1em; } /* ELENCO */ .elenco{ margin: 0 0 1em; padding-left: 1.3em; } .elenco li{ font-size: 16px; font-weight: 300; line-height: 1.6; margin-bottom: .35em; } /* LINK in testo (classico) */ .paragrafo a, .sommario-sezione a, .elenco li a{ color: var(--gb-blu); font-weight: 400; text-decoration: none; } .paragrafo a:hover, .sommario-sezione a:hover, .elenco li a:hover{ text-decoration: underline; } /* TESTO PICCOLO */ .testo-piccolo{ font-size: 14px; font-weight: 300; } /* >>> FINE BLOCCO LEGACY <<< */ /* ETICHETTE TARGET (pillole) BLINDATO ANTI-DIVI, come .gb-lista. Dentro un Modulo Testo la regola di Divi `.et_pb_text ul/ol` vince sul reset di base e rimette pallini, rientro e la sua misura di carattere: le pillole si ritrovano puntate, spostate a destra e con il testo della misura sbagliata. Le tre dichiarazioni con !important sono quelle, e solo quelle, che Divi attacca. ⚠ NON blindare `margin` dell'ul ne' `padding` dei li: sono i due punti che le sezioni personalizzano davvero (striscia-fiducia li cambia entrambi), e un !important qui li scavalcherebbe. ⚠ Il `font-size` dei li E' blindato, quindi una sezione non lo cambia piu' con una regola normale: oggi nessuna ci prova davvero (striscia-fiducia lo rimette allo stesso var(--gb-piccolo) sotto i 420px, quindi non si vede differenza). Se un domani servisse una misura diversa in una sezione, serve !important anche li': .-sezione .-categorie li{ font-size:var(--gb-micro) !important; } */ .etichette-target{ list-style: none !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; margin: 35px 0 45px 0; } .etichette-target li{ background-color: var(--gb-blu-tenue); color: var(--gb-blu); padding: 10px 20px; border-radius: 50px; font-weight: 800; font-size: var(--gb-piccolo) !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; } .etichette-target li svg{ width: 16px; height: 16px; fill: var(--gb-mod-revisione); } /* --centrata · le pillole al centro invece che allineate a sinistra. Serve quando la banda sta sotto un titolo centrato: a sinistra sembrano cadute. Vale a ogni larghezza — una variante che si scentra sul telefono sorprenderebbe. NOTA: qui c'era un @media (max-width:980px){ justify-content:flex-start }, che ripeteva il valore di partenza e quindi non faceva niente — se non annullare questa variante sotto i 980px. Tolto. Chi vuole un allineamento diverso lo dichiara sotto il proprio prefisso, come fa gia' .striscia-fiducia-categorie. */ .etichette-target--centrata{ justify-content: center; } /* STATISTICHE COPPIA */ .statistiche-coppia{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; margin:0; padding:0; } .statistica{ flex:1 1 110px; min-width:0; margin:0; padding:0; } .statistica__numero{ font-family:var(--gb-font); font-size:clamp(30px, 3vw, 44px); font-weight:900; color:var(--gb-arancio-testo); line-height:1; letter-spacing:-0.01em; margin:0 0 4px 0; padding:0; } .statistica__etichetta{ font-family:var(--gb-font); font-size:0.6875rem; font-weight:700; color:var(--gb-blu-grigio); text-transform:uppercase; letter-spacing:0.18em; line-height:1.3; margin:0; padding:0; } .statistica--blu .statistica__numero{ color:var(--gb-blu); } .statistica--verde .statistica__numero{ color:var(--gb-mod-contabilita); } @media (max-width: 767px){ .statistiche-coppia{ gap:14px; } .statistica__etichetta{ font-size:0.625rem; letter-spacing:0.16em; } } /* SEPARATORE sfumato */ .hr-landing{ background:linear-gradient(90deg, rgba(175,173,172,0) 0%, var(--gb-legacy-hr) 50%, rgba(175,173,172,0) 100%); border:0; height:1px; } /* =========================================================================== C) SISTEMA PULSANTI .gb-pulsante — UNICO per entrambi i sistemi =========================================================================== */ /* BLINDATO ANTI-DIVI: in un Modulo Testo, Divi (.et_pb_text a) ha specificita' piu' alta e sovrascriverebbe colore/sfondo del pulsante. Qui i valori VISIVI (background/color/ border-color/text-decoration) hanno !important, cosi' NESSUNA sezione deve piu' ridefinire o "blindare" i pulsanti in locale: bastano le classi .gb-pulsante / --varianti. */ .gb-pulsante{ display:inline-flex; align-items:center; justify-content:center; gap:11px; cursor:pointer; text-decoration:none !important; font-family:inherit; padding:16px 38px; border-radius:50px; font-size:var(--gb-ui); font-weight:700; line-height:1; letter-spacing:0.0125em; border:2px solid transparent; background:var(--gb-blu-pulsante) !important; color:#fff !important; box-shadow:0 14px 30px rgba(25,62,93,.25); transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, border-color .25s, color .25s, box-shadow .25s; --gb-freccia-dim:17px; /* misura dell'icona: vale sia per la freccia automatica sia per una .gb-ico incollata a mano */ } .gb-pulsante:hover{ transform:translateY(-3px); background:var(--gb-blu-pulsante-sc) !important; box-shadow:0 18px 34px rgba(25,62,93,.32); text-decoration:none !important; } .gb-pulsante:active{ transform:translateY(-1px); } .gb-pulsante:focus-visible{ outline:3px solid rgba(240,126,0,.55); outline-offset:3px; } .gb-pulsante[disabled], .gb-pulsante.gb-pulsante--disabilitato{ opacity:.45; pointer-events:none; box-shadow:none; } .gb-pulsante .gb-ico{ width:var(--gb-freccia-dim); height:var(--gb-freccia-dim); flex:0 0 auto; } .gb-pulsante .gb-ico svg{ width:100%; height:100%; display:block; fill:currentColor; } /* difensiva: svg icona messo SENZA wrapper .gb-ico (evita il default 300x150) */ .gb-pulsante > svg{ width:var(--gb-freccia-dim); height:var(--gb-freccia-dim); flex:0 0 auto; display:block; fill:currentColor; } /* ETICHETTA BIANCA su arancio di marca — scelta di marca, decisa e confermata. NOTA di accessibilita': bianco su #F07E00 fa 2,73:1, sotto il minimo di 4,5:1. E' la stessa scelta gia' fatta per l'arancio-come-inchiostro (vedi :root): il colore di marca viene prima. Se un giorno servisse la variante conforme, basta scurire il fondo a #A85600 (5,26:1) qui sotto: nessun file di sezione da toccare. L'hover SCURISCE (non schiarisce, come faceva quando l'etichetta era navy): con la scritta bianca il contrasto deve salire, e su --gb-arancio-scuro fa 3,34:1. */ .gb-pulsante--arancio{ background:var(--gb-arancio) !important; color:#fff !important; box-shadow:0 14px 30px rgba(240,126,0,.32); } .gb-pulsante--arancio:hover{ background:var(--gb-arancio-scuro) !important; box-shadow:0 18px 34px rgba(240,126,0,.4); } .gb-pulsante--bianco{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.7) !important; box-shadow:none; } .gb-pulsante--bianco:hover{ background:#fff !important; color:var(--gb-blu-pulsante) !important; border-color:#fff !important; box-shadow:0 14px 28px rgba(0,0,0,.18); } .gb-pulsante--bianco-blu{ background:#fff !important; color:var(--gb-blu) !important; border-color:var(--gb-blu) !important; box-shadow:0 10px 24px rgba(43,104,158,.14); } .gb-pulsante--bianco-blu:hover{ background:var(--gb-blu) !important; color:#fff !important; border-color:var(--gb-blu) !important; box-shadow:0 16px 30px rgba(43,104,158,.28); } /* a riposo l'etichetta e' navy (l'arancio su bianco farebbe 2,73:1): l'identita' arancio resta nel BORDO. Su hover il fondo diventa arancio e la scritta passa a bianca, per coerenza con .gb-pulsante--arancio. */ .gb-pulsante--bianco-arancio{ background:#fff !important; color:var(--gb-blu-pulsante-sc) !important; border-color:var(--gb-arancio-testo) !important; box-shadow:0 10px 24px rgba(240,126,0,.14); } .gb-pulsante--bianco-arancio:hover{ background:var(--gb-arancio) !important; color:#fff !important; border-color:var(--gb-arancio-testo) !important; box-shadow:0 16px 30px rgba(240,126,0,.28); } /* --arancio-contorno · il gemello VUOTO di --arancio: stesso colore, ma il fondo bianco e l'arancio nel bordo E nell'etichetta. ⚠ NON confonderlo con --bianco-arancio, che gli somiglia ma non e' lui: --bianco-arancio bordo arancio, etichetta NAVY --arancio-contorno bordo arancio, etichetta ARANCIO <- questo La differenza e' solo il colore della scritta, ed e' una scelta di leggibilita': l'arancio di marca su bianco fa 2,73:1, sotto il minimo di 4,5:1. --bianco-arancio per questo tiene l'etichetta navy e lascia l'identita' al bordo; qui invece l'arancio va anche nel testo, che e' la stessa scelta gia' fatta nel resto della libreria (i nei titoli, gli occhielli) e dichiarata in :root come scelta di marca. Usa var(--gb-arancio-testo), non il colore scritto a mano: il giorno che quel token diventasse #A85600 (5,26:1) questo pulsante seguirebbe da solo. L'hover e' identico a --bianco-arancio: fondo pieno, scritta bianca. PRENDE LA FRECCIA, a differenza delle altre contornate: tenendo il colore pieno nel testo resta una PRIMARIA, e la freccia segue il ruolo non la forma (v. la nota sulla regola della freccia piu' sotto). La freccia e' disegnata in currentColor, quindi e' arancio a riposo e diventa bianca sull'hover da sola. Per toglierla: --senza-freccia. */ .gb-pulsante--arancio-contorno{ background:#fff !important; color:var(--gb-arancio-testo) !important; border-color:var(--gb-arancio-testo) !important; box-shadow:0 10px 24px rgba(240,126,0,.14); } .gb-pulsante--arancio-contorno:hover{ background:var(--gb-arancio) !important; color:#fff !important; border-color:var(--gb-arancio-testo) !important; box-shadow:0 16px 30px rgba(240,126,0,.28); } .gb-pulsante--piccolo{ padding:11px 24px; font-size:var(--gb-piccolo); gap:8px; --gb-freccia-dim:14px; } /* --molto-piccolo · il gradino sotto --piccolo, scatola compresa. Serve dove --piccolo e' ancora troppo: dentro una scheda stretta, in una riga di filtri, accanto a una voce di elenco. Resta un pulsante VERO — fondo, bordo, ombra, sollevamento — quindi si compone con tutti i colori (--arancio, --bianco, --bianco-blu, --bianco-arancio, --vetro, --disabilitato) e con --senza-freccia, esattamente come suo fratello --piccolo. La freccia compare dove compare per gli altri: sulle due primarie (blu e arancio). Le contornate non la prendono mai, e non e' una dimenticanza — sono le secondarie, sta alla primaria accanto portarla. ⚠ NON CONFONDERLO CON --piccolissimo, ed e' facile: in italiano "piccolissimo" suona come il gradino sotto "molto piccolo", e invece non sono due gradini della stessa scala. · --molto-piccolo testo 0,78rem, CON la scatola -> e' una CTA piccola · --piccolissimo testo 0,78rem, SENZA scatola -> e' la terziaria, non ha colore proprio e lo eredita da chi la contiene Stessa misura di testo, ruoli diversi: uno e' il pulsante piu' piccolo, l'altro non e' un pulsante ma un link con la freccia. Se ti serve qualcosa che pesi come un pulsante, e' questo; se ti serve che sparisca dentro il testo, e' --piccolissimo. PERCHE' QUI CI SONO SOLO QUATTRO RIGHE. Un modificatore di MISURA non tocca ombra, colore ne' sollevamento: quelli appartengono alle varianti di colore, che li dichiarano ognuna con la propria tinta. Se qui mettessi una box-shadow, essendo dichiarata piu' in basso vincerebbe su quella di --arancio e un pulsante arancio piccolo si ritroverebbe l'ombra blu. E' la stessa ragione per cui --piccolo ha solo queste quattro righe. */ .gb-pulsante--molto-piccolo{ padding:8px 16px; font-size:var(--gb-micro); gap:6px; --gb-freccia-dim:12px; } /* --piccolissimo · CTA TERZIARIA: solo testo e freccia, nessuna scatola. Il terzo gradino dopo la primaria (piena) e la secondaria (contornata): serve dove una CTA vera peserebbe troppo — dentro una scheda, in fondo a una colonna, accanto a un titolo. NON HA COLORE PROPRIO, ed e' il punto: lo prende da fuori, in due modi. 1. NON FAI NIENTE -> eredita il colore di chi la contiene (`inherit`). Va bene quando il testo intorno ha gia' il colore giusto: su fondo scuro diventa chiara da sola, senza una variante dedicata. 2. LA TINGI -> imposti --gb-pulsante-tinta sul pulsante o su un antenato: .scheda .gb-pulsante--piccolissimo{ --gb-pulsante-tinta:var(--colore-firma); } Serve quando la CTA deve avere un colore DIVERSO dal testo che le sta accanto — il caso normale in una scheda, dove nome e descrizione restano neutri e solo la CTA porta il colore del prodotto. ⚠ NON si tinge con `color:` diretto: qui c'e' !important (serve contro Divi) e una regola normale non lo batte. Per questo la manopola e' una variabile: le variabili non fanno a botte con !important. In entrambi i casi la freccia segue da sola, perche' e' disegnata in `currentColor`: un colore solo da cambiare, non due. LA FRECCIA CE L'HA. Non e' nell'elenco delle escluse (--bianco, --bianco-blu, --bianco-arancio, --vetro): la prende dal ::after come le primarie. Per toglierla vale --senza-freccia, che si compone con questa. NIENTE SOLLEVAMENTO AL PASSAGGIO: senza scatola non c'e' niente da sollevare, e un testo che si muove di tre pixel sembra un difetto. Si muove la freccia. Se una sezione ha gia' una sua CTA di testo scritta a mano (es. .trova-modulo-schede-vai), puo' passare a questa quando la si tocca: e' lo stesso disegno, ma smette di essere una copia. */ .gb-pulsante--piccolissimo{ padding:0; gap:6px; font-size:var(--gb-micro); border:0; border-radius:0; background:transparent !important; color:var(--gb-pulsante-tinta, inherit) !important; box-shadow:none; --gb-freccia-dim:12px; } .gb-pulsante--piccolissimo:hover{ background:transparent !important; box-shadow:none; transform:none; } .gb-pulsante--piccolissimo::after{ transition:transform .25s var(--gb-molla); } .gb-pulsante--piccolissimo:hover::after{ transform:translateX(3px); } /* --vetro · CTA secondaria su fondo scuro o su immagine: vetro smerigliato. Diversa da --bianco (che e' trasparente col bordo pieno): qui il fondo e' semi-opaco e sfocato, cosi' l'etichetta resta leggibile anche sopra una foto. */ .gb-pulsante--vetro{ background:rgba(255,255,255,.10) !important; color:#fff !important; border-color:rgba(255,255,255,.30) !important; backdrop-filter:blur(4px); box-shadow:none; } .gb-pulsante--vetro:hover{ background:#fff !important; color:var(--gb-blu-pulsante) !important; border-color:#fff !important; box-shadow:0 14px 28px rgba(0,0,0,.18); } /* --- FRECCIA AUTOMATICA sulle CTA primarie ------------------------------- Prima la freccia si incollava a mano in ogni pulsante (). Su 205 pulsanti della libreria ce l'avevano 76: gli arancio esattamente meta' si' e meta' no. Non era una scelta, era dimenticanza. Adesso la mette il child. LA RICEVONO le due CTA PRIMARIE: .gb-pulsante (blu) e .gb-pulsante--arancio. NON LA RICEVONO le secondarie --bianco / --bianco-blu / --bianco-arancio / --vetro (l'avevano 11 su 69: era l'eccezione, non la regola) e chiunque porti --senza-freccia. NIENTE DOPPIONI il :not(:has(...)) esclude i pulsanti che l'icona ce l'hanno gia' dentro — freccia incollata a mano o icona diversa (play, scarica...). Restano identici: NESSUNA sezione da ritoccare. COME E' DISEGNATA ::after in mask + currentColor: stesso tracciato dell'SVG incollato a mano, stessa misura (--gb-freccia-dim), e il colore segue l'etichetta invece di essere fissato nel markup. SE :has() MANCA il selettore e' invalido e la regola cade tutta insieme: i pulsanti restano come oggi. Degradazione sicura. */ :root{ --gb-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h12l-5-5 1.4-1.4L21 12l-7.6 7.4L12 18l5-5H5z'/%3E%3C/svg%3E"); } /* CHI PRENDE LA FRECCIA. Non e' "le piene si, le contornate no": e' "le PRIMARIE si, le secondarie no". Quasi sempre le due cose coincidono, ma --arancio-contorno e' l'eccezione ed e' voluta: e' vuota ma tiene tutto il colore di marca (bordo E scritta), quindi resta l'azione principale e la freccia le spetta. --bianco-arancio invece porta l'etichetta navy proprio per fare un passo indietro: quella e' una secondaria e la freccia la lascia alla primaria che ha accanto. Per toglierla comunque: --senza-freccia, che vale su tutte. */ .gb-pulsante:not(.gb-pulsante--bianco, .gb-pulsante--bianco-blu, .gb-pulsante--bianco-arancio, .gb-pulsante--vetro, .gb-pulsante--senza-freccia):not(:has(svg, img, .gb-ico))::after{ content:''; display:block; flex:0 0 auto; width:var(--gb-freccia-dim); height:var(--gb-freccia-dim); background:currentColor; -webkit-mask:var(--gb-freccia) no-repeat center / contain; mask:var(--gb-freccia) no-repeat center / contain; } /* --senza-freccia · il pulsante primario SENZA freccia. Serve dove la freccia mente: un "Invia" di un modulo non porta da nessuna parte, e due CTA affiancate con due frecce si annullano a vicenda. Si compone con tutto: --arancio, --piccolo, o entrambi. */ /* anteprima STATICA dello stato :hover (solo per il campionario) */ .gb-hover.gb-pulsante{ transform:translateY(-3px); background:var(--gb-blu-pulsante-sc) !important; box-shadow:0 18px 34px rgba(25,62,93,.32); } .gb-hover.gb-pulsante--arancio{ background:var(--gb-arancio-scuro) !important; box-shadow:0 18px 34px rgba(240,126,0,.4); } .gb-hover.gb-pulsante--bianco{ background:#fff !important; color:var(--gb-blu-pulsante) !important; border-color:#fff !important; box-shadow:0 14px 28px rgba(0,0,0,.18); } .gb-hover.gb-pulsante--bianco-blu{ background:var(--gb-blu) !important; color:#fff !important; border-color:var(--gb-blu) !important; box-shadow:0 16px 30px rgba(43,104,158,.28); } .gb-hover.gb-pulsante--bianco-arancio{ background:var(--gb-arancio) !important; color:#fff !important; border-color:var(--gb-arancio) !important; box-shadow:0 16px 30px rgba(240,126,0,.28); } .gb-hover.gb-pulsante--arancio-contorno{ background:var(--gb-arancio) !important; color:#fff !important; border-color:var(--gb-arancio-testo) !important; box-shadow:0 16px 30px rgba(240,126,0,.28); } /* --vetro mancava: senza questa riga .gb-hover cadeva sulla regola generica qui sopra e l'anteprima mostrava un pulsante BLU, cioe' un hover che non esiste. */ .gb-hover.gb-pulsante--vetro{ background:#fff !important; color:var(--gb-blu-pulsante) !important; border-color:#fff !important; box-shadow:0 14px 28px rgba(0,0,0,.18); } /* idem --piccolissimo, per lo stesso motivo: il suo hover non e' una scatola che cambia colore, e' la freccia che si sposta. Qui la si mostra ferma a fine corsa. */ .gb-hover.gb-pulsante--piccolissimo{ transform:none; background:transparent !important; box-shadow:none; } .gb-hover.gb-pulsante--piccolissimo::after{ transform:translateX(3px); } /* =========================================================================== D) AREA EROE + FASCIA ICONE — prefisso .eroe- Titolo/sottotitolo dell'eroe del nuovo sito, gruppo CTA (riusa il sistema pulsanti .gb-pulsante della sezione C) e una fascia di dischi esagonali con HOVER IN PURO CSS (zero JS). Geometria: esagono regolare flat-top (aspect-ratio 1.1547 + clip-path). Ombra: drop-shadow sul WRAPPER esterno; il clip-path sta sulla forma interna (box-shadow su elemento clippato verrebbe tagliata). =========================================================================== */ .eroe{ text-align:center; } /* OCCHIELLO A PILLOLA — .gb-occhiello pillola bianca · testo arancio leggibile · bordo arancio tenue · niente trattino/pallino (l'occhiello IN LINEA, senza pillola, e' .gb-occhiello-piano) */ .gb-occhiello{ /* KNOB pillola */ /* costante, NON var(--gb-arancio-testo): la pillola e' chiara anche dentro una sezione scura, quindi qui l'inchiostro non deve mai "accendersi" */ --gb-occhiello-col: var(--gb-arancio-inchiostro); /* colore testo (arancio leggibile) */ /* .95 e non .7: sopra una sezione scura la pillola al 70% si mescolava col navy e diventava grigia (testo a 1,56:1, illeggibile). Su fondo chiaro non cambia nulla. */ --gb-occhiello-sfondo: rgba(255,255,255,.95); --gb-occhiello-bordo: rgba(240,126,0,.25); display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; /* la pillola si adatta al testo: dentro flex/grid column NON si stira a tutta larghezza */ width:fit-content; max-width:100%; padding:8px 18px; border-radius:var(--gb-pill); background:var(--gb-occhiello-sfondo); border:1px solid var(--gb-occhiello-bordo); color:var(--gb-occhiello-col); font-size:var(--gb-micro); font-weight:800; letter-spacing:0.16em; text-transform:uppercase; line-height:1; } /* variante blu (stesso componente, cambia solo il colore) */ .gb-occhiello--blu{ --gb-occhiello-col:var(--gb-blu); --gb-occhiello-bordo:rgba(43,104,158,.25); } /* TITOLO EROE — black, blu fondazione, scala fluida · accento arancio */ .eroe-titolo{ font-size:clamp(2.6rem, 1.7rem + 3.6vw, 4.4rem); font-weight:900; line-height:var(--gb-il-eroe); letter-spacing:-0.02em; color:var(--gb-titolo); margin:0 auto 18px; max-width:18ch; text-wrap:balance; } .eroe-titolo b, .eroe-titolo .accento{ color:var(--gb-arancio-testo); font-weight:inherit; } /* SOTTOTITOLO EROE — leggero, grigio-lead, misura controllata */ .eroe-sottotitolo{ font-size:clamp(1.15rem, 1.0rem + 0.7vw, 1.5rem); font-weight:300; line-height:1.5; color:var(--gb-grigio-lead); max-width:62ch; margin:0 auto 32px; } /* GRUPPO AZIONI (CTA) — riusa .gb-pulsante (sistema unico, sezione C) */ .eroe-azioni{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:0 0 48px; } /* FASCIA ICONE — striscia di dischi esagonali */ .eroe-fascia{ display:flex; flex-wrap:wrap; gap:clamp(18px, 4vw, 40px); justify-content:center; align-items:flex-start; margin:0; padding:0; list-style:none; } .eroe-icona{ display:flex; flex-direction:column; align-items:center; gap:12px; width:108px; text-decoration:none; cursor:pointer; } /* DISCO ESAGONALE — ombra sul WRAPPER, clip sulla FORMA interna */ .eroe-disco{ width:84px; aspect-ratio:1.1547; /* esagono regolare flat-top */ filter:drop-shadow(0 10px 20px rgba(25,62,93,.18)); transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s cubic-bezier(.34,1.56,.64,1); } .eroe-disco__forma{ width:100%; height:100%; clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background:var(--gb-blu-tenue); display:flex; align-items:center; justify-content:center; transition:background .35s ease; } .eroe-disco__forma svg{ width:38px; height:38px; fill:var(--gb-blu); transition:fill .35s ease; } /* ETICHETTA sotto il disco */ .eroe-icona__nome{ font-size:var(--gb-micro); font-weight:700; letter-spacing:0.02em; line-height:var(--gb-il-stretta); color:var(--gb-blu-grigio); text-align:center; transition:color .35s ease; } /* HOVER / FOCUS — sollevamento molla + riempimento blu + icona bianca */ .eroe-icona:hover .eroe-disco, .eroe-icona:focus-visible .eroe-disco{ transform:translateY(-8px); filter:drop-shadow(0 18px 30px rgba(25,62,93,.34)); } .eroe-icona:hover .eroe-disco__forma, .eroe-icona:focus-visible .eroe-disco__forma{ background:var(--gb-blu); } .eroe-icona:hover .eroe-disco__forma svg, .eroe-icona:focus-visible .eroe-disco__forma svg{ fill:#fff; } .eroe-icona:hover .eroe-icona__nome, .eroe-icona:focus-visible .eroe-icona__nome{ color:var(--gb-blu); } .eroe-icona:focus-visible{ outline:none; } /* VARIANTE NUCLEO (accento arancio) — es. Guido IA al centro del sistema */ .eroe-icona--nucleo .eroe-disco__forma{ background:color-mix(in srgb, var(--gb-arancio) 16%, #fff); } .eroe-icona--nucleo .eroe-disco__forma svg{ fill:var(--gb-arancio); } .eroe-icona--nucleo .eroe-disco{ filter:drop-shadow(0 10px 20px rgba(240,126,0,.22)); } .eroe-icona--nucleo:hover .eroe-disco__forma, .eroe-icona--nucleo:focus-visible .eroe-disco__forma{ background:var(--gb-arancio); } .eroe-icona--nucleo:hover .eroe-disco, .eroe-icona--nucleo:focus-visible .eroe-disco{ filter:drop-shadow(0 18px 30px rgba(240,126,0,.4)); } .eroe-icona--nucleo:hover .eroe-icona__nome, .eroe-icona--nucleo:focus-visible .eroe-icona__nome{ color:var(--gb-arancio); } @media (max-width:767px){ .eroe-icona{ width:84px; } .eroe-disco{ width:68px; } .eroe-disco__forma svg{ width:30px; height:30px; } } /* =========================================================================== F) COMPONENTI DI SEZIONE — prefisso .gb- · classi comuni riutilizzabili Scopo: le sezioni "standard" (intro + griglia + card) NON scrivono CSS, compongono nel Modulo Testo con queste classi. Le UNICHE variazioni ammesse sono i modificatori documentati qui (--s, --larga, --arancio…). Riproducono il look dominante delle sezioni esistenti. =========================================================================== */ :root{ --gb-molla: cubic-bezier(.34,1.56,.64,1); /* easing firma (unico) */ --gb-ease-out: cubic-bezier(.22,.61,.36,1); /* smooth ease-out */ --gb-raggio-card: 18px; /* raggio card standard */ --gb-pill: 50px; /* pillole / bottoni */ --gb-bordo-tenue: var(--gb-grigio-20); /* contorno card (era #E6ECF2) */ --gb-ombra: 0 14px 34px rgba(25,62,93,.07); --gb-ombra-hover: 0 24px 48px rgba(25,62,93,.16); /* NB: quasi identico a --gb-h2 (43,2px), ma sono DUE sistemi: --gb-h2 vale per gli h2 dentro lo scope .gb-tipografia, questo per il componente .gb-titolo. Non si fondono. */ --gb-titolo-sezione: clamp(26px, 1.4rem + 2.2vw, 42px); /* titolo sezione unico */ /* Le altre misure dei componenti comuni: erano clamp scritti a mano dentro le regole, quindi non erano raggiungibili da fuori. Stessi valori, ora con un nome: si cambiano da qui e i componenti seguono. */ --gb-titolo-s: clamp(22px, 1.2rem + 1.4vw, 32px); /* .gb-titolo--s */ --gb-sommario-dim: clamp(15px, 1.7vw, 18px); /* .gb-sommario */ --gb-card-titolo: clamp(17px, 1.7vw, 20px); /* h3 dentro .gb-card */ --gb-card-testo: clamp(13.5px, 1.4vw, 15px); /* p dentro .gb-card */ /* --- I QUATTRO GRADINI CHE MANCAVANO (14 agosto 2026) ------------------- Non inventati: sono misure che le sezioni usavano gia', ognuna in un ruolo che nella scala non aveva un nome. Finche' il nome non c'era, l'unica cosa che si poteva fare era riscrivere il clamp a mano -- ed e' esattamente quello che era successo. Il linter le elencava sotto "BUCHI NELLA SCALA". --gb-titolo-corpo un TITOLO a taglia corpo: la domanda di un accordion, il titolo di una voce d'elenco. Sta sotto --gb-card-titolo perche' non apre un blocco, apre una riga. --gb-titolo-blocco il gradino SOPRA --gb-card-titolo: apre un blocco intero, non una scheda. Sotto --gb-titolo-s, che e' gia' da sezione. --gb-citazione NON e' nuova: e' la misura che .gb-citazione p aveva scritta a mano qui dentro dal principio. Estratta, non inventata -- ora la puo' usare anche una sezione. --gb-citazione-piccola la citazione dentro una scheda, dove quella grande sfonderebbe: caroselli di recensioni, frasi in evidenza. */ --gb-titolo-corpo: clamp(15.5px, 1.7vw, 18px); /* domanda, titolo di voce */ --gb-titolo-blocco: clamp(19px, 2.5vw, 25px); /* titolo di blocco */ --gb-citazione: clamp(1.35rem, 1.15rem + 1vw, 1.95rem); /* .gb-citazione p */ --gb-citazione-piccola: clamp(16px, 2.1vw, 20px); /* citazione in scheda */ /* INCHIOSTRO di titolo e sommario: seguono il fondo, come --gb-arancio-testo. Su fondo scuro .gb-titolo restava #193E5D = 1,01:1 sul navy, cioe' invisibile. */ --gb-titolo-col: var(--gb-titolo); --gb-sommario-col: var(--gb-grigio-lead); --gb-etichetta-col: var(--gb-grigio); --gb-titolo-pagina: clamp(2.5rem, 1.45rem + 3.55vw, 4.625rem); /* h1 di pagina: 40 -> 74px */ --gb-sottotitolo: clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem); /* h3 di appoggio: 22 -> 28px */ } /* guscio sezione */ .gb-sezione{ font-family:var(--gb-font); color:var(--gb-testo); background:transparent; padding:clamp(40px,6vw,76px) 22px; } .gb-contenitore{ max-width:1440px; margin:0 auto; } .gb-contenitore--stretta{ max-width:1200px; } .gb-contenitore--larga{ max-width:1440px; } /* intro: occhiello + titolo + sommario */ .gb-intro{ text-align:center; margin:0 0 clamp(28px,4vw,46px); } /* .gb-occhiello e .gb-occhiello--blu sono definiti piu' sopra, nel blocco EROE. */ /* letter-spacing in px e VOLUTO: la misura del titolo e' fluida (clamp), quindi un valore in em cambierebbe la spaziatura lungo tutta la scala e sposterebbe gli a capo. */ .gb-titolo{ margin:0 0 14px; color:var(--gb-titolo-col); font-size:var(--gb-titolo-sezione); font-weight:900; line-height:1.1; letter-spacing:-.5px; text-wrap:balance; } .gb-titolo b, .gb-titolo .accento{ color:var(--gb-arancio-testo); font-weight:900; } .gb-titolo--s{ font-size:var(--gb-titolo-s); } /* BLINDAGGIO ANTI-DIVI (opzionale, si aggiunge al titolo) — .gb-titolo--blindato Serve quando il Modulo Testo ha un colore impostato all'intestazione: Divi lo applica all'h2 con specificita' alta e il titolo diventa mono (di solito tutto arancio). NON e' attivo di default apposta: alcune sezioni cambiano il titolo di proposito (bianco su fondo scuro), e un !important globale le romperebbe. Il colore segue il contesto (--gb-titolo-col), quindi funziona anche con .gb-su-scuro. Lo della parte non accentata e' coperto da "> span": nessuna classe in piu'. */ .gb-titolo--blindato{ color:var(--gb-titolo-col) !important; } .gb-titolo--blindato b, .gb-titolo--blindato .accento{ color:var(--gb-arancio-testo) !important; } .gb-titolo--blindato > span{ color:var(--gb-titolo-col) !important; } /* ---- TITOLO DI PAGINA (h1) e SOTTOTITOLO (h3) — blu di marca ---- .gb-titolo-pagina = l'h1 della pagina: 74px sul desktop, scende fino a 40px. Sta nell'intestazione della pagina, NON dentro una sezione (le sezioni partono da h2: l'h1 della pagina e' uno solo). .gb-sottotitolo = h3 di appoggio sotto il titolo: 28px, scende a 22px. Il colore e' blindato con !important perche' dentro un Modulo Testo Divi (.et_pb_text h1/h3) la regola di Divi ha specificita' piu' alta e slaverebbe il titolo — stesso motivo per cui e' blindato .gb-pulsante. */ .gb-titolo-pagina{ margin:0 0 .4em; font-family:var(--gb-font); font-size:var(--gb-titolo-pagina); font-weight:900; line-height:var(--gb-il-stretta); letter-spacing:-0.01em; color:var(--gb-blu) !important; text-wrap:balance; } .gb-sottotitolo{ margin:0 0 .6em; font-family:var(--gb-font); font-size:var(--gb-sottotitolo); font-weight:400; line-height:var(--gb-il-media); color:var(--gb-blu) !important; text-wrap:balance; } /* accento arancio dentro i due titoli, come in .gb-titolo */ .gb-titolo-pagina b, .gb-titolo-pagina .accento, .gb-sottotitolo b, .gb-sottotitolo .accento{ color:var(--gb-arancio-testo) !important; font-weight:900; } /* ETICHETTA MICRO — riga discreta MAIUSCOLA sotto il titolo (nome prodotto, claim breve). Era riscritta identica in 8 sezioni con nome -sotto-titolo. Da non confondere con: .gb-occhiello-piano = occhiello sopra il titolo, arancio, peso 700 (accento) .gb-sottotitolo = h3 di pagina, 22->28px, blu (titolo vero e proprio) Colore: segue il contesto (--gb-etichetta-col), .gb-su-scuro lo schiarisce da solo. */ .gb-etichetta{ display:block; margin-top:.75rem; color:var(--gb-etichetta-col); font-size:var(--gb-micro); font-weight:500; letter-spacing:0.16em; text-transform:uppercase; } .gb-sommario{ max-width:90%; margin:0; color:var(--gb-sommario-col); font-size:var(--gb-sommario-dim); font-weight:300; line-height:1.6; } .gb-intro .gb-sommario{ margin-left:auto; margin-right:auto; } /* griglia responsive */ .gb-griglia{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:1fr; } .gb-griglia--2{ grid-template-columns:repeat(2,1fr); } .gb-griglia--3{ grid-template-columns:repeat(3,1fr); } .gb-griglia--4{ grid-template-columns:repeat(4,1fr); } /* BREAKPOINT = quelli di Divi (980 tablet · 767 telefono) e nessun altro. Prima la griglia collassava a 900/560: le sezioni si allineavano a LEI e finivano fuori dalla regola. Ora sistema e regola dicono la stessa cosa, e la griglia si impila insieme alle colonne di Divi che la contengono. */ @media (max-width:980px){ .gb-griglia--3, .gb-griglia--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:767px){ .gb-griglia--2, .gb-griglia--3, .gb-griglia--4{ grid-template-columns:1fr; } } /* ===================== LISTE — varianti condivise ===================== Base + 5 varianti. Reset blindato (in Divi l'