/* Self-hosted Google Fonts — GDPR-compliant, no requests to fonts.gstatic.com */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(assets/fonts/inter-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(assets/fonts/inter-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/inter-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/inter-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/inter-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/inter-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/inter-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/inter-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
COCÓ MARE — STYLE.CSS
Design mediterraneo premium · Mobile-first · Vanilla CSS
--------------------------------------------------------------------------
Struttura:
1. Reset & basi
2. Variabili (palette, font, spacing)
3. Layout container, sezioni, eyebrow
4. Tipografia
5. Header + Nav desktop / mobile
6. Hero
7. Sezione Informazioni
8. Sezione Ristorante (intro + card)
9. Menu (filtri, card piatti) — usato da Ristorante e Snack Bar
10. Sezione Snack Bar
11. Sezione Spiaggia + Form ordine
12. Sezione Eventi/Matrimoni + Form eventi
13. Gallery
14. Contatti + Mappa placeholder
15. Footer
16. Floating CTA mobile
17. Animazioni reveal
18. Bottoni
19. Form components
20. Media queries
========================================================================== */
/* ============================ 1. RESET & BASI ============================ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
color: var(--c-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* ─── God-mode background premium (azzurro pastello marino) ───
2 layer fissi:
1. Texture noise SVG fractal — "grana di carta stampata" stile boutique
hotel (Aman / Six Senses / JK Place). Tinta marina: pixel rumore
in azzurro-teal a ~3% di visibilità finale = texture sottilissima.
2. Gradient diagonale azz-pastello → bianco-mare → azz-pastello —
profondità tridimensionale e mood mediterraneo marino.
background-attachment: fixed → il fondo resta fermo allo scroll,
il contenuto "fluttua" sopra → look premium. */
background-color: var(--bg-main);
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.78 0 0 0 0 0.85 0 0 0 0.30 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
linear-gradient(135deg,
#EAF7FA 0%,
#F2FAFB 30%,
#EEF8FA 50%,
#F2FAFB 70%,
#EAF7FA 100%);
background-attachment: fixed, fixed;
background-size: 320px 320px, cover;
background-repeat: repeat, no-repeat;
}
img, picture, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
/* skip link */
.skip-link {
position: absolute; top: -40px; left: 8px;
background: var(--c-deep);
color: #fff;
padding: 8px 12px; border-radius: 6px;
z-index: 9999;
transition: top .2s ease;
}
.skip-link:focus { top: 8px; }
/* ============================ 2. VARIABILI ============================ */
:root {
/* palette */
--c-deep: #0B3D4A; /* blu mare profondo */
--c-aqua: #77C9D4; /* azzurro acqua */
--c-sand: #E8D6B8; /* sabbia */
--c-cream: #FFF8EF; /* bianco caldo (usato in hero, form, elementi warm) */
--c-gold: #A8854A; /* oro champagne — accenti decorativi */
--c-gold-text: #7A5A2E; /* oro scuro — per testi piccoli (WCAG AA pass) */
--c-text: #1E1E1E; /* testo scuro */
--c-green: #4F6F52; /* verde mediterraneo */
--c-soft: #F5F2EC; /* grigio soft */
--c-line: rgba(11,61,74,0.12);
--c-bg: var(--c-cream);
/* ── Palette azzurro pastello marino (refactor 2026-05-30) ──────────────
Sostituisce lo sfondo beige/crema globale con toni di mare fresco.
Le variabili brand storiche (--c-deep, --c-gold, --c-cream) restano
invariate per garantire continuità nei componenti warm (hero, form,
wine modal, footer). */
--bg-main: #EAF7FA; /* sfondo principale azzurro pastello */
--bg-soft: #F2FAFB; /* sezioni alternate (più chiara) */
--bg-card: rgba(255,255,255,0.94); /* card/contenitori */
--sea-soft: #B8E3EC; /* accenti soft marini */
--text-main: #1F2D2F; /* testo principale */
--text-muted: #5E7378; /* testo secondario */
--border-soft: rgba(80,140,150,0.18); /* bordi tenui marini */
/* font */
--ff-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
--ff-body: "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
/* spacing */
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: .75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.25rem;
--space-2xl: 3.5rem;
--space-3xl: 5rem;
/* radius / shadow */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-pill: 999px;
--sh-sm: 0 2px 8px rgba(11,61,74,0.06);
--sh-md: 0 10px 30px rgba(11,61,74,0.10);
--sh-lg: 0 20px 60px rgba(11,61,74,0.18);
/* header */
--header-h: 72px;
/* container */
--container: 1180px;
}
/* ============================ 3. LAYOUT ============================ */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.25rem;
}
.section {
padding: var(--space-2xl) 0;
position: relative;
}
.section-head {
max-width: 760px;
margin: 0 auto var(--space-xl);
text-align: center;
}
.section-head h2 {
font-family: var(--ff-display);
font-weight: 600;
font-size: clamp(1.9rem, 4.5vw, 2.8rem);
line-height: 1.15;
margin: 0 0 .5rem;
color: var(--c-deep);
}
.section-sub {
color: rgba(30,30,30,0.7);
font-size: 1.05rem;
margin: 0;
}
.section-head-light h2,
.section-sub-light { color: #fff; }
.section-sub-light { color: rgba(255,255,255,0.85); }
.eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: .22em;
font-size: .72rem;
font-weight: 600;
color: var(--c-gold-text);
margin: 0 0 .6rem;
}
/* Divisore decorativo "diamante oro" per separare sezioni — uso opzionale */
.section-divider {
display: flex; align-items: center; justify-content: center;
gap: 1rem;
margin: var(--space-xl) auto;
max-width: 320px;
color: var(--c-gold);
}
.section-divider::before,
.section-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
.section-divider-dot {
width: 6px; height: 6px;
background: var(--c-gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.eyebrow-light { color: var(--c-sand); }
.gold { color: var(--c-gold); font-style: italic; }
/* ============================ 4. TIPOGRAFIA ============================ */
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; color: var(--c-deep); line-height: 1.2; }
h3 { font-size: 1.55rem; margin: 0 0 .5rem; }
h4 { font-size: 1.15rem; margin: 0 0 .35rem; }
p { margin: 0 0 .8rem; }
/* ============================ 5. HEADER + NAV ============================ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: transparent;
transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
padding: 12px 0;
}
.site-header.scrolled {
background: rgba(234,247,250,0.96);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
box-shadow: var(--sh-sm);
padding: 6px 0;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 56px;
}
.brand {
display: flex; align-items: center; gap: .7rem;
color: #fff;
}
.site-header.scrolled .brand { color: var(--c-deep); }
/* Logo wrapper:
Il logo è ora PNG trasparente. Sopra la hero (header trasparente / fondo scuro)
usiamo `filter: brightness(0) invert(1)` per ottenere un logo perfettamente BIANCO.
Dopo lo scroll (sfondo cream) rimuoviamo il filtro e mostriamo il logo
originale in blu profondo. */
.brand-logo-wrap {
display: inline-flex;
align-items: center; justify-content: center;
padding: 0;
background: transparent;
border: none;
transition: padding .3s ease;
}
.brand-logo {
display: block;
height: 42px; width: auto;
object-fit: contain;
filter: brightness(0) invert(1); /* bianco su fondi scuri */
transition: filter .3s ease, height .3s ease;
/* Drop-shadow morbida per leggibilità anche sopra video con frame chiari */
filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.site-header.scrolled .brand-logo {
filter: none; /* blu originale su cream */
height: 44px;
}
/* Sulle pagine secondarie l'header parte già "scrolled" → logo blu originale */
.page-sub .site-header .brand-logo { filter: none; height: 44px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-tag {
font-size: .66rem;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .85;
display: none; /* mostrato da media query desktop, altrimenti il logo basta */
}
@media (min-width: 900px) {
.brand-tag { display: block; }
}
.nav-desktop ul {
display: none;
gap: 1.6rem;
align-items: center;
}
.nav-desktop a {
font-weight: 500;
font-size: .92rem;
color: #fff;
position: relative;
padding: 6px 0;
transition: color .25s ease;
}
.site-header.scrolled .nav-desktop a { color: var(--c-deep); }
.nav-desktop a::after {
content:""; position:absolute; left:0; right:0; bottom:-2px;
height: 2px; background: var(--c-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.nav-desktop a:hover::after,
.nav-desktop a:focus::after { transform: scaleX(1); }
.btn-cta-header { display: none; }
.hamburger {
width: 40px; height: 40px;
display: grid; place-items: center;
background: rgba(255,255,255,0.15);
border-radius: var(--r-sm);
position: relative;
}
.site-header.scrolled .hamburger { background: rgba(11,61,74,0.08); }
.hamburger span {
display: block;
width: 18px; height: 2px;
background: #fff;
margin: 2px 0;
transition: transform .25s ease, opacity .25s ease;
}
.site-header.scrolled .hamburger span { background: var(--c-deep); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh; /* viewport dinamico iOS Safari (esclude address bar) */
background: var(--bg-main);
transform: translateY(-110%);
transition: transform .35s ease;
z-index: 110; /* sopra il site-header (z-index 100) */
padding: calc(var(--header-h) + 20px) 1.5rem 2rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-mobile.open { transform: translateY(0); }
.nav-mobile ul { display: flex; flex-direction: column; gap: 1rem; }
.nav-mobile a {
display: block;
font-family: var(--ff-display);
font-size: 1.5rem;
font-weight: 500;
color: var(--c-deep);
padding: .6rem 0;
border-bottom: 1px solid var(--c-line);
}
.nav-mobile a.btn { font-family: var(--ff-body); font-size: 1rem; border: 0; text-align: center; }
/* ============================ 6. HERO (split: video sopra, claim sotto) ============================ */
.hero {
position: relative;
display: grid;
place-items: center;
min-height: 78vh;
min-height: 78svh;
background: var(--c-deep);
overflow: hidden;
isolation: isolate;
}
/* ZONA VIDEO — full bleed di sfondo, il testo si sovrappone */
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--c-deep);
}
/* Fallback gradient se il video non c'è / non parte. */
.hero-bg {
position: absolute; inset: 0;
z-index: 0;
background:
radial-gradient(ellipse at 80% 20%, rgba(200,169,106,0.25), transparent 50%),
radial-gradient(ellipse at 10% 80%, rgba(119,201,212,0.45), transparent 55%),
linear-gradient(135deg, #0B3D4A 0%, #0E5566 40%, #1A7A8C 70%, #C8A96A 130%);
}
/* Video Kling castello → logo
- object-fit: cover + container con aspect-ratio identico al video
→ riempie perfettamente, zero bande, zero crop
- scale(1.06) = leggero zoom (3% per lato) che spinge fuori dal viewport
il watermark "KlingAI 3.0" in basso a destra senza tagliare il soggetto
(castello/logo restano ben centrati) */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
background: transparent;
transform: scale(1.06);
transform-origin: center center;
}
/* Velo per opacizzare leggermente il video + dare contrasto al testo centrato */
.hero-overlay {
position: absolute; inset: 0;
z-index: 2;
background:
/* vignette radiale che scurisce i bordi mantenendo centrale più luminoso */
radial-gradient(ellipse at center, rgba(11,61,74,0.25) 0%, rgba(11,61,74,0.55) 100%),
/* gradient verticale: scuro sopra (header) + scuro sotto (per leggibilità) */
linear-gradient(180deg,
rgba(11,61,74,0.55) 0%,
rgba(11,61,74,0.30) 30%,
rgba(11,61,74,0.30) 70%,
rgba(11,61,74,0.70) 100%);
pointer-events: none;
}
/* Reduced motion: video off, mostra solo fallback */
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
}
/* ZONA CLAIM — sovrapposta al video, centrata */
.hero-content {
position: relative;
z-index: 3;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 5rem 1.5rem;
text-align: center;
color: #fff;
animation: heroIn 1s ease both;
}
.hero-content-inner {
text-align: center;
max-width: 860px;
margin: 0 auto;
}
.hero-content > *,
.hero-content-inner > * { max-width: 100%; }
.hero-content .eyebrow {
color: #E8C988;
font-weight: 700;
letter-spacing: .3em;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
@keyframes heroIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-title {
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.6rem, 7vw, 5rem);
line-height: 1.05;
margin: 1rem 0 .8rem;
color: #fff;
letter-spacing: -.01em;
text-shadow:
0 2px 8px rgba(0,0,0,0.55),
0 6px 28px rgba(0,0,0,0.45);
}
.hero-title .gold { color: #E8C988; font-style: italic; }
.hero-sub {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.05rem, 2.2vw, 1.4rem);
color: rgba(255,255,255,0.92);
margin: 0 0 1.4rem;
text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.hero-copy {
max-width: 640px;
margin: 0 auto 1.6rem;
font-size: 1.02rem;
color: rgba(255,255,255,0.92);
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
line-height: 1.55;
}
.hero-scroll {
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* Sottile linea oro tra zona video e zona claim: firma del brand */
.hero-media::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--c-gold) 20%,
var(--c-gold) 80%,
transparent 100%);
z-index: 4;
opacity: .85;
}
/* "Cintura di sicurezza" anti-watermark KlingAI:
sfumatura nell'angolo in basso a destra del video, fonde dolcemente
con il colore del cielo/mare. Larga abbastanza da coprire il logo Kling
in qualunque viewport, ma sfumata per restare invisibile. */
.hero-media::before {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 220px;
height: 70px;
z-index: 3;
pointer-events: none;
background: radial-gradient(ellipse at bottom right,
rgba(11,61,74,0.85) 0%,
rgba(11,61,74,0.55) 35%,
rgba(11,61,74,0) 75%);
filter: blur(8px);
}
/* ============================ 7. INFORMAZIONI ============================ */
.section-info { background: var(--bg-main); }
.info-intro {
max-width: 800px;
margin: 0 auto var(--space-xl);
text-align: center;
font-size: 1.08rem;
color: rgba(30,30,30,0.8);
}
.info-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr;
margin-bottom: var(--space-xl);
}
.info-block {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 1.6rem;
box-shadow: var(--sh-sm);
}
.info-block h3 { margin-bottom: .8rem; }
.chip-list {
display: flex; flex-wrap: wrap; gap: .4rem;
margin-top: .8rem;
}
.chip-list li {
background: var(--bg-soft);
color: var(--c-deep);
padding: .3rem .75rem;
border-radius: var(--r-pill);
font-size: .78rem;
font-weight: 500;
}
.exp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .7rem;
}
.exp-item {
display: flex; align-items: center; gap: .55rem;
padding: .65rem .8rem;
background: var(--bg-soft);
border-radius: var(--r-md);
}
.exp-item span { font-size: 1.4rem; }
.exp-item p { margin: 0; font-size: .9rem; font-weight: 500; color: var(--c-deep); }
/* Perché scegliere — griglia card con linea oro decorativa */
.why-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
margin-top: var(--space-lg);
}
.why-card {
background: var(--bg-card);
border-radius: var(--r-lg);
padding: 1.4rem 1.2rem;
text-align: center;
border: 1px solid var(--border-soft);
transition: transform .3s ease, box-shadow .3s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.why-icon { display: none; }
.why-card > h4 {
position: relative;
padding-top: 1.2rem;
margin-bottom: .6rem;
}
.why-card > h4::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 40px; height: 1px;
background: var(--c-gold);
}
.why-card h4 { color: var(--c-deep); }
.why-card p { color: var(--text-muted, rgba(30,30,30,0.7)); margin: 0; font-size: .92rem; }
/* ============================ 8. RISTORANTE ============================ */
.section-restaurant {
background:
linear-gradient(180deg, var(--bg-main) 0%, var(--bg-soft) 100%);
}
.restaurant-intro {
max-width: 780px;
margin: 0 auto var(--space-xl);
text-align: center;
font-size: 1.05rem;
color: rgba(30,30,30,0.8);
}
.tag-block {
margin-top: var(--space-xl);
background: var(--bg-card);
border: 1px dashed var(--c-gold);
border-radius: var(--r-lg);
padding: 1.4rem;
text-align: center;
}
.tag-title {
font-family: var(--ff-display);
font-size: 1.1rem;
color: var(--c-deep);
margin-bottom: .8rem;
}
.tag-block .chip-list { justify-content: center; }
.tag-block .chip-list li {
background: var(--bg-card);
border: 1px solid var(--c-gold);
color: var(--c-deep);
}
/* ============================ 9. MENU (RIST + SNACK) ============================ */
.menu-block { margin-top: var(--space-2xl); }
.menu-head { text-align: center; margin-bottom: var(--space-lg); }
.menu-head h3 {
font-family: var(--ff-display);
font-size: 1.8rem;
}
.menu-note {
color: rgba(30,30,30,0.6);
font-size: .88rem;
font-style: italic;
}
.menu-note-center { text-align: center; margin-top: 1.2rem; }
.filters {
display: flex;
gap: .45rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: var(--space-lg);
padding: 0 .25rem;
}
.filter-btn {
padding: .55rem 1.1rem .58rem;
background: transparent;
border: 1px solid rgba(11, 61, 74, 0.28);
border-radius: var(--r-pill);
color: var(--c-deep);
font-family: var(--ff-body);
font-size: .78rem;
font-weight: 500;
letter-spacing: .03em;
cursor: pointer;
transition: all .3s cubic-bezier(.4,0,.2,1);
white-space: nowrap;
position: relative;
opacity: .8;
}
.filter-btn:hover {
border-color: var(--c-deep);
color: var(--c-deep);
opacity: 1;
transform: translateY(-1px);
}
.filter-btn:focus-visible {
outline: 2px solid var(--c-deep);
outline-offset: 2px;
}
.filter-btn.active {
background: var(--c-deep);
color: #FFFFFF;
border-color: var(--c-deep);
opacity: 1;
box-shadow: 0 4px 12px -4px rgba(11, 61, 74, 0.4);
}
.menu-list {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
/* Le card piatto sulla stessa riga devono avere stessa altezza */
grid-auto-rows: 1fr;
align-items: stretch;
}
.menu-category {
grid-column: 1 / -1;
font-family: var(--ff-display);
font-size: 1.6rem;
font-weight: 500;
font-style: italic;
color: var(--c-deep);
border-bottom: 1px solid var(--c-line);
padding-bottom: .45rem;
margin: 0 0 .5rem;
letter-spacing: -0.005em;
text-align: center;
}
/* Ornamento editoriale sopra ogni categoria: tratto — losanga — tratto */
.menu-category-ornament {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
margin: 1.8rem 0 .5rem;
}
.menu-category-ornament:first-child { margin-top: .2rem; }
.menu-category-ornament span:nth-child(1),
.menu-category-ornament span:nth-child(3) {
display: block;
width: 38px;
height: 1px;
background: var(--c-deep);
opacity: .35;
}
.menu-category-ornament span:nth-child(2) {
display: block;
width: 7px;
height: 7px;
background: var(--c-deep);
opacity: .55;
transform: rotate(45deg);
}
@media (max-width: 767px) {
.menu-category { font-size: 1.4rem; }
.menu-category-ornament span:nth-child(1),
.menu-category-ornament span:nth-child(3) { width: 28px; }
}
/* ═══════════════════════════════════════════════════════════════
QUICK-JUMP: pulsanti per saltare a Vini / Bibite (sopra ai filtri ristorante)
═══════════════════════════════════════════════════════════════ */
.menu-quickjump {
display: flex;
flex-wrap: wrap;
gap: .65rem;
justify-content: center;
margin: 0 0 1.4rem;
}
.quickjump-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .65rem 1.1rem .68rem;
background: linear-gradient(180deg, var(--c-deep) 0%, #0E5566 100%);
color: #fff;
border-radius: var(--r-pill);
font-family: var(--ff-body);
font-size: .82rem;
font-weight: 500;
letter-spacing: .03em;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 4px 12px -4px rgba(11, 61, 74, 0.4);
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease;
}
.quickjump-btn svg {
flex-shrink: 0;
color: var(--c-aqua);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.quickjump-btn:hover {
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 8px 20px -6px rgba(11, 61, 74, 0.5);
background: linear-gradient(180deg, #0E5566 0%, var(--c-deep) 100%);
color: #fff;
}
.quickjump-btn:hover svg {
transform: scale(1.1) rotate(-3deg);
}
.quickjump-btn:active {
transform: translateY(0);
}
.quickjump-btn:focus-visible {
outline: 2px solid var(--c-aqua);
outline-offset: 2px;
}
@media (max-width: 480px) {
.menu-quickjump { gap: .5rem; }
.quickjump-btn {
font-size: .78rem;
padding: .58rem .95rem .6rem;
}
}
@media (prefers-reduced-motion: reduce) {
.quickjump-btn,
.quickjump-btn svg {
transition: none;
transform: none;
}
.quickjump-btn:hover { transform: none; }
}
/* ════════════════════════════════════════════════════════════════
Decorazioni marine acquerellate — sfondo sezioni menu.
Ogni pagina ha la sua coppia di soggetti per personalità.
`mix-blend-mode: multiply` fonde l'acquerello blu col fondo crema.
════════════════════════════════════════════════════════════════ */
#menu-snackbar,
#menu-ristorante,
#menu-spiaggia {
position: relative;
overflow: hidden;
/* Performance: lazy rendering quando fuori viewport — risparmio CPU/RAM */
content-visibility: auto;
contain-intrinsic-size: 0 1200px;
}
#menu-snackbar > *,
#menu-ristorante > *,
#menu-spiaggia > * {
position: relative;
z-index: 1;
}
/* Shared positioning per le decorazioni.
PNG con alpha channel (sfondo bianco → trasparente) — l'alpha
sfumato preserva il watercolor; niente mix-blend-mode necessario. */
#menu-snackbar::before,
#menu-ristorante::before,
#menu-spiaggia::before,
#menu-snackbar::after,
#menu-ristorante::after,
#menu-spiaggia::after {
content: "";
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: 0;
opacity: .7;
}
/* Top-right corner: posizionamento condiviso */
#menu-snackbar::before,
#menu-ristorante::before,
#menu-spiaggia::before {
top: 2rem;
right: -60px;
width: 320px;
height: 380px;
}
/* Bottom-left corner: posizionamento condiviso */
#menu-snackbar::after,
#menu-ristorante::after,
#menu-spiaggia::after {
bottom: 2rem;
left: -50px;
width: 280px;
height: 380px;
}
/* ═══════════════════════════════════════════════════════════════
DECORAZIONI MENU — distribuzione tematica
• SNACK BAR: "Il mare vivo" — creature dinamiche
• RISTORANTE: "Dal mare al piatto" — pesce + verdura marina
• BEACH CLUB: "I tesori della riva" — conchiglie e fossili
═══════════════════════════════════════════════════════════════ */
/* SNACK BAR — polipo (top) + tartaruga + spirale pesci (bottom stacked).
Tema: creature marine vive, movimento, energia. */
#menu-snackbar::before {
background-image: url("assets/decor/polipo.webp");
width: 320px;
height: 380px;
}
#menu-snackbar::after {
background-image: url("assets/decor/tartaruga.webp");
width: 180px;
height: 180px;
bottom: 3rem;
}
/* RISTORANTE — banco pesci (top) + alga + corallo scuro (bottom stacked).
Tema: dal mare al piatto, pesce di qualità + verde marino + elegante. */
#menu-ristorante::before {
background-image: url("assets/decor/banco-pesci.webp");
width: 300px;
height: 440px;
}
#menu-ristorante::after {
background-image: url("assets/decor/alga.webp");
width: 220px;
height: 420px;
}
/* BEACH CLUB — ammonite + corallo-stella (top stacked) + conchiglie + corallo-chiaro (bottom stacked).
Tema: tesori che si trovano sulla riva, beach treasures. */
#menu-spiaggia::before {
background-image:
url("assets/decor/ammonite.webp"),
url("assets/decor/corallo-stella.webp");
background-position: top 0 right 0, bottom 0 left 1rem;
background-size: 200px auto, 180px auto;
background-repeat: no-repeat, no-repeat;
width: 320px;
height: 480px;
}
#menu-spiaggia::after {
background-image:
url("assets/decor/conchiglie.webp"),
url("assets/decor/corallo-chiaro.webp");
background-position: bottom 0 left 0, top 0 right 0;
background-size: 200px auto, 200px auto;
background-repeat: no-repeat, no-repeat;
width: 340px;
height: 480px;
}
/* Mobile: riduci decorazioni per non rubare spazio */
@media (max-width: 767px) {
#menu-snackbar::before,
#menu-ristorante::before,
#menu-spiaggia::before {
width: 160px;
height: 200px;
right: -30px;
top: 1rem;
opacity: .45;
}
#menu-snackbar::after,
#menu-ristorante::after,
#menu-spiaggia::after {
width: 130px;
height: 220px;
left: -25px;
bottom: 1.5rem;
opacity: .45;
}
}
/* A11y: rispetto preferenze motion utente — niente animation sulle decorazioni */
.menu-category:first-child { margin-top: 0; }
/* Header tipologia (es. "Bianchi", "Rossi") quando filtro = Tutti */
.menu-category-type {
font-size: 1.9rem;
color: var(--c-deep);
letter-spacing: .02em;
border-bottom: 2px solid var(--c-gold);
padding-bottom: .5rem;
margin-top: 2.6rem;
margin-bottom: .8rem;
text-transform: capitalize;
}
.menu-category-type:first-child { margin-top: 0; }
.wine-list .menu-category-type { grid-column: 1 / -1; }
.dish {
background: var(--bg-card);
border-radius: var(--r-md);
padding: 1.1rem 1.15rem;
border: 1px solid var(--border-soft);
box-shadow: var(--sh-sm);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
display: flex;
flex-direction: column;
gap: .35rem;
}
.dish:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-gold); }
.dish-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .8rem;
}
.dish-name {
font-family: var(--ff-display);
font-weight: 600;
font-size: 1.15rem;
color: var(--c-deep);
margin: 0;
flex: 1;
}
.dish-price {
font-family: var(--ff-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--c-gold);
white-space: nowrap;
}
.dish-desc {
color: rgba(30,30,30,0.7);
font-size: .92rem;
margin: 0;
}
.dish-meta {
display: flex; flex-wrap: wrap; gap: .35rem;
margin-top: .2rem;
}
.dish-badge {
background: var(--c-gold);
color: var(--c-deep);
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: .2rem .55rem;
border-radius: var(--r-pill);
}
.dish-tag {
background: var(--bg-soft);
color: var(--c-deep);
font-size: .7rem;
padding: .2rem .55rem;
border-radius: var(--r-pill);
}
.cta-row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: .65rem;
margin-top: var(--space-xl);
}
/* ============================ 10. SNACK BAR ============================ */
.section-snackbar {
background: var(--bg-soft);
}
/* ============================ 11. SPIAGGIA + ORDER FORM ============================ */
.section-beach {
background:
linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-main) 100%);
}
/* Beach menu = layout compatto a 2 colonne */
.beach-menu {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: var(--space-xl);
}
.beach-group {
background: var(--bg-card);
border-radius: var(--r-lg);
padding: 1.4rem;
border: 1px solid var(--border-soft);
box-shadow: var(--sh-sm);
}
.beach-group h3 {
font-family: var(--ff-display);
color: var(--c-deep);
border-bottom: 2px solid var(--c-gold);
padding-bottom: .35rem;
margin-bottom: 1rem;
}
.beach-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: .8rem;
padding: .7rem 0;
border-bottom: 1px dashed var(--c-line);
}
.beach-item:last-child { border-bottom: 0; }
.beach-item-name {
font-weight: 500; color: var(--c-deep); font-size: .98rem;
}
.beach-item-price {
font-family: var(--ff-display);
font-weight: 700; font-size: 1.05rem; color: var(--c-gold);
white-space: nowrap;
}
/* form ordine */
.order-form {
max-width: 640px; margin: 0 auto;
background: var(--bg-card);
border-radius: var(--r-lg);
padding: 1.6rem;
border: 1px solid var(--border-soft);
box-shadow: var(--sh-md);
}
.order-head { text-align: center; margin-bottom: 1.2rem; }
.order-head h3 { margin-bottom: .3rem; }
.order-head p { color: rgba(30,30,30,0.7); margin: 0; font-size: .92rem; }
/* ============================ 12. EVENTI / MATRIMONI ============================ */
.section-events {
position: relative;
color: #fff;
overflow: hidden;
}
.events-bg {
position: absolute; inset: 0; z-index: 0;
background-image: url("assets/matrimonio-37.jpg");
background-size: cover;
background-position: center;
/* Parallax-like: l'immagine resta fissa allo scroll della pagina,
creando un effetto di profondità tipico delle hero premium. */
background-attachment: fixed;
}
/* Su mobile l'attachment fixed crea jank e a volte non funziona: disabilitiamo */
@media (max-width: 900px) {
.events-bg { background-attachment: scroll; }
}
.events-overlay {
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(11,61,74,0.55), rgba(11,61,74,0.75));
}
.events-inner { position: relative; z-index: 1; }
.events-copy {
max-width: 760px; margin: 0 auto var(--space-xl); text-align: center;
font-size: 1.05rem; color: rgba(255,255,255,0.92);
}
.events-cards {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: var(--space-2xl);
}
.event-card {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--r-lg);
padding: 1.5rem 1.3rem;
text-align: center;
color: #fff;
transition: transform .3s ease, background .3s ease;
}
.event-card:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.14);
}
/* Icone emoji rimosse — decorazione minimal con piccola linea oro */
.event-card-icon { display: none; }
.event-card > h4 {
position: relative;
padding-top: 1rem;
}
.event-card > h4::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 36px; height: 1px;
background: var(--c-gold);
}
.event-card h4 {
color: #fff;
font-family: var(--ff-display);
font-size: 1.3rem;
}
.event-card p { color: rgba(255,255,255,0.85); font-size: .93rem; margin: 0; }
/* form eventi */
.event-form-wrap {
background: rgba(255,255,255,0.96);
color: var(--c-text);
border-radius: var(--r-lg);
padding: 1.8rem 1.4rem;
box-shadow: var(--sh-lg);
max-width: 880px;
margin: 0 auto;
}
.event-form-head { text-align: center; margin-bottom: 1.4rem; }
.event-form-head h3 { font-size: 1.6rem; }
.event-form-head p { color: rgba(30,30,30,0.7); margin: 0; }
.form-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
/* ============================ 13. GALLERY ============================ */
.section-gallery {
background: var(--bg-main);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .6rem;
}
.gallery-item {
position: relative;
margin: 0;
border-radius: var(--r-md);
overflow: hidden;
aspect-ratio: 1 / 1;
background: var(--bg-soft);
display: flex; align-items: flex-end; justify-content: flex-start;
transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
cursor: pointer;
isolation: isolate;
}
/* "vetrino" che zooma la foto al hover (lo facciamo sul background via pseudo-elemento
per evitare di scalare anche la caption). L'immagine arriva da var(--img). */
.gallery-item::before {
content: "";
position: absolute; inset: 0;
z-index: 0;
background-image: var(--img);
background-color: var(--bg-soft);
background-size: cover;
background-position: center;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.gallery-item:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.gallery-item:hover::before { transform: scale(1.08); filter: saturate(1.1) contrast(1.05); }
/* Velo oro premium che appare al hover */
.gallery-item::after {
content: "";
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(135deg, rgba(200,169,106,0) 40%, rgba(200,169,106,0.18) 100%);
opacity: 0;
transition: opacity .55s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item figcaption {
position: relative;
z-index: 2;
color: #fff;
font-family: var(--ff-display);
font-size: 1rem;
font-weight: 500;
padding: .6rem .8rem;
background: linear-gradient(180deg, transparent, rgba(11,61,74,0.85));
width: 100%;
}
/* Gallery: foto reali Cocó Mare (categorizzate dall'utente).
L'immagine è esposta come CSS variable --img sull'item: il pseudo-element
::before la usa per fare zoom hover senza scalare anche la caption. */
.g-1 { --img: url("assets/vista-2.jpg"); } /* vista panoramica */
.g-2 { --img: url("assets/ristorante-16.jpg"); }/* sala / cena */
.g-3 { --img: url("assets/matrimonio-15.jpg"); }/* matrimonio sul mare */
.g-4 { --img: url("assets/gallery-lettini.jpg"); } /* lettini in spiaggia */
.g-5 { --img: url("assets/evento-6.jpg"); } /* snack bar / aperitivo */
.g-6 { --img: url("assets/vista-25.jpg"); } /* baia di Cartaromana */
.g-7 { --img: url("assets/ristorante-19.jpg"); }/* cena vista mare */
.g-8 { --img: url("assets/lido-18.jpg"); } /* beach club */
.g-9 { --img: url("assets/vista-22.jpg"); } /* golden hour / evento */
/* ============================ 14. CONTATTI ============================ */
/* Sezione contatti: foto panoramica con velo crema sopra → atmosfera, leggibilità totale */
.section-contacts {
position: relative;
background-image:
linear-gradient(180deg, rgba(234,247,250,0.88) 0%, rgba(242,250,251,0.96) 100%),
url("assets/vista-10.jpg");
background-size: cover;
background-position: center;
background-attachment: scroll; /* su mobile fixed crea jank */
}
@media (min-width: 900px) {
.section-contacts { background-attachment: fixed; }
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: var(--space-xl);
align-items: stretch;
}
.contact-card {
background: var(--bg-card);
border-radius: var(--r-lg);
padding: 1.5rem 1.4rem;
border: 1px solid var(--border-soft);
box-shadow: var(--sh-sm);
text-align: center;
transition: transform .3s ease, box-shadow .3s ease;
/* Equal heights nelle righe + centratura verticale contenuto */
display: flex;
flex-direction: column;
justify-content: center;
gap: .55rem;
min-height: 200px;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
/* Icone emoji rimosse — solo testo */
.contact-ico { display: none; }
.contact-card h3, .contact-card h4 { color: var(--c-deep); }
.contact-card p { color: rgba(30,30,30,0.75); margin: 0 0 .6rem; font-size: .95rem; }
.contact-link {
display: inline-block;
padding: .45rem .9rem;
border-radius: var(--r-pill);
border: 1px solid var(--c-gold);
color: var(--c-gold);
font-weight: 600;
font-size: .82rem;
transition: all .25s ease;
}
.contact-link:hover { background: var(--c-gold); color: var(--c-deep); }
.contact-meta { font-size: .78rem; color: rgba(30,30,30,0.55); font-style: italic; }
.map-placeholder {
background: linear-gradient(135deg, var(--c-aqua), var(--c-deep));
color: #fff;
border-radius: var(--r-lg);
padding: 2rem 1.4rem;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 1rem;
font-family: var(--ff-display);
font-size: 1.15rem;
}
/* ============================ 15. FOOTER ============================ */
.site-footer {
background: var(--c-deep);
color: rgba(255,255,255,0.85);
padding-top: var(--space-2xl);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding-bottom: 1.5rem;
}
.footer-brand p { margin: 0; }
.footer-logo-wrap {
display: inline-flex;
align-items: center;
background: transparent;
padding: 0;
border: none;
margin-bottom: .8rem;
}
.footer-logo-img {
display: block;
height: 64px;
width: auto;
object-fit: contain;
/* Logo bianco su footer blu profondo */
filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.footer-tag {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: .8rem !important;
color: rgba(255,255,255,0.7);
}
.footer-claim { font-size: .95rem; color: rgba(255,255,255,0.7); }
.footer-col h5 {
font-family: var(--ff-body);
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--c-gold);
margin: 0 0 .8rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .5rem; }
.footer-col a {
font-size: .9rem;
color: rgba(255,255,255,0.8);
transition: color .25s ease;
}
.footer-col a:hover { color: var(--c-gold); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.12);
padding: 1rem 0;
font-size: .82rem;
color: rgba(255,255,255,0.6);
}
.footer-bottom-inner {
display: flex; flex-direction: column; gap: .35rem; align-items: center; text-align: center;
}
.footer-legal a { color: rgba(255,255,255,0.7); }
.footer-legal a:hover { color: var(--c-gold); }
/* ============================ 16. FLOATING CTA MOBILE ============================ */
.floating-cta {
position: fixed;
bottom: 14px; left: 50%;
transform: translateX(-50%);
z-index: 80;
display: flex; gap: .5rem;
background: rgba(11,61,74,0.96);
padding: .4rem;
border-radius: var(--r-pill);
box-shadow: var(--sh-lg);
backdrop-filter: blur(8px);
}
.fcta {
width: 44px; height: 44px;
border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,0.1);
color: #fff;
font-size: 1.05rem;
transition: background .25s ease, transform .25s ease;
}
.fcta svg { display: block; width: 20px; height: 20px; }
.fcta:hover { transform: scale(1.05); }
.fcta-call { background: var(--c-aqua); color: var(--c-deep); }
.fcta-wa { background: #25D366; color: #fff; }
.fcta-book {
width: auto; padding: 0 1rem;
border-radius: var(--r-pill);
background: var(--c-gold);
color: var(--c-deep);
font-weight: 700;
font-size: .9rem;
}
@media (min-width: 900px) { .floating-cta { display: none; } }
/* ============================ 17. REVEAL ============================ */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero-content { animation: none; }
.hero-scroll-line { animation: none; }
}
/* ============================ 18. BOTTONI ============================ */
.btn {
display: inline-flex;
align-items: center; justify-content: center;
gap: .5rem;
padding: .85rem 1.4rem;
border-radius: var(--r-pill);
font-weight: 600;
font-size: .92rem;
letter-spacing: .01em;
cursor: pointer;
transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
text-align: center;
line-height: 1.2;
border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-primary {
background: var(--c-gold);
color: var(--c-deep);
box-shadow: 0 6px 20px rgba(200,169,106,0.35);
}
.btn-primary:hover { background: #b69558; box-shadow: 0 10px 28px rgba(200,169,106,0.45); }
.btn-outline {
border-color: var(--c-deep);
color: var(--c-deep);
background: transparent;
}
.btn-outline:hover { background: var(--c-deep); color: #fff; }
.btn-outline-light {
border-color: rgba(255,255,255,0.7);
color: #fff;
background: transparent;
}
.btn-outline-light:hover { background: #fff; color: var(--c-deep); border-color: #fff; }
.btn-ghost {
background: rgba(11,61,74,0.06);
color: var(--c-deep);
}
.btn-ghost:hover { background: rgba(11,61,74,0.12); }
.btn-ghost-light {
background: rgba(255,255,255,0.12);
color: #fff;
border: 1px solid rgba(255,255,255,0.25);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.22); }
/* ============================ 19. FORM ============================ */
.form-row {
display: flex; flex-direction: column;
gap: .35rem;
margin-bottom: 1rem;
}
.form-row label {
font-size: .82rem;
font-weight: 600;
color: var(--c-deep);
letter-spacing: .03em;
}
.form-row input,
.form-row textarea,
.form-row select {
font: inherit;
padding: .8rem .9rem;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
background: var(--bg-soft);
color: var(--c-text);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
width: 100%;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
outline: none;
border-color: var(--c-gold);
background: #fff;
box-shadow: 0 0 0 4px rgba(200,169,106,0.15);
}
.form-row input.invalid,
.form-row textarea.invalid,
.form-row select.invalid {
border-color: #c0392b;
background: #fff6f5;
}
.form-actions { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.form-actions-row { flex-direction: column; gap: .6rem; }
.form-hint {
font-size: .78rem;
color: rgba(30,30,30,0.6);
text-align: center;
margin: 0;
}
.form-feedback {
margin-top: .9rem;
font-size: .9rem;
text-align: center;
min-height: 1.4em;
}
.form-feedback.ok { color: var(--c-green); }
.form-feedback.err { color: #c0392b; }
.form-row-full { grid-column: 1 / -1; }
/* ============================ 21. MULTI-PAGE COMPONENTS ============================
Stili specifici per la nuova architettura multi-pagina:
- mini-hero delle pagine secondarie
- card "esperienze" della home
- intro-grid della home
- cta-strip (banner CTA piena larghezza)
- prezzario lido
- gallery esclusiva lido
*/
/* --- Mini hero per le pagine secondarie --- */
.page-hero {
position: relative;
min-height: 360px;
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
padding: calc(var(--header-h) + 1.5rem) 0 2rem;
isolation: isolate;
}
.page-hero-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse at 80% 20%, rgba(200,169,106,0.25), transparent 50%),
radial-gradient(ellipse at 10% 80%, rgba(119,201,212,0.4), transparent 55%),
linear-gradient(135deg, #0B3D4A 0%, #0E5566 50%, #1A7A8C 110%);
}
.page-hero-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(11,61,74,0.35) 0%, rgba(11,61,74,0.55) 100%);
}
.page-hero-inner {
position: relative; z-index: 2;
text-align: center;
}
.page-hero h1 {
font-family: var(--ff-display);
font-size: clamp(2rem, 5vw, 3.6rem);
color: #fff;
margin: .35rem 0 .6rem;
line-height: 1.05;
}
.page-hero-sub {
color: rgba(255,255,255,0.9);
font-style: italic;
font-size: clamp(1rem, 2vw, 1.25rem);
max-width: 720px;
margin: 0 auto;
}
.breadcrumb {
font-size: .8rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
margin-bottom: .8rem;
}
.breadcrumb a { color: var(--c-gold); transition: opacity .2s ease; }
.breadcrumb a:hover { opacity: .8; }
.breadcrumb span { margin: 0 .35rem; opacity: .6; }
/* Foto reali per le mini-hero delle pagine secondarie + animazione Ken Burns
(zoom + pan lento) per dare un effetto cinematic premium. */
.page-hero-bg {
background-size: cover;
background-position: center;
animation: kenBurns 22s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes kenBurns {
0% { transform: scale(1.00) translate(0,0); }
100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
.page-hero-bg { animation: none; }
}
.page-hero-restaurant .page-hero-bg { background-image: url("assets/ristorante-9.jpg"); }
.page-hero-snack .page-hero-bg {
background-image: url("assets/bar-hero.jpg");
/* La foto è verticale 3:4 con drink+Castello al centro e logo brand
nell'angolo alto-sx: con position 50% 40% inquadriamo bene Castello +
mare in alto e i bicchieri in basso, escludendo il logo della foto
(così non confligge con quello dell'header sticky). */
background-position: 50% 40%;
}
.page-hero-beach .page-hero-bg { background-image: url("assets/lido-26.jpg"); }
/* Sulle pagine interne l'header parte già "leggero" — il sub-page non ha video sotto */
.page-sub .site-header {
background: rgba(234,247,250,0.96);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
box-shadow: var(--sh-sm);
}
.page-sub .site-header .brand { color: var(--c-deep); }
.page-sub .site-header .nav-desktop a { color: var(--c-deep); }
.page-sub .site-header .brand-logo-wrap {
background: transparent;
border-color: transparent;
box-shadow: none;
padding: 0;
}
/* Override già definito sopra: .page-sub .site-header .brand-logo { filter: none; height: 44px; } */
.page-sub .site-header .hamburger { background: rgba(11,61,74,0.08); }
.page-sub .site-header .hamburger span { background: var(--c-deep); }
.page-sub main { padding-top: 0; }
/* Stato "current page" nella navigazione */
.nav-desktop a[aria-current="page"] { color: var(--c-gold); }
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
.nav-mobile a[aria-current="page"] { color: var(--c-gold); }
/* ─────────────────────────────────────────────────────────────────────────
BENTO ESPERIENZE — layout magazine premium per la home
1 hero grande + 3 mini in colonna, numeri romani, hover zoom + reveal.
Look "Six Senses / Aman Resort": foto cinematic, tipografia editoriale.
───────────────────────────────────────────────────────────────────────── */
.bento-exp {
display: grid;
grid-template-columns: 1fr;
gap: .8rem;
}
@media (min-width: 900px) {
.bento-exp {
grid-template-columns: 1.7fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
aspect-ratio: 16 / 11;
}
.bex-hero { grid-column: 1; grid-row: 1 / span 3; }
.bex-mini:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.bex-mini:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.bex-mini:nth-of-type(4) { grid-column: 2; grid-row: 3; }
}
.bex {
position: relative;
display: flex; align-items: flex-end;
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none;
color: #fff;
isolation: isolate;
background-color: var(--c-deep);
box-shadow: var(--sh-md);
transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
min-height: 220px;
}
.bex-mini { min-height: 200px; }
@media (max-width: 899px) {
.bex-hero { aspect-ratio: 4/3; }
.bex-mini { aspect-ratio: 16/10; }
}
/* Foto background via CSS variable (slow zoom hover) */
.bex::before {
content: "";
position: absolute; inset: 0;
background-image: var(--img);
background-size: cover;
background-position: center;
z-index: 0;
transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.bex:hover::before {
transform: scale(1.07);
filter: saturate(1.1);
}
/* Velo gradient bottom — più scuro su hero, più soft su mini */
.bex-veil {
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(11,61,74,0.20) 0%,
rgba(11,61,74,0.10) 35%,
rgba(11,61,74,0.55) 70%,
rgba(11,61,74,0.85) 100%);
}
.bex-hero .bex-veil {
background:
linear-gradient(180deg,
rgba(11,61,74,0.15) 0%,
rgba(11,61,74,0.05) 30%,
rgba(11,61,74,0.60) 65%,
rgba(11,61,74,0.90) 100%);
}
/* Numero romano grande in alto a destra (firma editoriale) */
.bex-roman {
position: absolute;
top: 1rem; right: 1.25rem;
z-index: 2;
font-family: var(--ff-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 500;
color: var(--c-gold);
line-height: 1;
opacity: .85;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
letter-spacing: .02em;
}
.bex-mini .bex-roman { font-size: clamp(1.8rem, 3vw, 2.5rem); top: .6rem; right: .9rem; }
/* Contenuto testuale in basso */
.bex-content {
position: relative;
z-index: 2;
padding: 1.4rem 1.5rem 1.6rem;
width: 100%;
display: flex; flex-direction: column;
gap: .35rem;
}
.bex-mini .bex-content { padding: 1rem 1.1rem 1.1rem; }
.bex-eyebrow {
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
margin: 0;
}
.bex-title {
font-family: var(--ff-display);
font-size: clamp(1.4rem, 3vw, 2.2rem);
color: #fff;
margin: .15rem 0 .35rem;
line-height: 1.1;
font-weight: 600;
text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.bex-mini .bex-title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.bex-desc {
color: rgba(255,255,255,0.9);
font-size: .95rem;
line-height: 1.45;
margin: 0 0 .8rem;
max-width: 460px;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.bex-cta {
display: inline-flex; align-items: center; gap: .4rem;
color: var(--c-gold);
font-weight: 600;
font-size: .9rem;
letter-spacing: .02em;
transition: gap .3s ease;
}
.bex-hero .bex-cta { font-size: 1rem; }
.bex:hover .bex-cta { gap: .9rem; }
.bex:hover { box-shadow: var(--sh-lg); }
/* Stile linea oro sottile come "cornice" sul hover */
.bex::after {
content: "";
position: absolute; inset: 8px;
border: 1px solid rgba(200,169,106,0);
border-radius: calc(var(--r-lg) - 8px);
z-index: 2;
pointer-events: none;
transition: border-color .4s ease;
}
.bex:hover::after { border-color: rgba(200,169,106,0.45); }
/* OLD: regole .exp-cards mantenute per legacy / sub-pages se servono */
.exp-cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
.exp-card {
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none;
color: var(--c-text);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
box-shadow: var(--sh-sm);
}
.exp-card:hover {
transform: translateY(-6px);
box-shadow: var(--sh-lg);
border-color: var(--c-gold);
}
.exp-card-media {
aspect-ratio: 16 / 10;
position: relative;
display: grid; place-items: center;
overflow: hidden;
}
.exp-card-icon {
position: relative; z-index: 2;
font-size: 3rem;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.3));
}
.exp-card-body {
padding: 1.3rem 1.4rem 1.6rem;
}
.exp-card-body h3 {
font-family: var(--ff-display);
font-size: 1.5rem;
color: var(--c-deep);
margin-bottom: .35rem;
}
.exp-card-body p {
color: rgba(30,30,30,0.7);
font-size: .94rem;
margin: 0 0 1rem;
}
.exp-card-link {
color: var(--c-gold);
font-weight: 600;
font-size: .9rem;
letter-spacing: .02em;
transition: gap .25s ease;
display: inline-flex; gap: .25rem; align-items: center;
}
.exp-card:hover .exp-card-link { gap: .6rem; }
/* Card "Esperienze": foto reali sostituiscono il gradient. L'icona resta in
primo piano grazie a un overlay scuro graduato per la leggibilità. */
.exp-card-media {
background-size: cover;
background-position: center;
}
.exp-card-media::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(11,61,74,0.10) 0%, rgba(11,61,74,0.55) 100%);
transition: background .4s ease;
}
.exp-card:hover .exp-card-media::before {
background: linear-gradient(180deg, rgba(11,61,74,0.05) 0%, rgba(11,61,74,0.35) 100%);
}
.exp-card-media > * { position: relative; z-index: 2; }
.exp-card-restaurant { background-image: url("assets/ristorante-9.jpg"); }
.exp-card-snack { background-image: url("assets/bar-3.jpg"); }
.exp-card-beach { background-image: url("assets/lido-26.jpg"); }
.exp-card-info { background-image: url("assets/matrimonio-37.jpg"); }
/* Zoom dolce sull'immagine al hover (su tutta la card, non solo l'icona) */
.exp-card-media { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.exp-card:hover .exp-card-media { transform: scale(1.04); }
/* --- Intro grid (home: testo + tessere visive) --- */
.section-intro { background: var(--bg-main); }
.intro-grid {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
align-items: center;
}
.intro-text h2 {
font-family: var(--ff-display);
font-size: clamp(1.8rem, 4vw, 2.6rem);
color: var(--c-deep);
line-height: 1.15;
margin-bottom: 1rem;
}
.intro-text p {
color: rgba(30,30,30,0.75);
font-size: 1.02rem;
margin-bottom: .8rem;
}
.intro-visual {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: .6rem;
aspect-ratio: 1;
max-height: 460px;
}
.intro-tile {
border-radius: var(--r-md);
min-height: 120px;
}
.intro-tile { background-size: cover; background-position: center; box-shadow: var(--sh-md); }
.t-1 {
grid-column: 1; grid-row: 1 / span 2;
background-image: url("assets/vista-9.jpg"); /* panoramica grande verticale */
}
.t-2 { background-image: url("assets/lido-8.jpg"); } /* dettaglio lido */
.t-3 { background-image: url("assets/matrimonio-8.jpg"); }/* matrimonio */
/* --- CTA Strip --- */
.cta-strip {
background: linear-gradient(135deg, var(--c-deep) 0%, #0E5566 60%, #1A7A8C 130%);
color: #fff;
padding: var(--space-2xl) 0;
text-align: center;
}
.cta-strip-inner h3 {
font-family: var(--ff-display);
color: #fff;
font-size: clamp(1.6rem, 3vw, 2.2rem);
margin-bottom: .4rem;
}
.cta-strip-inner p {
color: rgba(255,255,255,0.85);
margin-bottom: 1.3rem;
}
.cta-strip .cta-row { justify-content: center; margin-top: 1rem; }
/* --- Prezzario lido --- */
.section-pricing { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
margin-bottom: 2rem;
}
.pricing-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 1.6rem 1.4rem;
box-shadow: var(--sh-sm);
display: flex; flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md);
border-color: var(--c-gold);
}
.pricing-card.is-featured {
border: 2px solid var(--c-gold);
background: linear-gradient(180deg, #fff 0%, #FFFDF7 100%);
box-shadow: var(--sh-md);
}
.pricing-badge {
position: absolute;
top: -10px; right: 16px;
background: var(--c-gold);
color: var(--c-deep);
padding: .3rem .7rem;
border-radius: var(--r-pill);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.pricing-name {
font-family: var(--ff-display);
font-size: 1.3rem;
color: var(--c-deep);
margin-bottom: .8rem;
}
.pricing-price {
display: flex; align-items: baseline; gap: .35rem;
margin-bottom: .6rem;
}
.pricing-price-main {
font-family: var(--ff-display);
font-size: 2.4rem;
font-weight: 700;
color: var(--c-gold);
line-height: 1;
}
.pricing-price-unit {
font-size: .9rem;
color: rgba(30,30,30,0.6);
}
.pricing-desc {
color: rgba(30,30,30,0.7);
font-size: .92rem;
margin-bottom: 1rem;
}
.pricing-features {
list-style: none; padding: 0; margin: 0 0 1.4rem;
flex: 1;
}
.pricing-features li {
position: relative;
padding: .4rem 0 .4rem 1.4rem;
font-size: .9rem;
color: var(--c-text);
border-bottom: 1px dashed var(--c-line);
}
.pricing-features li:last-child { border-bottom: 0; }
.pricing-features li::before {
content: "✓";
position: absolute; left: 0;
color: var(--c-gold);
font-weight: 700;
}
.pricing-cta {
align-self: stretch;
text-align: center;
}
.pricing-notes {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 1.4rem;
box-shadow: var(--sh-sm);
}
.pricing-notes h4 {
font-family: var(--ff-display);
color: var(--c-deep);
margin-bottom: .6rem;
}
.pricing-notes ul {
list-style: none; padding: 0;
display: grid;
gap: .4rem;
margin-bottom: 1rem;
}
.pricing-notes ul li {
position: relative;
padding-left: 1.4rem;
font-size: .94rem;
color: rgba(30,30,30,0.8);
}
.pricing-notes ul li::before {
content: "✓";
position: absolute; left: 0;
color: var(--c-gold);
font-weight: 700;
}
.pricing-disclaimer {
font-size: .82rem;
color: rgba(30,30,30,0.55);
font-style: italic;
margin: 0;
}
/* --- Gallery esclusiva lido --- */
.section-lido-gallery { background: var(--bg-main); }
.lido-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem;
}
.lido-item {
position: relative;
margin: 0;
border-radius: var(--r-md);
overflow: hidden;
aspect-ratio: 4 / 3;
display: flex; align-items: flex-end;
transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
isolation: isolate;
background: var(--bg-soft);
}
.lido-item::before {
content: "";
position: absolute; inset: 0;
z-index: 0;
background-image: var(--img);
background-size: cover;
background-position: center;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.lido-item::after {
content: "";
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(135deg, rgba(200,169,106,0) 40%, rgba(200,169,106,0.18) 100%);
opacity: 0;
transition: opacity .55s ease;
}
.lido-item:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.lido-item:hover::before { transform: scale(1.08); filter: saturate(1.1) contrast(1.05); }
.lido-item:hover::after { opacity: 1; }
.lido-item figcaption { z-index: 2; } /* assicura caption sopra zoom + velo */
.lido-item figcaption {
position: relative; z-index: 2;
color: #fff;
font-family: var(--ff-display);
font-size: 1.05rem;
padding: .8rem 1rem;
width: 100%;
background: linear-gradient(180deg, transparent, rgba(11,61,74,0.85));
}
/* Foto reali del lido (le 6 top per qualità dalla categoria "lido") */
.lido-1 { --img: url("assets/lido-26.jpg"); } /* lettini prima fila */
.lido-2 { --img: url("assets/lido-ombrelloni-castello.jpg"); } /* ombrelloni vista Castello */
.lido-3 { --img: url("assets/lido-palme-mare.jpg"); } /* cabina mare */
.lido-4 { --img: url("assets/lido-25.jpg"); } /* postazioni private */
.lido-5 { --img: url("assets/lido-4.jpg"); } /* solarium */
.lido-6 { --img: url("assets/lido-tuffo-blu.jpg"); } /* spiaggia panoramica */
/* ============================ 21a. BENTO GRID (showcase) ============================
Layout magazine: cell di diverse dimensioni che si incastrano. Pensato per dare
ritmo visivo alle pagine ristorante / snack / spiaggia senza appiattirle. */
.section-showcase, .section-mood { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
.bento-grid {
display: grid;
grid-template-columns: 1fr;
gap: .6rem;
}
.bento-grid .gallery-item { aspect-ratio: 4/3; }
/* ≥ 768px: layout bento "magazine" */
@media (min-width: 768px) {
/* Showcase 6 foto (ristorante): 2 grandi + 4 piccole */
.bento-restaurant {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: .8rem;
aspect-ratio: 16/9;
}
.bento-restaurant .bento-a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.bento-restaurant .bento-b { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
.bento-restaurant .bento-c { grid-column: 3; grid-row: 1; aspect-ratio: auto; }
.bento-restaurant .bento-d { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
.bento-restaurant .bento-e { grid-column: 3; grid-row: 2; aspect-ratio: auto; }
.bento-restaurant .bento-f { display: none; } /* nascondiamo la 6° su layout bento */
/* Showcase 3 foto (snack bar): 1 grande + 2 a destra impilate */
.bento-snack {
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: .8rem;
aspect-ratio: 16/9;
}
.bento-snack .bento-a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.bento-snack .bento-b { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
.bento-snack .bento-c { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
/* Mood gallery 8 foto (spiaggia): grid 4x2 con prima cella doppia altezza */
.bento-mood {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
gap: .7rem;
aspect-ratio: 16/8;
}
.bento-mood .bento-a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.bento-mood .bento-b { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
.bento-mood .bento-c { grid-column: 3; grid-row: 1; aspect-ratio: auto; }
.bento-mood .bento-d { grid-column: 4; grid-row: 1 / span 2; aspect-ratio: auto; }
.bento-mood .bento-e { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
.bento-mood .bento-f { grid-column: 3; grid-row: 2; aspect-ratio: auto; }
.bento-mood .bento-g, .bento-mood .bento-h { display: none; }
}
/* Su tablet recuperiamo anche le foto "nascoste" in una seconda riga */
@media (min-width: 768px) and (max-width: 1100px) {
.bento-restaurant .bento-f { display: block; }
.bento-mood .bento-g, .bento-mood .bento-h { display: block; }
}
/* ============================ 21b. LIGHTBOX ============================ */
.lightbox {
position: fixed; inset: 0;
z-index: 200;
display: none;
align-items: center; justify-content: center;
padding: 4vh 3vw;
background: rgba(11,61,74,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: lbFadeIn .3s ease;
}
.lightbox.is-open { display: flex; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb-figure {
margin: 0;
max-width: 100%;
max-height: 100%;
display: flex; flex-direction: column; align-items: center; gap: .8rem;
animation: lbZoomIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes lbZoomIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: var(--r-md);
box-shadow: 0 25px 80px rgba(0,0,0,0.5);
border: 1px solid rgba(200,169,106,0.4);
}
.lb-caption {
color: var(--c-cream);
font-family: var(--ff-display);
font-size: 1.1rem;
letter-spacing: .04em;
text-align: center;
}
.lb-close, .lb-prev, .lb-next {
position: absolute;
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
font-size: 1.6rem;
cursor: pointer;
display: grid; place-items: center;
transition: background .25s ease, transform .25s ease, border-color .25s ease;
font-family: serif;
line-height: 1;
}
.lb-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.1rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
background: var(--c-gold);
color: var(--c-deep);
border-color: var(--c-gold);
}
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 600px) {
.lb-prev, .lb-next { width: 42px; height: 42px; font-size: 1.3rem; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-close { top: 10px; right: 10px; }
}
/* ============================ 21bis. CARD PIATTO / VINO / PREZZARIO STAGIONALE ============================
Componenti premium per i menù completi (post acquisizione PDF):
- .restaurant-service-switch — switch Pranzo/Cena
- .dish-card — card piatto con foto + descrizione + allergeni
- .wine-card — card vino con cantina
- .season-card — card prezzario lido per stagione
- .allergens — pillole numerate con tooltip
*/
/* --- Switch Pranzo / Cena --- */
.restaurant-service-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem;
max-width: 620px;
margin: 0 auto var(--space-xl);
padding: .5rem;
background: var(--bg-soft);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
}
.service-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
padding: 1rem .8rem;
background: transparent;
border: 2px solid transparent;
border-radius: var(--r-md);
color: var(--c-deep);
cursor: pointer;
transition: all .3s cubic-bezier(.2,.7,.2,1);
}
.service-btn:hover { background: rgba(200,169,106,0.1); }
.service-btn.active {
background: var(--bg-card);
border-color: var(--c-gold);
box-shadow: var(--sh-sm);
}
.service-btn-eyebrow {
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
}
.service-btn-label {
font-family: var(--ff-display);
font-size: clamp(1.4rem, 3.5vw, 1.9rem);
color: var(--c-deep);
font-weight: 600;
line-height: 1;
margin: .2rem 0;
}
.service-btn-hours {
font-size: .8rem;
color: rgba(30,30,30,0.6);
font-style: italic;
}
.service-btn-note {
display: block;
font-size: .72rem;
color: var(--c-gold);
font-style: italic;
margin-top: .25rem;
letter-spacing: .02em;
}
/* Nota coperto */
.cover-info {
text-align: center;
font-size: .88rem;
color: rgba(30,30,30,0.65);
font-style: italic;
margin: -.6rem 0 1.4rem;
}
/* ───────────────────────────────────────────────────────────────
Card piatto · Cocó Mare Edition v5 "Carta del Mare"
─ Palette marina: blu mare profondo + carta avorio fredda
─ Accento sinistro blu (2.5px), aqua sull'hover
─ Texture carta + gradient sottile
─ Delight #1: hairline aqua scorre sul bordo top sull'hover
─ Delight #2: drop-cap della prima lettera (desktop only)
─ A11y: tap target 44×44, contrasto AAA, prefers-reduced-motion
─────────────────────────────────────────────────────────────── */
.dish-card {
position: relative;
isolation: isolate;
background:
/* texture carta sottilissima, tonalità neutra-fredda */
url("data:image/svg+xml;utf8,"),
linear-gradient(158deg, #FFFFFF 0%, #FAFCFD 50%, #F1F7F9 100%);
border: 1px solid rgba(11, 61, 74, 0.12);
border-left: 2.5px solid var(--c-deep);
border-radius: var(--r-md);
box-shadow:
inset 0 0 0 1px rgba(11, 61, 74, 0.05),
0 1px 3px rgba(11, 61, 74, 0.04),
0 4px 14px -6px rgba(11, 61, 74, 0.09);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
align-self: stretch;
transition:
transform .45s cubic-bezier(.22,.8,.22,1),
box-shadow .45s ease,
border-color .4s ease,
border-left-color .4s ease;
}
/* Delight #1: aqua hairline scorre da sinistra → destra sul bordo top */
.dish-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--c-aqua), rgba(119, 201, 212, 0));
border-radius: 0 2px 2px 0;
transition: width .5s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 2;
}
.dish-card:hover::after { width: 100%; }
/* Icona categoria — SVG inline (data URI) posizionata top-right.
Mappata via [data-cat]. Categorie senza icona definita: card resta pulita. */
.dish-card .dish-body { position: relative; }
.dish-card[data-cat] .dish-body::before {
content: "";
position: absolute;
top: .55rem;
right: .7rem;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .32;
pointer-events: none;
z-index: 1;
transition:
opacity .35s ease,
filter .35s ease,
transform .35s ease;
}
.dish-card:hover .dish-body::before {
opacity: .65;
filter: drop-shadow(0 0 5px rgba(119, 201, 212, 0.55));
transform: scale(1.1);
}
/* Mappa categoria → icona SVG (stroke = currentColor con fill-via-data:URI in --c-deep) */
.dish-card[data-cat="antipasti-di-mare"] .dish-body::before,
.dish-card[data-cat="secondi-di-mare"] .dish-body::before,
.dish-card[data-cat="secondi"] .dish-body::before {
/* Pesce */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="primi"] .dish-body::before,
.dish-card[data-cat="primi-piatti"] .dish-body::before {
/* Pasta — forchetta con spaghetti arrotolati */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="snack-e-insalate"] .dish-body::before,
.dish-card[data-cat="snack-e-insalate-1"] .dish-body::before,
.dish-card[data-cat="contorni"] .dish-body::before {
/* Insalata — ciotola */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="panini"] .dish-body::before {
/* Panino */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="antipasti-di-terra"] .dish-body::before,
.dish-card[data-cat="secondi-di-terra"] .dish-body::before {
/* Carne — bistecca con linee griglia */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="caffetteria"] .dish-body::before {
/* Tazza caffè */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="aperitivi-e-liquori"] .dish-body::before,
.dish-card[data-cat="cocktail"] .dish-body::before {
/* Calice triangolare cocktail */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="birre-e-vini"] .dish-body::before,
.dish-card[data-cat="bottiglie"] .dish-body::before {
/* Calice vino */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="acqua-e-bibite"] .dish-body::before {
/* Goccia */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card[data-cat="frutta-e-dolci"] .dish-body::before,
.dish-card[data-cat="frutta"] .dish-body::before,
.dish-card[data-cat="dolce"] .dish-body::before {
/* Cupcake / dolce */
background-image: url("data:image/svg+xml;utf8,");
}
.dish-card:hover {
transform: translateY(-2px);
border-color: rgba(11, 61, 74, 0.22);
border-left-color: var(--c-aqua);
box-shadow:
inset 0 0 0 1px rgba(11, 61, 74, 0.10),
0 2px 6px rgba(11, 61, 74, 0.06),
0 12px 28px -10px rgba(11, 61, 74, 0.18);
}
/* Badge: "— CHEF'S —" in blu marino con trattini laterali, no pill */
.dish-badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: .35rem;
background: transparent;
color: var(--c-deep);
font-family: var(--ff-body);
font-size: .52rem;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 700;
padding: 0;
border: 0;
border-radius: 0;
margin-bottom: .25rem;
white-space: nowrap;
position: relative;
z-index: 1;
opacity: .82;
}
.dish-badge::before,
.dish-badge::after {
content: "";
width: 12px;
height: 1px;
background: currentColor;
opacity: .55;
}
.dish-body {
padding: .65rem .95rem .7rem .9rem;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
/* Header con dotted leader classico: nome ........ prezzo (stile menù d'autore) */
.dish-head {
display: flex;
align-items: baseline;
gap: 0;
margin-bottom: 0;
/* spazio per icona categoria top-right */
padding-right: 26px;
}
.dish-leader {
flex: 1 1 auto;
align-self: flex-end;
height: 0;
margin: 0 .55em .27em;
border-bottom: 1px dotted rgba(11, 61, 74, 0.38);
min-width: 1.5rem;
}
/* Ornamento tipografico: trattino — losanga — trattino sotto il nome (compatto) */
.dish-divider {
display: flex;
align-items: center;
gap: .3rem;
margin: .25rem 0 .3rem;
}
.dish-divider span:nth-child(1),
.dish-divider span:nth-child(3) {
width: 14px;
height: 1px;
background: var(--c-deep);
opacity: .42;
border-radius: 0;
}
.dish-divider span:nth-child(2) {
width: 4px;
height: 4px;
background: var(--c-deep);
transform: rotate(45deg);
opacity: .7;
border-radius: 0;
}
.dish-name {
font-family: var(--ff-display);
font-weight: 500;
font-size: 1rem;
color: var(--c-deep);
margin: 0;
flex: 0 1 auto;
line-height: 1.18;
letter-spacing: -0.005em;
}
/* A11y: tap target 24×24+ via padding, contrasto AAA, focus ring */
.dish-star,
.dish-defrosted {
display: inline-block;
min-width: 24px;
min-height: 24px;
padding: 2px 4px;
margin-left: 2px;
color: var(--c-deep);
opacity: .85;
font-weight: 700;
font-size: .72em;
line-height: 1;
cursor: help;
user-select: none;
text-align: center;
vertical-align: super;
border-radius: 3px;
transition: background-color .15s ease, outline .15s ease;
}
.dish-defrosted:hover,
.dish-defrosted:focus-visible,
.dish-star:hover,
.dish-star:focus-visible {
background-color: rgba(11, 61, 74, 0.08);
outline: 2px solid var(--c-deep);
outline-offset: 1px;
opacity: 1;
}
.dish-price {
font-family: var(--ff-display);
font-weight: 600;
font-size: 1rem;
color: var(--c-deep);
white-space: nowrap;
font-variant-numeric: tabular-nums oldstyle-nums;
font-feature-settings: "tnum", "onum";
}
.dish-desc {
color: rgba(30, 30, 30, 0.68);
font-size: .8rem;
font-style: italic;
margin: 0 0 .12rem;
line-height: 1.38;
}
.dish-desc-en {
color: rgba(30, 30, 30, 0.46);
font-size: .7rem;
font-style: italic;
margin: 0 0 .15rem;
line-height: 1.32;
}
/* Allergeni: chip accessibili AAA
─ Visual: cerchio 22px con bordo blu
─ Tap target: 44×44 via padding (mobile-perfect)
─ Contrasto: solid --c-deep su sfondo carta = 10.92:1 (AAA)
─ Allegati al fondo della card via margin-top: auto */
.allergens {
display: flex;
flex-wrap: wrap;
gap: .3rem;
margin-top: auto;
padding-top: .25rem;
/* reset lista (era div, ora ul) */
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.allergen {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
width: 22px;
height: 22px;
background: transparent;
color: var(--c-deep);
border: 1px solid rgba(11, 61, 74, 0.55);
border-radius: 50%;
font-size: .64rem;
font-weight: 600;
line-height: 1;
cursor: help;
user-select: none;
position: relative;
transition:
background .2s ease,
color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
/* Tap target esteso a 44×44 via pseudo invisibile — visual rimane 22px */
.allergen::before {
content: "";
position: absolute;
inset: -11px;
border-radius: 50%;
}
.allergen:hover,
.allergen:focus-visible {
background: var(--c-deep);
color: #FFFFFF;
border-color: var(--c-deep);
outline: none;
}
.allergen:focus-visible {
box-shadow:
0 0 0 2px #FFFFFF,
0 0 0 4px var(--c-deep);
}
/* Tooltip nome allergene — mostra il "title" attribute con stile brand,
visibile su hover (desktop), focus (keyboard), tap (mobile via :focus). */
.allergen::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--c-deep);
color: #FFFFFF;
font-family: var(--ff-body);
font-size: .7rem;
font-weight: 500;
letter-spacing: .015em;
padding: .38rem .65rem .42rem;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity .2s cubic-bezier(.4, 0, .2, 1),
transform .2s cubic-bezier(.4, 0, .2, 1),
visibility 0s .2s;
z-index: 30;
box-shadow:
0 6px 18px -4px rgba(11, 61, 74, 0.35),
0 2px 4px rgba(11, 61, 74, 0.15);
text-transform: none;
text-align: center;
/* Limita la larghezza max del tooltip a una dimensione ragionevole.
Senza questo, parole molto lunghe in EN/DE potrebbero generare tooltip enormi. */
max-width: 200px;
white-space: normal;
word-wrap: break-word;
}
/* Quando il tooltip è VICINO al bordo sinistro della card, ri-allinealo a sinistra
invece che centrato (così non viene clippato). Usiamo :first-child come proxy:
il primo allergene in una riga è sempre quello a rischio. */
.allergen:first-child::after {
left: 0;
transform: translateX(0) translateY(4px);
}
.allergen:first-child:hover::after,
.allergen:first-child:focus::after,
.allergen:first-child:focus-visible::after {
transform: translateX(0) translateY(0);
}
/* Quando un allergene è hovered/focused, permettiamo all'overflow della card
di essere visibile (richiede CSS :has() — supportato da Safari 15.4+ e
Chrome 105+, fallback graceful: tooltip rimane clippato ma il sito funziona). */
.dish-card:has(.allergen:hover),
.dish-card:has(.allergen:focus),
.dish-card:has(.allergen:focus-visible) {
overflow: visible;
}
.allergen:hover::after,
.allergen:focus::after,
.allergen:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition:
opacity .22s cubic-bezier(.4, 0, .2, 1),
transform .22s cubic-bezier(.4, 0, .2, 1),
visibility 0s;
}
/* Tooltip respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.allergen::after {
transition: opacity .15s ease, visibility 0s .15s;
transform: translateX(-50%);
}
.allergen:first-child::after {
transform: translateX(0);
}
.allergen:hover::after,
.allergen:focus::after,
.allergen:focus-visible::after {
transform: translateX(-50%);
}
.allergen:first-child:hover::after,
.allergen:first-child:focus::after,
.allergen:first-child:focus-visible::after {
transform: translateX(0);
}
}
/* Menu-list: 1 col mobile → 2 col tablet → 3 col desktop (override più giù) */
.menu-list {
display: grid;
grid-template-columns: 1fr;
gap: .85rem;
}
@media (min-width: 768px) {
.menu-list { grid-template-columns: 1fr 1fr; gap: .9rem; }
}
/* Categoria sticky-ish, full width nella grid */
.menu-list .menu-category { grid-column: 1 / -1; }
/* Legenda allergeni */
.allergens-legend {
background: var(--bg-soft);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 1rem 1.2rem;
margin-top: var(--space-xl);
}
.allergens-legend h4 {
font-family: var(--ff-display);
font-size: 1.05rem;
color: var(--c-deep);
margin-bottom: .6rem;
}
.allergens-legend-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .35rem .8rem;
font-size: .82rem;
color: rgba(30,30,30,0.75);
}
@media (min-width: 600px) { .allergens-legend-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .allergens-legend-grid { grid-template-columns: repeat(7, 1fr); } }
.allergens-legend-grid span { display: flex; gap: .35rem; align-items: center; }
.allergens-legend-grid b {
display: inline-flex;
width: 20px; height: 20px;
background: var(--c-deep);
color: var(--c-gold);
border-radius: 50%;
align-items: center; justify-content: center;
font-size: .7rem;
font-weight: 700;
flex-shrink: 0;
}
/* --- CARTA VINI --- */
.wine-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 600px) { .wine-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wine-list { grid-template-columns: 1fr 1fr 1fr; } }
.wine-list .menu-category { grid-column: 1 / -1; }
/* Card vino: altezza e larghezza FISSE BLINDATE per tutte → uniformità totale.
Usato !important + min/max per impedire override da contenuto/aspect-ratio. */
.wine-card {
display: grid !important;
grid-template-columns: 90px 1fr !important;
grid-template-rows: 140px !important;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-sm);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
height: 140px !important;
min-height: 140px !important;
max-height: 140px !important;
align-items: stretch;
}
.wine-card:hover {
transform: translateY(-2px);
box-shadow: var(--sh-md);
border-color: var(--c-gold);
}
.wine-photo {
position: relative;
margin: 0;
background: #ffffff !important; /* sfondo bianco forzato */
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
height: 140px !important;
width: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
flex-shrink: 0;
border-right: 1px solid var(--c-line);
}
.wine-photo img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 90px !important;
max-height: 140px !important;
object-fit: contain !important;
padding: 10px 6px;
box-sizing: border-box;
background: #ffffff; /* fallback se il contenitore non lo copre */
mix-blend-mode: multiply; /* sfondi chiari della bottiglia si fondono con il bianco */
}
.wine-photo img.is-placeholder { display: none; }
.wine-photo::after {
content: "";
position: absolute;
font-size: 1.4rem;
filter: grayscale(0.4) brightness(1.2);
pointer-events: none;
}
.wine-photo img:not(.is-placeholder) ~ * { display: none; }
.wine-photo:has(img.is-placeholder)::after { display: block; }
.wine-badge {
position: absolute;
top: 6px; left: 6px;
background: var(--c-gold);
color: var(--c-deep);
font-size: .58rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
padding: .15rem .45rem;
border-radius: var(--r-pill);
z-index: 2;
}
.wine-body {
padding: .7rem .9rem;
display: flex;
flex-direction: column;
justify-content: center; /* contenuto centrato verticalmente nel box 140px */
min-width: 0; /* permette text-overflow */
}
.wine-name {
font-family: var(--ff-display);
font-size: 1rem;
color: var(--c-deep);
margin: 0;
line-height: 1.2;
}
.wine-winery {
font-size: .78rem;
color: rgba(30,30,30,0.6);
font-style: italic;
margin: .1rem 0 .3rem;
}
.wine-price {
font-family: var(--ff-display);
font-weight: 700;
color: var(--c-gold);
}
/* --- PREZZARIO LIDO STAGIONALE --- */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 600px) {
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.pricing-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Override prezzo Bambini → verde mediterraneo (deve venire dopo le regole mood) */
.season-card.is-kids .season-tariff-price { color: var(--c-green); }
.season-card.is-kids { border-style: dashed; }
.season-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 0; /* il padding va sul body interno, non sulla card */
display: flex; flex-direction: column;
overflow: hidden; /* per arrotondare anche la foto in alto */
box-shadow: var(--sh-sm);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.season-card > .season-head,
.season-card > .season-tariffs,
.season-card > .season-cta {
margin-left: 1.4rem;
margin-right: 1.4rem;
}
.season-card > .season-head { margin-top: 1.2rem; }
.season-card > .season-cta { margin-bottom: 1.4rem; }
/* Foto banner in alto, taglio elegante */
.season-photo {
width: 100%;
aspect-ratio: 16 / 11;
background-size: cover;
background-position: center;
position: relative;
border-bottom: 2px solid var(--c-gold);
transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.season-card:hover .season-photo {
transform: scale(1.04);
filter: saturate(1.08);
}
/* Velo gradient leggero per leggibilità eventuale e mood */
.season-photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(234,247,250,0.55) 100%);
pointer-events: none;
}
.season-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md);
border-color: var(--c-gold);
}
.season-card.is-featured {
border: 2px solid var(--c-gold);
background: linear-gradient(180deg, #fff 0%, #FFFDF7 100%);
box-shadow: var(--sh-md);
}
@media (min-width: 900px) {
.season-card.is-featured { transform: scale(1.04); }
.season-card.is-featured:hover { transform: scale(1.04) translateY(-4px); }
}
.season-badge {
position: absolute;
top: -10px; right: 16px;
background: var(--c-gold);
color: var(--c-deep);
padding: .3rem .7rem;
border-radius: var(--r-pill);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.season-head { margin-bottom: 1rem; }
.season-title {
font-family: var(--ff-display);
font-size: 1.5rem;
color: var(--c-deep);
margin: .2rem 0 0;
}
.season-tariffs {
flex: 1;
display: flex; flex-direction: column; gap: .9rem;
margin-bottom: 1.2rem;
}
.season-tariff {
background: var(--bg-soft);
border-left: 3px solid var(--c-gold);
border-radius: var(--r-sm);
padding: .8rem 1rem;
}
.season-tariff-head {
display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
margin-bottom: .3rem;
flex-wrap: nowrap;
}
.season-tariff-day {
font-weight: 600;
color: var(--c-deep);
font-size: .92rem;
flex: 1 1 auto;
min-width: 0;
}
.season-tariff-price {
font-family: var(--ff-display);
font-weight: 700;
font-size: 1.4rem;
color: var(--c-gold);
white-space: nowrap; /* mai spezzare "€ 40" su due righe */
flex: 0 0 auto;
}
/* ─── MOOD LUCE STAGIONALE ───
Ogni card ha una luce diversa che racconta il momento del giorno
associato alla stagione. Gradient sottile in alto (header), cream
normale per la parte funzionale (tariffe/CTA). */
/* Mattina sul mare — Maggio/Giugno/Settembre: rosa-pesca alba */
.season-card.mood-morning {
background: linear-gradient(180deg,
#FFE5D0 0%,
#FFF1E0 35%,
#FFFAF2 70%,
#FFFFFF 100%);
border-color: rgba(255, 168, 117, 0.45);
}
.season-card.mood-morning .season-head .eyebrow { color: #C7541F; }
/* Mezzogiorno mediterraneo — Luglio: azzurro cielo terso */
.season-card.mood-noon {
background: linear-gradient(180deg,
#D6F0FA 0%,
#EAF7FC 35%,
#F8FCFE 70%,
#FFFFFF 100%);
border-color: rgba(119, 201, 212, 0.55);
}
.season-card.mood-noon .season-head .eyebrow { color: #1A7A8C; }
/* Golden hour sul Castello — Agosto: oro/aranciato infuocato */
.season-card.mood-sunset {
background: linear-gradient(180deg,
#FFD3A8 0%,
#FFE2BD 30%,
#FFF1DC 60%,
#FFFAF0 100%);
border-color: rgba(200, 110, 50, 0.45);
}
.season-card.mood-sunset .season-head .eyebrow { color: #B8420A; }
/* Bambini — verde mediterraneo (mantengo lo styling family) */
.season-card.mood-kids {
background: linear-gradient(180deg,
#DDEFDD 0%,
#ECF5EC 40%,
#FBFDFB 100%);
border-color: rgba(79, 111, 82, 0.5);
}
.season-card.mood-kids .season-head .eyebrow { color: var(--c-green); }
/* Quando una card ha mood-X, il prezzo cambia tonalità per armonizzarsi */
.season-card.mood-morning .season-tariff-price { color: #C7541F; }
.season-card.mood-noon .season-tariff-price { color: #1A7A8C; }
.season-card.mood-sunset .season-tariff-price { color: #B8420A; }
/* mood-kids: prezzo verde già definito sotto */
/* La banda colorata sui tariff-card si tinge col mood */
.season-card.mood-morning .season-tariff { border-left-color: #FF8C42; background: rgba(255,229,208,0.5); }
.season-card.mood-noon .season-tariff { border-left-color: #77C9D4; background: rgba(214,240,250,0.55); }
.season-card.mood-sunset .season-tariff { border-left-color: #C95A1E; background: rgba(255,211,168,0.45); }
.season-card.mood-kids .season-tariff { border-left-color: var(--c-green); background: rgba(221,239,221,0.55); }
.season-tariff-promo {
font-size: .82rem;
color: rgba(30,30,30,0.78);
margin: 0 0 .25rem;
line-height: 1.4;
}
.season-tariff-promo strong { color: var(--c-green); font-weight: 600; }
/* Versione inglese — più leggera, riconoscibile come traduzione */
.season-tariff-promo-en {
font-size: .74rem;
color: rgba(30,30,30,0.55);
margin: 0;
line-height: 1.4;
font-style: italic;
}
.season-tariff-promo-en em {
font-style: normal;
color: rgba(30,30,30,0.7);
font-weight: 500;
}
/* Day name in inglese sotto al giorno italiano */
.season-tariff-day-wrap {
display: flex; flex-direction: column;
gap: 0.05rem;
min-width: 0;
flex: 1 1 auto;
}
.season-tariff-day-en {
font-size: .7rem;
color: rgba(30,30,30,0.5);
font-style: italic;
font-weight: 400;
}
/* Subtitle inglese nel header card (sotto il titolo IT) */
.season-subtitle-en {
font-size: .72rem;
color: rgba(30,30,30,0.5);
margin: .25rem 0 0;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
}
.season-cta { text-align: center; }
.pricing-intro {
background: var(--bg-card);
border: 1px dashed var(--c-gold);
border-radius: var(--r-md);
padding: 1rem 1.2rem;
text-align: center;
font-size: .92rem;
color: var(--c-deep);
margin-bottom: var(--space-lg);
}
/* ============================ 21c. PAGINE LEGALI (Privacy/Cookie) ============================ */
.page-hero-legal .page-hero-bg {
background:
radial-gradient(ellipse at 50% 40%, rgba(200,169,106,0.20), transparent 55%),
linear-gradient(135deg, #0B3D4A 0%, #1A7A8C 100%);
animation: none; /* no Ken Burns su legal */
}
.page-hero-legal { min-height: 280px; }
.policy-page { background: var(--bg-main); padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }
.policy-container { max-width: 820px; margin: 0 auto; }
.policy-container h2 {
font-family: var(--ff-display);
font-size: clamp(1.4rem, 3vw, 1.9rem);
color: var(--c-deep);
margin-top: 2.2rem;
margin-bottom: .7rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--c-line);
}
.policy-container h3 {
font-family: var(--ff-display);
font-size: 1.2rem;
color: var(--c-deep);
margin-top: 1.4rem;
margin-bottom: .5rem;
}
.policy-container p, .policy-container li { font-size: .97rem; line-height: 1.7; color: rgba(30,30,30,0.82); }
.policy-container ul, .policy-container ol { padding-left: 1.4rem; margin: .6rem 0 1.2rem; }
.policy-container li { margin-bottom: .35rem; }
.policy-container a {
color: var(--c-deep);
text-decoration: underline;
text-decoration-color: var(--c-gold);
text-underline-offset: 3px;
}
.policy-container a:hover { color: var(--c-gold); }
.policy-container code {
background: var(--bg-soft);
padding: 2px 6px;
border-radius: 4px;
font-size: .88em;
border: 1px solid var(--border-soft);
color: var(--c-deep);
}
.policy-container address {
font-style: normal;
background: var(--bg-card);
padding: 1rem 1.2rem;
border-radius: var(--r-md);
border-left: 3px solid var(--c-gold);
margin: .8rem 0;
}
.policy-container [data-fill] {
background: rgba(200,169,106,0.18);
padding: 1px 6px;
border-radius: 3px;
font-style: italic;
color: var(--c-deep);
font-weight: 600;
}
.policy-meta {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: .8rem 1rem;
font-size: .88rem !important;
margin-bottom: 1.6rem;
}
.policy-intro {
font-size: 1.05rem !important;
color: var(--c-deep) !important;
margin-bottom: 2rem;
padding-left: 1rem;
border-left: 3px solid var(--c-gold);
}
.policy-callout {
background: var(--bg-card);
border-left: 4px solid var(--c-green);
padding: 1rem 1.2rem;
border-radius: var(--r-sm);
margin: 1.4rem 0;
font-size: .95rem !important;
}
.policy-disclaimer {
margin-top: 3rem;
padding: 1.4rem 1.4rem;
background: rgba(200,169,106,0.10);
border: 1px dashed var(--c-gold);
border-radius: var(--r-md);
}
.policy-disclaimer p { font-size: .92rem !important; margin: 0; }
/* Tabella cookie */
.cookie-table-wrap {
overflow-x: auto;
margin: 1.2rem 0 1.6rem;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
background: var(--bg-card);
}
.cookie-table {
width: 100%;
border-collapse: collapse;
font-size: .92rem;
min-width: 720px;
}
.cookie-table th, .cookie-table td {
text-align: left;
padding: .75rem .9rem;
border-bottom: 1px solid var(--c-line);
vertical-align: top;
}
.cookie-table th {
background: var(--c-deep);
color: #fff;
font-weight: 600;
font-size: .8rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.cookie-table tbody tr:last-child td { border-bottom: none; }
.cookie-table tbody tr:nth-child(even) td { background: var(--bg-soft); }
.cookie-table td.ok { color: var(--c-green); font-weight: 600; }
.cookie-table td.warn { color: #c97a00; font-weight: 600; }
/* ============================ 21d. COOKIE BANNER ============================ */
.cookie-banner {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 150;
background: rgba(11,61,74,0.97);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--c-gold);
color: #fff;
padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
transform: translateY(110%);
transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner.is-leaving { transform: translateY(110%); opacity: 0; }
.cookie-banner-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.cookie-text h3 {
color: #fff;
font-family: var(--ff-display);
font-size: 1.25rem;
margin: 0 0 .4rem;
}
.cookie-text p {
margin: 0;
font-size: .9rem;
color: rgba(255,255,255,0.88);
line-height: 1.55;
}
.cookie-text a {
color: var(--c-gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-text a:hover { color: var(--c-sand); }
.cookie-actions {
display: flex;
gap: .6rem;
flex-wrap: wrap;
width: 100%;
}
.cookie-actions .btn { flex: 1; min-width: 140px; }
.cookie-actions .btn-ghost {
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.25);
}
.cookie-actions .btn-ghost:hover { background: rgba(255,255,255,0.18); }
@media (min-width: 800px) {
.cookie-banner-inner {
flex-direction: row;
align-items: center;
gap: 2rem;
}
.cookie-text { flex: 1; }
.cookie-actions { width: auto; flex: 0 0 auto; }
.cookie-actions .btn { flex: 0 0 auto; }
}
/* Su mobile, il floating-cta in basso confligge col banner cookie: nascondiamo
floating-cta finché il banner è visibile. */
body:has(.cookie-banner.is-visible) .floating-cta { display: none; }
/* ============================ 22. MEDIA QUERIES MULTI-PAGE ============================ */
@media (min-width: 560px) {
.exp-cards { grid-template-columns: 1fr 1fr; }
.pricing-grid { grid-template-columns: 1fr 1fr; }
.lido-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.exp-cards { grid-template-columns: repeat(4, 1fr); }
.intro-grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
.pricing-grid { grid-template-columns: repeat(3, 1fr); }
.pricing-card.is-featured { transform: scale(1.04); }
.pricing-card.is-featured:hover { transform: scale(1.04) translateY(-4px); }
}
/* ============================ 20. MEDIA QUERIES BASE ============================ */
/* ≥ 560px : leggero respiro su smartphone large */
@media (min-width: 560px) {
.info-grid { grid-template-columns: 1fr 1fr; }
.why-grid { grid-template-columns: 1fr 1fr; }
.contact-grid { grid-template-columns: 1fr 1fr; }
.events-cards { grid-template-columns: 1fr 1fr; }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.beach-menu { grid-template-columns: 1fr 1fr; }
.menu-list { grid-template-columns: 1fr 1fr; }
}
/* ≥ 768px : tablet */
@media (min-width: 768px) {
.container { padding: 0 2rem; }
.section { padding: var(--space-3xl) 0; }
.form-grid { grid-template-columns: 1fr 1fr; }
.form-actions-row { flex-direction: row; justify-content: center; }
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
.why-grid { grid-template-columns: repeat(4, 1fr); }
.events-cards { grid-template-columns: repeat(4, 1fr); }
}
/* ≥ 900px : laptop — mostriamo nav desktop */
@media (min-width: 900px) {
.nav-desktop ul { display: flex; }
.hamburger { display: none; }
.btn-cta-header { display: inline-flex; padding: .55rem 1rem; font-size: .85rem; }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.menu-list { grid-template-columns: 1fr 1fr; }
}
/* ≥ 1100px : desktop pieno — menù in 3 colonne per densità editoriale */
@media (min-width: 1100px) {
.menu-list { grid-template-columns: 1fr 1fr 1fr; }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
/* Delight #2: drop-cap della prima lettera del nome — desktop only.
Cormorant Garamond crea un'iniziale stately senza markup aggiuntivo.
Disattivato su mobile per non rompere la lettura. */
.dish-name::first-letter {
font-size: 1.45em;
line-height: .85;
float: left;
margin-right: .04em;
margin-top: .04em;
font-weight: 400;
color: var(--c-deep);
opacity: .92;
}
}
/* Stagger entrata cards — fade-in editoriale a cascata */
@keyframes dishCardEnter {
from { opacity: 0; }
to { opacity: 1; }
}
.menu-list .dish-card {
animation: dishCardEnter .5s cubic-bezier(.4, 0, .2, 1) both;
}
.menu-list .dish-card:nth-of-type(1) { animation-delay: 0ms; }
.menu-list .dish-card:nth-of-type(2) { animation-delay: 35ms; }
.menu-list .dish-card:nth-of-type(3) { animation-delay: 70ms; }
.menu-list .dish-card:nth-of-type(4) { animation-delay: 105ms; }
.menu-list .dish-card:nth-of-type(5) { animation-delay: 140ms; }
.menu-list .dish-card:nth-of-type(6) { animation-delay: 175ms; }
.menu-list .dish-card:nth-of-type(7) { animation-delay: 210ms; }
.menu-list .dish-card:nth-of-type(8) { animation-delay: 245ms; }
.menu-list .dish-card:nth-of-type(n+9) { animation-delay: 280ms; }
/* Stagger anche per gli ornamenti + titolo categoria */
.menu-list .menu-category-ornament,
.menu-list .menu-category {
animation: dishCardEnter .55s cubic-bezier(.4, 0, .2, 1) both;
animation-delay: 50ms;
}
/* A11y: rispetto preferenze motion utente */
@media (prefers-reduced-motion: reduce) {
.dish-card,
.dish-card:hover,
.dish-card::after,
.dish-card:hover::after,
.dish-card .dish-body::before,
.dish-card:hover .dish-body::before,
.allergen,
.allergen:hover,
.allergen:focus-visible,
.dish-defrosted,
.dish-star,
.menu-list .dish-card,
.menu-list .menu-category-ornament,
.menu-list .menu-category,
.filter-btn,
.filter-btn:hover {
transition: none !important;
transform: none !important;
animation: none !important;
filter: none !important;
}
.dish-card:hover {
/* mantieni segnale visivo dell'hover ma senza lift */
box-shadow:
inset 0 0 0 1px rgba(11, 61, 74, 0.12),
0 2px 4px rgba(11, 61, 74, 0.06);
}
}
/* Prefer dark mode? Manteniamo il tema chiaro elegante in ogni caso.
Si potrà introdurre una dark mode futura senza rompere il layout. */
/* ============================================================
MODAL SCHEDA VINO — apertura al click sulla wine-card.
Layout mobile-first, premium, marino-mediterraneo.
============================================================ */
.wine-card {
cursor: pointer;
}
.wine-card:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 3px;
}
.wine-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.wine-modal[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.wine-modal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 22, 33, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.wine-modal__card {
position: relative;
width: 100%;
max-width: 760px;
max-height: 100dvh;
background: linear-gradient(180deg, #fffaf3 0%, #fff7ea 100%);
border-radius: 0;
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(20px) scale(0.97);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.wine-modal[aria-hidden="false"] .wine-modal__card {
transform: translateY(0) scale(1);
}
@media (min-width: 720px) {
.wine-modal { padding: 2rem; }
.wine-modal__card {
border-radius: var(--r-lg);
max-height: 92vh;
}
}
.wine-modal__close {
position: absolute;
top: .8rem;
right: .8rem;
z-index: 3;
background: rgba(255,255,255,0.92);
border: 1px solid var(--c-line);
width: 38px; height: 38px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--c-deep);
cursor: pointer;
transition: background .2s, transform .2s, color .2s;
}
.wine-modal__close:hover {
background: var(--c-deep);
color: #fff;
transform: scale(1.05);
}
.wine-modal__close:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 2px;
background: var(--c-deep);
color: #fff;
}
.wine-modal__inner {
display: grid;
grid-template-columns: 1fr;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
.wine-modal__inner {
grid-template-columns: 220px 1fr;
}
}
/* FOTO BOTTIGLIA */
.wine-modal__photo {
margin: 0;
background: #ffffff;
padding: 1.5rem 1rem 1.2rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* Mobile: garantisce altezza minima visibile per la bottiglia */
min-height: 280px;
flex-shrink: 0;
}
.wine-modal__photo::after {
content: "";
position: absolute;
inset: auto 1rem .8rem;
height: 22px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
filter: blur(3px);
z-index: 0;
}
.wine-modal__photo img {
position: relative;
z-index: 1;
max-height: 240px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
/* Ensure the image is actually displayed and centered */
display: block;
}
@media (min-width: 720px) {
.wine-modal__photo {
padding: 2rem 1rem;
border-right: 1px solid rgba(0,0,0,0.06);
min-height: auto;
}
.wine-modal__photo img {
max-height: 360px;
}
}
/* BODY */
.wine-modal__body {
padding: 1.4rem 1.4rem 1.6rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
@media (min-width: 720px) {
.wine-modal__body {
padding: 2rem 2rem 1.8rem;
}
}
.wine-modal__header {
display: flex;
flex-direction: column;
gap: .25rem;
}
.wine-modal__badge {
align-self: flex-start;
background: var(--c-gold);
color: var(--c-deep);
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
padding: .2rem .55rem;
border-radius: var(--r-pill);
margin-bottom: .25rem;
}
.wine-modal__cantina {
font-size: .82rem;
color: rgba(30,30,30,0.62);
font-style: italic;
margin: 0;
letter-spacing: .02em;
}
.wine-modal__title {
font-family: var(--ff-display);
font-size: 1.8rem;
line-height: 1.15;
color: var(--c-deep);
margin: .15rem 0 .25rem;
letter-spacing: .005em;
}
@media (min-width: 720px) {
.wine-modal__title { font-size: 2.1rem; }
}
.wine-modal__meta {
font-size: .82rem;
color: rgba(30,30,30,0.7);
margin: 0;
}
.wine-modal__meta strong { font-weight: 600; color: var(--c-deep); }
.wine-modal__descr {
font-size: .98rem;
line-height: 1.65;
color: rgba(20,30,40,0.86);
margin: 0;
font-family: var(--ff-body);
}
.wine-modal__section {
border-top: 1px solid rgba(0,0,0,0.07);
padding-top: 1rem;
}
.wine-modal__h {
font-family: var(--ff-display);
font-size: .78rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--c-gold);
margin: 0 0 .6rem;
}
.wine-modal__notes {
display: grid;
grid-template-columns: 1fr;
gap: .55rem;
margin: 0;
}
.wine-modal__notes > div {
display: grid;
grid-template-columns: 78px 1fr;
gap: .6rem;
align-items: baseline;
}
.wine-modal__notes dt {
font-family: var(--ff-display);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--c-deep);
margin: 0;
}
.wine-modal__notes dd {
font-size: .9rem;
line-height: 1.5;
color: rgba(20,30,40,0.78);
margin: 0;
}
.wine-modal__pairings {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: .45rem;
}
.wine-modal__pairings li {
background: rgba(193, 153, 71, 0.12);
border: 1px solid rgba(193, 153, 71, 0.35);
color: var(--c-deep);
font-size: .82rem;
padding: .4rem .75rem;
border-radius: var(--r-pill);
font-family: var(--ff-body);
}
.wine-modal__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .65rem;
margin-top: .25rem;
}
@media (min-width: 520px) {
.wine-modal__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.wine-modal__chip {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: .65rem .75rem;
display: flex;
flex-direction: column;
gap: .15rem;
}
.wine-modal__chip-label {
font-size: .66rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(20,30,40,0.55);
font-weight: 600;
}
.wine-modal__chip-val {
font-size: .95rem;
font-family: var(--ff-display);
color: var(--c-deep);
font-weight: 600;
}
.wine-modal__chip-val--price {
color: var(--c-gold);
}
.wine-modal__footer {
display: flex;
flex-direction: column;
gap: .9rem;
margin-top: .5rem;
}
.wine-modal__footer .btn {
align-self: stretch;
text-align: center;
}
@media (min-width: 520px) {
.wine-modal__footer .btn { align-self: flex-start; }
}
.wine-modal__sources {
font-size: .8rem;
color: rgba(20,30,40,0.6);
}
.wine-modal__sources summary {
cursor: pointer;
font-family: var(--ff-display);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(20,30,40,0.55);
user-select: none;
}
.wine-modal__sources ul {
margin: .5rem 0 0;
padding-left: 1.1rem;
}
.wine-modal__sources li {
font-size: .78rem;
line-height: 1.5;
word-break: break-word;
}
/* Quando la modal è aperta blocchiamo lo scroll della pagina sotto */
body.wine-modal-open {
overflow: hidden;
}
/* ============================================================
PULSANTE "Vai al menù" — visibile nei mini-hero di
ristorante / snack-bar / beach-club.
============================================================ */
.btn-jump-menu {
display: inline-flex;
align-items: center;
gap: .55rem;
margin-top: 1.5rem;
padding: .85rem 1.6rem;
font-size: .92rem;
letter-spacing: .04em;
border-radius: var(--r-pill);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.btn-jump-menu svg {
display: inline-block;
animation: jumpMenuBounce 1.8s ease-in-out infinite;
}
.btn-jump-menu:hover svg { animation-play-state: paused; }
@keyframes jumpMenuBounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.btn-jump-menu svg { animation: none; }
}
/* Nota esclusioni eventi (matrimoni/eventi section) */
.events-note {
margin-top: .9rem;
font-size: .88rem;
color: rgba(20,30,40,0.55);
letter-spacing: .015em;
}
/* ============================================================
NETLIFY FORMS — honeypot anti-spam (invisibile)
============================================================ */
.hp-field {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Checkbox consenso privacy nel form eventi */
.form-row-consent .checkbox-row {
display: flex;
align-items: flex-start;
gap: .65rem;
font-size: .88rem;
line-height: 1.5;
color: rgba(20,30,40,0.78);
cursor: pointer;
font-weight: 400;
}
.form-row-consent input[type="checkbox"] {
margin-top: .25rem;
width: 18px;
height: 18px;
accent-color: var(--c-deep);
flex-shrink: 0;
}
.form-row-consent a {
color: var(--c-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================
PAGINA GRAZIE — landing post-submit form eventi
============================================================ */
.page-thanks main { padding-top: var(--header-h); }
.section-thanks {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(180deg, var(--bg-main) 0%, var(--sea-soft) 100%);
}
.thanks-inner {
max-width: 560px;
padding: 3rem 1rem;
}
.thanks-icon {
color: var(--c-gold);
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
}
.section-thanks .eyebrow {
color: var(--c-gold);
margin-bottom: .6rem;
}
.section-thanks h1 {
font-family: var(--ff-display);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--c-deep);
margin: 0 0 1.2rem;
letter-spacing: .01em;
}
.thanks-lead {
font-size: 1.1rem;
line-height: 1.65;
color: rgba(20,30,40,0.78);
margin: 0 0 2rem;
}
.thanks-meta {
font-size: .95rem;
color: rgba(20,30,40,0.65);
margin: 0 0 2.5rem;
}
.thanks-meta a {
color: var(--c-deep);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.thanks-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Gruppo CTA hero (Vai al menù + Prenota affiancati nei mini-hero) */
.hero-cta-group {
display: inline-flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.5rem;
justify-content: center;
}
.hero-cta-group .btn-jump-menu {
margin-top: 0; /* override del margin-top normale del btn-jump-menu */
}
/* Sezione "Servizi extra" nel prezzario beach club */
.pricing-extra-title {
margin-top: 1.5rem;
font-size: 1rem;
letter-spacing: .04em;
color: var(--c-deep);
}
.pricing-extra-list {
margin: .5rem 0 0;
}
.pricing-extra-list li {
color: rgba(20,30,40,0.75);
}
/* ==========================================================================
MATRIMONI PAGE — Cinematic Wedding Landing
Tutte le classi di questa sezione si applicano SOLO a matrimoni.html
e non interferiscono con il resto del sito.
--------------------------------------------------------------------------
Palette usata: --c-deep, --c-gold, --bg-main, --bg-card, --c-cream,
--c-aqua, --c-text, --border-soft, --ff-display, --ff-body
========================================================================== */
/* ─── 1. WEDDING HERO — full-bleed cinematic ─── */
.wedding-hero {
position: relative;
min-height: 100svh;
min-height: 100vh;
display: flex;
align-items: flex-end;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.wedding-hero-bg {
position: absolute; inset: 0; z-index: 0;
background-image: url("assets/matrimonio/wedding-photo-8.jpg");
background-size: cover;
background-position: center 35%;
animation: weddingKenBurns 28s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes weddingKenBurns {
0% { transform: scale(1.00) translate(0, 0); }
100% { transform: scale(1.07) translate(-1%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) {
.wedding-hero-bg { animation: none; }
}
.wedding-hero-overlay {
position: absolute; inset: 0; z-index: 1;
background:
/* vignette radiale per legare i bordi */
radial-gradient(
ellipse at center,
rgba(11,61,74,0.20) 0%,
rgba(11,61,74,0.45) 100%
),
/* gradient verticale: scuro sopra (breadcrumb), schiarito al centro per non coprire l'immagine, scuro sotto (sub+cta) */
linear-gradient(
to bottom,
rgba(11,61,74,0.65) 0%,
rgba(11,61,74,0.40) 25%,
rgba(11,61,74,0.35) 50%,
rgba(11,61,74,0.70) 80%,
rgba(11,61,74,0.92) 100%
);
}
.wedding-hero-inner {
position: relative; z-index: 2;
padding: calc(var(--header-h) + 2rem) 0 5rem;
width: 100%;
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.wedding-hero-eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .3em;
text-transform: uppercase;
color: #E8C988; /* oro più chiaro per contrasto */
margin-bottom: 1.2rem;
position: relative;
text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.55);
}
.wedding-hero-eyebrow::before,
.wedding-hero-eyebrow::after {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: #E8C988;
vertical-align: middle;
margin: 0 .8rem;
opacity: 1;
box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.wedding-hero h1 {
font-family: var(--ff-display);
font-size: clamp(2.6rem, 7vw, 5.2rem);
font-weight: 500;
line-height: 1.05;
color: #fff;
margin: 0 0 1.2rem;
/* Triple text-shadow per leggibilità su qualsiasi foto */
text-shadow:
0 2px 8px rgba(0,0,0,0.55),
0 6px 28px rgba(0,0,0,0.45),
0 0 2px rgba(0,0,0,0.4);
letter-spacing: -.01em;
}
.wedding-hero-sub {
font-size: clamp(1.02rem, 2vw, 1.22rem);
color: #ffffff;
font-style: italic;
font-family: var(--ff-display);
margin: 0 auto 2.4rem;
max-width: 640px;
line-height: 1.55;
text-shadow:
0 2px 10px rgba(0,0,0,0.75),
0 1px 3px rgba(0,0,0,0.65);
}
.wedding-hero-cta {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
/* Freccia scroll in basso */
.wedding-scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
color: rgba(255,255,255,0.55);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
}
.wedding-scroll-hint-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(200,169,106,0.9), transparent);
animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: .4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.15); }
}
/* ─── 2. WEDDING MANIFESTO — brano evocativo ─── */
.wedding-manifesto {
background: var(--c-deep);
color: #fff;
padding: var(--space-3xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
/* Noise texture leggera sopra il blu profondo */
.wedding-manifesto::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 300px 300px;
pointer-events: none;
z-index: 0;
}
.wedding-manifesto-inner {
position: relative; z-index: 1;
max-width: 780px;
margin: 0 auto;
padding: 0 1.25rem;
}
.manifesto-rule {
display: flex;
align-items: center;
justify-content: center;
gap: .8rem;
margin: 0 auto 2.4rem;
max-width: 200px;
}
.manifesto-rule::before,
.manifesto-rule::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--c-gold));
}
.manifesto-rule::after {
background: linear-gradient(90deg, var(--c-gold), transparent);
}
.manifesto-rule-diamond {
width: 7px; height: 7px;
background: var(--c-gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.manifesto-quote {
font-family: var(--ff-display);
font-size: clamp(1.4rem, 3.5vw, 2.1rem);
font-weight: 400;
line-height: 1.55;
color: rgba(255,255,255,0.95);
margin: 0 0 2rem;
font-style: italic;
text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.manifesto-caption {
font-size: .82rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
margin: 0;
}
/* ─── 3. BENTO MOSAIC — gallery cinematica ─── */
.wedding-bento {
background: var(--bg-main);
padding: var(--space-3xl) 0;
}
.bento-label {
text-align: center;
margin-bottom: var(--space-xl);
}
.wedding-bento-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: .6rem;
}
/* Layout desktop: 1 grande a sinistra + 2×2 a destra */
@media (min-width: 720px) {
.wedding-bento-grid {
grid-template-columns: 1.35fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: .8rem;
aspect-ratio: 16 / 9;
}
.wb-hero { grid-column: 1; grid-row: 1 / span 2; }
.wb-a { grid-column: 2; grid-row: 1; }
.wb-b { grid-column: 3; grid-row: 1; }
.wb-c { grid-column: 2; grid-row: 2; }
.wb-d { grid-column: 3; grid-row: 2; }
}
@media (max-width: 719px) {
.wb-hero { aspect-ratio: 4/3; }
.wb-a, .wb-b, .wb-c, .wb-d { aspect-ratio: 16/10; }
}
.wb {
position: relative;
border-radius: var(--r-md);
overflow: hidden;
isolation: isolate;
background: var(--c-deep);
display: flex;
align-items: flex-end;
box-shadow: var(--sh-sm);
transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
cursor: default;
min-height: 200px;
}
.wb::before {
content: "";
position: absolute; inset: 0;
background-image: var(--wb-img);
background-size: cover;
background-position: var(--wb-pos, center);
z-index: 0;
transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.wb:hover::before {
transform: scale(1.07);
filter: saturate(1.1) brightness(1.04);
}
.wb:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
/* Velo gradient bottom */
.wb::after {
content: "";
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
to bottom,
transparent 40%,
rgba(11,61,74,0.78) 100%
);
}
.wb-caption {
position: relative; z-index: 2;
padding: .9rem 1rem;
width: 100%;
}
.wb-caption-eyebrow {
font-size: .65rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-gold);
margin: 0 0 .2rem;
display: block;
}
.wb-caption-title {
font-family: var(--ff-display);
font-size: 1.05rem;
color: #fff;
margin: 0;
line-height: 1.15;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.wb-hero .wb-caption-title {
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}
/* Foto per ogni tile */
.wb-1 { --wb-img: url("assets/matrimonio/wedding-photo-8.jpg"); --wb-pos: center 35%; }
.wb-2 { --wb-img: url("assets/matrimonio/wedding-photo-10.jpg"); --wb-pos: center 40%; }
.wb-3 { --wb-img: url("assets/matrimonio/wedding-photo-3.jpg"); --wb-pos: center; }
.wb-4 { --wb-img: url("assets/matrimonio/wedding-photo-2.jpg"); --wb-pos: center 45%; }
.wb-5 { --wb-img: url("assets/matrimonio/wedding-photo-5.jpg"); --wb-pos: center; }
.wb-6 { --wb-img: url("assets/matrimonio/wedding-frame-2.jpg"); --wb-pos: center; }
/* ============== VIDEO TILES nel bento (clip muti auto-loop) ============== */
.wb-video-tile {
background: #000;
position: relative;
overflow: hidden;
}
.wb-video-tile .wb-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.wb-video-tile:hover .wb-video {
transform: scale(1.04);
}
/* Video puliti, niente overlay/caption (caption-less per scelta UX) */
.wb-video-tile::after { display: none; }
.wb-video-tile .wb-caption { display: none; }
/* ============== GALLERIA MASONRY (frame + foto matrimonio) ============== */
.wedding-gallery {
background: var(--bg-soft);
padding: clamp(3rem, 7vw, 6rem) 0;
}
/* Layout grid UNIFORME — tile tutte stesso aspect ratio (4:3) per look ordinato */
.wedding-masonry {
margin-top: 2.6rem;
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
.wm-item {
position: relative;
background-color: var(--c-deep);
background-image: var(--img);
background-size: cover;
background-position: center;
border-radius: var(--r-md);
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 24px rgba(11,61,74,0.10);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
isolation: isolate;
aspect-ratio: 4 / 3;
}
.wm-item:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 18px 40px rgba(11,61,74,0.20);
}
.wm-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11,61,74,0) 60%, rgba(11,61,74,0.55) 100%);
opacity: 0;
transition: opacity .3s ease;
}
.wm-item:hover::after { opacity: 1; }
/* Caption nascoste visivamente (mantenute per screen reader / lightbox) */
.wm-item figcaption {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
@media (min-width: 560px) {
.wedding-masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.wedding-masonry { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
.wedding-masonry { grid-template-columns: repeat(4, 1fr); }
}
/* ============== FORM SECTION CON VIDEO BG FUOCHI ============== */
.wedding-form-section.has-video-bg {
position: relative;
isolation: isolate;
background: var(--c-deep);
overflow: hidden;
}
.wedding-form-video-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.wedding-form-video-bg video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.05) brightness(0.85);
}
.wedding-form-veil {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at center, rgba(11,61,74,0.55) 0%, rgba(11,61,74,0.88) 80%),
linear-gradient(180deg, rgba(11,61,74,0.50) 0%, rgba(11,61,74,0.78) 100%);
pointer-events: none;
}
.wedding-form-section.has-video-bg > .container {
position: relative;
z-index: 2;
}
.wedding-form-section.has-video-bg .section-head .eyebrow,
.wedding-form-section.has-video-bg .section-head h2,
.wedding-form-section.has-video-bg .section-head .section-sub {
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.wedding-form-section.has-video-bg .section-head .eyebrow {
color: #E8C988;
}
.wedding-form-section.has-video-bg .wedding-form-wrap {
background: rgba(255,255,255,0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
/* ─── 4. ESPERIENZE CARD CON FOTO ─── */
.wedding-esperienze {
background: var(--bg-soft);
padding: var(--space-3xl) 0;
}
.wedding-exp-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: var(--space-xl);
}
@media (min-width: 640px) {
.wedding-exp-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.wedding-exp-grid { grid-template-columns: repeat(4, 1fr); }
}
.event-card-photo {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 3 / 4;
display: flex;
align-items: flex-end;
isolation: isolate;
background: var(--c-deep);
box-shadow: var(--sh-md);
transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
text-decoration: none;
}
.event-card-photo:hover {
transform: translateY(-6px);
box-shadow: var(--sh-lg);
}
.event-card-photo-bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover;
background-position: center;
transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.event-card-photo:hover .event-card-photo-bg {
transform: scale(1.07);
filter: saturate(1.1);
}
.event-card-photo-veil {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
to bottom,
rgba(11,61,74,0.1) 0%,
rgba(11,61,74,0.88) 100%
);
}
.event-card-photo-body {
position: relative; z-index: 2;
padding: 1.4rem 1.2rem 1.6rem;
width: 100%;
}
.event-card-photo-rule {
display: block;
width: 32px;
height: 1px;
background: var(--c-gold);
margin-bottom: .8rem;
}
.event-card-photo-body h4 {
font-family: var(--ff-display);
font-size: 1.4rem;
color: #fff;
margin: 0 0 .5rem;
font-weight: 600;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.event-card-photo-body p {
font-size: .9rem;
color: rgba(255,255,255,0.88);
margin: 0;
line-height: 1.5;
}
/* ─── 5. STATISTICHE / NUMERI ─── */
.wedding-stats {
background: var(--c-cream);
padding: var(--space-3xl) 0;
}
.wedding-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem 1.5rem;
margin-top: var(--space-xl);
}
@media (min-width: 900px) {
.wedding-stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
}
.stat-item {
text-align: center;
position: relative;
padding-top: 1.2rem;
}
.stat-item::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 28px; height: 1px;
background: var(--c-gold);
}
.stat-number {
display: block;
font-family: var(--ff-display);
font-size: clamp(2.8rem, 7vw, 4.5rem);
font-weight: 500;
color: var(--c-deep);
line-height: 1;
margin-bottom: .35rem;
letter-spacing: -.02em;
}
.stat-label {
font-size: .82rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(11,61,74,0.6);
margin: 0;
}
.stat-note {
font-family: var(--ff-display);
font-size: .95rem;
font-style: italic;
color: var(--c-gold);
margin-top: .2rem;
display: block;
}
/* ─── 6. WEDDING MOOD — sunset full-bleed ─── */
.wedding-mood {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.wedding-mood-bg {
position: absolute; inset: 0; z-index: 0;
background-image: url("assets/matrimonio/wedding-photo-9.jpg");
background-size: cover;
background-position: center 40%;
}
@media (min-width: 900px) {
.wedding-mood-bg {
background-attachment: fixed;
background-position: center 40%;
}
}
/* ============== FILM DEL GIORNO (sezione video player) ============== */
.wedding-film {
position: relative;
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--c-deep);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.wedding-film::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(200,169,106,0.10) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(119,201,212,0.08) 0%, transparent 50%);
pointer-events: none;
}
.wedding-film-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.wedding-film-eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .3em;
text-transform: uppercase;
color: #E8C988;
margin-bottom: 1.2rem;
position: relative;
}
.wedding-film-eyebrow::before,
.wedding-film-eyebrow::after {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: #E8C988;
vertical-align: middle;
margin: 0 .8rem;
opacity: .9;
}
.wedding-film-title {
font-family: var(--ff-display);
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 500;
line-height: 1.1;
color: #fff;
margin: 0 0 .8rem;
letter-spacing: -.01em;
}
.wedding-film-sub {
font-size: clamp(1rem, 1.6vw, 1.18rem);
color: rgba(255,255,255,0.78);
font-style: italic;
font-family: var(--ff-display);
max-width: 620px;
margin: 0 auto 2.6rem;
line-height: 1.55;
}
.wedding-film-player {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow:
0 30px 80px rgba(0,0,0,0.55),
0 0 0 1px rgba(232,201,136,0.12);
background: #000;
aspect-ratio: 16 / 9;
}
.wedding-film-player video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.wedding-film-credit {
margin-top: 1.6rem;
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(232,201,136,0.65);
}
.wedding-mood-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
135deg,
rgba(11,61,74,0.68) 0%,
rgba(11,61,74,0.58) 50%,
rgba(11,61,74,0.72) 100%
);
}
.wedding-mood-inner {
position: relative; z-index: 2;
max-width: 780px;
padding: var(--space-3xl) 1.25rem;
}
.wedding-mood-claim {
font-family: var(--ff-display);
font-size: clamp(1.8rem, 5vw, 3.5rem);
font-weight: 400;
line-height: 1.25;
color: #fff;
font-style: italic;
margin: 0 0 1.6rem;
text-shadow: 0 4px 28px rgba(0,0,0,0.4);
}
.wedding-mood-claim em {
color: var(--c-gold);
font-style: inherit;
}
.wedding-mood-sub {
font-size: 1rem;
color: rgba(255,255,255,0.82);
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
margin: 0;
}
/* ─── 7. FORM SEZIONE — raffinata ─── */
.wedding-form-section {
background: var(--bg-main);
padding: var(--space-3xl) 0;
}
.wedding-form-wrap {
background: var(--bg-card);
border-radius: var(--r-lg);
padding: 2.4rem 2rem;
box-shadow: var(--sh-lg);
max-width: 880px;
margin: 0 auto;
border: 1px solid var(--border-soft);
}
.wedding-form-head {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--border-soft);
}
.wedding-form-head h3 {
font-family: var(--ff-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--c-deep);
margin: 0 0 .5rem;
}
.wedding-form-head p {
color: rgba(30,30,30,0.65);
font-size: 1rem;
font-style: italic;
margin: 0;
}
/* ─── 8. CTA PRE-FOOTER ─── */
.wedding-prefooter {
background: var(--c-deep);
padding: var(--space-2xl) 0;
text-align: center;
color: #fff;
}
.wedding-prefooter h3 {
font-family: var(--ff-display);
font-size: clamp(1.5rem, 3vw, 2.2rem);
color: #fff;
margin: 0 0 .6rem;
}
.wedding-prefooter p {
color: rgba(255,255,255,0.78);
font-size: 1rem;
font-style: italic;
margin: 0 0 1.8rem;
font-family: var(--ff-display);
}
.wedding-prefooter-row {
display: flex;
flex-wrap: wrap;
gap: .9rem;
justify-content: center;
}
/* ─── MEDIA QUERIES specifiche wedding ─── */
@media (min-width: 720px) {
.wedding-form-wrap { padding: 3rem 3.5rem; }
.wedding-bento-grid .wb-hero { min-height: auto; }
}
@media (min-width: 900px) {
.wedding-hero-inner { padding-bottom: 7rem; }
}
/* Breadcrumb chiaro su fondo scuro hero */
.wedding-breadcrumb {
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 1.2rem;
display: block;
font-weight: 500;
text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.55);
}
.wedding-breadcrumb a {
color: #E8C988;
transition: opacity .2s;
text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.wedding-breadcrumb a:hover { opacity: .8; }
.wedding-breadcrumb span { margin: 0 .4rem; opacity: .8; }
/* Note evento (no lauree, ecc.) */
.events-note-block {
display: inline-block;
border: 1px solid rgba(200,169,106,0.4);
border-radius: var(--r-sm);
padding: .6rem 1.1rem;
font-size: .82rem;
color: rgba(30,30,30,0.65);
font-style: italic;
margin-top: 1.4rem;
background: rgba(200,169,106,0.07);
}
/* Form consent checkbox */
.checkbox-row {
display: flex;
align-items: flex-start;
gap: .6rem;
cursor: pointer;
font-size: .88rem;
color: rgba(30,30,30,0.75);
line-height: 1.5;
}
.checkbox-row input[type="checkbox"] {
width: 17px; height: 17px;
flex-shrink: 0;
margin-top: .15rem;
accent-color: var(--c-gold);
cursor: pointer;
}
.checkbox-row a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
/* Honeypot nascosto */
.hp-field { display: none; }
/* ============================================================
MOBILE FINE-TUNING (sotto 700px)
Target: iPhone 13/14/15 (390px) · Android medio (360–414px)
Autore: Mobile UX audit 2026-05-30
Principi:
· Touch target minimo 44×44px per ogni elemento interattivo
· Body text min 16px (niente zoom iOS automatico)
· Hero h1 max ~2.4rem su 390px — no overflow orizzontale
· Filtri menù: scroll orizzontale con snap (no wrap multi-riga)
· Card piatti/vini: 1 colonna piena, foto proporzionata
· Padding sezioni: ridotto a 1rem - 1.25rem (no 2rem)
· Floating CTA: sempre visibile, mai coperta da contenuti
· Footer links: target aumentato a min 44px height
· Form inputs: height minima 44px
· Bento esperienze: stack verticale ordinato con altezze bilanciate
· Sezione contatti: 2 colonne compatte (no 1×6 stack infinito)
· Gallery: 2 colonne su 390px (non 3)
· Pricing beach club: 1 colonna fluida, card compatte
· Switch pranzo/cena: compatto, font ridotto
· Allergen chips: leggibili, target ok
· Sticky header: ridotto a 56px su mobile
============================================================ */
@media (max-width: 700px) {
/* ───────────────────────────────────────
SHARED — GLOBAL FIXES
─────────────────────────────────────── */
/* Riduce il padding del container su mobile */
.container {
padding: 0 1rem;
}
/* Riduce padding sezioni — 1.75rem top/bottom basta su mobile */
.section {
padding: 1.75rem 0;
}
/* Body line-height garantita */
body {
line-height: 1.6;
}
/* Paragrafi: max-width leggibility su schermo stretto */
p {
max-width: 100%;
}
/* Section head: riduce margin-bottom */
.section-head {
margin-bottom: 1.25rem;
}
.section-head h2 {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: .4rem;
}
.section-sub {
font-size: .95rem;
line-height: 1.55;
}
/* ───────────────────────────────────────
SHARED — STICKY HEADER
─────────────────────────────────────── */
/* Riduce altezza header su mobile — più spazio contenuto */
:root {
--header-h: 58px;
}
.site-header {
padding: 6px 0;
}
.header-inner {
min-height: 46px;
gap: .5rem;
}
/* Logo: dimensione bilanciata — non troppo grande */
.brand-logo {
height: 34px;
}
.site-header.scrolled .brand-logo,
.page-sub .site-header .brand-logo {
height: 34px;
}
/* Hamburger: touch target esatto 44×44 */
.hamburger {
width: 44px;
height: 44px;
flex-shrink: 0;
}
/* ───────────────────────────────────────
SHARED — NAV MOBILE
─────────────────────────────────────── */
.nav-mobile {
padding: calc(var(--header-h) + 12px) 1.25rem 2rem;
}
/* Link nav mobile: target 44px height minima */
.nav-mobile a {
font-size: 1.3rem;
padding: .7rem 0;
min-height: 44px;
display: flex;
align-items: center;
}
/* Bottone prenota nel nav mobile: piena larghezza, ben spaziato */
.nav-mobile a.btn {
display: flex;
justify-content: center;
margin-top: .5rem;
min-height: 48px;
font-size: 1rem;
}
/* ───────────────────────────────────────
SHARED — FLOATING CTA
─────────────────────────────────────── */
/* Floating CTA: più alta dalla base per safe area iOS (notch) */
.floating-cta {
bottom: max(14px, env(safe-area-inset-bottom, 14px));
padding: .45rem;
gap: .4rem;
}
/* Bottone call: target 44×44 garantito */
.fcta-call {
width: 44px;
height: 44px;
flex-shrink: 0;
}
/* Bottone "Prenota": altezza 44px, testo leggibile */
.fcta-book {
height: 44px;
padding: 0 1.1rem;
font-size: .88rem;
display: flex;
align-items: center;
}
/* ───────────────────────────────────────
SHARED — BOTTONI
─────────────────────────────────────── */
/* Ogni bottone: minimo 44px touch target */
.btn {
min-height: 44px;
padding: .75rem 1.2rem;
font-size: .9rem;
}
/* CTA row: stack verticale su mobile stretto */
.cta-row {
flex-direction: column;
align-items: stretch;
margin-top: 1rem;
gap: .6rem;
}
.cta-row .btn {
width: 100%;
justify-content: center;
}
/* ───────────────────────────────────────
SHARED — FORM INPUTS
─────────────────────────────────────── */
/* Input / select / textarea: min 44px height, font 16px (anti-zoom iOS) */
.form-row input,
.form-row textarea,
.form-row select {
min-height: 44px;
font-size: 16px; /* CRITICO: previene zoom automatico iOS */
padding: .75rem .85rem;
}
.form-row textarea {
min-height: 100px;
}
/* Checkbox consent: target più grande */
.form-row-consent input[type="checkbox"],
.checkbox-row input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: .1rem;
}
/* ───────────────────────────────────────
SHARED — FILTRI MENU
Scroll orizzontale con snap — nessun wrap su mobile
─────────────────────────────────────── */
.filters {
/* Trasforma da flex-wrap a scroll orizzontale */
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
gap: .45rem;
padding: .25rem .25rem .75rem;
/* Snap scrolling — scocca tra bottoni */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Nascondi scrollbar visivamente su WebKit */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
/* Margini negativi per far andare fino al bordo del container */
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.filters::-webkit-scrollbar {
display: none;
}
/* Ogni bottone filtro: no shrink, snap align, touch target ok */
.filter-btn {
flex-shrink: 0;
scroll-snap-align: start;
white-space: nowrap;
min-height: 40px;
padding: .5rem 1rem;
font-size: .82rem;
}
/* ───────────────────────────────────────
SHARED — CARD PIATTO (dish-card)
─────────────────────────────────────── */
/* ═════════════════════════════════════════════════════
MOBILE PERFECTION v2 — Cocó Mare
Ottimizzato per 375-414px (iPhone SE → 14 Pro Max).
Priorità: leggibilità sotto il pollice, ritmo da lista,
tactile feedback al press, presenza decorazioni.
═════════════════════════════════════════════════════ */
/* Menu list: 1 col, gap di respiro */
.menu-list {
grid-template-columns: 1fr !important;
gap: .8rem !important;
}
/* dish-card mobile: anti-jitter iOS + press feedback tactile */
.dish-card:hover { transform: none; }
.dish-card:active {
transform: scale(.992);
transition: transform .1s cubic-bezier(.4,0,.2,1);
}
.dish-card:active::after { width: 100%; }
/* Body più aria per touch comfort */
.dish-body {
padding: .8rem 1rem .85rem .9rem;
}
/* Badge: micro intenzionale */
.dish-badge {
font-size: .54rem;
letter-spacing: .22em;
margin-bottom: .35rem;
}
/* Divider: calibrato, visibile senza dominare */
.dish-divider {
margin: .35rem 0 .45rem;
}
.dish-divider span:nth-child(1),
.dish-divider span:nth-child(3) {
width: 13px;
opacity: .5;
}
.dish-divider span:nth-child(2) {
width: 4.5px;
height: 4.5px;
opacity: .85;
}
/* Nome piatto: 1.06rem leggibile + reset drop-cap */
.dish-name {
font-size: 1.06rem;
line-height: 1.22;
letter-spacing: -0.005em;
font-weight: 500;
}
.dish-name::first-letter {
font-size: inherit;
line-height: inherit;
float: none;
margin: 0;
font-weight: inherit;
opacity: 1;
}
/* Prezzo: armonia col nome, tabular nums */
.dish-price {
font-size: 1.06rem;
white-space: nowrap;
font-weight: 600;
}
/* Descrizione: 0.84rem con line-height generoso per scroll a pollice */
.dish-desc {
font-size: .84rem;
line-height: 1.48;
margin-bottom: .18rem;
color: rgba(30, 30, 30, 0.74);
}
.dish-desc-en { display: none; }
/* Allergeni: 24px visual + 44×44 tap via ::before */
.allergens {
gap: .4rem;
padding-top: .45rem;
}
.allergen {
min-width: 24px;
min-height: 24px;
width: 24px;
height: 24px;
font-size: .72rem;
font-weight: 700;
}
.allergen::before { inset: -10px; }
/* ─── FILTRI PILLS — horizontal scroll con snap (iOS-style) ─── */
.filters {
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
scroll-snap-type: x proximity;
scroll-padding-left: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
padding: .25rem 1rem .25rem 1rem;
margin: 0 -1rem 1.1rem;
gap: .45rem;
}
.filters::-webkit-scrollbar { display: none; }
.filter-btn {
flex: 0 0 auto;
scroll-snap-align: start;
font-size: .78rem;
padding: .52rem 1.05rem .55rem;
letter-spacing: .03em;
}
/* ─── DECORAZIONI MOBILE ─── */
/* TOP-right decoration NASCOSTA su mobile — copriva titolo/descrizione */
#menu-snackbar::before,
#menu-ristorante::before,
#menu-spiaggia::before {
display: none;
}
/* BOTTOM-left decoration: leggermente più presente per compensare */
#menu-snackbar::after,
#menu-ristorante::after,
#menu-spiaggia::after {
width: 200px;
height: 260px;
left: -30px;
bottom: 2rem;
opacity: .38;
background-size: contain;
}
/* Beach club ::after stacked: riadatta size in mobile */
#menu-spiaggia::after {
background-size: 150px auto, 135px auto;
}
/* ───────────────────────────────────────
SHARED — LEGENDA ALLERGENI
─────────────────────────────────────── */
.allergens-legend {
padding: .85rem 1rem;
margin-top: 1.25rem;
}
.allergens-legend-grid {
grid-template-columns: repeat(2, 1fr);
gap: .3rem .6rem;
font-size: .8rem;
}
.allergens-legend-grid b {
width: 22px;
height: 22px;
font-size: .72rem;
}
/* ───────────────────────────────────────
SHARED — CARD VINO (wine-card)
─────────────────────────────────────── */
/* Wine list: 1 colonna su mobile */
.wine-list {
grid-template-columns: 1fr !important;
}
/* wine-card: mantieni layout orizzontale ma più compatto */
.wine-card {
grid-template-rows: 120px !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
}
.wine-photo {
height: 120px !important;
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
}
.wine-photo img {
max-width: 80px !important;
max-height: 120px !important;
}
.wine-name {
font-size: .95rem;
}
.wine-body {
padding: .6rem .8rem;
}
/* ───────────────────────────────────────
SHARED — FOOTER
─────────────────────────────────────── */
/* Footer: 1 colonna, gap ridotto */
.footer-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
padding-bottom: 1.25rem;
}
/* Footer col links: target 44px, font leggibile */
.footer-col a,
.footer-col li {
font-size: .9rem;
min-height: 36px;
display: flex;
align-items: center;
line-height: 1.4;
}
/* Footer col list: gap più generoso per touch */
.footer-col ul {
gap: .35rem;
}
.footer-col h5 {
font-size: .78rem;
margin-bottom: .6rem;
}
/* Footer logo: ridotto su mobile */
.footer-logo-img {
height: 52px;
}
/* Footer bottom: mantieni testo centrato */
.footer-bottom {
font-size: .8rem;
}
.footer-legal a {
min-height: 36px;
display: inline-flex;
align-items: center;
}
/* ───────────────────────────────────────
SHARED — CTA STRIP
─────────────────────────────────────── */
.cta-strip {
padding: 1.5rem 0;
}
.cta-strip-inner h3 {
font-size: 1.4rem;
margin-bottom: .3rem;
}
.cta-strip-inner p {
font-size: .92rem;
line-height: 1.5;
margin-bottom: .8rem;
}
.cta-strip .cta-row {
flex-direction: column;
align-items: stretch;
gap: .55rem;
margin-top: .6rem;
}
/* ───────────────────────────────────────
HOME — HERO PRINCIPALE
─────────────────────────────────────── */
/* Hero: riduce altezza minima — non occupare tutto lo schermo */
.hero {
min-height: 75svh;
min-height: 75vh;
}
/* Hero content: padding verticale ridotto */
.hero-content {
padding: 3.5rem 1rem 2.5rem;
}
/* Hero title: max 2.4rem su 390px — CRITICO anti-overflow */
.hero-title {
font-size: clamp(1.9rem, 8vw, 2.4rem);
line-height: 1.1;
margin: .7rem 0 .6rem;
letter-spacing: -.01em;
}
/* Eyebrow hero: lettering ridotto */
.hero-content .eyebrow {
font-size: .65rem;
letter-spacing: .2em;
}
/* Subtitle hero: compatto */
.hero-sub {
font-size: 1rem;
margin-bottom: 1rem;
}
/* Copy hero: nascosta su mobile per non sovraccaricare */
.hero-copy {
font-size: .9rem;
line-height: 1.5;
margin-bottom: 1.2rem;
/* Limita a 3 righe su mobile */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ───────────────────────────────────────
HOME — BENTO ESPERIENZE
─────────────────────────────────────── */
/* Bento: stack verticale ottimizzato su mobile */
.bento-exp {
gap: .6rem;
}
/* Hero bex: altezza 4:3 su mobile, ben proporzionata */
.bex-hero {
aspect-ratio: 4 / 3;
min-height: unset;
}
/* Mini bex: più compatti, aspetto 16:10 */
.bex-mini {
aspect-ratio: 16 / 9;
min-height: unset;
}
/* Contenuto bex: padding ridotto */
.bex-content {
padding: 1rem 1.1rem 1.2rem;
gap: .25rem;
}
.bex-mini .bex-content {
padding: .7rem .9rem .85rem;
}
/* Titolo bex hero: ridotto per mobile */
.bex-hero .bex-title {
font-size: clamp(1.2rem, 5vw, 1.6rem);
line-height: 1.15;
margin: .1rem 0 .25rem;
}
/* Titolo bex mini */
.bex-mini .bex-title {
font-size: clamp(.95rem, 4vw, 1.15rem);
margin: .1rem 0 .2rem;
}
/* Numero romano: ridotto su mobile */
.bex-roman {
font-size: 2rem;
top: .75rem;
right: .9rem;
}
.bex-mini .bex-roman {
font-size: 1.4rem;
top: .5rem;
right: .7rem;
}
/* Descrizione bex: nascosta sui mini (troppo testo su mobile) */
.bex-desc {
display: none;
}
/* CTA bex: testo ridotto */
.bex-cta {
font-size: .82rem;
}
.bex-hero .bex-cta {
font-size: .88rem;
}
/* ───────────────────────────────────────
HOME — SEZIONE INTRO (testo + visual)
─────────────────────────────────────── */
/* Intro grid: stack verticale */
.intro-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.intro-text h2 {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: .75rem;
}
.intro-text p {
font-size: .95rem;
}
/* Visual intro: aspetto più basso su mobile */
.intro-visual {
aspect-ratio: 16 / 9;
max-height: 220px;
}
/* CTA row intro: stack verticale */
.intro-grid .cta-row {
flex-direction: column;
gap: .55rem;
justify-content: flex-start;
margin-top: 1rem;
}
.intro-grid .cta-row .btn {
width: 100%;
}
/* ───────────────────────────────────────
HOME — GALLERY
─────────────────────────────────────── */
/* Gallery: 2 colonne su mobile (non 3) */
.gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .4rem;
}
/* Gallery item: aspetto 1:1 mantiene la quadratura */
/* Caption gallery: font ridotto */
.gallery-item figcaption {
font-size: .85rem;
padding: .4rem .6rem;
}
/* ───────────────────────────────────────
HOME — CONTATTI
─────────────────────────────────────── */
/* Contact grid: 2 colonne su mobile — più compatto di 1×6 */
.contact-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .75rem;
}
.contact-card {
padding: 1rem .85rem;
}
/* Contact card h4: padding-top ridotto */
.contact-card > h4 {
padding-top: .9rem;
font-size: 1rem;
}
.contact-card p {
font-size: .88rem;
margin-bottom: .45rem;
}
/* Contact link: target 44px */
.contact-link {
min-height: 36px;
display: inline-flex;
align-items: center;
font-size: .82rem;
padding: .4rem .8rem;
}
/* Map placeholder: padding ridotto */
.map-placeholder {
padding: 1.4rem 1rem;
font-size: 1rem;
gap: .75rem;
}
/* ───────────────────────────────────────
HOME — WHY GRID / CARD FEATURE
─────────────────────────────────────── */
/* Why grid: 2 colonne su mobile (abbastanza per 4 card) */
.why-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .75rem;
margin-top: 1rem;
}
.why-card {
padding: 1rem .85rem;
}
.why-card > h4 {
font-size: 1rem;
padding-top: 1rem;
margin-bottom: .4rem;
}
.why-card p {
font-size: .85rem;
}
/* ───────────────────────────────────────
RISTORANTE — MINI HERO
─────────────────────────────────────── */
/* Page hero: ridotto in altezza per arrivare prima al menu su mobile */
.page-hero {
min-height: 240px;
padding: calc(var(--header-h) + .75rem) 0 1.5rem;
}
/* Overlay leggermente più scuro su mobile per leggibilità al sole */
.page-hero-overlay {
background: linear-gradient(180deg, rgba(11,61,74,0.45) 0%, rgba(11,61,74,0.65) 100%);
}
/* H1 pagine secondarie: max 2.2rem su 390px */
.page-hero h1 {
font-size: clamp(1.5rem, 6.5vw, 2.2rem);
margin: .25rem 0 .5rem;
line-height: 1.1;
}
.page-hero-sub {
font-size: .9rem;
line-height: 1.5;
margin: 0 auto;
}
.breadcrumb {
font-size: .72rem;
margin-bottom: .5rem;
}
/* CTA group nel mini hero: stack verticale */
.hero-cta-group {
flex-direction: column;
align-items: stretch;
gap: .55rem;
margin-top: 1rem;
width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.hero-cta-group .btn-jump-menu {
width: 100%;
justify-content: center;
min-height: 44px;
}
/* ───────────────────────────────────────
RISTORANTE — SWITCH PRANZO/CENA
─────────────────────────────────────── */
/* Switch: full width, compatto, layout pill affiancato */
.restaurant-service-switch {
max-width: 100%;
gap: .5rem;
padding: .4rem;
margin-bottom: 1.25rem;
}
.service-btn {
padding: .75rem .5rem;
gap: .1rem;
}
/* Label principale switch: ridotta per non strabordare */
.service-btn-label {
font-size: clamp(1.1rem, 5vw, 1.4rem);
}
.service-btn-eyebrow {
font-size: .6rem;
letter-spacing: .16em;
}
.service-btn-hours {
font-size: .72rem;
}
.service-btn-note {
font-size: .66rem;
}
/* Cover info: compatto */
.cover-info {
font-size: .82rem;
margin: -.4rem 0 1rem;
}
/* ───────────────────────────────────────
RISTORANTE — INTRO + TAG BLOCK
─────────────────────────────────────── */
.restaurant-intro {
font-size: .95rem;
margin-bottom: 1.25rem;
}
.tag-block {
padding: 1rem;
margin-top: 1.25rem;
}
.tag-title {
font-size: 1rem;
margin-bottom: .6rem;
}
.chip-list li {
font-size: .78rem;
padding: .3rem .65rem;
}
/* ───────────────────────────────────────
RISTORANTE / BEACH — BENTO SHOWCASE
─────────────────────────────────────── */
/* Bento showcase ristorante: stack verticale 1 colonna su mobile */
.bento-grid {
grid-template-columns: 1fr !important;
gap: .5rem;
}
/* Tutte le celle bento showcase: aspetto 4:3 */
.bento-grid .gallery-item,
.bento-restaurant .bento-a,
.bento-restaurant .bento-b,
.bento-restaurant .bento-c,
.bento-restaurant .bento-d,
.bento-restaurant .bento-e {
aspect-ratio: 4 / 3 !important;
}
/* Bento snack 3 foto: mostra tutte in colonna */
.bento-snack .bento-a,
.bento-snack .bento-b,
.bento-snack .bento-c {
aspect-ratio: 16 / 9 !important;
}
/* Bento mood (beach): 2 colonne su mobile — più compatto di 1 col */
.bento-mood {
grid-template-columns: repeat(2, 1fr) !important;
gap: .4rem;
}
/* Nasconde bento-f e successivi che su desktop erano nascosti */
.bento-restaurant .bento-f {
display: none;
}
/* Bento mood: mostra solo le prime 6 in mobile (prima 4 + 2) */
.bento-mood .bento-g,
.bento-mood .bento-h {
display: none;
}
/* Assicura che le celle mood abbiano aspect-ratio uniforme */
.bento-mood .gallery-item {
aspect-ratio: 1 / 1 !important;
}
/* ───────────────────────────────────────
BEACH CLUB — PREZZARIO LIDO
─────────────────────────────────────── */
/* Pricing grid: 1 colonna piena su mobile */
.pricing-grid {
grid-template-columns: 1fr !important;
gap: 1rem;
}
/* Season card: featured non scala su mobile (no spazio) */
.season-card.is-featured {
transform: none !important;
}
.season-card.is-featured:hover {
transform: translateY(-4px) !important;
}
/* Season foto: aspetto ridotto su mobile */
.season-photo {
aspect-ratio: 21 / 9;
}
/* Season tariff: compatto */
.season-tariff {
padding: .65rem .85rem;
}
.season-tariff-day {
font-size: .88rem;
}
.season-tariff-price {
font-size: 1.2rem;
}
.season-title {
font-size: 1.25rem;
}
/* Pricing notes: compatto */
.pricing-notes {
padding: 1rem;
}
.pricing-notes ul li {
font-size: .88rem;
}
/* Pricing intro banner */
.pricing-intro {
font-size: .88rem;
padding: .85rem 1rem;
}
/* ───────────────────────────────────────
BEACH CLUB — GALLERY LIDO
─────────────────────────────────────── */
/* Lido grid: 2 colonne su mobile */
.lido-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .4rem;
}
.lido-item figcaption {
font-size: .82rem;
padding: .5rem .75rem;
}
/* ───────────────────────────────────────
RISTORANTE — WINE MODAL
─────────────────────────────────────── */
/* Modal vino: full screen su mobile, scroll interno */
.wine-modal {
padding: 0;
align-items: flex-end; /* sheet dal basso — UX mobile nativa */
}
/* Card modal: bordi arrotondati solo in alto, altezza max 92dvh */
.wine-modal__card {
border-radius: var(--r-lg) var(--r-lg) 0 0;
max-height: 92dvh;
transform: translateY(30px) scale(1); /* solo translateY su mobile */
}
.wine-modal[aria-hidden="false"] .wine-modal__card {
transform: translateY(0);
}
/* Inner modal: 1 colonna su mobile */
.wine-modal__inner {
grid-template-columns: 1fr;
}
/* Foto bottiglia nel modal: ridotta su mobile */
.wine-modal__photo {
padding: 1rem;
max-height: 180px;
overflow: hidden;
}
.wine-modal__photo img {
max-height: 160px;
}
/* Body modal: padding ridotto */
.wine-modal__body {
padding: 1rem 1.25rem 1.4rem;
gap: .9rem;
}
/* Titolo vino nel modal: ridotto */
.wine-modal__title {
font-size: 1.4rem;
line-height: 1.15;
}
/* Grid chip info (temperatura / occasione / prezzo): 3 in riga compatta */
.wine-modal__grid {
grid-template-columns: 1fr 1fr 1fr;
gap: .45rem;
}
.wine-modal__chip {
padding: .5rem .6rem;
}
.wine-modal__chip-label {
font-size: .6rem;
}
.wine-modal__chip-val {
font-size: .88rem;
}
/* Close button modal: 44×44 */
.wine-modal__close {
width: 44px;
height: 44px;
top: .65rem;
right: .65rem;
}
/* Note degustazione: 1 colonna piena su mobile */
.wine-modal__notes > div {
grid-template-columns: 70px 1fr;
}
/* Pairings: testo ridotto */
.wine-modal__pairings li {
font-size: .8rem;
padding: .35rem .65rem;
}
/* ───────────────────────────────────────
BEACH CLUB — MENU SPIAGGIA (beach items)
─────────────────────────────────────── */
/* Beach menu: 1 colonna su mobile */
.beach-menu {
grid-template-columns: 1fr !important;
}
.beach-group {
padding: 1rem;
}
.beach-group h3 {
font-size: 1.25rem;
margin-bottom: .75rem;
}
.beach-item-name {
font-size: .92rem;
}
.beach-item-price {
font-size: .98rem;
}
/* ───────────────────────────────────────
SNACK BAR — INFO INTRO
─────────────────────────────────────── */
.info-intro {
font-size: .95rem;
margin-bottom: 1.25rem;
}
/* ───────────────────────────────────────
LIGHTBOX — Navigazione frecce mobile
─────────────────────────────────────── */
/* Frecce lightbox: già gestite a 600px ma rinforziamo su 390px */
.lb-prev,
.lb-next {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb-close {
top: 8px;
right: 8px;
width: 44px;
height: 44px;
}
/* ───────────────────────────────────────
REVEAL ANIMATION — riduzione su mobile
(performance: evita jank su GPU limitata)
─────────────────────────────────────── */
.reveal {
transform: translateY(12px); /* ridotto da 18px */
transition: opacity .5s ease, transform .5s ease;
}
/* ───────────────────────────────────────
COOKIE BANNER — ottimizzato per mobile
─────────────────────────────────────── */
.cookie-banner {
padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom, 0px));
}
.cookie-banner-inner {
gap: .75rem;
}
.cookie-text h3 {
font-size: 1.05rem;
margin-bottom: .3rem;
}
.cookie-text p {
font-size: .84rem;
line-height: 1.5;
}
.cookie-actions {
gap: .5rem;
}
.cookie-actions .btn {
min-width: 0;
flex: 1;
font-size: .85rem;
padding: .65rem .8rem;
min-height: 44px;
}
} /* end @media (max-width: 700px) */
/* ============================================================
MOBILE FINE-TUNING — EXTRA STRETTO (sotto 390px)
Target: iPhone SE (375px), Android budget (360px)
Solo override critici per non rompere layout a 360px
============================================================ */
@media (max-width: 389px) {
/* Hero title: ancora più contenuto su 360px */
.hero-title {
font-size: clamp(1.7rem, 9vw, 2rem);
}
/* Page hero h1 su schermo molto stretto */
.page-hero h1 {
font-size: clamp(1.35rem, 8vw, 1.75rem);
}
/* Filtri: padding ridotto ulteriormente */
.filters {
gap: .35rem;
padding-left: .75rem;
margin-left: -.75rem;
padding-right: .75rem;
margin-right: -.75rem;
}
.filter-btn {
padding: .45rem .85rem;
font-size: .78rem;
}
/* Floating CTA: testo prenota ridotto */
.fcta-book {
padding: 0 .85rem;
font-size: .82rem;
}
/* Contact grid: 1 colonna su 360px (2 colonne troppo strette) */
.contact-grid {
grid-template-columns: 1fr !important;
}
/* Why grid: 1 colonna su 360px */
.why-grid {
grid-template-columns: 1fr !important;
}
/* Wine card: margine foto ancora ridotto */
.wine-photo {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
}
.wine-photo img {
max-width: 72px !important;
}
/* Wine modal grid chip: 2 colonne su 360px invece di 3 */
.wine-modal__grid {
grid-template-columns: 1fr 1fr;
}
/* Service switch: etichette ancora più compatte */
.service-btn-label {
font-size: clamp(.95rem, 5vw, 1.2rem);
}
}
/* ============================================================================
MOBILE FINE-TUNING MATRIMONI (sotto 700px)
Priority: iPhone 13/14/15 (390px) — Android medio (360-414px)
Questa sezione aggiunge SOLO le regole specifiche per matrimoni.html
che non sono coperte dalla sezione "MOBILE FINE-TUNING" globale sopra.
============================================================================ */
@media (max-width: 700px) {
/* ─────────────────────────────────────────────────────────────────────
1. WEDDING HERO — h1 ≤ 2.2rem, spacing compatto, CTA full-width
───────────────────────────────────────────────────────────────────── */
.wedding-hero {
/* Usa 100svh per tagliare fuori la barra URL di Safari iOS */
min-height: 100svh;
/* Centro verticale anziché flex-end: il testo non si trova troppo in basso */
align-items: center;
}
.wedding-hero-inner {
padding-top: calc(var(--header-h) + 1.4rem);
padding-bottom: 4.5rem;
padding-left: 1.1rem;
padding-right: 1.1rem;
}
/* Hero h1 cinematic:
- clamp floor 1.75rem (< 2.2rem prescritto nel brief)
- 3 righe su 390px sono VOLUTE: look cinematografico
- nessun overflow orizzontale garantito */
.wedding-hero h1 {
font-size: clamp(1.75rem, 9vw, 2.2rem);
line-height: 1.1;
margin-bottom: .85rem;
}
.wedding-hero-eyebrow {
font-size: .66rem;
letter-spacing: .2em;
margin-bottom: .85rem;
}
.wedding-hero-eyebrow::before,
.wedding-hero-eyebrow::after {
width: 18px;
margin: 0 .45rem;
}
.wedding-hero-sub {
font-size: .97rem;
line-height: 1.55;
margin-bottom: 1.6rem;
padding: 0 .2rem;
}
/* CTA hero: stack verticale, full-width, touch target ≥ 48px */
.wedding-hero-cta {
flex-direction: column;
align-items: center;
gap: .7rem;
width: 100%;
}
.wedding-hero-cta .btn {
width: 100%;
max-width: 300px;
min-height: 50px;
font-size: .93rem;
justify-content: center;
}
/* Breadcrumb */
.wedding-breadcrumb {
font-size: .64rem;
letter-spacing: .12em;
margin-bottom: .8rem;
}
/* Scroll hint — linea più corta */
.wedding-scroll-hint {
bottom: 1rem;
}
.wedding-scroll-hint-line {
height: 26px;
}
/* ─────────────────────────────────────────────────────────────────────
2. WEDDING MANIFESTO — blockquote leggibile su schermo stretto
───────────────────────────────────────────────────────────────────── */
.wedding-manifesto {
padding: 2.8rem 0;
}
.wedding-manifesto-inner {
padding: 0 1.15rem;
}
.manifesto-rule {
margin-bottom: 1.4rem;
}
/* La blockquote è lunga — riduciamo il font-size floor per evitare
overflow e ottenere una lettura fluida in 6-7 righe su 390px */
.manifesto-quote {
font-size: clamp(1.1rem, 4.8vw, 1.35rem);
line-height: 1.68;
margin-bottom: 1.2rem;
}
.manifesto-caption {
font-size: .7rem;
letter-spacing: .18em;
}
/* ─────────────────────────────────────────────────────────────────────
3. BENTO GALLERY CINEMATIC — 1 colonna verticale
Le 5 tile video passano da 2-col (mobile default) a 1-col.
Hero tile: widescreen 16:9 per impatto massimo.
Tile secondarie: compatte 16:9 (non 16:10 del default).
NB: struttura HTML bento-grid NON modificata.
───────────────────────────────────────────────────────────────────── */
.wedding-bento {
padding: 2.2rem 0;
}
.bento-label {
margin-bottom: 1.2rem;
}
.bento-label h2 {
font-size: clamp(1.4rem, 6vw, 1.8rem);
}
/* Stack verticale: 1 colonna, nessuna griglia 2-col */
.wedding-bento-grid {
grid-template-columns: 1fr !important;
gap: .45rem;
}
/* Hero tile: 16:9 per uno "screenshot cinematografico" orizzontale */
.wb-hero {
aspect-ratio: 16 / 9;
min-height: 0;
}
/* Tile secondarie: 16:9 compatte */
.wb-a,
.wb-b,
.wb-c,
.wb-d {
aspect-ratio: 16 / 9;
min-height: 0;
}
/* Rimuove min-height globale delle .wb su mobile */
.wb {
min-height: 0;
}
/* Caption compatta */
.wb-caption {
padding: .6rem .75rem;
}
.wb-caption-title {
font-size: .9rem;
}
.wb-hero .wb-caption-title {
font-size: clamp(.95rem, 4vw, 1.15rem);
}
/* ─────────────────────────────────────────────────────────────────────
3b. IL FILM DEL GIORNO — player compatto
───────────────────────────────────────────────────────────────────── */
.wedding-film {
padding: 2.8rem 0;
}
.wedding-film-inner {
padding: 0 1.1rem;
}
.wedding-film-eyebrow {
font-size: .68rem;
letter-spacing: .22em;
}
.wedding-film-eyebrow::before,
.wedding-film-eyebrow::after {
width: 20px;
margin: 0 .5rem;
}
.wedding-film-title {
/* Da clamp(2rem, 5vw, 3.4rem) → riscaliamo il floor per 390px */
font-size: clamp(1.45rem, 7vw, 2rem);
margin-bottom: .55rem;
}
.wedding-film-sub {
font-size: .95rem;
line-height: 1.55;
margin-bottom: 1.6rem;
padding: 0 .15rem;
}
/* Player video: mantiene aspect-ratio 16:9, aggiunge rounded corners ridotti */
.wedding-film-player {
border-radius: var(--r-md);
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.wedding-film-credit {
font-size: .66rem;
letter-spacing: .16em;
margin-top: 1.2rem;
}
/* ─────────────────────────────────────────────────────────────────────
3c. GALLERIA MASONRY — progressive disclosure + 2 colonne
CSS-only: #wm-toggle checkbox nascosto controlla .wm-extra.
10 tile visibili di default (2 col × 5 righe), 10 extra
nascoste e svelate dal pulsante .wm-show-more.
───────────────────────────────────────────────────────────────────── */
.wedding-gallery {
padding: 2.2rem 0 2.8rem;
}
.wedding-gallery .section-head {
margin-bottom: 0;
}
.wedding-gallery .section-head h2 {
font-size: clamp(1.4rem, 6vw, 1.8rem);
}
.wedding-gallery .section-sub {
font-size: .9rem;
line-height: 1.55;
}
/* 2 colonne quadrate → 10 tile = 5 righe, molto più corto di 20 righe 1-col */
.wedding-masonry {
grid-template-columns: repeat(2, 1fr);
gap: .45rem;
margin-top: 1.6rem;
}
/* Tile quadrate: più compatte, mantengono rigore visivo */
.wm-item {
aspect-ratio: 1 / 1;
}
/* Input checkbox toggle: completamente nascosto */
.wm-toggle-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
appearance: none;
-webkit-appearance: none;
pointer-events: none;
}
/* Tile extra (11-20): nascoste di default su mobile */
.wm-extra {
display: none;
}
/* Quando toggle è checked: mostra le extra */
.wm-toggle-input:checked ~ .wedding-masonry .wm-extra {
display: block;
}
/* Pulsante "Mostra altri" — design brand-aligned */
.wm-show-more {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin: 1.2rem auto 0;
padding: .85rem 2rem;
min-height: 50px;
border-radius: var(--r-pill);
border: 1px solid var(--c-gold);
background: rgba(200,169,106,0.07);
color: var(--c-deep);
font-family: var(--ff-body);
font-size: .88rem;
font-weight: 600;
letter-spacing: .05em;
cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.wm-show-more:hover,
.wm-show-more:active {
background: var(--c-gold);
color: var(--c-deep);
border-color: var(--c-gold);
}
/* Testo "Mostra altri 10 scatti" visibile di default */
.wm-show-more .wm-show-more-label { display: inline; }
/* Testo "Mostra meno" nascosto di default */
.wm-show-more .wm-show-more-hide { display: none; }
/* Dopo il check: inverti le label */
.wm-toggle-input:checked ~ .wm-show-more .wm-show-more-label { display: none; }
.wm-toggle-input:checked ~ .wm-show-more .wm-show-more-hide { display: inline; }
/* ─────────────────────────────────────────────────────────────────────
4. ESPERIENZE (4 card portrait) — griglia 2×2
4 card portrait (aspect 3:4) in colonna singola = troppo lungo.
Su mobile: 2 colonne × 2 righe con aspect 2:3 più compatto.
───────────────────────────────────────────────────────────────────── */
.wedding-esperienze {
padding: 2.2rem 0 2.8rem;
}
.wedding-esperienze .section-head h2 {
font-size: clamp(1.35rem, 5.5vw, 1.75rem);
}
.wedding-exp-grid {
/* 2 colonne: 2 card per riga, 2 righe totali */
grid-template-columns: repeat(2, 1fr);
gap: .55rem;
margin-top: 1.2rem;
}
/* Aspect ratio ridotto: da 3:4 (troppo alto su mobile) a 2:3 */
.event-card-photo {
aspect-ratio: 2 / 3;
border-radius: var(--r-md);
}
.event-card-photo-body {
padding: .9rem .85rem 1rem;
}
.event-card-photo-rule {
width: 26px;
margin-bottom: .6rem;
}
.event-card-photo-body h4 {
font-size: 1rem;
margin-bottom: .3rem;
}
.event-card-photo-body p {
font-size: .78rem;
line-height: 1.45;
}
.events-note-block {
font-size: .78rem;
margin-top: .9rem;
padding: .5rem .85rem;
}
/* ─────────────────────────────────────────────────────────────────────
5. STATISTICHE — numeri compressi, sezione più breve
───────────────────────────────────────────────────────────────────── */
.wedding-stats {
padding: 2.2rem 0;
}
.wedding-stats .section-head h2 {
font-size: clamp(1.35rem, 5.5vw, 1.75rem);
}
.wedding-stats-grid {
/* Mantiene 2×2 ma con gap ridotto */
gap: 1.4rem .8rem;
margin-top: 1.2rem;
}
/* Stat numbers: da clamp(2.8rem, 7vw, 4.5rem) ridotto il floor
per evitare che "360°" trabocchi su schermi da 360px */
.stat-number {
font-size: clamp(2rem, 9.5vw, 2.8rem);
margin-bottom: .25rem;
}
.stat-label {
font-size: .72rem;
letter-spacing: .14em;
}
.stat-note {
font-size: .82rem;
margin-top: .15rem;
}
.stat-item {
padding-top: 1rem;
}
/* ─────────────────────────────────────────────────────────────────────
6. WEDDING MOOD — sunset full-bleed compatto
───────────────────────────────────────────────────────────────────── */
.wedding-mood {
/* Da 520px a 300px — mantiene l'impatto senza sprecare spazio */
min-height: 300px;
}
.wedding-mood-inner {
padding: 2.2rem 1.15rem;
}
/* Claim: da clamp(1.8rem, 5vw, 3.5rem) → riduce il floor */
.wedding-mood-claim {
font-size: clamp(1.3rem, 7vw, 1.85rem);
line-height: 1.3;
margin-bottom: .9rem;
}
.wedding-mood-sub {
font-size: .78rem;
letter-spacing: .1em;
}
/* ─────────────────────────────────────────────────────────────────────
7. FORM SECTION — glassmorphism + video fuochi ottimizzato
───────────────────────────────────────────────────────────────────── */
.wedding-form-section {
padding: 2.8rem 0 3.5rem;
}
/* Video bg fuochi: filtro alleggerito su mobile
(decorativo → risparmia GPU; preload="metadata" già impostato in HTML) */
.wedding-form-video-bg video {
filter: saturate(0.85) brightness(0.72);
object-position: center center;
}
/* Velo più scuro per garantire leggibilità form su qualsiasi foto */
.wedding-form-veil {
background:
radial-gradient(ellipse at center, rgba(11,61,74,0.68) 0%, rgba(11,61,74,0.94) 80%),
linear-gradient(180deg, rgba(11,61,74,0.62) 0%, rgba(11,61,74,0.90) 100%);
}
/* Section head sopra il form */
.wedding-form-section .section-head {
margin-bottom: 1.4rem;
padding: 0 .25rem;
}
.wedding-form-section .section-head h2 {
font-size: clamp(1.4rem, 7vw, 1.9rem);
}
/* Form card: padding ridotto, bordi ridotti, niente margini laterali eccessivi */
.wedding-form-wrap {
padding: 1.5rem 1rem 1.8rem;
border-radius: var(--r-md);
margin-left: .25rem;
margin-right: .25rem;
}
.wedding-form-head {
margin-bottom: 1.2rem;
padding-bottom: 1rem;
}
.wedding-form-head h3 {
font-size: clamp(1.2rem, 5.5vw, 1.55rem);
margin-bottom: .4rem;
}
.wedding-form-head p {
font-size: .9rem;
}
/* Form grid: 1 colonna */
.event-form .form-grid {
grid-template-columns: 1fr;
gap: .75rem;
}
/* Inputs: ≥ 48px touch target, font 16px CRITICO anti-zoom iOS */
.event-form .form-row input,
.event-form .form-row select {
min-height: 50px;
font-size: 16px;
padding: .85rem 1rem;
}
.event-form .form-row textarea {
min-height: 110px;
font-size: 16px;
padding: .85rem 1rem;
resize: vertical;
}
/* Checkbox: touch target esteso */
.event-form .checkbox-row {
gap: .7rem;
font-size: .86rem;
line-height: 1.5;
}
.event-form .checkbox-row input[type="checkbox"],
.event-form .form-row-consent input[type="checkbox"] {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: .08rem;
accent-color: var(--c-gold);
}
/* Azioni form: stack verticale full-width */
.event-form .form-actions {
flex-direction: column;
gap: .7rem;
margin-top: .5rem;
}
.event-form .form-actions .btn {
width: 100%;
min-height: 52px;
font-size: .95rem;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────────────────
8. CTA PRE-FOOTER — stack verticale, touch target ≥ 50px
───────────────────────────────────────────────────────────────────── */
.wedding-prefooter {
padding: 2.2rem 0 2.8rem;
}
.wedding-prefooter h3 {
font-size: clamp(1.25rem, 6vw, 1.65rem);
margin-bottom: .4rem;
}
.wedding-prefooter p {
font-size: .9rem;
margin-bottom: 1.2rem;
}
.wedding-prefooter-row {
flex-direction: column;
align-items: center;
gap: .65rem;
padding: 0 1rem;
}
.wedding-prefooter-row .btn {
width: 100%;
max-width: 340px;
min-height: 52px;
font-size: .93rem;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────────────────
9. FLOATING CTA — safe area iOS notch / Dynamic Island
───────────────────────────────────────────────────────────────────── */
/* Già presente nella sezione globale; rinforza per safe-area su matrimoni */
.floating-cta {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
} /* fine @media (max-width: 700px) — MATRIMONI FINE-TUNING */
/* ─── Viewport ≥ 701px: ripristina elementi visibili solo su mobile ─── */
@media (min-width: 701px) {
/* Nasconde l'input toggle e il pulsante "Mostra altri" — non servono
su tablet e desktop dove tutte le 20 tile sono sempre visibili */
.wm-toggle-input,
.wm-show-more {
display: none !important;
}
/* Tutte le tile extra visibili su viewport largo */
.wm-extra {
display: block !important;
}
/* Tile tornano ad aspect-ratio 4:3 originale */
.wm-item {
aspect-ratio: 4 / 3;
}
}
/* ─── Extra stretto: 360px — override critici aggiuntivi per matrimoni ─── */
@media (max-width: 374px) {
/* H1 hero ancora più piccolo su 360px */
.wedding-hero h1 {
font-size: clamp(1.6rem, 9.5vw, 1.9rem);
}
/* Stat number: garantisce che "360°" non strabocchi */
.stat-number {
font-size: clamp(1.8rem, 10vw, 2.4rem);
}
/* Esperienze: 2 colonne rimangono ma il testo si comprime ancora */
.event-card-photo-body h4 {
font-size: .92rem;
}
.event-card-photo-body p {
font-size: .74rem;
}
/* Manifesto: ulteriore riduzione per 360px */
.manifesto-quote {
font-size: clamp(1.05rem, 4.8vw, 1.25rem);
}
/* Form: riduce ulteriormente il padding del wrapper */
.wedding-form-wrap {
padding: 1.2rem .85rem 1.5rem;
margin-left: 0;
margin-right: 0;
}
}
/* ============ END — MOBILE FINE-TUNING MATRIMONI ============ */
/* ============================ LANG SWITCH ============================ */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.12);
border-radius: var(--r-pill);
padding: 3px;
flex-shrink: 0;
}
/* Su header scrolled / pagine secondarie: sfondo adatto al tema chiaro */
.site-header.scrolled .lang-switch,
.page-sub .site-header .lang-switch {
background: rgba(11, 61, 74, 0.08);
}
.lang-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 11px;
border-radius: var(--r-pill);
font-family: var(--ff-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.8);
background: transparent;
border: none;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
line-height: 1;
min-height: 28px;
min-width: 32px;
}
.lang-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.18);
}
.lang-btn:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 2px;
}
.lang-btn.is-active {
background: var(--c-deep);
color: #fff;
}
/* Su header scrolled / pagine sub: colori adattati al fondo chiaro */
.site-header.scrolled .lang-btn,
.page-sub .site-header .lang-btn {
color: rgba(11, 61, 74, 0.65);
}
.site-header.scrolled .lang-btn:hover,
.page-sub .site-header .lang-btn:hover {
color: var(--c-deep);
background: rgba(11, 61, 74, 0.1);
}
.site-header.scrolled .lang-btn.is-active,
.page-sub .site-header .lang-btn.is-active {
background: var(--c-deep);
color: #fff;
}
/* Lang switch nel nav mobile */
.nav-mobile .lang-switch {
display: inline-flex;
background: rgba(11, 61, 74, 0.07);
margin-top: 0.5rem;
}
.nav-mobile .lang-btn {
color: rgba(11, 61, 74, 0.65);
/* touch target 44×44px su mobile */
min-height: 44px;
min-width: 44px;
font-size: 14px;
padding: 10px 14px;
}
.nav-mobile .lang-btn:hover {
color: var(--c-deep);
background: rgba(11, 61, 74, 0.12);
}
.nav-mobile .lang-btn.is-active {
background: var(--c-deep);
color: #fff;
}
/* Posizionamento nel header-inner: il componente sta subito a sinistra del
bottone hamburger / Prenota CTA — nessuna rottura del layout esistente */
@media (min-width: 700px) {
.lang-switch {
margin-left: auto;
}
/* Quando la nav desktop è visibile, il lang-switch va dopo la nav e prima del
btn-cta-header. Il margin-left auto è già applicato dal flex su header-inner. */
}
@media (max-width: 700px) {
.lang-switch {
/* Nel header mobile: piccolo, compatto */
background: rgba(255, 255, 255, 0.12);
}
.site-header.scrolled .lang-switch,
.page-sub .site-header .lang-switch {
background: rgba(11, 61, 74, 0.08);
}
.lang-btn {
min-height: 30px;
min-width: 34px;
font-size: 11px;
padding: 5px 8px;
}
}
/* ============ END LANG SWITCH ============ */
/* Avvertenza allergeni nei menu (Reg. UE 1169/2011) */
.menu-allergen-notice {
margin: 0 auto 1.5rem;
max-width: 720px;
padding: 0.875rem 1.125rem;
background: rgba(11, 61, 74, 0.04);
border-left: 3px solid var(--c-oro, #B59461);
border-radius: 0 6px 6px 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--c-mare-deep, #0B3D4A);
text-align: left;
}
@media (max-width: 700px) {
.menu-allergen-notice {
font-size: 0.8rem;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
}
}
/* ===== Pagina 404 ===== */
.section-404 {
background: linear-gradient(180deg, var(--bg-soft, #F4F0EA) 0%, #FFFFFF 100%);
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
padding: 4rem 0;
}
.section-404 .thanks-inner {
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.eyebrow-404 {
color: var(--c-oro, #B59461);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.75rem;
margin-bottom: 1rem;
}
.error-code {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(7rem, 18vw, 11rem);
line-height: 1;
font-weight: 600;
color: var(--c-mare-deep, #0B3D4A);
opacity: 0.18;
margin: 0.5rem 0 1.5rem;
user-select: none;
}
.section-404 h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 500;
color: var(--c-mare-deep, #0B3D4A);
margin-bottom: 1.25rem;
line-height: 1.15;
}
.section-404 .thanks-lead {
font-size: 1.05rem;
line-height: 1.6;
color: #555;
margin-bottom: 2rem;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.section-404 .thanks-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.section-404 .thanks-meta {
color: #777;
font-size: 0.9rem;
margin: 0.5rem 0;
}
.section-404 .thanks-meta a {
color: var(--c-mare-deep, #0B3D4A);
text-decoration: none;
font-weight: 500;
}
.section-404 .thanks-meta a:hover {
text-decoration: underline;
}
@media (max-width: 700px) {
.section-404 {
padding: 3rem 0 2rem;
min-height: calc(100vh - 150px);
}
.error-code {
font-size: 6rem;
margin: 0.25rem 0 1rem;
}
.section-404 .thanks-cta .btn {
flex: 1 1 100%;
min-height: 48px;
}
}
/* Heading hierarchy fixes — h3 nelle card mantiene look h4 originale (1.15rem) */
.contact-card h3, .bex-title { font-size: 1.15rem; }
.bex-hero h3.bex-title { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.bex-mini h3.bex-title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.why-card h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
/* Footer column titles — semanticamente h2, ma visivamente come piccolo titolo */
.footer-col-title {
font-family: var(--ff-display, 'Cormorant Garamond', serif);
font-size: .85rem;
font-weight: 600;
color: var(--c-gold-text, #7A5A2E);
text-transform: uppercase;
letter-spacing: .15em;
margin: 0 0 .8rem;
line-height: 1.3;
}
/* Footer legal info block — dati P.IVA / sede legale / PEC */
.footer-legal-info {
font-size: .72rem;
line-height: 1.55;
color: rgba(255,255,255,0.55);
margin: .6rem 0 0;
max-width: 100%;
}
.footer-legal-info a {
color: rgba(255,255,255,0.7);
text-decoration: none;
}
.footer-legal-info a:hover { color: #fff; text-decoration: underline; }
/* Su pagine con footer chiaro (privacy/cookie/grazie) */
.page-legal .footer-legal-info, .page-thanks .footer-legal-info { color: rgba(11,61,74,0.55); }
.page-legal .footer-legal-info a, .page-thanks .footer-legal-info a { color: rgba(11,61,74,0.7); }
@media (max-width: 700px) {
.footer-legal-info { font-size: .68rem; }
}
/* ============================================================
FAQ Accordion
============================================================ */
.section-faq {
background: var(--bg-soft, #F4F0EA);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.container-narrow {
max-width: 800px;
margin: 0 auto;
padding: 0 1.25rem;
}
.section-faq .section-head {
text-align: center;
margin-bottom: 2rem;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.faq-item {
background: #FFFFFF;
border-radius: 12px;
border: 1px solid rgba(11, 61, 74, 0.08);
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] {
border-color: var(--c-gold, #A8854A);
box-shadow: 0 4px 18px rgba(11, 61, 74, 0.06);
}
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.4rem;
font-family: var(--ff-display, 'Cormorant Garamond', serif);
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
font-weight: 600;
color: var(--c-deep, #0B3D4A);
cursor: pointer;
list-style: none;
user-select: none;
position: relative;
transition: color 0.2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
content: "";
width: 14px;
height: 14px;
border-right: 2px solid var(--c-gold-text, #7A5A2E);
border-bottom: 2px solid var(--c-gold-text, #7A5A2E);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item[open] .faq-q::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.faq-q:hover { color: var(--c-gold-text, #7A5A2E); }
.faq-q:focus-visible {
outline: 2px solid var(--c-gold, #A8854A);
outline-offset: -2px;
}
.faq-a {
padding: 0 1.4rem 1.2rem;
animation: faqFadeIn 0.35s ease;
}
.faq-a p {
margin: 0;
font-size: 0.95rem;
line-height: 1.65;
color: rgba(11, 61, 74, 0.78);
}
@keyframes faqFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
.faq-q { padding: 1rem 1.1rem; font-size: 1rem; }
.faq-a { padding: 0 1.1rem 1rem; }
.faq-a p { font-size: 0.9rem; }
}