/** * L'header di Kreita. Caricato su TUTTE le pagine. * * PERCHE' STA IN UN FILE A PARTE * Queste regole vivevano in home.css, che si carica solo sulle cinque pagine * rifatte: sul resto del sito restava l'header nero di Ohio e passando da una * pagina all'altra l'intestazione cambiava aspetto di colpo. Non era uno * scostamento di pixel - le altezze sono 108px ovunque, misurate - ma un * cambio di vestito, che a occhio e' anche peggio. * * DUE APERTURE * .k-testa la pagina apre SCURO (c'e' lo slider dietro): l'header * parte trasparente e diventa una barra bianca scorrendo. * .k-testa-chiara la pagina apre CHIARO: la barra c'e' da subito, perche' * Ohio parte con le voci bianche e su fondo chiaro * sparirebbero (1,06:1). * Quale delle due la decide functions.php guardando se la pagina contiene * uno slider. */ /* Le variabili stavano in .k-home, che c'e' solo sulle pagine rifatte: qui servono ovunque, altrimenti sul resto del sito var(--ink) non esiste e le regole sotto non colorano niente. */ .k-testa{ --ink:#131C2E; --muted:#4A5568; --display:"Space Grotesk",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif; } /* -------------------------------------------------------------------------- HEADER APPICCICATO Scorrendo, Ohio rende bianca la barra ma lascia il menu bianco: le voci spariscono. Qui il testo torna scuro quando la barra e' bianca. -------------------------------------------------------------------------- */ .k-testa #masthead.-sticky .main-menu-link, .k-testa #masthead.-sticky .menu > li > a, .k-testa #masthead.-sticky .menu-item > a{ color: var(--ink) !important; } .k-testa #masthead.-sticky .menu-chevron, .k-testa #masthead.-sticky .has-submenu-icon::after{ border-color: var(--ink) !important; color: var(--ink) !important; } .k-testa #masthead.-sticky .hamburger span, .k-testa #masthead.-sticky .hamburger-inner, .k-testa #masthead.-sticky .hamburger-inner::before, .k-testa #masthead.-sticky .hamburger-inner::after{ background: var(--ink) !important; } /* i sottomenu restano scuri con testo chiaro: quelli vanno bene cosi' ⚠️⚠️ MA NON LA PASTIGLIA «Vai all'area» — ed e' QUESTA la causa vera del tasto vuoto, misurata il 4/9/2026 (le tre spiegazioni precedenti — il carattere, la transizione, la variabile mancante — erano tutte sbagliate). Questo selettore vale **(1,3,1)**: un id, tre classi e un tipo. La regola della pastiglia, seicento righe piu' sotto, vale **(1,3,0)**. Un tipo in piu' basta a batterla, quindi appena la barra si appiccica il testo del tasto diventa bianco — e in cinque aree su sei il fondo della pastiglia E' GIA' bianco (`--atesto:#FFFFFF`), percio' la scritta sparisce. Misurato sulla pagina vera: con `-sticky` addosso, contrasto **1,00** su Web, Assistenza informatica, Software, Stampa e gadget, Foto e video; Grafica e branding si salvava per caso (fondo navy) e Prodotti perche' allora `.-spettro` gli cablava i colori a mano. Ecco perche' sembrava capitare «ogni tanto»: capitava sempre, ma solo dopo aver scrollato e solo su cinque pannelli su sette. ⚠️ Il rimedio e' escludere la pastiglia da qui, com'e' gia' fatto piu' sotto per il filetto (`a:not(.k-sub-area__go)::before`), e non alzare la specificita' della pastiglia: quella strada porta a rincorrersi. */ .k-testa #masthead.-sticky .sub-menu a:not(.k-sub-area__go){ color: #fff !important; } /* Pagine che aprono chiare (il portfolio): Ohio parte comunque col menu BIANCO perche' si aspetta un'apertura scura come lo slider della home. Qui non c'e' niente di scuro dietro: bianco su #F3F5F6 fa 1,06:1, cioe' il menu sparisce del tutto. Le voci vanno scure da subito, non solo quando la barra si appiccica. */ .k-testa-chiara #masthead .main-menu-link, .k-testa-chiara #masthead .menu > li > a, .k-testa-chiara #masthead .menu-item > a{ color: var(--ink) !important; } .k-testa-chiara #masthead .menu-chevron, .k-testa-chiara #masthead .has-submenu-icon::after{ border-color: var(--ink) !important; color: var(--ink) !important; } .k-testa-chiara #masthead .hamburger span, .k-testa-chiara #masthead .hamburger-inner, .k-testa-chiara #masthead .hamburger-inner::before, .k-testa-chiara #masthead .hamburger-inner::after{ background: var(--ink) !important; } .k-testa-chiara #masthead .hamburger.icon-button, .k-testa-chiara #masthead .hamburger.icon-button i{ color: var(--ink) !important; } .k-testa-chiara #masthead .hamburger.icon-button{ background: rgba(19,28,46,.06) !important; } .k-testa-chiara #masthead .sub-menu a{ color: #fff !important; } /* -------------------------------------------------------------------------- Il rettangolo nero dietro la barra dell'header. Ohio disegna DUE livelli: .header-wrap (nero) e sopra .header-wrap-inner (la barra bianca arrotondata). Il nero sbordava ai lati e sopra, e attorno all'hamburger sembrava un riquadro scuro. -------------------------------------------------------------------------- */ .k-testa #masthead .header-wrap{ background: transparent !important; } /* LA BARRA APPICCICATA: una sola barra bianca arrotondata. Ohio la disegna solo per header-8 (`.header.header-8.-sticky .header-wrap-inner`), ma la home usa header-3: li' resta solo un riquadro grigio attorno al menu e il logo galleggia fuori. La definisco qui in modo esplicito, cosi' non dipende dalle opzioni globali del tema - che si perdono svuotando la sua cache. */ .k-testa #masthead.-sticky .header-wrap, .k-testa-chiara #masthead.-sticky .header-wrap{ background:#fff !important; border-radius:16px; box-shadow:0 12px 34px -20px rgba(19,28,46,.5), 0 1px 2px rgba(19,28,46,.05); margin-inline:20px} /* UNA SOLA BARRA, non tre. Misurati, i livelli dipinti erano tre uno sopra l'altro: 1. header.header-3 bianco a tutta larghezza 1440x81 2. .header-wrap la barra arrotondata 1400x81 3. ul.menu riquadro grigio del menu 1116x44 Restano solo la 2. La 1 e la 3 vanno spente qui e non nel tema: altrove quel riquadro attorno al menu e' una scelta di Ohio che vale ancora. */ .k-testa #masthead, .k-testa-chiara #masthead{background:transparent !important} .k-testa #masthead ul.menu:not(.sub-menu), .k-testa-chiara #masthead ul.menu:not(.sub-menu){ background:transparent !important; box-shadow:none !important} .k-testa #masthead .header-wrap-inner, .k-testa-chiara #masthead .header-wrap-inner{ background:transparent !important; box-shadow:none !important} /* ⚠️⚠️ L'HAMBURGER SULLA BARRA APPICCICATA: BIANCO, NON SCURO — 11/9/2026, utente: «in sticky non si vede hamburger», con la foto della barra scorsa. Qui c'era «cerchio appena accennato e righe scure sulla barra bianca»: righe `var(--ink)` e cerchio `rgba(19,28,46,.06)`. Ma la barra appiccicata non è più bianca — sotto, nel blocco «LA BARRA SCURA», è navy `rgba(19,28,46,.94)` — e quel blocco rimette il panino bianco con `.k-testa #masthead .hamburger.icon-button`: UN id e TRE classi. Queste regole ne avevano QUATTRO (`.-sticky` in più), quindi vincevano anche stando più su: appena la barra si appiccicava il panino diventava navy su navy. Misurato: righe `rgb(19,28,46)` su fondo `rgba(19,28,46,.94)`, cioè contrasto 1:1. È lo stesso guasto dei numerini corretto il 9/9 (vedi più sotto): regole scritte per la barra bianca, rimaste dopo che la barra è diventata navy. Adesso stessi valori della barra ferma, con la stessa specificità di prima, così vincono qui come vincevano le vecchie. ⚠️ L'icona è ``: le righe le disegna il tema con `currentColor`, quindi basta il colore — `background-color` la riempiva. */ .k-testa #masthead.-sticky .hamburger.icon-button, .k-testa-chiara #masthead.-sticky .hamburger.icon-button{ background: rgba(255,255,255,.10) !important; } .k-testa #masthead.-sticky .hamburger.icon-button:hover, .k-testa-chiara #masthead.-sticky .hamburger.icon-button:hover{ background: rgba(255,255,255,.18) !important; } .k-testa #masthead.-sticky .hamburger.icon-button, .k-testa #masthead.-sticky .hamburger.icon-button i, .k-testa-chiara #masthead.-sticky .hamburger.icon-button, .k-testa-chiara #masthead.-sticky .hamburger.icon-button i{ color: #fff !important; } /* il riquadro grigio attorno al solo menu: la barra bianca e' gia' il contenitore, il doppio riquadro si vedeva come una macchia */ .k-testa #masthead.-sticky .menu-holder, .k-testa #masthead.-sticky .-with-contained-menu .menu-holder, .k-testa-chiara #masthead.-sticky .menu-holder{background:transparent!important} /* -------------------------------------------------------------------------- MENU DI NAVIGAZIONE: numeri e passaggio del mouse nei colori delle aree Stessa regola di marca del resto del sito: ogni area tiene il SUO colore. Il numerino lo disegna Ohio con un contatore CSS (.nav.with-counters .nav-item > a > span::before), quindi si colora da li'. Due tavolozze, e non e' un vezzo: sopra lo slider scuro valgono i colori pieni, sulla barra bianca no (giallo 3,59 · rosso 4,47 su chiaro) e servono le varianti scurite. Le ultime due voci non sono aree: restano neutre. -------------------------------------------------------------------------- */ /* ⚠️ `--c` e' il colore SCELTO dell'area, `--cl` la sua tinta per stare sul navy quando il pieno non si legge. Sono la stessa tavolozza di `aree.php` (colonne [0] e [6]): se si cambia qui, si cambia anche li'. ⚠️⚠️ La striscia in cima ai pannelli usa `--c` E NON `--cl` — vedi la nota sul `border-top` del sottomenu: quella deve essere il colore scelto. */ .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(1){--c:#F5A623;--cd:#976615;--cl:#F5A623} .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(2){--c:#0F766E;--cd:#0F766E;--cl:#2DD4BF} .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(3){--c:#D03923;--cd:#CB3722;--cl:#FF4D38} .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(4){--c:#C23A8E;--cd:#BE388B;--cl:#EE7FC4} .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(5){--c:#3763A6;--cd:#3763A6;--cl:#7FA8E0} .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(6){--c:#6D28D9;--cd:#6D28D9;--cl:#A78BFA} /* ⚠️ La settima voce e' PRODOTTI, e fino al 4/9/2026 restava bianca: il numerino, il filetto e le icone del pannello non avevano colore mentre la pagina `/prodotti/` apriva a colore. Segnalato dall'utente — «prodotti invece multicolor in alto, dentro verde» — ed era vero. ⚠️⚠️ I TRE VALORI DEVONO SEGUIRE `KREITA_FUORI_AREA['prodotti']`, sempre. Il 4/9 quell'area e' passata dal verde al PETROLIO SCURO e questa riga e' rimasta indietro per qualche minuto: la pagina era petrolio e il numerino nel menu ancora verde. Per non ripetere l'inciampo il valore viene ora riscritto anche da `mu-plugins/kreita-testa-clic.php`, che lo LEGGE dalla tabella invece di ricopiarlo: se un domani il colore cambia di nuovo, il menu segue da solo e questa riga e' solo la copia di riserva. Le ultime due (Lavori, Contatti) non sono aree e restano neutre. */ .k-testa #masthead ul.menu:not(.sub-menu) > li:nth-child(7){--c:#3B2A20;--cd:#2E2119;--cl:#D3C3B4} .k-testa #masthead ul.menu:not(.sub-menu) > li{--c:rgba(255,255,255,.6);--cd:#4A5568;--cl:rgba(255,255,255,.9)} /* sopra lo slider scuro: colori pieni */ .k-testa #masthead ul.menu:not(.sub-menu) > li > a > span::before{ color:var(--c)!important;transition:color .2s} .k-testa #masthead ul.menu:not(.sub-menu) > li > a{transition:color .2s} .k-testa #masthead ul.menu:not(.sub-menu) > li > a:hover{color:var(--c)!important} .k-testa #masthead ul.menu:not(.sub-menu) > li > a:hover .menu-chevron, .k-testa #masthead ul.menu:not(.sub-menu) > li > a:hover .has-submenu-icon{ color:var(--c)!important} /* ⚠️⚠️ ANCHE DA FERMA LA BARRA E' NAVY, E QUI I NUMERI RESTAVANO SCURI — 9/9/2026. Qui sopra la correzione gemella aveva sistemato la barra APPICCICATA; la stessa cosa capitava pero' a pagina ferma, su ogni pagina che apre chiara. Segnalato dall'utente con la foto del pannello «Prodotti»: «sistema hover di prodotti, non si vede nemmeno numero». Questo blocco diceva «la barra e' trasparente su fondo chiaro, li' servono le varianti scurite». Non e' piu' vero: la barra bianca non esiste piu'. Misurato su nove tipi di pagina — copertina, area, servizio, contatti, prodotti, elenco lavori, scheda lavoro, chi siamo, 730 — il fondo e' sempre `rgba(19,28,46,.94)`, mai chiaro. Le tinte scurite ci finivano sopra cosi': Foto e video 2,40 · Stampa e gadget 2,84 · Web 3,11 · Assistenza 3,33 · Software 3,35 · Grafica 3,43 · **Prodotti 1,09**, cioe' invisibile. Prodotti era di nuovo il peggiore perche' il suo scurito e' il caffe' quasi nero `#2E2119`. Le sei aree si vedevano male, Prodotti non si vedeva. ⚠️ Non si notava dappertutto: sulle pagine con `k-apre-colore` (copertina, aree, /prodotti/) una regola piu' sotto rimetteva gia' `--cl`. Il guasto stava sulle ALTRE — servizi, contatti, elenco e schede lavoro, chi siamo. ⚠️ Se un domani la barra torna chiara da qualche parte, e' QUI che vanno rimesse le varianti scurite: `--cd` e' ancora nella tavolozza, non e' stato tolto niente. */ .k-testa-chiara #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a > span::before{color:var(--cl)!important} .k-testa-chiara #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a:hover{color:var(--cl)!important} .k-testa-chiara #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a:hover .menu-chevron{ color:var(--cl)!important;border-color:var(--cl)!important} /* ⚠️⚠️ LA BARRA APPICCICATA NON E' PIU' BIANCA, E I NUMERI ERANO RIMASTI INDIETRO — 9/9/2026. Segnalato dall'utente: «numero non si vede», con la foto di «Prodotti». Vero, e non solo lì. Qui sopra c'e' ancora la vecchia regola che dipinge di bianco `.-sticky .header-wrap`, e sotto quella nuova che lo fa **navy**: vince la seconda, la barra e' scura, ma i numeri continuavano a prendere `--cd`, cioe' le tinte scurite fatte apposta per il bianco. Misurato sulla barra vera (`rgba(19,28,46,.94)`), col dito fermo a 900px di scorrimento: Foto e video 2,40 · Stampa e gadget 2,84 · Web 3,11 · Assistenza 3,33 · Software 3,35 · Grafica 3,43 · **Prodotti 1,14**. Prodotti era il peggiore perche' il suo scurito era il petrolio quasi nero `#0C2C2B`: da lì la segnalazione. Adesso la barra appiccicata usa `--cl`, le stesse tinte che gia' usa da ferma — perche' il fondo e' lo stesso. Dopo: tutte fra 5,17 e 9,15. ⚠️ La regola sta DOPO quella di `k-testa-chiara` di proposito: su una pagina che apre chiara ma e' stata scrollata comanda l'essere appiccicata, non com'era l'apertura. */ .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li > a > span::before, .k-testa-chiara #masthead.-sticky ul.menu:not(.sub-menu) > li > a > span::before{color:var(--cl)!important} .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li > a:hover, .k-testa-chiara #masthead.-sticky ul.menu:not(.sub-menu) > li > a:hover{color:var(--cl)!important} .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li > a:hover .menu-chevron, .k-testa-chiara #masthead.-sticky ul.menu:not(.sub-menu) > li > a:hover .menu-chevron{ color:var(--cl)!important;border-color:var(--cl)!important} /* Logo e prima voce del menu si toccavano esattamente. Solo da 1400px, che e' la larghezza sotto la quale Ohio passa al menu a scomparsa e questo elenco non esiste piu'. */ @media (min-width:1400px){ .k-testa #masthead ul.menu:not(.sub-menu) > li:first-child, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li:first-child{padding-left:1.5rem} } /* -------------------------------------------------------------------------- SOTTOMENU Erano NERO pieno: nel sistema di Kreita il fondo scuro e' il navy, il nero assoluto non compare da nessun'altra parte. E le voci non davano segno di essere sotto il mouse. Il colore dell'area lo eredita da solo: le variabili --c/--cd/--cl stanno sul
  • di primo livello e il sottomenu e' dentro quel
  • . ⚠️ Sul navy servono le varianti CHIARE (--cl): il rosso pieno da 3,25:1, il magenta 3,25, il blu 2,73. Le chiare stanno fra 6,3 e 8:1. -------------------------------------------------------------------------- */ .k-testa #masthead .sub-menu, .k-testa #masthead .sub-sub-menu, .k-testa-chiara #masthead .sub-menu, .k-testa-chiara #masthead .sub-sub-menu{ background:#131C2E !important; border:1px solid rgba(255,255,255,.08); /* ⚠️⚠️ LA STRISCIA E' IL COLORE SCELTO, `--c`, e non la tinta chiara — 4/9/2026. Con `--cl` non era uniforme e l'utente l'ha visto: «in alcuni casi leggermente piu' chiara del colore del servizio, in altri casi la stessa». Il motivo stava nella tavolozza: la tinta chiara del giallo E' il giallo pieno (salto 0), quella del rosso e' appena piu' chiara (+13 di luminosita') e le altre quattro molto piu' chiare (+22/+26). Adesso e' sempre il colore dell'area, quindi combacia con la colonna che ha sotto e con la pagina. ⚠️ Il prezzo, misurato sul navy del pannello (#131C2E): giallo 8,40 · rosso 3,48 · magenta 3,48 · verde 3,32 · Web 3,11 · blu 2,84 · viola 2,40. Sul viola e sul blu la striscia e' discreta: per questo passa da 3 a 4px, che e' l'unico modo di darle presenza SENZA cambiarle colore. */ border-top:4px solid var(--c,#fff) !important; border-radius:12px !important; box-shadow:0 30px 64px -30px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.25) !important; padding:.45rem !important; /* La larghezza era FISSA a 227px: «Fornitura e Installazione Hardware» e «Gadget ed Accessori personalizzati» (34 caratteri) andavano a capo. Qui il pannello si adatta al testo, con un minimo e un massimo. */ min-width:270px !important; width:max-content !important; max-width:340px !important} /* Le righe erano strette: 7px sopra e sotto per un testo da 16px. Qui 15px di testo e 10 di respiro, come nelle tendine del form. */ .k-testa #masthead .sub-menu a, .k-testa-chiara #masthead .sub-menu a{ color:rgba(255,255,255,.78) !important;border-radius:8px; position:relative;font-size:15px !important;line-height:1.3 !important; padding:.62rem .8rem .62rem .95rem !important; transition:background .16s, color .16s} /* filetto nel colore dell'area: dice da quale scheda arriva questa voce */ .k-testa #masthead .sub-menu a:not(.k-sub-area__go)::before, .k-testa-chiara #masthead .sub-menu a:not(.k-sub-area__go)::before{ content:"";position:absolute;left:.3rem;top:50%;transform:translateY(-50%) scaleY(0); width:3px;height:60%;border-radius:99px;background:var(--cl,#fff); transition:transform .18s} /* 🔴 QUESTE REGOLE SONO PER LE VOCI DEL PANNELLO, NON PER IL BOTTONE. Il blocco colorato di sinistra e' anch'esso un `
  • ` del `.sub-menu`, quindi `li:hover > a` ripescava il bottone «Vai all'area» e glielo ridipingeva: fondo `rgba(255,255,255,.07)` e testo `var(--cl)` invece di bianco + colore dell'area. **Misurato 2,10:1** (Gadget: #7FA8E0 su azzurrino). Bastava passare col mouse sul riquadro colorato, non serviva nemmeno toccare il bottone — segnalato dall'utente il 7/8/2026 con due schermate. ⚠️ E' un problema di SPECIFICITA', non di ordine: `li:hover > a` fa (1,3,2) e batteva il bottone, che fa (1,3,0), nonostante l'`!important` su entrambi. `a:focus-visible` (1,3,1) faceva lo stesso danno **da tastiera**. Rimedio: escludere il riquadro e il bottone, non alzare la specificita'. */ .k-testa #masthead .sub-menu li:not(.k-sub-area):hover > a, .k-testa #masthead .sub-menu a:not(.k-sub-area__go):focus-visible, .k-testa-chiara #masthead .sub-menu li:not(.k-sub-area):hover > a, .k-testa-chiara #masthead .sub-menu a:not(.k-sub-area__go):focus-visible{ background:rgba(255,255,255,.07) !important;color:var(--cl,#fff) !important} .k-testa #masthead .sub-menu li:not(.k-sub-area):hover > a::before, .k-testa-chiara #masthead .sub-menu li:not(.k-sub-area):hover > a::before{transform:translateY(-50%) scaleY(1)} /* il bottone si vede anche da tastiera: prima glielo dava la regola sbagliata */ .k-testa #masthead .sub-menu .k-sub-area__go:focus-visible, .k-testa-chiara #masthead .sub-menu .k-sub-area__go:focus-visible{ outline:3px solid var(--atesto);outline-offset:3px} /* La voce della pagina in cui ci si trova: Ohio la colora col suo arancione `--clb-color-primary`. Deve portare il colore della SUA area, come tutto il resto - altrimenti su «Design & Branding» il menu dice arancione e la scheda in home dice giallo. */ .k-testa #masthead ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa #masthead ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa #masthead ul.menu:not(.sub-menu) > li.current_page_item > a{ color:var(--c) !important} /* 🔴 LA VOCE ATTIVA: inchiostro, con un FILETTO nel colore pieno sotto. Prima la parola prendeva la variante scurita dell'area. Misurato il 4/8: su `/graphic-design/`, dove l'apertura e' la tinta chiara dell'area, l'ocra #976615 su #FDF1DC dava **4,45** — sotto i 4,5 richiesti, per un pelo, ma sotto. E inseguire un ocra ancora piu' scuro avrebbe rimesso in pagina il colore che il cliente aveva bocciato. Vale la stessa regola di tutto il resto del sito: **il colore sta sul segno, non sulla parola.** Cosi' passa su qualunque fondo chiaro, tinta compresa. */ .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li.current_page_item > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li.current_page_item > a{ color:var(--ink) !important; box-shadow:inset 0 -3px 0 0 var(--c); border-radius:2px} /* -------------------------------------------------------------------------- L'HEADER SOPRA L'APERTURA COLORATA (pagine area) La pagina ora apre nel colore dell'area, e l'header ci sta sopra. Misurato: la voce attiva usava la variante scurita della sua area - ocra #976615 su giallo #F5A623 = **2,45:1**, illeggibile. E i numerini delle altre voci portavano ognuno il proprio colore scurito, che su un fondo colorato non tiene (l'arancio scuro sul giallo da' 3,47). Finche' la barra bianca non compare, tutto usa --atesto: e' l'unico colore che sul fondo di QUELL'area e' stato misurato leggibile. 🔴 ⚠️ LA CLASSE E' `k-apre-colore`, NON `k-area`, e la differenza era un guasto vero (trovato il 4/8). `k-area` sta anche su tutte e 28 le pagine SERVIZIO, che pero' NON aprono a colore pieno: aprono su una tinta chiara o - quelle non ancora rifatte - sul bianco. Li' `--atesto` vale BIANCO per le aree a inchiostro chiaro (rosso, magenta, blu e ora il turchese del Web): risultato, **menu bianco su fondo bianco, 1:1, invisibile**. Misurato su `/siti-web/`. `k-apre-colore` la mette il PHP solo sulle sei pagine area. -------------------------------------------------------------------------- */ .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current_page_item > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a{ color:var(--atesto) !important} .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a > span::before{ color:var(--atesto) !important; opacity:.55} .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current-menu-item > a > span::before, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current_page_item > a > span::before{ opacity:1} /* chevron e hamburger seguono lo stesso colore */ .k-apre-colore #masthead:not(.-sticky) .menu-chevron, .k-apre-colore #masthead:not(.-sticky) .has-submenu-icon::after, .k-apre-colore #masthead:not(.-sticky) .hamburger.icon-button, .k-apre-colore #masthead:not(.-sticky) .hamburger.icon-button i{ color:var(--atesto) !important; border-color:var(--atesto) !important} .k-apre-colore #masthead:not(.-sticky) .hamburger.icon-button{ background:color-mix(in srgb, var(--atesto) 10%, transparent) !important} /* ========================================================================== LA BARRA SCURA (04/08/2026) — richiesta del cliente «non lo farei trasparente ma scuro e dentro il menu, cosi' si vedono i colori dei numeri e l'effetto hover». PERCHE' FUNZIONA MEGLIO, con i numeri alla mano: 1. Sul navy i sei colori hanno tutti la loro variante misurata (`--cl`): giallo 8,4 · turchese 9,1 · rosso 7,0 · magenta 6,6 · blu 7,1 · viola 6,3. Sopra un'apertura a colore pieno invece dovevano diventare tutti dello stesso inchiostro, e i numeri perdevano il colore dell'area. 2. Un solo header per tutto il sito: prima ce n'erano tre stati (trasparente su apertura scura, trasparente su colore pieno, barra bianca scorrendo) e ognuno voleva le sue regole. 3. 🔑 **Il logo in uso ha la dicitura BIANCA** (`kreita_logo_2NB.png`, misurata: 8.061 pixel opachi, media rgb 255,255,255). Su fondo bianco e sul giallo spariva. Su navy si legge come e' stata disegnata. ========================================================================== */ /* LA BARRA SOSPESA Con `margin-inline` da sola la barra era staccata dai lati ma incollata in alto: sembrava una fascia tagliata, non un oggetto appoggiato sopra la pagina. Con lo stacco anche in alto galleggia davvero, e l'ombra sotto acquista senso perche' c'e' qualcosa su cui cadere. ⚠️ Appiccicata lo stacco si riduce (14px invece di 20): a pagina ferma il respiro e' una scelta, mentre si scorre e' spazio che ruba alla lettura. */ .k-testa #masthead .header-wrap, .k-testa-chiara #masthead .header-wrap, .k-testa #masthead.-sticky .header-wrap, .k-testa-chiara #masthead.-sticky .header-wrap{ background:rgba(19,28,46,.94) !important; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.10); border-radius:16px; box-shadow:0 18px 44px -24px rgba(0,0,0,.75); /* ⚠️ LA BARRA SMETTE DI CRESCERE. Non ha mai avuto un tetto: con `margin:20px` da sola misura sempre `100vw - 40`, cioe' 2520 su un monitor da 2560, sopra un contenuto largo 1240. Era la causa principale del «layout troppo stretto»: non e' il contenuto a essere stretto, e' la barra a essere larga il doppio. `width` invece di `margin` perche' cosi' sotto i 1920 il conto e' identico a prima (20px per lato, misurato 1400 a 1440) e sopra si centra. */ width:min(calc(100% - 40px), 1880px); margin:20px auto 0} .k-testa #masthead.-sticky .header-wrap, .k-testa-chiara #masthead.-sticky .header-wrap{margin-top:14px} /* le voci: bianche ovunque, in ogni stato */ .k-testa #masthead .main-menu-link, .k-testa #masthead .menu > li > a, .k-testa #masthead .menu-item > a, .k-testa-chiara #masthead .main-menu-link, .k-testa-chiara #masthead .menu > li > a, .k-testa-chiara #masthead .menu-item > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a, .k-testa #masthead.-sticky .main-menu-link, .k-testa #masthead.-sticky .menu > li > a, .k-testa #masthead.-sticky .menu-item > a{ color:#fff !important } /* i numerini e il passaggio del mouse tornano a portare il colore dell'AREA, nella variante misurata sul navy */ .k-testa #masthead ul.menu:not(.sub-menu) > li > a > span::before, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li > a > span::before, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a > span::before{ color:var(--cl) !important; opacity:1} .k-testa #masthead ul.menu:not(.sub-menu) > li > a:hover, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li > a:hover, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li > a:hover{ color:var(--cl) !important} /* la voce attiva: colore dell'area piu' il filetto sotto, come nel resto del sito */ .k-testa #masthead ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa #masthead ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa #masthead ul.menu:not(.sub-menu) > li.current_page_item > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li.current_page_item > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-apre-colore #masthead:not(.-sticky) ul.menu:not(.sub-menu) > li.current_page_item > a, /* ⚠️ Anche lo stato appiccicato: le vecchie regole `-sticky` mettevano l'inchiostro navy, nato per la barra BIANCA. Sulla barra scura dava 1,17. */ .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa #masthead.-sticky ul.menu:not(.sub-menu) > li.current_page_item > a, .k-testa-chiara #masthead.-sticky ul.menu:not(.sub-menu) > li.current-menu-item > a, .k-testa-chiara #masthead.-sticky ul.menu:not(.sub-menu) > li.current-menu-ancestor > a, .k-testa-chiara #masthead.-sticky ul.menu:not(.sub-menu) > li.current_page_item > a{ color:var(--cl) !important; box-shadow:inset 0 -3px 0 0 var(--cl); border-radius:2px} /* chevron, hamburger e il resto seguono il bianco */ .k-testa #masthead .menu-chevron, .k-testa #masthead .has-submenu-icon::after, .k-testa-chiara #masthead .menu-chevron, .k-testa-chiara #masthead .has-submenu-icon::after, .k-apre-colore #masthead:not(.-sticky) .menu-chevron, .k-apre-colore #masthead:not(.-sticky) .has-submenu-icon::after{ color:#fff !important; border-color:#fff !important} .k-testa #masthead .hamburger span, .k-testa #masthead .hamburger-inner, .k-testa #masthead .hamburger-inner::before, .k-testa #masthead .hamburger-inner::after, .k-testa-chiara #masthead .hamburger span, .k-testa-chiara #masthead .hamburger-inner, .k-testa-chiara #masthead .hamburger-inner::before, .k-testa-chiara #masthead .hamburger-inner::after{ background:#fff !important } .k-testa #masthead .hamburger.icon-button, .k-testa #masthead .hamburger.icon-button i, .k-testa-chiara #masthead .hamburger.icon-button, .k-testa-chiara #masthead .hamburger.icon-button i, .k-apre-colore #masthead:not(.-sticky) .hamburger.icon-button, .k-apre-colore #masthead:not(.-sticky) .hamburger.icon-button i{ color:#fff !important; border-color:transparent !important} .k-testa #masthead .hamburger.icon-button, .k-testa-chiara #masthead .hamburger.icon-button, .k-apre-colore #masthead:not(.-sticky) .hamburger.icon-button{ background:rgba(255,255,255,.10) !important} .k-testa #masthead .hamburger.icon-button:hover, .k-testa-chiara #masthead .hamburger.icon-button:hover{ background:rgba(255,255,255,.18) !important} /* ⚠️ Il sottomenu era navy come la barra: attaccati, sembravano un blocco solo. Un gradino piu' chiaro, e resta il filetto nel colore dell'area in cima. */ .k-testa #masthead .sub-menu, .k-testa #masthead .sub-sub-menu, .k-testa-chiara #masthead .sub-menu, .k-testa-chiara #masthead .sub-sub-menu{ background:#1C2A44 !important; box-shadow:0 22px 50px -26px rgba(0,0,0,.8) !important} /* ⚠️ IL LOGO E LA PRIMA VOCE SI SOVRAPPONEVANO DI 43px sulla barra scura. Misurato a 1440: la barra utile va da 41 a 1399, il logo arriva a 199 e a destra l'hamburger comincia a 1327 — corridoio libero **1.128px** per un menu che ne occupava **1.140**. Mancavano 12px: non bastava spostarlo, e spostarlo basta e avanza solo dopo averlo stretto. ⚠️ E `nav.nav` e' **position:absolute** e centrato dal tema: stringendolo si spostava da solo verso sinistra, peggiorando la sovrapposizione. Va ancorato a sinistra in modo esplicito. `left` e' relativo a `.header-wrap`, che parte a 20: 190 qui vuol dire 210 sullo schermo. Vale solo da 1400px: sotto, Ohio passa al menu a scomparsa e `ul.menu` non esiste piu' (misura 0x0). */ @media (min-width:1400px){ /* ⚠️ CENTRATO NELLO SPAZIO CHE RESTA, non nella barra. Centrato davvero (meta' esatta della barra, 720px a 1440) il menu partirebbe a 177 e il logo arriva a 206: **22px di sovrapposizione**. Per centrarlo lì bisognerebbe scendere sotto i 14px di corpo. Qui la scatola del menu occupa il corridoio fra il logo e l'hamburger e le voci si centrano dentro: all'occhio e' centrato, perche' e' centrato nello spazio disponibile — che e' quello che si vede. */ .k-testa #masthead nav.nav, .k-testa-chiara #masthead nav.nav{ left:186px !important; right:100px !important; transform:none !important; display:flex !important; justify-content:center !important} .k-testa #masthead nav.nav .holder, .k-testa-chiara #masthead nav.nav .holder, .k-testa #masthead nav.nav .nav-container, .k-testa-chiara #masthead nav.nav .nav-container{width:100%} .k-testa #masthead ul.menu:not(.sub-menu), .k-testa-chiara #masthead ul.menu:not(.sub-menu){justify-content:center !important} } /* ⚠️ Fra 1400 e 1520 il corridoio libero e' 1.128px e il menu ne vuole 1.140: mancano 12px. Il respiro fra le voci non si puo' togliere (il `padding` dei `
  • ` e' gia' 0: la spaziatura la fanno i margini interni del tema), e rimpicciolire il logo renderebbe illeggibile la dicitura. Si toglie un pixel al corpo delle voci, che a 15px restano ben leggibili: 1.140 → ~1.070. Sopra i 1520 il corridoio basta e il corpo torna quello normale. */ @media (min-width:1400px) and (max-width:1520px){ .k-testa #masthead ul.menu:not(.sub-menu) > li > a, .k-testa-chiara #masthead ul.menu:not(.sub-menu) > li > a{ font-size:15px !important } } /* -------------------------------------------------------------------------- IL PANNELLO A SCOMPARSA: stessi colori del menu di navigazione E' un altro pezzo di DOM (`.hamburger-nav-holder > ul.menu`) e il contatore sta sulla e non su `a > span` come nella barra: vanno colorati tutti e due i punti o su una delle due larghezze i numeri restano bianchi. ⚠️ QUI SERVONO LE VARIANTI CHIARE, non i colori pieni. Il fondo del pannello e' #111013 (misurato, non a occhio) e sui pieni si va sotto la soglia: Media 2,67 · Gadget 3,20 · Web 3,47 · Soluzioni 3,88 · Software 3,90. Con le chiare si sta fra 6,97 e 10,19. Design e' l'unica che va bene com'e'. Le ultime due voci (Smart Business Card, Contatti) non sono aree: restano bianche. -------------------------------------------------------------------------- */ .hamburger-nav-holder ul.menu > li{--cl:rgba(255,255,255,.92)} /* ⚠️⚠️ QUI VANNO I COLORI PIENI, NON LE TINTE CHIARE — 4/9/2026. I numeri li ha gia' pieni (`kreita-testa-clic.php`, dopo una richiesta dell'utente: «non sono gli stessi»). La PAROLA accanto invece prendeva la tinta chiara: nella stessa riga, due colori diversi per la stessa area. Segnalato con tre schermate: «i colori non sono quelli scelti». ⚠️ Il prezzo e' quello gia' messo in conto la volta scorsa e sta scritto nel mu-plugin: sul fondo dell'overlay (#111013) il viola fa 2,95 e il blu 3,50. E' una scelta dell'utente, non una svista: chi la rivede rilegga prima quella nota. */ .hamburger-nav-holder ul.menu > li:nth-child(1){--cl:#F5A623} .hamburger-nav-holder ul.menu > li:nth-child(2){--cl:#0F766E} .hamburger-nav-holder ul.menu > li:nth-child(3){--cl:#D03923} .hamburger-nav-holder ul.menu > li:nth-child(4){--cl:#C23A8E} .hamburger-nav-holder ul.menu > li:nth-child(5){--cl:#3763A6} .hamburger-nav-holder ul.menu > li:nth-child(6){--cl:#6D28D9} /* ⚠️⚠️ PRODOTTI FA ECCEZIONE E PRENDE LA TINTA CHIARA, NON IL PIENO. Le altre sei portano qui il colore pieno, che su questo fondo quasi nero (#111013) va da 9,36:1 a 3,47:1. Il colore di Prodotti e' scuro per mestiere — era petrolio, dal 9/9/2026 e' il caffe' `#3B2A20` — e pieno farebbe **1,39:1**, cioe' invisibile. Con la sabbia `#D3C3B4` fa 11,05:1. ⚠️ Se il colore cambia ancora, qui va la sua tinta CHIARA, colonna [6]. */ .hamburger-nav-holder ul.menu > li:nth-child(7){--cl:#D3C3B4} /* il numerino: Ohio lo disegna col contatore CSS. ⚠️⚠️ Non basta dargli il colore: Ohio ci mette sopra **`opacity:.5`**, e su questo fondo quasi nero il contrasto si dimezza — Design da 9,36 a **3,14**, Media da 6,97 a **2,58**, con un testo di 14px che ne vorrebbe 4,5. I colori sembravano «slavati» proprio per questo. Va forzata anche l'opacita'. */ .hamburger-nav-holder ul.menu > li > a::before, .hamburger-nav-holder ul.menu > li > a > span::before{ color:var(--cl) !important;opacity:1 !important;transition:color .22s} /* La voce sotto il mouse prende il colore della sua area; a riposo resta bianca, come nella barra in alto. ⚠️ NON usare `.showed`: in questo pannello quella classe ce l'hanno TUTTE le voci fin dall'apertura, non e' lo stato attivo. Colorandola si accendevano tutte e otto le etichette insieme. */ .hamburger-nav-holder ul.menu > li > a{transition:color .22s} /* ⚠️ `li:hover` e non `a:hover`: mentre il mouse sta su una SOTTO-voce, Ohio spegne la voce madre e diventava grigia. Col `li` la madre resta accesa — e per giunta si capisce a quale area appartiene la sotto-voce che si sta guardando, che e' proprio quello che serve li' dentro. */ .hamburger-nav-holder ul.menu > li:hover > a, .hamburger-nav-holder ul.menu > li > a:hover{color:var(--cl) !important} /* il piu' che apre i sottoservizi */ .hamburger-nav-holder ul.menu > li > a:hover .has-submenu-icon, .hamburger-nav-holder ul.menu > li > a:hover .menu-plus{color:var(--cl) !important} .hamburger-nav-holder ul.menu > li .sub-menu a:hover{color:var(--cl) !important} /* -------------------------------------------------------------------------- IL PANNELLO A SCOMPARSA: il colore vero e lo spazio a destra (4/9/2026) Tre difetti segnalati insieme dall'utente, con tre schermate: «hai tanto spazio sulla destra, migliora spazi» e «i colori non sono quelli scelti». -------------------------------------------------------------------------- */ /* ⚠️⚠️ 1. IL COLORE NON ERA SBAGLIATO: ERA A META'. Ohio, sulla voce sotto il mouse, dimezza l'opacita' della parola — `.hamburger-nav .menu .mega-menu-item:hover > a span{opacity:.5}` — e su questo fondo quasi nero il colore scelto diventa un altro colore: il giallo #F9CD85 esce **#856E4C** (un marrone), il magenta #DB87BB esce **#7C4E67**. Il numerino accanto era gia' forzato a opacita' piena, la parola no: per questo, nella stessa riga, il numero era acceso e il nome spento. ⚠️ Non si tocca il colore per «compensare» l'opacita': si toglie l'opacita'. */ .hamburger-nav .menu .mega-menu-item:hover > a span{opacity:1 !important} /* 2. IL SOTTOMENU SI PRENDE LO SPAZIO CHE AVANZA. Il pannello e' in tre terzi: le voci nel primo, il sottomenu nel secondo, il terzo VUOTO — misurato a 1360px: voci 72→473, sottomenu 473→874, e da 874 a 1288 non c'era niente. Ora il sottomenu parte dopo le voci e arriva al bordo. ⚠️ Le misure sono in percentuale e non in pixel perche' il pannello scala col monitor: il riquadro delle voci e' **un terzo** del pannello a tutte le larghezze (misurato da 1000 a 1399), quindi `100% + 2rem` di partenza e `200% - 2rem` di larghezza finiscono esattamente sul bordo destro. ⚠️⚠️ E NON con `left:...;right:0`: il `
  • ` ha una **trasformazione** addosso (l'animazione d'ingresso di Ohio), e un elemento trasformato diventa il riferimento per tutto quello che ha dentro in `position:absolute` — anche se e' `position:static`. Con `right:0` la larghezza usciva **0px**: il conto veniva fatto sul terzo di sinistra, non sul pannello. Ci sono volute tre misure per vederlo. ⚠️ Solo da 1000px in su: sotto, il pannello e' una fisarmonica a colonna sola e il sottomenu deve restare largo quanto la voce. */ @media (min-width:1000px){ .hamburger-nav-holder ul.menu > li > ul.sub-menu{ left:calc(100% + 2rem) !important;width:calc(200% - 2rem) !important; right:auto !important;max-width:none !important} /* i servizi si dispongono su quante colonne ci stanno, non su una sola */ .hamburger-nav-holder ul.sub-menu{ display:grid !important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.1rem 1.4rem;align-items:start} } /* 3. IL SERVIZIO: icona in una casella e testo accanto, come nel menu in alto. Prima l'icona era attaccata alla parola perche' tutte le regole del pannello grande sono ancorate a `#masthead`, e qui dentro non arrivavano. */ .hamburger-nav-holder ul.sub-menu > li > a{ display:grid !important;grid-template-columns:1.7rem 1fr;gap:0 .6rem;align-items:center; padding:.42rem .5rem !important;margin:0 -.5rem;border-radius:9px; font-size:15px !important;line-height:1.3 !important;font-weight:600; color:rgba(255,255,255,.92) !important;border:0 !important;background-image:none !important} .hamburger-nav-holder ul.sub-menu > li > a:hover{background:rgba(255,255,255,.07)} /* ⚠️ Niente riquadro attorno all'icona come nel menu grande: qui l'icona resta nuda, si allinea e basta. E niente `color`: il colore glielo da' gia' `kreita-testa-clic.php` con `color:inherit`, cioe' segue la parola — che e' il comportamento voluto e non va scavalcato da qui. */ .hamburger-nav-holder .k-ic{ display:grid;place-items:center;width:1.7rem;height:1.7rem} .hamburger-nav-holder .k-ic svg{ width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* 4. I SOTTOSERVIZI: un elenco, non una fila di parole. ⚠️ `.k-sub-voci` e' uno ``: senza una regola resta **inline**, e gli otto collegamenti di «Pronti all'Uso» andavano a capo in mezzo alle parole con le icone incastrate nel testo. Si vede nella terza schermata mandata dall'utente. */ .hamburger-nav-holder .k-sub-voci{display:block;margin:.1rem 0 .7rem 2.3rem} .hamburger-nav-holder .k-sub-voci a{ display:grid !important;grid-template-columns:1.05rem 1fr;gap:0 .5rem;align-items:center; padding:.2rem .4rem !important;margin:0 -.4rem;border-radius:7px; font-size:13px !important;line-height:1.45 !important;font-weight:400; color:rgba(255,255,255,.62) !important;border:0 !important;background-image:none !important} .hamburger-nav-holder .k-sub-voci a:hover{background:rgba(255,255,255,.07);color:#fff !important} .hamburger-nav-holder .k-sub-voci .k-ic{width:1.05rem;height:1.05rem} .hamburger-nav-holder .k-sub-voci .k-ic svg{width:13px;height:13px;stroke-width:1.5} /* -------------------------------------------------------------------------- IL SOTTOMENU CON LA COLONNA DELL'AREA (bozza D) Il pannello E' il `
      `: diventa una griglia con la colonna dell'area a sinistra (che occupa tutte le righe) e i servizi su due colonne. La colonna e' un `
    • ` in piu' aggiunto dal walker in menu.php. -------------------------------------------------------------------------- */ /* ⚠️ Ohio fissa il pannello a **340px di width E di max-width**: senza sbloccare tutti e due, la griglia (240+176+176 = 592px) sfonda il riquadro e la seconda colonna resta tagliata. Misurato, era esattamente questo. */ .k-testa #masthead .sub-menu:has(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area){ display:grid !important; grid-template-columns:15rem repeat(2,minmax(12rem,1fr)); gap:0 !important; padding:0 !important; width:max-content !important; max-width:min(52rem,calc(100vw - 4rem)) !important; min-width:40rem !important; overflow:hidden; /* ⚠️⚠️ LE RIGHE SI DIVIDONO L'ALTEZZA. L'altezza del pannello la detta la colonna dell'area (occhiello + nome + frase + bottone: 183px), non le righe dei servizi (156px in tre). I 27px che avanzavano finivano TUTTI in fondo: misurato 3px sopra e 28 sotto, sbilanciato di 25. ⚠️ Non si usa `align-content:center`: la colonna dell'area occupa tutte le righe, quindi centrando il blocco delle righe si accorcerebbe anche lei e sopra e sotto comparirebbe il navy del pannello ai due lati del riquadro colorato. Con righe `1fr` l'altezza se la dividono le righe e la colonna resta piena. ⚠️⚠️ E NON `grid-auto-rows:1fr`, PROVATO E TOLTO: con le righe forzate a dividersi l'altezza, la terza riga di Web finiva FUORI dal pannello e `overflow:hidden` la tagliava a metà — «Assistenza e manutenzione» si leggeva mozzata. Le misure non lo vedevano (le righe risultavano regolari): si è visto solo nello scatto. Le righe restano automatiche: quando la colonna dell'area è più alta, lo spazio in più se lo dividono le righe che scavalca, ed è quello che serve. */ } /* e dentro la sua riga, la voce sta in mezzo */ .k-testa #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area){ align-self:center !important} /* la colonna dell'area: tutta l'altezza, piena del colore */ .k-testa #masthead .sub-menu .k-sub-area, .k-testa-chiara #masthead .sub-menu .k-sub-area{ grid-row:1 / span var(--righe,3); background:var(--ac); padding:1.4rem 1.3rem; display:flex;flex-direction:column;justify-content:flex-start; border:0 !important;margin:0 !important} /* ⚠️⚠️ LO SPETTRO DI PRODOTTI E' STATO TOLTO — 4/9/2026. La colonna di «Prodotti» era una sfumatura con dentro tutti e sei i colori delle aree, con un velo scuro sopra, perche' Prodotti non e' un'area di servizio. Ma la pagina `/prodotti/` apre in VERDE (`KREITA_FUORI_AREA`), e quindi il menu diceva una cosa e la pagina un'altra: «prodotti invece multicolor in alto, dentro verde» — segnalazione dell'utente, con «non va bene» subito dopo. Adesso la colonna e' verde piena come le altre sei sono del loro colore, e non serve piu' nessuna regola speciale: il colore e l'inchiostro arrivano da `--ac`/`--atesto` come per tutte, quindi anche la pastiglia «Vedi i prodotti» viene bianca con la scritta verde (5,35:1) senza che nessuno glielo debba scrivere a mano. ⚠️ Se un giorno si volesse tornare allo spettro, va rifatto ANCHE il velo: sul giallo il bianco faceva 2,03:1 e senza velo un terzo del blocco era illeggibile. */ .k-testa #masthead .sub-menu .k-sub-area__n, .k-testa-chiara #masthead .sub-menu .k-sub-area__n{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--atesto);display:block} .k-testa #masthead .sub-menu .k-sub-area__t, .k-testa-chiara #masthead .sub-menu .k-sub-area__t{font-family:"Space Grotesk",sans-serif;font-size:1.38rem;font-weight:700; letter-spacing:-.03em;line-height:1.14;color:var(--atesto);display:block;margin-top:.35rem} .k-testa #masthead .sub-menu .k-sub-area__d, .k-testa-chiara #masthead .sub-menu .k-sub-area__d{font-size:12.8px;line-height:1.5;color:var(--atesto);display:block; margin-top:.55rem;margin-bottom:1.1rem} /* ⚠️ Era un testo sottolineato e non si leggeva: Ohio gli metteva il colore al **78% di opacita'** e il filetto usciva `rgb(80,87,94)` — **contrasto 1,34**, cioe' invisibile. Adesso e' una pastiglia piena: fondo l'inchiostro dell'area, testo il colore dell'area. Contrasto pieno in tutte e sei, per costruzione. */ /* ⚠️ specificita': Ohio colora i link col selettore `#masthead .sub-menu a`, che con un id batte una classe sola anche a parita' di !important. Il nostro va ancorato allo stesso id o il colore non passa. */ .k-testa #masthead .sub-menu .k-sub-area__go, .k-testa-chiara #masthead .sub-menu .k-sub-area__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto; /* ⚠️ IL CARATTERE VA DICHIARATO QUI. Misurato l'8/8: il bottone ricadeva sullo stack di SISTEMA (-apple-system, Segoe UI, Roboto…) mentre tutto il pannello accanto usa Hanken/Space Grotesk, e `document.fonts.check()` diceva **false**. Su una macchina dove il ripiego rende sottile, una pastiglia bianca con dentro 15px di testo tenue si legge come VUOTA. ⚠️ `font-size` va con !important: Ohio impone 15px su `.sub-menu a`. ⚠️⚠️ TERZA VOLTA, E QUESTA E' LA CAUSA VERA — 31/8/2026. Il tasto usciva VUOTO ogni tanto: pastiglia bianca, niente scritta e niente freccia. Non era il colore (tutte e sei le aree hanno `--ac` e `--atesto` scritti nell'attributo `style` del pannello, controllato) e non era la transizione (tolta il 10/8). Era il CARATTERE CHE NON C'ERA ANCORA. La prova sta nella segnalazione stessa: nella stessa immagine il titolone del pannello — «Assistenza informatica», Space Grotesk 700 — si legge benissimo, e solo il tasto e' vuoto. Stesso istante, stesso pannello, due caratteri diversi: uno c'era, l'altro no. Il perche': i caratteri hanno `font-display:swap`, che prevede un periodo iniziale in cui il testo e' INVISIBILE (~100ms) mentre il file arriva. Hanken Grotesk **in grassetto** non lo usa nient'altro in cima alla pagina — il corpo del testo e' 400 — quindi il file partiva alla prima apertura del menu, ed era proprio il tasto ad aspettarlo. Space Grotesk 700 invece e' gia' li' dal primo disegno, perche' lo usano tutti i titoli del sito. Rimedio: il tasto passa a Space Grotesk, lo stesso carattere del titolo che ha due righe sopra. Nessuna richiesta in piu', nessun momento cieco. */ font-family:"Space Grotesk",system-ui,sans-serif !important; font-weight:700 !important;font-size:14px !important;letter-spacing:-.01em; text-decoration:none;align-self:flex-start; background:var(--atesto) !important;color:var(--ac) !important; padding:.5rem 1rem !important;border-radius:99px;border:0 !important; background-image:none !important; /* ⚠️⚠️ NIENTE TRANSIZIONE SU `background` E `color`. Al passaggio del mouse il fondo va da bianco a navy e il testo da colore a bianco: muovendosi INSIEME si incrociano, e a meta' strada il fondo e' ancora chiaro mentre il testo e' gia' quasi bianco. Calcolato sui due percorsi: il contrasto scende sotto 3,0 per 131ms su 260 e nel punto peggiore (104ms) fa **1,04** — il tasto sembra una pastiglia bianca VUOTA, ed e' esattamente cosi' che e' stato segnalato. I colori ora si scambiano di colpo; a muoversi resta solo lo spostamento. */ transition:transform .26s cubic-bezier(.22,.8,.24,1)} .k-testa #masthead .sub-menu .k-sub-area__go:hover, .k-testa-chiara #masthead .sub-menu .k-sub-area__go:hover{background:#131C2E !important;color:#fff !important; transform:translateX(2px)} .k-testa #masthead .sub-menu .k-sub-area__go i{font-style:normal;display:inline-block; transition:transform .3s cubic-bezier(.22,.8,.24,1)} .k-testa #masthead .sub-menu .k-sub-area__go:hover i{transform:translateX(4px)} /* le voci dei servizi dentro la griglia: niente riquadri, solo il fondo al passaggio */ .k-testa #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area){ border:0 !important;margin:0 !important;align-self:start} /* ⚠️ le voci hanno ancora il sottolineato di Ohio (`border-bottom:1px solid`) e il suo riempimento: qui vanno spenti, o dentro la griglia si vedono come scatole appoggiate a caso. */ .k-testa #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area) > a, .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area) > a{ display:grid !important;grid-template-columns:1.9rem 1fr;gap:0 .7rem;align-items:center; padding:.62rem .8rem !important;margin:.2rem .35rem;border-radius:9px; border:0 !important;background-image:none !important; font-size:.94rem;font-weight:600;line-height:1.25; transition:background .24s,color .24s} /* l'icona del servizio, messa dal filtro in menu.php */ .k-testa #masthead .sub-menu .k-ic, .k-testa-chiara #masthead .sub-menu .k-ic{ display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:8px; border:1px solid rgba(255,255,255,.14);color:var(--cl,#fff); transition:background .26s,border-color .26s,color .26s} .k-testa #masthead .sub-menu .k-ic svg, .k-testa-chiara #masthead .sub-menu .k-ic svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .k-testa #masthead .sub-menu > li:not(.k-sub-area) > a:hover .k-ic, .k-testa-chiara #masthead .sub-menu > li:not(.k-sub-area) > a:hover .k-ic{ background:var(--cl,#fff);border-color:var(--cl,#fff);color:#131C2E} .k-testa #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area) > a:hover, .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area) > a:hover{ background:rgba(255,255,255,.07)} /* ⚠️ nel pannello a scomparsa la griglia non ci sta: li' torna un elenco. ⚠️⚠️ 23/10/2026: `min-width:0` era SENZA `!important` e perdeva contro il `min-width:40rem !important` qui sopra: su telefono la tendina aperta era larga 640px dentro un pannello di 290 e il bordo destro restava tagliato. Anche larghezza e massimo tornano quelli del pannello. */ @media (max-width:1399px){ .k-testa #masthead .sub-menu:has(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area){ display:block !important;min-width:0 !important;width:auto !important;max-width:100% !important} .k-testa #masthead .sub-menu .k-sub-area, .k-testa-chiara #masthead .sub-menu .k-sub-area{display:none} } /* ⚠️ Il menu viene disegnato DUE volte: la barra e il pannello a scomparsa. Il walker aggiunge la colonna a tutti e due, ma nel pannello non ci va — li' resta un elenco. Senza questa riga si vedevano sei colonne in piu', col fondo trasparente perche' la regola del colore vale solo in #masthead. */ .hamburger-nav-holder .k-sub-area, .clb-popup .k-sub-area{display:none !important} /* i sottoservizi elencati sotto al servizio, quando l'area ne ha pochi: senza, il pannello di Design & Branding (due soli servizi) resta mezzo vuoto */ .k-testa #masthead .sub-menu .k-sub-voci, .k-testa-chiara #masthead .sub-menu .k-sub-voci{ display:block;grid-column:2;margin:-.1rem .35rem .5rem 3.4rem} /* ogni voce e' un collegamento con la sua icona: cliccabile, non un'etichetta */ .k-testa #masthead .sub-menu .k-sub-voci a, .k-testa-chiara #masthead .sub-menu .k-sub-voci a{ display:grid !important;grid-template-columns:1.15rem 1fr;gap:0 .55rem;align-items:center; padding:.26rem .45rem !important;margin:0 -.45rem;border-radius:7px; border:0 !important;background-image:none !important;text-decoration:none; font-size:12.7px;font-weight:400;line-height:1.45;color:rgba(255,255,255,.66) !important; transition:background .2s,color .2s} .k-testa #masthead .sub-menu .k-sub-voci a:hover, .k-testa-chiara #masthead .sub-menu .k-sub-voci a:hover{ background:rgba(255,255,255,.07);color:#fff !important} /* l'icona della voce: nuda e piccola, per non fare concorrenza a quella del servizio */ .k-testa #masthead .sub-menu .k-sub-voci .k-ic, .k-testa-chiara #masthead .sub-menu .k-sub-voci .k-ic{ width:1.15rem;height:1.15rem;border:0;border-radius:0;background:none; color:var(--cl,rgba(255,255,255,.5))} .k-testa #masthead .sub-menu .k-sub-voci .k-ic svg, .k-testa-chiara #masthead .sub-menu .k-sub-voci .k-ic svg{width:14px;height:14px;stroke-width:1.5} .k-testa #masthead .sub-menu .k-sub-voci a:hover .k-ic, .k-testa-chiara #masthead .sub-menu .k-sub-voci a:hover .k-ic{ background:none;border:0;color:var(--cl,#fff)} /* ═══════════════════════════════════════════════════════════════════════════ LA TESTATA NON CRESCE SUI MONITOR GRANDI (7/8/2026) ⚠️ Misurato: 117px a 1440 → 192px a 2560, cioe' +64%. L'altezza non viene dal contenuto (il logo e' 50px, la parte destra 56) ma e' imposta al contenitore `.header-wrap-inner`, che a 2560 misura 166px con i figli fermi a 56. Sopra i 1500px la fascia si ferma all'altezza che ha a 1440: piu' larga la finestra, piu' una barra alta 190px sembra una fascia di intestazione invece che una barra di navigazione. ⚠️ Sotto i 1500px non cambia NIENTE: il telefono e i portatili restano com'erano. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width:1500px){ /* ⚠️ Non basta l'interno: mettendo solo `.header-wrap-inner` a 96px la fascia restava 188 perche' l'altezza sta sul contenitore ESTERNO (`.header-wrap`, 168px a 2560). Vanno fissati tutti e due. */ .k-testa #masthead .header-wrap, .k-testa-chiara #masthead .header-wrap, .k-testa #masthead .header-wrap-inner, .k-testa-chiara #masthead .header-wrap-inner{height:96px!important;min-height:0!important} } /* ⚠️ «Pronti all'Uso, su misura» e' l'unica voce con un TERZO livello vero. Ora lo appiattiamo noi in `.k-sub-voci.-terzo` (menu.php): qui si spengono il sottomenu di Ohio, che resterebbe chiuso a `opacity:0` sotto alle nostre voci, e il «+», che invitava ad aprire una cosa gia' aperta. ⚠️ `:has()` e' sostenuto da tutti i browser dal 2023; se un giorno non bastasse, la stessa cosa si fa con una classe stampata dal PHP sul `li`. */ .k-testa #masthead .sub-menu li:has(> .k-sub-voci.-terzo) > ul.menu-depth-2, .k-testa-chiara #masthead .sub-menu li:has(> .k-sub-voci.-terzo) > ul.menu-depth-2{ display:none !important} .k-testa #masthead .sub-menu li:has(> .k-sub-voci.-terzo) > a .has-submenu-icon, .k-testa-chiara #masthead .sub-menu li:has(> .k-sub-voci.-terzo) > a .has-submenu-icon{ display:none !important} /* ═══════════════════════════════════════════════════════════════════════════ LA TESTATA SUL TELEFONO (08/08/2026, richiesta): ATTACCATA IN ALTO, LOGO A SINISTRA E HAMBURGER A DESTRA. Prima galleggiava con 20px di margine su tre lati e angoli da 16px, e dentro `.left-part` stavano NELL'ORDINE hamburger e poi logo — cioe' l'opposto. ⚠️ `.right-part` e' VUOTA (misurata 0x0): non si puo' spostare l'hamburger li' dentro con il CSS. Si gira `.left-part` con `row-reverse` e la si apre a tutta larghezza con `space-between`: il logo finisce a sinistra e l'hamburger a destra senza toccare il markup. ⚠️ La soglia e' **820px** perche' e' li' che compare `.mobile-hamburger` (misurato: c'e' a 390 e 700, non a 820). Sopra, la barra resta com'era. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:819px){ .k-testa #masthead .header-wrap, .k-testa-chiara #masthead .header-wrap{ margin:0 !important;border-radius:0 !important; width:100% !important;max-width:none !important} .k-testa #masthead .header-wrap-inner, .k-testa-chiara #masthead .header-wrap-inner{ width:100% !important;max-width:none !important; padding:0 1rem !important;justify-content:space-between !important} /* ⚠️ row-reverse, non `order`: i due figli non sono fratelli diretti di `.header-wrap-inner` ma stanno tutti e due dentro `.left-part`. */ .k-testa #masthead .left-part, .k-testa-chiara #masthead .left-part{ width:100% !important;display:flex !important;flex-direction:row-reverse !important; justify-content:space-between !important;align-items:center !important} /* la barra si abbassa: senza gli angoli e i margini, 102px sono troppi */ .k-testa #masthead .header-wrap, .k-testa-chiara #masthead .header-wrap{min-height:0 !important} .k-testa #masthead .header-wrap-inner, .k-testa-chiara #masthead .header-wrap-inner{height:76px !important;min-height:0 !important} } /* ══════════════════════════════════════════════════════════════════════════ I MARGINI NEGATIVI DEI COSTRUTTORI, DOVE NESSUNO LI COMPENSA (3/9/2026) ⚠️⚠️ QUESTA REGOLA STA QUI E NON IN `home.css` PER UN MOTIVO PRECISO: `home.css` si carica solo su un ELENCO DI PAGINE SCRITTO A MANO in `functions.php`, e le pagine che questa regola deve aggiustare non ci sono. `caratteri.css`, `header.css` e `footer.css` invece sono su TUTTE le pagine (verificato pagina per pagina). Messa in `home.css` la correzione funzionava su una pagina su sei — e infatti la prima volta l'ho messa lì. IL GUASTO. Ohio mette `margin-left/right: var(--clb-grid-gutter-negative)` — che vale **−20px** — su `.elementor` e su `.vc_row`. È la convenzione dei costruttori di pagine: la riga esce di venti pixel per lato perché le colonne dentro hanno venti pixel di padding, e i due si annullano. Funziona FINCHÉ il contenitore genitore ha quel padding. Su sei pagine il genitore ha padding ZERO — `body`, `.single-post-layout`, `.entry-content` — e i margini negativi non compensano niente: il contenuto esce da **−20 a 1460** in una finestra da 1440. Misurato: su /licenze-software/ si scorre di lato di 20px per davvero; sulle altre `overflow-x:hidden` del body nasconde la barra ma **taglia 20px a destra** e sposta tutto di venti pixel a sinistra rispetto a barra e piede. Pagine: affitto-server, servizio-clouding, licenze-software, siti-web-fast-delivery, privacy-policy, cookie-policy. ⚠️ Si azzera il margine e NON si aggiunge padding al genitore: così il blocco torna 0→1440 e le colonne interne tengono il loro respiro, che è come si comportano le altre 94 pagine del sito. ⚠️ Niente `!important`: `body > .elementor` batte `.elementor` per specificità, e `.single-post-layout > .vc_row:not(.-nospace)` batte `.vc_row:not(.-nospace)`. Se servisse un `!important` vorrebbe dire che si sta sbagliando il bersaglio. ══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ `.site-content > .elementor` aggiunto il 26/10/2026: /richiedi/ non ha `k-home` e scorreva di lato di 20px. Misurato su venti pagine di ogni tipo: `.site-content` ha sempre padding zero, e le altre avevano gia' margine zero. */ body > .elementor, .site-content > .elementor, .single-post-layout > .elementor, .single-post-layout > .vc_row:not(.-nospace), .entry-content > .elementor, .entry-content > .vc_row:not(.-nospace){ margin-left:0;margin-right:0} /* ══════════════════════════════════════════════════════════════════════════ IL PANNELLO DI «SOFTWARE»: DUE COLONNE, A SINISTRA QUELLO CHE COSTRUIAMO, A DESTRA QUELLO CHE È GIÀ FATTO — 10/9/2026 Unendo Software e Prodotti in una voce sola il pannello è arrivato a sei gruppi, e ci ho provato tre volte prima di arrivarci: con gli elenchi dentro («così enorme», 608px), senza niente («così fa schifo», sei etichette in mezzo al vuoto), a metà. La risposta dell'utente è stata «troppi sottomenù»: il terzo livello se n'è andato dal menu — gli otto moduli, i quattro gestionali e i sei plugin stanno tutti su /software/, che li collega uno per uno — e restano sei collegamenti secchi. ⚠️⚠️ E VANNO SU DUE COLONNE, NON TRE. Sei voci sparse su tre colonne larghe 1058px lasciavano due terzi di pannello vuoto: è quello che faceva schifo, non le voci. Con due colonne il pannello si stringe e si riempie, e — cosa che tre colonne non potevano fare — la divisione diventa VERTICALE: a sinistra i tre servizi, a destra i tre prodotti, separati da un filetto. ⚠️ Il riempimento è `grid-auto-flow:column`: senza, la griglia riempie per righe e i due mestieri si mescolerebbero (servizio, prodotto, servizio…). ⚠️ La colonna colorata dell'area va piazzata a mano, se no il flusso per colonne se la porta dove capita. ⚠️ Il margine interno in cima ce l'hanno SOLO le due celle della prima riga, quelle che portano la dicitura: mettendolo sul pannello, la colonna colorata non toccherebbe più il bordo e sopra al magenta comparirebbe una striscia navy. ══════════════════════════════════════════════════════════════════════════ */ .k-testa #masthead .sub-menu.menu-depth-1:has(> li.k-gia-fatto), .k-testa-chiara #masthead .sub-menu.menu-depth-1:has(> li.k-gia-fatto){ grid-template-columns:240px repeat(2, minmax(14rem, 20rem)) !important; grid-template-rows:repeat(3, auto) !important; grid-auto-flow:column !important} .k-testa #masthead .sub-menu.menu-depth-1:has(> li.k-gia-fatto) > li.k-sub-area, .k-testa-chiara #masthead .sub-menu.menu-depth-1:has(> li.k-gia-fatto) > li.k-sub-area{ grid-column:1 !important;grid-row:1 / span 3 !important} /* il filetto verticale fra le due colonne: sta sulle tre celle di destra e, siccome le righe si toccano, i tre pezzi fanno una riga sola */ .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto:not(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto:not(.k-sub-area){ position:relative; border-left:1px solid rgba(255,255,255,.13) !important; padding-left:1.4rem !important; align-self:start !important} /* ⚠️⚠️ LA CATENA VA RICALCATA SU QUELLA CHE AZZERA I BORDI. Poco più su c'è `.k-testa #masthead .sub-menu:has(.k-sub-area) > li:not(.k-sub-area)` con `border:0 !important; margin:0 !important`: un id, QUATTRO classi — `:has()` e `:not()` contano il loro argomento — contro le tre di una catena semplice, che perdeva anche con `!important`. Ripetendo `:has()` e `:not()` le classi diventano cinque e passa. Il filetto a zero non dava nessun errore: solo non si vedeva. */ /* le due celle della prima riga fanno posto alla dicitura */ .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-rubrica-servizi:not(.k-sub-area), .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto.-primo:not(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-rubrica-servizi:not(.k-sub-area), .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto.-primo:not(.k-sub-area){ position:relative;padding-top:2.1rem !important} .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-rubrica-servizi:not(.k-sub-area)::before, .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto.-primo:not(.k-sub-area)::before, .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-rubrica-servizi:not(.k-sub-area)::before, .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto.-primo:not(.k-sub-area)::before{ /* ⚠️⚠️ `display:block` FORZATO: il tema spegne gli pseudo-elementi delle voci di menu (li usa per i suoi pallini), e la dicitura usciva con `display:none` — c'era, col testo e il colore giusti, e non si vedeva. Si trova solo con `getComputedStyle(li,'::before')`. */ display:block !important; position:absolute;top:.6rem; font-family:"Space Grotesk",sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none} /* ⚠️ `left` non è zero: la cella non ha margine interno, ce l'ha il collegamento dentro, quindi con `left:0` la dicitura partirebbe a sinistra dei titoli. A destra si somma il margine del filetto. */ .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-rubrica-servizi:not(.k-sub-area)::before, .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-rubrica-servizi:not(.k-sub-area)::before{ content:"Su misura, per voi";left:1.2rem} .k-testa #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto.-primo:not(.k-sub-area)::before, .k-testa-chiara #masthead .sub-menu:has(.k-sub-area) > li.k-gia-fatto.-primo:not(.k-sub-area)::before{ content:"Gi\00e0 fatti, da usare subito";left:2.6rem} /* Il piede del pannello a scomparsa: l'opzione «copyright» del tema scrive le sedi e la riga legale in due `` di fila, e senza questa regola si leggeva «Viale Europa 101© 2026 Kreita…» tutto attaccato (23/10/2026). */ .k-legale-sedi,.k-legale-riga{display:block} .k-legale-sedi{margin-bottom:.35em}