/* ============================================================ main.css — SkinMedics "MAISON" Luxury fashion-house language: monochrome, full-bleed imagery, editorial restraint. Sharp corners, hairline rules, tracked caps, vast whitespace. Native scroll. (css/tokens.css drives all values.) ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { /* Theme vars flip with [data-theme] for the scroll-driven colour morph */ --fg: var(--ink); --fg-soft: var(--ink-soft); --hairline: var(--line); font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--step-0); line-height: var(--lh-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Light<->dark morph — animate the THEME VARIABLES themselves (not per-element colour). Because --fg/--fg-soft/--hairline/--accent-ink are registered, inherited properties, transitioning them on makes EVERY element that reads them (inherited body text, explicit labels/leads, hairlines, accents) recolour in perfect lockstep with the background — no element chases the body's animation, so nothing lags a beat behind. Browsers without @property simply snap (graceful). */ @property --fg { syntax: ""; inherits: true; initial-value: #14130F; } @property --fg-soft { syntax: ""; inherits: true; initial-value: #6A655B; } @property --hairline { syntax: ""; inherits: true; initial-value: rgba(20,19,15,0.14); } @property --accent-ink{ syntax: ""; inherits: true; initial-value: #14130F; } .js body { transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), --fg 0.5s cubic-bezier(0.4, 0, 0.2, 1), --fg-soft 0.5s cubic-bezier(0.4, 0, 0.2, 1), --hairline 0.5s cubic-bezier(0.4, 0, 0.2, 1), --accent-ink 0.5s cubic-bezier(0.4, 0, 0.2, 1); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js body { transition: none; } } body[data-theme="dark"] { --fg: var(--on-dark); --fg-soft: var(--on-dark-soft); --hairline: var(--line-on-dark); /* Accent-as-text must flip too: on dark, ink (#14130F) is invisible, so the accent renders as champagne. Fixes open-FAQ summaries + any accent-ink use that lands on a dark/morphing section. */ --accent-ink: #C9A86A; background: var(--dark); } /* Clay — a warm third tone for select sections; ink text stays (warm light). */ body[data-theme="clay"] { --fg: var(--ink); --fg-soft: var(--on-clay-soft); --hairline: var(--line-clay); --surface: #EEE7D8; --tint-deep: var(--clay-deep); background: var(--clay); } /* No-JS fallback: a clay section carries its own ground + text colour. */ .section.clay { background: var(--clay); color: var(--ink); } .js-fx .section.clay { background: transparent; } /* `clip` (not `hidden`) prevents horizontal scroll WITHOUT turning body into a scroll container — `overflow-x: hidden` computes to `hidden auto`, which makes position:fixed header/announce jank and overlap content during iOS momentum scroll. `clip` keeps the root as the single scroller, so fixed stays put. */ html, body { overflow-x: clip; } /* Overscroll/rubber-band canvas matches the page's dark ends (announce bar at the top, footer at the bottom) so it never flashes a mismatched colour. */ html { background: var(--dark); } html { overscroll-behavior-y: none; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } /* Auto-generated WebP wrappers (build step) — keep the in its parent's layout exactly as before by removing the