*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Page-level scroll behavior: - scroll-behavior: smooth → side-menu / category anchor links animate smoothly. NOTE: Chromium silently ignores programmatic scroll-behavior:'smooth' arguments (scrollIntoView, scrollTo) when scroll-behavior isn't set in CSS — so this line is load-bearing for the JS-driven category scrolling, don't remove. (scroll-snap was removed — it pulled the user back to #page3 when they tried to interact with the footer; smooth scroll alone is fine.) */ html { scroll-behavior: smooth; background: var(--color-bg); } :root { /* Brand palette pulled from Lola's reference assets: - WhatsApp aesthetic shot (dark backdrop, burgundy bamboo, cream leaves) - Wang Yuan logo (deep red 1984 badge, forest-green bamboo, panda) - Foo dog statues (bronze tones with red-mouth detail) */ --color-bg: #0F0A0A; /* deep warm black — page background */ --color-text: #C9A876; /* warm cream / parchment — body text */ --color-accent: #B82A2A; /* signature deep red — buttons, highlights*/ --color-bronze: #8B6F47; /* bronze gold — secondary accents */ --color-bamboo: #2C5530; /* logo bamboo green — occasional touch */ --font-body: system-ui, -apple-system, sans-serif; --font-heading: system-ui, -apple-system, sans-serif; --space-1: 0.5rem; --space-2: 1rem; --space-3: 2rem; --space-4: 4rem; --max-width: 1200px; /* Scroll-progress for the welcome / parchment reveal. Lives at :root so EVERY element can read it via inheritance — body::before (dim layer) and #page2's contents both consume it. main.js updates this inline on at runtime; this declaration is the pre-JS fallback. Do NOT re-declare on #page2 — that would shadow the root value and freeze the welcome card at progress 0. */ --welcome-progress: 0; } body { font-family: var(--font-body); color: var(--color-text); background: transparent; line-height: 1.5; -webkit-font-smoothing: antialiased; position: relative; /* Disable text selection site-wide so accidental drags on the hero, welcome plate, buttons and menu items don't flash the blue selection overlay. Re-enabled below on the footer (so the owner / guests can copy the address or phone numbers) and on form fields. */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* Bring text selection back where it actually makes sense. */ footer, footer *, input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; } .site-bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; filter: brightness(0.72) saturate(1.08); opacity: 0; transition: opacity 180ms ease; } .site-bg-video.is-active { opacity: 1; } /* Site-wide dim layer sitting between the bg video and page content. Opacity ramps 0.42 → 0.92 as --welcome-progress (set on by main.js) climbs 0 → 1 — i.e. dark steadily intensifies during the scroll from page 1 into page 2, holds at full strength through page 2 and the signatures section, and symmetrically eases back when the user scrolls up to page 1. Tweak the base/scale below to retune. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, calc(0.42 + 0.50 * var(--welcome-progress, 0))); } body > :not(.site-bg-video):not(.side-menu):not(.side-menu-backdrop):not(.r-modal) { position: relative; z-index: 2; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ============================================ Page wrapper Single-viewport "sheet" — wraps everything and constrains it to 100vh. Children are stacked vertically and share the available height via flex (see .hero / .reserve-section). ============================================ */ .page { min-height: 100vh; /* fills viewport, can grow if content needs it */ display: flex; flex-direction: column; /* These three lines turn .page into a positioning + stacking context for the absolutely-positioned background