/**
* GOYN — Header
*
* Fonte: src/components/Header.jsx del progetto React (446 righe, 31/07/2026).
*
* ═══════════════════════════════════════════════════════════════════════════
* REGOLA DI ISOLAMENTO
* ═══════════════════════════════════════════════════════════════════════════
*
* Tutto è dentro `.goyn-header`, come prescrive assets/css/base.css del child
* theme. Nessun selettore globale, nessun `a {}` o `button {}` non prefissato:
* colpirebbero anche i widget di terze parti e l'interfaccia dell'editor.
*
* ═══════════════════════════════════════════════════════════════════════════
* TOKEN RIUSATI, NON RIDEFINITI
* ═══════════════════════════════════════════════════════════════════════════
*
* Dal child theme: --goyn-pad, --goyn-ease, --goyn-ease-curtain, --goyn-dur*,
* --goyn-z-header, --goyn-petrol-deep, --goyn-cream-12, --goyn-cream-50, e le
* classi tipografiche .goyn-label (Oswald), .goyn-display (Anton),
* .goyn-accent (Playfair). La media query dei 560px non è riscritta: le icone
* secondarie usano .goyn-hide-small, già in responsive.css.
*
* ═══════════════════════════════════════════════════════════════════════════
* LE SEI COSTANTI LOCALI
* ═══════════════════════════════════════════════════════════════════════════
*
* Sono i sei valori che Header.jsx usa e che NON hanno un token nella palette.
* Stanno qui e non in tokens.css perché appartengono solo all'header:
*
* 1. --goyn-h-text-dark #EDE7D8 — il crema del testo sulla barra
* scura. NON è --goyn-cream (#E9E5D9): è un
* valore a sé, verificato sull'originale.
* 2. --goyn-h-bg-compact-dark rgba(12,36,41,.82) — petrol abisso all'82%
* 3. --goyn-h-bg-compact-light rgba(247,244,236,.9) — #F7F4EC non è in
* palette
* 4. --goyn-h-icons-over-photo #F4F1EA — icone della variante light-icons
* 5. --goyn-h-tint-* le componenti RGB della pastiglia, più
* --goyn-h-ring-alpha (.35) per il bordo.
* Come triplette e non come quattro token
* rgba() quasi identici: l'originale usa lo
* stesso colore a due opacità diverse.
* 6. --goyn-h-logo-ratio 377/297, le proporzioni di logo.png. Serve
* alla variante mascherata, che non è un ![]()
* e quindi non ha proporzioni proprie.
*
* ═══════════════════════════════════════════════════════════════════════════
* FUNZIONA SENZA JAVASCRIPT
* ═══════════════════════════════════════════════════════════════════════════
*
* header.js aggiungerà `goyn-h-js` a . Tutto ciò che richiede script è
* scritto in modo da degradare, non da sparire:
*
* • il menu mobile è un blocco normale nel flusso; diventa pannello a
* comparsa solo sotto `html.goyn-h-js`;
* • l'hamburger è nascosto senza JavaScript;
* • la pastiglia che scivola ha un ripiego in puro :hover, disattivato quando
* lo script prende il controllo;
* • nessuna regola di base parte da `opacity: 0`. Le animazioni d'entrata
* vivono dentro i @keyframes: se non partono, l'header è già visibile.
*/
/* ============================================================
1. Radice, costanti locali e mappa delle varianti
============================================================ */
.goyn-header {
/* --- le sei costanti locali (vedi l'intestazione) --- */
--goyn-h-text-dark: #ede7d8;
--goyn-h-bg-compact-dark: rgba(12, 36, 41, 0.82);
--goyn-h-bg-compact-light: rgba(247, 244, 236, 0.9);
--goyn-h-icons-over-photo: #f4f1ea;
--goyn-h-tint-dark: 232 195 159; /* pesca */
--goyn-h-tint-light: 31 83 93; /* petrol */
--goyn-h-ring-alpha: 0.35;
/* Proporzioni di logo.png, 377 × 297, come numero puro e non come frazione
`377 / 297`. Serve a moltiplicarlo in una calc(): vedi la nota sul logo
mascherato, dove `aspect-ratio` non basta. */
--goyn-h-logo-ratio: 1.26936;
/* --- valori sovrascritti dai controlli dell'editor --- */
--goyn-h-accent-dark: var(--goyn-peach);
--goyn-h-accent-light: var(--goyn-rust);
--goyn-h-text-light: var(--goyn-petrol);
--goyn-h-panel-bg: var(--goyn-petrol-deep);
--goyn-h-panel-text: var(--goyn-cream);
--goyn-h-logo-h: 74px;
--goyn-h-logo-h-compact: 50px;
/*
* Altezza del logo in questo momento. Una sola variabile, commutata da
* `.is-compact`: senza di essa l'altezza e la larghezza calcolata del logo
* mascherato leggerebbero variabili diverse, e a barra stretta la larghezza
* resterebbe quella grande.
*
* I fallback nelle var() non sono ornamentali: Elementor emette la proprietà
* solo quando il controllo ha un valore, quindi in un contesto in cui il CSS
* del documento non è ancora stato generato la variabile può non esistere.
*/
--goyn-h-logo-now: var(--goyn-h-logo-h, 74px);
/* --- misure della barra, dall'originale --- */
--goyn-h-pad-y: 17px;
--goyn-h-pad-y-compact: 9px;
--goyn-h-fill-alpha: 0.14;
/* Ripiego se la classe della variante non c'è sul body: un contesto in cui
body_class non passa (un template minimale, un'anteprima particolare) non
deve produrre bordi con colori non validi. Si usa la variante scura, che è
anche il default del sito. */
--goyn-h-accent: var(--goyn-h-accent-dark);
--goyn-h-tint: var(--goyn-h-tint-dark);
--goyn-h-bg-compact: var(--goyn-h-bg-compact-dark);
color: var(--goyn-h-text-dark);
position: relative;
z-index: var(--goyn-z-header);
display: block;
/* Il fondo pieno compare SOLO a barra stretta: in cima alla pagina l'header
è del tutto trasparente, senza sfumatura. È una scelta dell'originale,
annotata lì con un commento esplicito. */
background: transparent;
/*
* ⚠️⚠️ QUESTO ELEMENTO NON DEVE AVERE `transform`, `filter`, `backdrop-filter`
* NÉ `will-change` DI QUELLE PROPRIETÀ, e non è una preferenza di stile.
* Il pannello del menu mobile è un suo FIGLIO in `position: fixed`, e
* qualunque di quelle proprietà su un antenato lo rende il BLOCCO
* CONTENITORE del figlio fisso: `inset: 0` non si misura più sulla finestra
* ma su questa barra.
*
* Misurato su una finestra da 420×763: scorrendo, il pannello del menu
* passava da 763px a 130px di altezza e nessuna delle cinque voci era
* visibile. Il fondo, la sfocatura e la traslazione stanno quindi sulla
* BARRA, che è l'elemento visibile; questa resta una cornice trasparente il
* cui unico compito è tenere il `position: fixed` e lo `z-index`.
*/
transition: none;
}
.goyn-header--sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
}
/**
* Le tre varianti.
*
* ⚠️ La variante è scritta SUL WRAPPER (`goyn-header--v-*`), non sul body, e la
* ragione è concreta: dentro il Theme Builder il template dell'header non è
* una pagina, quindi `body_class` non emette nessuna classe di variante. Con
* le regole agganciate al body, nell'editor non si applicava alcuna variante
* e restavano i colori di ripiego — testo crema su fondo bianco, illeggibile.
*
* La classe sul body resta, ed è tutt'altro che inutile: serve alle sezioni
* SOTTO l'header, che possono così sapere se sopra di loro c'è una barra
* trasparente chiara o scura. Ma non è più l'header a dipenderne.
*
* Le due classi vengono dallo stesso risolutore, quindi non possono
* discordare.
*
* Specificità: `.goyn-header--v-light` vale come `.goyn-header`, quindi decide
* l'ordine nel file. Questi blocchi stanno dopo quello di ripiego, di proposito.
*/
/* --- variante scura --- */
.goyn-header--v-dark {
--goyn-h-accent: var(--goyn-h-accent-dark);
--goyn-h-tint: var(--goyn-h-tint-dark);
--goyn-h-bg-compact: var(--goyn-h-bg-compact-dark);
color: var(--goyn-h-text-dark);
}
/* --- varianti chiare: identiche, tranne le icone --- */
.goyn-header--v-light,
.goyn-header--v-light-icons {
--goyn-h-accent: var(--goyn-h-accent-light);
--goyn-h-tint: var(--goyn-h-tint-light);
--goyn-h-bg-compact: var(--goyn-h-bg-compact-light);
color: var(--goyn-h-text-light);
}
/*
* Il fondo entra solo a barra stretta — e sta sulla BARRA, non sulla cornice: vedi
* l'avvertenza in testa a `.goyn-header`. La barra occupa tutta la larghezza, quindi
* il risultato a schermo è identico.
*/
.goyn-header.is-compact .goyn-header__bar {
background: var(--goyn-h-bg-compact);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/*
* Nascondere l'header scorrendo verso il basso. La transform sta nel foglio e non
* nello script — il JavaScript aggiunge solo la classe — e sulla BARRA e non sulla
* cornice, per la ragione di sopra.
*/
.goyn-header.is-hidden .goyn-header__bar {
transform: translateY(-150px);
}
/*
* ⚠️ Con la barra traslata via, la cornice resta dov'è: è trasparente ma
* intercetterebbe i clic in cima alla pagina, su una fascia alta come l'header e
* ormai vuota. Quando la traslazione era sulla cornice il problema non c'era,
* perché se ne andava tutta insieme.
*/
.goyn-header.is-hidden {
pointer-events: none;
}
/* A menu aperto l'header non si nasconde, o si porterebbe via il pannello. */
.goyn-header.is-hidden.is-panel-open {
pointer-events: auto;
}
.goyn-header.is-hidden.is-panel-open .goyn-header__bar {
transform: none;
}
/* ============================================================
2. La barra
============================================================ */
.goyn-header__bar {
display: flex;
align-items: center;
gap: 40px;
padding: var(--goyn-h-pad-y) var(--goyn-pad);
/*
* Le transizioni di fondo, sfocatura e traslazione erano sulla cornice e sono
* scese qui insieme alle proprietà. Stessa durata, stesso risultato a schermo.
*/
transition:
padding var(--goyn-dur-slow) var(--goyn-ease),
background var(--goyn-dur-slow) var(--goyn-ease),
backdrop-filter var(--goyn-dur-slow) var(--goyn-ease),
transform var(--goyn-dur-slow) var(--goyn-ease);
}
.goyn-header.is-compact .goyn-header__bar {
padding-top: var(--goyn-h-pad-y-compact);
padding-bottom: var(--goyn-h-pad-y-compact);
}
/* ============================================================
3. Logo
============================================================ */
.goyn-header__logo {
flex: none;
display: block;
line-height: 0;
transform-origin: left center;
transition: transform var(--goyn-dur-fast) var(--goyn-ease);
}
.goyn-header__logo:hover {
transform: scale(1.04);
}
/**
* ⚠️ Selettore discendente, non è ridondanza.
*
* Elementor dichiara `.elementor img { height: auto; max-width: 100% }` nel suo
* frontend.min.css. La sua specificità è (0,1,1) e batte una classe sola
* (0,1,0): con `.goyn-header__logo-img` da sola, l'altezza veniva sostituita da
* `auto` e il logo si mostrava alla dimensione naturale del PNG, 297px.
*
* Il caso era insidioso perché colpiva solo la variante scura: quella chiara
* usa uno `` mascherato, che nessuna regola su `img` può raggiungere. Il
* risultato era un header corretto sui contatti e rotto sui prodotti.
*
* `.goyn-header .goyn-header__logo-img` fa (0,2,0) e vince. `.elementor img` è
* l'unica regola per tag di Elementor che interferisce con questo widget:
* verificato sul frontend.min.css installato.
*/
.goyn-header .goyn-header__logo-img {
display: block;
width: auto;
height: var(--goyn-h-logo-now);
max-width: none;
transition: height var(--goyn-dur-slow) var(--goyn-ease);
}
/**
* Logo ricolorato per le varianti chiare.
*
* Il PNG bianco fa da maschera su un fondo del colore del testo. Così il file è
* uno solo: mantenerne due identici nella forma ma diversi nel colore è un modo
* sicuro per farli divergere.
*
* L'immagine è passata dal markup come --goyn-h-logo-src, perché l'URL lo
* conosce solo PHP.
*
* ⚠️ LARGHEZZA CALCOLATA, NON `aspect-ratio`.
*
* La prima versione usava `height` + `aspect-ratio` e il logo occupava tutta
* la larghezza dell'header. Non era un errore di variabili: su una scatola di
* livello blocco `width: auto` significa "riempi il contenitore", e vince sul
* rapporto d'aspetto — `aspect-ratio` deriva una dimensione dall'altra solo
* quando quella dimensione è libera di adattarsi al contenuto. Il risultato
* era una scatola larga quanto la barra, alta 74px, con la maschera
* ridimensionata al centro: il logo appariva centrato e la navigazione
* spinta via.
*
* Qui la larghezza è calcolata dall'altezza. Deterministico, senza dipendere
* da come il motore risolve `auto`. Un `![]()
` non ha il problema: ha
* proporzioni proprie, quindi `width: auto` funziona.
*/
/* Stessa forma discendente del blocco sopra, per coerenza: le due varianti del
logo devono avere la stessa forza nella cascata, o si comportano diversamente
al primo stile aggiunto da un aggiornamento. */
.goyn-header .goyn-header__logo-mask {
display: block;
height: var(--goyn-h-logo-now);
width: calc(var(--goyn-h-logo-now) * var(--goyn-h-logo-ratio));
background-color: currentColor;
-webkit-mask-image: var(--goyn-h-logo-src);
mask-image: var(--goyn-h-logo-src);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition:
height var(--goyn-dur-slow) var(--goyn-ease),
width var(--goyn-dur-slow) var(--goyn-ease);
}
/* A barra stretta cambia una sola variabile: altezza e larghezza calcolata
seguono entrambe, senza doverle elencare due volte. */
.goyn-header.is-compact {
--goyn-h-logo-now: var(--goyn-h-logo-h-compact, 50px);
}
/* Ripiego se il controllo del logo è vuoto: il nome del sito, non il vuoto. */
.goyn-header__logo-text {
display: block;
font-size: 26px;
line-height: 1;
}
/* ============================================================
4. Navigazione desktop
============================================================ */
.goyn-header__nav {
position: relative;
margin-left: 2px;
}
.goyn-header__list {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.goyn-header__item {
margin: 0;
padding: 0;
}
.goyn-header__link {
position: relative;
display: block;
padding: 10px 15px;
border-radius: 100px;
/* La famiglia e il maiuscolo arrivano da .goyn-label del child theme; qui
solo ciò che è specifico dell'header. Restano sovrascrivibili dal
controllo di tipografia del widget. */
font-size: 13px;
font-weight: 500;
letter-spacing: 1.6px;
color: inherit;
}
.goyn-header__item.is-current .goyn-header__link {
font-weight: 600;
color: var(--goyn-h-accent);
}
/* --- anello della voce corrente ---
Nell'originale l'anello scompare quando il mouse è su QUELLA voce, perché
viene sostituito dalla pastiglia. Passando su un'altra voce resta. */
.goyn-header__item.is-current .goyn-header__link::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgb(var(--goyn-h-tint) / var(--goyn-h-ring-alpha));
border-radius: 100px;
opacity: 1;
transition: opacity var(--goyn-dur-fast) var(--goyn-ease);
pointer-events: none;
}
.goyn-header__item.is-current .goyn-header__link:hover::before,
.goyn-header__item.is-current .goyn-header__link:focus-visible::before {
opacity: 0;
}
/* --- pastiglia: ripiego senza JavaScript ---
Compare e scompare sul posto. Il movimento da una voce all'altra richiede di
misurare le posizioni, cosa che solo lo script può fare. */
.goyn-header__link::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgb(var(--goyn-h-tint) / var(--goyn-h-ring-alpha));
border-radius: 100px;
background: rgb(var(--goyn-h-tint) / var(--goyn-h-fill-alpha));
opacity: 0;
transition: opacity var(--goyn-dur-fast) var(--goyn-ease);
pointer-events: none;
}
.goyn-header__link:hover::after,
.goyn-header__link:focus-visible::after {
opacity: 1;
}
/* --- pastiglia che scivola: la muove header.js ---
Larghezza, altezza e posizione sono scritte dallo script; qui c'è solo
l'aspetto e la transizione con cui si sposta da una voce all'altra.
Nell'originale era una molla di Framer Motion (420/34/0.7); qui è una
transizione, ed è la semplificazione dichiarata in docs/WIDGETS-GUIDE.md. */
.goyn-header__pill {
position: absolute;
top: 0;
left: 0;
border: 1px solid rgb(var(--goyn-h-tint) / var(--goyn-h-ring-alpha));
border-radius: 100px;
background: rgb(var(--goyn-h-tint) / var(--goyn-h-fill-alpha));
opacity: 0;
pointer-events: none;
transition:
transform var(--goyn-dur-fast) var(--goyn-ease),
width var(--goyn-dur-fast) var(--goyn-ease),
height var(--goyn-dur-fast) var(--goyn-ease),
opacity var(--goyn-dur-fast) var(--goyn-ease);
}
/**
* Il ripiego si spegne quando la pastiglia mobile è ATTIVA, non quando lo
* script è presente.
*
* ⚠️ Qui prima c'era `.goyn-h-js .goyn-header__link::after`, ed era un errore:
* `goyn-h-js` dice soltanto che il JavaScript c'è. Con il controllo
* "Pastiglia che scivola" spento, header.js non muove nessuna pastiglia e
* quella regola spegneva l'unico meccanismo rimasto — zero pastiglie invece
* di quella "sul posto" che il controllo promette.
*
* `is-pill-live` la aggiunge header.js solo dopo aver verificato il controllo
* e la presenza della nav: è l'affermazione giusta al posto giusto.
*/
.goyn-header.is-pill-live .goyn-header__link::after {
display: none;
}
/* --- testo che ruota in hover ---
Due copie impilate in un contenitore alto una riga: in hover il contenitore
scorre di metà, la seconda copia entra dal basso con il colore d'accento. */
.goyn-header__swap {
position: relative;
z-index: 2;
display: block;
overflow: hidden;
height: 1.15em;
}
.goyn-header__swap-inner {
display: flex;
flex-direction: column;
transition: transform var(--goyn-dur) var(--goyn-ease);
}
.goyn-header__swap-inner > span {
display: block;
height: 1.15em;
line-height: 1.15em;
}
.goyn-header__link:hover .goyn-header__swap-inner,
.goyn-header__link:focus-visible .goyn-header__swap-inner {
transform: translateY(-50%);
}
.goyn-header__swap-alt {
color: var(--goyn-h-accent);
}
/* Avviso mostrato solo nell'editor, quando la posizione del menu è vuota. */
.goyn-header__notice {
margin: 0;
padding: 8px 14px;
border: 1px dashed currentColor;
border-radius: 4px;
font-size: 12px;
opacity: 0.75;
}
/* ============================================================
5. Icone
============================================================ */
.goyn-header__tools {
display: flex;
align-items: center;
gap: 18px;
margin-left: auto;
}
/**
* Icone della variante "chiaro con icone bianche".
*
* Esiste per una ragione precisa, dalla pagina Contatti: la nav sta su fondo
* crema ma le icone a destra cadono su una fotografia che va dal cielo ai
* capelli. Senza l'ombra sparirebbero sul chiaro.
*
* Solo a barra NON stretta: appena compare il fondo pieno, l'ombra non serve
* più e sporcherebbe.
*/
.goyn-header--v-light-icons:not(.is-compact) .goyn-header__tools {
color: var(--goyn-h-icons-over-photo);
filter: drop-shadow(0 1px 4px rgba(12, 36, 41, 0.5));
}
.goyn-header__icon {
position: relative;
display: block;
/* 7px in orizzontale come l'originale; su mobile l'area di tocco si allarga
a 44px (vedi la sezione responsive). */
padding: 7px;
border-radius: 50%;
line-height: 0;
color: inherit;
}
.goyn-header__icon-halo {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(232, 195, 159, 0.16);
opacity: 0;
transform: scale(0.4);
transition:
opacity var(--goyn-dur-fast) var(--goyn-ease),
transform var(--goyn-dur-fast) var(--goyn-ease);
}
.goyn-header__icon:hover .goyn-header__icon-halo,
.goyn-header__icon:focus-visible .goyn-header__icon-halo {
opacity: 1;
transform: scale(1);
}
.goyn-header__icon-svg {
position: relative;
display: block;
transition:
transform var(--goyn-dur-fast) var(--goyn-ease),
color var(--goyn-dur-fast) var(--goyn-ease);
}
.goyn-header__icon:hover .goyn-header__icon-svg,
.goyn-header__icon:focus-visible .goyn-header__icon-svg {
transform: translateY(-2px);
color: var(--goyn-peach);
}
.goyn-header__icon:active .goyn-header__icon-svg {
transform: scale(0.92);
}
/* --- badge del carrello ---
Il markup e il conteggio arrivano con class-cart.php. Lo stile è qui perché
appartiene all'header, così quel blocco non dovrà toccare il CSS. */
/*
* ⚠️ A zero il badge non si stampa mai: si NASCONDE. Il markup c'è sempre perché è
* l'elemento che i frammenti di WooCommerce sostituiscono a ogni aggiunta al
* carrello, e un frammento può solo rimpiazzare qualcosa che già esiste — con il
* badge stampato solo a carrello pieno, il primo "aggiungi" non avrebbe niente
* da aggiornare. Vedi class-cart.php.
*/
.goyn-header__badge[data-goyn-count='0'] {
display: none;
}
.goyn-header__badge {
position: absolute;
top: -3px;
right: -4px;
display: flex;
align-items: center;
justify-content: center;
min-width: 17px;
height: 17px;
border-radius: 9px;
background: var(--goyn-peach);
color: var(--goyn-petrol-deep);
font-size: 10px;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
}
.goyn-header__icon:hover .goyn-header__badge {
transform: scale(1.15);
}
/* ============================================================
6. Hamburger
============================================================ */
/**
* Nascosto per definizione, in ogni larghezza.
*
* Diventa visibile in un solo caso: sotto gli 860px E con lo script presente
* (vedi la sezione Breakpoint). Senza JavaScript sarebbe un bottone morto, e il
* menu mobile è comunque già aperto nel flusso della pagina.
*/
.goyn-header__burger {
position: relative;
display: none;
/* 44px: è il comando più usato su mobile, a 34 si sbaglia il tocco.
(Nota dell'originale, conservata.) */
width: 44px;
height: 44px;
padding: 0;
border: none;
background: none;
color: inherit;
cursor: pointer;
place-items: center;
}
.goyn-header__burger-bars {
display: grid;
gap: 6px;
}
.goyn-header__burger-bar {
display: block;
width: 22px;
height: 1.6px;
border-radius: 2px;
background: currentColor;
transition: transform var(--goyn-dur-fast) var(--goyn-ease);
}
/* Le due barre convergono in una X. */
.goyn-header.is-panel-open .goyn-header__burger-bar:first-child {
transform: translateY(3.8px) rotate(45deg);
}
.goyn-header.is-panel-open .goyn-header__burger-bar:last-child {
transform: translateY(-3.8px) rotate(-45deg);
}
/* ============================================================
7. Filo luminoso
------------------------------------------------------------
Un gradiente largo il 32% che attraversa il bordo inferiore in 7 secondi.
CSS puro: un loop decorativo non ha bisogno di JavaScript.
============================================================ */
.goyn-header__glow {
position: absolute;
bottom: -1px;
left: 0;
width: 32%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--goyn-h-accent), transparent);
opacity: 0;
transition: opacity var(--goyn-dur-slow) var(--goyn-ease);
pointer-events: none;
}
.goyn-header.is-compact .goyn-header__glow {
opacity: 0.75;
animation: goyn-h-glow 7s var(--goyn-ease) infinite;
}
@keyframes goyn-h-glow {
from {
transform: translateX(-40%);
}
to {
transform: translateX(240%);
}
}
/* ============================================================
8. Menu mobile
------------------------------------------------------------
Due comportamenti, e la differenza è tutta nella presenza dello script.
SENZA JavaScript: un blocco normale sotto la barra, sempre visibile e
navigabile. CON JavaScript: un pannello a tutto schermo che si apre con una
tendina.
============================================================ */
.goyn-header__panel {
display: none;
background: var(--goyn-h-panel-bg);
color: var(--goyn-h-panel-text);
}
.goyn-header__panel-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.goyn-header__panel-item {
margin: 0;
}
.goyn-header__panel-link {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--goyn-cream-12);
font-size: clamp(30px, 9vw, 44px);
line-height: 1.18;
color: var(--goyn-h-panel-text);
}
.goyn-header__panel-item.is-current .goyn-header__panel-link {
color: var(--goyn-h-accent-dark);
}
.goyn-header__panel-num {
flex: none;
font-size: 12px;
letter-spacing: 2px;
color: var(--goyn-h-accent-dark);
}
.goyn-header__panel-utils {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-top: 22px;
}
.goyn-header__panel-util {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 0 18px;
border: 1px solid rgba(233, 229, 217, 0.3);
border-radius: 100px;
background: none;
color: var(--goyn-h-panel-text);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 2px;
cursor: pointer;
}
.goyn-header__panel-util:hover,
.goyn-header__panel-util:focus-visible {
border-color: var(--goyn-h-accent-dark);
color: var(--goyn-h-accent-dark);
}
.goyn-header__panel-foot {
padding-top: 28px;
}
.goyn-header__panel-tagline {
margin: 0;
font-size: 19px;
color: var(--goyn-h-accent-dark);
}
.goyn-header__panel-email {
margin: 16px 0 0;
font-size: 11px;
letter-spacing: 2px;
color: var(--goyn-cream-50);
}
/* ============================================================
9. Breakpoint
------------------------------------------------------------
860px è la soglia principale del progetto, la stessa del child theme e di
GOYN.MOBILE in core.js. Qui è una media query e non JavaScript: entrambe le
navigazioni sono nel DOM e il CSS decide quale mostrare. L'originale React
smontava la nav desktop con useMedia; farlo qui sarebbe JavaScript gratuito
e un primo paint peggiore.
============================================================ */
@media (max-width: 860px) {
.goyn-header__bar {
gap: 16px;
}
.goyn-header__nav {
display: none;
}
.goyn-header__panel {
display: block;
padding: 18px var(--goyn-pad) 34px;
}
/* L'hamburger compare solo qui, e solo con lo script. */
.goyn-h-js .goyn-header__burger {
display: grid;
}
/* Area di tocco più generosa: 7px di padding su un'icona da 20px fanno 34px,
sotto la soglia di 44px raccomandata per il dito. */
.goyn-header__icon {
padding: 12px;
}
/* --- con lo script: il pannello diventa una tendina a tutto schermo --- */
.goyn-h-js .goyn-header__panel {
position: fixed;
inset: 0;
z-index: -1;
display: flex;
flex-direction: column;
padding-top: 96px;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.55s var(--goyn-ease-curtain);
}
.goyn-h-js .goyn-header.is-panel-open .goyn-header__panel {
clip-path: inset(0 0 0 0);
}
.goyn-h-js .goyn-header__panel-foot {
margin-top: auto;
}
}
@media (min-width: 861px) {
/* Sopra la soglia il pannello non serve: resta fuori dal DOM visibile e non
riceve il focus con il tasto Tab. */
.goyn-header__panel {
display: none;
}
}
/* I 560px non sono riscritti qui: cerca e area clienti portano
.goyn-hide-small, già definita in responsive.css del child theme. */
/* ============================================================
10. Animazione d'entrata
------------------------------------------------------------
Fondamentale: nessuna regola di base mette `opacity: 0`. Lo stato iniziale
vive DENTRO i @keyframes, così se l'animazione non parte — script assente,
movimento ridotto, browser vecchio — l'header è già al suo posto visibile.
⚠️ `backwards` e non `both`, e la ragione non è cosmetica. Con `forwards`
un'animazione continua a imporre il proprio valore finale anche dopo la
fine, e le animazioni hanno la precedenza sulle dichiarazioni normali:
`transform: translateY(0)` resterebbe agganciato per sempre, rompendo sia
lo scorrimento che nasconde l'header (`.is-hidden`) sia l'ingrandimento
del logo in hover. Con `backwards` lo stato iniziale è tenuto solo durante
il ritardo, e a fine animazione l'elemento torna al suo stile naturale.
============================================================ */
.goyn-header--entrance {
animation: goyn-h-enter 0.8s var(--goyn-ease) backwards;
}
.goyn-header--entrance .goyn-header__logo {
animation: goyn-h-fade-down 0.7s var(--goyn-ease) 0.05s backwards;
}
.goyn-header--entrance .goyn-header__item {
/* Cascata: 0.18s di attesa, poi 0.07s fra una voce e l'altra, come lo
staggerChildren dell'originale. */
animation: goyn-h-fade-down 0.7s var(--goyn-ease) backwards;
animation-delay: calc(0.18s + var(--goyn-h-i, 0) * 0.07s);
}
.goyn-header--entrance .goyn-header__item:nth-child(1) { --goyn-h-i: 0; }
.goyn-header--entrance .goyn-header__item:nth-child(2) { --goyn-h-i: 1; }
.goyn-header--entrance .goyn-header__item:nth-child(3) { --goyn-h-i: 2; }
.goyn-header--entrance .goyn-header__item:nth-child(4) { --goyn-h-i: 3; }
.goyn-header--entrance .goyn-header__item:nth-child(5) { --goyn-h-i: 4; }
.goyn-header--entrance .goyn-header__item:nth-child(6) { --goyn-h-i: 5; }
.goyn-header--entrance .goyn-header__item:nth-child(7) { --goyn-h-i: 6; }
.goyn-header--entrance .goyn-header__tools {
animation: goyn-h-fade-down 0.7s var(--goyn-ease) 0.42s backwards;
}
@keyframes goyn-h-enter {
from {
transform: translateY(-140px);
}
to {
transform: translateY(0);
}
}
@keyframes goyn-h-fade-down {
from {
opacity: 0;
transform: translateY(-14px);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
/**
* Il sipario d'apertura.
*
* Nell'originale la discesa dell'header era subordinata alla prop `ready`, che
* diventava vera alla fine dell'intro. Senza questa regola la cascata parte
* subito, cioè DIETRO la tenda chiusa: quando la tenda si apre l'header è già
* arrivato, e l'ingresso non si vede.
*
* Finché il sipario è in scena il body porta `goyn-intro-active` (lo mette
* chrome.js del tema) e le animazioni restano al fotogramma zero. Quando la
* classe cade, ripartono da sole. Nessuna riga di JavaScript, ed è la stessa
* soluzione adottata nell'hero (hero.css, sezione 9).
*/
body.goyn-intro-active .goyn-header--entrance,
body.goyn-intro-active .goyn-header--entrance .goyn-header__logo,
body.goyn-intro-active .goyn-header--entrance .goyn-header__item,
body.goyn-intro-active .goyn-header--entrance .goyn-header__tools {
animation-play-state: paused;
}
/* ============================================================
11. Movimento ridotto
------------------------------------------------------------
Il progetto rispetta prefers-reduced-motion e non è un'opzione disattivabile
dal cliente. Si spengono le animazioni, non le funzioni: l'header resta
completo e usabile.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.goyn-header,
.goyn-header *,
.goyn-header::before,
.goyn-header::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.goyn-header__glow {
display: none;
}
}
/* ============================================================
12. Editor di Elementor
------------------------------------------------------------
`position: fixed` va neutralizzato o l'header copre la sezione che si sta
modificando. La regola esiste già nel child theme (assets/css/editor.css,
caricato dentro l'anteprima) e agisce su `.goyn-header`: è il motivo per cui
la radice si chiama così.
Qui si aggiunge solo il pannello mobile, che nell'editor va tenuto chiuso per
non coprire il canvas.
============================================================ */
.elementor-editor-active .goyn-header__panel,
.elementor-editor-preview .goyn-header__panel {
position: static;
clip-path: none;
}
/**
* Fondo di cortesia sotto la variante scura, SOLO nell'editor.
*
* La variante scura è pensata per stare sopra un hero a immagine piena, e in
* cima alla pagina la barra è trasparente per scelta. Nel canvas dell'editor,
* che è bianco, questo significa testo crema su bianco: illeggibile, e il
* cliente non può modificare ciò che non vede.
*
* Non è un cambio di resa: in frontend nulla di tutto questo si applica.
*/
.elementor-editor-preview .goyn-header--v-dark:not(.is-compact),
.elementor-editor-active .goyn-header--v-dark:not(.is-compact) {
background: var(--goyn-petrol-abyss);
}