/* * Vik Base — theme.css * Stili non esprimibili tramite theme.json: layout dei pattern, componenti * custom (card, carosello, griglie), accessibilità e sistema animazioni. * Tutti i valori passano da custom property / preset di theme.json. */ :root { /* Default neutri del parent: skin-terra (e ogni altro child) li sovrascrive nel proprio assets/css/theme.css con i valori di design effettivi (border-radius quasi-zero, sfondo scuro caldo, overlay caldo) — vedi skin-terra/assets/css/theme.css. */ --vik-radius: 0px; --newsletter-bg: var(--wp--preset--color--dark); --vik-overlay-dark: rgba(0, 0, 0, 0.55); --vik-paybar-bg: var(--wp--preset--color--dark); /* * Default = lo stesso avorio caldo hardcoded 4 volte nel resto di questo * file (hero title em, room-overlay-category, packages eyebrow, footer * tagline — tutti testo piccolo/corsivo su sfondo scuro): il default qui * è intenzionalmente lo STESSO valore, così nessuna skin che non lo * ridefinisce (skin-terra, per cui questo valore era stato pensato in * origine — vedi CLAUDE.md) cambia resa. Solo skin-marea lo ridefinisce * col proprio tocco (skin-marea/assets/css/theme.css). */ --vik-overlay-ivory: #e9c9ae; /* Sistema di spaziatura verticale sezioni: valori unici invece di preset scelti caso per caso in ogni pattern. Scala "standard" per le sezioni di contenuto piene, "compact" per fasce sottili come trust-bar. Vedi la regola ".entry-content.wp-block-post-content > *" più sotto nel file per il motivo per cui va sempre accompagnata dall'azzeramento del margin-block-start automatico di WordPress tra le sezioni. */ --vik-section-space-y: var(--wp--preset--spacing--10); --vik-section-space-y-tablet: var(--wp--preset--spacing--8); --vik-section-space-y-mobile: var(--wp--preset--spacing--7); --vik-section-space-y-compact: var(--wp--preset--spacing--6); --vik-section-space-y-compact-tablet: var(--wp--preset--spacing--5); --vik-section-space-y-compact-mobile: var(--wp--preset--spacing--4); /* Gap card griglia standard (camere, pacchetti/offerte) */ --vik-grid-gap: var(--wp--preset--spacing--6); /* Animazioni in entrata: durata/easing unici in tutto il sito */ --vik-anim-duration: 350ms; --vik-anim-ease: ease-out; /* Interlinea del testo corrente (paragrafi ed elenchi), vedi la regola "Interlinea del testo" più sotto. */ --vik-text-line-height: 1.7; /* Interlinea dei titoli grandi che possono andare a capo (titolo dell'Header di pagina). */ --vik-heading-line-height: 1.3; } /* ----------------------------------------------------------- Root padding awareness — responsive theme.json imposta solo il valore desktop (spacing--8, 64px) per "styles.spacing.padding.left/right", perché theme.json non supporta media query: WordPress traduce quel valore in "body { --wp--style--root--padding-right: var(--wp--preset--spacing--8); ... }" dentro global-styles-inline-css, dichiarato direttamente sull'elemento "body" (non su ":root"). Per questo la ridefinizione responsiva va ripetuta qui anch'essa su "body", non su ":root": una custom property dichiarata esplicitamente su un elemento non eredita più da ":root" per quell'elemento, quindi un ":root { --var: ... }" qui non avrebbe alcun effetto sul valore che "body" (e i suoi discendenti) vedono. Stessa identica scala responsiva 64/32/20px (spacing--8/6/5) già in uso per il padding orizzontale di pagina altrove (".page-header--left", "location-split__content", ecc.) — non una scala nuova. Stessa specificità (0,0,1) di "body" nel CSS iniettato da WordPress: vince per ordine di sorgente, essendo theme.css accodato dopo global styles in functions.php. ----------------------------------------------------------- */ @media (max-width: 1023px) { body { --wp--style--root--padding-left: var(--wp--preset--spacing--6); --wp--style--root--padding-right: var(--wp--preset--spacing--6); } } @media (max-width: 767px) { body { --wp--style--root--padding-left: var(--wp--preset--spacing--5); --wp--style--root--padding-right: var(--wp--preset--spacing--5); } } /* ----------------------------------------------------------- Interlinea del testo (2026-10-07) Nessun theme.json imposta un'interlinea: paragrafi ed elenchi restavano a "normal" del browser (circa 1,2 con Inter), stretta per testi lunghi. Non in theme.json (styles.blocks.core/paragraph): lì il selettore del blocco è "p", e colpirebbe anche le etichette dei componenti stampate come

(titolo del sito, eyebrow, numeri di Chi siamo, prezzi, footer). Qui solo il testo scritto come tale: paragrafi senza una classe di componente (eyebrow, o una classe "blocco__elemento" dei pattern) ed elenchi del blocco Lista. :where() = specificità zero, quindi qualunque line-height già dichiarato da un componente continua a valere. ----------------------------------------------------------- */ :where(.wp-block-paragraph:not(.eyebrow):not([class*="__"])), :where(.wp-block-list) { line-height: var(--vik-text-line-height); } /* Componenti compatti con paragrafi senza classe propria (righe della trust bar, didascalie dei numeri di Chi siamo, header e footer): restano all'interlinea di prima. */ :where(.site-header, .site-footer, .trust-bar, .about-story__stat) :where(.wp-block-paragraph) { line-height: normal; } /* ----------------------------------------------------------- Link senza sottolineatura, a livello globale VikBooking carica Bootstrap 3 (vikbooking/site/resources/bootstrap.min.css) che dichiara "a:hover, a:focus { text-decoration: underline }" e ".btn-link:hover, .btn-link:focus { ... underline }" su tutto il sito. "body a:hover" (0,1,2) e "body .btn-link:hover" (0,2,1) superano le regole Bootstrap (0,1,1)/(0,2,0) a prescindere dall'ordine di caricamento. I componenti che vogliono esplicitamente la sottolineatura la dichiarano con selettori di classe + :hover (specificità ≥ 0,2,0), che continuano a vincere. Il caso a riposo è coperto anche da theme.json (styles.elements.link.typography.textDecoration). ----------------------------------------------------------- */ body a, body a:hover, body a:focus, body .btn-link:hover, body .btn-link:focus { text-decoration: none; } /* ----------------------------------------------------------- Accessibilità ----------------------------------------------------------- */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); border: 0; } .skip-link.screen-reader-text:focus { position: fixed; top: var(--wp--preset--spacing--3); left: var(--wp--preset--spacing--3); z-index: 100000; width: auto; height: auto; padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); clip: auto; background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); text-decoration: none; border-radius: var(--vik-radius); } :focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* ----------------------------------------------------------- Breakout a tutta larghezza — esplicito e non dipendente dal solo CSS automatico generato da WordPress per i layout "constrained", che con alcuni annidamenti (es. dentro wp-block-post-content) può non applicarsi visivamente. ----------------------------------------------------------- */ .alignfull { width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Da quando "useRootPaddingAwareAlignments" è attivo in theme.json (vedi sotto per il motivo), WordPress stesso inietta ".has-global-padding > .alignfull { margin-left/right: calc(var(--wp--style--root--padding-*) * -1) }" in global-styles-inline-css — stessa identica specificità (due classi) della regola ".alignfull" qui sopra, quindi vincerebbe lei sull'ultima dichiarata, azzerando il vero breakout a piena viewport e restringendo ogni sezione full-bleed (hero-search, trust-bar, rooms-carousel, amenities-grid-section, experiences-carousel, cta-banner, newsletter-placeholder, location-split, packages-featured, ecc.) alla sola larghezza del padding di root. Ripetuta qui, DOPO global-styles-inline-css nel (vik-base-theme è messo in coda a vik-base-style/global styles in functions.php), la stessa identica specificità vince per ordine di sorgente — nessun bisogno di !important, stesso schema già usato altrove in questo file. */ .has-global-padding > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ----------------------------------------------------------- Sistema di spaziatura verticale sezioni Ogni sezione della pagina controlla il proprio spazio SOLO tramite padding-top/bottom (token qui sopra in ":root"): lo stile globale di WordPress ":root :where(.is-layout-constrained) > * { margin-block-start: 24px }" applicato ai figli diretti di ".entry-content" si sommava a quel padding creando spazi doppi e incoerenti da una sezione all'altra. Azzerato qui con un selettore a due classi (0,2,0), più specifico del ":root" di WordPress, così vince senza "!important" — stesso schema già usato per "body:has(.hero-bg.is-height-full) #main" più sotto e per ".experiences-dark__track > .wp-block-vik-base-experience-card". ----------------------------------------------------------- */ .entry-content.wp-block-post-content > * { margin-block-start: 0; } /* WordPress core (wp-includes/blocks/group/theme.min.css) ships a default ":where(.wp-block-group.has-background) { padding: 1.25em 2.375em }" for ANY Group block that gets a background color — including via the Inspector's Color panel, not just the backgroundColor already baked into some of these patterns (rooms-carousel, amenities-grid-section, experiences-dark, ecc.). Because ":where()" has zero specificity, our own padding-top/bottom above already overrides the vertical half, but nothing here was overriding padding-left/right — so setting (or already having) a background color silently added ~38px of unwanted horizontal padding inside these full-bleed sections. Reset explicitly, unconditionally (not just ".has-background"), since horizontal spacing for these sections is always handled by an inner wrapper with its own max-width, never by the outer full-bleed section itself. ECCEZIONE — ".rooms-grid", ".rooms-carousel", ".rooms-list" e ".events-showcase-section" NON sono più in questo elenco. Il loro wrapper interno ("*__wrapper", vedi patterns/rooms-carousel.php ecc.) usa "layout":{"type":"constrained","contentSize":"1200px"} nativo, senza alcun CSS proprio per il padding orizzontale — a differenza degli altri qui sotto non hanno "un wrapper interno con max-width e padding propri", si appoggiano al tutto al meccanismo nativo di WordPress. Da quando "useRootPaddingAwareAlignments" è attivo (vedi in cima al file), quel meccanismo nativo è "has-global-padding" sulla sezione esterna stessa: azzerare qui il suo padding, come prima, toglieva l'unico padding che il wrapper interno riceve (il wrapper nested viene già azzerato da WordPress stesso per evitare il doppio padding, vedi ".has-global-padding :where(...)" iniettato in global-styles-inline-css) — risultato, testo a bordo vivo su mobile (dal vivo su "Ogni camera, la sua storia."). */ .hero-search, .trust-bar, .search-page-header, .intro-text-image, .offers-featured, .packages-featured, .packages-grid-section, .amenities-grid-section, .how-it-works, .experiences-carousel, .experiences-dark, .location-split, .cta-banner { padding-left: 0; padding-right: 0; } .trust-bar, .intro-text-image, .rooms-grid, .rooms-carousel, .rooms-list, .offers-featured, .packages-featured, .packages-grid-section, .amenities-grid-section, .how-it-works, .experiences-carousel, .experiences-dark, .events-showcase-section, .cta-banner { padding-top: var(--vik-section-space-y); padding-bottom: var(--vik-section-space-y); } /* trust-bar e search-page-header sono fasce sottili, non sezioni di contenuto piene: usano la scala "compact" invece dello standard qui sopra. search-page-header (header contestuale della pagina "Cerca disponibilità") deve restare contenuto in altezza per non competere con il search form che segue subito sotto. */ .trust-bar, .search-page-header { padding-top: var(--vik-section-space-y-compact); padding-bottom: var(--vik-section-space-y-compact); } /* Vedi il commento su ".trust-bar__item" più sotto nel file: rete di sicurezza contro il quirk flexbox del secondo item review che si allarga a piena riga. Non fa parte dell'elenco di reset "padding-left/right: 0" più sopra — qui il padding è voluto. */ .trust-bar { box-sizing: border-box; padding-left: var(--wp--preset--spacing--8); padding-right: var(--wp--preset--spacing--8); } @media (max-width: 1023px) { .trust-bar { padding-left: var(--wp--preset--spacing--6); padding-right: var(--wp--preset--spacing--6); } } @media (max-width: 767px) { .trust-bar { padding-left: var(--wp--preset--spacing--5); padding-right: var(--wp--preset--spacing--5); } } @media (max-width: 1023px) { .trust-bar, .intro-text-image, .rooms-grid, .rooms-carousel, .rooms-list, .offers-featured, .packages-featured, .packages-grid-section, .amenities-grid-section, .how-it-works, .experiences-carousel, .experiences-dark, .events-showcase-section, .cta-banner { padding-top: var(--vik-section-space-y-tablet); padding-bottom: var(--vik-section-space-y-tablet); } .trust-bar, .search-page-header { padding-top: var(--vik-section-space-y-compact-tablet); padding-bottom: var(--vik-section-space-y-compact-tablet); } } @media (max-width: 767px) { .trust-bar, .intro-text-image, .rooms-grid, .rooms-carousel, .rooms-list, .offers-featured, .packages-featured, .packages-grid-section, .amenities-grid-section, .how-it-works, .experiences-carousel, .experiences-dark, .events-showcase-section, .cta-banner { padding-top: var(--vik-section-space-y-mobile); padding-bottom: var(--vik-section-space-y-mobile); } .trust-bar, .search-page-header { padding-top: var(--vik-section-space-y-compact-mobile); padding-bottom: var(--vik-section-space-y-compact-mobile); } } /* ----------------------------------------------------------- page-header — intestazione contestuale condivisa (eyebrow + H1 + sottotitolo su sfondo background-alt), unica sorgente di verità per Galleria, Offerte, Pacchetti, Chi siamo, Contatti e gli archivi Esperienze/Eventi (blocco dinamico vik-base/page-header, vedi blocks/page-header/render.php) — prima ognuna di queste pagine aveva la propria classe e il proprio blocco di regole quasi identico qui sotto (.gallery-page-header, .experiences-page-header, .promotions-page-header: tutte e tre rimosse, era la causa della deriva visiva vista pagina per pagina). ".search-page-header" resta un alias storico, selettori uniti ovunque sotto: markup scritto a mano (non passato al blocco condiviso in questo giro) nelle pagine legali (Privacy Policy, Cookie Policy, Termini e Condizioni, vedi .legal-page-content più sotto) e in "Cerca disponibilità" continua a usare la classe letterale "search-page- header" nel proprio post_content — cambiarla avrebbe richiesto toccare quelle pagine una per una senza un vero bisogno, dato che il risultato visivo è comunque identico a ".page-header--compact". Contenuto centrato entro la stessa larghezza usata dal resto del sito per i blocchi "constrained" nativi (contentSize 1200px, vedi theme.json) — qui replicata a mano su "> *" perché questo non è un core/group con layout "constrained" gratuito, è un div reso da PHP: non riceve mai la classe "has-global-padding" che WordPress applica automaticamente ai blocchi nativi (vedi "useRootPaddingAwareAlignments" in cima al file), quindi il padding orizzontale va dichiarato qui a mano, stessa scala responsiva 64/32/20px del resto del tema — senza non c'è alcun margine dal bordo reale della viewport su mobile (sottotitolo confermato dal vivo su "Chi siamo"). */ .page-header, .search-page-header { box-sizing: border-box; padding-top: 48px; padding-right: var(--wp--preset--spacing--8); padding-bottom: 40px; margin-bottom: var(--wp--preset--spacing--6); padding-left: var(--wp--preset--spacing--8); text-align: center; } .page-header > *, .search-page-header > * { max-width: var(--wp--style--global--content-size, 1200px); margin-left: auto; margin-right: auto; } .page-header .wp-block-heading, .page-header .wp-block-query-title, .search-page-header .wp-block-heading { margin: 0 auto var(--wp--preset--spacing--3); /* Interlinea (2026-10-07): era "normal" (circa 1,2), con un titolo lungo che va a capo, soprattutto su mobile, le righe risultavano attaccate. */ line-height: var(--vik-heading-line-height); } /* Solo l'H1 dinamico degli archivi (titleSource "archive") pesava già 600 prima del merge — invariato, non esteso alle altre varianti che non lo avevano (Galleria, Cerca disponibilità/pagine legali). */ .page-header .wp-block-query-title { font-weight: 600; } /* Più respiro tra il badge eyebrow e il titolo rispetto allo spacing--2 di ".eyebrow" (usato invariato altrove nel sito): qui l'eyebrow è da solo sopra un H1, non appena sopra un paragrafo di testo come nelle altre sezioni, quindi la gerarchia titolo/badge ha bisogno di più aria. */ .page-header .eyebrow, .page-header .is-style-eyebrow, .search-page-header .eyebrow, .search-page-header .is-style-eyebrow { margin-bottom: var(--wp--preset--spacing--4); } .page-header p:last-child, .search-page-header p:last-child { max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: 0; color: var(--wp--preset--color--text-soft); /* Descrizione: stessa interlinea del testo corrente (vedi "Interlinea del testo"), il paragrafo è stampato dal blocco senza la classe wp-block-paragraph a cui si aggancia quella regola. */ line-height: var(--vik-text-line-height); } @media (max-width: 1023px) { .page-header, .search-page-header { padding-top: var(--vik-section-space-y-compact-tablet); padding-right: var(--wp--preset--spacing--6); padding-bottom: var(--vik-section-space-y-compact-tablet); padding-left: var(--wp--preset--spacing--6); } } @media (max-width: 767px) { .page-header, .search-page-header { padding-top: var(--vik-section-space-y-compact-mobile); padding-right: var(--wp--preset--spacing--5); padding-bottom: var(--vik-section-space-y-compact-mobile); padding-left: var(--wp--preset--spacing--5); } } /* Sfondo scelto dall'utente (2026-10-06, blocks/page-header/render.php): colore dalla palette (default background-alt, invariato) e immagine opzionale con velatura scura regolabile (--page-header-overlay, 0–0.9) e punto focale (--page-header-position). Il colore resta sotto l'immagine come ripiego finché questa non è caricata. */ .page-header--has-image { background-image: linear-gradient( rgba(30, 30, 30, var(--page-header-overlay, 0.45)), rgba(30, 30, 30, var(--page-header-overlay, 0.45)) ), var(--page-header-image); background-position: center, var(--page-header-position, 50% 50%); background-size: cover; background-repeat: no-repeat; } /* Testo chiaro sopra un'immagine o un colore scuro della palette (stesso elenco di .intro-text-image-bleed__panel), salvo un colore testo scelto esplicitamente dall'utente (.has-text-color, gestito sotto). "ink" è lo slug del testo scuro nelle skin, "text" quello del parent. */ .page-header:not(.has-text-color):is( .page-header--has-image, .has-text-background-color, .has-ink-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) { color: var(--wp--preset--color--white); } .page-header:not(.has-text-color):is( .page-header--has-image, .has-text-background-color, .has-ink-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) .wp-block-heading { color: var(--wp--preset--color--white); } .page-header:not(.has-text-color):is( .page-header--has-image, .has-text-background-color, .has-ink-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) p:last-child { color: rgba(255, 255, 255, 0.85); } /* Eyebrow: accent su scuro sarebbe illeggibile (accent su accent, o contrasto insufficiente su foto) — stesso avorio caldo del titolo hero. */ .page-header:not(.has-text-color):is( .page-header--has-image, .has-text-background-color, .has-ink-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) .eyebrow { color: var(--vik-overlay-ivory); } /* Colore testo scelto dall'utente: vale per titolo, eyebrow e sottotitolo, che altrimenti hanno ciascuno un colore proprio. */ .page-header.has-text-color .wp-block-heading, .page-header.has-text-color .eyebrow, .page-header.has-text-color p:last-child { color: inherit; } .page-header.has-text-color p:last-child { opacity: 0.85; } /* Modificatore "compatto" (attributo "density":"compact" del blocco) — lascia spazio a un form/elenco subito sotto (Offerte, Pacchetti), stessa scala già usata da ".search-page-header" qui sopra. */ .page-header--compact { padding-top: var(--vik-section-space-y-compact); padding-bottom: var(--vik-section-space-y-compact); } @media (max-width: 1023px) { .page-header--compact { padding-top: var(--vik-section-space-y-compact-tablet); padding-bottom: var(--vik-section-space-y-compact-tablet); } } @media (max-width: 767px) { .page-header--compact { padding-top: var(--vik-section-space-y-compact-mobile); padding-bottom: var(--vik-section-space-y-compact-mobile); } } /* Modificatore "a sinistra" (attributo "contentAlign":"left", oggi solo Offerte/Pacchetti) — serve anche un padding orizzontale esplicito, dato che sotto i 1200px di content-size il layout non lo aggiunge da solo (stesso problema già documentato per ".vb-shortcode-wrap" in vikbooking-overrides.css). Stessa identica scala responsive di quel selettore (spacing--5/6/8 a 0/768/1024px) per restare allineato al resto della pagina. Heading con font-size esplicito perché qui niente hero fotografico sopra a "spingere" la gerarchia visiva come nella variante spaziosa/centrata. */ .page-header--left { text-align: left; padding-left: var(--wp--preset--spacing--5); padding-right: var(--wp--preset--spacing--5); } .page-header--left > * { margin-left: 0; margin-right: 0; } .page-header--left p:last-child { max-width: none; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { .page-header--left { padding-left: var(--wp--preset--spacing--6); padding-right: var(--wp--preset--spacing--6); } } @media (min-width: 1024px) { .page-header--left { padding-left: var(--wp--preset--spacing--8); padding-right: var(--wp--preset--spacing--8); } } .page-header--left .wp-block-heading { font-family: var(--wp--preset--font-family--display); /* "--2-xl", non "--2xl": WordPress genera le custom property dei fontSizes con un trattino prima di un token che inizia con cifra (slug "2xl" in theme.json → variabile "--font-size--2-xl"). */ font-size: var(--wp--preset--font-size--2-xl); font-weight: 500; } /* ----------------------------------------------------------- legal-page — corpo delle pagine legali (Privacy Policy, Cookie Policy, Termini e Condizioni). Header contestuale sopra riusa invariata ".search-page-header"; qui solo il corpo testo, colonna singola più stretta della contentSize di pagina (1200px) per la leggibilità di testo denso. Padding orizzontale esplicito perché, a differenza delle altre sezioni del tema, questo blocco non ha un wrapper interno con max-width proprio: sui viewport sotto la contentSize (800px) i figli del layout "constrained" riempiono tutta la larghezza disponibile, quindi senza padding qui il testo toccherebbe i bordi dello schermo. ----------------------------------------------------------- */ .legal-page-content { padding-top: var(--vik-section-space-y); padding-bottom: var(--vik-section-space-y); padding-left: var(--wp--preset--spacing--8); padding-right: var(--wp--preset--spacing--8); } .legal-page-content h2, .legal-page-content h3 { font-family: var(--wp--preset--font-family--body); font-weight: 600; } @media (max-width: 1023px) { .legal-page-content { padding-top: var(--vik-section-space-y-tablet); padding-bottom: var(--vik-section-space-y-tablet); padding-left: var(--wp--preset--spacing--6); padding-right: var(--wp--preset--spacing--6); } } @media (max-width: 767px) { .legal-page-content { padding-top: var(--vik-section-space-y-mobile); padding-bottom: var(--vik-section-space-y-mobile); padding-left: var(--wp--preset--spacing--5); padding-right: var(--wp--preset--spacing--5); } } /* Callout "contenuto di esempio" — stesso linguaggio visivo della nota informativa già usata per i disclaimer nativi di VikBooking (vedi ".vbo-precheckin-disclaimer" in vikbooking-overrides.css: sfondo background-alt, icona accent, testo text-soft), qui però costruita con blocchi nativi (Group + HTML + Paragraph) perché è contenuto editoriale della pagina, non output del plugin. */ .legal-notice { align-items: flex-start; gap: var(--wp--preset--spacing--3); margin-bottom: var(--wp--preset--spacing--6); padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5); border-radius: var(--vik-radius); } .legal-notice__icon { display: flex; flex-shrink: 0; margin-top: 2px; color: var(--wp--preset--color--accent); } .legal-notice__text { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--wp--preset--color--text-soft); font-size: var(--wp--preset--font-size--sm); line-height: 1.5; } /* ----------------------------------------------------------- Utility condivise tra i pattern ----------------------------------------------------------- */ .eyebrow, .is-style-eyebrow { display: block; margin-bottom: var(--wp--preset--spacing--2); color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; } .section-head { margin-bottom: var(--wp--preset--spacing--6); text-align: center; } .section-head--left { text-align: left; } /* ----------------------------------------------------------- CTA — varianti riutilizzabili del bottone/link di invito all'azione. Usabili in qualsiasi pattern (intro-text-image, hero-search, offers-featured, cta-banner, ecc.) assegnando la classe al blocco Button/Buttons dall'editor. ----------------------------------------------------------- */ .wp-block-button.cta-pill .wp-block-button__link { display: inline-flex; align-items: center; padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); background-color: transparent; border: 1px solid var(--wp--preset--color--ink); border-radius: 100px; box-shadow: none; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--sm); font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .wp-block-button.cta-pill .wp-block-button__link:hover { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wp-block-button.cta-link-arrow .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--2); padding: 0 0 var(--wp--preset--spacing--1); background-color: transparent; border: none; border-bottom: 1px solid var(--wp--preset--color--accent); border-radius: 0; box-shadow: none; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .wp-block-button.cta-link-arrow .wp-block-button__link::after { content: "\2192"; transition: transform 0.2s ease; } .wp-block-button.cta-link-arrow .wp-block-button__link:hover::after { transform: translateX(4px); } /* * cta-outline — bottone secondario "outline" su sfondo scuro/foto (usato da * ".hero-search-compact__cta"): border/testo chiari, sfondo trasparente a * riposo, si riempie di bianco all'hover. Classe CSS libera sul blocco * Button, non i supporti nativi border/color di core/button (che serializzano * come stile inline sul link, non come classi preset "has-*-color" — * evitato qui per restare sullo stesso schema, già validato, di * ".cta-pill"/".cta-link-arrow" sopra). */ .wp-block-button.cta-outline .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--2); background-color: transparent; border: 1px solid var(--wp--preset--color--white); border-radius: var(--vik-radius); color: var(--wp--preset--color--white); box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease; } .wp-block-button.cta-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); } /* Freccia coerente con ".cta-link-arrow" sopra: stesso glifo, qui inline invece che in coda via ::after perché il bottone ha già "gap" flex per lo spazio con il testo. */ .wp-block-button.cta-outline .wp-block-button__link::after { content: "\2192"; transition: transform 0.2s ease; } .wp-block-button.cta-outline .wp-block-button__link:hover::after { transform: translateX(4px); } /* ----------------------------------------------------------- site-header — logo, navigazione, CTA ----------------------------------------------------------- */ .site-header__logo, .site-header__logo a { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--lg); font-weight: 500; letter-spacing: 0.02em; color: var(--wp--preset--color--ink); text-decoration: none; } /* * Logo immagine (core/site-logo, vedi inc/site-logo.php): limitato in * altezza, larghezza proporzionale. "width/height: auto" annullano i 120px * fissi di ".wp-block-site-logo.is-default-size img" del core, che con un * limite d'altezza deformerebbero i loghi non orizzontali. */ .site-header { --vik-site-logo-max-height: 44px; --vik-site-logo-max-width: 160px; } @media (min-width: 1024px) { .site-header { --vik-site-logo-max-height: 56px; --vik-site-logo-max-width: 220px; } } .site-footer { --vik-site-logo-max-height: 72px; --vik-site-logo-max-width: 220px; } .site-header .site-header__brand-logo.wp-block-site-logo img, .site-footer .site-footer__brand-logo.wp-block-site-logo img { display: block; width: auto; height: auto; max-width: var(--vik-site-logo-max-width); max-height: var(--vik-site-logo-max-height); } .site-header__nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--body); padding-bottom: var(--wp--preset--spacing--1); border-bottom: 1px solid transparent; transition: border-color 200ms ease; } .site-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .site-header__nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--wp--preset--color--accent); } /* * vik-base/language-switcher (giro multi-lingua, punto 6) — stesso * trattamento "sottolineatura bottom accent" della voce di nav attiva sopra * (.site-header__nav .wp-block-navigation-item__content), non un componente * visivamente distinto: è pensato per stare accanto alla navigazione nello * stesso header, non per richiamare l'attenzione come una CTA. */ .vik-base-language-switcher__list { display: flex; align-items: center; gap: var(--wp--preset--spacing--3); margin: 0; padding: 0; list-style: none; } .vik-base-language-switcher__item a { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: inherit; padding-bottom: var(--wp--preset--spacing--1); border-bottom: 1px solid transparent; transition: border-color 200ms ease; } .vik-base-language-switcher__item a:hover, .vik-base-language-switcher__item.is-current a { border-bottom-color: var(--wp--preset--color--accent); } .site-header__cta .wp-block-button__link { border-radius: var(--vik-radius); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* * site-header — variante "Fisso in cima (sticky)" (attributo "Stile Header" * nell'Inspector del template part, assets/js/editor/site-header-style- * control.js): nessun filtro server-side qui, un solo blocco header * condiviso da tutto il sito, la classe modificatrice basta da sola. * * "position:sticky" va sul wrapper ".wp-block-template-part" (generato * automaticamente da WordPress attorno all'output di OGNI template part, * qui un secondo elemento

attorno al nostro ".site-header"), non * su ".site-header" stesso: verificato dal vivo con Playwright che * mettendolo lì l'header smette di seguire lo scroll subito dopo il primo * pixel. Motivo — il "containing block" di un elemento sticky è il suo * blocco genitore più vicino, non il documento; ".wp-block-template-part" * è alto esattamente quanto ".site-header" (nessun contenuto proprio, lo * avvolge e basta), quindi un ".site-header" sticky avrebbe margine per * restare fisso pari a zero, uscendo dallo schermo al primo scroll * insieme al proprio genitore. Il wrapper invece è figlio diretto di * ".wp-site-blocks" (alto quanto l'intera pagina), il "containing block" * corretto perché lo sticky abbia margine per restare fisso lungo tutto lo * scroll. ":has(> ...)" scoped al solo figlio diretto marcato: il footer, * altro template part con la stessa classe wrapper, non viene toccato. * * Specificità volutamente contenuta (":has()" conta come una classe, qui * una sola su un elemento diverso da ".site-header"): resta più debole dei * selettori "body:has(.hero-search--immersive-centered) .site-header" ecc. * più sotto (0,2,0 grazie a ":has()" su "body"), quindi quando l'hero * attivo è una delle varianti scure con header in overlay, quel * trattamento (position:absolute, sfondo trasparente) vince comunque senza * bisogno di "!important" — le due modalità non sono pensate per convivere * sulla stessa pagina, ma se capitasse l'overlay resta la scelta più * sicura (l'alternativa, l'header sticky con sfondo pieno, coprirebbe * l'hero). */ .wp-block-template-part:has(> .site-header--sticky) { position: sticky; top: 0; z-index: 40; } .site-header--sticky { background-color: var(--wp--preset--color--background); border-bottom: 1px solid var(--wp--preset--color--line); } /* * site-header — variante "Trasparente sopra l'hero" (MAREA.md §3): * trasparente sopra un hero full-size in cima alla pagina, diventa sfondo * pieno dopo ~40px di scroll (classe "is-scrolled", vedi assets/js/header- * scroll-state.js). Ha effetto SOLO quando il body porta la classe * "vik-has-fullsize-hero" (rilevata server-side da * inc/header-fullsize-hero.php in base al primo blocco della pagina) — su * qualunque altra pagina (interne, camera singola, legali, 404, risultati * ricerca) questa stessa classe modificatrice ricade SENZA alcuna * impostazione per-pagina sullo stesso trattamento solido di * ".site-header--sticky" sopra, dichiarato qui come base non condizionata. * * "position:fixed" (non "position:sticky" come ".site-header--sticky" * sopra) va bene direttamente sull'header stesso, senza l'indirizione sul * wrapper ".wp-block-template-part": il containing block di un elemento * fixed è il viewport (o il primo antenato con transform/filter/ * perspective, nessuno dei due presente qui), non il genitore immediato — * a differenza di sticky, qui non c'è il problema "il genitore non ha * margine per farlo restare fisso" che aveva reso necessario il wrapper * per la sticky (vedi il commento su quella regola sopra). Un header fixed * esce inoltre del tutto dal flusso: il wrapper collassa a altezza 0 e * l'hero sotto può davvero partire dal bordo dello schermo ("l'header * sovrappone l'hero, l'hero non scende"). */ .site-header--transparent-overlay { background-color: var(--wp--preset--color--background); border-bottom: 1px solid var(--wp--preset--color--line); box-shadow: none; transition: background-color 200ms ease, border-color 200ms ease; } @media (prefers-reduced-motion: reduce) { .site-header--transparent-overlay { transition: none; } } body.vik-has-fullsize-hero .site-header--transparent-overlay { position: fixed; inset: 0 0 auto 0; z-index: 40; background-color: transparent; border-bottom-color: transparent; } /* Offset per la admin bar di WordPress (32px desktop, 46px <=782px — soglia e valori nativi di WP, non una scelta del tema): senza questo l'header fixed finisce sotto o sovrapposto alla admin bar invece che appena sotto. ".site-header--sticky" non ne ha bisogno: "position:sticky" resta nel flusso normale, che l'admin bar sposta già in blocco via "html.wp-toolbar". */ body.vik-has-fullsize-hero.admin-bar .site-header--transparent-overlay { top: 32px; } @media screen and (max-width: 782px) { body.vik-has-fullsize-hero.admin-bar .site-header--transparent-overlay { top: 46px; } } body.vik-has-fullsize-hero .site-header--transparent-overlay.is-scrolled { background-color: var(--wp--preset--color--background); border-bottom-color: var(--wp--preset--color--line); } /* * Stato trasparente (non ancora scrollato): logo, voci di nav e selettore * lingua passano a un colore chiaro leggibile sulla foto sottostante — lo * stesso schema già usato per le varianti hero scure più sotto in questo * file (".site-header__logo" ecc. dentro "body:has(...)"), qui però * condizionato anche da ":not(.is-scrolled)" perché lo stesso elemento * header cambia stato in pagina, non è un trattamento fisso per tutta la * visita. Site-title è testo (non immagine, vedi parts/header.html): basta * cambiare "color", nessun filtro immagine necessario — se in futuro il * logo diventasse un'immagine, l'approccio più semplice e robusto è un * secondo file logo chiaro mostrato/nascosto con lo stesso selettore * ":not(.is-scrolled)" (un CSS "filter:brightness()/invert()" su una foto * reale del logo produce risultati incoerenti a seconda dei colori del * logo stesso, un secondo asset preparato ad hoc resta l'unica soluzione * realmente robusta per un'immagine). * * ".wp-block-navigation__responsive-container:not(.is-menu-open)" — il * pannello mobile a schermo intero (aperto dall'hamburger) è un discendente * dello stesso ".site-header__nav" ma ha uno sfondo chiaro proprio, * indipendente dalla foto dietro la barra header: senza questa esclusione * i link risultavano bianchi su sfondo bianco, illeggibili (verificato con * Playwright, screenshot del pannello aperto). */ body.vik-has-fullsize-hero .site-header--transparent-overlay:not(.is-scrolled) .site-header__logo, body.vik-has-fullsize-hero .site-header--transparent-overlay:not(.is-scrolled) .site-header__logo a, body.vik-has-fullsize-hero .site-header--transparent-overlay:not(.is-scrolled) .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content, body.vik-has-fullsize-hero .site-header--transparent-overlay:not(.is-scrolled) .vik-base-language-switcher__item a { color: var(--wp--preset--color--white); } /* * CTA "Prenota Ora": nello stato trasparente non resta il bottone pieno * accent/bianco di default (contrasto non garantito con qualunque foto * sotto, vedi CLAUDE.md) ma un trattamento a sé, sfondo pieno chiaro + * testo scuro (stesso principio "mai un outline chiaro su foto per un CTA * primario" già seguito per gli outline secondari) — poi torna al bottone * accent normale una volta in stato "is-scrolled". * * Non una semplice "background-color"/"color" qui: le classi core * ".has-accent-background-color"/".has-white-color" già sul blocco * (generate dal pannello colore nativo del bottone) vengono emesse da * WordPress con "!important" (verificato nell'HTML servito, non * un'assunzione) — nessuna specificità, per quanto alta, le batte senza * ricorrere anch'essa a "!important", vietato dalle regole del tema. * Ridefinendo qui le CUSTOM PROPERTY che quelle regole "!important" * referenziano (non le proprietà finali) si ottiene lo stesso risultato * senza mai scrivere "!important": la regola core resta quella che vince * (è sempre lei ad applicarsi), ma risolve al valore che le passiamo noi. */ body.vik-has-fullsize-hero .site-header--transparent-overlay:not(.is-scrolled) .site-header__cta { --wp--preset--color--accent: var(--wp--preset--color--background); --wp--preset--color--white: var(--wp--preset--color--ink); } /* * Scrim di leggibilità per la sola fascia dell'header, riusa lo stesso * token "--vik-overlay-dark" già usato per lo scrim dietro l'header nella * variante hero "Immersivo in overlay" più sotto in questo file (default * neutro qui, skin-terra/skin-marea lo ridefiniscono col proprio colore): * indipendente dallo scrim proprio dell'hero (che può o meno coprire a * sufficienza la fascia alta, a seconda della skin) — un header trasparente * porta sempre con sé la garanzia minima di leggibilità per sé stesso, * qualunque hero/skin lo usi. "position:fixed" sull'header stesso crea già * un containing block per questo pseudo-elemento (inset relativo * all'header), nessun "position:relative" esplicito necessario. */ body.vik-has-fullsize-hero .site-header--transparent-overlay:not(.is-scrolled)::before { content: ""; position: absolute; inset: 0 0 -64px 0; z-index: -1; background: linear-gradient(to bottom, var(--vik-overlay-dark) 0%, transparent 100%); pointer-events: none; } /* * L'hero full-size sotto un header trasparente-overlay deve occupare * l'intero schermo (l'header non gli sottrae spazio, lo sovrappone) — stesso * principio già applicato per il toggle manuale "Header in overlay sopra * l'hero" del blocco hero-background più sotto in questo file * (".hero-bg.is-height-full.hero-bg--header-overlay"), qui esteso alla * nuova condizione automatica basata sulla modalità header globale. * * ":has(.site-header--transparent-overlay)" (fix 2026-10-07, bb-ledueg): * "vik-has-fullsize-hero" dice solo "il primo blocco è un hero full-size", * NON "l'header è trasparente". Senza questa condizione, con header solido * (default Terra) o sticky — entrambi nel flusso, sopra l'hero — l'hero * prendeva comunque 100svh invece di "100svh - --header-height": header + * hero eccedevano il viewport e il form di ricerca finiva sotto la piega. */ body.vik-has-fullsize-hero:has(.site-header--transparent-overlay) .hero-bg.is-height-full { min-height: 100svh; } body.vik-has-fullsize-hero #main { margin-block-start: 0; } /* * scroll-margin-top universale — un header sticky o trasparente-overlay * resta fisso sopra il contenuto anche quando si salta a un'ancora (es. il * CTA "Scopri le camere" della hero compatta, "href=#camere"): senza * questo il titolo della sezione di destinazione finirebbe nascosto sotto * l'header invece che appena sotto. "--header-height" è la stessa custom * property scritta da assets/js/header-height.js, già usata altrove in * questo file — un margine fisso avrebbe bisogno di essere ricontrollato a * mano ogni volta che l'header cambia altezza (desktop/mobile, con o senza * admin bar). Applicata a qualunque elemento con id, non solo a sezioni * note oggi: nessun costo per un elemento che non viene mai usato come * bersaglio di un'ancora. */ [id] { scroll-margin-top: calc(var(--header-height, 88px) + var(--wp--preset--spacing--4)); } /* * site-header__nav — hamburger anche a tablet (768–1023px), non solo sotto * i 600px. Il blocco core "wp:navigation" (parts/header.html) non ha * l'attributo "overlayMenu" impostato, quindi eredita il default core * ("mobile"): la soglia a cui passa da elenco inline a hamburger è fissa a * 600px (wp-includes/blocks/navigation/style.min.css, * "@media (min-width: 600px) { .wp-block-navigation__responsive-container- * open:not(.always-shown) { display: none } }") — non configurabile * dall'editor, indipendente dai breakpoint del tema. * * Con le 7 voci di menu + CTA "Prenota Ora" di questo giro, l'elenco * inline non ci sta nei primi ~170px oltre quella soglia — verificato dal * vivo a 768px: "Contatti" va a capo da solo su una seconda riga, seguito * dal CTA ancora più sotto, header alto ~200px invece dei ~74px previsti. * Non è un problema che una spaziatura più stretta risolverebbe in modo * affidabile (il numero di voci è editabile dall'utente non tecnico nel * Site Editor, quindi qualunque margine calcolato oggi può bastare o non * bastare più domani) — l'hamburger, già presente e già funzionante sotto * i 600px, è la soluzione strutturale: estendere la sua soglia nativa fino * al limite superiore "tablet" del tema (1023px, vedi regola 5 del brief) * invece di lasciarla al default core, così l'header resta a una riga in * tutto l'intervallo < 1024px indipendentemente da quante voci contiene. * * Selettori con lo stesso identico "descendant" del core più il solo * ".site-header__nav" in più (specificità superiore di una classe, * nessun bisogno di "!important", vedi regola 3 del brief) — scoped a * questo nav, non a tutti i blocchi "wp:navigation" del sito (es. il nav * del footer resta col default core, già impilato in colonna, senza lo * stesso problema di spazio). */ @media (min-width: 600px) and (max-width: 1023px) { .site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } /* * site-header — overlay su varianti hero scure (Immersivo centrato / * Form protagonista). L'header resta lo stesso template part in tutte le * pagine (parts/header.html): qui lo si sovrappone in trasparenza solo * quando la pagina contiene, in un punto qualsiasi, un hero-search con * una di queste 2 varianti attive — :has() guarda in avanti nel DOM, * quindi funziona anche se l'header (fuori da
) precede l'hero. * La variante "Pannello laterale" non serve qui: lascia l'header nel suo * trattamento solido di default, sopra il layout, non sovrapposto. * * ".hero-bg--header-overlay" (variante "Immersivo"/default, blocco * vik-base/hero-background) è nello stesso gruppo di selettori quando * l'utente attiva esplicitamente il ToggleControl "Header in overlay * sopra l'hero" nell'Inspector (edit.js), presente solo con altezza * "Schermo intero" — di default (Toggle disattivo) l'header per questa * variante resta invece nel trattamento solido standard, e ".hero-bg" * sottrae l'altezza reale dell'header dal proprio 100svh invece di * sovrapporcisi (vedi ".hero-bg.is-height-full" più sopra in questo * file): due soluzioni diverse allo stesso problema di viewport-overflow, * quale delle due dipende dalla scelta dell'utente per QUESTA variante, * non è un default imposto. * * "body.vik-has-fullsize-hero" aggiunto qui (audit 2026-09-28): questo * blocco è più vecchio del meccanismo dimensione full-size/compatta * (inc/hero-search-size-variants.php, inc/header-fullsize-hero.php) e non * lo consultava affatto — scattava per QUALUNQUE istanza di queste 2 * varianti/toggle a prescindere dalla dimensione, ignorando anche la * scelta esplicita dell'utente nel controllo "Stile Header" * (site-header-style-control.js). Bug reale: un hero "Immersivo centrato"/ * "Form protagonista" in dimensione COMPATTA riceveva comunque l'header * assoluto/trasparente pensato solo per il full-size. Rientra nel * comportamento di prima per ogni contenuto esistente: prima che la * dimensione compatta esistesse queste varianti erano sempre e solo * full-size, quindi "vik-has-fullsize-hero" era già sempre vero in quei * casi — zero cambio di resa per skin-terra. Cambia solo il caso nuovo * (compatta), che ora ricade correttamente sul trattamento header solido * di default invece di ereditare questo overlay. */ body.vik-has-fullsize-hero:has(.hero-search--immersive-centered) .site-header, body.vik-has-fullsize-hero:has(.hero-search--form-protagonist) .site-header, body.vik-has-fullsize-hero:has(.hero-bg--header-overlay) .site-header { position: absolute; inset: 0 0 auto 0; z-index: 30; background: none; } body.vik-has-fullsize-hero:has(.hero-search--immersive-centered) .site-header__logo, body.vik-has-fullsize-hero:has(.hero-search--immersive-centered) .site-header__logo a, body.vik-has-fullsize-hero:has(.hero-search--form-protagonist) .site-header__logo, body.vik-has-fullsize-hero:has(.hero-search--form-protagonist) .site-header__logo a, body.vik-has-fullsize-hero:has(.hero-bg--header-overlay) .site-header__logo, body.vik-has-fullsize-hero:has(.hero-bg--header-overlay) .site-header__logo a, body.vik-has-fullsize-hero:has(.hero-search--immersive-centered) .site-header__nav .wp-block-navigation-item__content, body.vik-has-fullsize-hero:has(.hero-search--form-protagonist) .site-header__nav .wp-block-navigation-item__content, body.vik-has-fullsize-hero:has(.hero-bg--header-overlay) .site-header__nav .wp-block-navigation-item__content, body.vik-has-fullsize-hero:has(.hero-search--immersive-centered) .vik-base-language-switcher__item a, body.vik-has-fullsize-hero:has(.hero-search--form-protagonist) .vik-base-language-switcher__item a, body.vik-has-fullsize-hero:has(.hero-bg--header-overlay) .vik-base-language-switcher__item a { color: var(--wp--preset--color--white); } /* * "#main" (wrapper "wp:group tagName main", vedi templates/front-page.html) * eredita "margin-block-start" dallo stile globale WordPress * ":root :where(.is-layout-flow) > *" (24px in questo tema) in quanto * secondo figlio di ".wp-site-blocks" dopo l'header — indipendente dalla * presenza/posizione dell'header stesso. Azzerato per l'intero * ".is-height-full" (non solo per "--header-overlay"): serve in ENTRAMBE * le modalità, altrimenti anche col calcolo "calc(100svh - * var(--header-height))" del caso default questi 24px residui * farebbero eccedere l'hero dal viewport lo stesso, solo di meno. Stesso * schema già usato per * ".experiences-dark__track > .wp-block-vik-base-experience-card" più * sotto nel file. */ body:has(.hero-bg.is-height-full) #main { margin-block-start: 0; } /* * Scrim aggiuntivo dietro l'header per l'hero "Immersivo"/default in * modalità overlay: a differenza delle 2 varianti sopra (core/cover con * dimRatio 40/60, scurimento uniforme su tutta l'immagine), il gradiente * overlay di ".hero-bg" (0.05→0.55 alpha dall'alto al basso, vedi * blocks/hero-background/render.php) è quasi trasparente proprio nella * fascia dove l'header ora galleggia — sufficiente per il testo in basso * a sinistra che questo pattern è nato per servire, non per logo/nav * bianchi in alto. Striscia scura fissa, indipendente da * "overlayOpacity" (che governa il gradiente principale, configurabile * dall'utente per l'umore della foto): garantisce un contrasto minimo * per l'header senza scurire il resto dell'immagine. * * "calc(var(--header-height, 88px) + 80px)": agganciata alla stessa * custom property scritta da assets/js/header-height.js usata per il * calcolo dell'altezza qui sopra (non un valore fisso indipendente) — * segue quindi automaticamente l'header reale (desktop ~55px, mobile * ~110px misurati) più un margine di sfumatura di 80px, invece di dover * essere ricontrollata a mano se l'header cambia altezza in futuro. */ body:has(.hero-bg--header-overlay) .hero-bg::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: calc(var(--header-height, 88px) + 80px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } /* ----------------------------------------------------------- intro-text-image ----------------------------------------------------------- */ .intro-text-image__text .eyebrow, .intro-text-image__text .is-style-eyebrow { margin-bottom: var(--wp--preset--spacing--3); } .intro-text-image__text .wp-block-heading { margin-bottom: var(--wp--preset--spacing--4); } .intro-text-image__text .wp-block-paragraph { margin-bottom: var(--wp--preset--spacing--5); color: var(--wp--preset--color--text-soft); } .intro-text-image__text .wp-block-buttons { margin-top: var(--wp--preset--spacing--2); } /* ----------------------------------------------------------- intro-text-image-card ----------------------------------------------------------- */ .intro-text-image-card__frame { display: grid; grid-template-columns: 1fr; min-height: 420px; background-color: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--vik-radius); overflow: hidden; } @media (min-width: 768px) { .intro-text-image-card__frame { grid-template-columns: 1fr 1fr; min-height: 520px; } } .intro-text-image-card__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6); } @media (min-width: 1024px) { .intro-text-image-card__text { padding: var(--wp--preset--spacing--8); } } .intro-text-image-card__text .eyebrow, .intro-text-image-card__text .is-style-eyebrow { margin-bottom: var(--wp--preset--spacing--3); } .intro-text-image-card__text .wp-block-heading { margin-bottom: var(--wp--preset--spacing--4); } .intro-text-image-card__divider { display: block; width: 40px; height: 1px; margin: 0 0 var(--wp--preset--spacing--5); background-color: var(--wp--preset--color--accent); } .intro-text-image-card__text .wp-block-paragraph { margin-bottom: var(--wp--preset--spacing--5); color: var(--wp--preset--color--text-soft); } .intro-text-image-card__text .wp-block-buttons { margin-top: var(--wp--preset--spacing--2); } .intro-text-image-card__image { min-width: 0; margin: 0; min-height: 260px; } .intro-text-image-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ----------------------------------------------------------- intro-text-image-bleed ----------------------------------------------------------- */ .intro-text-image-bleed__cover.wp-block-cover { min-height: 480px; } @media (min-width: 768px) { .intro-text-image-bleed__cover.wp-block-cover { min-height: 620px; } } /* * Lo sfondo del pannello (colore scelto dall'utente + sfumatura verso la * foto) vive su ::before, non sull'elemento stesso: mask-image applicato * direttamente al pannello sfumerebbe anche il testo dei figli, non solo lo * sfondo. ::before resta dietro il contenuto (z-index 0 vs 1) mentre il * colore nativo assegnato dal blocco Group ("Colore di sfondo") viene * neutralizzato su .has-background e ridiretto a ::before per slug. * * !important necessario qui, unica eccezione nel file: le classi * "has-*-background-color" generate da WordPress a partire dai colori * della palette (theme.json) vengono emesse nel foglio di stile globale * inline con !important (per garantire che il colore scelto in Inspector * vinca sempre sugli stili dei singoli blocchi) — per neutralizzarle qui * non c'è alternativa che pareggiare con !important. */ .intro-text-image-bleed__panel { position: relative; width: 100%; padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6); } .intro-text-image-bleed__panel.has-background { background-color: transparent !important; } .intro-text-image-bleed__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; } /* * Un fill per ogni colore della palette (theme.json), non solo i 2 mostrati * nel mockup di riferimento ("Background" e "Dark"): il pannello usa il * controllo nativo "Colore di sfondo" del blocco Group, che nell'Inspector * propone TUTTI gli swatch della palette — se uno di questi non avesse una * regola qui sotto, scegliendolo il pannello resterebbe trasparente (nessun * fill, testo senza sfondo leggibile sopra la foto). */ .intro-text-image-bleed__panel.has-background-background-color::before { background-color: var(--wp--preset--color--background); } .intro-text-image-bleed__panel.has-background-alt-background-color::before { background-color: var(--wp--preset--color--background-alt); } .intro-text-image-bleed__panel.has-white-background-color::before { background-color: var(--wp--preset--color--white); } .intro-text-image-bleed__panel.has-line-background-color::before { background-color: var(--wp--preset--color--line); } .intro-text-image-bleed__panel.has-text-background-color::before { background-color: var(--wp--preset--color--ink); } .intro-text-image-bleed__panel.has-text-soft-background-color::before { background-color: var(--wp--preset--color--text-soft); } .intro-text-image-bleed__panel.has-accent-background-color::before { background-color: var(--wp--preset--color--accent); } .intro-text-image-bleed__panel.has-accent-dark-background-color::before { background-color: var(--wp--preset--color--accent-dark); } .intro-text-image-bleed__panel.has-dark-background-color::before { background-color: var(--wp--preset--color--dark); } .intro-text-image-bleed__panel > * { position: relative; z-index: 1; } @media (min-width: 768px) { .intro-text-image-bleed__panel { max-width: 560px; padding: var(--wp--preset--spacing--8); } /* * --intro-bleed-fade: punto (%) in cui inizia la dissolvenza, iniettato * inline da inc/intro-bleed-fade.php in base al controllo "Dissolvenza" * nell'Inspector del blocco (assets/js/editor/intro-bleed-fade-control.js). * Il fallback 60% resta valido se il blocco non ha lo stile inline * (es. markup salvato prima dell'introduzione del controllo). */ .intro-text-image-bleed__panel::before { -webkit-mask-image: linear-gradient(90deg, black 0%, black var(--intro-bleed-fade, 60%), transparent 100%); mask-image: linear-gradient(90deg, black 0%, black var(--intro-bleed-fade, 60%), transparent 100%); } } @media (min-width: 1024px) { .intro-text-image-bleed__panel { max-width: 620px; padding: var(--wp--preset--spacing--9) var(--wp--preset--spacing--8); } } /* * color esplicito necessario: il blocco Cover, senza "has-text-color", * applica di default color:#fff a tutto il contenuto (style.css core del * blocco), pensato per foto scure con testo chiaro sovrapposto. Il nostro * pannello chiaro di default necessita del colore di testo scuro standard. */ .intro-text-image-bleed__panel .wp-block-heading { margin: 0 0 var(--wp--preset--spacing--4); color: var(--wp--preset--color--ink); } .intro-text-image-bleed__divider { display: block; width: 40px; height: 1px; margin: 0 0 var(--wp--preset--spacing--5); background-color: var(--wp--preset--color--accent); } .intro-text-image-bleed__panel .wp-block-paragraph { margin: 0 0 var(--wp--preset--spacing--5); color: var(--wp--preset--color--text-soft); } .intro-text-image-bleed__panel .wp-block-buttons { margin-top: var(--wp--preset--spacing--2); } /* * L'eyebrow resta color accent su qualunque sfondo (coerente con i mockup, * dove compare in terracotta sia sul pannello chiaro che su quello scuro) — * eccetto quando il pannello stesso è impostato su "Accent" o "Accent Dark": * lì l'eyebrow diventerebbe accent-su-accent, illeggibile. */ .intro-text-image-bleed__panel:is(.has-accent-background-color, .has-accent-dark-background-color) .eyebrow, .intro-text-image-bleed__panel:is(.has-accent-background-color, .has-accent-dark-background-color) .is-style-eyebrow { color: var(--wp--preset--color--white); } /* * Sfondo scuro/medio-scuro selezionato dall'utente (Text, Text Soft, Accent, * Accent Dark, Dark): il testo passa a chiaro perché il colore di default * (var(--text) / var(--text-soft), pensato per sfondi chiari) non sarebbe * leggibile. "Background", "Background Alt", "White" e "Line" restano con * il testo scuro di default, definito sopra. */ .intro-text-image-bleed__panel:is( .has-text-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) .wp-block-heading { color: var(--wp--preset--color--white); } .intro-text-image-bleed__panel:is( .has-text-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) .wp-block-paragraph { color: rgba(255, 255, 255, 0.78); } .intro-text-image-bleed__panel:is( .has-text-background-color, .has-text-soft-background-color, .has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color ) .cta-link-arrow .wp-block-button__link { color: var(--wp--preset--color--white); border-bottom-color: var(--wp--preset--color--white); } /* ----------------------------------------------------------- hero-search ----------------------------------------------------------- */ /* * Nasconde le varianti non attive nel Site Editor: inc/hero-search-variants.php * scarta le altre 3 lato server (render_block_data), ma quel filtro non gira * nel canvas dell'editor (i blocchi statici come Group vengono lì montati * client-side dai propri attributi, senza passare da PHP) — senza queste * regole tutte e 4 le varianti, coi rispettivi widget, sarebbero visibili * impilate mentre si modifica la pagina. I due selettori bastano perché, * a differenza dell'overlay dell'header più sopra, "hero-search" e la * classe modificatrice stanno sullo stesso elemento: non serve :has(). */ .hero-search:not([class*="hero-search--"]) .hero-search__variant:not(.hero-search__variant--default), .hero-search.hero-search--split-panel .hero-search__variant:not(.hero-search__variant--split-panel), .hero-search.hero-search--immersive-centered .hero-search__variant:not(.hero-search__variant--immersive-centered), .hero-search.hero-search--form-protagonist .hero-search__variant:not(.hero-search__variant--form-protagonist) { display: none; } /* * Stesso trattamento, per lo switch indipendente "Dimensione Hero" * (inc/hero-search-size-variants.php) annidato dentro * ".hero-search__variant--default": nasconde nel canvas dell'editor il * sotto-albero di dimensione non selezionato. */ .hero-search__size-switch:not(.hero-search__size-switch--compact) .hero-search__size:not(.hero-search__size--full), .hero-search__size-switch.hero-search__size-switch--compact .hero-search__size:not(.hero-search__size--compact) { display: none; } .hero-search__content { max-width: 780px; } .hero-search__eyebrow { color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; } .hero-search__title { max-width: 780px; color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--display); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 500; line-height: 1.3; } .hero-search__title em { font-style: italic; color: var(--vik-overlay-ivory); } .hero-search__widget { max-width: 920px; margin-top: var(--wp--preset--spacing--6); background-color: var(--wp--preset--color--white); border-radius: var(--vik-radius); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); } .hero-search__widget { padding: var(--wp--preset--spacing--5); } .hero-search__widget:empty::before { content: "Configura qui il widget VikBooking \"Search Form\" dall'editor."; display: block; color: var(--wp--preset--color--text-soft); font-size: var(--wp--preset--font-size--sm); text-align: center; } /* * hero-search — dimensione "Compatta" (hero-search__size--compact) * * Controparte incorniciata della variante full-size di sopra: stesso Group * "hero-search__content" (eyebrow/titolo, più un sottotitolo e una CTA * secondaria in più, esclusivi di questa dimensione) dentro lo stesso * blocco vik-base/hero-background, ma senza "align:full" — resta contenuto * dentro ".hero-search-compact", che aggiunge il margine di sfondo pagina * visibile sopra e ai lati. Il widget di ricerca è invece un FRATELLO del * blocco hero-background (non un suo InnerBlock): ".hero-bg" ha * "overflow:hidden" per il crop di slider/video, quindi l'unico modo per * farlo sporgere a cavallo del bordo inferiore della foto è tenerlo fuori * da quel box e tirarlo su con un margine negativo sul proprio wrapper. */ .hero-search-compact { position: relative; max-width: 1320px; margin-inline: auto; padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--8) 0; } /* * ".hero-search-compact__frame" è condivisa dalle 3 varianti di stile che * supportano la dimensione "Compatta" (Immersivo/default, Immersivo * centrato, Form protagonista — non "Pannello laterale", vedi il commento * nell'header di hero-search.php sul perché). Su ".hero-bg" * (vik-base/hero-background, variante default) "overflow:hidden" è già * suo di base; su ".wp-block-cover" (le altre 2) core non lo garantisce * per il solo scopo di arrotondare gli angoli dell'immagine, va dichiarato * qui esplicitamente — ripeterlo non fa danno dove è già presente. */ .hero-search-compact__frame { border-radius: var(--vik-radius); overflow: hidden; } .hero-search-compact__subtitle { max-width: 620px; margin-top: var(--wp--preset--spacing--3); color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--base); opacity: 0.9; } .hero-search-compact__cta { margin-top: var(--wp--preset--spacing--5); } /* * Il wrapper resta nel normal flow SUBITO dopo ".hero-search-compact" * (che contiene la sola immagine incorniciata): il margine negativo lo * tira su a cavallo del bordo inferiore della foto, metà dentro/metà * fuori. Stessa larghezza massima/padding orizzontale di * ".hero-search-compact" così il bordo della card si allinea a quello * della foto invece di seguire la larghezza piena di ".hero-search__widget" * (920px, pensata per la variante full-size). */ .hero-search-compact__widget-wrap { position: relative; z-index: 2; max-width: 1320px; margin-inline: auto; margin-top: calc(-1 * var(--wp--preset--spacing--7)); padding: 0 var(--wp--preset--spacing--8) var(--vik-section-space-y-compact); } .hero-search-compact__widget-wrap .hero-search__widget { margin-top: 0; } @media (max-width: 1023px) { .hero-search-compact { padding-left: var(--wp--preset--spacing--6); padding-right: var(--wp--preset--spacing--6); } .hero-search-compact__widget-wrap { padding-left: var(--wp--preset--spacing--6); padding-right: var(--wp--preset--spacing--6); padding-bottom: var(--vik-section-space-y-compact-tablet); } } @media (max-width: 767px) { .hero-search-compact { padding-left: var(--wp--preset--spacing--5); padding-right: var(--wp--preset--spacing--5); } .hero-search-compact__widget-wrap { padding-left: var(--wp--preset--spacing--5); padding-right: var(--wp--preset--spacing--5); padding-bottom: var(--vik-section-space-y-compact-mobile); margin-top: calc(-1 * var(--wp--preset--spacing--6)); } } /* ----------------------------------------------------------- hero-background (vik-base/hero-background) ----------------------------------------------------------- */ /* * Livello di sfondo del blocco vik-base/hero-background, che sostituisce * core/cover nella sola variante "Immersivo" (default) di hero-search.php: * tipo di sfondo (immagine/slider/video), altezza sezione e overlay * scurente sono tutti configurabili dall'Inspector. Le altre 3 varianti * (hero-search--split-panel, --immersive-centered, --form-protagonist) * restano su core/cover/core/image e non sono toccate da queste regole. */ .hero-bg { position: relative; overflow: hidden; } /* * Default (nessun overlay header, ToggleControl "Header in overlay sopra * l'hero" disattivo): l'header resta nel flusso normale sopra l'hero come * barra solida, quindi l'hero deve occupare solo lo spazio VERAMENTE * restante dello schermo, non l'intero 100svh — altrimenti header + hero * eccedono insieme il viewport (il fondo dell'hero, incluso il search * form, finisce tagliato fuori dallo schermo). * * "--header-height" è scritta dinamicamente da assets/js/header-height.js * (header.offsetHeight, misura reale — l'altezza dell'header cambia tra * desktop/mobile perché la nav va a capo sotto il logo sotto una certa * larghezza). Il fallback qui sotto (var(--header-height, 88px)) copre * solo il primissimo istante prima che il JS giri: valore desktop reale * misurato via Playwright per il caso comune, non un placeholder a caso. * Su mobile per quell'istante il fallback risulta un po' corto (header * reale ~110px vs 88px), causando una minima invisibile eccedenza solo * nel primo frame, corretta non appena il JS imposta il valore vero. */ .hero-bg.is-height-full { min-height: calc(100svh - var(--header-height, 88px)); } /* * Con l'overlay attivo l'header non occupa spazio nel flusso (vedi * "body:has(.hero-bg--header-overlay) .site-header" più sotto), quindi * l'hero torna a coprire l'intero schermo. Specificità a 3 classi (0,3,0), * vince senza bisogno di !important sulla regola sopra (0,2,0). */ .hero-bg.is-height-full.hero-bg--header-overlay { min-height: 100svh; } .hero-bg.is-height-large { min-height: 85svh; } .hero-bg.is-height-medium { min-height: 60svh; } .hero-bg.is-height-compact { min-height: 40svh; } .hero-bg.is-height-custom { min-height: var(--hero-custom-height, 100svh); } .hero-bg__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-bg__slider { position: absolute; inset: 0; } /* * Base (= transizione "fade", il default): crossfade puro via opacity. * "hero-bg-slider--slide" e "hero-bg-slider--zoom" più sotto sovrascrivono * mirror selettivamente quello che serve, quindi questa resta anche la loro * base condivisa (es. il crossfade opacity di "zoom" è letteralmente questa * stessa regola, invariata). will-change forza il compositing GPU della sola * proprietà che anima; translateZ(0) + backface-visibility:hidden sono * un'ulteriore spinta alla promozione a layer indipendente — will-change da * solo non è sempre sufficiente cross-browser per garantire che il * compositor tratti la slide come layer stabile, e senza layer dedicato il * crossfade può risultare a scatti anche con la sola transition su opacity. */ .hero-bg__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease-in-out; will-change: opacity; transform: translateZ(0); backface-visibility: hidden; } .hero-bg__slide.is-active { opacity: 1; } /* * Variante "slide": nessun crossfade, la posizione orizzontale è l'unico * segnale di cambio. Tre stati (non solo is-active/assente) perché la slide * appena uscita deve fermarsi a sinistra invece di tornare subito a destra * col resto delle slide non ancora mostrate: * - default (nessuna classe): parcheggiata a destra, fuori vista * - is-active: al centro * - is-prev: appena uscita, parcheggiata a sinistra * Entrambi i parcheggi sono fuori dall'area visibile (".hero-bg" ha * overflow:hidden), quindi il "reset" di una ex is-prev tornata default * (gestito da hero-slider.js ad ogni nuovo giro) è invisibile. * * translateZ(0) va combinato nella STESSA funzione transform di translateX * (non una dichiarazione transform separata, che sovrascriverebbe l'altra): * ogni stato porta quindi anche la propria promozione a layer. */ .hero-bg-slider--slide .hero-bg__slide { opacity: 1; transform: translateX(100%) translateZ(0); transition: transform 0.8s ease-in-out; will-change: transform; backface-visibility: hidden; } .hero-bg-slider--slide .hero-bg__slide.is-active { transform: translateX(0) translateZ(0); } .hero-bg-slider--slide .hero-bg__slide.is-prev { transform: translateX(-100%) translateZ(0); } /* * Variante "zoom" (Ken Burns leggero): stesso crossfade opacity della base * (nessuna regola aggiuntiva per opacity/is-active, eredita quella sopra), * più uno scale(1)→scale(1.08) sulla sola immagine attiva, per tutta la sua * durata di visualizzazione — durata presa da --hero-slider-interval * (custom property impostata inline da render.php sullo stesso valore in * secondi di data-interval, che governa l'autoplay in hero-slider.js). * Stessa combinazione scale()+translateZ(0) nella stessa funzione transform * per la promozione a layer indipendente. */ .hero-bg-slider--zoom .hero-bg__media { transform: scale(1) translateZ(0); transition: transform var(--hero-slider-interval, 6s) linear; will-change: transform; backface-visibility: hidden; } .hero-bg-slider--zoom .hero-bg__slide.is-active .hero-bg__media { transform: scale(1.08) translateZ(0); } /* * Ken Burns leggero per l'immagine di sfondo SINGOLA (backgroundType * "image", il caso più comune, es. hero-search.php di default): scale + * pan minimi, ease-in-out, "alternate" così il loop non ha mai un salto * secco a fine ciclo (torna indietro con la stessa easing con cui è * andato avanti, invece di un reset istantaneo come farebbe un * @keyframes "normal infinite"). Durata lenta (28s) per restare "in * sottofondo" e non competere con testo/CTA dell'hero — coerente col mood * "warm minimal" di skin-terra, dove il movimento deve suggerire * "vista che scorre nel paesaggio", non un effetto vistoso. Scoperto solo * a ".is-type-image" apposta: slider e video hanno già un proprio * movimento (".hero-bg-slider--zoom",