/** * domaine.css * Styles for the /domaine long-scroll brand story page with sticky anchor nav. * Loaded conditionally on is_page('domaine') via inc/enqueue.php. * All values use CSS custom properties defined in style.css :root. * * @package astra-child */ /* ── Full-bleed sections ──────────────────────────────────────────────────── */ /* * Hero, viticulture (background-image banner), and #visite CTA extend to * viewport edges using the same negative-margin technique as other full-bleed * sections in components.css. See CLAUDE.md Astra Layout Configuration. */ .domaine-hero, .domaine-section--viticulture, .domaine-section--cta, .porta-gallery-section { /* #galerie carousel — defined in components.css */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .domaine-hero { position: relative; min-height: calc(100svh - 80px); display: flex; align-items: center; justify-content: center; /* Background image path relative to this CSS file (assets/css/ → assets/images/) */ background-image: url('../images/hero-domaine.jpg'); background-size: cover; background-position: center; /* Fallback color shown before image loads or when file is not yet uploaded */ background-color: var(--color-accent); } /* Dark overlay for text legibility over photography. rgba() is used intentionally — CSS custom properties cannot express alpha alone. */ .domaine-hero__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); } .domaine-hero__content { position: relative; /* sits above .domaine-hero__overlay */ z-index: 1; text-align: center; padding-block: var(--space-section); } .domaine-hero__eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 1rem; } .domaine-hero__title { font-size: var(--text-4xl); color: var(--color-white); margin-bottom: 1.5rem; } .domaine-hero__quote { font-family: var(--font-heading); font-style: italic; font-size: var(--text-xl); color: var(--color-white); opacity: 0.9; max-width: var(--max-width-text); margin-inline: auto; line-height: 1.6; } @media (min-width: 768px) { .domaine-hero__title { font-size: var(--text-5xl); } .domaine-hero__quote { font-size: var(--text-2xl); } } /* ── Sticky anchor nav ────────────────────────────────────────────────────── */ /* * CSS position:sticky — the browser handles all the sticking. * * `top` is set via the CSS custom property --domaine-nav-top, which is written * by a one-time JS measurement in domaine-nav.js (reads the actual rendered * bottom of #masthead at page load + on resize). The fallback values cover the * rare case where JS hasn't run yet (SSR, no-JS, very slow load). * * Unlike position:fixed, sticky stays in document flow — no spacer div needed. * overflow-x:hidden on only breaks sticky on the X axis in all modern * browsers (Chrome 77+, Firefox 70+, Safari 13+). */ /* * ── Sticky anchor nav ────────────────────────────────────────────────────── * * CSS position:sticky — the browser handles all the sticking. * `top` is set via --domaine-nav-top, written by JS at load + resize. * * Frosted glass: semi-transparent + blur so dark photo sections scrolling * beneath give a "floating above content" feel. * rgba() used intentionally — CSS custom properties cannot express alpha alone. * * Full-bleed on mobile (negative margins, same technique as other full-bleed * sections). Reset to 0 on desktop inside the @media (min-width: 768px) block. * * #domaine-nav ID prefix (specificity 1,0,0) beats Astra's inline