/* ============================================================
SUNRISE TECHNOLOGY — CSS condiviso header + footer
Questo file viene caricato su TUTTE le pagine.
Modificare QUI per cambiare header/footer ovunque.
============================================================ */
/* text-size-adjust (richiesta esplicita: font diversi tra Chrome e
Firefox mobile a parita' di font-size scritto in CSS) — i browser
mobile "aiutano" la lettura ingrandendo da soli il testo piccolo
(autosizing), ma Chrome e Firefox usano euristiche diverse per
decidere quanto, quindi lo stesso identico CSS finiva per apparire
diverso. Disattivandolo, il font-size scritto qui e' ESATTAMENTE
quello che ogni browser mostra, senza aggiustamenti automatici propri
— necessario per poter regolare le dimensioni una volta sola e
vederle uguali ovunque, invece di inseguire due comportamenti diversi.
Verificato online che il valore 100% arriva al browser correttamente,
ma la differenza persisteva ancora anche con la versione -moz-
esplicita — provato ora "none" al posto di "100%": semanticamente
diverso (non solo "fattore di scala 1", ma "disattiva del tutto
l'algoritmo"), alcuni motori onorano none dove ignoravano 100%. Se
la differenza Chrome/Firefox persiste ANCHE con none, non e' piu'
un problema risolvibile via CSS: verificare invece le impostazioni
di accessibilita'/zoom pagina proprie di ogni app browser sul
telefono (Chrome e Firefox hanno ciascuno un proprio "dimensione
carattere"/"zoom pagina" nelle impostazioni, che scala TUTTI i siti
e nessun sito puo' o deve poter sovrascrivere). */
html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}
/* NOTA: qui era stato aggiunto "html{overflow-x:hidden}" come rete di
sicurezza contro l'overflow orizzontale (il body lo ha gia' su ogni
template, ma su alcuni browser mobile e' l'elemento che scrolla
davvero). RIMOSSO 2026-07-24: su mobile rompeva quasi del tutto lo
scroll verticale a dito sulla Home (con .st-bg-fixed a piena pagina in
position:fixed, mettere overflow-x:hidden anche su interferisce
con lo scroll nativo touch). La causa reale dell'overflow (griglia
footer, vedi .st-ft-row in functions.php) e' stata corretta alla
radice, quindi non serve piu' questa rete di sicurezza — se dovesse
ripresentarsi un overflow simile altrove, va risolto sull'elemento che
lo causa, non riaggiungendo questa regola globale.
*/
/* "Respiro" (Ken Burns, lo zoom lento e continuo dello sfondo) SEMPRE
spento sotto i 769px, su tutte le pagine — richiesta esplicita per
semplificare: prima veniva disattivato pagina per pagina (via classe
.st-lite/.sv-lite quando il dispositivo risultava "debole", o con
media query dedicate messe qui e li'), ora una sola regola qui copre
tutto il sito in un colpo solo. Selettore [class*="-bg-fixed"]: stessa
convenzione di nome gia' usata per il fallback webp->jpg in
functions.php (st-/sv-/gn-/ct-/cs-bg-fixed) + .st-bg-kb .st-bg-i per
le sottopagine di Servizi/Dove Siamo (page.php), che usano una
struttura diversa. !important necessario: questo file viene letto
PRIMA del CSS specifico di ogni pagina (aggiunto dopo via
wp_add_inline_style), quindi senza !important perderebbe sempre contro
la regola "animation:...Burns..." di ciascuna pagina. */
@media(max-width:768px){
[class*="-bg-fixed"],.st-bg-kb .st-bg-i{animation:none!important}
}
/* Bagliore progressivo sui titoloni (il gradiente che scorre sulle
lettere ogni pochi secondi, animation:...Shine) SEMPRE spento sotto i
769px — stessa filosofia "una regola sola per tutto il sito" di sopra.
Ogni pagina principale ha il proprio titolo hero con la propria
classe (nomi diversi, stessa identica animazione a scorrimento di
background-position), elencati qui insieme invece di un'aggiunta per
file. */
@media(max-width:768px){
.st-hc h1,.gn-hero h1,.ct-hero h1,.cs-hero-text h1,.sv-hero h1{animation:none!important}
}
/* Pausa gli sfondi "Ken Burns" (respiro in loop continuo) di tutte le
pagine durante lo scroll attivo (classe aggiunta via JS in functions.php,
vedi commento li' per il perche') — uno sfondo fisso a piena pagina che
anima mentre il contenuto scorre sopra costringe il browser a
ricomporlo ad ogni fotogramma, causa nota di scatti/sparizioni durante
lo scroll segnalata dall'utente su piu' pagine (Home in primis). A
scroll fermo l'animazione riprende esattamente da dov'era, nessun salto
visibile. */
html.st-scrolling .st-bg-fixed,
html.st-scrolling .cs-bg-fixed,
html.st-scrolling .ct-bg-fixed,
html.st-scrolling .gn-bg-fixed,
html.st-scrolling .sv-bg-fixed,
html.st-scrolling .st-bg-kb .st-bg-i{animation-play-state:paused}
/* FONT SELF-HOSTED — niente più richieste a fonts.googleapis.com/fonts.gstatic.com
(nessuna chiamata a server Google per motivi GDPR/privacy). File in /fonts,
sottoinsieme "latin" (copre l'italiano), Inter come variable font
(un solo file copre i pesi 300-800, invece di uno scaricato per peso). */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:300 800;
font-display:swap;
src:url('fonts/inter-latin-variable.woff2') format('woff2');
}
@font-face{
font-family:'Instrument Serif';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face{
font-family:'Instrument Serif';
font-style:italic;
font-weight:400;
font-display:swap;
src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}
/* NAV
I valori usano clamp(): restano identici a quelli attuali fino a 1366px
(la risoluzione di riferimento), poi crescono in modo fluido verso i
1920px (Full HD) e si bloccano su un tetto massimo oltre quella soglia,
cosi' non diventano eccessivi su schermi ultra-wide/4K.
Tutti i clamp() sotto usano LA STESSA proporzione di crescita (+20% a
1920px, tetto +28%) della funzione st_fluid() usata nelle pagine, cosi'
header e contenuto scalano sempre in armonia tra loro. Non modificare
un solo elemento senza ricalcolare gli altri con la stessa proporzione. */
/* z-index alzato da 10 a 600: essendo position:relative con z-index
esplicito, .st-nav crea il proprio stacking context — un discendente
come .st-sub (z-index:200) puo' avere il numero che vuole, ma quel
valore conta SOLO dentro il contesto di .st-nav; per confronto con
ELEMENTI FRATELLI fuori dalla nav (es. .gn-tabs-row a z-index:15 in
Guide & News, o .st-totop/.st-progress a z-index:500 sulle sottopagine
Servizi) vince lo z-index della nav stessa, non quello del figlio.
Con .st-nav ancora a 10, qualunque sezione di pagina con z-index > 10
finiva sopra ALL'INTERA nav, tendina Servizi inclusa (bug segnalato
dall'utente: ultima voce della tendina coperta e non cliccabile in
Guide & News). 600 resta comunque sotto la finestra modale delle news
(z-index:9999), che deve poter coprire la nav quando aperta. */
.st-nav{display:flex;align-items:center;justify-content:space-between;max-width:clamp(1260px, calc(638.64px + 45.4874vw), 1612.8px);width:100%;margin:0 auto;padding:0 clamp(40px, calc(18px + 1.6vw), 64px);position:relative;z-index:600;margin-top:clamp(8px, calc(4.0549px + 0.28881vw), 10.24px)}
.st-logo{display:flex;align-items:center;gap:16px;text-decoration:none}
/* Bagliore rosso pulsante, stesso linguaggio delle card Home (.st-c.gold) e
della voce di menu Guide&News (.st-menu-glow): usa filter:drop-shadow
(non box-shadow) perche' il logo e' un PNG/webp con canale alpha —
box-shadow disegnerebbe un'ombra sul riquadro rettangolare invece che
seguire il contorno del logo. */
.st-logo-img{height:clamp(92px, calc(46.63px + 3.3213vw), 117.76px);width:auto;animation:stLogoGlow 5s ease-in-out infinite}
@keyframes stLogoGlow{
0%,100%{filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 13px rgba(220,38,38,0.5)) drop-shadow(0 0 28px rgba(180,20,20,0.28))}
50%{filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 32px rgba(220,38,38,1)) drop-shadow(0 0 68px rgba(180,20,20,0.75)) drop-shadow(0 0 115px rgba(255,60,60,0.42))}
}
.st-lite .st-logo-img{animation:none;filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5))}
.st-lt{display:flex;flex-direction:column;line-height:1.1;align-items:center;text-align:center}
.st-lt .n,.st-lt .s{background:linear-gradient(90deg,#e87400,#f5a623,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 25px rgba(232,116,0,0.3)) drop-shadow(0 0 50px rgba(245,166,35,0.15))}
.st-lt .n{font-size:clamp(3.4em, calc(27.563px + 1.9639vw), 4.352em);font-weight:800;letter-spacing:3px;text-transform:uppercase}
.st-lt .s{font-size:clamp(1.9em, calc(15.408px + 1.0975vw), 2.432em);font-weight:800;letter-spacing:5px;text-transform:uppercase;text-align:center}
.st-menu{display:flex;list-style:none;gap:clamp(16px, calc(8.109px + 0.5776vw), 20.48px);align-items:center;margin-left:auto;margin-top:clamp(-28.16px, calc(-11.1509px - 0.79422vw), -22px)}
/* z-index:1 di riposo + salita a 50 quando l' è quello attivo (hover
o sottomenu aperto su touch): tra "fratelli" con la stessa
posizione/stacking, quello che viene dopo nel markup (es. "Guide & News"
rispetto a "Servizi") altrimenti si dipinge sempre sopra, coprendo la
tendina .st-sub di un precedente quando si allarga abbastanza da
sconfinare sotto quello successivo — bug segnalato dall'utente. Alzando
SOLO l' attivo, la sua tendina vince sempre, indipendentemente
dall'ordine nel markup. */
.st-menu>li{position:relative;z-index:1}
.st-menu>li:hover,.st-menu>li.st-sub-open{z-index:50}
.st-menu>li>a{color:rgba(255,255,255,0.95);text-decoration:none;font-size:clamp(1.05em, calc(8.5152px + 0.6065vw), 1.344em);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 8px;border-radius:8px;display:block;transition:all .3s;text-shadow:0 1px 6px rgba(0,0,0,0.4)}
/* Evidenziazione al passaggio del mouse: colore oro + leggero ingrandimento
+ ombra "sollevata" (effetto 3D), non solo lo sfondo chiaro (troppo
debole per notarsi da solo). Esclusa la voce con il glow permanente
(Guide & News), che ha gia' il proprio effetto sempre attivo. */
.st-menu>li:not(.st-menu-glow)>a:hover{color:#ffd700;background:rgba(255,255,255,0.1);transform:scale(1.1);text-shadow:0 6px 14px rgba(0,0,0,0.6),0 0 16px rgba(255,215,0,0.55)}
/* top:100% senza gap (era "calc(100% + 6px)"): quei 6px di spazio vuoto
tra il link e la tendina erano una "zona morta" senza alcun elemento,
quindi muovendo il mouse in diagonale verso il basso il cursore usciva
dal riquadro hoverable dell' per un istante e la tendina si
richiudeva prima di riuscire a raggiungerla — bug segnalato dall'utente.
Con la tendina attaccata (zero gap) il cursore resta sempre dentro
un elemento (link o tendina), l'hover non si perde mai. */
.st-sub{display:none;position:absolute;top:100%;left:0;background:rgba(12,18,30,0.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:6px 0;min-width:280px;list-style:none;box-shadow:0 16px 48px rgba(0,0,0,0.5);z-index:200}
.st-menu>li:hover>.st-sub{display:block}
/* Font ingrandito da .8em (troppo piccolo, segnalato dall'utente) a 1em —
ora leggibile quanto un normale link di menu invece di sembrare una nota
a pie' di pagina. */
.st-sub a{display:block;padding:11px 22px;color:rgba(255,255,255,0.85);text-decoration:none;font-size:1em;font-weight:500;transition:all .2s;text-shadow:0 1px 3px rgba(0,0,0,0.4)}
.st-sub a:hover{color:#fff;background:rgba(255,255,255,0.05);padding-left:26px}
.st-mt{display:none;background:none;border:none;cursor:pointer;padding:8px}
.st-mt span{display:block;width:22px;height:2px;background:#fff;margin:5px 0}
/* Menu glow (Guide & News) */
.st-menu>li.st-menu-glow>a{color:#fff;transition:none;animation:menuGlow 5s ease-in-out infinite;position:relative}
.st-menu>li.st-menu-glow>a::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,#f5a623,transparent);border-radius:2px;animation:menuBarGlow 5s ease-in-out infinite}
@keyframes menuGlow{
0%,100%{color:rgba(255,255,255,0.95);text-shadow:0 0 6px rgba(232,116,0,0.3),0 0 14px rgba(245,166,35,0.15)}
50%{color:#f5a623;text-shadow:0 0 18px rgba(232,116,0,1),0 0 44px rgba(245,166,35,0.8),0 0 80px rgba(255,215,0,0.35)}
}
@keyframes menuBarGlow{
0%,100%{opacity:0.3;box-shadow:0 0 4px rgba(245,166,35,0.3)}
50%{opacity:1;box-shadow:0 0 12px rgba(245,166,35,0.8),0 0 24px rgba(232,116,0,0.4)}
}
/* FOOTER */
.st-ft{position:relative;z-index:1;background:rgba(6,10,18,0.35);padding:10px 40px;text-align:center;color:#8a9aaa;font-size:clamp(0.8em, calc(6.488px + 0.46209vw), 1.024em);border-top:1px solid rgba(255,255,255,0.08);margin-top:clamp(52.5px, calc(-33.5596px + 7.58123vw), 129.5px)}
.st-ft p{margin:0;padding:0;line-height:1.4}
.st-ft a{color:#c0a050;text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.st-ft a:hover{color:#ffd700}
/* RESPONSIVE */
/* Fascia intermedia (769-1140px): con 6 voci di menu + logo, lo spazio si fa
stretto prima di arrivare al menu mobile — qui si comprime un po' senza
passare all'hamburger, cosi' "Guide & News" non va piu' a capo. */
@media(max-width:1140px){
.st-nav{padding:0 24px}
.st-logo-img{height:calc(60px + (100vw - 769px) * 0.0863)}
.st-lt .n{font-size:calc(1.7em + (100vw - 769px) * 0.00458)}
.st-lt .s{font-size:calc(.95em + (100vw - 769px) * 0.00256)}
.st-menu{gap:calc(2px + (100vw - 769px) * 0.0377)}
.st-menu>li>a{font-size:calc(.766em + (100vw - 769px) * 0.0007657);padding:6px 4px;white-space:nowrap;letter-spacing:1px}
}
@media(max-width:768px){
.st-nav{padding:14px 18px}
/* Footer: Chrome va gia' bene al valore fluido base — solo Firefox
(vedi st-firefox in functions.php) riceve -1 qui, solo su mobile.
Secondo -1 (2026-07-25, segnalato "sembra sempre uguale" dopo il
primo): se nemmeno questo si vede, il problema non e' la quantita' ma
il deploy (verificare di aver ricaricato QUESTO file via FTP) o il
rilevamento st-firefox stesso, non un altro giro di -1. */
body.st-firefox .st-ft{font-size:.6em}
/* Tendina proporzionata ancorata sotto l'hamburger (stesso linguaggio
visivo di .st-sub: pannello "vetro" con bordi arrotondati, non piu'
una barra a tutta larghezza/altezza che sembra un blocco nero pieno.
max-height + overflow-y:auto evitano che con il sottomenu Servizi
aperto (7 voci in piu') il pannello continui a crescere oltre lo
schermo. */
.st-menu{display:none;flex-direction:column;position:fixed;top:60px;right:12px;left:auto;width:min(188px, calc(100vw - 24px));background:rgba(10,14,24,0.55);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.5);padding:7px 9px;gap:0;z-index:300;max-height:min(70vh, calc(100vh - 90px));overflow-y:auto}
.st-menu.open{display:flex}
.st-menu>li>a{font-size:.66em;padding:7px 4px}
.st-mt{display:block}
.st-sub{position:static;background:transparent;border:none;box-shadow:none;padding:0 0 0 14px;min-width:auto}
/* Sottomenu Servizi: valore base = Firefox (il primo +1 era uniforme per
entrambi i motori, questo terzo +1 invece e' SOLO Chrome, quindi ora
servono due valori distinti). */
.st-sub a{font-size:.8em;padding:6px 12px}
body:not(.st-firefox) .st-sub a{font-size:.9em}
/* Voci principali hamburger: Firefox mobile va gia' bene cosi' com'e'
(base sopra) — solo Chrome/altri motori (font inflation diverso, vedi
st-firefox in functions.php) ricevono un +1. */
body:not(.st-firefox) .st-menu>li>a{font-size:.76em}
/* Su touch l'hover non e' affidabile per aprire il sottomenu: si
disattiva l'apertura via :hover e si usa solo la classe aggiunta dal
tap (vedi script in st-header.php). */
.st-menu>li:hover>.st-sub{display:none}
.st-menu>li.st-sub-open>.st-sub{display:block}
.st-lt .n{font-size:clamp(1.15em, calc(0.757em + 0.1228vw), 1.7em);letter-spacing:1.5px}
.st-lt .s{font-size:clamp(.72em, calc(.556em + .0513vw), .95em);letter-spacing:2.5px}
.st-logo-img{height:clamp(46px, calc(36px + 3.125vw), 60px)}
.st-logo{gap:10px}
}
@media(prefers-reduced-motion:reduce){
.st-menu-glow>a,.st-menu-glow>a::after{animation:none!important}
.st-logo-img{animation:none!important;filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5))!important}
}