/* ========================================================================= SISTEMA VISIVO CUCINOTTA Livello unico di colori, tipografia e componenti per tutto il sito. Riferimento: https://claude.ai/artifact/KYW6v8dDL3S5mP1nsGbqig COME È FATTO, in breve: 1. I token stanno su :root, quindi li vede tutto il sito. 2. Gli alias dei vecchi nomi tengono in vita template-home.php senza toccarlo: la home continua a funzionare esattamente come adesso. 3. Tutto il resto è scoperto SOLO sulle pagine che hanno la classe .cd-pagina sul body. Una pagina alla volta, reversibile togliendo la classe. 4. L'unica eccezione è la correzione dell'overflow orizzontale, che è un difetto e vale ovunque. NON TOCCA: tema padre, contenuto delle pagine, plugin, WooCommerce. ========================================================================= */ /* ------------------------------------------------------------------------- 1. I TOKEN ---------------------------------------------------------------------- */ :root{ /* superfici */ --fondo-notte-cupo:#061426; /* il gradino sotto la notte: serve ai gradienti che vanno dal cupo al notte, altrimenti si capovolgono */ --fondo-notte:#0A1F3C; --fondo-notte-alto:#10294B; --fondo-carta:#F6EFE0; --fondo-sabbia:#E6DCC5; --fondo-rosso:#C8322E; --fondo-agrume:#F0803C; /* inchiostri, uno per superficie */ --testo-notte:#F6EFE0; --testo-notte-corpo:#A8BACF; --testo-carta:#0A1F3C; --testo-carta-corpo:#45525F; --testo-rosso-corpo:#FCEFED; /* era #FBE7E4 — 4.47:1, sotto soglia */ --testo-rosso-etichetta:#FDF4F3; /* era #F6D6D2 — 3.91:1 a 12px */ --testo-agrume-corpo:#2B1304; /* accenti */ /* L'inchiostro rosso NON è il rosso di superficie: --fondo-rosso resta #C8322E perché come fondo funziona, ma come testo quel valore cade a 3,9:1 sulla sabbia. #B32D29 passa su entrambe le superfici chiare: 5,52:1 sulla carta e 4,63:1 sulla sabbia. */ --accento-rosso:#B32D29; /* era #C8322E */ --accento-agrume:#F0803C; /* superficie e messa a fuoco, MAI testo su carta */ /* velatura per il testo sopra le fotografie: nessun colore da solo rende leggibile un testo su un'immagine, serve un fondo */ --velatura-foto:rgba(10,31,60,.7); /* filetti */ --linea-su-rosso:#E0857F; --linea-su-carta:#DDD4C0; /* dischi d'identità dei gusti */ --gusto-gazzosa:#1F8C8C; --gusto-limonata:#D7A82B; --gusto-chinotto:#8A4B2A; --gusto-spuma:#C4622A; --gusto-sambusoda:#4C8FC4; --gusto-tonica:#2E5E9E; /* tipografia */ --font-display:Antonio,"Arial Narrow",sans-serif; --font-testo:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif; /* spaziatura */ --spazio-1:8px; --spazio-2:14px; --spazio-3:20px; --spazio-4:26px; --spazio-5:40px; --spazio-6:56px; --spazio-7:72px; --sezione-y:clamp(48px,6vw,84px); --sezione-x:clamp(20px,4vw,56px); /* raggi */ --raggio-0:0; --raggio-card:12px; --raggio-pillola:999px; /* ---- alias dei vecchi nomi: tengono viva la home senza modificarla ---- */ --navy:var(--fondo-notte); --navy2:var(--fondo-notte-alto); --navyfondo:var(--fondo-notte-cupo); --crema:var(--fondo-carta); --rosso:var(--fondo-rosso); --rosso2:var(--linea-su-rosso); --rosachiaro:var(--testo-rosso-corpo); --arancio:var(--accento-agrume); --sabbia:var(--fondo-sabbia); --grigio:var(--testo-carta-corpo); --azzurro:#7E96B5; --ghiaccio:var(--testo-notte-corpo); } /* ------------------------------------------------------------------------- 2. OVERFLOW ORIZZONTALE — rete di sicurezza, non correzione MISURATO il 9 ottobre 2026, prima di toccare qualunque cosa: su questa anteprima il difetto NON si riproduce. Home, Cucinotta, Chi siamo, Contatti e I nostri marchi a 320, 360 e 375px hanno tutte documentElement.scrollWidth uguale alla finestra, con e senza questo foglio. Il contenuto non esce dal bordo destro. Restano quindi solo le due righe che impediscono lo scorrimento orizzontale senza spostare niente: valgono ovunque perché sono inerti. Il blocco che aggiungeva padding sotto i 620px è stato tolto. Faceva due danni: - si sommava su due contenitori annidati (20+20px per lato) e sul catalogo i prodotti scendevano da 165 a 125px di larghezza; - essendo globale, cambiava anche le pagine FUORI elenco: su /diventa-rivenditore/ a 390px il 29,7% dei pixel e 96px di altezza in più. Contraddiceva la regola che niente cambia finché una pagina non entra nell elenco. Le pagine hanno già i loro margini: 20px e 43px su Cucinotta a 390px, misurati a sistema spento. Il padding li portava a 60 e 83. Quello che resta è limitato alle pagine convertite. ---------------------------------------------------------------------- */ html{overflow-x:hidden;} #qodef-page-outer,#qodef-page-inner,#qodef-page-content{overflow-x:clip;} @media (max-width:620px){ body.cd-pagina :is(img,video,iframe,table){max-width:100% !important;} body.cd-pagina :is(.qodef-grid,.qodef-content-grid){max-width:100% !important;} } /* ========================================================================= DA QUI IN POI: SOLO SULLE PAGINE CON LA CLASSE .cd-pagina SUL BODY Una pagina alla volta. Si toglie la classe e la pagina torna com'era. ========================================================================= */ /* ------------------------------------------------------------------------- 3. LA PAGINA ---------------------------------------------------------------------- */ body.cd-pagina{ background:var(--fondo-carta); font-family:var(--font-testo); color:var(--testo-carta-corpo); } /* la barra del titolo del tema lascia il posto alla testata */ body.cd-pagina .qodef-page-title{display:none !important;} /* Il contenuto non ha più la gabbia del tema: le fasce arrivano ai bordi. Il catalogo è escluso. WooCommerce disegna la griglia prodotti con gutter negativi e si aspetta un contenitore: tolta la gabbia, le schede sbordavano di 15px per lato e venivano tagliate dall'overflow. Lì la gabbia serve, e il sistema arriva lo stesso — palette e tipografia non dipendono da questa regola. */ body.cd-pagina:not(.woocommerce-page) #qodef-page-inner, body.cd-pagina:not(.woocommerce-page) #qodef-page-content{ padding-top:0 !important; padding-bottom:0 !important; max-width:none !important; width:100% !important; } /* sul catalogo resta solo il respiro verticale in meno */ body.cd-pagina.woocommerce-page #qodef-page-inner{ padding-top:0 !important; } /* ------------------------------------------------------------------------- 12. DUE COSE CHE VENGONO DA FUORI Non sono difetti del sistema: una è del tema padre, l'altra del plugin B2B. Nessuno dei due si può modificare, quindi si sovrascrivono da qui, con la specificità giusta. ---------------------------------------------------------------------- */ /* a) IL PULSANTE DEL MODULO CONTATTI Il fondo #94C4F7 è il colore di messa a fuoco del tema Mildhill, e arriva da main.min.css del tema PADRE — non da style.css e non dalle opzioni. Bianco su quell'azzurro dà 1,83:1: il pulsante principale della pagina contatti è illeggibile, e lo era anche prima di questo lavoro. Diventa il pulsante scuro del sistema: 14,4:1. .wpcf7-submit vale (0,1,0) e la regola del tema (0,2,0): con body.cd-pagina davanti si arriva a (0,3,1) e vince senza forzature sugli altri pulsanti del tema, che restano come sono. */ body.cd-pagina .wpcf7-submit, body.cd-pagina .wpcf7-submit:hover, body.cd-pagina .wpcf7-submit:focus{ background-color:var(--fondo-notte) !important; border-color:var(--fondo-notte) !important; color:var(--testo-notte) !important; } body.cd-pagina .wpcf7-submit:focus-visible{ outline:3px solid var(--accento-agrume) !important; outline-offset:3px !important; } /* b) IL PLUGIN B2B Due colori fuori soglia, entrambi del plugin cucinotta-b2b, che non si tocca. Si sovrascrivono i suoi token e le sue regole da qui. --b2b-horeca #C85C2B dava 4,18:1 sul bianco a 15px. Gli altri due livelli passano già — distributore #1D3557 a 12,36:1, export #2D6A4F a 6,39:1 — quindi si corregge solo questo, con l'inchiostro rosso del sistema: 6,32:1. Il livello resta distinguibile dagli altri due. Il grigio #777 delle descrizioni dava 4,48:1 a 12px, appena sotto. Passa all'inchiostro di corpo del sistema: 8,00:1. Queste tre regole sono le uniche del foglio legate a `body` e non a `body.cd-pagina`: il modulo B2B compare anche fuori dall'elenco — su /diventa-rivenditore/ e nella dashboard rivenditore — e lì il difetto era lo stesso. Il prefisso `body` serve, e non è decorativo: - sul TOKEN non è una questione di specificità. Il plugin dichiara su :root, che vale (0,1,0) contro (0,0,1) di body, quindi body perderebbe un confronto diretto. Ma non c'è confronto: :root colpisce e body colpisce , due elementi diversi. Vince perché sta più in basso nell'albero, e tutto ciò che è dentro il body eredita da lì. - sui COLORI invece la specificità conta, e il prefisso la tiene sopra quella del plugin a prescindere dall'ordine di caricamento: .cd-b2b-tier-card span (0,1,1) — plugin body :is(...) span (0,1,2) — questa .cd-b2b-empty (0,1,0) — plugin body .cd-b2b-empty (0,1,1) — questa Senza `body` saremmo pari al plugin e vincerebbe chi si carica per ultimo: oggi noi, perché siamo a priorità 100, ma per combinazione, non per regola. */ body{ --b2b-horeca:var(--accento-rosso); /* era #C85C2B */ } body :is( .cd-b2b-tier-card, .cd-b2b-type-option, .cd-b2b-dash-stat ) span{ color:var(--testo-carta-corpo) !important; /* era #777 */ } body .cd-b2b-empty{ color:var(--testo-carta-corpo) !important; } /* La pagina corrente nella paginazione usa l'azzurro del tema (#94C4F7): un colore fuori dal sistema, e illeggibile sulla carta — 1,6:1, era 1,83:1 sul bianco di prima. Sul chiaro l'accento del sistema è il rosso. */ body.cd-pagina .woocommerce-pagination .page-numbers.current{ color:var(--accento-rosso) !important; } body.cd-pagina h1, body.cd-pagina h2, body.cd-pagina h3, body.cd-pagina h4{ font-family:var(--font-display) !important; font-weight:500 !important; text-transform:uppercase !important; line-height:.95 !important; letter-spacing:.5px !important; margin:0 0 var(--spazio-3) !important; text-wrap:balance; } body.cd-pagina p{ font-size:clamp(16px,1.3vw,18px); line-height:1.65; max-width:65ch; } /* ------------------------------------------------------------------------- 3-bis. LA PALETTA DEL SITO, RIPORTATA AI VALORI DEL SISTEMA Le pagine interne non sono grezze: sono già costruite, e usano una loro serie di token (--cd-*) dichiarati su :root in style.css. I colori sfiorano quelli del sistema senza coincidere — #1b2f55 invece di #0A1F3C, #faf8f2 invece di #F6EFE0 — ed è questa la disomogeneità da togliere. Non si può farlo con una classe nuova sulle righe: style.css mette !important quasi ovunque (.cd-pillars-row{background:var(--cd-navy) !important}), e una classe aggiunta non vincerebbe mai. Si rimappano invece i token alla radice, e il colore giusto arriva dove già passava quello sbagliato. Sta su :root, non su body.cd-pagina: la paletta vale quindi su TUTTO il sito, comprese le pagine fuori elenco. È una scelta deliberata e ha un prezzo preciso, misurato prima di farla: il piè di pagina cambia anche su /diventa-rivenditore/ (4,7% dei pixel), /cart/ (6,3%) e /my-account/ (8,0%). In cambio il piè di pagina smette di essere di due colori diversi a seconda della pagina. L'intestazione non si muove: prende il colore dalle opzioni del tema, non da questi token. Conseguenza da ricordare: togliendo una pagina dall'elenco tornano indietro tipografia, gabbia e regole dei componenti, NON i colori. Per annullare anche quelli si toglie questo blocco. L'ORO NON È QUI. È l'unico token che non si rimappa, perché lo stesso valore fa tre mestieri — 32 usi come testo, 8 come fondo, 7 come bordo — e un token solo non può distinguerli. Si separa per uso, più sotto: come testo su chiaro diventa rosso, su navy resta oro, come fondo resta oro. NON si rimappano i colori degli altri tre marchi — --cd-acheo, --cd-berso, --cd-dv e i loro fondi: li identificano. Cucinotta sì, perché --cd-cucinotta era #1b2f55, cioè esattamente il vecchio navy: non un colore di marchio, il navy di prima sotto un altro nome. ---------------------------------------------------------------------- */ :root{ /* superfici scure */ --cd-navy: var(--fondo-notte); /* era #1b2f55 */ --cd-navy-mid: var(--fondo-notte-alto); /* era #2a4a84 */ --cd-navy-dark: var(--fondo-notte-cupo); /* era #0f1e36 */ /* superfici chiare */ --cd-warm: var(--fondo-carta); /* era #faf8f2 */ --cd-warm-mid: var(--fondo-sabbia); /* era #f2ede0 */ --cd-warm-deep: var(--fondo-sabbia); /* era #ede7d6 */ /* il sistema non ha un bianco puro: la sua superficie chiara è la carta. Verificato che tutti e 23 gli usi di --cd-white in style.css sono fondi e nessuno è colore di testo: nessun contrasto peggiora. */ --cd-white: var(--fondo-carta); /* era #ffffff */ /* inchiostri */ --cd-ink: var(--testo-carta); /* era #111827 */ --cd-muted: var(--testo-carta-corpo); /* era #6b7280 */ --cd-caption: var(--testo-carta-corpo); /* era #9ca3af: 2,6:1 su carta */ /* Cucinotta non ha un colore proprio come gli altri marchi: aveva il navy. Segue quindi il navy, e il suo fondo tenue (#eef2fa, un azzurrino fuori sistema) diventa la sabbia. */ --cd-cucinotta: var(--fondo-notte); /* era #1b2f55 */ --cd-cucinotta-bg: var(--fondo-sabbia); /* era #eef2fa */ } /* Un token solo per due superfici non basta: --cd-muted è l'inchiostro del corpo, giusto sul chiaro (#45525F, 7,4:1 sulla carta) e cieco sul navy, dove dava 2,06:1. Prima della rimappatura era #6b7280, cioè 2,80:1: insufficiente anche allora. Dentro le superfici scure il corpo prende l'inchiostro della notte. L'occhiello resta escluso perché la sua regola è più specifica. */ body.cd-pagina :is( .cd-pillars-row, .cd-panel--dark, .cd-chi-siamo-hero, .cd-shop-hero, .cd-home-hero, .cd-heritage-visual, .cd-storia-bg-navy, .cd-fascia--notte ):not(.cd-home-hero--brand) :is(p,li,td){ color:var(--testo-notte-corpo) !important; } /* .cd-home-hero--brand è la variante CHIARA di .cd-home-hero: stessa classe, fondo opposto. Va esclusa da tutte le regole del scuro, o il testo chiaro finisce su fondo chiaro (1,71:1, verificato su /brand/). Il suo gradiente è scritto a mano in style.css, con tre colori fuori dal sistema — #f3eee2, #eef2fa, #ffffff — e nessun token da rimappare: serve una riga esplicita per riportarlo sulle superfici del sistema. La carta sta dove sta il testo e la sabbia nell'angolo lontano, non il contrario: l'occhiello rosso dà 4,64:1 sulla carta ma solo 3,9:1 sulla sabbia, e il testo entra dall'angolo in alto a sinistra. */ body.cd-pagina .cd-home-hero--brand{ background:linear-gradient(135deg, var(--fondo-carta) 0%, var(--fondo-carta) 55%, var(--fondo-sabbia) 100%) !important; } /* ------------------------------------------------------------------------- 3-ter. LA TIPOGRAFIA DEL SITO, RIPORTATA AI DUE CARATTERI Stesso problema della paletta, ma peggiore: style.css scrive i nomi dei caratteri a mano, non in un token, e con !important — body, p, li, … font-family:'Inter','PT Sans',sans-serif !important h1…h6, .cd-stat strong, .cd-quote p, … 'Playfair Display' !important Non c'è niente da rimappare: servono override espliciti, uno per gruppo. I titoli h1-h4 già passavano ad Antonio perché body.cd-pagina h1 è più specifico di h1. Tutto il resto no: il corpo restava Inter e i numeri e i nomi restavano Playfair, con tre caratteri sulla stessa pagina. Anche qui: solo su body.cd-pagina, e nessun contenuto toccato. ---------------------------------------------------------------------- */ /* il corpo del testo */ body.cd-pagina, body.cd-pagina :is(p,li,td,th,label,input,textarea,select,button), body.cd-pagina .cd-quote p{ font-family:var(--font-testo) !important; } /* i titoli che il sistema non copriva */ body.cd-pagina :is(h5,h6){ font-family:var(--font-display) !important; } /* i pezzi che style.css manda a Playfair uno per uno: numeri, nomi, titoli di scheda. Sono display, e il display è Antonio. */ body.cd-pagina :is( .cd-stat strong, .cd-stat-block__num, .cd-hero-meta-item strong, .cd-hero-photo-stat strong, .cd-b2b-benefit strong, .cd-pillar h3, .cd-sibega-badge__name, .cd-cat-desc-title, .cd-iconic-card__name, .cd-brand-card__name, .cd-icone-section h2, #qodef-page-footer h3, #qodef-page-footer .widget-title ){ font-family:var(--font-display) !important; } /* Il catalogo va trattato a parte: WooCommerce usa selettori più specifici dei miei — #qodef-woo-page .price vale (1,1,0) e .qodef-woo-product-list .qodef-woo-product-title vale (0,2,0) — e senza queste righe la griglia prodotti resterebbe l unica zona con Playfair sui nomi e Inter sui prezzi. Il nome del prodotto NON diventa maiuscolo: è un dato, non un titolo di sezione, e in maiuscolo condensato si leggerebbe peggio. */ body.cd-pagina .qodef-woo-product-list .qodef-woo-product-title, body.cd-pagina .qodef-woo-product-title{ font-family:var(--font-display) !important; } body.cd-pagina #qodef-woo-page .price, body.cd-pagina .price, body.cd-pagina .cd-price-request, body.cd-pagina .woocommerce-result-count, body.cd-pagina .woocommerce-ordering select, body.cd-pagina .page-numbers, body.cd-pagina #qodef-woo-page .qodef-woo-buttons-holder .button, body.cd-pagina a.button{ font-family:var(--font-testo) !important; } /* la navigazione dell intestazione resta com è: è la stessa su tutto il sito, e cambiarla solo su alcune pagine la farebbe ballare da una pagina all altra. */ /* ------------------------------------------------------------------------- 4. LA FASCIA — l'unità di costruzione ---------------------------------------------------------------------- */ .cd-fascia{ width:100vw;max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:var(--sezione-y) var(--sezione-x); border-radius:var(--raggio-0); } /* il contenuto dentro la fascia resta leggibile */ .cd-fascia__dentro{max-width:1180px;margin:0 auto;} .cd-fascia--notte{background:var(--fondo-notte);color:var(--testo-notte-corpo);} .cd-fascia--carta{background:var(--fondo-carta);color:var(--testo-carta-corpo);} .cd-fascia--sabbia{background:var(--fondo-sabbia);color:var(--testo-carta-corpo);} .cd-fascia--rossa{background:var(--fondo-rosso);color:var(--testo-rosso-corpo);} .cd-fascia--agrume{background:var(--fondo-agrume);color:var(--testo-agrume-corpo);} /* i titoli prendono il colore dalla superficie */ .cd-fascia--notte :is(h1,h2,h3,h4){color:var(--testo-notte) !important;} .cd-fascia--carta :is(h1,h2,h3,h4), .cd-fascia--sabbia :is(h1,h2,h3,h4){color:var(--testo-carta) !important;} .cd-fascia--rossa :is(h1,h2,h3,h4){color:var(--testo-notte) !important;} .cd-fascia--agrume :is(h1,h2,h3,h4){color:var(--testo-carta) !important;} .cd-fascia--notte p{color:var(--testo-notte-corpo);} .cd-fascia--carta p, .cd-fascia--sabbia p{color:var(--testo-carta-corpo);} .cd-fascia--rossa p{color:var(--testo-rosso-corpo);} .cd-fascia--agrume p{color:var(--testo-agrume-corpo);} /* due fasce chiare di fila vogliono un filetto */ .cd-fascia--carta + .cd-fascia--carta{border-top:1px solid var(--linea-su-carta);} /* ------------------------------------------------------------------------- 5. LA TESTATA DI PAGINA ---------------------------------------------------------------------- */ .cd-testata{ position:relative;overflow:hidden; background:var(--fondo-notte); width:100vw;max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:clamp(40px,5vw,56px) var(--sezione-x) clamp(44px,5.5vw,60px); } .cd-testata__arco{ position:absolute;left:50%;transform:translateX(-50%);bottom:-62%; width:130%;padding-top:58%; background:var(--fondo-notte-alto); border-radius:50%; pointer-events:none; } .cd-testata__dentro{position:relative;z-index:2;max-width:1180px;margin:0 auto;} .cd-testata h1{ font-size:clamp(38px,5vw,58px) !important; color:var(--testo-notte) !important; margin:0 !important; } .cd-testata p{ color:var(--testo-notte-corpo); font-size:clamp(16px,1.3vw,17px); margin:var(--spazio-3) 0 0; max-width:52ch; } .cd-briciole{ position:relative;z-index:2;max-width:1180px;margin:var(--spazio-4) auto 0; font-size:12px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase; color:var(--testo-notte-corpo); } .cd-briciole a{color:var(--testo-notte-corpo);text-decoration:none;} .cd-briciole a:hover{color:var(--testo-notte);} .cd-briciole .cd-sep{color:var(--accento-agrume);margin:0 var(--spazio-1);} /* ------------------------------------------------------------------------- 6. L'OCCHIELLO ---------------------------------------------------------------------- */ .cd-occhiello{ display:block; font-family:var(--font-testo); font-size:13px;font-weight:600; letter-spacing:5px;text-transform:uppercase; margin-bottom:var(--spazio-3); } /* il colore dipende dalla superficie: mai arancio su carta (2.33:1) */ .cd-fascia--notte .cd-occhiello, .cd-testata .cd-occhiello{color:var(--accento-agrume);} .cd-fascia--carta .cd-occhiello, .cd-fascia--sabbia .cd-occhiello{color:var(--accento-rosso);} .cd-fascia--rossa .cd-occhiello{color:var(--testo-notte);} .cd-fascia--agrume .cd-occhiello{color:var(--testo-carta);} /* L'ORO, SEPARATO PER USO --cd-gold è un token solo che fa tre mestieri: inchiostro, fondo e bordo. Rimapparlo li avrebbe trascinati tutti insieme, ed è per questo che non è nel blocco qui sopra. Si separa qui. Come FONDO e come BORDO resta oro: non serve nessuna regola, basta non averlo rimappato. Come INCHIOSTRO dipende dalla superficie. Sul chiaro l'oro dà 2,02:1 e l'agrume 2,33:1: illeggibili entrambi. Va in rosso — 5,52:1 sulla carta e 4,63:1 sulla sabbia con il nuovo #B32D29. Sul navy l'oro si legge benissimo (7,34:1) ed è l'accento storico del sito: lì resta oro. L'elenco dei contenitori scuri è quello di style.css: le sezioni che dichiarano background:var(--cd-navy). */ body.cd-pagina .cd-eyebrow{color:var(--accento-rosso) !important;} body.cd-pagina :is( .cd-pillars-row, .cd-panel--dark, .cd-chi-siamo-hero, .cd-shop-hero, .cd-home-hero, .cd-heritage-visual, .cd-storia-bg-navy, .cd-fascia--notte ):not(.cd-home-hero--brand) .cd-eyebrow{color:var(--cd-gold) !important;} body.cd-pagina .cd-fascia--rossa .cd-eyebrow{color:var(--testo-notte) !important;} /* L'occhiello non è l'unico testo che prendeva l'oro. Questo è l'elenco completo delle regole `color:var(--cd-gold)` di style.css che cadono su superficie chiara — ricavato leggendo il foglio, non a occhio. Sono tutte sotto soglia con l'agrume (2,33:1 su carta) e lo erano anche con l'oro di prima (2,02:1): qui il sistema non peggiora niente, mette in regola qualcosa che era già fuori. Restano fuori i numeri grandi — .cd-stat strong, .cd-stat-block__num, .cd-hero-meta-item strong — perché su quelli il colore arriva quasi sempre da una regola di marchio più specifica, e non va scavalcato. */ body.cd-pagina :is( .cd-list li::before, .cd-contact-item strong, .cd-iconic-card__sub, .cd-origini-sambusoda__info strong, .cd-origini-split__caption, .cd-prod-subtitle, .cd-sibega-badge__year, .cd-timeline-year ){ color:var(--accento-rosso) !important; } /* LA DIDASCALIA SOPRA LA FOTOGRAFIA Caso a parte, e l'unico che il colore da solo non risolve: il testo sta sopra un'immagine, e l'immagine cambia da un punto all'altro. Qualunque inchiostro, chiaro o scuro, da qualche parte sparisce. La velatura esisteva già — rgba(15,30,54,0.88) che sale a 0,4 al 55% — ma si schiariva troppo presto, e l'occhiello finiva nella zona debole. Qui la sostituisce una velatura che tiene più a lungo: 0,82 in basso, ancora 0,70 a tre quarti di altezza, trasparente solo in cima. Il testo sta nella parte bassa, dove la velatura è piena, e prende l inchiostro della notte. La tappa centrale è al 75% e non al 45% perché l occhiello sta in CIMA alla didascalia: al 45% la velatura lì era già scesa a 0,33 e il rapporto peggiore scendeva a 3,49:1. .cd-photo-banner__tag è fuori dall'elenco del rosso qui sopra proprio per questo: non è su una superficie chiara, è su una velatura scura. */ body.cd-pagina .cd-photo-banner__overlay{ background:linear-gradient(to top, rgba(10,31,60,.82) 0%, var(--velatura-foto) 75%, rgba(10,31,60,0) 100%) !important; } body.cd-pagina .cd-photo-banner__tag, body.cd-pagina .cd-photo-banner__text{ color:var(--testo-notte) !important; } /* IL COLORE DI MARCHIO SOLO PER IL LOGO I quattro marchi hanno un colore proprio, e style.css lo usa in due modi diversi: come identità — barra in cima alla scheda, testata della card, fondo del pulsante, tinta tenue — e come inchiostro, per il titolo, i numeri e la tagline delle pagine marchio. Come identità resta. Come inchiostro no: è lì che il rosso Dolce Vita #C44C2A cadeva a 4,15:1 sulla carta, sotto soglia in tre punti. Il testo prende l'inchiostro del sistema; il marchio continua a riconoscersi dal logo, dalla barra e dal pulsante, che non cambiano. Restano fuori .cd-riv-notice--active e .cd-riv-badge: lì il verde non è il marchio Acheo ma lo stato «rivenditore attivo», e a 5,61:1 si legge. */ body.cd-pagina :is(.cd-brand-hero,.cd-cat-card) :is( h1, .cd-stat strong, .cd-cat-card__tagline ){ color:var(--testo-carta) !important; } /* e sullo scuro tornano oro, come l'occhiello */ body.cd-pagina :is( .cd-pillars-row, .cd-panel--dark, .cd-chi-siamo-hero, .cd-shop-hero, .cd-home-hero, .cd-heritage-visual, .cd-storia-bg-navy, .cd-fascia--notte ):not(.cd-home-hero--brand) :is( .cd-list li::before, .cd-contact-item strong, .cd-iconic-card__sub, .cd-origini-sambusoda__info strong, .cd-origini-split__caption, .cd-prod-subtitle, .cd-sibega-badge__year, .cd-timeline-year ){ color:var(--cd-gold) !important; } /* ------------------------------------------------------------------------- 7. IL PULSANTE Le regole sono legate a body.cd-pagina perché .cd-btn esiste già nel sito, definito in style.css: senza il vincolo cambierebbe aspetto anche sulle pagine fuori elenco, e invece niente deve cambiare finché una pagina non entra nell'elenco. ---------------------------------------------------------------------- */ body.cd-pagina .cd-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:0 38px; border-radius:var(--raggio-pillola);border:0;cursor:pointer; font-family:var(--font-testo); font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase; text-decoration:none; transition:transform .15s ease; } body.cd-pagina .cd-btn:hover{transform:translateY(-2px);} body.cd-pagina .cd-btn:focus-visible{outline:3px solid var(--accento-agrume);outline-offset:3px;} body.cd-pagina .cd-btn--scuro{background:var(--fondo-notte);color:var(--testo-notte);} body.cd-pagina .cd-btn--chiaro{background:var(--fondo-carta);color:var(--testo-carta);} body.cd-pagina .cd-btn--contorno{background:transparent;border:2px solid currentColor;color:var(--testo-notte);} body.cd-pagina .cd-fascia--agrume .cd-btn--contorno{color:var(--testo-carta);} @media (prefers-reduced-motion:reduce){ body.cd-pagina .cd-btn{transition:none;} body.cd-pagina .cd-btn:hover{transform:none;} } /* ------------------------------------------------------------------------- 8. CARD MARCHIO — la gerarchia sta nella griglia ---------------------------------------------------------------------- */ .cd-marchi{ display:grid;grid-template-columns:1.4fr 1fr 1fr; gap:var(--spazio-3); } .cd-card{ background:var(--fondo-sabbia); border-radius:var(--raggio-card); padding:var(--spazio-4) var(--spazio-4); display:flex;flex-direction:column;gap:var(--spazio-2); min-height:220px; } .cd-card--esclusivo{background:var(--fondo-notte);} .cd-card :is(h2,h3){font-size:clamp(24px,2.2vw,30px) !important;color:var(--testo-carta) !important;} .cd-card--esclusivo :is(h2,h3){color:var(--testo-notte) !important;} .cd-card p{color:var(--testo-carta-corpo);font-size:14px;line-height:1.55;margin:0;} .cd-card--esclusivo p{color:var(--testo-notte-corpo);} .cd-card .cd-occhiello{color:var(--accento-rosso);font-size:12px;letter-spacing:4px;margin-bottom:0;} .cd-card--esclusivo .cd-occhiello{color:var(--accento-agrume);} .cd-card__vai{ margin-top:auto; font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase; color:var(--accento-rosso);text-decoration:none; } .cd-card--esclusivo .cd-card__vai{color:var(--accento-agrume);} /* ------------------------------------------------------------------------- 9. LISTA DATI ---------------------------------------------------------------------- */ .cd-dati{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--spazio-4) var(--spazio-5); } .cd-dati li{ display:flex;flex-direction:column;gap:var(--spazio-1); padding-top:18px;border-top:1px solid var(--linea-su-carta); } .cd-fascia--rossa .cd-dati li{border-top-color:var(--linea-su-rosso);} .cd-dati strong{ font-family:var(--font-display);font-weight:500; font-size:clamp(30px,3.2vw,40px);line-height:1; color:var(--testo-carta); } .cd-fascia--notte .cd-dati strong, .cd-fascia--rossa .cd-dati strong{color:var(--testo-notte);} .cd-dati span{ font-size:12px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase; color:var(--testo-carta-corpo); } .cd-fascia--notte .cd-dati span{color:var(--testo-notte-corpo);} .cd-fascia--rossa .cd-dati span{color:var(--testo-rosso-etichetta);} /* ------------------------------------------------------------------------- 10. GRIGLIA GUSTI ---------------------------------------------------------------------- */ .cd-gusti{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(16px,2vw,20px); } .cd-gusti a{display:flex;flex-direction:column;align-items:center;gap:var(--spazio-2);text-decoration:none;} .cd-gusti a:focus-visible{outline:3px solid var(--accento-agrume);outline-offset:6px;border-radius:var(--raggio-card);} .cd-gusto__figura{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;} .cd-gusto__disco{ position:absolute;bottom:26px; width:clamp(106px,12vw,168px);aspect-ratio:1; border-radius:var(--raggio-pillola); } .cd-gusti img{ position:relative; height:clamp(180px,20vw,280px) !important;width:auto !important; transition:transform .2s ease; } .cd-gusti a:hover img{transform:translateY(-8px);} .cd-gusto__nome{ font-family:var(--font-display);font-weight:500; font-size:clamp(22px,2vw,26px);text-transform:uppercase;text-align:center; color:var(--testo-notte); } .cd-gusto__nota{font-size:14px;text-align:center;color:var(--testo-notte-corpo);} @media (prefers-reduced-motion:reduce){ .cd-gusti img{transition:none;} .cd-gusti a:hover img{transform:none;} } /* ------------------------------------------------------------------------- 11. ADATTAMENTI ---------------------------------------------------------------------- */ @media (max-width:900px){ .cd-marchi{grid-template-columns:1fr;} .cd-gusti{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:620px){ .cd-dati{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spazio-3) var(--spazio-2);} .cd-gusti{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spazio-4) var(--spazio-2);} .cd-gusto__nota{display:none;} body.cd-pagina .cd-btn{width:100%;padding:0 24px;} .cd-testata h1{font-size:clamp(32px,8vw,40px) !important;} } /* ------------------------------------------------------------------------- CRONOLOGIA — sezione nuova di Chi siamo (pagina 16), 10 novembre 2026 Il markup è un [vc_raw_html] dentro la pagina: una
    vera, perché sette date in ordine SONO un elenco ordinato, e chi usa uno screen reader sente "elenco di 7 voci" invece di una sequenza di righe. list-style:none toglie il pallino, e in Safari questo toglie anche le semantiche di lista: per questo la
      porta role="list", che le rimette. Non è ridondanza inutile, è il rimedio noto a quel difetto. Colori misurati sul fondo notte #0A1F3C: anno --accento-agrume #F0803C 6,17:1 passa AA testo --testo-notte-corpo #A8BACF 8,31:1 passa AA Il filetto fra le voci sta sotto soglia, ma è decorativo: l'ordine si legge dagli anni, non dalla linea, quindi non porta informazione. ------------------------------------------------------------------------- */ .cd-cronologia-fascia{background:var(--fondo-notte) !important;} .cd-cronologia-fascia .wpb_raw_code, .cd-cronologia-fascia .wpb_wrapper{margin:0 !important;} .cd-cronologia{ --filetto-notte:rgba(246,239,224,.22); max-width:1000px; margin:0 auto; } .cd-cronologia__elenco{ list-style:none; margin:0; padding:0; } .cd-cronologia__voce{ display:grid; grid-template-columns:minmax(0,clamp(120px,15vw,180px)) 1fr; gap:var(--spazio-3) var(--spazio-5); align-items:baseline; padding:var(--spazio-4) 0; border-top:1px solid var(--filetto-notte); } .cd-cronologia__voce:first-child{border-top:0;padding-top:0;} .cd-cronologia__voce:last-child{padding-bottom:0;} .cd-cronologia__anno{ font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4.4vw,56px); line-height:.95; color:var(--accento-agrume); } /* "Oltre 70 anni fa" e "Oggi" sono parole, non cifre: alla misura degli anni la prima andava a capo tre volte e la colonna si sfondava. */ .cd-cronologia__anno--lungo{ font-size:clamp(20px,2.1vw,26px); line-height:1.15; } .cd-cronologia__fatto{ font-family:var(--font-testo); font-weight:400; font-size:clamp(15px,1.5vw,18px); line-height:1.5; color:var(--testo-notte-corpo); } /* Sul telefono la colonna dell'anno non ha più larghezza utile: le due parti si impilano e l'anno fa da intestazione della voce. */ @media (max-width:600px){ .cd-cronologia__voce{ grid-template-columns:1fr; gap:var(--spazio-1); padding:var(--spazio-3) 0; } .cd-cronologia__anno{font-size:clamp(28px,9vw,38px);} .cd-cronologia__anno--lungo{font-size:clamp(19px,5.5vw,23px);} } /* ------------------------------------------------------------------------- CRONOLOGIA — titolo, 10 novembre 2026 Il selettore è lungo apposta. La fascia porta anche .cd-storia-section, e style.css dichiara ".cd-storia-section h2 { color: var(--cd-navy) !important }": navy scuro sopra il fondo notte, cioè un titolo invisibile. Quella regola pesa (0,1,1); questa pesa (0,2,1) e quindi vince davvero, invece di affidarsi all'ordine di caricamento dei due fogli. --testo-notte su --fondo-notte è 14,4:1. ------------------------------------------------------------------------- */ .cd-cronologia h2.cd-cronologia__titolo{ font-family:var(--font-display) !important; font-weight:500 !important; font-size:clamp(28px,3.4vw,44px) !important; line-height:1.05 !important; color:var(--testo-notte) !important; margin:0 0 var(--spazio-5) !important; text-transform:none !important; } /* ------------------------------------------------------------------------- TESTATA DI CHI SIAMO — i margini negativi di serie Le altre fasce della pagina azzerano i margini tramite .cd-storia-section; la testata ha una classe diversa e si teneva i -15px di WPBakery, per cui a 390px il suo contenitore di colonna era largo 420. Il testo restava dentro e la pagina non scorreva di lato, ma la colonna sporgeva. ------------------------------------------------------------------------- */ .cd-chi-siamo-hero{margin:0 !important;}