, e quindi tutto il video dentro ".apertura__quadro"), qualunque z-index si scriva più in basso dentro main: quello z-index conta solo fra fratelli dentro main, mai contro un elemento con z-index positivo fuori da main. Risultato: questo velo, anche se sottile, copriva il quadrato del video. 2) "Togli lo sfumato" in fondo alla foto: era proprio la sfumatura bianca di questo velo (mask-image), visibile sopra la foto in bianco e nero nella fascia bassa dello schermo — su Safari con un leggero effetto colorato indesiderato. Da quando ".fondo-apertura" è diventato bianco semplice (richiesta di Luca del 2026-09-24, via il gradiente blu), questo velo non ha più nessuna funzione: sopra un fondo già bianco, un altro bianco che sfuma non si vede nella pagina reale, si vedeva solo sopra la foto. Rimosso: l'elemento resta nell'HTML (innocuo) ma non disegna più nulla. */ .velo-apertura{ display: none; } /* CORREZIONE BUG (2026-09-23): scorrendo la Home lo schermo diventava bianco e vuoto. Causa: ".fondo-apertura" è "position: fixed" con "z-index: 0" — per le regole CSS sull'ordine di disegno, un elemento POSIZIONATO con z-index 0 (o "auto") si disegna SEMPRE sopra agli elementi normali non posizionati (le nostre

qui sotto, che non hanno "position"), anche se nell'HTML viene prima di loro. Risultato: quando --chiaro arriva a 1 il fondo diventa bianco e questo strato fisso copre l'intera finestra, sopra a tutte le sezioni sottostanti (da qui anche l'indizio del test: il click "passava attraverso" perché lo strato ha pointer-events:none, ma restava visibile all'occhio). Rimedio: rendere

anch'esso un elemento "posizionato" (position: relative, senza spostarlo): così rientra nello stesso gruppo di ".fondo-apertura" e, venendo dopo nell'HTML, si disegna sopra di esso, come deve essere. Non tocca il layout (nessun top/left), non serve z-index esplicito. */ main{ position: relative; } .apertura{ position: relative; min-height: 100svh; overflow: hidden; /* le foto partono da sotto: senza questo la pagina nascerebbe alta il doppio */ color: var(--ap-testo); } /* ---- il testo ---- */ .apertura__testo{ padding-inline: 20px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } /* L'alone/gradiente blu che stava qui dietro al nome è stato tolto (richiesta di Luca 2026-09-24): sotto al testo ora c'è solo la foto in bianco e nero dell'apertura, senza nessuna sfumatura colorata. */ .apertura__titolo{ margin: 0; display: flex; justify-content: center; align-items: baseline; font-family: var(--font-titoli); font-weight: 400; font-size: clamp(24px, 6.3vw, 76px); line-height: 1; letter-spacing: .06em; white-space: nowrap; color: var(--ap-testo); /* ombra leggerissima (non un velo colorato): il nome sta su una foto, non più su uno sfondo blu pieno, quindi serve un minimo di contrasto anche sulle zone chiare della foto (richiesta di Luca 2026-09-24). */ text-shadow: 0 1px 14px rgba(0,0,0,.35); /* spostamento iniziale = metà larghezza di "ase Bianche", misurata dal browser (main.js): così la C parte davvero al centro dello schermo */ transform: translateX(var(--spostamento, 0px)); animation: ap-centra 1.75s cubic-bezier(.24,.86,.28,1) 1.83s both; } .apertura__lettera-c{ opacity: 0; animation: ap-comparire 1.25s ease-out .29s forwards; } .apertura__resto > span{ opacity: 0; animation: ap-comparire .92s ease-out var(--d) forwards; } .apertura__sottotitolo{ margin: 0; max-width: 50ch; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in oklab, var(--ap-testo) 72%, transparent); text-shadow: 0 1px 10px rgba(0,0,0,.3); opacity: 0; animation: ap-comparire 1.4s ease-out 4.3s forwards; } /* ---- Home v3 (aggiornata 2026-09-24, ispirata a kalesmamykonos.com) ---- La foto parte come una striscia verticale stretta al centro dello schermo e si allarga verso sinistra e destra fino a riempire tutto lo schermo (clip-path animato: più leggero e più fluido di animare larghezza/margini). Sopra, un contenitore centrato in verticale e in orizzontale (".apertura__centro") impila il nome e, sotto di lui, il riquadro quadrato con il video: MAI sovrapposti, uno sopra l'altro. */ /* CORNICE BIANCA (richiesta di Luca 2026-09-24): la foto a tutto schermo sta dentro un margine bianco di circa 1 cm su tutti e quattro i lati. Il margine è lo spazio fra questo riquadro (spostato dai bordi con "inset") e il bordo dello schermo: lì sotto c'è ".fondo-apertura", bianco, quindi si vede la cornice senza aggiungere altri elementi. Su telefono la cornice è più stretta (16-20px), su schermi più larghi diventa 38px (~1 cm). L'animazione di apertura dal centro resta identica, solo dentro al riquadro più piccolo. */ .apertura__foto-full{ position: absolute; inset: 18px; z-index: 0; overflow: hidden; clip-path: inset(0 calc(50% - 5px) 0 calc(50% - 5px)); animation: ap-foto-allarga 1.6s cubic-bezier(.22,.85,.23,1) .1s both; } @media (min-width: 640px){ .apertura__foto-full{ inset: 38px; } } .apertura__foto-full img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: grayscale(1); /* richiesta di Luca: foto in bianco e nero */ } @keyframes ap-foto-allarga{ from{ clip-path: inset(0 calc(50% - 5px) 0 calc(50% - 5px)); } to{ clip-path: inset(0 0 0 0); } } .apertura__centro{ position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 40px); padding: 24px 20px; } /* Riquadro quadrato con il video (446×800 verticale in origine, ritagliato a quadrato con object-fit: cover). Compare con una dissolvenza dolce dopo che la foto si è già allargata, per non sovrapporre due movimenti diversi nello stesso istante. */ .apertura__quadro{ position: relative; width: min(52vw, 52svh, 420px); aspect-ratio: 1 / 1; flex: 0 0 auto; overflow: hidden; background: var(--bianco-caldo); /* colore di attesa finché il video non carica: bianco, non più blu (richiesta di Luca 2026-09-24) */ opacity: 0; animation: ap-quadro-comparire 1s ease-out 1.35s forwards; } .apertura__quadro-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Ritocco a vista: il soggetto (tavolo e divano) sta nella metà inferiore del fotogramma verticale originale, quindi l'inquadratura si sposta un po' più in basso rispetto al centro puro. */ object-position: center 62%; display: block; } @keyframes ap-quadro-comparire{ to{ opacity: 1; } } /* ---- le tre foto (v1, inerte in v2: vedi nota sopra) ---- */ .apertura__foto{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 1.4vw, 24px); padding-inline: 12px; } .apertura__pannello{ position: relative; flex: 0 0 auto; /* Formato allungato (+50% di altezza, richiesta di Luca): in larghezza non c'è spazio, tre foto affiancate riempiono già lo schermo. object-fit ritaglia i lati, il soggetto resta al centro. */ width: min(29vw, 352px); aspect-ratio: 3 / 6.1; overflow: hidden; /* RICHIESTA DI LUCA (2026-09-24): via il blu anche come sfondo provvisorio (visibile un istante prima che la foto carichi). */ background: var(--bianco-caldo); transform: translateY(118vh); animation: ap-sale 2.6s cubic-bezier(.16,.82,.24,1) var(--ritardo) both; } .apertura__pannello img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* sfalsate: altezze di riposo diverse, tutte dentro la sezione */ .apertura__pannello--sinistra{ margin-bottom: 9vh; --ritardo: 6.15s; } .apertura__pannello--centro { margin-bottom: 0; --ritardo: 5.25s; } .apertura__pannello--destra { margin-bottom: 4.5vh; --ritardo: 4.35s; } @media (min-width: 900px){ .apertura__pannello{ width: min(26vw, 320px); aspect-ratio: 3 / 5.2; } } @keyframes ap-comparire{ to{ opacity: 1; } } @keyframes ap-centra{ to{ transform: translateX(0); } } @keyframes ap-sale{ to{ transform: translateY(0); } } /* Usata da main.js per far ripartire la sequenza dall'inizio (pulsante "Rivedi", presente solo finché la bozza è in revisione). */ .ferma-animazioni, .ferma-animazioni *{ animation: none !important; } .rivedi-apertura{ position: fixed; top: env(safe-area-inset-top, 0px); right: 0; z-index: 300; margin: 14px; padding: 9px 16px; border: 1px solid color-mix(in oklab, var(--ap-testo) 30%, transparent); border-radius: var(--radius); /* RICHIESTA DI LUCA (2026-09-24): via il blu, velo scuro neutro. */ background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ap-testo); font-family: var(--font-corpo); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } .rivedi-apertura:focus-visible{ outline: 2px solid var(--ap-testo); outline-offset: 3px; } /* Accessibilità (ha sempre la priorità): con "riduci animazioni" attivo nel sistema operativo tutto compare fermo e completo. */ @media (prefers-reduced-motion: reduce){ .apertura__titolo{ animation: none; transform: translateX(0); } .apertura__lettera-c, .apertura__resto > span, .apertura__sottotitolo{ animation: none; opacity: 1; } .apertura__pannello{ animation: none; transform: translateY(0); } /* Home v3: niente striscia che si allarga né dissolvenza del video, tutto compare già nello stato finale. */ .apertura__foto-full{ animation: none; clip-path: inset(0 0 0 0); } .apertura__quadro{ animation: none; opacity: 1; } } /* Velo di rivelazione riutilizzabile per altre foto di copertina (Camere, Bar, Location). Di default il velo è invisibile (opacity:0): se il piccolo script che lo attiva (main.js) non parte, la foto resta semplicemente visibile, mai nascosta per errore. */ .velo-rivelazione{ position: relative; overflow: hidden; } .velo-rivelazione::before{ content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(19, 50, 77, var(--velo-opacita)); opacity: 0; transition: opacity .5s ease-out; pointer-events: none; } .velo-rivelazione--pronto::before{ opacity: 1; } .velo-rivelazione--rivelato::before{ opacity: 0; } @media (prefers-reduced-motion: reduce){ .velo-rivelazione::before{ transition: none; opacity: 0 !important; } } /* ============================================================ Hero (usato in Bar; in Home l'hero è ".apertura" qui sopra) ============================================================ */ .hero{ position: relative; min-height: 520px; display: flex; align-items: flex-end; color: var(--bianco); overflow: hidden; } .hero__sfondo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__scurimento{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,50,77,.15) 0%, rgba(19,50,77,.75) 100%); } .hero__contenuto{ position: relative; z-index: 1; padding: 48px 20px 64px; max-width: 1200px; margin: 0 auto; width: 100%; } .hero__contenuto h1{ color: var(--bianco); font-size: 34px; font-weight: 500; } .hero__contenuto p{ color: var(--bianco); font-size: 18px; max-width: 50ch; } @media (min-width: 900px){ .hero{ min-height: 640px; } .hero__contenuto h1{ font-size: 60px; } } /* Testata senza foto vera (Capo Verde, La storia — struttura-v2.md §4): riusa ".foto-in-arrivo" come sfondo della testata invece di una foto, quindi niente sfumatura scura (non serve, lo sfondo è già chiaro) e testo scuro invece che bianco, leggibile lo stesso. */ .hero .foto-in-arrivo{ position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; } .hero--segnaposto .hero__scurimento{ display: none; } .hero--segnaposto .hero__contenuto h1, .hero--segnaposto .hero__contenuto p{ color: var(--blu-primario); } /* ============================================================ Card camera ============================================================ */ .card-camera{ background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .card-camera__foto-wrapper{ aspect-ratio: 3 / 4; background: var(--bianco-caldo); overflow: hidden; } .card-camera__foto-wrapper img{ width: 100%; height: 100%; object-fit: cover; } .card-camera__corpo{ padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card-camera__prezzo{ font-weight: 600; color: var(--blu-primario); } .card-camera .btn{ margin-top: 12px; align-self: flex-start; } /* Riquadro "foto in arrivo" (caso limite: foto mancante) */ .foto-in-arrivo{ aspect-ratio: 3 / 4; background: var(--bianco-caldo); border: 1px dashed var(--bordo); display: flex; align-items: center; justify-content: center; color: var(--testo-secondario); font-size: 14px; text-align: center; padding: 16px; } /* Galleria foto verticale (dettaglio camera) */ .galleria{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .galleria img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); } /* Immagine ampia (solo per l'unica foto orizzontale) */ .foto-ampia{ width: 100%; aspect-ratio: 4/3; object-fit: cover; } @media (min-width: 900px){ .foto-ampia{ aspect-ratio: 16/9; } } /* ============================================================ Liste informazioni (dettaglio camera, ecc.) ============================================================ */ .info-lista{ display: grid; gap: 16px; grid-template-columns: 1fr; margin: 24px 0; } @media (min-width: 640px){ .info-lista{ grid-template-columns: repeat(2, 1fr); } } .info-voce dt{ font-size: 14px; color: var(--testo-secondario); margin-bottom: 4px; } .info-voce dd{ margin: 0; font-weight: 500; } /* ============================================================ Moduli (form) ============================================================ */ .modulo{ max-width: 480px; } .campo{ margin-bottom: 20px; } .campo label{ display: block; font-weight: 500; margin-bottom: 6px; } .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="date"], .campo select, .campo textarea{ width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: var(--radius); font-family: var(--font-corpo); font-size: 16px; color: var(--blu-primario); background: var(--bianco); } .campo textarea{ min-height: 100px; resize: vertical; } .campo small{ display: block; margin-top: 4px; color: var(--testo-secondario); } .campo--errore input, .campo--errore select, .campo--errore textarea{ border-color: var(--errore); } .campo__errore-testo{ color: var(--errore); font-size: 14px; margin-top: 4px; display: block; } .scelta-gruppo{ display: flex; gap: 16px; flex-wrap: wrap; } .scelta-gruppo label{ display: flex; align-items: center; gap: 8px; border: 1px solid var(--bordo); border-radius: var(--radius); padding: 10px 16px; min-height: 44px; cursor: pointer; font-weight: 500; } .scelta-gruppo input:checked + span, .scelta-gruppo label:has(input:checked){ border-color: var(--blu-primario); } /* ============================================================ Menu bar (colazioni / aperitivi) ============================================================ */ .voce-menu{ display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--bordo); } .voce-menu__nome{ font-weight: 500; } .voce-menu__prezzo{ white-space: nowrap; font-weight: 600; } .voce-menu--con-checkbox{ align-items: center; } .voce-menu--con-checkbox input[type="checkbox"]{ width: 20px; height: 20px; margin-right: 12px; } .blocco-aperitivi{ background: var(--bianco-caldo); border-radius: var(--radius); padding: 24px; } .blocco-aperitivi .voce-menu{ border-bottom-color: var(--bordo); cursor: default; } .nota-non-prenotabile{ color: var(--testo-secondario); font-style: italic; margin-top: 16px; } /* ============================================================ Footer ============================================================ */ .footer{ /* CORREZIONE BUG (2026-09-23), stessa causa di "main{position:relative}" qui sopra (vedi il commento largo accanto a quella regola): in index.html il