/* =============================================================================
Artwork Mega Menu — pannello desktop
-----------------------------------------------------------------------------
Il markup e' SEMPRE nel DOM, anche sotto la soglia desktop: Google indicizza in
mobile-first, e un link stampato solo per il desktop non verrebbe contato. Qui
sotto la soglia il pannello e' nascosto via CSS, quindi i link restano scansionabili.
Senza JS non compare nulla e resta il menu del tema: nessuna regressione.
========================================================================== */
.awmm{display:none}
html.awmm-on .awmm{display:block}
/* --- Due palette. Il pannello NON si sottrae al color change: segue la pagina, ed e'
la parte che rende l'effetto. Le variabili si scambiano sulle classi che il
plugin Color Change mette su . --- */
.awmm{
/* Fondo PIENO, non vetro: il pannello e' bianco o nero e basta. Con un fondo opaco
la sfocatura dietro non si vedrebbe, quindi e' stata tolta dal pannello (resta
sul velo, che sfoca la pagina). */
--awmm-bg: var(--awk-cc-bg, #ffffff);
--awmm-ink: #121212;
--awmm-ink-2: #55555a;
--awmm-ink-3: #96969c;
--awmm-line: rgba(0,0,0,.09);
--awmm-pill: rgba(0,0,0,.055);
--awmm-veil: rgba(10,10,12,.18);
--awmm-ease: cubic-bezier(.32,.72,0,1);
}
/* Inchiostro chiaro sulla pagina = pagina scura = pannello nero. */
html.awk-cc-ink-light .awmm{
--awmm-bg: var(--awk-cc-bg, #000000);
--awmm-ink: #ffffff;
--awmm-ink-2: rgba(255,255,255,.68);
--awmm-ink-3: rgba(255,255,255,.42);
--awmm-line: rgba(255,255,255,.12);
--awmm-pill: rgba(255,255,255,.10);
--awmm-veil: rgba(0,0,0,.34);
}
/* Superficie misurata sulla barra vera (vedi superficie() nel JS). Sta prima delle classi
di Color Change perche' a parita' di peso deve poter essere corretta da loro. */
html.awmm-scuro .awmm{
--awmm-bg: var(--awk-cc-bg, var(--awmm-bar, #000000));
--awmm-ink: #ffffff;
--awmm-ink-2: rgba(255,255,255,.68);
--awmm-ink-3: rgba(255,255,255,.42);
--awmm-line: rgba(255,255,255,.12);
--awmm-pill: rgba(255,255,255,.10);
--awmm-veil: rgba(0,0,0,.34);
}
html.awmm-chiaro .awmm{
--awmm-bg: var(--awk-cc-bg, var(--awmm-bar, #ffffff));
--awmm-ink: #121212;
--awmm-ink-2: #55555a;
--awmm-ink-3: #96969c;
--awmm-line: rgba(0,0,0,.09);
--awmm-pill: rgba(0,0,0,.055);
--awmm-veil: rgba(10,10,12,.18);
}
/* Ripiego per la barra dell'header quando Color Change non gira (pagine vecchie): li'
--awk-cc-bg non esiste e .navy e' trasparente, quindi il ripiego a bianco fisso metteva
una fascia chiara sopra un pannello nero. Questa variabile sta su perche' .navy
e il pannello vivono in rami diversi del documento e non possono ereditarsela.
L'ordine conta: le classi di Color Change, piu' avanti, devono poter cambiare idea. */
html{--awmm-bar:#ffffff}
html.awmm-scuro{--awmm-bar:#000000}
html.awk-cc-ink-light{--awmm-bar:#000000}
html.awk-cc-ink-dark{--awmm-bar:#ffffff}
/* --- Velo sulla pagina --- */
.awmm-veil{
position:fixed;inset:0;z-index:98;
background:var(--awmm-veil);
opacity:0;pointer-events:none;
transition:opacity .5s var(--awmm-ease);
}
html.awmm-open .awmm-veil{opacity:1;pointer-events:auto}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html.awmm-open .awmm-veil{
-webkit-backdrop-filter:blur(18px) saturate(150%);
backdrop-filter:blur(18px) saturate(150%);
}
}
/* --- Pannello: fisso sotto l'header, senza dipendere dalla struttura del template --- */
.awmm-panels{
position:fixed;top:var(--awmm-top,64px);
/* Il FONDO attraversa tutto lo schermo. E' il contenuto, piu' sotto, a restringersi
sulla misura dell'header. */
left:0;right:0;width:auto;
z-index:99;
height:0;overflow:hidden;
background:var(--awmm-bg);
/* Nessun bordo da chiuso. Con height:0 un bordo da 1px lascia comunque una riga
visibile: lo sfondo dell'elemento si estende sotto il bordo, quindi anche
"transparent" mostrava una striscia chiara sotto l'header a ogni scorrimento. */
border-bottom:0;
background-clip:padding-box;
color:var(--awmm-ink);
transition:height .58s var(--awmm-ease), background .4s var(--awmm-ease);
}
html.awmm-open .awmm-panels{border-bottom:1px solid var(--awmm-line)}
/* I pannelli sono impilati: align-items:start e' quello che impedisce alla griglia di
stirarli tutti all'altezza del piu' alto, cosi' ognuno mantiene la sua. */
/* Larghezza FISSA all'88% e centrata: e' la misura dell'header a riposo. Prima la
prendevo dall'header a ogni ricalcolo, ma scorrendo l'header si distende e il
contenuto si distendeva con lui. Qui resta uguale a se stesso, fermo o scrollato. */
.awmm-stack{display:grid;align-items:start;width:88%;margin:0 auto}
.awmm-panel{
grid-area:1/1;padding:52px 0 0;
opacity:0;visibility:hidden;
transition:opacity .3s ease, visibility 0s linear .3s;
}
.awmm-panel.is-on{opacity:1;visibility:visible;transition:opacity .35s ease .08s, visibility 0s}
.awmm-grid{display:grid;gap:clamp(36px,4vw,72px);align-items:start;
grid-template-columns:1.4fr .85fr .85fr minmax(320px,420px)}
/* Tre colonne: link grandi, una secondaria, preview. */
.awmm-grid.cols-3{grid-template-columns:1.4fr .9fr minmax(320px,420px)}
/* Solo link grandi e preview: la colonna dei link deve restare larga, non stretta.
Prima finiva nella griglia del Portfolio ed e' il motivo per cui Agenzia sembrava
schiacciata a sinistra. */
.awmm-grid.cols-bp{grid-template-columns:1.5fr minmax(320px,420px)}
/* Portfolio: elenco stretto a sinistra, griglia progetti larga a destra. */
.awmm-grid.cols-2{grid-template-columns:.85fr 2fr}
/* Occhiello: un , non un titolo. Il menu non e' contenuto editoriale e dei titoli
falsi sporcherebbero la struttura della pagina per motori e LLM. */
/* Colore pieno per tutti: la gerarchia e gli stati li fa l'opacita', non un grigio
fisso. Cosi' su fondo nero il testo e' bianco vero e non spento. */
.awmm-eyebrow{margin:0 0 18px;padding-bottom:6px;font-size:13px;color:var(--awmm-ink);opacity:.55;letter-spacing:.02em;
/* Gotham Light: e' la famiglia che il tema usa gia', il ripiego e' Graphik. */
font-family:"Gotham","Graphik",helvetica,sans-serif;font-weight:400}
.awmm-big{list-style:none;margin:0;padding:0}
.awmm-big > li{margin-bottom:2px}
.awmm-biglink{
display:inline-flex;align-items:baseline;gap:14px;
font-size:clamp(20px,1.7vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.25;
color:var(--awmm-ink);text-decoration:none;padding:5px 0;
transition:color .3s var(--awmm-ease);
}
.awmm-arrow{display:inline-block;font-size:.62em;font-weight:500;color:var(--awmm-ink);
opacity:0;transform:translateX(-10px);
transition:opacity .3s var(--awmm-ease), transform .35s var(--awmm-ease)}
.awmm-biglink:hover .awmm-arrow,.awmm-biglink:focus-visible .awmm-arrow{opacity:1;transform:translateX(0)}
/* I fratelli si spengono, l'hoverato resta pieno. */
.awmm-biglink{opacity:1;transition:opacity .3s var(--awmm-ease)}
.awmm-big:hover .awmm-biglink{opacity:.38}
.awmm-big:hover .awmm-biglink:hover{opacity:1}
.awmm-small{list-style:none;margin:0;padding:0}
.awmm-smalllink{
display:block;font-size:15px;font-weight:500;color:var(--awmm-ink);text-decoration:none;
padding:6px 0;line-height:1.4;opacity:1;
transition:opacity .25s ease, transform .3s var(--awmm-ease);
}
.awmm-smalllink:hover,.awmm-smalllink:focus-visible{opacity:1;transform:translateX(3px)}
/* --- Preview --- */
.awmm-pv{position:relative;overflow:hidden;border-radius:22px;aspect-ratio:16/11;background:#0d0d0f;
display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.awmm-pv-layer{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;
transform:scale(1.06);transition:opacity .5s var(--awmm-ease), transform .8s var(--awmm-ease)}
.awmm-pv-layer.is-on{opacity:1;transform:scale(1)}
.awmm-pv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.62))}
.awmm-pv-title,.awmm-pv-sub{position:relative;z-index:2;margin:0;color:#fff;transition:opacity .3s ease}
.awmm-pv-title{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.awmm-pv-sub{font-size:13px;color:rgba(255,255,255,.62);margin-top:6px}
/* --- Piede del pannello --- */
.awmm-foot{display:flex;align-items:center;gap:26px;border-top:1px solid var(--awmm-line);
margin-top:40px;padding:18px 0 26px}
.awmm-foot p{margin:0;font-size:12px;color:var(--awmm-ink);opacity:.9}
/* --- Comparsa scaglionata --- */
.awmm-rise{opacity:0}
.awmm-panel.is-on .awmm-rise{animation:awmm-rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 38ms + 60ms)}
@keyframes awmm-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* --- Pillola che segue la voce attiva nella nav del tema --- */
.awmm-pill{position:absolute;z-index:0;top:50%;height:32px;border-radius:99px;background:var(--awmm-pill);
opacity:0;transform:translateY(-50%);pointer-events:none;
transition:left .35s var(--awmm-ease), width .35s var(--awmm-ease), opacity .25s var(--awmm-ease)}
@media (prefers-reduced-motion:reduce){
.awmm-panels{transition:none}
.awmm-panel.is-on .awmm-rise{animation:none;opacity:1}
.awmm-veil{transition:none}
.awmm-pv-layer{transition:opacity .2s linear}
}
/* Con il mega attivo le tendine del tema si spengono: due sistemi di apertura sullo
stesso menu si contenderebbero l'hover. Restano nel DOM, quindi restano scansionabili. */
html.awmm-on #navigation ul li ul{display:none!important}
/* Il pannello viene spostato in fondo al body dal JS per uscire da #navigation, dove
ereditava float, dimensioni e allineamenti del menu legacy. Queste poche righe lo
isolano anche dalle regole globali del tema su
e . */
.awmm, .awmm *{box-sizing:border-box}
/* Il tema sottolinea i link in hover con !important in piu' punti (.white a:hover e
simili): qui va spento in tutti gli stati, altrimenti riaffiora al passaggio. */
.awmm a, .awmm a:hover, .awmm a:focus, .awmm a:active, .awmm a:visited{text-decoration:none!important}
.awmm p{margin:0}
.awmm ul{list-style:none;margin:0;padding:0}
.awmm li{float:none;width:auto;height:auto;line-height:inherit;padding:0;margin:0;text-align:left;border:0}
/* Palette di partenza secondo l'impostazione della pagina (campo dbt_menu del tema).
Da li' in poi comanda il Color Change. */
.awmm--dark{
--awmm-bg: var(--awk-cc-bg, #000000);
--awmm-ink: #ffffff;
--awmm-ink-2: rgba(255,255,255,.68);
--awmm-ink-3: rgba(255,255,255,.42);
--awmm-line: rgba(255,255,255,.12);
--awmm-pill: rgba(255,255,255,.10);
--awmm-veil: rgba(0,0,0,.34);
}
/* --- Portfolio: griglia progetti al posto della preview --- */
.awmm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.awmm-tile{position:relative;display:flex;align-items:flex-end;overflow:hidden;
border-radius:18px;aspect-ratio:4/3;padding:18px;
transition:transform .45s var(--awmm-ease)}
.awmm-tile:hover{transform:translateY(-6px) scale(1.02)}
.awmm-tile-img{position:absolute;inset:0;background-size:cover;background-position:center}
.awmm-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.awmm-tile-txt{position:relative;z-index:2;display:block;color:#fff}
.awmm-tile-txt b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.awmm-tile-txt i{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.66);margin-top:2px}
@media (prefers-reduced-motion:reduce){.awmm-tile{transition:none}}
/* Inchiostro scuro sulla pagina = pagina chiara = pannello bianco. Questa regola pesa
piu' di .awmm--dark, che e' solo il colore di partenza letto dall'impostazione della
pagina: da li' in poi comanda il Color Change, in entrambi i versi. */
html.awk-cc-ink-dark .awmm{
--awmm-bg: var(--awk-cc-bg, #ffffff);
--awmm-ink: #121212;
--awmm-ink-2: #55555a;
--awmm-ink-3: #96969c;
--awmm-line: rgba(0,0,0,.09);
--awmm-pill: rgba(0,0,0,.055);
--awmm-veil: rgba(10,10,12,.18);
}
/* Con il pannello aperto la riga sotto l'header taglierebbe in due una superficie che
deve leggersi come unica. Sparisce all'apertura e torna alla chiusura, con la stessa
morbidezza del resto. */
/* Colore e bordo dell'header cambiano insieme al pannello, senza scatti. */
.navy{transition:border-bottom-color .35s ease, background-color .35s ease}
html.awmm-open .navy{border-bottom-color:transparent!important}
/* Il tema colora i link con selettori piu' pesanti dei miei (il pannello ora vive nel
body, quindi ricade sotto le regole generali: il colore reso era #333 nonostante la
variabile fosse corretta). Qui il colore va imposto, altrimenti il testo non segue
la sezione. Le variabili restano l'unica fonte: cambia la palette, cambia tutto. */
.awmm .awmm-eyebrow,
.awmm .awmm-biglink,
.awmm .awmm-arrow,
.awmm .awmm-smalllink,
.awmm .awmm-foot p,
.awmm .awmm-foot a{color:var(--awmm-ink)!important}
/* Preview e tile hanno un fondo scuro loro: il testo resta bianco a prescindere. */
.awmm .awmm-pv-title,.awmm .awmm-pv-sub,.awmm .awmm-tile-txt b,.awmm .awmm-tile-txt i{color:#fff!important}
.awmm .awmm-pv-sub,.awmm .awmm-tile-txt i{opacity:.66}
/* Come per i grandi: a riposo il testo e' pieno, si spegne solo quello che NON stai
guardando. Prima i link piccoli partivano al 72% e su fondo nero leggevano grigi. */
.awmm-small:hover .awmm-smalllink{opacity:.45}
.awmm-small:hover .awmm-smalllink:hover{opacity:1}
/* Il link alla pagina madre del gruppo: stesso corpo degli altri ma un filo piu' marcato,
perche' e' il pillar e non una delle sue diramazioni. */
.awmm-smalllink--head{font-weight:600}
/* Header e pannello devono essere la stessa superficie: all'apertura la barra adotta il
colore della sezione, esattamente come il pannello. Doppia classe .navy.navy perche'
il Color Change colora l'header con !important quando e' agganciato allo scroll, e a
parita' di peso vincerebbe lui a seconda dell'ordine dei fogli. */
html.awmm-open .navy.navy{
background-color:var(--awk-cc-bg, var(--awmm-bar, #ffffff))!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Link nel piede del pannello, a destra della riga. */
.awmm-foot-links{margin-left:auto;display:flex;gap:22px}
.awmm-foot-links a{font-size:13px;font-weight:500;color:var(--awmm-ink)!important;opacity:.72;transition:opacity .2s ease}
.awmm-foot-links a:hover{opacity:1}
/* .navy e' larga l'88%, quindi colorare lei lascia scoperti i due lati dell'header.
Questa fascia va da bordo a bordo dietro la barra (z-index 99 contro il 100 di .navy,
quindi il logo e il pulsante restano sopra) e completa la superficie. */
html.awmm-open .awmm::before{
content:"";position:fixed;left:0;right:0;top:0;
height:var(--awmm-top,64px);
background:var(--awmm-bg);
z-index:99;pointer-events:none;
}
/* Il tema dimensiona i link con selettori piu' pesanti di una classe singola: senza
questa riga il 15px non arriverebbe, come era gia' successo col colore. */
.awmm .awmm-smalllink{font-size:15px!important}
/* Da 1024 a 1280 le quattro colonne stanno in circa 900px: con la preview a 320px fissi
e i distacchi ampi, alle due colonne centrali restavano poco piu' di 120px a testa e
ogni etichetta andava a capo due volte. Qui la preview si stringe, i distacchi si
accorciano e le centrali guadagnano spazio. */
@media (min-width:994px) and (max-width:1280px){
/* Quattro colonne in circa 900px non stanno: la preview si prende 260px che a queste
larghezze servono al testo, e le etichette lunghe andavano a capo tre o quattro
volte. Sotto i 1280 la preview esce e restano tre colonne vere. */
.awmm-grid:not(.cols-3):not(.cols-2):not(.cols-bp){
gap:34px;
grid-template-columns:1.2fr 1fr 1fr;
}
.awmm-grid:not(.cols-2) > div:last-child:has(.awmm-pv){display:none}
.awmm-biglink{font-size:clamp(18px,1.75vw,22px)}
.awmm .awmm-smalllink{font-size:14px!important}
}