/* ========================================================= Casa Tratturo — stile principale Palette a sole tre tonalità: bianco, blu mare e verde campagna — niente grigio neutro, niente crema/sabbia. Il blu richiama la Costa dei Trabocchi a due passi dalla struttura (ed è anche la tinta della superficie di base, chiarissima), il verde i vigneti e gli uliveti che la circondano, il bianco è il respiro tra i due. Titoli in serif elegante (Cormorant Garamond), testo in sans pulito (Work Sans). Mobile-first, foto-centrico, editoriale. ========================================================= */ :root { /* ===== Primitivi — Blu mare ===== */ --blue-900: #0f2e3a; --blue-700: #1a4a5f; --blue-600: #235c76; --blue-500: #337790; --blue-400: #5c9bb2; --blue-200: #bfdee6; --blue-100: #e5f2f5; --blue-50: #f2f8fa; /* superficie base della pagina — blu chiarissimo, non grigio */ /* ===== Primitivi — Verde campagna ===== */ --green-900: #2b3a1a; --green-700: #445c26; --green-600: #5d7a35; --green-500: #74923f; --green-400: #97b166; --green-200: #dce6c2; --green-100: #eff4e3; /* ===== Neutri — solo bianco ===== Nessun grigio/crema: le superfici "neutre" sono bianco pieno o tinte chiarissime prese direttamente dal blu/verde di brand (--blue-50/100, --green-100/200), mai un terzo colore a parte. */ --color-white: #ffffff; --color-ink: #142027; /* blu quasi nero, non grigio-verde generico */ --color-ink-soft: #465158; --color-border: rgba(20, 32, 39, 0.12); /* ===== Semantici — ruoli di brand ===== */ --color-primary: var(--blue-600); /* blu mare: CTA, azioni, link attivi */ --color-primary-dark: var(--blue-700); /* hover/stati attivi del primario */ --color-primary-light: var(--blue-100); /* tinte e sfondi leggeri */ --color-secondary: var(--green-700); /* verde campagna: accenti testuali, link */ --color-secondary-dark: var(--green-900); /* sezioni piene */ --color-secondary-light: var(--green-100);/* tinte, badge, notice positivi */ /* ===== Semantici — stato e funzionali (fuori dalla palette di brand) ===== */ --color-danger: #a8402b; --color-danger-light: #f7e2db; --color-whatsapp: #25d366; /* verde ufficiale del brand WhatsApp */ --color-whatsapp-dark: #1ebc59; /* hover: era l'unico colore inventato nel foglio */ /* ===== Superfici — alias semantici delle tinte di base ===== Le regole dovrebbero riferirsi al RUOLO della superficie, non alla tinta: così cambiare il ritmo di una pagina non significa andare a caccia di --blue-100 sparsi per il file. */ --surface-page: var(--blue-50); /* fondo di pagina */ --surface-alt: var(--blue-100); /* sezione alternata, blu */ --surface-soft: var(--green-100); /* sezione alternata, verde */ --surface-card: var(--color-white);/* card che devono staccare */ --color-scrim: rgba(20, 32, 39, 0.55); /* velo dietro il modale */ /* ===== Sfondi fotografici di sezione — veli e sorgenti ===== Le quattro sezioni a tinta piena del sito (.intro, .direct-promo, .booking, il footer) non sono più campiture piatte: sotto ognuna c'è una foto di campagna, tenuta indietro da un velo del colore che la sezione aveva prima. Il colore resta quello: la foto aggiunge grana e profondità, non cambia il ritmo dei fondi documentato in DESIGN.md. Gli alpha NON sono decorativi, sono il vincolo di contrasto. Con velo ≥ .88 il punto più chiaro della foto (cielo al tramonto, L≈.85) resta sotto la soglia che porterebbe il bianco di --on-dark sotto 4.5:1 — verificato tinta per tinta, il caso peggiore è --veil-green (il verde più chiaro dei quattro) a 6.2:1. Alzare la foto vuol dire abbassare il testo: se un velo va reso più leggero, va rifatto il conto. Sono rgba() dei primitivi corrispondenti e non color-mix() per la stessa ragione del fallback dell'header: color-mix ha ancora buchi di supporto, e qui un fallback mancato non è un colore leggermente diverso, è testo bianco su cielo. */ --veil-green: rgba(68, 92, 38, 0.90); /* --green-700, sotto .intro */ --veil-blue: rgba(15, 46, 58, 0.90); /* --blue-900, sotto .booking */ --veil-primary: rgba(26, 74, 95, 0.90); /* --blue-700, sotto .page-intro */ --veil-ink: rgba(20, 32, 39, 0.93); /* --color-ink, sotto il footer */ /* Sorgenti: l'URL è relativo a questo foglio (assets/css/), non alla pagina. Stanno in :root perché la scelta "quale foto sotto quale sezione" si legga in un posto solo — v. scripts/optimize-images.sh, array BACKGROUNDS, per il perché di ciascun abbinamento. */ --photo-intro: url('../img/sfondo-vigneto.webp'); --photo-intro-narrow: url('../img/sfondo-ulivo.webp'); --photo-promo: url('../img/sfondo-uliveto.webp'); --photo-booking: url('../img/sfondo-colline.webp'); --photo-footer: url('../img/sfondo-campagna.webp'); /* ===== Bianco su fondo scuro — ruoli nominati, non alpha anonimi ===== Footer, .direct-promo e i bottoni "ghost" usavano otto alpha diversi senza nome, e due coppie erano accidentalmente diverse: .85 vs .88 per lo stesso corpo di testo, .55 vs .6 per lo stesso bordo di bottone. Nominare i ruoli chiude entrambe le discrepanze. */ --on-dark: rgba(255, 255, 255, 0.88); /* corpo su fondo scuro */ --on-dark-muted: rgba(255, 255, 255, 0.65); /* tagline, legal, secondario */ --on-dark-outline: rgba(255, 255, 255, 0.6); /* bordo di controlli su fondo scuro */ --on-dark-line: rgba(255, 255, 255, 0.16); /* filetti separatori */ --on-dark-fill: rgba(255, 255, 255, 0.12); /* riempimento ghost */ --on-dark-fill-hover: rgba(255, 255, 255, 0.22); /* ghost in hover */ /* ===== Tipografia ===== */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Scala: le sei dimensioni che vivevano nella banda .78–.95rem facevano tutte lo stesso lavoro. Qui diventano tre ruoli distinti. */ --text-2xs: .78rem; /* micro-label uppercase: eyebrow, tag, categorie */ --text-xs: .85rem; /* badge, label di form, legal, bottoni piccoli */ --text-sm: .95rem; /* corpo secondario: nav, corpo card, meta */ --text-base: 1rem; --text-md: 1.15rem; /* lead — e la misura che a h4 mancava del tutto */ --text-card: 1.25rem;/* titolo dentro una card (era 1.2 su una, 1.25 sull'altra) */ --text-brand: 1.5rem;/* wordmark, header e footer (erano 1.5 e 1.6) */ --text-stat: 1.7rem; /* le cifre dell'itinerario — l'elemento firma del sito */ --text-lg: clamp(1.1rem, 2vw, 1.35rem); /* riga di chiusura editoriale */ --text-dek: clamp(1.25rem, 2.4vw, 1.6rem); /* dek in corsivo (.intro__dek) */ /* h3 arriva a 1.7 e non più a 1.6: al massimo del clamp collideva esattamente con --text-dek, quindi un titolo di sezione e un dek editoriale avevano la stessa dimensione su schermo largo. */ --text-h3: clamp(1.35rem, 2.5vw, 1.7rem); --text-h2: clamp(1.9rem, 4vw, 2.75rem); --text-h1: clamp(2.5rem, 6vw, 4.25rem); --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.15; /* titoli */ --leading-snug: 1.35; --leading-normal: 1.6; /* corpo */ /* Una sola spaziatura per le micro-label uppercase: .eyebrow, .site-footer__heading e .contatti__label sono lo stesso componente scritto tre volte, con tre tracking diversi (.12/.08/.05em). */ --tracking-label: .1em; --tracking-tag: .04em; /* Misura di lettura — gli 11 valori in ch sparsi nel file si raggruppavano già in cinque fasce, senza mai essere nominati. */ --measure-micro: 20ch; /* titoli stretti (era 18/20/22) */ --measure-tight: 34ch; /* dek editoriale */ --measure-narrow: 46ch; /* lead (era 42/46/48) */ --measure-mid: 54ch; /* testi intermedi (era 52/56) */ --measure-body: 62ch; /* corpo (era 60/62) */ --measure-wide: 68ch; /* ===== Spaziatura — base 0.25rem ===== I valori cablati nel file si allineavano già ai quarti di rem: non erano mai stati nominati, ecco tutto. */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; /* Ritmi di sezione fluidi (i clamp che erano ripetuti inline su 8 selettori) */ --space-section: clamp(3.5rem, 6vw, 6.5rem); --space-page-top: clamp(2.5rem, 6vw, 4rem); --space-page-top-tight: clamp(1.5rem, 4vw, 2.5rem); --space-band: clamp(2.5rem, 5vw, 4rem); /* stacco prima di una fascia a piena larghezza */ /* ===== Movimento — una sola curva, scritta in un solo modo ===== La stessa cubic-bezier compariva con e senza spazi in 7 punti. */ --dur-fast: .15s; /* feedback UI: colore, bordo, piccoli transform */ --dur-base: .3s; /* modale */ --dur-slow: .5s; /* zoom foto su hover */ --dur-reveal: .6s; /* scroll-reveal standard */ --dur-slower: .9s; /* scroll-reveal dei momenti fotografici grandi */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-standard: ease; /* ===== Raggi — token per RUOLO, non per taglia ===== Il problema non erano i valori ma l'assenza di una regola: le cornici foto usavano --radius-sm in tre sezioni e --radius-md in altre tre, e dentro .camera-single__gallery due tile adiacenti avevano raggi diversi. Con nomi di ruolo non si può più scegliere quello sbagliato. */ --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-full: 999px; --radius-chip: var(--radius-1); /* tag, badge, chip servizi */ --radius-control: var(--radius-2); /* bottoni, input, pill filtro */ --radius-surface: var(--radius-3); /* card, pannelli, cornici foto */ /* ===== Ombre ===== Erano rgba(32,41,36) — un grigio-verde, cioè esattamente la tinta che il commento su --color-ink qui sopra dichiara di voler evitare. Ora derivano dall'ink blu-nero. */ --shadow-sm: 0 2px 10px rgba(20, 32, 39, 0.08); --shadow-md: 0 16px 40px rgba(20, 32, 39, 0.16); --shadow-lg: 0 24px 60px rgba(20, 32, 39, 0.20); /* ===== Stati e livelli ===== */ --focus-ring: 2px solid var(--color-primary); --focus-offset: 2px; --z-header: 100; --z-float: 200; --z-modal: 500; --z-skip: 9999; --container-width: 1200px; /* Altezza dell'header sticky. Serve a due cose che sbagliano di brutto se la si indovina a occhio: lo scroll-padding delle àncore interne e l'offset del riepilogo che segue lo scorrimento. Il valore qui è solo il ripiego prima che il JS misuri l'header vero — che cambia altezza quando si compatta allo scroll (.site-header.is-scrolled). */ --header-h: 78px; } /* Breakpoint — NON tokenizzabili: le custom property non funzionano dentro @media. Restano qui come contratto scritto. Backbone del tema: 640px — da 1 a 2 colonne (griglie galleria/camere/esperienze) 782px — fasce fotografiche da 16:9 a 2.2–2.4:1, padding container 860px — .rooms-compare da colonna a riga 960px — nav desktop, hero a due colonne 1040px — griglia galleria a 4 colonne Il vecchio 720px (usato una volta sola, .site-footer__grid) è confluito in 782px. */ /* ---------- Reset essenziale ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Ogni àncora interna (#prenota, #esito, i link del menu) atterra sotto l'header, che è sticky a top:0. Lo scarto lo dichiara il browser una volta per tutte invece di farlo compensare a mano a ogni scrollTo. --header-h la misura initHeaderHeightVar() in main.js; il valore qui è il ripiego finché il JS non ha girato. */ scroll-padding-top: calc(var(--header-h, 78px) + var(--space-4)); /* Guard per .full-bleed: 100vw include la scrollbar (o l'ingombro riservato per essa), quindi una fascia a piena larghezza sfora sempre di qualche pixel. Va su html, non solo su body: con l'overflow dichiarato solo sul body, in standards mode il browser lo propaga comunque al viewport e la larghezza scrollabile del documento resta invariata (verificato: senza questa riga, document.documentElement. scrollWidth restava più largo di clientWidth anche a body{overflow-x: hidden}). */ overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); color: var(--color-ink); background: var(--surface-page); font-size: 16px; /* radice della scala: tutti i token in rem partono da qui */ line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; /* `clip` e non `hidden`, ed è la differenza fra un riepilogo che segue lo scorrimento e uno che resta inchiodato. `overflow-x: hidden` rende il body un contenitore di scorrimento a sé: da quel momento ogni position:sticky dentro la pagina si àncora al body — che non scorre mai, perché a scorrere è il viewport — e quindi non si stacca mai. `clip` ritaglia lo sforo orizzontale senza creare il contenitore, che è tutto quello che serviva qui. */ overflow-x: clip; } /* Ripiego per i browser senza overflow:clip (Safari < 16). Lì lo sticky resta rotto, ma è il male minore rispetto a una pagina che scorre di lato. */ @supports not (overflow: clip) { html, body { overflow-x: hidden; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin: 0 0 0.5em; color: var(--color-ink); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-md); } /* prima non aveva nessuna regola: cadeva sul default del browser */ p { margin: 0 0 1em; } .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 9999; background: var(--color-ink); color: var(--color-white); padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); } /* ---------- Scroll reveal ---------- Regole SEMPRE scoped sotto .js: quella classe la aggiunge solo lo script inline in header.php prima di wp_head(). Se JS non parte, .js non c'è mai, quindi [data-reveal] resta all'opacità/posizione normale fin dal primo paint — il contenuto non è MAI nascosto a chi non ha JavaScript. */ .js [data-reveal] { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity var(--dur-reveal) var(--ease-standard), transform var(--dur-reveal) var(--ease-out-expo); /* Stagger per elemento: si imposta inline (style="--reveal-delay: 80ms") invece di selettori :nth-of-type cablati — scala a qualunque numero di elementi in un moment, senza dover aggiungere una regola per ognuno. */ transition-delay: var(--reveal-delay, 0s); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Variante per i momenti fotografici grandi (.page-overture, .intro__campagna, .locale__panorama, .rooms-preview__bridge): salita più ampia e più lenta, più un leggero scale sulla sola immagine — legge come "cinematografico" senza scroll-linked JS né file più pesanti. */ .js [data-reveal="slow"] { transform: translateY(40px); transition-duration: .9s; } .js [data-reveal="slow"] img { transform: scale(1.04); transition: transform var(--dur-slower) var(--ease-out-expo); } .js [data-reveal="slow"].is-visible img { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .js [data-reveal="slow"] img { transform: none; transition: none; } html { scroll-behavior: auto; } /* Lo zoom delle foto su hover e i transform dei bottoni erano rimasti scoperti: il reduced-motion copriva solo i reveal e il modale. */ .room-feature__figure img, .camera-card__figure img, .esperienza-card__figure img, .galleria-item img, .btn, .whatsapp-float, .link-arrow::after, .link-back::before { transition: none; } .room-feature:hover .room-feature__figure img, .camera-card:hover .camera-card__figure img, .esperienza-card:hover .esperienza-card__figure img, .galleria-item:hover img, .btn:hover, .whatsapp-float:hover { transform: none; } } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-5); } @media (min-width: 782px) { .container { padding-inline: var(--space-8); } } .eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-3); } /* ---------- Bottoni ---------- Il submit di Contact Form 7 è incluso qui invece di essere riscritto a mano più in basso: CF7 genera un a cui non possiamo aggiungere una classe, ma può condividere la stessa regola. */ .btn, .contatti__form-wrap input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-control); font-weight: var(--weight-semibold); font-size: var(--text-sm); border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary, .contatti__form-wrap input[type="submit"] { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn--primary:hover, .contatti__form-wrap input[type="submit"]:hover { background: var(--color-primary-dark); } .btn--ghost { background: var(--on-dark-fill); color: var(--color-white); border-color: var(--on-dark-outline); backdrop-filter: blur(2px); } .btn--ghost:hover { background: var(--on-dark-fill-hover); } .btn--outline-light { background: transparent; color: var(--color-white); border-color: var(--on-dark-outline); } .btn--outline-light:hover { background: var(--on-dark-fill); } .btn--outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-border); } .btn--outline:hover { background: var(--blue-100); border-color: var(--color-primary); } .btn--whatsapp { background: var(--color-whatsapp); color: var(--color-white); } .btn--whatsapp:hover { background: var(--color-whatsapp-dark); } .btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--text-xs); } .btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-secondary); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .link-arrow::after { content: '→'; transition: transform var(--dur-fast) var(--ease-standard); } .link-arrow:hover::after { transform: translateX(3px); } /* Link "indietro" (schede Camera/Esperienza): stessa lingua visiva di .link-arrow ma con la freccia prima del testo, non dopo — non è la stessa classe con un "←" scritto a mano davanti, altrimenti la ::after di .link-arrow aggiungerebbe comunque una seconda freccia in fondo. */ .link-back { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-secondary); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .link-back::before { content: '←'; transition: transform var(--dur-fast) var(--ease-standard); } .link-back:hover::before { transform: translateX(-3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); /* Il fondo dell'header È il fondo della pagina, solo traslucido. Scritto a mano come rgba(242,248,250,…) si desincronizzava in silenzio da --blue-50 al primo cambio di palette. La prima riga è il fallback per i browser senza color-mix (Baseline dal 2023). */ background: rgba(242, 248, 250, .92); background: color-mix(in srgb, var(--surface-page) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .site-header.is-scrolled { background: rgba(242, 248, 250, .98); background: color-mix(in srgb, var(--surface-page) 98%, transparent); box-shadow: var(--shadow-sm); border-bottom-color: transparent; } .site-header__inner { /* Riferimento per il pannello del carrello, che è in posizione assoluta: ancorandosi qui resta allineato alla colonna del contenuto invece che al bordo della finestra, che su schermo largo è tutt'altro posto. */ position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); } .site-header.is-scrolled .site-header__inner { padding-block: var(--space-2); } .site-logo__text { font-family: var(--font-serif); font-size: var(--text-brand); font-weight: var(--weight-bold); color: var(--color-ink); } .site-nav { display: none; } .site-nav__list { display: flex; gap: var(--space-7); } .site-nav__list a { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-ink-soft); transition: color var(--dur-fast) var(--ease-standard); } .site-nav__list a:hover { color: var(--color-primary); } /* Il numero di telefono nella barra in alto non c'è più: il recapito diretto è il pulsante WhatsApp fisso in basso a destra, che si vede anche sul telefono — dove il numero in header, nascosto sotto i 960px, non si è mai visto. Con lui è sparito anche il contenitore .site-header__actions, che non aveva altro dentro. */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 0; } .nav-toggle__bar { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--color-ink); transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); } .site-header.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .site-header.is-nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header.is-nav-open .site-nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--blue-50); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .site-header.is-nav-open .site-nav__list { flex-direction: column; gap: 0; padding: var(--space-2) var(--space-5) var(--space-5); } .site-header.is-nav-open .site-nav__list a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } @media (min-width: 960px) { .site-nav { display: block; } .nav-toggle { display: none; } } /* ---------- CTA dell'header e carrello delle camere ---------- Il contatore delle camere scelte deve potersi vedere proprio sul telefono, da cui arriva la maggior parte delle richieste: appena l'ospite mette una camera nel preventivo, è l'unico posto dove ritrova la sua scelta. Quindi: nascosta su schermo stretto finché il carrello è vuoto (lì "Prenota ora" duplicherebbe solo la voce di menu), e visibile appena c'è qualcosa da contare. */ .site-header__cta { display: none; margin-left: auto; gap: var(--space-2); /* Su schermo stretto la riga dell'header è già piena: la CTA si stringe nei fianchi invece di far andare a capo il logo. */ padding-inline: var(--space-4); white-space: nowrap; } .site-header.has-carrello .site-header__cta { display: inline-flex; } .site-header__cta-testo { display: none; } @media (min-width: 560px) { .site-header__cta-testo { display: inline; } .site-header__cta-breve { display: none; } } @media (min-width: 960px) { .site-header__cta { display: inline-flex; margin-left: 0; padding-inline: var(--space-5); } } .site-header__conteggio { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--radius-full); background: var(--color-white); color: var(--color-primary-dark); font-size: var(--text-2xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1; } .site-header__conteggio[hidden] { display: none; } /* Il riferimento è .site-header__inner, cioè il .container: left/right a 0 allineerebbe il pannello al suo bordo esterno, quindi a filo dello schermo. Rientrando del gutter del container il pannello si incolonna col resto del contenuto e resta una scheda, non una fascia. */ .carrello { position: absolute; top: calc(100% + var(--space-3)); right: var(--space-5); left: var(--space-5); z-index: var(--z-float); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-surface); box-shadow: var(--shadow-lg); } .carrello[hidden] { display: none; } @media (min-width: 560px) { /* Da tablet in su non serve tutta la larghezza: il pannello si stringe sotto la CTA, da cui è stato aperto. */ .carrello { left: auto; width: min(340px, calc(100vw - var(--space-10))); } } @media (min-width: 782px) { /* Il gutter del container cambia a 782px: il pannello lo segue, o si scollerebbe dalla colonna del contenuto. */ .carrello { right: var(--space-8); } } .carrello__testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); } .carrello__titolo { font-size: var(--text-card); margin: 0 0 var(--space-4); } .carrello__chiudi { flex: 0 0 auto; background: none; border: 0; padding: 0 0 0 var(--space-3); font-size: var(--text-md); line-height: 1; color: var(--color-ink-soft); } .carrello__chiudi:hover { color: var(--color-ink); } .carrello__lista { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); } .carrello__voce { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); } .carrello__voce:last-child { border-bottom: 0; } .carrello__voce-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .carrello__voce-ala { font-size: var(--text-2xs); color: var(--color-ink-soft); } .carrello__togli { flex: 0 0 auto; background: none; border: 0; padding: 0; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-ink-soft); text-decoration: underline; } .carrello__togli:hover { color: var(--color-danger); } .carrello__vai { width: 100%; justify-content: center; } .carrello__nota { font-size: var(--text-2xs); color: var(--color-ink-soft); margin: var(--space-3) 0 0; } /* ---------- Hero ---------- Un solo momento, non più una narrazione a scroll: headline, una frase guida, la barra di prenotazione e un link alle camere, accanto a una foto incorniciata (non più sfondo a piena pagina). Stessa superficie chiara del resto della Home — l'hero non è un pannello scuro a parte. */ .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem); } .hero__grid { display: grid; gap: var(--space-10); align-items: center; } .hero__lead { font-size: var(--text-md); color: var(--color-ink-soft); max-width: var(--measure-narrow); margin-top: var(--space-1); } .hero__figure { border-radius: var(--radius-surface); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; } .hero__figure img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 960px) { /* La foto è la seconda cosa che si nota dopo il titolo: le si dà più della metà della riga (invece di uno split quasi 50/50) restando comunque dentro i 1200px del container — mai più larga del file sorgente mostrato a piena pagina, quindi sempre nitida. */ .hero__grid { grid-template-columns: 1fr 1.5fr; } } /* ---------- Barra di prenotazione (hero) ---------- Riusa i campi/input del form reale (.field, input/select): qui si scelgono solo date e ospiti, il submit porta al modulo di prenotazione su /prenota/ con questi valori come parametri d'URL (vedi initHeroBookingBar in main.js e template-parts/prenotazione-form.php). Due righe (date / ospiti+azione) invece di una sola riga a 4 colonne: resta leggibile anche quando la colonna testo si restringe (foto più grande). */ .hero-booking { margin-top: var(--space-7); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-surface); padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-4); } /* `min-width: 0` sulle celle: senza, la larghezza minima intrinseca che i browser impongono a input[type=date] (~150px per il widget del calendario) allargava la traccia della griglia oltre il container, e la card sbordava dallo schermo di 22px a 375px — proprio sull'elemento di conversione principale, sul canale principale. Le due date si impilano sotto i 400px: affiancate non ci stanno e basta. */ .hero-booking__row { display: grid; gap: var(--space-4); } .hero-booking__row > * { min-width: 0; } .hero-booking__row--dates { grid-template-columns: 1fr; } @media (min-width: 400px) { .hero-booking__row--dates { grid-template-columns: 1fr 1fr; } } .hero-booking__row--action { grid-template-columns: 1fr auto; align-items: end; } .hero__rooms-link { display: inline-flex; margin-top: var(--space-6); } /* ---------- Sfondi fotografici di sezione ---------- Le quattro sezioni a tinta piena del sito condividono lo stesso meccanismo, quindi stanno in una regola sola: velo di colore + foto, in un'unica proprietà `background-image` a due livelli (il gradiente a due stop identici è il modo canonico di scrivere un velo piatto in CSS, e costa un pseudo-elemento in meno di un ::before sovrapposto — che qui avrebbe richiesto di rialzare in z-index tutti i figli di ogni sezione). `background-color` resta impostato accanto: è il colore che la sezione aveva prima, e regge da solo se la foto non arriva (404, rete lenta, Save-Data). Nessuna sezione dipende dalla foto per essere leggibile. Perché queste tre e non altre: sono le uniche già a fondo scuro con testo chiaro. Sulle sezioni chiare (.locale, .rooms-preview, .page-intro) una foto di fondo andrebbe velata al 95% per non affogare il testo scuro — a quel punto non si vedrebbe, e si pagherebbero i kB per nulla. Il ritmo dei fondi della Home (DESIGN.md) non cambia: ogni sezione tiene la tinta che aveva, la foto aggiunge grana sotto. Niente `background-attachment: fixed`: è il parallax che DESIGN.md esclude, e su iOS non funziona comunque. */ .intro, .booking, .site-footer { background-size: cover; background-position: center; background-repeat: no-repeat; } /* ---------- Intro ---------- Apertura editoriale: niente eyebrow, niente stat-tile. Un "dek" (la riga guida da rivista, in serif corsivo) introduce il paragrafo; il capolettera sulla prima riga è l'unico ornamento tipografico della sezione. Revisione di luglio 2026 (feedback cliente, "verde più saturo"): lo sfondo passa dal verde chiaro (--surface-soft) al verde pieno --green-700, con testo bianco (v. i token --on-dark* in :root). La sezione chiude con una fascia di campagna a piena larghezza (.intro__campagna), in attesa del video drone annunciato dal cliente in sostituzione della foto fissa. */ /* La foto (fico e filari) è la stessa campagna di cui parla il testo: qui lo sfondo illustra il contenuto, non fa da texture generica. Sotto i 640px passa a un ulivo inquadrato stretto — v. il perché in scripts/optimize-images.sh, array BACKGROUNDS. */ .intro { padding-top: var(--space-section); padding-bottom: 0; background-color: var(--green-700); background-image: linear-gradient(var(--veil-green), var(--veil-green)), var(--photo-intro-narrow); } @media (min-width: 640px) { .intro { background-image: linear-gradient(var(--veil-green), var(--veil-green)), var(--photo-intro); } } .intro__inner { max-width: var(--measure-wide); } .intro h2 { color: var(--color-white); } .intro__dek { font-family: var(--font-serif); font-style: italic; /* Il peso è obbligatorio: fonts.css spedisce Cormorant corsivo SOLO a 500. Senza questa riga si ereditava 400, per cui il browser sintetizzava un finto obliquo invece di usare il file reale. */ font-weight: var(--weight-medium); font-size: var(--text-dek); color: var(--green-100); max-width: var(--measure-tight); margin-bottom: var(--space-5); } .intro__text p { color: var(--on-dark); font-size: var(--text-md); max-width: var(--measure-body); } .intro__text p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 3.4em; /* ottico, non di scala: il capolettera si dimensiona sul suo paragrafo */ font-weight: var(--weight-semibold); float: left; line-height: .82; margin: .05em .1em 0 0; color: var(--green-100); } /* Fascia di campagna a piena larghezza, a chiudere la sezione verde. Stesse proporzioni di .locale__panorama/.page-overture: larga e bassa, mai a piena altezza di viewport — anche se ora i sorgenti (foto def/) non hanno più il tetto di risoluzione delle vecchie compressioni WhatsApp, v. DESIGN.md. --space-band è lo stacco pensato apposta per una fascia che segue un blocco di testo. */ .intro__campagna { margin-top: var(--space-band); aspect-ratio: 16 / 9; max-height: clamp(320px, 60vw, 480px); overflow: hidden; } .intro__campagna img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; } @media (min-width: 782px) { .intro__campagna { aspect-ratio: 2.4 / 1; max-height: clamp(340px, 40vw, 520px); } } /* ---------- Camere (confronto editoriale) ---------- Un dittico, non una griglia di card identiche: da 860px in su le due ali stanno affiancate, visibili insieme — è un confronto reale ("due modi", non un elenco), separate da un'unica regola verticale al centro, non da ombre o bordi tutt'intorno. Sotto gli 860px restano impilate, separate da una regola orizzontale. */ .rooms-preview { padding-block: var(--space-section); background: var(--surface-card); } /* Titolo riscritto in luglio 2026 come frase editoriale lunga ("Due ali, unite da un ponte..."), non più un titolo breve: misura larga sia sul contenitore che sull'h2, il vecchio --measure-micro (20ch, pensato per "Due ali, due modi di stare qui") lo avrebbe spezzato riga per riga. */ .rooms-preview__head { max-width: var(--measure-wide); margin-bottom: var(--space-12); } /* Fotografia del ponte tra le due ali: incorniciata a larghezza container (non .full-bleed) — la sezione è bianca e vive dentro .container, una fascia a tutto schermo qui spezzerebbe il ritmo delle due fasce a piena larghezza già viste sopra (.intro__campagna, .locale__panorama). Stessa cornice delle altre foto incorniciate del sito (.locale__photo, .room-feature__figure): radius + ombra. */ .rooms-preview__bridge { width: 100%; aspect-ratio: 16 / 9; max-height: clamp(280px, 34vw, 460px); overflow: hidden; border-radius: var(--radius-surface); box-shadow: var(--shadow-md); margin-bottom: var(--space-10); } .rooms-preview__bridge img { width: 100%; height: 100%; object-fit: cover; } .rooms-compare { display: flex; flex-direction: column; } .room-feature { padding-block: var(--space-8); } .room-feature + .room-feature { border-top: 1px solid var(--color-border); } /* 3/2 invece di 4/5: le foto sorgente sono 16:9, un ritaglio verticale profondo ne butta via più della metà dei pixel. */ .room-feature__figure { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-surface); margin-bottom: var(--space-6); } .room-feature__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); } .room-feature:hover .room-feature__figure img { transform: scale(1.04); } /* Badge dell'ala. .wing-tag è lo stesso oggetto fuori dal contesto .room-feature (scheda camera singola): una regola sola per entrambi, invece dei due blocchi identici che c'erano prima. */ .room-feature__tag, .wing-tag { display: inline-block; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tag); color: var(--color-primary-dark); background: var(--blue-100); padding: var(--space-1) var(--space-3); border-radius: var(--radius-chip); margin-bottom: var(--space-3); } /* Colore del tag legato all'identità dell'ala (classe), non alla posizione nel markup: così l'ordine delle due card può cambiare senza scambiare i colori. Parte Nuova Boutique = verde, Parte Antica = blu (default). */ .room-feature--nuova .room-feature__tag { color: var(--green-900); background: var(--green-100); } .room-feature__body p { color: var(--color-ink-soft); max-width: var(--measure-narrow); } @media (min-width: 860px) { .rooms-compare { flex-direction: row; align-items: flex-start; gap: var(--space-14); position: relative; } .rooms-compare::before { content: ''; position: absolute; top: .5rem; bottom: .5rem; left: 50%; width: 1px; background: var(--color-border); } .room-feature { flex: 1 1 0; padding-block: 0; } .room-feature + .room-feature { border-top: 0; } } /* ---------- Luogo (mare, riserve, Via Verde) ---------- Sezione firma: un "cartellino d'itinerario" bianco (la sezione è su sfondo blu chiaro, --blue-100) con le distanze reali del posto, accanto a due fotografie impilate (spiaggia, trabocco). Le distanze sono il vero contenuto, non una numerazione decorativa. Revisione di luglio 2026 (feedback cliente): il riposizionamento "casa di mare, non masseria di campagna" chiede che mare e trabocchi comparissero subito — non solo nel testo, anche in foto. .locale__photo passa da una singola immagine a una coppia impilata (.locale__photo--stack); la citazione sulla Via Verde non è più un rigo nel cartellino (.locale__path, rimosso: nessun template lo referenzia più) ma un titolo grande (.locale__via-verde) seguito da una panoramica a piena larghezza (.locale__panorama) — il momento di respiro fotografico della sezione. */ .locale { padding-block: var(--space-section); background: var(--surface-alt); } .locale__grid { display: grid; gap: var(--space-8); } .locale__photo { display: flex; flex-direction: column; gap: var(--space-4); } .locale__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-surface); box-shadow: var(--shadow-md); } .locale__card { background: var(--color-white); border-radius: var(--radius-surface); padding: var(--space-8) var(--space-7); box-shadow: var(--shadow-sm); } .locale__card h2 { max-width: var(--measure-micro); } .locale__card > p { color: var(--color-ink-soft); max-width: var(--measure-narrow); } .itinerary { margin-block: var(--space-7); } .itinerary__stop { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-5); position: relative; padding-bottom: var(--space-6); } .itinerary__stop::before { content: ''; position: absolute; left: .5rem; top: 2.1rem; bottom: 0; width: 1px; background-image: repeating-linear-gradient(180deg, var(--color-primary) 0 4px, transparent 4px 9px); } .itinerary__stop:last-child::before { display: none; } .itinerary__dot { width: 1rem; height: 1rem; margin-top: var(--space-1); border-radius: var(--radius-full); background: var(--color-primary); border: 3px solid var(--color-white); box-shadow: 0 0 0 1px var(--color-primary); } .itinerary__dist { display: block; font-family: var(--font-serif); font-size: var(--text-stat); font-weight: var(--weight-semibold); color: var(--color-primary-dark); line-height: 1.1; } .itinerary__name { display: block; font-weight: var(--weight-semibold); margin-top: var(--space-1); } .itinerary__note { color: var(--color-ink-soft); font-size: var(--text-sm); margin-top: var(--space-1); } /* Titolo grande sulla Via Verde: prima era un rigo (.locale__path, ora rimosso) dentro il cartellino d'itinerario, ora è un momento editoriale a sé tra la griglia e la panoramica — serif, centrato, misura di lettura contenuta perché è una frase intera, non un titolo di due parole. */ .locale__via-verde { max-width: var(--measure-wide); margin-inline: auto; margin-top: var(--space-band); text-align: center; } .locale__via-verde h3 { color: var(--color-primary-dark); } /* Panoramica a piena larghezza sotto il titolo: il momento di respiro fotografico della sezione (v. nota d'apertura del blocco "Luogo" sopra). Stesse proporzioni delle altre fasce a piena larghezza del sito (.intro__campagna, .page-overture): larga e bassa, mai a piena altezza. */ .locale__panorama { margin-top: var(--space-band); aspect-ratio: 16 / 9; max-height: clamp(320px, 60vw, 480px); overflow: hidden; } .locale__panorama img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 782px) { .locale__panorama { aspect-ratio: 2.4 / 1; max-height: clamp(340px, 40vw, 520px); } } .locale__closing { font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-medium); /* v. nota su .intro__dek: il corsivo esiste solo a 500 */ font-size: var(--text-lg); color: var(--color-primary-dark); text-align: center; max-width: var(--measure-narrow); margin-top: var(--space-band); } /* Chiusura della sezione "luogo": la riga editoriale più l'unico ingresso alle esperienze dalla home. Centrati insieme, così il link legge come parte del discorso e non come una CTA appiccicata sotto. */ .locale__outro { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .locale__outro .locale__closing { margin-bottom: 0; } @media (min-width: 960px) { .locale__grid { grid-template-columns: 1fr 1.1fr; align-items: stretch; } /* Le due foto impilate riempiono l'altezza della card accanto, invece di restare ciascuna al proprio aspect-ratio fisso come su mobile. */ .locale__photo { height: 100%; } .locale__photo img { flex: 1 1 0; aspect-ratio: auto; min-height: 0; } .locale__card { padding: var(--space-12); align-self: center; } } /* ---------- Booking form ---------- Blu pieno (--blue-900, testo bianco): l'area di prenotazione sta dalla parte del blu come tutti i CTA primari del sito. Il form (.booking-form) resta una card bianca sopra, come .locale__card sulla sezione blu — il bianco regge su qualunque sfondo di brand. (Fino a luglio 2026 questo commento diceva "stesso verde pieno di .intro, --green-700", in contraddizione con la riga qui sotto, che è sempre stata blu; stessa svista in DESIGN.md e nell'intestazione di front-page.php, corrette insieme.) */ /* L'unica delle quattro foto con del cielo dentro: su schermo largo l'inquadratura centrata tiene la linea dell'orizzonte, ed è il motivo per cui sta qui. Su mobile la sezione diventa molto più alta che larga e `cover` la scala sull'altezza: si vede tutta la foto in verticale (cielo piatto in cima, terra in fondo) e il ritaglio avviene sui lati. Nessuna correzione di `background-position` può cambiarlo — con `cover` l'asse ritagliato è quello che eccede, qui l'orizzontale. Va bene così: il velo rende la sfumatura cielo→terra un fondo che si apre scendendo. */ .booking { padding-block: var(--space-section); background-color: var(--blue-900); background-image: linear-gradient(var(--veil-blue), var(--veil-blue)), var(--photo-booking); } .booking__grid { display: grid; gap: var(--space-10); } .booking__intro h2 { color: var(--color-white); } .booking__intro p { color: var(--on-dark); max-width: var(--measure-narrow); } .booking__phone a { color: var(--color-white); font-weight: var(--weight-semibold); text-decoration: underline; } .booking-form { background: var(--color-white); border-radius: var(--radius-surface); padding: var(--space-7); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-5); } .booking-form__row { display: grid; gap: var(--space-5); } @media (min-width: 640px) { .booking-form__row { grid-template-columns: repeat(2, 1fr); } .booking-form__row:has(.field--sm) { grid-template-columns: 1fr 1fr auto; } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-ink-soft); } .field--sm { min-width: 90px; } /* I campi di Contact Form 7 sono inclusi qui invece di avere un blocco gemello identico più in basso: stesso oggetto, stessa regola. */ input, select, textarea, .contatti__form-wrap .wpcf7-form-control:not([type="submit"]) { font: inherit; padding: var(--space-3) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--surface-page); color: var(--color-ink); } input:focus, select:focus, textarea:focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); } textarea { resize: vertical; } .booking-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-notice { padding: var(--space-4) var(--space-5); border-radius: var(--radius-surface); margin-bottom: var(--space-5); font-weight: var(--weight-medium); } .form-notice--ok { background: var(--color-secondary-light); color: var(--color-secondary-dark); } .form-notice--error { background: var(--color-danger-light); color: var(--color-danger); } @media (min-width: 960px) { .booking__grid { grid-template-columns: .85fr 1.15fr; align-items: start; } } /* ---------- Intro pagina (Prenota, Camere, Da non perdere, Galleria, Contatti) ---------- Niente più eyebrow qui: era ripetuto identico su ogni pagina Fase 2 (tre casi su cinque tautologici col titolo) — l'anti-riferimento esplicito di PRODUCT.md. L'unico eyebrow del sito resta quello dell'hero in Home. Dal 30/07/2026 questa è una **quinta sezione a tinta piena con foto velata**, non più una campitura chiara. Prima era un blocco `--blue-50` con testo scuro: su ogni pagina interna l'ingresso era una fascia pallida quasi indistinguibile dall'header sopra, e il titolo galleggiava nel vuoto. Ora il titolo di pagina sta su fondo blu primario con la stessa grana fotografica delle altre sezioni piene, e l'header chiaro ci stacca sopra con un bordo netto. Perché una sola foto per tutte e cinque le pagine, invece di una per pagina: sotto un velo al .90 il soggetto non è riconoscibile (è il punto di tutto il meccanismo — v. "Sfondi fotografici di sezione" in DESIGN.md), quindi cinque file diversi comprerebbero variazione che nessuno vede, pagandola in kB e in una richiesta in più per pagina. Una sola immagine, in cache dalla prima pagina interna visitata, dà anche un'identità coerente al "sei dentro il sito". `--photo-promo` è la più scura delle cinque di sfondo: massimo margine di contrasto. Condivide il file con `.direct-promo`, che vive solo in Home — e `.page-intro` in Home non c'è mai: nessuna pagina mostra due volte la stessa foto. Il velo resta `--veil-primary` (.90) senza ricalcoli: è lo stesso alpha già verificato su `.direct-promo`, con lo stesso blu e la stessa foto. */ .page-intro { padding-block: var(--space-page-top) var(--space-page-top); background-color: var(--blue-700); background-image: linear-gradient(var(--veil-primary), var(--veil-primary)), var(--photo-promo); } .page-intro__inner { max-width: var(--measure-body); } .page-intro h1 { color: var(--color-white); } .page-intro__lead { font-size: var(--text-md); color: var(--on-dark); max-width: var(--measure-mid); } /* ---------- Full-bleed ---------- Utility per rompere il .container e occupare la larghezza reale del viewport (fasce fotografiche: .page-overture, .intro__campagna, .locale__panorama). Il guard overflow-x:hidden è già su body (vedi Reset essenziale) — 100vw include la scrollbar, senza quel guard basterebbe questa classe a creare scroll orizzontale. */ .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } /* ---------- Overture di pagina (template-parts/page-overture.php) ---------- Un momento fotografico grande PRIMA di .page-intro, non al posto suo — solo sulle pagine dove esiste una foto abbastanza forte da reggerlo (non tutte: vedi il commento in page-overture.php). Larga e bassa, mai un full-bleed a piena altezza: è una scelta editoriale (un momento quieto, non un secondo hero), non più un vincolo di risoluzione dei sorgenti — dalla revisione di luglio 2026 i sorgenti (foto def/) sono foto professionali ad alta risoluzione, non più le compressioni WhatsApp 1600x900 che avevano fissato originariamente questi limiti (v. DESIGN.md). Il massimo è quindi leggermente più alto di prima. */ .page-overture { aspect-ratio: 16 / 9; max-height: clamp(300px, 60vw, 460px); overflow: hidden; } .page-overture img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 782px) { .page-overture { aspect-ratio: 2.4 / 1; max-height: clamp(340px, 40vw, 600px); } } /* ---------- Stato vuoto ---------- Un pannello bianco che spiega perché una sezione non ha contenuto e dove andare invece. Nato come fallback del motore Beds24 (rimosso: la prenotazione dal sito è ora il flusso su /prenota/), resta come componente condiviso di archivio camere, archivio esperienze e pagina Prenota — erano tre copie della stessa cosa sotto un nome che parlava di Beds24. */ .empty-state { background: var(--color-white); border-radius: var(--radius-surface); padding: var(--space-8); box-shadow: var(--shadow-sm); max-width: var(--measure-body); } .empty-state p { color: var(--color-ink-soft); } /* ---------- Footer ---------- */ /* Il velo del footer è il più coprente dei quattro (.93): qui il testo è piccolo e fitto (indirizzo, orari, legal, CIN) e non ha il corpo dei titoli delle sezioni, quindi la foto deve restare appena percepibile — un fondo che respira, non un'immagine. */ .site-footer { background-color: var(--color-ink); background-image: linear-gradient(var(--veil-ink), var(--veil-ink)), var(--photo-footer); color: var(--on-dark); padding-block: var(--space-14) var(--space-6); } /* ---------- Newsletter (card bianca sopra la griglia del footer) ---------- Dal 7/8/2026: non più un blocco scuro coi campi direttamente sul fondo del footer, ma la card bianca .newsletter-invito__card (v. sotto) — "il banner bianco", per scelta esplicita, e da quello stesso giorno l'unico punto di iscrizione del sito: il blocco gemello che stava come sezione a sé su Home, Camere, scheda camera e Contatti è stato tolto perché ridondante col footer, presente su ogni pagina. Questo wrapper resta solo per lo spazio e il filetto che separano la card dal resto del footer, mai un secondo filetto accanto a .site-footer__bottom. */ .site-footer__newsletter-wrap { padding-bottom: var(--space-10); margin-bottom: var(--space-10); border-bottom: 1px solid var(--on-dark-line); } .site-footer__grid { display: grid; gap: var(--space-8); } .site-footer__name { font-family: var(--font-serif); font-size: var(--text-brand); font-weight: var(--weight-bold); color: var(--color-white); } .site-footer__tagline { color: var(--on-dark-muted); margin-top: var(--space-2); } .site-footer__wings { color: var(--on-dark-muted); margin-top: var(--space-4); font-size: var(--text-xs); letter-spacing: var(--tracking-tag); } .site-footer__heading { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-white); margin-bottom: var(--space-4); } .site-footer__heading--social { margin-top: var(--space-6); } .site-footer__list li { margin-bottom: var(--space-2); color: var(--on-dark); } .site-footer__list a:hover { color: var(--blue-400); } .site-footer__social { display: flex; gap: var(--space-3); } .site-footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--on-dark-fill); transition: background var(--dur-fast) var(--ease-standard); } .site-footer__social-link svg { width: 18px; height: 18px; fill: var(--color-white); } a.site-footer__social-link:hover { background: var(--on-dark-fill-hover); } .site-footer__social-link.is-placeholder { opacity: .4; } .site-footer__bottom { border-top: 1px solid var(--on-dark-line); margin-top: var(--space-10); padding-top: var(--space-6); font-size: var(--text-xs); color: var(--on-dark-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; } .site-footer__bottom p { margin: 0; } .site-footer__bottom a { color: var(--on-dark-muted); text-decoration: underline; } .site-footer__bottom a:hover { color: var(--color-white); } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 782px) { .site-footer__grid { grid-template-columns: 1.3fr .9fr 1fr; } } /* ---------- WhatsApp float ---------- */ .whatsapp-float { position: fixed; right: 1.1rem; bottom: 1.1rem; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-whatsapp); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: var(--z-float); transition: transform var(--dur-fast) var(--ease-standard); } .whatsapp-float:hover { transform: scale(1.06); } .whatsapp-float svg { width: 28px; height: 28px; fill: var(--color-white); } /* Non su /prenota/. Lì in basso a destra c'è già il pulsante d'invio — la barra agganciata sotto i 960px, il riquadro del preventivo sopra — e un tondo verde fisso ci finirebbe sopra proprio nel momento in cui l'ospite sta per mandare la richiesta. Chi è arrivato fin lì ha davanti un modulo, non ha bisogno di un altro canale: WhatsApp resta nel footer, in Contatti e nel modulo di riserva in coda alla pagina. */ .pagina-prenota .whatsapp-float { display: none; } /* ========================================================= Fase 2 — Camere, Da non perdere, Galleria, Contatti ========================================================= */ /* ---------- Badge ala ---------- L'aspetto è definito insieme a .room-feature__tag (sezione Home): qui resta solo il modificatore dell'ala Nuova Boutique. */ .wing-tag--nuova { color: var(--green-900); background: var(--green-100); } /* ---------- Camere — archivio ---------- Catalogo vero (fino a 10 camere per ala), non il dittico "due anime" della Home: due gruppi, ciascuno con una griglia di card. Tinta di sezione coerente con l'identità dell'ala, non con la posizione. */ .camere-group { padding-block: var(--space-section); } .camere-group--nuova { background: var(--green-100); } .camere-group--antica { background: var(--blue-100); } .camere-group__head { max-width: var(--measure-mid); margin-bottom: var(--space-10); } .camere-group__head p { color: var(--color-ink-soft); } .camere-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; } @media (min-width: 640px) { .camere-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .camere-grid { grid-template-columns: repeat(3, 1fr); } } .camera-card { background: var(--color-white); border-radius: var(--radius-surface); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .camera-card__figure { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--blue-50); } .camera-card__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); } .camera-card:hover .camera-card__figure img { transform: scale(1.04); } .camera-card__body { padding: var(--space-6) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .camera-card__body h3 { font-size: var(--text-card); margin: 0; } .camera-card__body p { color: var(--color-ink-soft); font-size: var(--text-sm); margin: 0; } .camera-card__capienza { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); } .camera-card__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); } .camera-card__price { font-weight: var(--weight-semibold); color: var(--color-primary-dark); } /* ---------- Camere — scheda singola ---------- */ .camera-single { padding-block: var(--space-page-top) var(--space-section); } .camera-single__back { margin-bottom: var(--space-7); } .camera-single__head { max-width: var(--measure-body); margin-bottom: var(--space-8); } .camera-single__price { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-primary-dark); margin: 0; } /* Prezzo e bottone sulla stessa riga, sopra la galleria: il modo di prenotare si vede senza scorrere. Prima il bottone stava in fondo alla scheda, dopo foto, descrizione e servizi — chi aveva già deciso guardando la miniatura in elenco doveva attraversare tutta la pagina per trovarlo. */ .camera-single__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-5); } .camera-single__prenota { flex: 0 0 auto; } /* Camera già messa da parte. Il bottone non sparisce e non si disabilita: resta lì come interruttore, perché disfare un clic deve costare quanto farlo — mandare a cercare il pannello dell'header per togliere una camera sarebbe farla sentire una scelta irreversibile. */ .camera-single__prenota.is-nel-carrello { background: var(--green-100); border-color: var(--color-secondary); color: var(--color-secondary-dark); } .camera-single__prenota.is-nel-carrello::before { content: '✓'; margin-right: var(--space-2); } .camera-single__prenota.is-nel-carrello:hover { background: var(--green-100); } .camera-single__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-10); } .camera-single__gallery-item { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-surface); overflow: hidden; } .camera-single__gallery-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .camera-single__gallery-item img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 640px) { .camera-single__gallery { grid-template-columns: repeat(3, 1fr); } } .camera-single__body { display: grid; gap: var(--space-8); margin-bottom: var(--space-10); } .camera-single__content { color: var(--color-ink-soft); max-width: var(--measure-body); } .camera-single__content p:last-child { margin-bottom: 0; } .camera-single__servizi { display: flex; flex-wrap: wrap; gap: var(--space-2); } .camera-single__servizi li { background: var(--blue-50); border: 1px solid var(--color-border); border-radius: var(--radius-chip); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); } @media (min-width: 860px) { .camera-single__body { grid-template-columns: 1.4fr 1fr; } } .camera-single__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } /* ---------- Filtri (Da non perdere, Galleria) ---------- */ .filtro-btn { font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-ink-soft); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .filtro-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); } .filtro-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* ---------- Da non perdere — archivio ---------- */ .esperienze-archivio { padding-block: var(--space-page-top-tight) var(--space-section); } .esperienze-filtri { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-10); } .esperienze-filtri__group { display: flex; flex-wrap: wrap; gap: var(--space-2); } .esperienze-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; } @media (min-width: 640px) { .esperienze-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .esperienze-grid { grid-template-columns: repeat(3, 1fr); } } .esperienze-grid__empty { color: var(--color-ink-soft); margin-top: var(--space-4); } .esperienza-card { background: var(--color-white); border-radius: var(--radius-surface); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .esperienza-card__figure { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-100); } .esperienza-card__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); } .esperienza-card:hover .esperienza-card__figure img { transform: scale(1.04); } .esperienza-card__body { padding: var(--space-6) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .esperienza-card__cat { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--green-900); } .esperienza-card__body h3 { font-size: var(--text-card); margin: 0; } .esperienza-card__body p { color: var(--color-ink-soft); font-size: var(--text-sm); margin: 0; } .esperienza-card__body .link-arrow { margin-top: auto; align-self: flex-start; } /* .esperienza-card ha display:flex con la stessa specificità di [hidden]: senza questa regola il flex vincerebbe sull'attributo e il filtro in main.js (initExperienceFilter) non nasconderebbe le card escluse. */ .esperienza-card[hidden] { display: none; } /* ---------- Da non perdere — scheda singola ---------- */ .esperienza-single { padding-block: var(--space-page-top) var(--space-section); } .esperienza-single__head { max-width: var(--measure-body); margin-bottom: var(--space-7); } .esperienza-single__cats { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); } .esperienza-single__meta { color: var(--color-ink-soft); font-size: var(--text-sm); } .esperienza-single__figure { aspect-ratio: 16 / 9; border-radius: var(--radius-surface); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: var(--space-8); } .esperienza-single__figure img { width: 100%; height: 100%; object-fit: cover; } .esperienza-single__content { color: var(--color-ink-soft); max-width: var(--measure-body); margin-bottom: var(--space-8); } .esperienza-single__content p:last-child { margin-bottom: 0; } /* Stessa impaginazione della coppia di CTA nella scheda camera. */ .esperienza-single__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* ---------- Galleria ---------- */ .galleria-pagina { padding-block: var(--space-page-top-tight) var(--space-section); } .galleria-filtri { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); } .galleria-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .galleria-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .galleria-grid { grid-template-columns: repeat(4, 1fr); } } /* 4/3 invece di 1/1: le foto sono tutte 16:9, un riquadro quadrato ne ritaglia via troppo. */ .galleria-item { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-surface); overflow: hidden; } .galleria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); } .galleria-item:hover img { transform: scale(1.04); } .galleria-item[hidden] { display: none; } /* Cella-guida: rompe la griglia uniforme dall'interno invece di aggiungere un'altra fascia sopra (la Galleria non ha .page-overture — la griglia stessa È la fotografia). Solo da 640px in su: sotto, in due colonne, uno span 2x2 diventerebbe una fascia troppo stretta e alta per essere letta come "immagine in evidenza". aspect-ratio:auto perché l'altezza deve seguire le due row-track spannate (definite dagli item 4/3 adiacenti), non un rapporto fisso proprio. */ @media (min-width: 640px) { .galleria-item--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } } /* ---------- Contatti ---------- */ .contatti { padding-block: var(--space-page-top-tight) var(--space-section); } .contatti__grid { display: grid; gap: var(--space-10); } .contatti__list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); } .contatti__list li { display: flex; flex-direction: column; gap: var(--space-1); } .contatti__list a { color: var(--color-primary); font-weight: var(--weight-semibold); } .contatti__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-ink-soft); } .contatti__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Mappa a chiusura pagina, piena larghezza (non più in colonna stretta accanto ai bottoni): niente vincolo di risoluzione qui, è un iframe di mappa live, non una foto — può essere più larga e bassa senza problemi. */ .contatti__map { aspect-ratio: 16 / 9; max-height: clamp(320px, 55vw, 480px); margin-top: var(--space-band); overflow: hidden; } .contatti__map iframe { width: 100%; height: 100%; border: 0; } .contatti__map-fallback { color: var(--color-ink-soft); font-style: italic; margin-top: var(--space-6); } @media (min-width: 782px) { .contatti__map { aspect-ratio: 3 / 1; max-height: clamp(360px, 32vw, 420px); } } .contatti__form-wrap { background: var(--color-white); border-radius: var(--radius-surface); padding: var(--space-7); box-shadow: var(--shadow-sm); } .contatti__form-wrap h2 { margin-bottom: var(--space-5); } .contatti__form-wrap form { display: flex; flex-direction: column; gap: var(--space-5); } .contatti__form-wrap label { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-ink-soft); } .contatti__form-wrap .wpcf7-form-control:focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .contatti__form-wrap textarea.wpcf7-form-control { resize: vertical; min-height: 8rem; } /* Tutto il resto dell'aspetto arriva da .btn / .btn--primary (v. sopra): qui resta solo ciò che è specifico del form CF7. */ .contatti__form-wrap input[type="submit"] { align-self: flex-start; } .contatti__form-wrap .wpcf7-not-valid-tip { color: var(--color-danger); font-size: var(--text-xs); font-weight: var(--weight-medium); margin-top: var(--space-1); } .contatti__form-wrap .wpcf7-response-output { border-radius: var(--radius-surface); padding: var(--space-4) var(--space-5); font-weight: var(--weight-medium); border: 0; margin: 0; } .contatti__form-wrap form.sent .wpcf7-response-output { background: var(--color-secondary-light); color: var(--color-secondary-dark); } .contatti__form-wrap form.failed .wpcf7-response-output, .contatti__form-wrap form.aborted .wpcf7-response-output, .contatti__form-wrap form.spam .wpcf7-response-output { background: var(--color-danger-light); color: var(--color-danger); } .contatti__form-wrap form.invalid .wpcf7-response-output { background: var(--color-danger-light); color: var(--color-danger); } @media (min-width: 960px) { .contatti__grid { grid-template-columns: 1fr 1.1fr; align-items: start; } } /* ---------- Modale d'ingresso (coupon) ---------- Nascosta di default via [hidden] (template-parts/entry-modal.php), mai una condizione JS-only: senza JavaScript resta semplicemente assente, corretto per un'interazione che JS deve comunque pilotare (a differenza di [data-reveal], che deve restare visibile anche senza JS perché è contenuto vero). initEntryModal() in main.js toglie [hidden] una volta per sessione (sessionStorage). */ .entry-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: var(--space-5); } /* .entry-modal ha la stessa specificità di [hidden]: senza questa regola il display:flex vincerebbe sul display:none dell'attributo (stesso bug già corretto per .galleria-item e .esperienza-card). */ .entry-modal[hidden] { display: none; } .entry-modal__backdrop { position: absolute; inset: 0; background: var(--color-scrim); } .entry-modal__dialog { position: relative; background: var(--color-white); border-radius: var(--radius-surface); box-shadow: var(--shadow-md); max-width: 440px; width: 100%; max-height: calc(100vh - 2.5rem); overflow-y: auto; padding: var(--space-8) var(--space-7) var(--space-7); animation: entry-modal-in var(--dur-base) var(--ease-out-expo); } @keyframes entry-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .entry-modal__dialog { animation: none; } } .entry-modal__close { position: absolute; top: .6rem; right: .6rem; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; /* ottico: glifo × dentro un bottone da 34px, non testo */ line-height: 1; color: var(--color-ink-soft); background: transparent; border: 0; border-radius: var(--radius-control); } .entry-modal__close:hover { background: var(--blue-50); color: var(--color-ink); } .entry-modal__badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-white); background: var(--color-primary); padding: var(--space-1) var(--space-3); border-radius: var(--radius-chip); margin-bottom: var(--space-4); } .entry-modal__dialog h2 { margin-bottom: var(--space-3); max-width: var(--measure-micro); } .entry-modal__dialog p { color: var(--color-ink-soft); } .entry-modal__code { color: var(--color-ink); } .entry-modal__code strong { color: var(--color-primary-dark); letter-spacing: var(--tracking-tag); } .entry-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-5); } .entry-modal__dismiss { background: transparent; border: 0; font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-ink-soft); text-decoration: underline; padding: 0; } .entry-modal__dismiss:hover { color: var(--color-ink); } /* Blocco scroll della pagina mentre la modale è aperta (classe su body, impostata da initEntryModal()). */ body.has-entry-modal-open { overflow: hidden; } /* ========================================================= PRENOTAZIONE — /prenota/ ========================================================= */ /* ---------- Modulo a tre passi (template-parts/prenotazione-form.php) ---------- Sfondo --blue-100: è la "zona prenotazione" del sito, la stessa tinta che aveva il vecchio blocco del motore esterno. I passi 2 e 3 arrivano da JS (initPrenotaForm in main.js) man mano che l'ospite avanza: nel markup nascono [hidden], quindi senza JavaScript restano chiusi e il