/* =============================================================================
TEMA RIVA — locazioni di pregio sul Lago di Garda
=============================================================================
Panoramica del lago (upload del cliente) con Ken Burns, che scorre di lato
assecondando il sentiero. Il contenuto avanza in profondità, a slide.
Tutto self-hosted, nessuna dipendenza esterna.
========================================================================== */
/* ── Design tokens (il builder inietta qui) ──────────────────────────────── */
:root {
--accento: #c9a45c;
--accento-chiaro: #e2c489;
--font-titoli: 'Cormorant Garamond', Georgia, serif;
--font-testo: 'Jost', 'Segoe UI', sans-serif;
--inchiostro: #f6f2ea;
/* OPACO, non trasparente: sopra il panorama un testo semi-trasparente si
scurisce INSIEME al fondo, quindi nessun velo può salvarlo — il rapporto
di contrasto resta identico mentre tutto si spegne. La gerarchia visiva
si ottiene con una luminosità più bassa, non con l'alpha. */
--inchiostro-tenue: #e9e4d9;
/* Note e voci di secondo piano: più sommesso, sempre opaco, e comunque
sopra il 3:1 richiesto dal testo grande anche sul panorama più chiaro. */
--inchiostro-debole: #c8c2b6;
/* Link dentro la prosa: oro schiarito. L'--accento-chiaro pieno resta bello
sul marchio, ma dentro un paragrafo sopra il panorama si ferma a 3,4:1 —
sotto la soglia per il testo da leggere. Qui serve un oro che regga. */
--accento-link: #f4e7c8;
--notte: #05090e;
--vetro-fondo: rgba(12, 22, 32, 0.44);
--vetro-bordo: rgba(255, 255, 255, 0.15);
--vetro-luce: rgba(255, 255, 255, 0.08);
--vetro-blur: 20px;
--vetro-raggio: 22px;
--vetro-ombra: 0 26px 70px rgba(2, 8, 16, 0.5);
--curva: cubic-bezier(0.22, 0.9, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-testo); font-weight: 300;
color: var(--inchiostro); background: var(--notte);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 600; line-height: 1.08; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── Sfondo lago con Ken Burns ───────────────────────────────────────────── */
.fondale {
position: fixed; inset: -4%; z-index: -3; overflow: hidden; background: var(--notte);
will-change: transform; /* scorre di lato assecondando il sentiero */
}
/* Ogni sfondo vive in un proprio strato: la dissolvenza avviene fra strati,
mentre il Ken Burns resta sul livello interno (così non si disturbano). */
.fondale__strato {
position: absolute; inset: 0; opacity: 0;
transition: opacity 2.4s ease, filter 2.4s ease, transform 2.8s cubic-bezier(0.22, 0.9, 0.3, 1);
will-change: opacity, filter;
}
.fondale__strato.attivo { opacity: 1; }
/* Lo strato che se ne va: si allontana appena, sfuoca e si spegne — dissolvenza da film */
.fondale__strato.uscita { opacity: 0; filter: blur(7px) brightness(0.72); transform: scale(1.05); }
/* Lo strato che arriva parte un filo più stretto e si apre entrando */
.fondale__strato.ingresso { transform: scale(1.04); }
.fondale__foto {
position: absolute; inset: -6%;
background-position: center; background-size: cover; background-repeat: no-repeat;
will-change: transform;
animation: kenburns 42s ease-in-out infinite alternate;
}
/* Video di sfondo: entra sopra la propria copertina */
.fondale__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; transition: opacity 1.8s ease;
}
.fondale__video.pronto { opacity: 1; }
/* --sfondo-zoom: zoom base scelto nel builder (1 = nessuno); Ken Burns ci lavora sopra */
@keyframes kenburns {
from { transform: scale(calc(1.05 * var(--sfondo-zoom, 1))) translate3d(0, 0, 0); }
to { transform: scale(calc(1.16 * var(--sfondo-zoom, 1))) translate3d(-2.5%, -1.8%, 0); }
}
/* ── Velo di leggibilità, misurato sulla singola foto ─────────────────────
Il tema scrive testo chiaro sopra il panorama dell'host. Su una foto scura
si legge; su un cielo azzurro o sulla neve il testo arriva a 1:1 e sparisce.
--velo lo calcola il server per OGNI scena (vedi Leggibilita.php): chi non ne
ha bisogno riceve 0 e resta esattamente com'era, senza perdere atmosfera. */
.fondale__foto::after {
content: ''; position: absolute; inset: 0;
background: rgba(8, 10, 20, var(--velo, 0));
}
/* Velo per leggibilità + atmosfera */
.fondale::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(130% 100% at 50% 32%, transparent 60%, rgba(8, 10, 20, 0.30) 100%),
linear-gradient(180deg, rgba(8, 10, 20, 0.22) 0%, rgba(8, 10, 20, 0.02) 42%, rgba(8, 10, 20, 0.34) 100%);
}
/* Grana pellicola */
.grana {
position: fixed; inset: -50%; z-index: 40; pointer-events: none;
opacity: 0.045; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grana-vibra 0.9s steps(2) infinite;
}
@keyframes grana-vibra {
0% { transform: translate(0, 0); } 50% { transform: translate(1.5%, -1%); } 100% { transform: translate(-1%, 1.5%); }
}
/* ── Preloader ───────────────────────────────────────────────────────────── */
.sipario {
position: fixed; inset: 0; z-index: 100;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
background: var(--notte);
transition: opacity 1s ease, visibility 1s;
}
.sipario.aperto { opacity: 0; visibility: hidden; }
.sipario__monogramma {
width: 96px; height: 96px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-titoli); font-size: 2.4rem; font-weight: 600; color: var(--accento-chiaro);
background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo);
box-shadow: var(--vetro-ombra), inset 0 1px 0 var(--vetro-luce);
backdrop-filter: blur(var(--vetro-blur)); -webkit-backdrop-filter: blur(var(--vetro-blur));
}
.sipario__anello { width: 150px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,0.12); }
.sipario__anello::after { content: ''; display: block; height: 100%; width: 40%; background: var(--accento); animation: carica 1.2s ease-in-out infinite; }
@keyframes carica { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }
.sipario__nome { font-family: var(--font-titoli); font-style: italic; font-size: 1.05rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--inchiostro-tenue); }
/* ── Alone in cima ───────────────────────────────────────────────────────────
Sta SOTTO la testata (z-index 45 contro 50) e SOPRA il contenuto (che sta a
1): così scurisce quello che passa sotto il menu senza toccare né il menu né
la possibilità di cliccare quello che c'è dietro. L'altezza è generosa e la
sfumatura lunga, perché un bordo netto si vedrebbe come una striscia. */
.velo-alto {
position: fixed; top: 0; left: 0; right: 0; height: clamp(120px, 17vh, 210px);
z-index: 45; pointer-events: none;
background: linear-gradient(180deg,
rgba(5, 9, 14, 0.88) 0%,
rgba(5, 9, 14, 0.62) 38%,
rgba(5, 9, 14, 0.24) 70%,
rgba(5, 9, 14, 0) 100%);
}
/* ── Testata minima: marchio a sinistra, Prenota a destra ────────────────── */
.testata {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
display: flex; align-items: flex-start; justify-content: space-between;
padding: 26px clamp(20px, 4vw, 46px);
pointer-events: none;
}
.testata > * { pointer-events: auto; }
/* Prenota sopra, lingue sotto: entrambi allineati al bordo destro. */
.testata__destra { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.marchio { text-shadow: 0 2px 12px rgba(0,0,0,0.8); font-family: var(--font-titoli); font-size: clamp(1.7rem, 2.4vw, 2.15rem); font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; }
.marchio em { font-style: italic; color: var(--accento-chiaro); }
.prenota-alto {
padding: 11px 24px; border-radius: 14px;
font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
color: #10131a; background: linear-gradient(135deg, var(--accento-chiaro), var(--accento));
box-shadow: 0 10px 26px rgba(201, 164, 92, 0.35); white-space: nowrap;
transition: box-shadow 0.3s, transform 0.3s var(--curva);
}
.prenota-alto:hover { box-shadow: 0 14px 34px rgba(201, 164, 92, 0.5); transform: translateY(-2px); }
/* ── Scelta della lingua, sotto il Prenota ────────────────────────────────
Bandiere in tondo: piccole e silenziose, senza rubare spazio al panorama.
Quella della lingua corrente resta accesa, le altre si illuminano al
passaggio del mouse. */
.lingue { display: flex; gap: 7px; }
.lingue__voce {
width: 25px; height: 25px; border-radius: 50%; overflow: hidden;
display: block; opacity: 0.55;
border: 1px solid rgba(255,255,255,0.28);
box-shadow: 0 4px 14px rgba(2, 8, 16, 0.45);
transition: opacity 0.28s, transform 0.28s var(--curva), border-color 0.28s;
}
.lingue__voce svg { width: 100%; height: 100%; display: block; }
.lingue__voce:hover, .lingue__voce:focus-visible {
opacity: 1; transform: translateY(-2px) scale(1.08); border-color: var(--accento);
}
.lingue__voce.attiva { opacity: 1; border-color: var(--accento); }
.lingue__voce:focus-visible { outline: 2px solid var(--accento-link); outline-offset: 2px; }
/* Su schermi molto stretti la fila di quattro bandiere e il marchio si
contendono la stessa riga: qui le bandiere cedono qualche pixel. */
@media (max-width: 420px) {
.lingue { gap: 5px; }
.lingue__voce { width: 21px; height: 21px; }
}
/* ── Accedi con Google: vuoto finché il JS non sa se l'ospite è loggato ──── */
.cb-auth:empty { display: none; } /* nessuno spazio riservato prima della risposta */
.cb-auth__ciao strong { color: var(--accento-link); font-weight: 600; }
.cb-auth__esci {
color: var(--inchiostro-debole); text-decoration: underline;
text-underline-offset: 3px; margin-left: 12px; transition: color 0.25s;
}
.cb-auth__esci:hover { color: var(--inchiostro); }
/* ── Pastiglie fisse in basso a destra: contatti e accesso dell'ospite ─────
A riposo sono cerchi con la sola icona, per lasciare il panorama sgombro.
Al passaggio del mouse si aprono di lato e dicono a parole cosa fanno.
L'apertura anima grid-template-columns da 0fr a 1fr invece di una max-width
a caso: la seconda colonna misura ESATTAMENTE il testo che contiene, così la
pastiglia si ferma dove finisce la parola. Con una max-width approssimata,
l'animazione continuerebbe oltre il bordo visibile e la chiusura partirebbe
in ritardo — un effetto molle che si nota subito. */
.azioni {
position: fixed; right: clamp(20px, 4vw, 46px); bottom: clamp(26px, 5vh, 54px);
z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.azione {
display: grid; grid-template-columns: 52px 0fr;
align-items: center; height: 52px; border-radius: 26px;
color: var(--inchiostro-tenue);
background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo);
box-shadow: var(--vetro-ombra);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: grid-template-columns 0.55s var(--curva), color 0.3s,
border-color 0.3s, transform 0.3s var(--curva), box-shadow 0.3s;
}
.azione__icona { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.azione__icona svg { width: 22px; height: 22px; }
/* La pastiglia d'accesso. `--google` resta accanto a `--accedi` per i siti
pubblicati prima della migrazione 060, che hanno ancora il vecchio nome
nell'HTML già depositato sull'FTP del cliente: finché non ripubblicano,
quella regola è l'unica che li tiene in forma. */
.azione--google .azione__icona svg,
.azione--accedi .azione__icona svg { width: 20px; height: 20px; }
/* La colonna che si apre: il testo dentro non deve mai andare a capo, o durante
l'animazione le parole si impilerebbero prima di distendersi. */
.azione__testo { overflow: hidden; min-width: 0; }
.azione__testo > * {
display: block; white-space: nowrap;
padding-right: 20px; font-size: 0.78rem; letter-spacing: 0.04em;
opacity: 0; transform: translateX(-6px);
transition: opacity 0.3s ease 0.08s, transform 0.4s var(--curva) 0.08s;
}
/* Nella pastiglia dell'ospite il saluto e l'uscita stanno sulla STESSA riga:
impilarli farebbe due righe dentro un'altezza pensata per una. Il flex va sul
CONTENITORE, non sui figli — sono due elementi separati, e renderli flex uno
per uno non li affiancherebbe fra loro. */
.azione--utente .azione__testo { display: flex; align-items: baseline; }
.azione--utente .azione__testo > *:not(:last-child) { padding-right: 0; }
.azione__foto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.azione__iniziale {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-titoli); font-size: 0.95rem; font-weight: 600;
color: var(--notte); background: var(--accento-link);
}
/* Solo dove il puntatore esiste davvero: su un telefono l'hover si "incolla"
dopo il tocco e la pastiglia resterebbe aperta senza motivo. Lì il tocco
apre direttamente il link, che è quello che serve. */
@media (hover: hover) {
.azione:hover, .azione:focus-visible, .azione:focus-within {
grid-template-columns: 52px 1fr;
color: var(--inchiostro);
border-color: var(--accento);
transform: translateY(-3px);
box-shadow: var(--vetro-ombra), 0 0 0 1px rgba(201,164,92,0.15);
}
.azione:hover .azione__testo > *,
.azione:focus-visible .azione__testo > *,
.azione:focus-within .azione__testo > * { opacity: 1; transform: translateX(0); }
}
/* Da tastiera l'apertura deve avvenire anche su un dispositivo touch con
tastiera collegata, dove il blocco qui sopra non si applica. */
.azione:focus-visible, .azione:focus-within { grid-template-columns: 52px 1fr; }
.azione:focus-visible .azione__testo > *,
.azione:focus-within .azione__testo > * { opacity: 1; transform: translateX(0); }
.azione:focus-visible { outline: 2px solid var(--accento-link); outline-offset: 3px; }
/* ── Menu di sezione: in basso a sinistra, scritte grandi ────────────────── */
.menu-lato {
/* in alto a sinistra, sotto il marchio: lassù il cielo è scuro e si legge */
position: fixed; left: clamp(20px, 4vw, 46px); top: clamp(84px, 11vh, 116px);
z-index: 50; max-width: min(30vw, 330px);
}
.menu-lato__conta {
font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--inchiostro-tenue); margin-bottom: 10px;
}
.menu-lato__conta b { color: var(--accento-chiaro); font-weight: 500; }
.menu-lato ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.voce {
position: relative; display: inline-block; padding: 5px 0 5px 18px;
font-family: var(--font-titoli);
font-size: clamp(1.15rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.24;
letter-spacing: 0.01em;
/* Voce non attiva: opaca (vedi --inchiostro-tenue) e comunque leggibile.
È navigazione: deve restare in secondo piano rispetto alla voce corrente,
non diventare invisibile sopra un panorama chiaro. */
color: var(--inchiostro-debole);
text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.6);
transition: color 0.35s var(--curva), transform 0.35s var(--curva);
}
.voce::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
width: 3px; height: 62%; border-radius: 2px; background: var(--accento);
transition: transform 0.35s var(--curva);
}
.voce:hover { color: var(--inchiostro-tenue); transform: translateX(3px); }
.voce.attiva { color: var(--inchiostro); }
.voce.attiva::before { transform: translateY(-50%) scaleY(1); }
/* ── Orizzontale: le stesse voci, in fila e IN TESTATA ─────────────────────
Solo sopra i 960px: sotto quella soglia il menu è il pannello a tutta
pagina di sempre (vedi il blocco @media più in fondo), e lì la scelta
dell'host non deve avere alcun effetto — resta quello già rifatto e
approvato.
In verticale il menu resta sotto la testata, in alto a sinistra (posizione
invariata). In orizzontale invece Marco lo vuole ALLA STESSA ALTEZZA del
marchio e centrato sulla pagina — non più un blocco a parte sotto al
titolo, ma la stessa riga: `top: 26px` è lo stesso `padding-top` di
`.testata`, `left: 50%` + la traslazione lo centra indipendentemente da
quanto sono larghi marchio e Prenota ai due lati. */
@media (min-width: 961px) {
.menu-lato--orizzontale {
top: 26px; left: 50%; right: auto; transform: translateX(-50%);
max-width: min(60vw, 760px); text-align: center;
}
.menu-lato--orizzontale .menu-lato__conta { text-align: center; }
.menu-lato--orizzontale ul {
flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline;
column-gap: clamp(20px, 2.6vw, 40px); row-gap: 8px;
}
/* La barra a sinistra ha senso in colonna; in riga l'indicatore naturale
è sotto la voce, come un sottolineato — la stessa idea (l'accento che
cresce sulla voce corrente), diversa geometria. */
.menu-lato--orizzontale .voce { padding: 5px 0 8px; }
.menu-lato--orizzontale .voce::before {
left: 0; top: auto; bottom: 0; transform: scaleX(0);
width: 100%; height: 2px; transform-origin: left;
}
.menu-lato--orizzontale .voce:hover { transform: translateY(-2px); }
.menu-lato--orizzontale .voce.attiva::before { transform: scaleX(1); }
}
/* ── Voce a tendina: raccoglie presentazione e sezioni extra ───────────────
Funziona ANCHE senza JavaScript: :focus-within e :hover bastano da soli ad
aprirla (prova a disattivare lo script del tema, resta usabile da tastiera
e da mouse). Il JS in riva.js aggiunge solo ciò che il CSS non può dare da
solo — il tocco, che sui telefoni non genera hover — e tiene aria-expanded
allineato per chi usa un lettore di schermo. */
.voce-gruppo { position: relative; }
/* NIENTE `font: inherit` qui: azzererebbe anche font-family/size/weight che
.voce imposta per conto suo, con la stessa specificità (una classe) ma
dichiarati prima — lo shorthand vincerebbe sui singoli e il bottone
perderebbe il carattere dei titoli. Non serve comunque: più sopra c'è già
`button { font: inherit; ... }` di reset generale, ma è un selettore di
TAG (specificità più bassa di qualunque classe) — .voce lo sovrascrive già
da solo, a prescindere dall'ordine in cui compaiono nel foglio. */
.voce-gruppo__attiva {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: none; padding: 5px 0 5px 18px; margin: 0;
cursor: pointer; -webkit-appearance: none; text-align: left;
}
.voce-gruppo__freccia {
width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.3s var(--curva);
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.75));
}
.voce-gruppo.aperto .voce-gruppo__freccia,
.voce-gruppo:hover .voce-gruppo__freccia,
.voce-gruppo:focus-within .voce-gruppo__freccia { transform: rotate(180deg); }
/* Chiusa: altezza zero e invisibile ma presente nel DOM — mai `display:none`,
che spezzerebbe :focus-within (un elemento nascosto non può tenere il
fuoco, e Tab la salterebbe rendendola irraggiungibile da tastiera). */
.voce-gruppo__menu {
list-style: none; overflow: hidden; max-height: 0; opacity: 0;
transition: max-height 0.35s var(--curva), opacity 0.25s ease;
}
.voce-gruppo.aperto .voce-gruppo__menu,
.voce-gruppo:hover .voce-gruppo__menu,
.voce-gruppo:focus-within .voce-gruppo__menu { max-height: 60vh; opacity: 1; }
.voce-gruppo__menu .voce { font-size: clamp(1rem, 1.5vw, 1.35rem); padding-left: 30px; }
@media (min-width: 961px) {
/* In riga, l'espansione "sul posto" spingerebbe le voci successive:
qui la tendina galleggia sopra, come un vero menu a discesa. */
.menu-lato--orizzontale .voce-gruppo__menu {
position: absolute; top: 100%; left: 0; margin-top: 6px; max-height: none;
min-width: 220px; padding: 10px 4px; border-radius: 14px;
background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo);
backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
box-shadow: var(--vetro-ombra);
display: flex; flex-direction: column; gap: 0;
transform: translateY(-6px); pointer-events: none;
}
.menu-lato--orizzontale .voce-gruppo.aperto .voce-gruppo__menu,
.menu-lato--orizzontale .voce-gruppo:hover .voce-gruppo__menu,
.menu-lato--orizzontale .voce-gruppo:focus-within .voce-gruppo__menu {
transform: translateY(0); pointer-events: auto;
}
.menu-lato--orizzontale .voce-gruppo__menu .voce { padding: 8px 16px; display: block; }
}
@media (prefers-reduced-motion: reduce) {
.voce-gruppo__freccia, .voce-gruppo__menu, .menu-lato--orizzontale .voce-gruppo__menu { transition: none; }
}
/* ── Struttura a scorrimento ─────────────────────────────────────────────── */
.scena-testo { position: relative; z-index: 1; }
.sezione { padding: clamp(80px, 12vh, 150px) 5vw; display: flex; justify-content: center; }
.sezione__interno { width: min(1080px, 100%); }
/* Hero: a tutta altezza, testo minimale sulla scena */
.eroe {
min-height: 100vh; min-height: 100svh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 120px 6vw 90px; position: relative; z-index: 1;
}
.eroe__cuore { max-width: 900px; }
.sopratitolo {
display: inline-flex; align-items: center; gap: 12px;
font-size: 0.74rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accento-chiaro); margin-bottom: 18px;
}
.sopratitolo::before, .sopratitolo::after { content: ''; width: 34px; height: 1px; background: var(--accento); opacity: 0.65; }
.eroe h1 { font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 600; text-shadow: 0 4px 24px rgba(0,0,0,0.75), 0 0 60px rgba(0,0,0,0.45); }
.eroe h1 em { font-style: italic; color: var(--accento-chiaro); }
.eroe .tagline { font-family: var(--font-titoli); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.75rem); color: var(--inchiostro-tenue); margin-top: 16px; }
.eroe__scorri {
position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 9px;
font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--inchiostro-tenue);
transition: opacity 0.5s;
}
.eroe__scorri::after { content: ''; width: 1px; height: 34px; background: linear-gradient(180deg, var(--accento), transparent); animation: goccia 1.9s ease-in-out infinite; }
@keyframes goccia { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.eroe__scorri.nascosto { opacity: 0; }
/* Sulla CLASSE, non sul tag h2: le pagine interne — chi siamo, camere,
galleria, dove siamo — usano `h1.titolo-sezione`, che con la vecchia regola
restava senza `margin-bottom` e si attaccava al paragrafo sotto, e senza il
`clamp` era più piccolo (32px fissi) di quanto il tema volesse. */
.titolo-sezione { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 22px; }
.titolo-sezione em { font-style: italic; color: var(--accento-chiaro); }
.lastra {
padding: clamp(28px, 4.5vw, 58px); border-radius: calc(var(--vetro-raggio) + 8px);
background: linear-gradient(160deg, var(--vetro-luce), transparent 45%), var(--vetro-fondo);
border: 1px solid var(--vetro-bordo);
box-shadow: var(--vetro-ombra), inset 0 1px 0 var(--vetro-luce);
backdrop-filter: blur(var(--vetro-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--vetro-blur)) saturate(1.4);
}
.prosa { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.85; color: var(--inchiostro-tenue); max-width: 62ch; }
.prosa + .prosa { margin-top: 14px; }
/* ── Formattazione scritta dall'host nell'editor ──────────────────────────
Grassetto, corsivo, elenchi e link restano dentro la tipografia del tema:
stessa misura, stesso colore, stesso ritmo verticale della prosa scritta
dal tema, così una pagina curata dall'host non sembra incollata da fuori. */
ul.prosa, ol.prosa { padding-left: 1.35em; }
ul.prosa + .prosa, ol.prosa + .prosa { margin-top: 14px; }
.prosa li { margin-bottom: 6px; }
.prosa li::marker { color: var(--accento); }
.prosa strong { font-weight: 600; color: var(--inchiostro); }
.prosa em { font-style: italic; }
/* Sottolineati sempre: il colore da solo non basta a dire "qui si clicca" a
chi non distingue bene le tinte (WCAG 1.4.1, uso del solo colore). */
.prosa a {
color: var(--accento-link);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.25s;
}
.prosa a:hover { color: var(--inchiostro); }
.cta {
position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 34px;
padding: 16px 34px; border-radius: 16px; overflow: hidden;
font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: #10131a;
background: linear-gradient(135deg, var(--accento-chiaro), var(--accento));
box-shadow: 0 16px 40px rgba(201, 164, 92, 0.4); transition: box-shadow 0.35s;
}
.cta::after { content: ''; position: absolute; top: -60%; bottom: -60%; width: 34%; left: -50%; transform: skewX(-24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transition: left 0.8s var(--curva); }
.cta:hover::after { left: 130%; }
/* Invito secondario: dalla slide di presentazione alla pagina dedicata */
.cta-soglia {
display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
padding: 13px 26px; border-radius: 14px;
font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
color: var(--inchiostro);
background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo);
box-shadow: var(--vetro-ombra);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: border-color 0.3s, background 0.3s, transform 0.3s var(--curva);
}
.cta-soglia:hover { border-color: var(--accento); background: rgba(255,255,255,0.10); transform: translateY(-2px); }
.cta-soglia .freccia { color: var(--accento-chiaro); transition: transform 0.3s var(--curva); }
.cta-soglia:hover .freccia { transform: translateX(5px); }
/* Anteprima compatta dentro le slide di presentazione.
`align-items: start`: senza, una cella più alta stira le sorelle della stessa
riga, e una foto stirata non è più la foto che l'host ha caricato. */
.assaggio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; align-items: start; }
/* ⚠️ `height` VA SEMPRE DICHIARATA. Il tema scrive width/height nel tag ![]()
(servono a non far ballare la pagina mentre le foto arrivano), e il browser
li tratta come CSS d'autore a priorità minima: se qui non c'è una `height`,
vince `height="1200"` del tag, `aspect-ratio` viene ignorata perché
l'altezza è ormai definita, e la foto diventa una colonna di 142×1200 px
ritagliata da `cover`. Su schermo grande non si vedeva perché la regola di
modo profondità (più sotto) una `height` ce l'ha. Vale per OGNI regola che
dimensiona una foto: se tocchi `width`, dichiara anche `height`. */
.assaggio img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; border: 1px solid var(--vetro-bordo); }
/* I due inviti della slide, affiancati e a capo solo se serve. */
.soglie { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.cta-soglia--secondaria { opacity: 0.86; }
.cta-soglia--secondaria:hover { opacity: 1; }
.assaggio-voci { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; justify-content: center; }
.assaggio-voce {
padding: 8px 16px; border-radius: 999px; font-size: 0.78rem; color: var(--inchiostro-tenue);
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
/* Duetto testo + immagine con parallax */
.duetto { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(26px, 4vw, 54px); align-items: center; }
.cornice { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(2,8,16,0.55); will-change: transform; }
.cornice img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.cornice--alta img { aspect-ratio: 3/4; }
.cornice::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; pointer-events: none; }
/* Ingrandibile: senza il cursore non si capisce che si può, e su un telefono
dove il cursore non esiste ci pensa il segno in basso a destra. */
.cornice--zoom img { cursor: zoom-in; }
.cornice--zoom::before {
content: '\2922'; position: absolute; z-index: 2; right: 10px; bottom: 10px;
width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; color: #fff; background: rgba(6,12,20,0.55); border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0.85; transition: opacity 0.25s, transform 0.25s;
}
.cornice--zoom:hover::before { opacity: 1; transform: scale(1.08); }
/* Contenuto extra (slide/sezioni aggiunte dall'host nel builder) */
.blocco-media { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(2,8,16,0.55); margin: 26px auto; max-width: 900px; }
.blocco-media img, .blocco-video { width: 100%; height: auto; max-height: 72vh; object-fit: cover; display: block; }
.blocco-video { background: #05090e; aspect-ratio: 16/9; }
/* ── Impaginazioni dei contenuti extra (layout scelto dall'host) ─────────────
Due colonne su schermi larghi, una sola sotto i 900px: su telefono
affiancare testo e foto renderebbe entrambi troppo stretti per servire. */
.blocco-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 38px); align-items: center; margin-top: 22px; }
.blocco-duo__testo .prosa { max-width: none; } /* la colonna è già stretta */
.blocco-duo__media .blocco-media { margin: 0; max-width: none; }
/* Le due immagini impilate: stessa altezza, così la colonna resta equilibrata
qualunque sia la proporzione degli scatti caricati. */
.blocco-duo--pila { align-items: start; } /* colonna alta: testo in cima, non centrato nel vuoto */
.blocco-duo__media--pila { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.blocco-duo__media--pila .blocco-media img { aspect-ratio: 16/10; max-height: none; }
/* "immagine a sinistra": si inverte l'ordine visivo, NON quello del codice —
nel markup il testo resta primo, così lettori di schermo e ordine di
tabulazione seguono comunque il senso di lettura. */
.blocco-duo--inverti .blocco-duo__testo { order: 2; }
.blocco-duo--inverti .blocco-duo__media { order: 1; }
.blocco-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: 24px; }
.blocco-griglia__cella { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(2,8,16,0.45); }
.blocco-griglia__cella img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
@media (max-width: 900px) {
.blocco-duo { grid-template-columns: 1fr; gap: 20px; }
/* A colonna singola l'immagine torna sotto al testo in ogni caso: un
"immagine a sinistra" non ha senso quando non esiste una sinistra. */
.blocco-duo--inverti .blocco-duo__testo,
.blocco-duo--inverti .blocco-duo__media { order: 0; }
}
/* Camere & spazi */
.flotta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.stanza {
position: relative; border-radius: 18px; overflow: hidden; cursor: pointer;
aspect-ratio: 3/3.7; text-align: left; box-shadow: 0 18px 44px rgba(2,8,16,0.45);
transform-style: preserve-3d; transition: transform 0.5s var(--curva), box-shadow 0.5s;
}
.stanza:hover { transform: translateY(-8px) rotateX(2.5deg); box-shadow: 0 34px 70px rgba(2,8,16,0.6); }
.stanza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--curva); }
.stanza:hover img { transform: scale(1.07); }
.stanza::after { content: ''; position: absolute; inset: 0; background: linear-gradient(185deg, transparent 38%, rgba(6,12,20,0.85) 100%); }
.stanza__velo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; }
.stanza__tipo { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accento-chiaro); }
.stanza__nome { font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 600; margin-top: 4px; }
.stanza__dati { font-size: 0.78rem; color: var(--inchiostro-tenue); margin-top: 4px; }
.stanza__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Focus mode stanza */
.focus { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(4,10,18,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.focus.aperto { opacity: 1; pointer-events: auto; }
.focus__lastra { width: min(1080px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 24px; padding: clamp(22px, 3.5vw, 44px); background: linear-gradient(160deg, var(--vetro-luce), transparent 45%), rgba(13,23,34,0.9); border: 1px solid var(--vetro-bordo); box-shadow: var(--vetro-ombra); transform: translateY(26px) scale(0.97); transition: transform 0.5s var(--curva); }
.focus.aperto .focus__lastra { transform: none; }
.focus__chiudi { position: absolute; top: 22px; right: 26px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.25s; }
.focus__chiudi:hover { background: rgba(255,255,255,0.14); }
.focus__galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; align-items: start; }
/* `height: auto` obbligatoria: stesso motivo spiegato su `.assaggio img`. */
.focus__galleria img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; cursor: zoom-in; transition: transform 0.4s var(--curva), box-shadow 0.4s; }
.focus__galleria img:hover { transform: scale(1.035); box-shadow: 0 16px 36px rgba(2,8,16,0.5); }
.focus__galleria img:first-child { grid-column: 1 / -1; aspect-ratio: 21/9; }
/* Dotazioni */
.dotazioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.gruppo-dotazioni { padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.gruppo-dotazioni h3 { font-size: 1.15rem; margin-bottom: 12px; color: var(--accento-chiaro); }
.gruppo-dotazioni ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.gruppo-dotazioni li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--inchiostro-tenue); }
.gruppo-dotazioni li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accento); flex-shrink: 0; box-shadow: 0 0 8px rgba(201,164,92,0.9); }
/* Galleria mosaico */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 12px; margin-top: 26px; }
.mosaico a { position: relative; border-radius: 14px; overflow: hidden; display: block; box-shadow: 0 14px 34px rgba(2,8,16,0.4); transition: transform 0.45s var(--curva), box-shadow 0.45s; }
.mosaico a:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 26px 54px rgba(2,8,16,0.55); z-index: 2; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaico a:nth-child(4) { grid-row: span 2; }
.mosaico a:nth-child(6) { grid-column: span 2; }
/* Video della struttura (pagina Galleria) */
.mosaico-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; }
.video-libreria { margin: 0; }
.video-libreria__titolo { font-family: var(--font-titoli); font-size: 1rem; margin-top: 10px; color: var(--inchiostro-tenue); text-align: center; }
/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(3,8,15,0.93); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.lightbox.aperto { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 84vh; border-radius: 14px; box-shadow: 0 40px 100px rgba(0,0,0,0.7); }
.lightbox__chiudi, .lightbox__prev, .lightbox__next { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.25s; }
.lightbox__chiudi:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,0.15); }
.lightbox__chiudi { top: 24px; right: 28px; } .lightbox__prev { left: 26px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 26px; top: 50%; transform: translateY(-50%); }
.lightbox__dida { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 0.82rem; color: var(--inchiostro-tenue); max-width: 80vw; text-align: center; }
/* Posizione */
.posizione { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 50px); align-items: center; }
.mappa { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--vetro-bordo); box-shadow: 0 26px 60px rgba(2,8,16,0.5); filter: saturate(0.85) contrast(1.02); }
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.distanze { list-style: none; display: flex; flex-direction: column; margin-top: 22px; }
.distanze li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,0.09); font-size: 0.95rem; }
.distanze li:last-child { border-bottom: 0; }
.distanze .luogo { color: var(--inchiostro-tenue); }
.distanze .valore { font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600; color: var(--accento-chiaro); white-space: nowrap; }
/* Contatti */
.congedo { text-align: center; }
.congedo__voci { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 54px); margin-top: 30px; }
.congedo__voce { min-width: 150px; }
.congedo__voce .etichetta { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accento-chiaro); margin-bottom: 7px; }
.congedo__voce .valore { font-size: 0.98rem; color: var(--inchiostro); }
.congedo__legale { margin-top: 44px; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--inchiostro-debole); }
/* Reveal on scroll (parallax leggero) */
.rivela { opacity: 0; transform: translateY(42px); transition: opacity 1s var(--curva), transform 1s var(--curva); }
.rivela.visibile { opacity: 1; transform: none; }
/* ══ MODO PROFONDITÀ ══════════════════════════════════════════════════════
Lo scroll non fa scorrere la pagina in verticale: fa AVANZARE lungo l'asse
Z. Le sezioni sono ferme nello spazio e ci vengono incontro dalla distanza,
sfilandoci accanto — la stessa camminata che fa la camera nell'erba.
Il DOM resta identico (SEO intatta): cambia solo come lo si attraversa. */
/* Niente scorrimento nativo: si avanza a scatti, una slide alla volta
(la classe viene messa sia su sia su ) */
.modo-profondita { overflow: hidden; height: 100%; }
.modo-profondita .scena-testo {
position: fixed; inset: 0; z-index: 1;
perspective: 1700px;
perspective-origin: 50% 46%;
transform-style: preserve-3d;
pointer-events: none; /* i click passano; li riattiviamo sulla sezione a fuoco */
}
.modo-profondita .sezione,
.modo-profondita .eroe {
position: absolute; top: 43%; left: 50%;
width: min(1020px, 88vw);
min-height: 0; padding: 0;
display: block;
will-change: transform, opacity, filter;
backface-visibility: hidden;
}
.modo-profondita .sezione.a-fuoco,
.modo-profondita .eroe.a-fuoco { pointer-events: auto; }
.modo-profondita .eroe { text-align: center; }
.modo-profondita .eroe__scorri { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); }
/* ── QUANTO SPAZIO HA DAVVERO UNA SEZIONE ──────────────────────────────────
Le sezioni stanno a `top: 43%` e sono centrate su sé stesse: lo spazio
utilizzabile è quindi il doppio della metà più corta, meno il posto che
servono testata e invito a proseguire. Il valore è una variabile e non un
numero sparso, perché va corretto in due punti (schermi bassi, telefoni) e
con un numero ripetuto tre volte se ne aggiorna sempre uno solo.
`svh` e non `vh`: sul telefono la barra degli indirizzi del browser rende
`100vh` PIÙ ALTO della porzione visibile: una sezione a 64vh finiva già
sotto il bordo prima ancora di essere piena. `svh` misura lo schermo con la
barra aperta, cioè il caso peggiore, che è quello da cui bisogna difendersi.
Il primo valore resta per i browser che non conoscono svh. */
.modo-profondita { --sezione-spazio: 64vh; --sezione-spazio: 68svh; }
@media (max-height: 760px) { .modo-profondita { --sezione-spazio: 72svh; } }
@media (max-width: 860px) { .modo-profondita { --sezione-spazio: 66svh; } }
/* Sezioni alte (es. le camere): scorrimento interno, mai oltre lo schermo */
.modo-profondita .sezione__interno {
max-height: var(--sezione-spazio);
overflow-y: auto; overflow-x: hidden;
position: relative;
}
/* ── QUANDO IL CONTENUTO NON CI STA ─────────────────────────────────────────
La barra di scorrimento qui è nascosta apposta (vedi sotto): senza un segno,
quello che resta sotto il bordo non sembra «più in basso», sembra che non
esista. La classe la mette il motore in riva.js quando misura che il
contenuto è più alto del suo contenitore — il CSS da solo non lo può sapere.
Sfumatura in fondo + una freccina: due segnali diversi perché la sfumatura
da sola, su un fondo scuro, si nota poco. */
.modo-profondita .sezione__interno.ha-altro { padding-bottom: 34px; }
.modo-profondita .sezione__interno.ha-altro::after {
content: '';
position: sticky; bottom: -1px; left: 0; right: 0;
display: block; height: 46px; margin-top: -46px;
background: linear-gradient(to bottom, transparent, rgba(5, 9, 14, 0.92));
pointer-events: none;
}
.modo-profondita .sezione.ha-altro-fuori > .segno-altro { opacity: 1; }
.segno-altro {
position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
display: flex; align-items: center; gap: 7px;
font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--inchiostro-tenue); opacity: 0; transition: opacity .4s ease;
pointer-events: none; white-space: nowrap;
}
.segno-altro::after {
content: ''; width: 7px; height: 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
animation: segnoGiu 1.8s ease-in-out infinite;
}
@keyframes segnoGiu {
0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .5; }
50% { transform: rotate(45deg) translate(1px, 1px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .segno-altro::after { animation: none; } }
/* ── Le foto non devono mai spingere il pulsante fuori dalla schermata ─────
Nel corridoio non si scorre e la barra di scorrimento è nascosta: quel che
finisce sotto il bordo non è "più in basso", è invisibile. Le anteprime
prendono quindi una quota FISSA dell'altezza della schermata, così l'invito
ad andare avanti resta sempre in vista, qualunque sia il formato delle foto
caricate dall'host — verticali comprese, che sono le più ingombranti. */
.modo-profondita .assaggio img { aspect-ratio: auto; height: 22vh; max-height: 190px; }
@media (max-height: 700px) {
.modo-profondita .assaggio img { height: 17vh; }
}
/* L'hero è corto: nessuno scorrimento interno, così il bottone magnetico non
fa comparire la barra quando si sposta di qualche pixel */
.modo-profondita .eroe__cuore { max-height: none; overflow: visible; }
/* Dove lo scorrimento interno serve davvero, la barra resta ma invisibile:
niente lampi quando un elemento animato sfiora il bordo */
.modo-profondita .sezione__interno { scrollbar-width: none; -ms-overflow-style: none; }
.modo-profondita .sezione__interno::-webkit-scrollbar { width: 0; height: 0; }
/* In modo profondità l'opacità la governa il motore: il reveal verticale si spegne */
.modo-profondita .rivela { opacity: 1; transform: none; transition: none; }
.modo-profondita .menu-lato { position: fixed; }
/* Il nastro che dà la lunghezza allo scroll (invisibile) */
.corsa { position: relative; z-index: 0; pointer-events: none; }
/* ══ PRENOTA ══════════════════════════════════════════════════════════════ */
.pagina-prenota { min-height: 100vh; min-height: 100svh; padding: 150px 5vw 80px; display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 1; }
.prenota-griglia { width: min(1120px, 100%); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 26px; align-items: start; }
/* Il flusso della pagina disponibilità: ricerca sopra, richiesta sotto — e la
richiesta compare solo dopo che l'ospite ha scelto qualcosa. Affiancati,
l'ospite si trovava un modulo da compilare prima di sapere se le sue date
erano libere. */
.prenota-flusso { width: min(1120px, 100%); display: grid; grid-template-columns: 1fr; gap: 26px; }
.prenota-flusso .pannello[hidden] { display: none; }
.pannello { padding: clamp(24px, 3.5vw, 40px); border-radius: calc(var(--vetro-raggio) + 6px); background: linear-gradient(160deg, var(--vetro-luce), transparent 45%), var(--vetro-fondo); border: 1px solid var(--vetro-bordo); box-shadow: var(--vetro-ombra), inset 0 1px 0 var(--vetro-luce); backdrop-filter: blur(var(--vetro-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--vetro-blur)) saturate(1.4); }
.pannello h2 { font-size: 1.9rem; margin-bottom: 6px; } .pannello h2 em { font-style: italic; color: var(--accento-chiaro); }
.pannello .nota { font-size: 0.82rem; color: var(--inchiostro-tenue); margin-bottom: 20px; }
.calendario__testata { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calendario__mese { font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600; }
.calendario__freccia { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid var(--vetro-bordo); transition: background 0.25s; }
.calendario__freccia:hover { background: rgba(255,255,255,0.13); }
.calendario__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendario__intesta { text-align: center; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inchiostro-tenue); padding: 7px 0; }
.giorno { position: relative; aspect-ratio: 1; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 0.86rem; background: rgba(255,255,255,0.045); border: 1px solid transparent; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.giorno .prezzo { font-size: 0.56rem; color: var(--inchiostro-tenue); }
.giorno.libero:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); border-color: var(--vetro-bordo); }
.giorno.occupato { opacity: 0.32; text-decoration: line-through; cursor: not-allowed; }
.giorno.passato { opacity: 0.18; cursor: not-allowed; }
.giorno.arrivo, .giorno.partenza { background: linear-gradient(135deg, var(--accento-chiaro), var(--accento)); color: #10131a; font-weight: 600; box-shadow: 0 8px 22px rgba(201,164,92,0.45); }
.giorno.arrivo .prezzo, .giorno.partenza .prezzo { color: rgba(16,19,26,0.72); }
.giorno.compreso { background: rgba(201,164,92,0.22); border-color: rgba(201,164,92,0.32); }
.calendario__legenda { display: flex; gap: 20px; margin-top: 14px; font-size: 0.68rem; color: var(--inchiostro-tenue); }
.calendario__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.calendario__legenda i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.calendario__legenda .l-libero { background: rgba(255,255,255,0.14); } .calendario__legenda .l-occupato { background: rgba(255,255,255,0.05); } .calendario__legenda .l-selezione { background: var(--accento); }
.riepilogo { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); }
.riepilogo__riga { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 0.9rem; color: var(--inchiostro-tenue); }
.riepilogo__riga strong { font-weight: 500; color: var(--inchiostro); }
.riepilogo__totale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }
.riepilogo__totale .cifra { font-family: var(--font-titoli); font-size: 1.9rem; font-weight: 700; color: var(--accento-chiaro); }
.riepilogo__nota { font-size: 0.68rem; color: var(--inchiostro-debole); margin-top: 6px; }
.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accento-chiaro); margin-bottom: 7px; }
.campo input, .campo textarea { width: 100%; padding: 13px 16px; border-radius: 13px; font: inherit; font-size: 0.94rem; color: var(--inchiostro); background: rgba(255,255,255,0.06); border: 1px solid var(--vetro-bordo); transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--accento); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(201,164,92,0.22); }
.campo textarea { min-height: 96px; resize: vertical; }
.campo .errore-msg { display: none; font-size: 0.7rem; color: #f2a4a4; margin-top: 5px; }
.campo.in-errore input, .campo.in-errore textarea { border-color: rgba(242,122,122,0.65); }
.campo.in-errore .errore-msg { display: block; }
.campi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 13px; background: rgba(255,255,255,0.06); border: 1px solid var(--vetro-bordo); }
.stepper__info .titolo { font-size: 0.9rem; } .stepper__info .sotto { font-size: 0.68rem; color: var(--inchiostro-tenue); }
.stepper__comandi { display: flex; align-items: center; gap: 13px; }
.stepper__btn { width: 32px; height: 32px; border-radius: 10px; font-size: 1rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.09); border: 1px solid var(--vetro-bordo); transition: background 0.2s; }
.stepper__btn:hover { background: rgba(255,255,255,0.16); }
.stepper__valore { min-width: 20px; text-align: center; font-weight: 500; }
.conferma { text-align: center; padding: 40px 10px; display: none; }
.conferma.mostra { display: block; }
.conferma svg { width: 84px; height: 84px; margin: 0 auto 22px; display: block; }
.conferma circle { fill: none; stroke: var(--accento); stroke-width: 2; stroke-dasharray: 290; stroke-dashoffset: 290; animation: disegna 0.9s var(--curva) forwards; }
.conferma path { fill: none; stroke: var(--accento-chiaro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: disegna 0.6s 0.55s var(--curva) forwards; }
@keyframes disegna { to { stroke-dashoffset: 0; } }
.conferma h3 { font-size: 1.7rem; margin-bottom: 10px; } .conferma p { color: var(--inchiostro-tenue); font-size: 0.92rem; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
.duetto, .posizione, .prenota-griglia { grid-template-columns: 1fr; }
.flotta { grid-template-columns: repeat(2, 1fr); }
.dotazioni { grid-template-columns: 1fr; }
.mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
.mosaico a:nth-child(6) { grid-column: span 1; }
.focus__galleria { grid-template-columns: repeat(2, 1fr); }
/* ── LE FOTO NON DEVONO DIVENTARE COLONNE ────────────────────────────
`.cornice--alta` impone un 3:4 verticale, giusto quando l'immagine sta
in mezza colonna su schermo largo. Qui la colonna diventa UNA: quella
stessa regola la fa larga quanto lo schermo e alta un terzo in più —
su un telefono da 390px sono 520px di altezza — e se la foto è
panoramica `cover` ne mostra solo una striscia centrale. È il difetto
delle «foto stirate in verticale» nelle pagine interne. */
.cornice img,
.cornice--alta img { aspect-ratio: 4/3; }
/* Tre colonne di anteprime su un telefono sono francobolli da 110px:
due si guardano, tre no. */
.assaggio { grid-template-columns: repeat(2, 1fr); }
}
/* Le schede delle camere passano a colonna unica molto prima dei 400px: a due
colonne su un telefono da 414px ognuna è larga 190px e alta 234 (3:3.7), e
la foto dentro si legge come un ritaglio verticale. */
@media (max-width: 620px) {
.flotta { grid-template-columns: 1fr; }
.stanza { aspect-ratio: 4/3; }
.assaggio { grid-template-columns: repeat(2, 1fr); }
.focus__galleria { grid-template-columns: 1fr; }
/* La prima foto sta su 21/9 quando è larga tre colonne; qui la colonna è
una sola e quel formato la ridurrebbe a una fessura. */
.focus__galleria img:first-child { aspect-ratio: auto; }
/* ── SUL TELEFONO LA FOTO TIENE LE SUE PROPORZIONI ────────────────────
Su schermo largo il ritaglio 4:3 uniforme fa ordine: le miniature sono
piccole e allineate, e quel che si perde ai bordi non conta. Qui la
colonna è metà di un telefono: ritagliare una foto verticale a 4:3
vuol dire buttarne via metà proprio dove l'ospite la guarda davvero.
Ognuna prende quindi il rapporto suo, e la griglia si accontenta. */
.assaggio img,
.focus__galleria img { aspect-ratio: auto; height: auto; object-fit: contain; }
}
/* ── Il pulsante del menu: solo su schermi stretti ───────────────────────── */
.menu-apri { display: none; }
.menu-lato__lingue { display: none; }
@media (max-width: 960px) {
/* ── Menu del telefono ────────────────────────────────────────────────
Prima le voci finivano in fila sotto il marchio, ammassate in cima allo
schermo: nessuna gerarchia, e su un iPhone il bottone Prenota veniva
tagliato dal bordo. Qui la navigazione diventa quello che su un telefono
ci si aspetta — un pulsante che apre un pannello a tutta pagina. */
.menu-apri {
display: flex; align-items: center; justify-content: center;
position: fixed; top: 16px; left: 18px; z-index: 70;
width: 44px; height: 44px; border-radius: 14px; /* 44px: la misura minima toccabile con sicurezza */
background: var(--vetro-fondo); border: 1px solid var(--vetro-bordo);
box-shadow: var(--vetro-ombra);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: background 0.25s, border-color 0.25s;
}
.menu-apri:active { background: rgba(255,255,255,0.14); }
.menu-apri__righe { display: flex; flex-direction: column; gap: 4px; width: 19px; }
.menu-apri__righe i {
display: block; height: 1.5px; border-radius: 2px; background: var(--inchiostro);
transition: transform 0.35s var(--curva), opacity 0.25s;
}
/* Aperto: le tre righe diventano una X, senza cambiare markup */
.menu-apri[aria-expanded="true"] .menu-apri__righe i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-apri[aria-expanded="true"] .menu-apri__righe i:nth-child(2) { opacity: 0; }
.menu-apri[aria-expanded="true"] .menu-apri__righe i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* Il marchio lascia spazio al pulsante, e i tre elementi si dividono la
riga senza sovrapporsi: senza min-width:0 il marchio non si lascia
stringere e spinge il Prenota fuori dallo schermo. */
.testata { padding-left: 72px; padding-right: 14px; gap: 10px; align-items: center; }
/* Va A CAPO invece di troncarsi con «…»: prima "Casa Vacanza Ga…" era
illeggibile e poco curato (segnalato il 9 agosto). nomeComposto() in
TemaBase.php mette SEMPRE l'ultima parola del nome in — qui basta
forzarla su una riga propria per ottenere esattamente lo split voluto
("Casa Vacanza" sopra, "Garda" sotto in oro), qualunque sia il nome. */
.marchio {
font-size: clamp(1.25rem, 5.2vw, 1.9rem);
min-width: 0; white-space: normal; line-height: 1.15;
}
.marchio em { display: block; }
.testata__destra { flex-shrink: 0; }
.prenota-alto { padding: 9px 14px; font-size: .64rem; letter-spacing: .1em; }
.menu-lato,
.modo-profondita .menu-lato {
position: fixed; inset: 0; z-index: 65; max-width: none;
display: flex; flex-direction: column; justify-content: center;
padding: 84px clamp(26px, 8vw, 48px) 40px;
background: rgba(5, 9, 14, 0.90);
backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
overflow-y: auto;
/* Chiuso: fuori scena e non raggiungibile nemmeno col tasto Tab —
visibility (non solo opacity) toglie il pannello dall'ordine di
navigazione, altrimenti si finirebbe a scrivere dentro un menu invisibile. */
opacity: 0; visibility: hidden; transform: translateX(-14px);
transition: opacity 0.35s ease, visibility 0.35s, transform 0.4s var(--curva);
}
.menu-lato.aperto { opacity: 1; visibility: visible; transform: none; }
/* Nessun secondo pulsante di chiusura: lo stesso hamburger apre e chiude
(diventa una X). Due X sulla stessa schermata facevano solo chiedere
quale delle due fosse quella giusta. */
.menu-lato__conta { margin-bottom: 22px; }
.menu-lato ul { flex-direction: column; gap: 2px; }
.voce {
font-size: clamp(1.65rem, 7.5vw, 2.3rem); padding: 14px 0 14px 18px;
display: block; /* tutta la riga è toccabile, non solo le lettere */
}
/* Le lingue non stanno in testata su un telefono: vivono qui */
.menu-lato__lingue { display: block; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--vetro-bordo); }
.menu-lato__lingue .lingue { gap: 12px; }
.menu-lato__lingue .lingue__voce { width: 34px; height: 34px; opacity: 0.75; }
/* In testata restano marchio e Prenota: le bandiere sono nel pannello */
.testata__destra .lingue { display: none; }
.scena-testo { padding-bottom: 0; }
}
/* Mentre il menu è aperto la pagina dietro non scorre: su iOS, senza questo,
il dito trascina il contenuto sotto invece del menu. */
body.menu-aperto { overflow: hidden; }
@media (max-width: 640px) {
/* ATTENZIONE: questo blocco viene DOPO quello a 960px, quindi qui NON si
rimette un padding pieno sulla testata — cancellerebbe lo spazio
riservato al pulsante del menu e il marchio finirebbe sotto di esso.
(È successo: il marchio sembrava troncato, in realtà era coperto.) */
/* La testata non può MAI far uscire nulla dallo schermo: overflow-x clip
taglia l'eccesso senza creare una barra di scorrimento orizzontale (che
su un telefono farebbe ballare tutta la pagina di lato).
padding-left:86px lascia un distacco vero dall'hamburger, che è fisso a
sinistra:18px, largo 44px — finisce a 62px. Prima il marchio iniziava a
68px, 6px dopo: praticamente attaccato. */
.testata { padding: 14px 12px 14px 86px; overflow-x: clip; }
/* Un tetto in vw, non più per forzare il troncamento (ora il marchio va a
capo da solo su "Casa Vacanza" / "Garda", vedi sopra) ma solo perché la
prima riga non si allunghi fin sotto il Prenota su nomi lunghi. Con lo
split su due righe il tetto può essere più largo di prima. */
.marchio { font-size: clamp(1.15rem, 4.6vw, 1.5rem); max-width: 58vw; }
.prenota-alto { padding: 8px 11px; font-size: 0.58rem; letter-spacing: 0.08em; }
}
@media (max-width: 400px) {
/* Schermi molto stretti: il marchio si accorcia ancora, il bottone no.
Fra i due, quello che porta prenotazioni non si tocca. Il distacco
dall'hamburger (18px+44px=62px) resta comunque ampio: 78px di padding. */
.marchio { max-width: 46vw; font-size: 1.1rem; }
.testata { padding-left: 78px; }
/* Le pastiglie si accostano al bordo: su un telefono ogni pixel di
panorama libero conta. */
.azioni { gap: 10px; }
.azione, .azione__icona { height: 46px; }
.azione { grid-template-columns: 46px 0fr; }
.azione__icona { width: 46px; }
@media (hover: hover) { .azione:hover { grid-template-columns: 46px 1fr; } }
.voce { font-size: 1.02rem; }
.flotta { grid-template-columns: 1fr; }
.stanza { aspect-ratio: 4/3; }
.campi-duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.fondale__foto { animation: none; }
.grana { display: none; }
.rivela { opacity: 1; transform: none; }
}
/* ── PIÈ DI PAGINA ──────────────────────────────────────────────────────────
Nome, indirizzo e contatti in ogni pagina: sono il segnale con cui una
persona distingue una struttura vera da una vetrina anonima, e la SEO locale
li pesa (NAP coerente). Tono sommesso: informa senza rubare la scena. */
.piede { position: relative; z-index: 3; padding: 42px 6vw 32px; text-align: center; }
.piede__interno { max-width: 900px; margin: 0 auto; }
.piede p { margin: 0 0 6px; font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.62); letter-spacing: .01em; }
.piede__nap strong { color: rgba(255,255,255,.9); font-weight: 600; letter-spacing: .02em; }
.piede__sep { margin: 0 .5em; opacity: .45; }
.piede a, .piede__link { color: rgba(255,255,255,.62); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.piede a:hover, .piede__link:hover { color: var(--accento, #d9b98a); border-bottom-color: currentColor; }
/* Il bottone "preferenze cookie" deve leggersi come gli altri link, ma restare
un