/* ========================================================================== EsterRx Wellness — IV & Peptide Wellness tokens.css — the whole brand system as custom properties. Authored by the brand agent. See BRAND.md for intent behind every value. USAGE ----- 1. Recommended: put the tags from BRAND.md §3 in (they preconnect and load faster than an @import), then DELETE the @import line below. 2. If you prefer a single stylesheet entry point, leave the @import where it is — it must stay the first statement in this file. HARD RULES ENCODED HERE ----------------------- • No font-size token has a clamp() minimum below 18px. Every rendered string on the page — nav, eyebrow, caption, badge, footer, legal — must use one of the --fs-* tokens. Do not hand-write px sizes. • Body ink on ground is 14.0:1. Muted ink on ground is 5.45:1. ========================================================================== */ /* Fonts are loaded via tags in index.html (BRAND.md §3.2), so the @import that lived here has been removed as that section instructs. */ :root { /* ---------------------------------------------------------------------- 1. COLOUR Aesop-warm near-monochrome. One accent (sage), chosen so the booking widget's mint (#4ECBA8) reads as a bright cousin rather than a clash. ---------------------------------------------------------------------- */ /* Grounds */ --ground: #F1EEE7; /* page ground. Warm bone/stone. The default. */ --ground-2: #E8E4DA; /* alternating band, image plinth, hover wash */ --ground-deep: #1E1B18; /* one dark section only. Warm charcoal, not black. */ /* Booking band — reconciles with the embedded EsterRx widget */ --ground-booking: #FAFAF9; /* the band. Relative luminance .9553 vs the widget's #F9FAFB .9548 — a 0.05% delta, so the iframe edge disappears into the band. */ --surface-booking: #F9FAFB; /* exact widget ground; use for the frame fill so the seam is invisible while loading */ --rule-booking: #E6E4DF; /* cooler hairline for the frame on that band */ --embed-mint: #4ECBA8; /* DOCUMENTATION ONLY. The widget's accent. Never use it in page chrome. */ /* Ink */ --ink: #23201C; /* body + headings. 14.00:1 on --ground. */ --ink-2: #2E2A25; /* secondary headings, hairline-adjacent text. 12.30:1 */ --muted: #665F53; /* captions, meta, answers. 5.45:1 on --ground, 4.97:1 on --ground-2, 6.04:1 on the booking band. */ --on-deep: #F1EEE7; /* text on --ground-deep. 14.79:1 */ --on-deep-muted: #B5AEA1; /* muted text on --ground-deep. 7.78:1 */ /* Accent — sage. Dried eucalyptus, not spa-green. */ --accent: #4C6A3E; /* eyebrows, underlines, focus, primary-btn hover. 5.27:1 on --ground · 5.85:1 on the booking band · 4.81:1 on --ground-2 · --ground on it is 5.27:1. */ --accent-soft: #8CA37D; /* accent marks on --ground-deep. 6.24:1 */ --accent-tint: rgba(76, 106, 62, 0.10); --accent-tint-strong:rgba(76, 106, 62, 0.16); /* Hairlines */ --rule: #D8D1C3; /* default hairline. Deliberately quiet. */ --rule-strong: #C6BEAD; /* button borders, dividers that must be seen */ --rule-deep: rgba(241, 238, 231, 0.16); /* hairline on --ground-deep */ /* Optional warm tint for imagery — use ONLY if a render comes back cool */ --img-tint-warm: rgba(176, 140, 92, 0.05); --img-ring: inset 0 0 0 1px rgba(35, 32, 28, 0.06); /* Hero scrim — only if measured ink-on-photo contrast drops below 7:1 */ --scrim-hero: linear-gradient(90deg, rgba(241, 238, 231, 0.72) 0%, rgba(241, 238, 231, 0.34) 34%, rgba(241, 238, 231, 0.00) 62%); /* ---------------------------------------------------------------------- 2. TYPE Newsreader (display serif) · Geist (text grotesk) · Geist Mono (spec). Always set an explicit font-size on anything using --font-mono; a bare generic monospace family makes Chrome default to 13px. ---------------------------------------------------------------------- */ --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --font-text: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --wt-light: 300; --wt-regular: 400; --wt-medium: 500; --wt-semibold: 600; /* Geist only. Never on Newsreader. */ /* --- sizes. Minimums are the 18px floor; nothing goes below. ----------- */ --fs-display: clamp(56px, 7vw, 132px); /* hero headline 132 / 56 */ --fs-statement: clamp(28px, 2.6vw, 46px); /* Aesop intro paragraph 46 / 28 */ --fs-h2: clamp(34px, 3.4vw, 62px); /* section heading 62 / 34 */ --fs-h3: clamp(25px, 2vw, 36px); /* pillar / step title 36 / 25 */ --fs-h4: clamp(21px, 1.5vw, 27px); /* FAQ question 27 / 21 */ --fs-lead: clamp(21px, 1.5vw, 26px); /* hero sub, section lead 26 / 21 */ --fs-body: clamp(19px, 1.15vw, 22px); /* body copy, lists 22 / 19 */ --fs-ui: clamp(18px, 1vw, 20px); /* nav, buttons 19.2 / 18 */ --fs-caption: clamp(18px, 0.95vw, 19px); /* captions, footnotes 18.2 / 18 */ --fs-mono: clamp(18px, 0.94vw, 19px); /* eyebrow, spec, pill 18.1 / 18 */ /* --- line-heights (unitless) ------------------------------------------ */ --lh-display: 0.96; --lh-statement: 1.28; --lh-h2: 1.04; --lh-h3: 1.16; --lh-h4: 1.25; --lh-lead: 1.45; --lh-body: 1.62; --lh-ui: 1.20; --lh-caption: 1.50; --lh-mono: 1.10; /* --- letter-spacing ---------------------------------------------------- */ --ls-display: -0.02em; --ls-statement: -0.01em; --ls-h2: -0.018em; --ls-h3: -0.012em; --ls-h4: -0.008em; --ls-lead: -0.005em; --ls-body: 0em; --ls-ui: 0.005em; --ls-caption: 0.008em; --ls-mono: 0.14em; /* uppercase mono only */ --ls-mono-tight: 0.10em; /* mono in sentence case (hours, addresses) */ /* --- wordmark ---------------------------------------------------------- */ --wordmark-size: 32px; /* header, ≥1280px viewport */ --wordmark-size-md: 28px; /* header, 720–1280px (descriptor has dropped) */ --wordmark-size-sm: 24px; /* header, <720px */ --wordmark-size-footer: 48px; /* two-line lockup */ --wordmark-min: 22px; /* absolute floor anywhere */ --wordmark-ls: 0.005em; /* at 22–36px */ --wordmark-ls-lg: -0.01em; /* at ≥40px */ --wordmark-clear: 0.70em; /* = 1 cap height of the wordmark */ --wordmark-desc-ls: 0.10em; /* descriptor tracking in the ONE-LINE header lockup only — 0.14em makes the 18px mono line out-mass the wordmark. Two-line lockup keeps --ls-mono (0.14em). */ /* --- measure ----------------------------------------------------------- */ --measure: 66ch; /* body columns */ --measure-narrow: 46ch; /* leads, captions under images */ --measure-wide: 78ch; /* the big Aesop statement only */ /* ---------------------------------------------------------------------- 3. SPACE & LAYOUT ---------------------------------------------------------------------- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; --space-5xl: 160px; --section-pad-y: clamp(96px, 12vw, 200px); --section-pad-y-tight: clamp(64px, 8vw, 128px); --stack-heading: clamp(24px, 2vw, 40px); /* eyebrow → heading → lead */ --stack-block: clamp(48px, 5vw, 88px); /* between blocks in a section */ --page-margin: clamp(24px, 4vw, 72px); /* left/right page gutter */ --container: 1360px; /* default content container */ --container-wide: 1600px; /* full-bleed-ish image bands */ --container-text: 820px; /* single-column prose */ --container-book: 980px; /* the booking frame */ --grid-cols: 12; --gutter: clamp(20px, 2.4vw, 40px); --header-h: clamp(72px, 6vw, 96px); --hairline: 1px; --radius-xs: 3px; /* inline chips, focus outlines */ --radius-sm: 6px; /* buttons, pills, inputs */ --radius-md: 12px; /* images, cards — matches the widget's card radius */ --radius-lg: 16px; /* the booking frame — the widget's upper bound */ --radius-pill: 999px; /* available, but the system does not use it */ --shadow-none: none; --shadow-frame: 0 1px 1px rgba(35, 32, 28, 0.03), 0 24px 48px -32px rgba(35, 32, 28, 0.20); --ratio-hero: 16 / 9; --ratio-wide: 3 / 2; --ratio-portrait: 4 / 5; --ratio-square: 1 / 1; --focus-ring-w: 2px; --focus-ring-off: 3px; --focus-ring-color: var(--accent); /* ---------------------------------------------------------------------- 4. MOTION Subtle only. Every reveal must also read correctly with JS disabled. ---------------------------------------------------------------------- */ --dur-quick: 180ms; /* colour / border hovers */ --dur-base: 320ms; /* header state, disclosure, transforms */ --dur-reveal: 700ms; /* fade-rise on scroll */ --dur-hero: 6000ms; /* hero image scale settle */ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-standard: cubic-bezier(0.40, 0.00, 0.20, 1); --reveal-shift: 16px; /* translateY start for fade-rise */ --reveal-stagger: 80ms; /* per sibling, max 4 */ --hero-scale-from: 1.04; --blur-header: 14px; } /* ========================================================================== Reduced motion — collapse every duration and displacement. Colour transitions survive at 1ms, so nothing flickers mid-hover. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-quick: 1ms; --dur-base: 1ms; --dur-reveal: 1ms; --dur-hero: 1ms; --reveal-shift: 0px; --reveal-stagger: 0ms; --hero-scale-from: 1; --ease-out-quart: linear; --ease-out-soft: linear; --ease-standard: linear; } }