/* ============================================================ WebCreator — DESIGN v2 (ui-ux-pro-max) — premium override layer. Loaded AFTER base.css + the per-category variant, so it only refines: spacing, elevation, type rhythm and component polish. It reuses the same class contract and the per-site accent (var(--accent), auto-extracted from the hero photo), so every one of the 18 categories gets the upgrade with zero structural/template change. Goal: calmer, more editorial, more professional — the look that converts. ============================================================ */ :root { /* PALETTE (ui-ux-pro-max "sage neutral + calm teal"): clean slate neutrals + a fresh teal accent — replaces the earthy black/brown that read poorly. The accent is forced (!important) over the per-photo extracted colour, which was often brown/dark for B&B photos. */ --ink: #0F172A; /* slate-900 text/headings (not brown) */ --bg: #F8FAFC; /* clean off-white (not cream) */ --surface: #FFFFFF; --muted: #64748B; /* slate */ --border: #E2E8F0; /* slate-200 */ --dark-panel: #0F172A; /* topbar/footer: clean slate, not brown-black */ /* accent comes per-CATEGORY from the builder (_V2_PALETTE) — a curated fresh colour per activity type (teal for B&B, rose for beauty, …), injected after this file, replacing the earthy per-photo accent. */ /* refined geometry — a touch less round reads more grown-up/editorial */ --radius: 18px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; /* softer, layered elevation (premium depth, not heavy drop-shadows) */ --shadow-xs: 0 1px 2px rgba(20,12,6,.05), 0 1px 3px rgba(20,12,6,.05); --shadow-sm: 0 2px 6px -2px rgba(20,12,6,.10), 0 6px 18px -8px rgba(20,12,6,.12); --shadow: 0 8px 24px -10px rgba(20,12,6,.18), 0 24px 60px -30px rgba(20,12,6,.30); --shadow-lg: 0 30px 80px -32px rgba(20,12,6,.42); --maxw: 1200px; /* Even lighter, airier hero scrim — photo stays bright, headline still legible. */ --hero-overlay: linear-gradient(100deg, rgba(20,14,9,.46) 0%, rgba(20,14,9,.12) 44%, transparent 72%), linear-gradient(0deg, rgba(20,14,9,.34) 0%, transparent 42%); } /* calmer body rhythm + crisper rendering */ body { line-height: 1.7; } h1, h2, h3 { letter-spacing: -.025em; } /* ---------- header: REAL liquid glass FLOATING OVER THE HERO ---------- The glass effect is only visible when there's a photo behind it. So the hero pulls UP behind the sticky header (negative margin). Only `.hero` pages get this — legal/accessibility have no `.hero`, so their header sits normally and nothing breaks. The frosted bar stays light enough for dark nav text to read over both the hero photo and (when scrolled) light content. */ .site-header { padding-block: 1rem; background: color-mix(in srgb, var(--surface) 68%, transparent); backdrop-filter: saturate(150%) blur(20px); -webkit-backdrop-filter: saturate(150%) blur(20px); border-bottom: 1px solid color-mix(in srgb, #fff 40%, transparent); box-shadow: 0 8px 28px -22px rgba(20,12,6,.4); } .brand { font-size: 1.25rem; } .main-nav a { font-weight: 600; } .hero { margin-top: -68px; } .hero--small { margin-top: -64px; } @media (max-width: 760px) { .hero { margin-top: -58px; } .hero--small { margin-top: -56px; } } /* ---------- hero: more editorial, restrained motion ---------- */ .hero { min-height: 100svh; } .hero::after { opacity: .42; } /* tone down the decorative glow */ .hero-inner { max-width: 1040px; padding: clamp(2rem, 6vw, 8rem); } .hero h1 { font-size: clamp(3rem, 8.5vw, 6rem); line-height: 1.02; letter-spacing: -.035em; } .hero .subtitle { font-size: clamp(1.15rem, 2.4vw, 1.55rem); max-width: 46ch; opacity: .95; line-height: 1.55; } .hero .eyebrow { letter-spacing: .24em; font-size: .76rem; padding: .5rem 1.05rem; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); } .hero-cta { gap: .9rem; margin-top: 1.6rem; } /* ---------- generous, editorial section rhythm ---------- */ .section { max-width: 1200px; padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1.2rem, 4vw, 2rem); } /* Gallery and FAQ share the page background, so their two stacked section paddings read as one oversized empty band. Tighten just that seam. */ #gallery:has(+ #faq) { padding-bottom: clamp(2rem, 4.5vw, 3.5rem); } #gallery + #faq { padding-top: clamp(2rem, 4.5vw, 3.5rem); } .section--alt > .section-inner { max-width: 1200px; } .section--alt::before { opacity: .55; } .section-title { font-size: clamp(2.1rem, 4.6vw, 3.1rem); letter-spacing: -.03em; } .section-title::after { width: 52px; height: 3px; margin-top: .85rem; } .lead { font-size: 1.12rem; line-height: 1.7; max-width: 66ch; } /* ---------- cards: clean, elevated, tactile ---------- */ .grid { gap: 1.8rem; margin-top: 2.8rem; } .card { padding: 2rem; border-radius: var(--radius-lg); border-color: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: var(--shadow-sm); } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow); } .card h3 { font-size: 1.3rem; letter-spacing: -.02em; } /* ---------- gallery: tighter, softer ---------- */ .gallery { gap: 1.1rem; margin-top: 2.8rem; } .gallery .media { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .gallery .media:hover { box-shadow: var(--shadow); } /* ---------- buttons: refined proportions (contrast handled by base) ---------- */ .btn { padding: 1rem 2.1rem; letter-spacing: -.01em; border-radius: var(--radius-pill); } /* ---------- map / forms / footer polish ---------- */ .map-wrap { border-radius: var(--radius-lg); box-shadow: var(--shadow); } .form-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 3rem); } .field input, .field textarea, .field select { border-radius: 12px; padding: .95rem 1.05rem; } .social-links a { box-shadow: var(--shadow-xs); } /* ---------- subtle, professional motion ---------- */ .card, .btn, .gallery .media, .social-links a { transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease, background .2s ease; } /* ---------- staggered card cascade (ui-ux-pro-max stagger-sequence) ---------- When a section reveals, its cards/grid items fade up one after another instead of all at once. Progressive: only with JS (html.js) so no-JS keeps them visible; disabled under reduced-motion. */ @media (prefers-reduced-motion: no-preference) { html.js .reveal .grid > *, html.js .reveal.in .grid > * { will-change: transform; } html.js .reveal.in .grid > * { animation: v2rise .6s cubic-bezier(.2,.7,.2,1) both; } html.js .reveal .grid > :nth-child(2) { animation-delay: .07s; } html.js .reveal .grid > :nth-child(3) { animation-delay: .14s; } html.js .reveal .grid > :nth-child(4) { animation-delay: .21s; } html.js .reveal .grid > :nth-child(5) { animation-delay: .28s; } html.js .reveal .grid > :nth-child(n+6) { animation-delay: .35s; } } @keyframes v2rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* Mobile: drop the header blur so the fixed slide-in drawer resolves against the viewport (a backdrop-filter ancestor would trap it into a broken half panel). */ @media (max-width: 760px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); } } @media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } } /* ---------- extra services (Servizi page + booking multiselect) ---------- */ .service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .service-media { aspect-ratio: 4/3; overflow: hidden; } .service-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-body { padding: 1.1rem 1.2rem 1.3rem; } .service-body h3 { margin: 0 0 .35rem; } .service-price { margin: 0 0 .5rem; } /* min-width:0 so the
shrinks below its content min-content on mobile (fieldsets default to min-inline-size:min-content → horizontal overflow). */ .booking-services { margin-top: 1.1rem; border: 1px solid var(--border, #e5e0d8); border-radius: var(--radius-lg, 16px); padding: 1rem 1.2rem; min-width: 0; } .booking-services legend { font-weight: 700; padding: 0 .4rem; } /* min(230px,100%) so a single narrow column never forces a track wider than the container (plain minmax(230px,1fr) overflows on phones < ~260px wide). */ .services-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: .5rem .9rem; } .service-opt { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; line-height: 1.4; cursor: pointer; } .service-opt input { margin-top: .2rem; flex: none; } .service-opt .muted { opacity: .7; } /* ---------- short brand on mobile (a long full name crowds the hamburger) ---------- */ .brand-short { display: none; } @media (max-width: 760px) { .brand-full { display: none; } .brand-short { display: inline; } } /* brand is a link to home (desktop + mobile) — keep it looking like text */ a.brand { text-decoration: none; cursor: pointer; } /* breathing room before the stats band (it used to touch the section above) */ .stats { margin-top: clamp(2rem, 4vw, 3.5rem); } /* Honeypot anti-spam del form di prenotazione: fuori dallo schermo per l'utente, ben visibile ai bot che compilano tutto. Fuori dal flusso, quindi non tocca il layout. */ .hp-field { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Segnaposto della mappa finche' non c'e' il consenso: alto esattamente come `.map` (400px), cosi' sostituirlo con l'iframe non muove nulla. */ .map-consent { height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 1.2rem; background: color-mix(in srgb, var(--accent) 6%, var(--bg, #faf6f1)); } .map-consent p { max-width: 46ch; margin: 0; } .acc-map .map-consent { height: clamp(320px, 46vh, 460px); } /* `.map` e `.acc-map iframe` dichiarano display:block, che ha la meglio sul display:none dello user-agent per [hidden]: senza questa regola l'iframe in attesa di consenso continua a occupare la sua altezza sotto al segnaposto. */ /* !important perche' su villas.* la regola `.acc-map iframe{display:block}` sta in un