/* ---- Web Fonts ---- */
@font-face {
font-family: 'Lyon Display';
src: url('../fonts/serif-light-webfont.woff2') format('woff2'),
url('../fonts/serif-light-webfont.woff') format('woff'),
url('../fonts/serif-light-webfont.ttf') format('truetype');
font-weight: 300 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lyon Display';
src: url('../fonts/serif-lightitalic-webfont.woff2') format('woff2'),
url('../fonts/serif-lightitalic-webfont.woff') format('woff'),
url('../fonts/serif-lightitalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lyon Display';
src: url('../fonts/serif-italic-webfont.woff2') format('woff2'),
url('../fonts/serif-italic-webfont.woff') format('woff'),
url('../fonts/serif-italic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lyon Display';
src: url('../fonts/serif-bold-webfont.woff2') format('woff2'),
url('../fonts/serif-bold-webfont.woff') format('woff'),
url('../fonts/serif-bold-webfont.ttf') format('truetype');
font-weight: 600 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lyon Display';
src: url('../fonts/serif-bolditalic-webfont.woff2') format('woff2'),
url('../fonts/serif-bolditalic-webfont.woff') format('woff'),
url('../fonts/serif-bolditalic-webfont.ttf') format('truetype');
font-weight: 600 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Infra';
src: url('../fonts/Infra-Light.woff2') format('woff2'),
url('../fonts/Infra-Light.woff') format('woff'),
url('../fonts/Infra-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Infra';
src: url('../fonts/Infra-Regular.woff2') format('woff2'),
url('../fonts/Infra-Regular.woff') format('woff'),
url('../fonts/Infra-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Infra';
src: url('../fonts/Infra-SemiBold.woff2') format('woff2'),
url('../fonts/Infra-SemiBold.woff') format('woff'),
url('../fonts/Infra-SemiBold.ttf') format('truetype');
font-weight: 500 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Infra';
src: url('../fonts/Infra-Bold.woff2') format('woff2'),
url('../fonts/Infra-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
STYLE.CSS — Foglio di stile globale del sito
Design system: giallo Fuorisalone, verde petrolio, beige, serif+sans
Condiviso da: Homepage, Elenco Stay, Elenco Explore, Singola Stay, Singola Explore
========================================================================== */
:root{
/* ===== PALETTE CROMATICA UFFICIALE — regola valida su tutte le pagine.
Ogni variabile qui sotto è uno dei colori della palette approvata;
il commento riporta il nome/uso indicato. Non introdurre colori
hex "sciolti" nel resto del foglio: riusare sempre queste variabili. */
--white: #FFFFFF; /* Bianco — fondo pagina */
--band: #F3F2E9; /* Sabbia chiaro — fondi, box */
--band-2: #EAE4D6;
--teal: #0E3B34; /* colore categoria "destination", non in palette */
--taupe: #3D3830; /* Marrone scuro — label, testi in box; anche gradient hover foto */
--yellow: #F5C842; /* Giallo "Places" — bottoni */
--yellow-d: #E4BA3D; /* variante hover del giallo */
--gold: #BFA882; /* Beige — colore indice per icone, label, accenti */
--brown: #8B6F4A; /* Marrone chiaro — titolo "Places" */
--ink: #000000; /* Nero — testi */
--muted: #6B6B63; /* grigio secondario generico, non sostituito dalla palette */
--quote: #7A7468; /* Marrone-grigio — quote */
--menu-bg: #1E1E1E; /* Nero "Places" — fondo menu di servizio (topbar) */
--line: rgba(0,0,0,.12);
--line-l: rgba(255,255,255,.18);
--serif: "Lyon Display", Georgia, "Times New Roman", serif;
--sans: "Infra", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--maxw: 1080px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.label{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
/* ---- tag riquadrato (A PLACE TO [EXPLORE]) — stesso box-stroke di
Stay/Discover (bordo e testo --gold, altezza 22px). ---- */
.placetag{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.placetag b{ display:inline-flex; align-items:center; height:22px; color:var(--gold); border:1px solid var(--gold); border-radius:4px; padding:0 10px; font-weight:400; font-style:normal; }
.hero .placetag{ color:rgba(255,255,255,.7); }
/* ---- bottone giallo pill ---- */
.btn{ display:inline-block; background:var(--yellow); color:var(--ink); border-radius:999px; padding:11px 24px; font-weight:600; font-size:13.5px; letter-spacing:.01em; transition:background .15s; }
.btn:hover{ background:var(--yellow-d); }
/* ============ TOP BAR ============
Ricalca la fascia di servizio degli altri siti dell'ecosistema
Fuorisalone.it (fs-service-bar): altezza dimezzata, font piano (non
più maiuscolo/spaziato), icone e divisori verticali coerenti, selettore
lingua a voci separate invece del testo "IT / EN". */
.topbar{ background:var(--menu-bg); color:rgba(255,255,255,.82); font-size:12px; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:22px; }
.topbar .tl, .topbar .tr{ display:flex; gap:12px; align-items:center; }
.topbar .tb-label{ font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:normal; text-transform:none; color:#fff; }
.topbar .tb-sep{ width:1px; height:13px; background:rgba(255,255,255,.25); display:inline-block; }
.topbar .socials{ display:inline-flex; align-items:center; gap:11px; }
.topbar .soc{ color:rgba(255,255,255,.8); display:inline-flex; }
.topbar .soc:hover{ color:#fff; }
.topbar .soc svg{ width:14px; height:14px; display:block; fill:currentColor; }
.topbar a{ color:inherit; }
.topbar a:hover{ color:#fff; }
.topbar .lang-switch{ display:inline-flex; align-items:center; }
.topbar .lang-item{ font-size:12px; font-weight:400; color:rgba(255,255,255,.6); padding:0 10px; border-left:1px solid rgba(255,255,255,.25); }
.topbar .lang-item:last-child{ border-right:1px solid rgba(255,255,255,.25); }
.topbar .lang-item.active, .topbar .lang-item:hover{ color:#fff; }
/* ============ LOGO HEADER ============ */
.masthead{ background:var(--white); border-bottom:1px solid var(--line); position:relative; z-index:50; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; height:134px; }
.brand{ display:flex; align-items:center; gap:12px; }
.fs-logo{ width:300px; height:auto; display:block; }
.badge{ width:38px; height:38px; flex:0 0 auto; }
.wordmark{ font-family:var(--sans); font-weight:700; font-size:21px; letter-spacing:.01em; color:var(--ink); }
.wordmark .it{ color:var(--ink); }
.masthead .mainnav{ display:flex; align-items:center; gap:24px; }
.masthead .mainnav a{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); opacity:.6; padding:2px 0; border-bottom:2px solid transparent; }
.masthead .mainnav a:hover{ opacity:1; }
.masthead .mainnav a.active{ opacity:1; border-bottom-color:var(--yellow); }
/* Bottone "ghost": bordo 2px colore testo, hover giallo #F2CB59 con testo #0C2227 */
.masthead .mainnav a.nav-external{ font-weight:500; opacity:1; border:2px solid var(--ink); border-radius:999px; padding:7px 18px; }
.masthead .mainnav a.nav-external:hover{ opacity:1; background:#F2CB59; border-color:#F2CB59; color:#0C2227; }
.masthead .mainnav .nav-sep{ color:var(--line); opacity:1; }
.masthead .mainnav .search{ display:flex; align-items:center; justify-content:center; line-height:1; opacity:.6; font-size:30px; letter-spacing:0; border:none; padding:0; background:none; cursor:pointer; font-family:inherit; color:var(--gold); }
.masthead .mainnav .search:hover{ opacity:1; }
.nav-links{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.nav-toggle, .nav2-toggle{ display:none; background:none; border:0; cursor:pointer; padding:10px; margin:-10px 0 -10px -10px; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after, .nav2-toggle .bars, .nav2-toggle .bars::before, .nav2-toggle .bars::after{ content:""; display:block; width:22px; height:2px; background:var(--ink); transition:transform .25s, top .25s, background .25s; }
.nav-toggle .bars, .nav2-toggle .bars{ position:relative; }
.nav-toggle .bars::before, .nav2-toggle .bars::before{ position:absolute; top:-7px; }
.nav-toggle .bars::after, .nav2-toggle .bars::after{ position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] .bars, .nav2-toggle[aria-expanded="true"] .bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bars::before, .nav2-toggle[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after, .nav2-toggle[aria-expanded="true"] .bars::after{ top:0; transform:rotate(-45deg); }
/* ============ NAV (sticky) ============ */
.nav{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; gap:26px; align-items:center; height:50px; flex-wrap:wrap; }
.nav a{ font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); opacity:.62; }
.nav a:hover{ opacity:1; }
.nav .navtag{ color:var(--gold); opacity:1; border-right:1px solid var(--line); padding-right:22px; }
/* ============ HERO ============ */
.hero{ position:relative; background-color:var(--taupe); background-position:center 38%; background-size:cover; background-repeat:no-repeat; color:#fff; }
.hero::before{ content:""; position:absolute; inset:0; z-index:0; background:
linear-gradient(90deg, rgba(20,17,14,.90) 0%, rgba(20,17,14,.56) 55%, rgba(20,17,14,.12) 100%),
linear-gradient(0deg, rgba(20,17,14,.55) 0%, rgba(20,17,14,0) 44%); }
.hero .wrap{ position:relative; z-index:1; min-height:600px; display:flex; flex-direction:column; justify-content:flex-end; padding:88px 32px 74px; }
.hero .wrap > div{ max-width:680px; }
.hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(58px,11vw,118px); line-height:.92; letter-spacing:-.015em; margin:.22em 0 .12em; }
.hero .tagline{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold); font-size:clamp(24px,4.4vw,40px); line-height:1.05; margin:0 0 .5em; }
.hero .tagline em{ color:#E8D9B4; font-style:italic; }
.hero .lede{ max-width:52ch; color:rgba(255,255,255,.84); font-size:18px; margin:0 0 26px; }
.hero .meta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:26px; }
/* ============ SEZIONI ============ */
section{ padding:66px 0; }
.band-beige{ background:var(--band); }
.band-white{ background:var(--white); border-top:1px solid var(--line); }
.sec-head{ margin-bottom:38px; }
.sec-tagrow{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tagbox{ font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); border-radius:4px; height:22px; display:inline-flex; align-items:center; padding:0 10px; }
.sec-tagrow .ev{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.sec-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,46px); line-height:1.04; letter-spacing:-.01em; margin:0 0 .18em; }
.sec-head h2 em{ font-style:italic; color:var(--gold); }
.quoteband{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:clamp(440px,42.85vw,720px); padding:64px 32px; background:var(--taupe) url('../assets/comporta/band-cavalli-01.webp') center 55%/cover no-repeat; color:#fff; }
/* Gradiente identico a quello dell'hero Explore (.explore-hero-overlay +
.explore-hero-overlay-lr), qui unito in un solo ::before a due layer. */
.quoteband::before{ content:""; position:absolute; inset:0; z-index:0; background:
linear-gradient(90deg, rgba(20,17,14,.75) 0%, rgba(20,17,14,.4) 45%, rgba(20,17,14,.05) 100%),
linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)); }
.quoteband-caption{ position:relative; z-index:1; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.quoteband p{ position:relative; z-index:1; margin:0; max-width:56ch; font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,46px); line-height:1.16; letter-spacing:-.01em; text-wrap:balance; text-shadow:0 1px 30px rgba(0,0,0,.28); }
.sec-head p{ max-width:66ch; color:var(--muted); margin:0; font-size:17px; }
.prose p{ max-width:70ch; font-size:18px; }
.prose p + p{ margin-top:1em; }
.prose .drop{ font-family:var(--serif); }
/* 01 essenza — 3 colonne testo + 2 colonne mappa */
.essence{ display:grid; grid-template-columns:3fr 2fr; gap:52px; align-items:start; }
.essence-txt p{ max-width:none; font-size:18px; margin:0; }
.essence-txt p + p{ margin-top:1em; }
.essence-map figure{ margin:0; }
.essence-map img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:6px; }
.essence-map figcaption{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:10px; text-align:center; }
/* codici — banda specs con icone */
.codes{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--white); }
.code{ padding:22px 20px; border-right:1px solid var(--line); }
.code:last-child{ border-right:none; }
.code svg{ width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1.4; margin-bottom:12px; }
.code h4{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 6px; }
.code p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.zona-label{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); text-align:center; border-top:1px solid var(--ink); padding-top:28px; margin:42px 0 32px; }
/* POI */
.poi{ padding:24px 0; border-bottom:1px solid var(--line); }
.poi-top{ display:flex; align-items:baseline; gap:12px; }
.dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; transform:translateY(-1px); }
.dot.dormire{ background:var(--teal); } .dot.tavola{ background:var(--sun,#C06B33); }
.dot.retail{ background:var(--gold); } .dot.arte{ background:#7A4A63; }
:root{ --sun:#C06B33; }
.poi-top h3{ font-family:var(--serif); font-weight:400; font-size:25px; margin:0; line-height:1.08; }
.poi-rate{ margin-left:auto; font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.poi-sub{ font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:8px 0 10px 22px; }
.poi-note{ margin:0 0 13px 22px; max-width:66ch; color:#2c2c28; }
.poi-links{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--sans); font-weight:500; font-size:12.5px; margin-left:22px; }
.poi-links a{ color:var(--teal); }
.poi-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
.poi-links a::before{ content:"→ "; color:var(--gold); }
/* .poi-links-left è "trasparente" al layout di default (display:contents):
su #arte i link web/ig restano flex-item diretti di .poi-links, identici
a prima. Solo #tavola attiva la colonna reale. Idem per l'icona mirino,
nascosta ovunque tranne che su #tavola. */
.poi-links-left{ display:contents; }
.poi-links-map svg{ display:none; }
/* griglia 3 colonne per Tavola e Arte — compatta la pagina */
.poi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 30px; margin-top:56px; }
.poi-grid .poi{ padding:18px 0 0; border-top:1px solid var(--ink); border-bottom:none; }
.poi-grid .poi-top{ flex-wrap:wrap; }
.poi-grid .poi-top h3{ font-size:21px; }
.poi-grid .poi-rate{ margin-left:22px; width:100%; margin-top:4px; white-space:normal; }
.poi-grid .poi-sub{ margin-bottom:9px; }
.poi-grid .poi-note{ font-size:15px; }
/* DORMIRE — ogni struttura è una card autonoma: box arrotondato, galleria
con frecce a sinistra, contenuto (nome/sub/testo/footer) a destra. */
.stay-card{ background:#F9F8F4; border-radius:20px; padding:40px; margin-bottom:28px; }
.stay-card:last-child{ margin-bottom:0; }
.stay-head{ display:flex; align-items:baseline; gap:12px; }
.stay-head .dot{ display:none; }
.stay-head h3{ font-family:var(--serif); font-weight:400; font-size:29px; margin:0; line-height:1.05; color:var(--ink); }
.stay-sub{ font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; margin:9px 0 22px 0; }
.stay-grid{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:stretch; }
.stay-content{ display:flex; flex-direction:column; }
/* galleria a scorrimento (verticale, formato foto) con puntini + frecce */
.stay-gallery{ position:relative; width:100%; aspect-ratio:2/3; border:none; border-radius:12px; overflow:hidden; background:var(--band-2); }
.stay-gallery .track{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.stay-gallery .track::-webkit-scrollbar{ display:none; }
.stay-gallery .slide{ flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; }
.stay-gallery .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.stay-nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:none; padding:0; color:#fff; font-size:20px; line-height:1; cursor:pointer; z-index:3; text-shadow:0 1px 5px rgba(0,0,0,.55); }
.stay-nav.prev{ left:16px; }
.stay-nav.next{ right:16px; }
.stay-gallery .dots{ position:absolute; left:0; right:0; bottom:11px; display:flex; justify-content:center; gap:6px; z-index:2; }
.stay-gallery .dots button{ width:7px; height:7px; border-radius:50%; border:none; padding:0; background:rgba(255,255,255,.5); box-shadow:0 0 3px rgba(0,0,0,.4); cursor:pointer; transition:background .2s,transform .2s; }
.stay-gallery .dots button.on{ background:#fff; transform:scale(1.25); }
.stay-txt p{ margin:0; max-width:none; color:var(--ink); font-family:var(--serif); font-size:19px; }
.stay-footer{ display:flex; flex-wrap:wrap; gap:32px 48px; margin-top:auto; padding-top:32px; }
.stay-footer-col{ display:flex; flex-direction:column; gap:8px; }
.stay-footer-col .lab{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.stay-footer-val{ display:inline-flex; align-items:center; gap:6px; font-family:var(--serif); font-weight:600; font-size:15px; color:var(--ink); }
.stay-footer-val:hover{ color:var(--gold); }
.stay-footer-map svg{ stroke:var(--gold); fill:none; stroke-width:1.6; flex:0 0 auto; }
/* MAPPA — Punti di interesse. .stats/.stat sono esclusivi di questa
sezione (nessun'altra pagina valorizza 'stats'), quindi le regole
restano dirette e non scoped. */
.stats{ display:flex; flex-wrap:wrap; gap:0; border:none; border-radius:20px; overflow:hidden; margin-bottom:24px; background:var(--band); }
.stat{ flex:1 1 0; min-width:120px; padding:48px 32px; border-right:1px solid #fff; }
.stat:last-child{ border-right:none; }
.stat .n{ font-family:var(--sans); font-weight:300; font-size:56px; line-height:1; color:var(--muted); }
.stat .k{ font-family:var(--serif); font-weight:300; font-size:15px; letter-spacing:normal; text-transform:none; color:var(--gold); margin-top:10px; }
.map-frame{ border:1px solid var(--line); border-radius:6px; padding:10px; background:var(--white); }
.map-container{ height:520px; width:100%; border-radius:4px; background:var(--band); z-index:1; }
.leaflet-container{ font-family:var(--sans); background:var(--band); }
.pin{ width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.pin.dormire{ background:var(--teal); } .pin.tavola{ background:var(--sun); }
.pin.retail{ background:var(--gold); } .pin.arte{ background:#7A4A63; }
.leaflet-popup-content{ font-family:var(--sans); margin:12px 14px; line-height:1.4; }
.leaflet-popup-content b{ font-family:var(--serif); font-size:15px; font-weight:500; }
.leaflet-popup-content .pz{ font-family:var(--sans); font-weight:600; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin:3px 0 7px; }
.leaflet-popup-content a{ font-family:var(--sans); font-weight:500; font-size:12px; color:var(--teal); }
.map-legend{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--muted); }
.map-legend span{ display:inline-flex; align-items:center; gap:7px; }
.map-legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
/* CTA — non più una fascia a tutta larghezza: il colore/l'angolo stondato
stanno solo su .wrap, che resta dentro il max-width della pagina,
lasciando il bianco della sezione visibile ai lati (effetto rettangolo). */
.cta{ color:var(--muted); }
.cta .wrap{ background:var(--band); border-radius:20px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:46px 40px; flex-wrap:wrap; }
.cta-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.cta h3{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(22px,3.4vw,32px); margin:0; max-width:24ch; line-height:1.15; color:var(--muted); }
/* FOOTER */
footer{ background:#000; color:rgba(255,255,255,.74); padding:56px 0 40px; }
footer .cols{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; }
footer .badge{ width:42px; height:42px; margin-bottom:14px; }
footer .brand-foot{ display:block; width:fit-content; margin-bottom:16px; }
footer .fs-logo-foot{ height:26px; width:auto; display:block; filter:brightness(0) invert(1); }
footer .foot-legal{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.62); margin:0 0 14px; max-width:40ch; }
footer .foot-legal a{ color:rgba(255,255,255,.85); }
footer .foot-legal a:hover{ color:#fff; }
footer .foot-copy{ font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.42); margin:6px 0 0; max-width:46ch; }
footer .foot-copy a{ color:rgba(255,255,255,.7); }
footer .fbrand{ font-family:var(--sans); font-weight:700; color:#fff; font-size:15px; margin-bottom:8px; }
footer h4{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.col-places h4{ color:var(--brown); }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:9px; font-size:14px; }
footer a:hover{ color:#fff; }
footer .footer-search-trigger{ display:block; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
footer .footer-search-trigger:hover{ color:#fff; }
footer p{ font-size:13px; line-height:1.55; margin:0; }
footer .colophon{ border-top:1px solid var(--line-l); margin-top:38px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:rgba(255,255,255,.92); }
footer .colophon a{ color:#fff; }
/* ==========================================================================
RESPONSIVE — 840 tablet landscape · 720 tablet portrait · 480 mobile
========================================================================== */
@media (max-width:840px){
/* Nav */
.nav-toggle{ display:block; }
.masthead .wrap{ height:auto; padding:4px 0; position:relative; }
.masthead .mainnav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:4px 20px 12px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 14px 26px rgba(0,0,0,.09); display:none; z-index:50; }
.masthead .mainnav.open{ display:flex; }
.masthead .mainnav a{ width:100%; padding:13px 0; font-size:14px; opacity:.85; border-bottom:1px solid var(--line); }
.masthead .mainnav .nav-sep{ display:none; }
.masthead .mainnav a:last-child{ border-bottom:0; }
.masthead .mainnav a.active{ opacity:1; border-bottom-color:var(--line); box-shadow:inset 3px 0 0 var(--yellow); padding-left:11px; }
.masthead .mainnav .search{ padding:13px 0; font-size:15px; justify-content:flex-start; }
.nav2-toggle{ display:block; }
.nav .wrap{ justify-content:space-between; flex-wrap:nowrap; height:50px; }
.nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:4px 20px 12px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 14px 26px rgba(0,0,0,.09); z-index:30; }
.nav.open .nav-links{ display:flex; }
.nav-links a{ padding:13px 0; font-size:14px; opacity:.85; border-bottom:1px solid var(--line); }
.nav-links a:last-child{ border-bottom:0; }
/* Layout */
.essence{ grid-template-columns:1fr; gap:30px; } .essence-map{ max-width:380px; }
footer .cols{ grid-template-columns:1fr 1fr; gap:28px; }
.codes{ grid-template-columns:repeat(2,1fr); } .code:nth-child(2){ border-right:none; }
.poi-grid{ grid-template-columns:repeat(2,1fr); }
.stay-card{ padding:28px; } .stay-grid{ grid-template-columns:170px 1fr; gap:24px; }
}
@media (max-width:720px){
body{ font-size:16px; }
.wrap{ padding:0 18px; }
.topbar .tb-label{ display:none; }
.topbar .tb-sep:first-of-type{ display:none; }
.masthead .wrap{ padding-left:18px; padding-right:18px; }
.fs-logo{ width:200px; height:auto; }
.hero .wrap{ min-height:440px; padding:56px 18px 44px; }
section{ padding:46px 0; }
.codes{ grid-template-columns:1fr; } .code{ border-right:none; border-bottom:1px solid var(--line); } .code:last-child{ border-bottom:none; }
.stats{ flex-direction:column; } .stat{ padding:28px 32px; border-right:none; border-bottom:1px solid #fff; } .stat:last-child{ border-bottom:none; }
.map-container{ height:400px; }
footer .cols{ grid-template-columns:1fr; }
.poi-rate{ display:none; }
.stay-card{ padding:20px; } .stay-grid{ grid-template-columns:1fr; gap:20px; } .stay-gallery{ max-width:none; } .stay-txt p{ max-width:none; text-align:justify; } .stay-footer{ gap:22px 32px; }
.quoteband{ min-height:400px; padding:52px 22px; }
.art-hero-media img{ max-height:360px; }
}
@media (max-width:480px){
.poi-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }
@media print{ .topbar,.nav,.cta{ display:none; } body,.hero,footer{ background:#fff; color:#000; } .hero h1,.hero .tagline{ color:#000; } }
/* ===== STAY ARTICLE — regole extra (template-stay.html) ===== */
.wrap-narrow{ max-width:760px; }
/* La regola generica section{padding:66px 0} aggiungerebbe 66px anche in
fondo a .art-hero, prima che inizi il subnav (.nav) — lo spazio tra fine
immagine hero e il testo del subnav risulterebbe molto più alto di quello
tra il subnav e la riga sotto (che è solo il centraggio interno di .nav).
Tolto solo il padding-bottom: quello in alto (tra header e titolo) non è
interessato da questa richiesta. */
.art-hero{ text-align:center; padding-bottom:0; }
/* Fascia bianca dell'header (solo eyebrow+titolo[+sottotitolo], MAI l'immagine
sotto): 480px fissi e testo centrato verticalmente, uguali su ogni pagina
che la usa (Stay, Discover, Home) — così eyebrow/titolo/sottotitolo restano
sempre nella stessa posizione, indipendentemente da quanto testo ha la
singola pagina. .art-hero è la sezione intera (in Stay/Discover contiene
anche l'immagine sotto): la regola va sul wrapper interno dedicato
.hero-title-zone, non su .art-hero stesso. Regola valida per la versione
web (desktop); override più basso nel breakpoint 720px, vedi in fondo al file. */
.hero-title-zone{ min-height:480px; display:flex; flex-direction:column; justify-content:center; }
.art-eyebrow{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.art-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4vw,48px); margin:0 0 32px; }
/* Titolo grande e bold: solo pagine di dettaglio (Explore/Stay/Discover
struttura) — .detail-hero è su stay-hero.php/discover-hero.php, .explore-
hero già lo è. NON su .home-hero/.section-hero (home e indici di sezione,
quest'ultimo già approvato e in revisione: non va alterato di riflesso). */
.detail-hero h1, .explore-hero h1{ font-weight:700; font-size:clamp(50px,6vw,60px); }
/* ===== HOME HERO — revisione pagina homepage: titolo molto più grande,
"Fuorisalone" Medium (non bold), "Places" nel colore corretto (--brown,
non --gold), fasce verticali ridotte. Scoped a .home-hero: .hero-title-
zone/.art-eyebrow/.art-hero h1 sono condivisi con Stay/Discover. */
.home-hero{ padding-top:35px; }
.home-hero .hero-title-zone{ min-height:260px; }
.home-hero .art-eyebrow{ color:var(--brown); }
.home-hero h1{ font-size:clamp(40px,6.2vw,78px); margin-bottom:57px; }
.home-hero h1 strong{ font-weight:500; }
.home-hero h1 em{ font-style:italic; color:var(--brown); }
.art-meta{ display:flex; justify-content:space-between; align-items:center; padding:16px 0 40px; font-family:var(--sans); font-size:12px; letter-spacing:.06em; }
.art-meta-loc{ font-family:var(--serif); font-size:28px; color:var(--ink); font-style:normal; text-transform:none; letter-spacing:0; }
.art-meta-map{ color:var(--ink); text-decoration:none; text-transform:uppercase; font-weight:600; font-family:var(--sans); font-size:12px; letter-spacing:.06em; }
.art-meta-map:hover{ color:var(--gold); }
/* ===== STAY/BUENAVISTA — intestazione allineata alla Home: titolo Lyon
Display Medium 50-60px, box-label su "Stay", margini dimezzati, luogo in
Lyon Light Italic, "Mostra su mappa" con icona pin. Scoped a
.stay-detail-hero: .detail-hero/.art-meta* sono condivisi con Discover. */
.stay-detail-hero{ padding-top:35px; }
.stay-detail-hero .hero-title-zone{ min-height:260px; }
/* Comporta (.explore-hero): stessa altezza/posizione della fascia bianca
di Stay/Discover, per intestazioni allineate su tutte e tre le pagine.
Il min-height/justify-content effettivi sono più sotto, in "EXPLORE HERO
v3" — qui serve solo il padding-top ridotto. */
.explore-hero{ padding-top:35px; }
.stay-detail-hero .art-eyebrow-box{ display:inline-flex; align-items:center; height:22px; padding:0 10px; margin-left:2px; border:1px solid var(--gold); border-radius:4px; color:var(--gold); vertical-align:middle; }
.stay-detail-hero .art-meta-loc{ font-family:var(--serif); font-weight:300; font-style:italic; color:var(--taupe); }
.stay-detail-hero .art-meta-map{ font-size:11px; color:var(--taupe); display:inline-flex; align-items:center; gap:6px; }
.stay-detail-hero .art-meta-map:hover{ color:var(--taupe); opacity:.75; }
.stay-detail-hero .art-meta-pin{ width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.6; }
.media-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:72px 0; }
.media-duo img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.media-single{ margin:72px 0; }
.media-single img{ width:100%; height:auto; display:block; }
.art-hero-media img{ width:100%; height:auto; max-height:640px; object-fit:cover; display:block; }
.pull-quote{ margin:40px 0; padding-left:0; border-left:none; text-align:left; }
.pull-quote p{ font-family:var(--serif); font-style:italic; font-size:32px; line-height:1.4; color:var(--quote); margin:0; }
.pull-quote .art-eyebrow{ margin-bottom:14px; text-align:left; }
.carnet-title{ font-family:var(--serif); font-weight:400; font-size:30px; color:var(--ink); margin:0 0 6px; }
.carnet-credit{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--muted); margin:0 0 14px; }
.media-wide{ position:relative; margin:72px 0; }
.media-wide img{ width:100%; height:auto; display:block; }
.media-caption-top figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:60px 0 20px; background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0)); color:#fff; }
.media-caption-top figcaption .wrap{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.divider{ border:none; border-top:1px solid var(--line); margin:22px 0; }
.codes-5{ grid-template-columns:repeat(5,1fr); background:var(--band); border:none; margin-top:72px; margin-bottom:72px; }
.codes-5 .code{ border-right:none; text-align:center; }
.codes-5 .code svg{ margin:0 auto 12px; display:block; }
.carnet-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:56px 0; }
.cn-1{ grid-column:1; grid-row:1; }
.cn-2{ grid-column:2; grid-row:1; }
.cn-3{ grid-column:1; grid-row:2; }
.cn-4{ grid-column:2; grid-row:2; }
.cn-tall{ grid-column:3/5; grid-row:1/3; }
.cn-bl{ grid-column:1/3; grid-row:3; }
.cn-br{ grid-column:3/5; grid-row:3; }
.sec-head + .illus-frame{ margin-top:56px; }
.illus-frame{ background:var(--white); border:1px solid var(--line); padding:8px 8px 16px; display:flex; flex-direction:column; margin:0; }
.illus-frame img{ width:100%; flex:1; object-fit:contain; }
.illus-frame figcaption{ font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:8px; }
.carnet-illus-single{ max-width:280px; margin:64px auto; }
.carnet-links-label{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:56px; margin-bottom:14px; }
.carnet-links{ justify-content:center; margin-top:0; }
.mosaic-gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; gap:14px; margin:72px 0; }
.mosaic-cell > a{ position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.mosaic-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.mosaic-cell > a:hover img{ transform:scale(1.04); }
.mosaic-cell.span-2{ grid-column:span 2; }
.mosaic-cell.tall{ grid-row:span 2; }
/* ===== DISCOVER — regole extra (pagina di dettaglio singola struttura) ===== */
/* Hero: riusa .art-hero/.art-meta di stay-hero, aggiunge solo l'etichetta nazione */
.art-meta-country{ display:inline-block; font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:14px; vertical-align:middle; }
/* Testo due colonne */
.text-2col{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.text-2col .prose p{ max-width:none; }
/* Rooms — slider sincronizzato con pannello titolo/descrizione */
.rooms{ display:grid; grid-template-columns:3fr 2fr; gap:52px; align-items:start; margin-top:8px; }
.rooms-slider{ position:relative; }
.rooms-track{ display:flex; width:100%; aspect-ratio:4/3; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:6px; background:var(--band-2); }
.rooms-track::-webkit-scrollbar{ display:none; }
.rooms-slide{ flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; }
.rooms-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.rooms-dots{ display:flex; justify-content:center; gap:6px; margin-top:14px; }
.rooms-dots button{ width:7px; height:7px; border-radius:50%; border:none; padding:0; background:var(--line); cursor:pointer; transition:background .2s, transform .2s; }
.rooms-dots button.on{ background:var(--gold); transform:scale(1.25); }
.rooms-caption-panel{ display:none; }
.rooms-caption-panel.active{ display:block; }
.rooms-caption h3{ font-family:var(--serif); font-weight:400; font-size:30px; margin:0 0 6px; line-height:1.08; }
.rooms-sub{ font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.rooms-caption .prose p{ max-width:48ch; }
/* Cardset — condiviso da Foodie (scroll) e Correlati (grid) */
.cardset-scroll .track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-top:8px; }
.cardset-scroll .track::-webkit-scrollbar{ display:none; }
.cardset-scroll .cardset-card{ flex:0 0 240px; scroll-snap-align:start; }
.cardset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.cardset-card{ display:block; }
.cardset-card figure{ position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; border-radius:6px; background:var(--band-2); }
.cardset-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.cardset-card:hover img{ transform:scale(1.04); }
.cardset-card h4{ font-family:var(--serif); font-weight:400; font-size:19px; margin:12px 0 4px; line-height:1.15; }
.cardset-card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.cardset-note{ max-width:none; color:var(--muted); margin-bottom:26px; }
/* Indicatore "scorri" per Foodie: visibile solo su mobile (vedi @media più
sotto), dove lo scroll orizzontale del track è meno evidente che su
desktop (niente hover, niente scrollbar visibile). */
.scroll-hint{ display:none; align-items:center; gap:5px; font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:6px; }
.scroll-hint svg{ width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* Rooms — nota generale sullo stile, dentro alla stessa sezione/band delle camere.
Testo a colonna singola: larghezza piena come .cardset-note, non la misura
di lettura 70ch di .prose (che qui verrebbe applicata da .prose p). */
.rooms-note{ margin-bottom:40px; }
.rooms-note.prose p{ max-width:none; }
/* Focus on — fascia scura opzionale, carosello con frecce a comparsa in loop */
.band-dark{ background:var(--taupe); color:#fff; }
.band-dark .tagbox{ color:#fff; }
.band-dark .sec-tagrow .ev{ color:rgba(255,255,255,.62); }
.focus-gallery{ position:relative; margin-top:8px; }
.focus-gallery .track{ display:flex; width:100%; aspect-ratio:16/9; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:6px; }
.focus-gallery .track::-webkit-scrollbar{ display:none; }
.focus-slide{ flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; }
.focus-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.focus-nav{ position:absolute; top:0; bottom:0; width:18%; min-width:56px; max-width:110px; border:0; padding:0; cursor:pointer; opacity:0; transition:opacity .2s; display:flex; align-items:center; z-index:2; }
.focus-gallery:hover .focus-nav{ opacity:1; }
.focus-nav.prev{ left:0; justify-content:flex-start; padding-left:16px; background:linear-gradient(to right, rgba(20,17,14,.4), transparent); }
.focus-nav.next{ right:0; justify-content:flex-end; padding-right:16px; background:linear-gradient(to left, rgba(20,17,14,.4), transparent); }
.focus-nav svg{ width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.5; filter:drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
@media (hover:none){ .focus-nav{ opacity:1; } } /* touch: niente hover, le frecce restano sempre visibili */
/* Testo a colonna singola: stessa logica di .rooms-note, larghezza piena */
.focus-testo{ margin-top:32px; }
.focus-testo.prose p{ max-width:none; }
.focus-testo p{ color:rgba(255,255,255,.86); }
/* Contatti */
.contacts-gallery{ columns:3; column-gap:14px; margin-bottom:72px; }
.contacts-gallery img{ width:100%; display:block; margin-bottom:14px; border-radius:6px; break-inside:avoid; }
.contacts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:8px; }
.contacts-block h4{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.contacts-block p{ margin:0 0 8px; font-size:16px; }
.contacts-block a{ color:var(--teal); }
.contacts-ig{ display:inline-flex; align-items:center; gap:8px; }
.contacts-ig svg{ width:18px; height:18px; fill:currentColor; }
.contacts-block a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* ===== HOMEPAGE — hero centrato (stesso stile di stay-hero/discover-hero) +
masonry feed a griglia 4 colonne, full-bleed ===== */
/* Nessun padding proprio: l'altezza/centratura arrivano da .art-hero, uguale su tutte le pagine */
/* Stesso font/dimensione/colore della riga località in stay/buenavista (.art-meta-loc) */
.home-hero-sub{ font-family:var(--serif); font-size:clamp(20px,2.6vw,28px); font-style:normal; color:var(--ink); letter-spacing:0; max-width:none; margin:0 auto 57px; line-height:1.4; }
/* Blocco di chiusura dopo il feed, sempre bianco, mai una citazione */
.home-outro{ min-height:480px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.home-outro .wrap{ display:flex; flex-direction:column; align-items:center; }
.home-outro p{ font-family:var(--serif); font-style:normal; font-size:clamp(20px,2.6vw,28px); line-height:1.4; color:var(--ink); max-width:none; margin:0 0 28px; }
.home-outro .btn{ margin:0 auto; }
/* Griglia: ogni tile è larga 1, 2 o 4 colonne (mai 3) — impostata da index.php,
il componente disegna soltanto. Full-bleed: nessun .wrap, va da bordo a bordo.
Ogni fascia (riga) è alta quanto la finestra del browser, margine bianco
incluso: grid-auto-rows = 100vh meno il gap/margine (14px, il "margine
bianco" che separa le fasce), così riga+margine = 100vh esatti, per ogni
riga indipendentemente dal numero di tile che contiene. */
.feed-bleed{ padding:6px 14px; }
/* Due versioni renderizzate in parallelo da masonry-feed.php (vedi index.php
per la generazione di feedRows/feedRowsMobile): qui si sceglie solo quale
mostrare, via CSS, niente JS. Su mobile le immagini dell'altra versione
restano semplicemente mai caricate (loading="lazy" + display:none). */
.feed-bleed-mobile{ display:none; }
.feed-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.feed-grid-count-1, .feed-grid-count-2, .feed-grid-count-3{ grid-auto-rows:calc(100vh - 14px); }
.feed-tile{ position:relative; display:block; overflow:hidden; background:var(--band-2); }
.feed-tile[data-span="1"]{ grid-column:span 1; }
.feed-tile[data-span="2"]{ grid-column:span 2; }
.feed-tile[data-span="4"]{ grid-column:span 4; }
.feed-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 2.2s cubic-bezier(.25,.1,.25,1); }
.feed-tile:hover img{ transform:scale(1.045); cursor:none; }
/* Caption a comparsa in hover/focus/tap (touch). Due gradienti separati
(regola "Gradient hover foto" di palette, --taupe): superiore, dietro il
badge di categoria; inferiore, dietro luogo+CTA. Testo sempre maiuscolo,
Infra Regular 11px (tranne il nome struttura, vedi .feed-cursor-label). */
.feed-grad-top, .feed-grad-bottom{ position:absolute; left:0; right:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .5s ease; }
.feed-grad-top{ top:0; height:15%; background:linear-gradient(to bottom, rgba(61,56,48,.20) 0%, rgba(61,56,48,0) 100%); }
.feed-grad-bottom{ bottom:0; height:40%; background:linear-gradient(to top, rgba(61,56,48,.90) 0%, rgba(61,56,48,0) 100%); }
.feed-tile:hover .feed-grad-top, .feed-tile:focus-visible .feed-grad-top, .feed-tile.is-revealed .feed-grad-top,
.feed-tile:hover .feed-grad-bottom, .feed-tile:focus-visible .feed-grad-bottom, .feed-tile.is-revealed .feed-grad-bottom{ opacity:1; }
/* Badge categoria (STAY/EXPLORE/DISCOVER), in alto a sinistra, sul gradiente
superiore — stessa impostazione della label a box-stroke delle intestazioni
di pagina (testo 11px, stroke 1px, altezza 20px, colore --gold). */
.feed-badge{ position:absolute; top:16px; left:16px; z-index:2; display:inline-flex; align-items:center; height:20px; padding:0 10px; border:1px solid var(--gold); border-radius:4px; font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); opacity:0; transition:opacity .5s ease; }
.feed-tile:hover .feed-badge, .feed-tile:focus-visible .feed-badge, .feed-tile.is-revealed .feed-badge{ opacity:1; }
.feed-caption{ position:absolute; inset:16px; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.feed-tile:hover .feed-caption, .feed-tile:focus-visible .feed-caption, .feed-tile.is-revealed .feed-caption{ opacity:1; transform:translateY(0); }
.feed-caption-place{ display:flex; align-items:center; gap:8px; min-width:0; }
.feed-caption-film{ width:16px; height:16px; flex:0 0 auto; stroke:#F3F2E9; fill:none; stroke-width:1.4; }
.feed-caption-luogo{ font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#F3F2E9; line-height:1.3; }
.feed-caption-cta{ display:flex; align-items:center; gap:6px; flex:0 0 auto; font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--yellow); white-space:nowrap; }
.feed-caption-arrow{ width:17px; height:17px; flex:0 0 auto; }
.feed-caption-arrow line, .feed-caption-arrow polyline{ stroke:var(--yellow); stroke-width:1.7; }
/* Nome della struttura che segue il cursore, in grande, al posto del cursore stesso (solo mouse).
Lyon Display Regular (non corsivo). */
.feed-cursor-label{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .35s ease; font-family:var(--serif); font-style:normal; font-size:clamp(21px,2.72vw,35px); color:#F3F2E9; text-shadow:0 0 20px rgba(20,17,14,.92), 0 0 42px rgba(20,17,14,.72); white-space:nowrap; text-align:center; z-index:5; }
/* Tile citazione: sfondo bianco, testo in --quote (marrone-grigio), label in
--gold (beige). Lyon Light Italic (peso 300 + corsivo, mappato sul file
"light" del font) per la quote, fino a un massimo di 45px. Sempre allineate
in alto a sinistra nel box, mai al centro/destra, con margine 40-50px. */
.feed-tile-quote{ background:var(--white); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; padding:44px 48px 28px 44px; }
.feed-quote-text{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(18px,2.6vw,45px); line-height:1.32; color:var(--quote); margin:0 auto 12px 0; max-width:34ch; transition:color .25s ease; }
.feed-quote-attr{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.feed-tile-quote:hover .feed-quote-text{ color:var(--yellow); }
/* Le classi di allineamento restano nel markup (posizione in riga) ma non
cambiano più la resa: la quote è sempre in alto a sinistra. */
.feed-quote-align-left, .feed-quote-align-center, .feed-quote-align-right{ align-items:flex-start; text-align:left; }
.feed-quote-align-left .feed-quote-text, .feed-quote-align-center .feed-quote-text, .feed-quote-align-right .feed-quote-text{ margin-left:0; margin-right:auto; }
/* Ingresso in scroll: fade + risalita, disattivato per chi preferisce meno movimento */
.feed-tile{ opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; }
.feed-tile.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .feed-tile{ opacity:1; transform:none; transition:none; } .feed-tile img{ transition:none; } }
/* Responsive Discover/Home — deve stare DOPO le regole base qui sopra: le
regole senza @media più in alto nel file hanno la stessa specificità di
quelle dentro @media, quindi vince l'ordine nel sorgente. */
@media (max-width:840px){
.text-2col{ grid-template-columns:1fr; gap:24px; }
.rooms{ grid-template-columns:1fr; gap:24px; }
.cardset-grid{ grid-template-columns:repeat(2,1fr); }
.contacts-grid{ grid-template-columns:1fr; gap:24px; }
.contacts-gallery{ columns:2; }
/* Titolo sotto l'immagine hero (stay/discover): più piccolo e impilato
sopra "Mostra su mappa" invece che affiancato, altrimenti il titolo
lungo va in overflow orizzontale sulla fascia .art-meta. Centrato,
non a bandiera sinistra. */
.art-meta{ flex-direction:column; align-items:center; text-align:center; gap:8px; padding:14px 0 28px; }
.art-meta-loc{ font-size:17px; }
/* Gallery (pagina Discover, sezione contatti): max 6 immagini su mobile
invece di mostrarle tutte (oggi possono essere anche 10), per non
allungare troppo lo scroll. Da .contacts-gallery img a .mosaic-cell dopo
il passaggio al markup a mosaico (span-2/tall). */
.contacts-gallery.mosaic-gallery .mosaic-cell:nth-child(n+7){ display:none; }
/* Foodie e altri cardset a scorrimento: rendi visibile l'indicatore. */
.scroll-hint{ display:inline-flex; }
/* Blocco icone (Struttura/Ospiti/Amenities/Posizione/Punti interesse):
3 colonne = esattamente 2 righe (3+2) invece di 5 colonne strette che
escono dalla viewport. Correzione qui perché la regola base .codes-5
(senza @media, più sotto in questo stesso file) altrimenti vince per
ordine di sorgente sulla vecchia regola mobile a due colonne. */
.codes-5{ grid-template-columns:repeat(3,1fr); }
/* Carnet de Voyages: le illustrazioni (cn-tall/cn-bl/cn-br) diventano
larghezza piena e vengono spinte dopo tutti i dati numerici (stat),
invece di essere schiacciate in una colonna stretta in mezzo ad essi.
Stessa correzione di ordine-cascata di .codes-5 qui sopra: le regole
base .carnet-mosaic/.cn-* più sotto in questo file altrimenti vincono. */
.carnet-mosaic{ grid-template-columns:repeat(2,1fr); }
.cn-1, .cn-2, .cn-3, .cn-4{ grid-column:auto; grid-row:auto; }
.cn-tall, .cn-bl, .cn-br{ grid-column:1/-1; grid-row:auto; order:1; }
/* Stessa correzione di ordine-cascata per la gallery a mosaico (usata
più in basso nelle pagine Stay): la regola base .mosaic-gallery più
sotto in questo file altrimenti vince e riporta a 3 colonne strette. */
.mosaic-gallery{ grid-template-columns:1fr 1fr; }
.mosaic-cell.span-2{ grid-column:span 2; }
/* Feed homepage: sotto questa soglia si mostra la versione corta
(max 8 immagini + 2 citazioni, vedi index.php) invece della griglia
completa desktop, per non allungare troppo lo scroll su mobile. */
.feed-bleed-desktop{ display:none; }
.feed-bleed-mobile{ display:block; }
}
@media (max-width:720px){
.hero-title-zone{ min-height:360px; }
.home-outro{ min-height:360px; }
.cardset-scroll .cardset-card{ flex-basis:190px; }
.focus-slide{ width:82vw; }
.feed-grid{ grid-template-columns:repeat(2,1fr); }
.feed-grid-count-1, .feed-grid-count-2, .feed-grid-count-3{ grid-auto-rows:calc(100vh - 14px); }
.feed-tile[data-span="1"]{ grid-column:span 1; }
.feed-tile[data-span="2"], .feed-tile[data-span="4"]{ grid-column:span 2; }
}
@media (max-width:480px){
.cardset-grid{ grid-template-columns:1fr; }
.contacts-gallery{ columns:1; }
.feed-grid{ grid-template-columns:1fr; }
.feed-grid-count-1, .feed-grid-count-2, .feed-grid-count-3{ grid-auto-rows:calc(100vh - 14px); }
.feed-tile[data-span="1"], .feed-tile[data-span="2"], .feed-tile[data-span="4"]{ grid-column:span 1; }
.feed-cursor-label{ display:none; } /* niente cursore mouse su schermi touch stretti */
}
/* ===== SHARE BAR — condivisione social, fissa sul bordo, solo desktop =====
Nascosta sotto i 1180px (non solo sotto gli 840px "mobile" standard):
.wrap arriva a 1080px di larghezza, quindi sotto quella soglia rischia di
sovrapporsi al contenuto invece di stare nel margine libero ai lati. */
.share-bar{ display:none; }
@media (min-width:1180px){
.share-bar{ position:fixed; left:24px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:10px; }
}
.share-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--white); border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.08); transition:background .15s ease, border-color .15s ease, transform .15s ease; }
.share-btn:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.share-btn svg{ width:16px; height:16px; fill:var(--ink); transition:fill .15s ease; }
.share-btn:hover svg{ fill:var(--white); }
/* ===== SEARCH OVERLAY — motore di ricerca interno ===== */
body.search-open{ overflow:hidden; }
.search-overlay{ position:fixed; inset:0; z-index:100; display:flex; justify-content:center; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.search-overlay.is-open{ opacity:1; visibility:visible; }
.search-overlay-backdrop{ position:absolute; inset:0; background:rgba(20,17,14,.72); backdrop-filter:blur(4px); }
.search-panel{ position:relative; z-index:1; width:min(720px,92vw); margin-top:min(14vh,140px); max-height:78vh; overflow-y:auto; background:var(--white); border-radius:10px; padding:36px; box-shadow:0 30px 80px rgba(0,0,0,.32); transform:translateY(-16px); transition:transform .25s ease; }
.search-overlay.is-open .search-panel{ transform:translateY(0); }
.search-close{ position:absolute; top:18px; right:18px; background:none; border:0; cursor:pointer; padding:8px; }
.search-close svg{ width:16px; height:16px; display:block; }
.search-close line{ stroke:var(--muted); stroke-width:1.6; }
.search-close:hover line{ stroke:var(--ink); }
.search-logo{ height:24px; width:auto; display:block; margin-bottom:24px; }
.search-logo-rule{ height:2px; background:var(--yellow); margin-bottom:24px; }
.search-input{ width:100%; border:none; border-bottom:2px solid var(--line); font-family:var(--serif); font-size:clamp(22px,3vw,30px); color:var(--ink); background:transparent; padding:6px 40px 14px 0; }
.search-input:focus{ outline:none; border-bottom-color:var(--yellow); }
.search-input::placeholder{ color:var(--muted); }
.search-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.search-chip{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--white); cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.search-chip:hover{ background:var(--band); border-color:var(--ink); }
.search-results{ margin-top:26px; display:flex; flex-direction:column; }
.search-result{ display:block; padding:16px 4px; border-bottom:1px solid var(--line); }
.search-result:first-child{ border-top:1px solid var(--line); }
.search-result:hover{ background:var(--band); }
.search-result-title{ font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.search-result-label{ font-family:var(--serif); font-size:19px; color:var(--ink); margin:3px 0 5px; }
.search-result-snippet{ font-family:var(--sans); font-size:13.5px; color:var(--muted); line-height:1.5; }
.search-empty{ font-family:var(--sans); font-size:13.5px; color:var(--muted); padding:16px 4px; }
@media (max-width:720px){
.search-panel{ width:100%; margin-top:0; max-height:100vh; height:100%; border-radius:0; padding:24px; }
}
/* ===== PAGINE INDICE DI SEZIONE (Discover/Stay/Explore listing) =====
section-index-hero.php + hotel-listing.php. */
/* ===== HEADER PAGINE INDICE DI SEZIONE (Explore/Stay/Discover) — normalizzato:
eyebrow "A place to [Sezione]" sopra, titolo Lyon Display bold 50-60px
sotto (stessa taglia di Buenavista/Fondation CAB, qui bold anziché
medium), stessa altezza/posizione della fascia bianca. .section-hero è
il componente condiviso (oggi solo discover/index.php, in futuro anche
explore/ e stay/): la regola vale già per tutte e tre. */
.section-hero{ padding-top:35px; }
.section-hero .hero-title-zone{ min-height:260px; }
.section-hero h1{ margin-bottom:-8px; font-size:clamp(40px,6.2vw,78px); }
.section-hero h1 strong{ font-weight:700; }
.section-hero em{ font-style:italic; font-weight:700; color:var(--gold); }
.section-hero-sub{ font-family:var(--serif); font-weight:400; font-style:normal; font-size:clamp(32px,4vw,48px); line-height:1.1; color:var(--ink); margin:0 0 28px; }
.section-hero-desc{ max-width:none; margin:88px auto 56px; }
.section-hero-desc p{ font-family:var(--serif); font-size:clamp(20px,2.6vw,28px); line-height:1.4; color:var(--ink); margin:0 0 1.1em; }
.section-hero-desc p:last-child{ margin-bottom:0; }
/* Hero a slideshow: stessa dimensione di .art-hero-media (max-height:640px),
ma con le slide impilate una sopra l'altra e un crossfade in dissolvenza
(vedi js/hero-slideshow.js) invece di una singola ![]()
statica. */
.section-hero-media{ position:relative; height:640px; overflow:hidden; }
.section-hero-slide{ position:absolute; inset:0; display:block; opacity:0; transition:opacity 1s ease; }
.section-hero-slide.is-active{ opacity:1; z-index:1; }
.section-hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.section-hero-caption{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:32px; background:linear-gradient(to top, rgba(20,17,14,.7) 0%, rgba(20,17,14,.18) 50%, transparent 100%); opacity:0; transition:opacity .35s ease; }
.section-hero-slide:hover .section-hero-caption, .section-hero-slide:focus-visible .section-hero-caption{ opacity:1; }
.section-hero-caption-name{ font-family:var(--serif); font-size:26px; color:#fff; }
.section-hero-caption-loc{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:4px; }
.hotel-listing{ padding-bottom:40px; }
.hotel-card{ display:block; padding:56px 0; }
/* Mosaico a due righe, 4 colonne: rettangolo largo + quadrato + verticale
(spanna le due righe) sopra, quadrato + rettangolo largo sotto. */
.hotel-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; gap:9px; height:520px; }
.hotel-mosaic-tile{ position:relative; overflow:hidden; background:var(--band-2); border-radius:4px; }
.hotel-mosaic-tile:nth-child(1){ grid-column:1/3; grid-row:1/2; }
.hotel-mosaic-tile:nth-child(2){ grid-column:3/4; grid-row:1/2; }
.hotel-mosaic-tile:nth-child(3){ grid-column:4/5; grid-row:1/3; }
.hotel-mosaic-tile:nth-child(4){ grid-column:1/2; grid-row:2/3; }
.hotel-mosaic-tile:nth-child(5){ grid-column:2/4; grid-row:2/3; }
.hotel-mosaic-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.hotel-card:hover .hotel-mosaic-tile img{ transform:scale(1.04); }
.hotel-mosaic-placeholder{ background:#C7C7C0; }
.hotel-card-header{ margin-bottom:24px; }
.hotel-card-title{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); color:var(--ink); margin:0 0 6px; }
.hotel-card-loc{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin:0; }
.hotel-card-evidenza{ font-family:var(--serif); font-style:normal; font-size:clamp(19px,2.2vw,24px); line-height:1.4; color:var(--ink); max-width:70ch; margin:32px 0 0; }
.hotel-listing-divider{ border:none; border-top:1px solid var(--line); margin:0; }
.hotel-load-more-wrap{ display:flex; justify-content:center; padding:16px 0 64px; }
.hotel-load-more-btn{ border:none; cursor:pointer; font-family:inherit; }
/* ===== EXPLORE HERO v3 (Comporta) — vedi explore-hero.php =====
Fascia bianca allineata a Stay/Discover (260px, centrata) per intestazioni
identiche sulle tre pagine — scoped a .explore-hero, non tocca la
regola condivisa .hero-title-zone usata da Stay/Discover/Home. */
.explore-hero .hero-title-zone{ min-height:260px; justify-content:center; }
/* Immagine con due veli di contrasto sovrapposti: uno piatto al 20% su
tutta l'immagine, uno a gradiente sinistra→destra (più scuro dove sta il
testo, quasi trasparente a destra) — stesso principio del vecchio
.hero::before. Testo a bandiera sinistra (non eredita il text-align:
center di .art-hero): 'kicker' da solo vicino al bordo superiore,
'lede'+'meta'+'tagline' raggruppati vicino al bordo inferiore. */
.explore-hero-media{ position:relative; height:760px; overflow:hidden; }
.explore-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.explore-hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.2); }
.explore-hero-overlay-lr{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,17,14,.75) 0%, rgba(20,17,14,.4) 45%, rgba(20,17,14,.05) 100%); }
.explore-hero-content{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding-top:96px; padding-bottom:72px; text-align:left; }
.explore-hero-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); max-width:680px; }
.explore-hero-bottom{ display:flex; flex-direction:column; gap:22px; max-width:680px; }
.explore-hero-lede{ font-family:var(--serif); font-size:18px; line-height:1.5; color:rgba(255,255,255,.92); max-width:52ch; margin:0; }
.explore-hero-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin:0; }
.explore-hero-tagline{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold); font-size:clamp(24px,4.4vw,36px); line-height:1.1; margin:0; }
.explore-hero-tagline em{ color:#E8D9B4; font-style:italic; }
@media (max-width:840px){
.explore-hero .hero-title-zone{ min-height:160px; }
.explore-hero-media{ height:600px; }
.explore-hero-content{ padding-top:56px; padding-bottom:48px; }
}
@media (max-width:480px){
.explore-hero-media{ height:560px; }
.explore-hero-content{ padding-top:40px; padding-bottom:32px; }
.explore-hero-lede{ font-size:16px; }
}
/* Marker mappa "strutture selezionate": un solo colore, non ci sono ancora
categorie da distinguere (vedi js/data/discover-hotels.js). */
.pin.hotel{ background:var(--gold); }
/* ===== EXPLORE INTRO (Comporta, "01 · L'essenza") — vedi explore-intro.php.
Scoped a .explore-intro: non tocca .sec-tagrow/.tagbox/.sec-head h2 em
usati altrove nel sito. */
.explore-intro-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.sec-head .explore-intro-title{ font-weight:700; }
.explore-intro-text{ max-width:760px; margin-left:auto; margin-right:auto; }
.explore-intro-text.prose p{ max-width:none; font-family:var(--serif); font-size:20px; }
.explore-intro-duo{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:56px 0; }
.explore-intro-img{ margin:0; }
.explore-intro-img img{ width:100%; aspect-ratio:2/3; object-fit:cover; object-position:top; display:block; border:1px solid var(--line); border-radius:6px; }
.explore-intro-img figcaption{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:10px; text-align:center; }
@media (max-width:840px){
.explore-intro-duo{ grid-template-columns:1fr; gap:24px; margin:40px 0; }
}
@media (max-width:840px){
.section-hero-media{ height:440px; }
.hotel-mosaic{ grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; height:auto; aspect-ratio:16/11; }
.hotel-mosaic-tile:nth-child(1){ grid-column:1/3; grid-row:1/2; }
.hotel-mosaic-tile:nth-child(2){ grid-column:3/4; grid-row:1/2; }
.hotel-mosaic-tile:nth-child(3){ grid-column:3/4; grid-row:2/3; }
.hotel-mosaic-tile:nth-child(4){ grid-column:1/3; grid-row:2/3; }
.hotel-mosaic-tile:nth-child(n+5){ display:none; }
}
@media (max-width:480px){
.section-hero-media{ height:320px; }
.section-hero-caption{ padding:20px; }
.section-hero-caption-name{ font-size:21px; }
.hotel-mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; aspect-ratio:auto; }
.hotel-mosaic-tile:nth-child(1){ grid-column:1/3; grid-row:1; aspect-ratio:16/10; }
.hotel-mosaic-tile:nth-child(2){ grid-column:1/2; grid-row:2; aspect-ratio:1/1; }
.hotel-mosaic-tile:nth-child(3){ grid-column:2/3; grid-row:2; aspect-ratio:1/1; }
.hotel-mosaic-tile:nth-child(n+4){ display:none; }
.hotel-card{ padding:36px 0; }
.hotel-card-header{ margin-bottom:20px; }
.hotel-card-evidenza{ margin-top:20px; }
}
/* ===== CABAÑAS / ARCHITECTURAL FOCUS (Comporta, sezione #cabanas) — vedi
codes.php. codes.php è usato solo da questa sezione, quindi le regole sui
4 codici sono scoped a #cabanas per chiarezza ma non rischiano di toccare
altre pagine. .maestri-grid/.maestri-card sono classi nuove e dedicate. */
#cabanas .tagbox{ display:none; }
#cabanas .sec-head h2{ font-weight:700; color:var(--ink); margin-bottom:.5em; }
#cabanas .sec-head h2 em{ font-style:normal; color:var(--ink); }
#cabanas .sec-head p{ font-family:var(--serif); font-size:25px; color:var(--ink); }
#cabanas .codes{ border:none; border-radius:0; background:transparent; overflow:visible; gap:32px; margin-top:72px; }
#cabanas .code{ text-align:center; border-right:none; padding:0; }
#cabanas .code svg{ display:none; }
#cabanas .code h4::after{ content:""; display:block; width:20px; height:1px; background:var(--line); margin:10px auto 0; }
#cabanas .code p{ font-family:var(--serif); font-size:17px; }
/* ===== MAPPA / PUNTI DI INTERESSE (Comporta, sezione #mappa) — vedi
map.php. map.php è condiviso con le sezioni mappa di Discover, quindi
qui le regole restano scoped a #mappa per non toccarle. */
#mappa .tagbox{ display:none; }
#mappa .sec-head h2{ font-weight:700; color:var(--ink); margin-bottom:.5em; }
#mappa .sec-head p{ font-family:var(--serif); font-size:25px; color:var(--ink); }
/* ===== DORMIRE (Comporta, sezione #dormire) — vedi cards.php. cards.php è
usato solo da questa sezione, quindi le regole restano dirette. */
#dormire .tagbox{ display:none; }
#dormire .sec-head h2{ font-weight:700; color:var(--ink); margin-bottom:.5em; }
#dormire .sec-head p{ font-family:var(--serif); font-size:25px; color:var(--ink); }
/* ===== TAVOLA (Comporta, sezione #tavola) — vedi grid.php. grid.php è
usato solo da questa e da #arte, quindi le regole restano scoped a
#tavola per non toccare la sezione Arte. */
#tavola .tagbox{ display:none; }
#tavola .sec-head h2{ font-weight:700; color:var(--ink); margin-bottom:.5em; }
#tavola .sec-head p{ font-family:var(--serif); font-size:25px; color:var(--ink); }
#tavola .poi-top .dot{ display:none; }
#tavola .poi-top h3{ font-weight:700; }
#tavola .poi-rate{ display:none; }
#tavola .poi-sub{ margin-left:0; color:var(--gold); }
#tavola .poi-note{ margin-left:0; }
#tavola .poi-links{ margin-left:0; margin-top:auto; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-end; gap:16px; }
#tavola .poi-links a::before{ content:none; }
#tavola .poi-links-left{ display:flex; flex-direction:column; gap:6px; }
#tavola .poi-links-left a{ font-family:var(--serif); font-weight:700; color:var(--ink); }
#tavola .poi-links-map{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
#tavola .poi-links-map svg{ display:inline-block; stroke:var(--gold); fill:none; stroke-width:1.6; }
/* Il footer (link) si allinea in fondo a ogni card: la riga più lunga di
.poi-note stabilisce l'altezza della riga della grid, e margin-top:auto
spinge i link di tutte le card allo stesso bordo inferiore. */
#tavola .poi-grid .poi{ display:flex; flex-direction:column; }
/* Divisore tra le due righe di proposte: centrato nel gap tra le righe
(margin-top negativo + padding-top compensativo) e colore marroncino,
al posto della linea nera a filo riga. */
#tavola .poi-grid{ row-gap:88px; }
#tavola .poi-grid .poi:nth-child(-n+3){ border-top:none; padding-top:0; }
#tavola .poi-grid .poi:not(:nth-child(-n+3)){ border-top-color:var(--gold); margin-top:-44px; padding-top:62px; }
@media (max-width:840px){
#tavola .poi-grid{ row-gap:56px; }
#tavola .poi-grid .poi:nth-child(-n+3){ border-top:1px solid var(--ink); padding-top:18px; }
#tavola .poi-grid .poi:nth-child(-n+2){ border-top:none; padding-top:0; margin-top:0; }
#tavola .poi-grid .poi:not(:nth-child(-n+2)){ border-top-color:var(--gold); margin-top:-28px; padding-top:46px; }
}
@media (max-width:480px){
#tavola .poi-grid{ row-gap:40px; }
#tavola .poi-grid .poi:nth-child(-n+3){ border-top:1px solid var(--ink); padding-top:18px; }
#tavola .poi-grid .poi:first-child{ border-top:none; padding-top:0; margin-top:0; }
#tavola .poi-grid .poi:not(:first-child){ border-top-color:var(--gold); margin-top:-20px; padding-top:38px; }
}
/* ===== ARTE (Comporta, sezione #arte) — stessa regola di impaginazione di
#tavola (vedi sopra): titolo, link e divisore identici. grid.php condiviso,
quindi tutto scoped a #arte, senza toccare #tavola. Nessun'intro qui,
non richiesta per questa sezione. */
#arte .tagbox{ display:none; }
#arte .sec-head h2{ font-weight:700; color:var(--ink); margin-bottom:.5em; }
#arte .sec-head p{ font-family:var(--serif); font-size:25px; color:var(--ink); }
#arte .poi-top .dot{ display:none; }
#arte .poi-top h3{ font-weight:700; }
#arte .poi-rate{ display:none; }
#arte .poi-sub{ margin-left:0; color:var(--gold); }
#arte .poi-note{ margin-left:0; }
#arte .poi-links{ margin-left:0; margin-top:auto; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-end; gap:16px; }
#arte .poi-links a::before{ content:none; }
#arte .poi-links-left{ display:flex; flex-direction:column; gap:6px; }
#arte .poi-links-left a{ font-family:var(--serif); font-weight:700; color:var(--ink); }
#arte .poi-links-map{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
#arte .poi-links-map svg{ display:inline-block; stroke:var(--gold); fill:none; stroke-width:1.6; }
#arte .poi-grid .poi{ display:flex; flex-direction:column; }
#arte .poi-grid{ row-gap:88px; }
#arte .poi-grid .poi:nth-child(-n+3){ border-top:none; padding-top:0; }
#arte .poi-grid .poi:not(:nth-child(-n+3)){ border-top-color:var(--gold); margin-top:-44px; padding-top:62px; }
@media (max-width:840px){
#arte .poi-grid{ row-gap:56px; }
#arte .poi-grid .poi:nth-child(-n+3){ border-top:1px solid var(--ink); padding-top:18px; }
#arte .poi-grid .poi:nth-child(-n+2){ border-top:none; padding-top:0; margin-top:0; }
#arte .poi-grid .poi:not(:nth-child(-n+2)){ border-top-color:var(--gold); margin-top:-28px; padding-top:46px; }
}
@media (max-width:480px){
#arte .poi-grid{ row-gap:40px; }
#arte .poi-grid .poi:nth-child(-n+3){ border-top:1px solid var(--ink); padding-top:18px; }
#arte .poi-grid .poi:first-child{ border-top:none; padding-top:0; margin-top:0; }
#arte .poi-grid .poi:not(:first-child){ border-top-color:var(--gold); margin-top:-20px; padding-top:38px; }
}
/* ===== RETAIL (Comporta, sezione #retail) — passata da lista a griglia 3
colonne (grid.php, condiviso con Tavola/Arte), stessa regola di
impaginazione delle altre due. Fondo (band-beige) invariato. Titolo:
nero, bold, niente corsivo/oro sull'. */
#retail .tagbox{ display:none; }
#retail .sec-head h2{ font-weight:700; color:var(--ink); margin-bottom:.5em; }
#retail .sec-head h2 em{ font-style:normal; color:var(--ink); }
#retail .sec-head p{ font-family:var(--serif); font-size:25px; color:var(--ink); }
#retail .poi-top .dot{ display:none; }
#retail .poi-top h3{ font-weight:700; }
#retail .poi-rate{ display:none; }
#retail .poi-sub{ margin-left:0; color:var(--gold); }
#retail .poi-note{ margin-left:0; }
#retail .poi-links{ margin-left:0; margin-top:auto; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-end; gap:16px; }
#retail .poi-links a::before{ content:none; }
#retail .poi-links-left{ display:flex; flex-direction:column; gap:6px; }
#retail .poi-links-left a{ font-family:var(--serif); font-weight:700; color:var(--ink); }
#retail .poi-links-map{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
#retail .poi-links-map svg{ display:inline-block; stroke:var(--gold); fill:none; stroke-width:1.6; }
#retail .poi-grid .poi{ display:flex; flex-direction:column; }
#retail .poi-grid{ row-gap:88px; }
#retail .poi-grid .poi:nth-child(-n+3){ border-top:none; padding-top:0; }
#retail .poi-grid .poi:not(:nth-child(-n+3)){ border-top-color:var(--gold); margin-top:-44px; padding-top:62px; }
@media (max-width:840px){
#retail .poi-grid{ row-gap:56px; }
#retail .poi-grid .poi:nth-child(-n+3){ border-top:1px solid var(--ink); padding-top:18px; }
#retail .poi-grid .poi:nth-child(-n+2){ border-top:none; padding-top:0; margin-top:0; }
#retail .poi-grid .poi:not(:nth-child(-n+2)){ border-top-color:var(--gold); margin-top:-28px; padding-top:46px; }
}
@media (max-width:480px){
#retail .poi-grid{ row-gap:40px; }
#retail .poi-grid .poi:nth-child(-n+3){ border-top:1px solid var(--ink); padding-top:18px; }
#retail .poi-grid .poi:first-child{ border-top:none; padding-top:0; margin-top:0; }
#retail .poi-grid .poi:not(:first-child){ border-top-color:var(--gold); margin-top:-20px; padding-top:38px; }
}
/* ===== TITOLETTI DI SEZIONE — stesso colore del kicker "01 · L'essenza"
(.explore-intro-kicker, var(--gold)) su tutti i blocchi numerati successivi,
al posto del grigio generico di .sec-tagrow .ev. Scoped per id: nessun
rischio per altre pagine che condividono codes.php/map.php. */
#cabanas .ev, #mappa .ev, #dormire .ev, #tavola .ev, #retail .ev, #arte .ev{ color:var(--gold); }
/* ===== COLONNA DI TESTO RIENTRATA (blocchi 01→07) — titoletto+titolo+testo
(.sec-head) si restringono e centrano alla stessa larghezza della colonna
di testo di Stay/Buenavista (.wrap-narrow, 760px), mentre il resto del
contenuto di ogni sezione (griglie, card, mappa, stats) resta alla
larghezza attuale di .wrap. Scoped per id: .sec-head è condiviso
sitewide, qui tocchiamo solo le sezioni Comporta 01-07. */
#identita .sec-head, #cabanas .sec-head, #mappa .sec-head, #dormire .sec-head, #tavola .sec-head, #retail .sec-head, #arte .sec-head{ max-width:760px; margin-left:auto; margin-right:auto; }
.maestri-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.maestri-card{ background:var(--white); border-radius:10px; padding:28px 24px; border-bottom:none; }
.maestri-card .dot{ display:none; }
.maestri-card .poi-top h3{ font-size:22px; font-weight:700; line-height:1.22; }
.maestri-card .poi-note{ margin:20px 0 0; max-width:none; font-size:14px; line-height:1.55; color:var(--muted); }
@media (max-width:840px){
.maestri-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
.maestri-grid{ grid-template-columns:1fr; }
}
/* ===== BUENAVISTA (Stay) — testo descrittivo di tutta la pagina in serif.
Scoped a main.stay-article (classe esclusiva di questa pagina) perché
.prose e .code sono condivisi con Discover/Comporta. */
main.stay-article .prose p{ font-family:var(--serif); font-size:20px; }
main.stay-article .code p{ font-family:var(--serif); font-size:16px; }
/* Riga subito dopo il banner CTA "Scopri tutte le design destination":
era il border-top di .band-white ereditato dalla sezione #epilogo, che
segue la CTA. Rimossa solo qui, .band-white resta invariata altrove. */
#epilogo.band-white{ border-top:none; }
/* ===== FONDATION CAB (Discover) — tutti i testi descrittivi in serif,
stessa dimensione (20px) del testo di Buenavista/Comporta appena
modificato. Scoped a main.fondation-cab-article: discover-section.php,
rooms.php, focus.php, cardset.php e le sezioni #location/#rooms/#foodie/
#correlati sono condivisi con Les Bains Gardians (stesso template,
vedi il blocco main.les-bains-gardians-article più sotto). Fondation
CAB e Les Bains Gardians sono il modello di riferimento da replicare
per ogni nuova destinazione Discover. */
main.fondation-cab-article .prose p{ font-family:var(--serif); font-size:20px; }
main.fondation-cab-article .cardset-card p{ font-family:var(--serif); font-size:20px; }
main.fondation-cab-article .cardset-note{ font-family:var(--serif); font-size:20px; }
main.fondation-cab-article #location .sec-head p{ font-family:var(--serif); font-size:20px; color:var(--ink); }
/* ===== GRADIENT HOVER FOTO — regola di palette (--taupe, #3D3830), valida
su tutte le superfici fotografiche con hover del sito. Due layer:
inferiore (0→90% di opacità, sui 40% inferiori dell'immagine, dal basso)
+ superiore (0→20% di opacità, sui 15% superiori, dall'alto). Applicata
via ::after sugli hover-target già esistenti — nessun markup aggiuntivo. */
.mosaic-cell > a::after,
.cardset-card figure::after,
.hotel-mosaic-tile::after{
content:"";
position:absolute; inset:0; z-index:1; pointer-events:none;
opacity:0; transition:opacity .25s ease;
background:
linear-gradient(to top, rgba(61,56,48,.90) 0%, rgba(61,56,48,0) 40%),
linear-gradient(to bottom, rgba(61,56,48,.20) 0%, rgba(61,56,48,0) 15%);
}
.mosaic-cell > a:hover::after,
.cardset-card:hover figure::after,
.hotel-card:hover .hotel-mosaic-tile::after{ opacity:1; }
/* ===== QUOTE (pull-quote) — stessa estetica delle quote homepage: Lyon
Light Italic (peso 300), fino a un max di 45px. .pull-quote è condiviso
con Discover (Fondation CAB/Les Bains Gardians): regola diretta, non scoped,
per coerenza dell'estetica "quote" su tutto il sito. */
.pull-quote p{ font-weight:300; font-size:clamp(24px,3vw,45px); }
/* ===== STAY/BUENAVISTA — resto della pagina. Scoped a main.stay-article
dove le classi sono condivise con Discover; dirette dove i componenti
(carnet.php) sono esclusivi di questa pagina. */
/* Sottotitoli di sezione (dopo il titolo d'apertura #intro): Lyon Display
Medium, dimensione ridotta del 30% rispetto al titolo. */
#intro .sec-head h2{ font-weight:500; }
#progetto .sec-head h2, #cultura .sec-head h2{ font-weight:500; font-size:clamp(21px,3.5vw,32px); }
/* Testo Body già serif (Lyon Light, peso 400 → stesso file "light" del
peso 300) da una modifica precedente: nessuna ulteriore modifica. */
/* Immagini in articolo: altezza sempre uguale, singola orizzontale o doppia
verticale, mai più alta della finestra del browser (margini inclusi). */
main.stay-article .media-single img{ width:100%; height:calc(100vh - 120px); object-fit:cover; }
main.stay-article .media-duo img{ height:calc(100vh - 120px); aspect-ratio:auto; object-fit:cover; }
/* Small recap (amenities): icone raddoppiate, label 11px scura, testo Lyon Light scuro. */
main.stay-article .codes-5 .code svg{ width:52px; height:52px; margin-bottom:16px; }
main.stay-article .codes-5 .code h4{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.1em; color:var(--taupe); }
main.stay-article .codes-5 .code p{ font-family:var(--serif); font-weight:400; color:var(--taupe); }
/* Fuorisalone verdict: firma con logo (mascherato nel colore richiesto) +
riga gialla. Il logo è un div con mask-image (non un ![]()
) per poterlo
colorare via CSS: l'SVG sorgente ha un fill fisso, non currentColor. */
.pull-quote-signature{ display:flex; align-items:center; gap:14px; margin-top:24px; }
.pull-quote-signature-logo{ width:110px; height:20.5px; background-color:var(--quote); -webkit-mask-image:url('../assets/fuorisalone-places-logo.svg'); mask-image:url('../assets/fuorisalone-places-logo.svg'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:left center; mask-position:left center; }
.pull-quote-signature-rule{ width:35px; height:0; border-top:1px solid var(--yellow); }
/* Carnet de Voyages: titolo Lyon Display Light Italic in --quote, credito in --gold */
.sec-head .carnet-title{ font-weight:300; font-style:italic; color:var(--quote); }
.carnet-credit{ color:var(--gold); }
/* Illustrazioni: cornice 1px --quote, margine 20px (60px sul lato inferiore,
dove trova posto la didascalia). */
.illus-frame{ border-color:var(--quote); padding:20px 20px 60px; position:relative; }
.illus-frame figcaption{ position:absolute; left:20px; right:20px; bottom:20px; margin-top:0; font-size:11px; }
/* Numeri in evidenza: cifra Infra Light (il peso più leggero caricato, il
più vicino a "Extralight") 80px in --quote, descrizione Lyon in --gold.
Impaginazione centrata ad "epigrafe". Scoped a .carnet-mosaic: .stat/.n/.k
sono condivisi con la mappa statistica di Comporta. */
.carnet-mosaic .stat{ text-align:center; }
.carnet-mosaic .stat .n{ font-weight:300; font-size:80px; color:var(--quote); }
.carnet-mosaic .stat .k{ font-style:normal; color:var(--gold); }
/* Illustrazione del cactus: niente cornice/sfondo (eredita .essence-map,
condivisa altrove, quindi override sul selettore composto specifico). */
.carnet-illus-single img{ border:none; background:transparent; border-radius:0; }
/* Link (sito/instagram): Lyon Regular 24px nero, sottolineati, niente
freccia. .carnet-links è esclusiva di questa pagina (carnet.php). */
.carnet-links a{ font-family:var(--serif); font-weight:400; font-size:24px; color:#000; text-decoration:underline; text-underline-offset:5px; }
.carnet-links a::before{ content:none; }
/* CTA "Guarda tutte le destination...": testo con la stessa estetica delle
quote (colore, peso, corsivo). Il box resta già alla larghezza di .wrap
(non a piena pagina) da una modifica precedente. */
main.stay-article .cta h3{ color:var(--quote); font-weight:300; }
/* Masonry finale (mosaico dopo l'epilogo): 1-2 colonne come le foto in
articolo, stessa altezza fissa per ogni cella (niente più celle "tall"
che raddoppiano riga). */
main.stay-article .mosaic-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:calc(100vh - 120px); }
main.stay-article .mosaic-cell.tall{ grid-row:span 1; }
/* ===== DISCOVER/FONDATION CAB — intestazione allineata a Home/Stay: titolo
Lyon Display Medium 50-60px, box-label su "Discover" con prefisso "A
place to", margini dimezzati, luogo in Lyon Light Italic, "Mostra su
mappa" con icona pin. Scoped a main.fondation-cab-article: .detail-hero/
.art-meta* sono condivisi con Les Bains Gardians. */
main.fondation-cab-article .art-hero{ padding-top:35px; }
main.fondation-cab-article .hero-title-zone{ min-height:260px; }
main.fondation-cab-article .art-eyebrow-box{ display:inline-flex; align-items:center; height:22px; padding:0 10px; margin-left:2px; border:1px solid var(--gold); border-radius:4px; color:var(--gold); vertical-align:middle; }
main.fondation-cab-article .art-meta-loc, main.fondation-cab-article .art-meta-country{ font-family:var(--serif); font-weight:300; font-style:italic; color:var(--taupe); text-transform:none; letter-spacing:0; }
main.fondation-cab-article .art-meta-map{ font-size:11px; color:var(--taupe); display:inline-flex; align-items:center; gap:6px; }
main.fondation-cab-article .art-meta-map:hover{ color:var(--taupe); opacity:.75; }
main.fondation-cab-article .art-meta-pin{ width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.6; }
/* Frase di apertura (pullquote "evidenza"): eredita già lo stile quote
sitewide (--quote, Lyon Light Italic, max 45px) dalla modifica fatta per
Stay — .pull-quote non è scoped, quindi nessuna regola aggiuntiva qui. */
/* "Una fondazione che si abita": Lyon Display Medium, con l' ("abita")
Lyon Display Light Italic (già corsivo da regola base .sec-head h2 em). */
main.fondation-cab-article #presentazione .sec-head h2{ font-weight:500; }
main.fondation-cab-article #presentazione .sec-head h2 em{ font-weight:300; }
/* Immagini: angolo retto, mai stondate. */
main.fondation-cab-article .rooms-track{ border-radius:0; }
/* Camere: colonne uguali (era 3fr/2fr, l'immagine risultava più larga). */
main.fondation-cab-article .rooms{ grid-template-columns:1fr 1fr; }
/* Card Foodie/Correlati: titolo Lyon Display Medium 24px nero, testo Lyon
Light 15px --taupe (stessa impostazione richiesta per "Gastronomic
codes"). .cardset-card è condiviso con Les Bains Gardians: scoped. */
main.fondation-cab-article .cardset-card h4{ font-family:var(--serif); font-weight:500; font-style:normal; font-size:24px; color:var(--ink); }
main.fondation-cab-article .cardset-card p{ font-family:var(--serif); font-weight:400; font-size:15px; color:var(--taupe); }
/* Fascia "Altre strutture da scoprire": titolo ridotto (eredita comunque lo
stile h4/p dei cardset-card qui sopra, essendo lo stesso componente). */
main.fondation-cab-article #correlati .sec-head h2{ font-size:clamp(24px,3.5vw,32px); }
/* Galleria (sezione Gallery): stessa regola di impaginazione del masonry
di Buenavista — 2 colonne al massimo, mai 3: le celle "quadrate" (1
colonna) occupano tutta la larghezza della loro colonna, le "span-2"
tutta la fascia. Stessa altezza fissa per ogni riga (niente celle
"tall" più alte delle altre). */
main.fondation-cab-article .mosaic-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:calc(100vh - 120px); }
main.fondation-cab-article .mosaic-cell.tall{ grid-row:span 1; }
main.fondation-cab-article .mosaic-cell img{ border-radius:0; }
@media (max-width:840px){
main.fondation-cab-article .rooms{ grid-template-columns:1fr; }
main.fondation-cab-article .mosaic-gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:70vh; }
}
/* ===== DISCOVER/LES BAINS GARDIANS — stesso template di Fondation CAB:
seconda struttura Discover, stesse regole scoped sopra, solo su
main.les-bains-gardians-article invece di main.fondation-cab-article. */
main.les-bains-gardians-article .prose p{ font-family:var(--serif); font-size:20px; }
main.les-bains-gardians-article .cardset-card p{ font-family:var(--serif); font-size:20px; }
main.les-bains-gardians-article .cardset-note{ font-family:var(--serif); font-size:20px; }
main.les-bains-gardians-article #location .sec-head p{ font-family:var(--serif); font-size:20px; color:var(--ink); }
main.les-bains-gardians-article .art-hero{ padding-top:35px; }
main.les-bains-gardians-article .hero-title-zone{ min-height:260px; }
main.les-bains-gardians-article .art-eyebrow-box{ display:inline-flex; align-items:center; height:22px; padding:0 10px; margin-left:2px; border:1px solid var(--gold); border-radius:4px; color:var(--gold); vertical-align:middle; }
main.les-bains-gardians-article .art-meta-loc, main.les-bains-gardians-article .art-meta-country{ font-family:var(--serif); font-weight:300; font-style:italic; color:var(--taupe); text-transform:none; letter-spacing:0; }
main.les-bains-gardians-article .art-meta-map{ font-size:11px; color:var(--taupe); display:inline-flex; align-items:center; gap:6px; }
main.les-bains-gardians-article .art-meta-map:hover{ color:var(--taupe); opacity:.75; }
main.les-bains-gardians-article .art-meta-pin{ width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.6; }
main.les-bains-gardians-article #presentazione .sec-head h2{ font-weight:500; }
main.les-bains-gardians-article #presentazione .sec-head h2 em{ font-weight:300; }
main.les-bains-gardians-article .rooms-track{ border-radius:0; }
main.les-bains-gardians-article .rooms{ grid-template-columns:1fr 1fr; }
main.les-bains-gardians-article .cardset-card h4{ font-family:var(--serif); font-weight:500; font-style:normal; font-size:24px; color:var(--ink); }
main.les-bains-gardians-article .cardset-card p{ font-family:var(--serif); font-weight:400; font-size:15px; color:var(--taupe); }
main.les-bains-gardians-article #correlati .sec-head h2{ font-size:clamp(24px,3.5vw,32px); }
main.les-bains-gardians-article .mosaic-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:calc(100vh - 120px); }
main.les-bains-gardians-article .mosaic-cell.tall{ grid-row:span 1; }
main.les-bains-gardians-article .mosaic-cell img{ border-radius:0; }
@media (max-width:840px){
main.les-bains-gardians-article .rooms{ grid-template-columns:1fr; }
main.les-bains-gardians-article .mosaic-gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:70vh; }
}
/* Didascalie della gallery in lightbox (Fancybox): stesse caratteristiche
tipografiche delle didascalie del Carnet de Voyages (sans, maiuscolo,
11px, spaziato) — qui su fondo scuro quindi testo bianco per leggibilità. */
main.stay-article .fancybox__caption{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-align:center; }
@media (max-width:840px){
main.stay-article .media-single img, main.stay-article .media-duo img{ height:70vh; }
main.stay-article .mosaic-gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:70vh; }
}
/* Credito fotografico: riga discreta ripetuta in più punti delle pagine
Explore/Stay/Discover, a segnalare che le immagini sono materiale
ufficiale della struttura citata (vedi photo-credit.php). */
.photo-credit{ font-family:var(--sans); font-size:12.5px; font-style:italic; color:var(--muted); padding-top:14px; margin:28px auto 0; border-top:1px solid var(--line); }
.photo-credit strong{ font-style:normal; font-weight:600; }