/* ========================================================================== THE HEALING BENCH. Design system, owned entirely by Agent S. Massage therapy and wellness in Beamsville. DIRECTION-V3.md is binding on everything visual: warm spa editorial. Alternating warm bands (espresso, tan, cream), Playfair Display for display type, Jost for body and kickers, no mono face anywhere, no chromatic accent anywhere. REDESIGN-PLAN.md and BUILD-CONTRACT-V2.md's "one environment" and Lamborghini/ember palette are superseded on look; their motion contract, file ownership and the copy gate still stand. Read before touching this file: DIRECTION-V3.md, BUILD-CONTRACT-V2.md (DOM/motion sections only), haydn-house-style. Phone first at 390px, then widened. Animate only transform and opacity; never filter, width, height, top or left, for anything continuous. Discrete hover/state changes on colour are fine. ========================================================================== */ /* -------------------------------------------------------------------------- 0. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Overflow guard, hidden declared first as the fallback, clip as the real rule. */ html, body { overflow-x: hidden; overflow-x: clip; } html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100dvh; min-height: 100vh; font-family: var(--font-body); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; } /* A neutral, espresso-tinted 1px line on every framed photograph: with no chromatic accent and a warm palette end to end, a themed or literal-black outline would read as a colour decision rather than a material fact. Inset by its own width so it hugs a card's 16px radius instead of squaring the corner off. Excluded on the two full-bleed backdrops (hero, book) which have no frame to hug in the first place — an inset line there would just draw a faint box around the whole viewport. */ img { outline: 1px solid rgba(23, 18, 14, .08); outline-offset: -1px; } .hero__video, .hero__poster, .book__media, .fees__ground img, .faq__ground img, .reviews__ground img { outline: none; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; } ul, ol { list-style: none; margin: 0; padding: 0; } p { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } table { border-collapse: collapse; } /* No chromatic accent anywhere per DIRECTION-V3: text selection stays a neutral warm tan tint, never the removed ember token. */ ::selection { background: rgba(217, 198, 172, .6); color: #17120E; } /* -------------------------------------------------------------------------- 1. TOKENS The exact DIRECTION-V3 palette and fonts, character for character, plus an internal-only scale nothing outside this file needs to reference. -------------------------------------------------------------------------- */ :root { /* Palette, from DIRECTION-V3.md, verbatim. */ --espresso: #17120E; --espresso-deep: #0E0B08; --tan: #D9C6AC; --cream: #F4EBDD; --card: #FFFFFF; --ink: #2A211A; /* Darkened from the original #6B5B4C: that value measured 3.91:1 on --tan, under the 4.5:1 AA floor, on live text (the About lede, every Visit hours row). #4F4036 clears 5.96:1 on tan and 4.70:1 on tan-deep, the darkest light ground it can render on, per a from-scratch WCAG relative-luminance check that matches this project's own independently-computed number. */ --ink-soft: #4F4036; --bone: #F7F1E8; --bone-soft: #C9BCAC; --line: rgba(42, 33, 26, .14); --line-dark: rgba(247, 241, 232, .16); /* Derived, not in the direction doc but needed to build it out: a raised dark-ground card fill (DIRECTION-V3 defines --card for tan/cream only and says dark-ground cards carry no shadow, which still leaves them needing a fill distinct from the espresso ground behind them), a warm shadow for light-ground cards, and a couple of tan/cream steps for internal contrast (table stripes, hairline panels). */ --card-dark: #241C15; --tan-deep: #C7AF8E; --cream-deep: #EADFCB; /* Three-layer shadow, resting and hover, one variant per light ground. A single soft blur reads as a diffuse smudge, not a lifted object; this stacks a 1px contact ring (the card's own edge), a short tight shadow for near-field lift, and a longer soft wash for ambient depth, all tinted from --espresso, never black. White-on-cream separates by only 1.18:1 relative luminance versus tan's 1.66:1 (two near-white surfaces with almost no colour difference), so the cream variant carries a heavier ambient layer to do proportionally more of the depth-signalling work colour alone can't provide there. The ring layer never moves between resting and hover, on purpose: it stays put as the "this is still the card's edge" anchor while the other two layers do the lifting. */ --shadow-card-tan: 0 0 0 1px rgba(23, 18, 14, .05), 0 2px 6px -2px rgba(23, 18, 14, .14), 0 20px 40px -20px rgba(23, 18, 14, .22); --shadow-card-tan-hover: 0 0 0 1px rgba(23, 18, 14, .06), 0 4px 10px -3px rgba(23, 18, 14, .18), 0 32px 56px -22px rgba(23, 18, 14, .28); --shadow-card-cream: 0 0 0 1px rgba(23, 18, 14, .06), 0 2px 6px -2px rgba(23, 18, 14, .16), 0 22px 44px -18px rgba(23, 18, 14, .26); --shadow-card-cream-hover: 0 0 0 1px rgba(23, 18, 14, .07), 0 4px 10px -3px rgba(23, 18, 14, .20), 0 34px 60px -20px rgba(23, 18, 14, .32); /* Kept as an alias for anywhere still reading the old flat name. */ --shadow-warm: var(--shadow-card-cream); /* Fonts, DIRECTION-V3 verbatim. Fraunces, Karla, IBM Plex Mono, Bricolage Grotesque and Space Mono must never appear in this file. */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --gutter: clamp(20px, 5vw, 72px); --measure: 62ch; /* Internal spacing and radius scale. Two-tier radius policy per DIRECTION-V3: 16px on every card and image, a full pill (999px) on every control, nothing in between. Full-bleed hero/book photography is the one deliberate exception, styled at 0 further down. */ --space-2xs: 6px; --space-xs: 10px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --radius-card: 16px; --radius-pill: 999px; /* .site-header's real rendered height, plus breathing room, so an anchor jump never lands a heading tucked under the fixed header. */ --header-h: 78px; /* Type scale, phone value first, desktop second, all clamp()-built in rem so a visitor's own root size still scales the page. Sizes hold the v2 floors DIRECTION-V3 reaffirms: body 17/18px, section heading 40px phone up to 88px desktop. Nothing here dips under 15px except the kicker, which DIRECTION-V3 sets at 12 to 13px by name. */ --fs-kicker: clamp(.75rem, .72rem + .12vw, .8125rem); /* 12 -> 13px */ --fs-sm: clamp(.9375rem, .9rem + .18vw, 1rem); /* 15 -> 16px */ --fs-base: clamp(1.0625rem, 1.02rem + .2vw, 1.125rem); /* 17 -> 18px, contract floor */ --fs-md: clamp(1.1875rem, 1.1rem + .38vw, 1.375rem); /* 19 -> 22px */ --fs-card-name: clamp(1.25rem, 1.16rem + .4vw, 1.5rem); /* 20 -> 24px, image-card captions */ --fs-row-name: clamp(1.375rem, 1.2rem + .8vw, 2rem); /* 22 -> 32px, list/group headings */ --fs-lg: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); /* 28 -> 40px */ --fs-shead: clamp(2.5rem, 1.4rem + 5vw, 5.5rem); /* 40 -> 88px, section heading floor */ --fs-heroword: clamp(1.75rem, 1.55rem + 1vw, 2.75rem); /* 28 -> 44px, hero crest wordmark */ --fs-heroh1: clamp(2.75rem, 1.7rem + 5.6vw, 6.5rem); /* 44 -> 104px, the hero's big serif line */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.6; --lh-relaxed: 1.68; --ls-tight: -.01em; --ls-label: .18em; /* Per-tier tracking: negative tracking should read more aggressively as size grows (a 104px line has far more absolute white space between glyphs than a 20px one, so a single flat value is either too loose at hero scale or too tight at card scale). Replaces --ls-tight on the four roles below; --ls-tight itself stays for anything not covered by a tier. */ --ls-hero: -.028em; --ls-shead: -.02em; --ls-row: -.01em; --ls-card: -.005em; } @media (min-width: 880px) { :root { --header-h: 84px; } } /* -------------------------------------------------------------------------- 2. GROUND CONTEXT The alternating warm-band rhythm, DIRECTION-V3's defining structural move. Agent M puts exactly one of three real classes on each section, .tone-espresso / .tone-tan / .tone-cream, which is the actual switch; the section ids and the .ground-* aliases below are kept as a second way in, so the same result holds even if a class is ever missing. Every section gets a local set of --ground-* variables (background, ink, secondary ink, hairline colour, card surface, card border, card shadow, and the two button-fill roles), which every component below reads instead of hardcoding a light or dark assumption: a card, a button or a rule never needs to know which band it is in. No two neighbours share a ground, per the exact order in DIRECTION-V3.md: hero espresso (photographic), about tan, practitioners cream, treatments espresso, fees cream, visit tan, reviews espresso, faq cream, book espresso (photographic). -------------------------------------------------------------------------- */ .ground-espresso, .tone-espresso, #hero, #treatments, #reviews, #book, .site-footer { --ground-bg: var(--espresso); --ground-bg-deep: var(--espresso-deep); --ground-ink: var(--bone); --ground-ink-soft: var(--bone-soft); --ground-line: var(--line-dark); --ground-card: var(--card-dark); --ground-card-border: var(--line-dark); /* No drop shadow on a near-black ground; it would be invisible. The dark-card equivalent of a light card's shadow doing the "this is a raised object" job is an inset top highlight instead, wired directly on .review-card (section 18), since a drop shadow simply cannot read here at all. */ --ground-card-shadow: none; --ground-card-shadow-hover: none; --ground-btn-bg: var(--cream); --ground-btn-ink: var(--espresso); --ground-ghost-border: var(--line-dark); background: var(--ground-bg); color: var(--ground-ink); } .ground-tan, .tone-tan, #intro, #visit { --ground-bg: var(--tan); --ground-bg-deep: var(--tan-deep); --ground-ink: var(--ink); --ground-ink-soft: var(--ink-soft); --ground-line: var(--line); --ground-card: var(--card); --ground-card-border: transparent; --ground-card-shadow: var(--shadow-card-tan); --ground-card-shadow-hover: var(--shadow-card-tan-hover); --ground-btn-bg: var(--espresso); --ground-btn-ink: var(--cream); --ground-ghost-border: var(--line); background: var(--ground-bg); color: var(--ground-ink); } .ground-cream, .tone-cream, #practitioners, #fees, #faq { --ground-bg: var(--cream); --ground-bg-deep: var(--cream-deep); --ground-ink: var(--ink); --ground-ink-soft: var(--ink-soft); --ground-line: var(--line); --ground-card: var(--card); --ground-card-border: transparent; --ground-card-shadow: var(--shadow-card-cream); --ground-card-shadow-hover: var(--shadow-card-cream-hover); --ground-btn-bg: var(--espresso); --ground-btn-ink: var(--cream); --ground-ghost-border: var(--line); background: var(--ground-bg); color: var(--ground-ink); } /* Band transitions are hard edges, never gradients, per DIRECTION-V3. No rule is needed at most seams: an espresso band next to a light one is an 11-17:1 luminance jump, plainly a seam on its own. The one place that needs help is a light-to-light seam: --tan and --cream measure only 1.41:1 against each other, barely perceptible as a hard edge on some monitors. A very quiet 1px hairline drawn exactly on those two seams (about->practitioners, fees->visit) gives the eye the edge the colour alone almost doesn't. Never on an espresso neighbour, where it would be redundant. */ #practitioners, #visit { border-top: 1px solid var(--line); } /* -------------------------------------------------------------------------- 3. TYPE SYSTEM -------------------------------------------------------------------------- */ body { font-size: var(--fs-base); line-height: var(--lh-body); font-weight: 400; } .font-display, h1, h2, h3, h4, .hero__h1, .hero__wordmark { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; color: inherit; } /* 400 is the default per DIRECTION-V3 ("Playfair Display 400 for big display, 500 and 600 only where a heading must hold against a busy photograph"). Section headings read fine at 400 on a flat band; the two headings that sit over real footage (the hero, the book CTA) step up to weight below. */ h1, h2 { font-weight: 400; } h3, h4 { font-weight: 500; } /* Tracking tightens as size grows: the only

in this document is the hero headline (.hero__h1 below re-sets its size larger still and inherits this tracking); h2 covers every section .shead. */ h1 { font-size: var(--fs-shead); letter-spacing: var(--ls-shead); } h2 { font-size: var(--fs-shead); letter-spacing: var(--ls-shead); } h3 { font-size: var(--fs-row-name); letter-spacing: var(--ls-row); } h4 { font-size: var(--fs-card-name); letter-spacing: var(--ls-card); } p, .lede, .prose { text-wrap: pretty; } .fees-table caption { text-wrap: balance; } /* Hyphenation is now off by default and switched on only for the two places that genuinely need it. It used to be on for every

on the page, which is far too broad:

carries the long About copy, but it also carries one-line practitioner descriptions, fact captions and pull-quotes, and in those a mid-word break reads as a defect rather than a save. A dash at the end of a line is only forgivable when the reader is already deep in running copy. What is left on: the fee-table captions, which sit in a two-column panel that gets down to about 150px at 360px wide, and the FAQ answers, which are the longest running copy on the page. lang="en" on gives the browser a dictionary to hyphenate from. */ .faq-item__a, .fees-table caption { hyphens: auto; -webkit-hyphens: auto; } h1, h2, h3, h4, .shead, .kicker, .btn, p, blockquote, address, li, cite, strong, span { hyphens: manual; -webkit-hyphens: manual; } /* Evening the lines out, which is the other half of the same complaint. balance makes the browser even the length of every line in the block instead of filling greedily and leaving a stub on the last one; it is capped at a handful of lines by every engine that implements it, so it is safe to hand it a block that turns out longer than expected, and it simply stops applying. Everything here is short enough to qualify. Running copy keeps `pretty` instead, set further up: it does not even the lines, it only prevents a single word being stranded on the last line, which is the right trade once a paragraph is long enough that balancing would be ignored anyway. */ .practitioner-card__title, .practitioner-card__desc, .practitioner-card__quote, .practitioner-card__quote p, .treatment-row__desc, .treatment-row__with, .book__details-text, .book__address, .hero__reveal-facts span, .hero__reveal-kicker, .review-card p, .reviews__cta-lede, .faq__cta-lede, .visit__hours-time, .site-footer__col li { text-wrap: balance; } /* Text blocks measured in ch on the text element itself, never a container. */ p, .lede, .prose p, blockquote, .faq-item__a { max-width: var(--measure); } .lede { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--ground-ink-soft, var(--ink-soft)); } /* Kickers: uppercase Jost, wide tracking, 12 to 13px, per DIRECTION-V3. This is the one small label size on the page; nothing else drops under 15px. No mono face anywhere. */ .kicker, .eyebrow { font-family: var(--font-body); font-size: var(--fs-kicker); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ground-ink-soft, var(--ink-soft)); } .figure { font-variant-numeric: tabular-nums; } strong, b { font-weight: 500; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3A. WORD-MASK HEADING REVEAL, data-split="words" Every h2 carries data-split="words" per the motion contract. Agent J wraps each word in a .word-mask span at runtime (site.js's splitWords()), each one wrapping a .word-mask__inner span, and adds .in to the heading itself once it enters view; the full string stays in the DOM for screen readers via the heading's own text plus (if J chooses) an aria-label duplicate. Purely additive: an unsplit heading with no .word-mask children renders exactly as a plain heading, so this never depends on the split actually having run. Transform and opacity only. (These selectors previously read .mask / .mask > span, which never matched site.js's actual word-mask / word-mask__inner classes, so the reveal never ran -- fixed here.) */ [data-split='words'] .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .08em; margin-block: -.08em; } [data-split='words'] .word-mask__inner { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease-out); } [data-split='words'].in .word-mask__inner, [data-reveal].in [data-split='words'] .word-mask__inner { transform: none; } /* -------------------------------------------------------------------------- 4. LAYOUT UTILITIES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; } .section { position: relative; padding-block: clamp(64px, 11vh, 132px); scroll-margin-top: calc(var(--header-h) + var(--space-md)); } #main, #hero { scroll-margin-top: calc(var(--header-h) + var(--space-md)); } /* -------------------------------------------------------------------------- 4A. SECTION LABEL: .slabel (data-reveal) THEN .shead AS SIBLINGS The real markup is BUILD-CONTRACT-V2's device (.slabel > .slabel__n + .slabel__glyph + .slabel__rule, then a sibling

), not wrapped in any .section__head container. DIRECTION-V3 retires the numbered index and the cairn-as-label-glyph, so .slabel__n and .slabel__glyph are hidden here rather than removed from markup — the cairn stays reserved for the hero crest, the header brand and the favicon only. .slabel itself collapses to nothing on a centred section and survives only as the self-drawing hairline on the two split-layout sections (About, Visit), which is the one place DIRECTION-V3 keeps it. .shead is centred by default and left-aligned on those same two sections. -------------------------------------------------------------------------- */ .slabel__n, .slabel__glyph { display: none; } .slabel { display: none; } .shead { display: block; max-width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; margin-bottom: var(--space-lg); text-align: center; } .about .slabel, .visit .slabel, #intro .slabel, #visit .slabel { display: block; margin-bottom: var(--space-sm); } .about .shead, .visit .shead, #intro .shead, #visit .shead { text-align: left; margin-inline: 0; max-width: none; } /* The self-drawing rule: a hairline, transform-origin left, scaled from 0 to 1 on .in. */ .slabel__rule { display: block; width: 100%; max-width: 220px; height: 1px; background: var(--ground-line, var(--line)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); } .slabel.in .slabel__rule, [data-reveal].in .slabel__rule { transform: scaleX(1); } /* -------------------------------------------------------------------------- 5. SKIP LINK, FOCUS AND TOUCH TARGETS -------------------------------------------------------------------------- */ .skip-link { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 200; padding: .8em 1.2em; background: var(--bone); color: var(--espresso); font-weight: 500; border-radius: var(--radius-pill); transform: translateY(-160%); opacity: 0; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); } .skip-link:focus { transform: translateY(0); opacity: 1; } /* No chromatic accent: focus rings use ink on light grounds and bone on dark, at a 2px offset, per DIRECTION-V3. Scoped by the same ground variables everything else reads, so it flips automatically per band. */ :focus-visible { outline: 2px solid var(--ground-ink, var(--ink)); outline-offset: 2px; border-radius: 4px; } .site-header :focus-visible { outline-color: var(--bone); } /* Concentric with the control it rings: the 4px default above draws a squared-off box around a pill or a circle, which is one of the fastest tells of an un-designed focus state. Pills and circles declare their own outline radius to match. */ .btn:focus-visible, .nav a:focus-visible, .nav__toggle:focus-visible { border-radius: var(--radius-pill); } .stone:focus-visible, [data-carousel-prev]:focus-visible, [data-carousel-next]:focus-visible { border-radius: 50%; } /* Touch targets, 44px minimum, added without changing layout or display type. */ @media (pointer: coarse) { .btn, .nav a, .faq-item__q, .site-footer__col a, .header-actions a { min-height: 44px; } .btn { display: inline-flex; align-items: center; justify-content: center; } .nav a, .site-footer__col a, .header-actions a { display: inline-flex; align-items: center; } .stone { min-width: 44px; min-height: 44px; } } /* -------------------------------------------------------------------------- 6. THE MARK: THE CAIRN Three stacked stones, Agent M's referenced by . Styled here wherever it appears: the hero crest, the header brand, and nowhere else in v3 (it drops out of the section label device and stays out of the favicon's own markup, which is inline SVG in , not this file). Assumes the symbol paints with fill="currentColor" so colour is set here, not baked into the artwork. -------------------------------------------------------------------------- */ .brand svg, .hero__mark { color: currentColor; flex: none; } .brand svg { width: 26px; height: 26px; } .hero__mark { width: clamp(40px, 6vw, 56px); height: clamp(40px, 6vw, 56px); color: var(--bone); margin-inline: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); } /* -------------------------------------------------------------------------- 7. HEADER AND THE FLOATING GLASS NAV PILL Kept from v2/Roberts: dual-layer gradient fill, an ambient drop shadow together with an inset top highlight, backdrop-filter blur+saturate, and a masked-gradient hairline brighter on top than bottom. Retoned warm: the highlight layers are bone-tinted, not cool white, and the base fill mixes from --espresso, since the header sits over the dark, photographic hero for most of a first viewport. A plain border cannot produce the masked hairline's top/bottom asymmetry, so this is never swapped for one. -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: var(--space-sm) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); background: linear-gradient(rgba(14, 11, 8, .55), transparent); pointer-events: none; } .site-header > * { pointer-events: auto; } /* Contrast fix: the wordmark used to rely on text-shadow alone, which measured ~1.98:1 over the cream section band and ~2.67:1 over tan, both well under the 4.5:1 floor, because .site-header is fixed and its own background (a gradient that is fully transparent by the bottom of the bar) does nothing once a light band scrolls underneath. Same backing-chip recipe as .chip and .hero__caption .kicker below, but at a higher fill opacity than either: .chip's own .55 alpha and .hero__caption .kicker's .48 alpha are tuned for sitting over the hero photograph, and both fall short of 4.5:1 once composited over cream (measured ~4.13:1 and ~3.51:1 respectively) -- not enough headroom for a header that also has to cross tan and cream bands. */ .brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); letter-spacing: var(--ls-tight); color: var(--bone); text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); padding: .4em .85em .4em .6em; border-radius: var(--radius-pill); background: rgba(14, 11, 8, .7); border: 1px solid rgba(247, 241, 232, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* One line, always: the wordmark was wrapping to three stacked lines inside the flex header row, since a flex item's default min-width:auto lets its text wrap before it overflows. nowrap forces it to size to its content instead. */ .brand span { white-space: nowrap; } /* Phone header is tight (brand, a Book pill and the toggle all in one row at 360-390px); the wordmark drops to visually hidden text there, leaving just the cairn mark, same technique as .visually-hidden. */ @media (max-width: 560px) { .brand span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } } .nav { display: none; align-items: center; gap: 2px; } /* Contrast fix: this used to sit at rgba(247, 241, 232, .78), measured ~3.9:1 against the pill's fill, under the 4.5:1 floor. Raised to fully opaque bone -- the resting/hover/current distinction still reads fine through the background-only change below (hover and is-current already used opaque bone here, so this just matches them), and the pill's own fill opacity is raised alongside this so the text stays >=4.5:1 even where the fill runs lightest. */ .nav a { position: relative; padding: 9px clamp(9px, 1.05vw, 14px); border-radius: var(--radius-pill); font: 500 clamp(.75rem, .92vw, .8125rem)/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--bone); text-decoration: none; transition: color .2s var(--ease-out), background-color .2s var(--ease-out), scale .15s var(--ease-out); } .nav a:hover, .nav a:focus-visible { color: var(--bone); background: rgba(247, 241, 232, .1); } .nav a.is-current, .nav a[aria-current='true'] { color: var(--bone); background: rgba(247, 241, 232, .14); } @media (min-width: 900px) { .site-header { height: auto; padding: 14px clamp(14px, 2vw, 24px); gap: clamp(8px, 1.1vw, 14px); } .nav { position: relative; display: flex; align-items: center; gap: 1px; margin: 0 0 0 auto; padding: 6px 6px; border-radius: var(--radius-pill); isolation: isolate; /* Fill raised from 62% to 75%: at 62% the nav link text above (now opaque bone) still dropped to ~4.13:1 against the pill once composited over the cream band, and to ~4.28:1 at the pill's own top edge where the highlight layer above lightens the fill further. 75% clears 4.5:1 over cream with margin at every point in the pill, including that lightened top edge and the hover/ current overlays, which only ever darken further via color-mix or lighten the same way. */ background: linear-gradient(180deg, rgba(247, 241, 232, .09), rgba(247, 241, 232, .02)), color-mix(in srgb, var(--espresso) 75%, transparent); box-shadow: 0 14px 34px rgba(14, 11, 8, .38), inset 0 1px 0 rgba(247, 241, 232, .12); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); } /* The masked-gradient hairline. Brighter along the top edge than the bottom, which a plain 1px border cannot produce, because a border is one flat colour all the way round. */ .nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(160deg, rgba(247, 241, 232, .28) 0%, rgba(247, 241, 232, .11) 38%, rgba(247, 241, 232, .03) 70%, rgba(247, 241, 232, .11) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: color-mix(in srgb, var(--espresso) 92%, transparent); } } } .header-actions { display: none; align-items: center; gap: var(--space-xs); } @media (min-width: 900px) { .header-actions { display: flex; } } /* Mobile nav toggle and the panel it controls: #navToggle / .nav__toggle, .nav as the panel (aria-controls resolves the id on it), .is-open added to both. Also honoured on the legacy .nav__list class name in case that is what ships, so the mobile panel opens correctly either way. */ /* Contrast fix: the .35 fill measured ~2.33:1 for the Menu label/icon over the cream band, under the 4.5:1 floor. Raised to .68, which composited over cream still lands well clear of the floor (see the header contrast note above .brand); over the darker tan/espresso backdrops the fill only reads darker still. */ .nav__toggle { display: inline-flex; position: relative; align-items: center; height: 44px; min-width: 44px; padding: 0 var(--space-md) 0 calc(var(--space-sm) + 26px); border: 1px solid rgba(247, 241, 232, .3); border-radius: var(--radius-pill); background: rgba(23, 18, 14, .68); color: var(--bone); font-family: var(--font-body); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), scale .15s var(--ease-out); } .nav__toggle::before, .nav__toggle::after { content: ''; position: absolute; left: var(--space-sm); width: 16px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s var(--ease-out); } .nav__toggle::before { top: 18px; } .nav__toggle::after { top: 24px; } .nav__toggle.is-open { border-color: rgba(247, 241, 232, .5); background: var(--espresso); } .nav__toggle.is-open::before { top: 21px; transform: rotate(45deg); } .nav__toggle.is-open::after { top: 21px; transform: rotate(-45deg); } /* Declared after .nav__toggle's own unconditional base rule (display: inline-flex above) on purpose: that base rule carries no media query, so a hide-on-desktop rule placed BEFORE it in source order loses the cascade tie at 900px and up even though its condition matches, which is exactly the bug that showed the hamburger next to the full glass pill at 1280px. Placed after, this wins the tie the same way the later declaration always does at equal specificity. */ @media (min-width: 900px) { .nav__toggle { display: none; } } @media (max-width: 899.98px) { .nav, .nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; inset: 0 0 auto 0; padding: calc(var(--space-2xl) + 12px) var(--gutter) var(--space-lg); background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(217, 198, 172, .12), transparent 70%), var(--espresso-deep); border-bottom: 1px solid rgba(247, 241, 232, .14); box-shadow: 0 24px 56px -20px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transform: translateY(-14px); pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s; } .nav.is-open, .nav__list.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear; } .nav a { padding-block: var(--space-sm); font-size: var(--fs-md); color: var(--bone); border-bottom: 1px solid rgba(247, 241, 232, .14); } } /* The phone-number pill is the first thing to go when the header runs out of room. On phones it was the fourth control crowding 360-390px and clipping the toggle; between 900 and 1180 it is what pushes a nav that now carries nine links off the right edge. The number is reachable from the hero, the Book panel and the footer, so it drops rather than the nav shrinking to unreadable type or losing a link. */ @media (max-width: 1179.98px) { .header-actions .btn--ghost { display: none; } } @media (max-width: 899.98px) { .header-actions { display: flex; } } /* -------------------------------------------------------------------------- 8. BUTTONS AND CHIPS Full pill, no chromatic accent: cream fill with espresso text on dark grounds, espresso fill with cream text on light grounds, driven by the --ground-btn-* variables set in section 2 so a button never needs to know what ground it is on. A ghost variant carries a 1px border in the current ground's own line colour. -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 16px 32px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: .9375rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transform: translateY(0); transition: transform .25s var(--ease-out), scale .15s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); } .btn--sm { padding: 11px 22px; font-size: .8125rem; } .btn--primary { background: var(--ground-btn-bg, var(--espresso)); color: var(--ground-btn-ink, var(--cream)); } .btn--primary:hover, .btn--primary:focus-visible { transform: translateY(-2px); filter: brightness(1.06); } .btn--ghost { background: transparent; color: var(--ground-ink, var(--ink)); border-color: var(--ground-ghost-border, var(--line)); } .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ground-ink, var(--ink)); transform: translateY(-2px); } /* Press feedback: never guarded behind (hover:hover), since a touch visitor deserves confirmation a tap registered just as much as a mouse user does. scale, not transform, so it composes cleanly with the hover translateY above rather than needing one shared transform value. */ .btn:active, .nav a:active, .faq-item__q:active, [data-carousel-prev]:active, [data-carousel-next]:active, .nav__toggle:active { scale: .96; } /* The hero and the header sit directly on photography rather than a flat ground, so their buttons are pinned to the dark-ground pairing explicitly rather than inheriting whatever --ground-btn-* the section underneath happens to set. */ .hero .btn--primary, .header-actions .btn--primary { background: var(--cream); color: var(--espresso); } .hero .btn--ghost, .header-actions .btn--ghost { color: var(--bone); border-color: rgba(247, 241, 232, .5); } .chip { display: inline-flex; align-items: center; background: rgba(23, 18, 14, .55); border: 1px solid rgba(247, 241, 232, .22); border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--bone); padding: .5em .9em; } /* -------------------------------------------------------------------------- 9. HERO STAGE A full-bleed, low-lit treatment film (two source files, portrait and landscape, chosen by Agent F's JS; both object-fit: cover, no letterboxing) graded down so it supports rather than competes, since the footage is AI-generated and does not survive close inspection. Above centre: the cairn crest and a quiet wordmark. Below: a kicker, the page's one big serif headline, and one or two pill buttons. Agent F writes --heroOut (0 to 1, over 0.66 of a viewport height) onto #heroStage; this file translates and fades the crest and caption off with it. No CSS transition on that translate/opacity, deliberately, so it can never fall a frame behind the JS driving it. -------------------------------------------------------------------------- */ .hero { position: relative; /* The scroll distance the film is scrubbed across. Was 1000vh, which meant ten screens of scrolling before any content. Cut to 280vh, then raised to 320vh once the reveal panel arrived: the sticky stage takes 100vh, so there are 220vh of scroll, and the last quarter of that is the hold with the film pinned on the table and the text at rest. Roberts Renovations uses 210svh for a hero with nothing to hold on. */ height: 320vh; background: var(--espresso-deep); } .hero__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--espresso-deep); --heroOut: 0; } /* The poster was costing every visitor a 274KB download they never saw. This rule used to default to room-1.jpg, the warm real treatment-room photograph. But film-engine.js's initHeroOnce() overwrites this same element's background-image with an inline style the moment it runs (film-engine.js:499-500), pointing at the much smaller generated frame that matches the film's own first frame. CSS is render-blocking and the scripts are deferred, so the browser had good reason to fetch room-1.jpg before the JS ever ran, then throw it away unseen. 274KB on the critical path, on a phone, for nothing. So the default is now the same small file the JS is about to set, which makes the second fetch a cache hit rather than a new request. room-1.jpg is kept for the only two cases where a visitor actually sits and looks at the poster: the two gates that turn the film off entirely. Those are media queries, so CSS can answer them without waiting for JS. The portrait and landscape defaults mirror film-engine.js's own FILM_Q ('(orientation: portrait) and (max-width: 1024px)', film-engine.js:461) so the frame CSS paints is the frame the film is about to start on. */ .hero__poster { position: absolute; inset: 0; background-image: url('assets/hero-wide-poster.jpg?v=3'); background-size: cover; background-position: center 30%; opacity: 1; transition: opacity .6s var(--ease-out); } @media (orientation: portrait) and (max-width: 1024px) { .hero__poster { background-image: url('assets/hero-poster.jpg?v=3'); background-position: center 38%; } } /* The two static-fallback gates, matching GATES[3] and GATES[4] in film-engine.js character for character. Here the poster is not a placeholder for a film that is coming, it IS the hero, so it gets the real photograph and the weight is worth paying. */ @media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) { .hero__poster { background-image: url('assets/room-1.jpg'); background-position: center 30%; } } @media (prefers-reduced-motion: reduce) { .hero__poster { background-image: url('assets/room-1.jpg'); background-position: center 38%; } } /* Both films use object-fit: cover at every width. The v1 contain-and- feather letterbox system is removed entirely: a real landscape file exists now, so the desktop over-zoom is solved by the asset, not by CSS. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* Pushes in as the hero fades out. --heroFade runs 0 to 1 across the last stretch of the section (film-engine.js), so the picture is still closing in on the table at the moment the blackout takes it, rather than sitting frozen while it dims. Kept to 4.5%: this is a last breath inwards, not a zoom, and anything more read as a lurch over the short stretch of scroll it has to happen in. translateZ(0) is kept in the same transform so the element stays on its own layer. */ transform: translateZ(0) scale(calc(1 + var(--heroFade, 0) * .045)); transform-origin: 50% 42%; transition: opacity .8s var(--ease-out); } /* The grade that used to live here, saturate(.78) contrast(1.02) brightness(.92), is now baked into the film and the posters themselves. A CSS filter on a