/* Divergence — GENERATED by assets/divergence/convert.py. Do not hand-edit. tokens = design-direction `divergence` emitted by the kernel bridge; base + presentation = the shared direction contract; site layer last. */ @font-face{font-family:"Syne";src:url("/vendor/divergence/fonts/syne-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Roboto";src:url("/vendor/divergence/fonts/roboto-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Roboto";src:url("/vendor/divergence/fonts/roboto-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* Tokens for direction divergence@1.1.0. EMITTED, not authored: this file is the kernel's projection of the Brand in direction.json. Edit the Brand and re-run `bridge emit divergence` — hand edits here are drift by definition and `bridge check` will refuse them. Dark mode = class "dark" on . On the Formula authored-HTML import path this file is REPLACED by the tenant brand's token block. */ /* @generated by bridge — spiderbyte::brand::Brand::css_variables() */ :root{--bg:255 255 255;--fg:2 8 23;--muted:75 85 99;--border:100 116 139;--bg-2:247 248 248;--bg-3:240 240 241;--bg-4:230 230 232;--fg-2:35 43 57;--line:rgb(var(--fg) / 0.08);--line-2:rgb(var(--fg) / 0.16);--accent-bronze:146 113 35;--accent-violet:139 92 246;--accent-cyan:34 211 238;--accent-orange:249 115 22;--accent-pink:244 114 182;--accent-sky:56 189 248;--accent-emerald:16 185 129;--accent-amber:251 191 36;--color-primary:146 113 35;--color-accent:34 211 238;--color-positive:16 185 129;--color-warning:251 191 36;--color-negative:244 63 94;--color-info:56 189 248;--on-primary:0 0 0;--primary-surface:242 238 229;--primary-on-surface:131 102 32;--on-accent:0 0 0;--accent-surface:228 250 253;--accent-on-surface:19 116 131;--on-positive:0 0 0;--positive-surface:226 247 240;--positive-on-surface:10 120 84;--on-warning:0 0 0;--warning-surface:255 247 229;--warning-on-surface:138 105 20;--on-negative:0 0 0;--negative-surface:254 232 236;--negative-on-surface:195 50 75;--on-info:0 0 0;--info-surface:231 247 254;--info-on-surface:34 113 149;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-full:9999px;--space-1:6px;--space-2:10px;--space-3:14px;--space-4:20px;--space-5:26px;--space-6:32px;--space-8:40px;--space-10:52px;--text-xs:12px;--leading-xs:16px;--weight-xs:400;--text-sm:13px;--leading-sm:18px;--weight-sm:400;--text-base:14px;--leading-base:20px;--weight-base:400;--text-lg:18px;--leading-lg:24px;--weight-lg:500;--text-xl:20px;--leading-xl:26px;--weight-xl:600;--tracking-tight:-0.020em;--tracking-normal:0.000em;--tracking-wide:0.060em;--font-display:"Syne", "Syne Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-sans:"Roboto", "Roboto Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--dur-fast:140ms;--dur-base:220ms;--dur-slow:320ms;--ease-standard:cubic-bezier(.2,.8,.2,1);--ease-emphasized:cubic-bezier(.16,1,.3,1);--blur-glass:14px;--fill-glass:0.62;--blur-card:12px;--fill-card:0.5;--blur-frost:22px;--fill-frost:0.72;--shadow-sm:0 1px 2px 0px rgb(0 0 0 / 0.06);--shadow-md:0 4px 12px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 12px 32px -8px rgb(0 0 0 / 0.16);--shadow-xl:0 24px 64px -16px rgb(0 0 0 / 0.22);--stroke-hairline:1px;--stroke-thick:2px;--stroke-heavy:3px;--o-subtle:0.05;--o-muted:0.1;--o-strong:0.16;--z-base:0;--z-dropdown:1000;--z-sticky:1100;--z-overlay:1200;--z-modal:1300;--z-toast:1400;--bp-sm:560px;--bp-md:900px;--bp-lg:1200px;--bp-xl:1440px;--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--focus-ring:146 113 35;--focus-ring-width:2px;--focus-ring-offset:2px;--hit-min:44px;}.dark{--bg:0 0 0;--fg:232 236 246;--muted:156 163 175;--border:100 116 139;--bg-2:7 7 7;--bg-3:14 14 15;--bg-4:23 24 25;--fg-2:198 203 214;--primary-surface:22 17 5;--primary-on-surface:151 120 46;--accent-surface:5 32 36;--accent-on-surface:34 211 238;--positive-surface:2 28 19;--positive-on-surface:16 185 129;--warning-surface:38 29 5;--warning-on-surface:251 191 36;--negative-surface:37 9 14;--negative-on-surface:244 63 94;--info-surface:8 28 37;--info-on-surface:56 189 248;--fill-glass:0.035;--fill-card:0.025;--fill-frost:0.6;}@media(prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}} /* base/presentation.css — the structural realization of the component vocabulary. * * What a component IS, on this target: how it lays out, stacks, resets, sizes * intrinsically, and takes interaction. Not what it looks like — no colour, no radius, no * shadow, no type, no rhythm. Those are what a direction is for, and a direction overrides * anything here freely because it loads second. * * Generated by tools/extract_base.py from the declarations every direction agreed on * structurally. Re-run it rather than editing by hand; `--check` proves the split still * reproduces every direction's original output exactly. * * This is a WEB realization. An iOS host reads the same grammar and vocabulary from the * kernel and writes its own; nothing here crosses a target boundary. */ *, *::before, *::after { box-sizing: border-box; } h1, h2, h3, h4, h5, h6, p, figure, ul, ol, blockquote, dl, dd { margin: 0; } .skip-link { position: absolute; } .visually-hidden { position: absolute; padding: 0; overflow: hidden; } .stack { display: flex; flex-direction: column; } .stack-lg { display: flex; flex-direction: column; } .row { display: flex; align-items: center; flex-wrap: wrap; } .row--between { justify-content: space-between; } .grid { display: grid; } .split { display: grid; align-items: start; } .bandsplit { display: grid; align-items: start; } .bandsplit .sec-head { margin-bottom: 0; } .scroll-x { overflow-x: auto; } .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .btn--block { width: 100%; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .topbar__social { align-items: center; list-style: none; padding: 0; margin: 0; } .topbar__social a { display: inline-flex; align-items: center; justify-content: center; } .topbar__right { display: flex; align-items: center; flex-wrap: wrap; } .topbar__link { display: inline-flex; align-items: center; } .site-header { position: sticky; top: 0; z-index: var(--z-sticky); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .site-header__navrow { display: none; } .nav { display: block; } .nav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__link, .nav__toggle { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; } .nav__submenu { position: absolute; left: 0; z-index: var(--z-dropdown); margin: 0; list-style: none; } .nav__item > .nav__submenu { display: none; } .nav__item::after { position: absolute; top: 100%; } .nav__item:hover > .nav__submenu, .nav__item:focus-within > .nav__submenu, .nav__toggle[aria-expanded="true"] + .nav__submenu { display: block; } .nav__submenu a { display: flex; align-items: center; } .nav__group-list { list-style: none; } .header__actions { display: flex; align-items: center; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .icon-btn--menu { display: inline-flex; } .drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: none; } .drawer__panel { position: absolute; overflow-y: auto; } .drawer__head { display: flex; align-items: center; justify-content: space-between; } .drawer__list { list-style: none; margin: 0; padding: 0; } .drawer__list a { display: block; } .drawer__sub { list-style: none; } .hero { position: relative; } .hero__actions { display: flex; flex-wrap: wrap; } .hero--home .hero__inner { display: grid; } .alertband__item { display: flex; } .card { display: flex; flex-direction: column; } .card__media { overflow: hidden; } .card__title a::after { position: absolute; inset: 0; } .card__link { position: relative; display: inline-flex; align-items: center; } .feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; } .feat { display: flex; flex-direction: column; } .feat__icon { display: grid; } .feat__icon--img img { object-fit: contain; } .ticks { list-style: none; margin: 0; padding: 0; } .featrows { display: grid; } .featrow { display: grid; } .logos { display: grid; list-style: none; margin: 0; padding: 0; } .logos li { display: grid; place-items: center; } .logos img { width: auto; object-fit: contain; } .quotes { display: grid; list-style: none; margin: 0; padding: 0; } .quote { display: flex; flex-direction: column; height: 100%; } .quote blockquote { margin: 0; } .quote__by { display: flex; align-items: center; } .quote__by img { object-fit: cover; } .faq { display: grid; } .faq__q { display: flex; justify-content: space-between; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__qtext { flex: 1 1 auto; } .faq__q h3 { flex: 1 1 auto; } .docs { display: grid; list-style: none; margin: 0; padding: 0; } .bio { display: grid; } .bio__photo { width: 100%; } .peers { display: flex; flex-wrap: wrap; list-style: none; padding: 0; } .peers a { display: inline-flex; align-items: center; } .infolist { list-style: none; margin: 0; padding: 0; } .cta__inner { display: grid; } .cta__actions { display: flex; flex-wrap: wrap; } .field { display: grid; } .field input, .field textarea, .field select { width: 100%; } .consent { display: flex; align-items: flex-start; } .notice__routes { display: flex; flex-wrap: wrap; padding: 0; list-style: none; } .postmeta { display: flex; flex-wrap: wrap; align-items: center; } .rail { display: grid; align-content: start; } .rail__list { list-style: none; padding: 0; display: grid; } .authorbox { display: flex; align-items: center; } .authorbox img { object-fit: cover; } .postnav { display: grid; } .postnav a { display: block; } .postnav span { display: block; } .share { display: flex; flex-wrap: wrap; align-items: center; } .share a { display: inline-flex; align-items: center; } .pager { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; } .pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; } .figure { margin: 0; } .figure img { width: 100%; } .prose pre { overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .footer-links { list-style: none; padding: 0; display: grid; } .footer-links a { align-items: center; } .site-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .stickycta { position: fixed; bottom: 0; z-index: var(--z-sticky); } .products { display: grid; list-style: none; margin: 0; padding: 0; } .product { display: flex; flex-direction: column; } .product__media { overflow: hidden; } .product__media img { width: 100%; height: 100%; object-fit: cover; } .product--soldout .product__buy { pointer-events: none; } /* ── vocabulary the directions do not state ────────────────────────────────── * * Rules base carries because they are NEW shared vocabulary, not something extracted from * what the directions already agreed on. `--write` regenerates everything above from the * directions, so a rule added to the file by hand vanishes on the next run: it lives in the * emitter instead. */ /* Three across, or one — never a stranded pair. * * `grid`, `grid--2` and `grid--wide` all size columns FLUIDLY (auto-fit over a minimum track), * so the count is container width / track width: coming down from three it necessarily passes * through two, which leaves a third card alone on a row of its own. No continuous track rule * can skip a count — column count is a floor() of a continuous function, and a function that * never jumps hits every integer on the way. The jump has to come from a query, which is the * one thing a fluid minmax cannot express. So this class states a QUANTITY, not a track size. * * `gap` is deliberately NOT set here: it is the direction's to say, and several set it to 0 on * purpose so that cards meet. Structure in base, treatment in the direction. * * Stated twice because base is PREPENDED to the direction's own stylesheet: a bare `.grid--3` * ties with the direction's later `.grid` on specificity and loses. The compound wins the tie; * the bare rule covers an element that carries `grid--3` alone. */ .grid--3 { display: grid; grid-template-columns: 1fr; } .grid.grid--3 { grid-template-columns: 1fr; } @media (min-width: 60rem) { .grid--3, .grid.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Divergence — clinical clarity under a gold horizon. * * A private physical-therapy clinic: white rooms, bright architectural photography, one * warm metal. The signature is the SEAM — bands fade white-to-gold and gold-to-white, so * two sections meet at a warm horizon instead of at a rule. The display face is Syne, set * wide and tight, so a headline reads as signage on a building rather than as a heading in * a document. * * Token discipline. Every colour here is `rgb(var(--token))` or `rgb(var(--token) / a)`. * Kernel tokens are read, never redeclared — a redeclaration would pin the value and * cancel the tenant re-skin the moment this direction is handed to another brand. * * The one thing worth knowing before you change a colour here: the brand's gold is a * SURFACE, never a word. `--gold` (the live site's #D2A741) is 2.25:1 on white, so it * carries ink and never becomes ink. Gold-coloured TEXT resolves to `--primary-on-surface`, * the kernel's accessible projection of the same hue. The live site sets gold text 160 * times; every one of those is a WCAG failure this direction repairs by construction * rather than by review. */ /* ── @prelude — tokens this direction OWNS. The kernel emits none of these. The reading scale is larger than the kernel's app-UI ramp because these are pages that get read; the geometry is the live site's own (max-w-7xl = 1280px, 25px card radius). ── */ :root { /* MEASURED, route by route, off the live site at 1440px — `meta/typography.json` in the capture holds the raw computed styles for all 35 real routes. The first cut of this ramp was measured off the home hero alone and generalised, which put every page a whole step too large: body read 20px where the site renders 16px, and prose 20/28 where it is 18/32. body 16/24 · prose 18/32 · h4 20/28 · h3 24/32 · h2 30/36 · section 36/40 h1 48/48 · wordmark 72/72 */ --copy-xs: 12px; --lead-xs: 16px; --copy-sm: 14px; --lead-sm: 20px; --copy-base: 16px; --lead-base: 24px; --copy-lg: 18px; --lead-lg: 28px; --copy-xl: 20px; --lead-xl: 28px; --copy-2xl: 24px; --lead-2xl: 32px; --copy-3xl: 30px; --lead-3xl: 36px; --copy-4xl: 36px; --lead-4xl: 40px; --copy-5xl: 48px; --lead-5xl: 48px; --copy-6xl: 72px; --lead-6xl: 72px; /* prose runs looser than UI copy on this site: 18px over 32px, not 28px */ --lead-prose: 32px; /* Live's ink is gray-900 over gray-600, not the near-black the kernel ships as --fg. Body copy uses --muted (75 85 99), which the bridge already emits at that exact value. */ --ink: 17 24 39; --pad: 16px; /* The source's Tailwind container is `screens: {2xl: 1400px}` with `px-4` overriding its 2rem padding, so a page band is 1400px wide over 1368px of content — not 1280. The 1280 is `max-w-7xl`, which the footer and a few bands use; that is --col-7xl. */ /* The band is the full width up to its cap; the GUTTER is the container's own padding. Subtracting the gutter here as well made every content column 32px narrower than live at every viewport below the cap. */ --col: min(1400px, 100%); --col-7xl: min(1280px, 100%); /* `100%`, not `100vw - 2*pad`: `.container--narrow` applies the gutter as padding, so subtracting it here too inset the column twice — 32px at mobile against live's 16. */ --col-narrow: min(896px, 100%); --band: 64px; /* every standard band on the live site */ --band-seam: 96px; /* the gold-gradient bands are taller */ --band-tight: 40px; --header-h: 88px; /* The brand's metal, as a surface. Ink sits on it at 7.89:1. */ --gold: 210 167 65; --gold-deep: 184 146 58; } /* ── ground ─────────────────────────────────────────────────────────────────── */ body { margin: 0; background: rgb(var(--bg)); color: rgb(var(--fg)); font-family: var(--font-sans); font-size: var(--copy-base); line-height: var(--lead-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: rgb(var(--ink)); font-weight: 700; } /* The display face is opt-in. Defaulting headings to Syne put 99 headings in the wrong typeface, because the source reaches for it deliberately and rarely. */ /* Doubled on purpose: `.card__title`/`.doc__name` set `--font-sans` at the same specificity and appear later in the file, so a single class silently lost every tie. */ .u-display.u-display { font-family: var(--font-display); } /* The UA sheet's `[hidden] { display: none }` is (0,1,0) and loses to any author rule that sets `display` on the same element — `.card`, `.drawer`, `.steppanel` all did, so toggling the attribute changed nothing and a filtered grid kept every card on screen. One guard instead of one per component, because the next component to grow a `display` will hit it too. */ [hidden] { display: none !important; } /* h1 72px/72px, weight 800, letter-spacing +3.6px (0.05em) — WIDE, not tight. The first cut set it 95px uppercase with negative tracking, which is a different typeface voice from the one the site actually has. The display gate reads this clamp's max: 72 / 20 = 3.6. */ h1 { font-size: clamp(36px, 5vw, 48px); /* 22 of 24 live h1s are 48/48 Roboto 700 */ line-height: var(--lead-5xl); font-weight: 700; } h2 { font-size: var(--copy-3xl); line-height: var(--lead-3xl); } h3 { font-size: var(--copy-2xl); line-height: var(--lead-2xl); } h4 { font-size: var(--copy-xl); line-height: var(--lead-xl); font-weight: 600; } h5, h6 { font-size: var(--copy-base); line-height: var(--lead-base); } /* the home hero wordmark — the only 72px type on the site, and a , not an h1 */ .wordmark { font-family: var(--font-display); font-size: var(--copy-6xl); line-height: var(--lead-6xl); font-weight: 800; letter-spacing: 0.05em; } p { margin: 0; } a { color: rgb(var(--primary-on-surface)); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-base) var(--ease-standard); } a:hover { color: rgb(var(--fg)); } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid rgb(var(--focus-ring)); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } img, video, svg, iframe { max-width: 100%; } img, video { height: auto; display: block; } ::selection { background: rgb(var(--gold) / 0.4); color: rgb(var(--fg)); } /* ── layout primitives ──────────────────────────────────────────────────────── */ /* `px-4` inside the Tailwind container: 1400px of band over 1368px of content. */ .container { width: var(--col); margin-inline: auto; padding-inline: var(--pad); } .container--narrow { width: min(var(--col-narrow), 100%); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: var(--band); } .section--tight { padding-block: var(--band-tight); } /* the up-seam band is taller on the source: 96px */ .section--seam-up, .section--seam-down { padding-block: var(--band-seam); } .section--tinted { background: rgb(var(--bg-2)); } /* The seam. This is the direction's signature move: a band that ENDS in gold and the next that BEGINS in it, so the join is a horizon. Applied by the band, never by a divider — a rule between two white bands is the thing this replaces. */ .section--seam-down { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgb(var(--gold)) 100%); } .section--seam-up { background: linear-gradient(180deg, rgb(var(--gold)) 0%, rgb(var(--bg)) 100%); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack-lg { display: flex; flex-direction: column; gap: var(--space-8); } .row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .row--between { justify-content: space-between; } .grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .grid--wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .split { display: grid; gap: var(--space-8); grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 1.1fr 0.9fr; align-items: center; } .split--even { grid-template-columns: 1fr 1fr; } .split--media { grid-template-columns: 0.9fr 1.1fr; } } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .peers { display: flex; gap: var(--space-6); flex-wrap: wrap; } .skip-link { left: var(--space-4); top: var(--space-4); z-index: var(--z-modal); transform: translateY(-200%); background: rgb(var(--fg)); color: rgb(var(--bg)); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); } .skip-link:focus { transform: none; } .visually-hidden { width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; } /* ── buttons ────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); /* Measured: every live button is 40px tall over 8px/16px padding at 14px/20px — the first cut ran 46px at 12px, which reads as a different, chunkier control. */ min-height: 40px; padding: 8px 16px; border: var(--stroke-hairline) solid transparent; border-radius: var(--radius-full); font-family: var(--font-sans); font-weight: 400; font-size: var(--copy-sm); line-height: var(--lead-sm); text-decoration: none; cursor: pointer; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn:active { transform: translateY(1px); } /* The metal carries ink — the live site's own move, and the only one that keeps this colour on the page at an accessible ratio. */ /* Black pill, white label — measured off the live "Get Started Today" button. The gold is the BAND behind it, never the button. */ .btn--primary { background: rgb(var(--fg)); color: rgb(var(--bg)); border-color: rgb(var(--fg)); } .btn--primary:hover { background: rgb(var(--fg-2)); color: rgb(var(--bg)); } .btn--outline { background: transparent; color: rgb(var(--fg)); border-color: rgb(var(--fg) / 0.35); } .btn--outline:hover { background: rgb(var(--fg)); color: rgb(var(--bg)); } .btn--outline-light { background: transparent; color: rgb(var(--bg)); border-color: rgb(var(--bg) / 0.6); } .btn--outline-light:hover { background: rgb(var(--bg)); color: rgb(var(--fg)); } .btn--ghost { background: transparent; color: rgb(var(--primary-on-surface)); border-color: transparent; } .btn--ghost:hover { background: rgb(var(--primary-surface)); } .btn--onprimary { background: rgb(var(--fg)); color: rgb(var(--bg)); border-color: rgb(var(--fg)); } .btn--onprimary:hover { background: rgb(var(--bg)); color: rgb(var(--fg)); } .btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--copy-xs); } .btn--block { display: flex; width: 100%; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--hit-min); height: var(--hit-min); background: transparent; border: 0; border-radius: var(--radius-full); color: rgb(var(--fg)); cursor: pointer; } .icon-btn:hover { background: rgb(var(--bg-3)); } .icon-btn--menu { border: var(--stroke-hairline) solid var(--line-2); } /* ── header + nav ───────────────────────────────────────────────────────────── */ .topbar { background: rgb(var(--fg)); color: rgb(var(--bg)); font-size: var(--copy-xs); } .topbar__inner { width: var(--col); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 40px; flex-wrap: wrap; } .topbar__right { display: flex; align-items: center; gap: var(--space-5); } .topbar__link { color: rgb(var(--bg)); text-decoration: none; } .topbar__link:hover { color: rgb(var(--gold)); } .topbar__tel { font-weight: 600; letter-spacing: var(--tracking-wide); } .topbar__social { display: flex; align-items: center; gap: var(--space-3); } .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgb(var(--bg)); border-bottom: var(--stroke-hairline) solid var(--line-2); } /* logo | centred nav | action — the source's own three-part header */ .site-header__inner { width: var(--col); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); min-height: var(--header-h); } .site-header__inner > .header__actions { justify-self: end; } .site-header__navrow { display: flex; align-items: center; gap: var(--space-6); } .header__actions { display: flex; align-items: center; gap: var(--space-3); } .header__cta { display: none; } @media (min-width: 900px) { .header__cta { display: inline-flex; } } .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: rgb(var(--fg)); } .brand img { height: 40px; width: auto; } .brand__name { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--copy-2xl); } .nav { display: none; } @media (min-width: 900px) { .nav { display: block; } } .nav__list { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-3) 0; color: rgb(var(--fg)); text-decoration: none; font-weight: 500; font-size: var(--copy-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: none; border: 0; cursor: pointer; } .nav__link:hover, .nav__item:hover > .nav__link { color: rgb(var(--primary-on-surface)); } .nav__caret { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-base) var(--ease-standard); } .nav__item:hover .nav__caret { transform: rotate(180deg); } .nav__toggle { display: inline-flex; } @media (min-width: 900px) { .nav__toggle { display: none; } } .nav__submenu { position: absolute; left: 0; top: 100%; z-index: var(--z-dropdown); min-width: 260px; padding: var(--space-4); background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base); } .nav__item:hover > .nav__submenu, .nav__item:focus-within > .nav__submenu { opacity: 1; visibility: visible; transform: none; } .nav__submenu--mega { left: 50%; transform: translateX(-50%) translateY(4px); width: min(1120px, calc(100vw - 2 * var(--pad))); display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: var(--space-8); } .nav__item:hover > .nav__submenu--mega, .nav__item:focus-within > .nav__submenu--mega { transform: translateX(-50%); } .nav__group { min-width: 0; } .nav__group-head { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--copy-xs); color: rgb(var(--muted)); margin-bottom: var(--space-3); } .nav__group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .nav__group-list a { color: rgb(var(--fg)); text-decoration: none; font-size: var(--copy-sm); } .nav__group-list a:hover { color: rgb(var(--primary-on-surface)); } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(var(--fg) / 0.5); } .drawer__panel { position: absolute; inset-block: 0; right: 0; width: min(420px, 100vw); background: rgb(var(--bg)); padding: var(--space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); } .drawer__head { display: flex; align-items: center; justify-content: space-between; } .drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .drawer__list > li > a, .drawer__list > li > button { display: block; width: 100%; text-align: left; padding: var(--space-3) 0; background: none; border: 0; border-bottom: var(--stroke-hairline) solid var(--line); color: rgb(var(--fg)); text-decoration: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--copy-base); } .drawer__sub { list-style: none; margin: 0; padding: 0 0 var(--space-3) var(--space-4); display: grid; gap: var(--space-2); } .drawer__sub a { color: rgb(var(--muted)); text-decoration: none; font-size: var(--copy-sm); } .drawer__sub--deep { padding-left: var(--space-6); } .drawer__cta { margin-top: auto; } /* ── hero ───────────────────────────────────────────────────────────────────── */ .hero { position: relative; } .hero__inner { width: var(--col); margin-inline: auto; padding-block: var(--band); } .hero__eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--copy-sm); color: rgb(var(--primary-on-surface)); margin-bottom: var(--space-4); } .hero__title { margin: 0; } .hero__lede { margin-top: var(--space-6); font-size: var(--copy-2xl); line-height: var(--lead-2xl); color: rgb(var(--fg-2)); max-width: 62ch; } .hero__actions { margin-top: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; } .hero__media { margin-top: var(--space-8); border-radius: var(--radius-2xl); overflow: hidden; } .hero__media img, .hero__media video { width: 100%; object-fit: cover; } /* The home hero IS the seam: white at the top, the brand's metal at the horizon. */ .hero--home { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgb(var(--gold)) 100%); text-align: center; } .hero--home .hero__inner { display: flex; flex-direction: column; align-items: center; } .hero--home .hero__lede { margin-inline: auto; } .hero--page { background: rgb(var(--bg-2)); border-bottom: var(--stroke-hairline) solid var(--line); } .hero--post .hero__inner { padding-block: var(--band-tight); } /* ── section heads ──────────────────────────────────────────────────────────── */ .sec-head { margin-bottom: var(--space-10); max-width: 68ch; } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--long { max-width: 76ch; } .sec-head__eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--copy-xs); color: rgb(var(--primary-on-surface)); margin-bottom: var(--space-3); } .sec-head__title { margin: 0; } .sec-head__lede { margin-top: var(--space-4); color: rgb(var(--muted)); font-size: var(--copy-lg); line-height: var(--lead-lg); } .kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--copy-xs); color: rgb(var(--primary-on-surface)); } /* ── cards ──────────────────────────────────────────────────────────────────── */ .card { display: flex; flex-direction: column; background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line-2); border-radius: 25px; /* the source's own radius, used verbatim */ overflow: hidden; } .card--flush { border: 0; box-shadow: none; background: transparent; } .card--flush:hover { box-shadow: none; transform: none; } .card__media { aspect-ratio: 16 / 9; overflow: hidden; background: rgb(var(--bg-3)); } .card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; } .card__media--portrait { aspect-ratio: 3 / 4; } .card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .card__title { font-family: var(--font-sans); font-weight: 700; font-size: var(--copy-2xl); line-height: var(--lead-2xl); } .card__title a { color: inherit; text-decoration: none; } .card__meta { font-size: var(--copy-xs); color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .card__link { margin-top: auto; font-weight: 600; font-size: var(--copy-sm); text-decoration: none; } /* ── features ───────────────────────────────────────────────────────────────── */ .feats { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .feat { display: flex; flex-direction: column; gap: var(--space-3); } .feat__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: rgb(var(--gold)); color: rgb(var(--fg)); } .feat__icon--img { background: transparent; } .feat__icon--img img { width: 100%; height: 100%; object-fit: contain; } .feat__title { font-family: var(--font-sans); font-weight: 600; font-size: var(--copy-xl); line-height: var(--lead-xl); } .feat__body { color: rgb(var(--fg-2)); } .featrows { display: grid; gap: var(--space-8); } .featrow { display: grid; gap: var(--space-4); grid-template-columns: auto 1fr; align-items: start; } .featrow__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgb(var(--primary-surface)); color: rgb(var(--primary-on-surface)); font-family: var(--font-display); font-weight: 800; } /* ── list rows ──────────────────────────────────────────────────────────────── */ .infolist { list-style: none; margin: 0; padding: 0; display: grid; } .infolist > li { display: flex; gap: var(--space-4); justify-content: space-between; align-items: baseline; padding-block: var(--space-4); border-bottom: var(--stroke-hairline) solid var(--line); } .infolist > li:first-child { border-top: var(--stroke-hairline) solid var(--line); } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .ticks > li { position: relative; padding-left: var(--space-6); } .ticks > li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: var(--radius-full); background: rgb(var(--gold)); box-shadow: 0 0 0 1px rgb(var(--gold-deep)); } .hours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .hours > li { display: flex; justify-content: space-between; gap: var(--space-4); } /* ── prose (imported / CMS body copy) ───────────────────────────────────────── */ .prose { max-width: 72ch; } .prose > * + * { margin-top: var(--space-5); } .prose h2 { margin-top: var(--space-10); } .prose h3 { margin-top: var(--space-8); } .prose ul, .prose ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); } .prose li::marker { color: rgb(var(--primary-on-surface)); } .prose blockquote { margin: 0; padding: var(--space-5) var(--space-6); background: rgb(var(--bg-2)); border-left: var(--stroke-heavy) solid rgb(var(--gold)); border-radius: var(--radius-md); } .prose img { border-radius: var(--radius-lg); } .prose--tail > :last-child { margin-bottom: 0; } .callout { padding: var(--space-6); background: rgb(var(--primary-surface)); color: rgb(var(--primary-on-surface)); border-radius: var(--radius-lg); } /* ── quotes / testimonials ──────────────────────────────────────────────────── */ .quotes { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .quote { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); } .quote__mark { font-family: var(--font-display); font-size: var(--copy-4xl); line-height: 1; color: rgb(var(--gold-deep)); } .quote p { color: rgb(var(--fg-2)); } .quote__by { display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; } .quote__name { font-family: var(--font-display); font-weight: 700; } .quote__role { font-size: var(--copy-xs); color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ── gallery / figures ──────────────────────────────────────────────────────── */ .figure { margin: 0; display: grid; gap: var(--space-3); } .figure img { width: 100%; border-radius: var(--radius-2xl); } .figure figcaption { font-size: var(--copy-xs); color: rgb(var(--muted)); } .figure--icon img { width: auto; border-radius: 0; } .logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } .logos img { height: 40px; width: auto; object-fit: contain; } .ph { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-2xl); background: rgb(var(--bg-3)); color: rgb(var(--muted)); font-size: var(--copy-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ── team ───────────────────────────────────────────────────────────────────── */ .docs { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .doc { display: flex; flex-direction: column; gap: var(--space-3); } .doc__photo { aspect-ratio: 3 / 4; border-radius: var(--radius-2xl); overflow: hidden; background: rgb(var(--bg-3)); } .doc__photo img { width: 100%; height: 100%; object-fit: cover; } .doc__name { font-family: var(--font-sans); font-weight: 700; font-size: var(--copy-2xl); line-height: var(--lead-2xl); } .doc__cred { font-size: var(--copy-xs); color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .bio { display: grid; gap: var(--space-6); } @media (min-width: 900px) { .bio { grid-template-columns: 280px 1fr; align-items: start; } } .bio__photo { border-radius: var(--radius-2xl); overflow: hidden; background: rgb(var(--bg-3)); } .bio__cred { font-size: var(--copy-xs); color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ── faq ────────────────────────────────────────────────────────────────────── */ .faq { display: grid; } .faq__item { border-bottom: var(--stroke-hairline) solid var(--line); } .faq__item:first-child { border-top: var(--stroke-hairline) solid var(--line); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-5) 0; background: none; border: 0; cursor: pointer; text-align: left; } .faq__qtext { font-family: var(--font-sans); font-weight: 600; font-size: var(--copy-xl); line-height: var(--lead-xl); } .faq__sign { flex: none; width: var(--icon-md); height: var(--icon-md); color: rgb(var(--primary-on-surface)); transition: transform var(--dur-base) var(--ease-standard); } .faq__item[open] .faq__sign, .faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); } .faq__a { padding-bottom: var(--space-5); color: rgb(var(--fg-2)); max-width: 72ch; } /* ── forms ──────────────────────────────────────────────────────────────────── */ .formcard { padding: var(--space-8); background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line-2); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); } .field { display: grid; gap: var(--space-2); } .field > label { font-size: var(--copy-sm); font-weight: 600; } .field input, .field select, .field textarea, .field__input { width: 100%; padding: var(--space-3) var(--space-4); background: rgb(var(--bg)); color: rgb(var(--fg)); border: var(--stroke-hairline) solid rgb(var(--border)); border-radius: var(--radius-md); min-height: var(--hit-min); } .field input::placeholder, .field textarea::placeholder { color: rgb(var(--muted)); } .field--invalid input, .field--invalid select, .field--invalid textarea { border-color: rgb(var(--color-negative)); } .hint { font-size: var(--copy-xs); color: rgb(var(--muted)); } .err { font-size: var(--copy-xs); color: rgb(var(--negative-on-surface)); } .form__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); } .form__errors { padding: var(--space-4) var(--space-5); background: rgb(var(--negative-surface)); color: rgb(var(--negative-on-surface)); border-radius: var(--radius-md); } /* `display: block` on purpose. A flex container makes every inline child a block-level flex item, which tears an inline — a phone number mid-sentence — out of its own paragraph and parks it in a column of its own. */ .consent { display: block; font-size: var(--copy-xs); color: rgb(var(--muted)); max-width: 68ch; } /* ── cta ────────────────────────────────────────────────────────────────────── */ /* The closing band on every page. Gold ground, ink on it — the seam that ends the page. */ .cta { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgb(var(--gold)) 100%); } .cta__inner { width: var(--col); margin-inline: auto; padding-block: var(--band); text-align: center; } .cta__body { max-width: 62ch; margin-inline: auto; margin-top: var(--space-4); color: rgb(var(--fg-2)); } .cta__actions { margin-top: var(--space-8); display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } .bigcta { display: grid; gap: var(--space-6); place-items: center; text-align: center; padding: var(--space-10) var(--space-6); background: rgb(var(--gold)); color: rgb(var(--fg)); border-radius: var(--radius-2xl); } .stickycta { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); display: flex; justify-content: center; padding: var(--space-3); background: rgb(var(--bg) / 0.94); border-top: var(--stroke-hairline) solid var(--line-2); } @media (min-width: 900px) { .stickycta { display: none; } } .alertband { background: rgb(var(--fg)); color: rgb(var(--bg)); } .alertband__inner { width: var(--col); margin-inline: auto; display: flex; gap: var(--space-6); align-items: center; justify-content: center; flex-wrap: wrap; padding-block: var(--space-3); } .alertband__item { font-size: var(--copy-sm); } .notice { padding: var(--space-5) var(--space-6); background: rgb(var(--info-surface)); color: rgb(var(--info-on-surface)); border-radius: var(--radius-lg); } .notice__routes { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); } /* ── bands / splits ─────────────────────────────────────────────────────────── */ .bandsplit { display: grid; gap: var(--space-8); } @media (min-width: 900px) { .bandsplit { grid-template-columns: 1fr 1fr; align-items: center; } } .bandsplit__head { display: grid; gap: var(--space-4); } .rail { display: grid; gap: var(--space-6); } .rail__title { font-family: var(--font-sans); font-weight: 700; font-size: var(--copy-xl); } .rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .rail__box { padding: var(--space-6); background: rgb(var(--bg-2)); border-radius: var(--radius-xl); } /* ── stats ──────────────────────────────────────────────────────────────────── */ .stats { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .stats__n { font-family: var(--font-display); font-weight: 800; font-size: var(--copy-5xl); line-height: 1; color: rgb(var(--fg)); } .stats__k { font-size: var(--copy-xs); color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: var(--space-2); } /* ── article / blog ─────────────────────────────────────────────────────────── */ .postmeta { font-size: var(--copy-xs); color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .authorbox { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-6); background: rgb(var(--bg-2)); border-radius: var(--radius-xl); } .share { display: flex; gap: var(--space-3); align-items: center; } .crumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: var(--copy-xs); color: rgb(var(--muted)); list-style: none; margin: 0; padding: 0; } .crumbs a { color: rgb(var(--muted)); } .postnav { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; border-top: var(--stroke-hairline) solid var(--line); padding-top: var(--space-6); } .postnav--end { justify-content: flex-end; } .pager { display: flex; gap: var(--space-2); align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; } .pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding-inline: var(--space-3); border-radius: var(--radius-full); text-decoration: none; color: rgb(var(--fg)); } .pager a:hover { background: rgb(var(--bg-3)); } .pager [aria-current="page"] { background: rgb(var(--gold)); color: rgb(var(--fg)); font-weight: 700; } /* ── table ──────────────────────────────────────────────────────────────────── */ table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hairline) solid var(--line); } th { font-family: var(--font-display); font-weight: 700; font-size: var(--copy-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgb(var(--muted)); } /* ── commerce ───────────────────────────────────────────────────────────────── */ .products { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .products__empty { color: rgb(var(--muted)); } .product { display: flex; flex-direction: column; gap: var(--space-3); } .product__media { aspect-ratio: 1; border-radius: var(--radius-2xl); overflow: hidden; background: rgb(var(--bg-3)); } .product__media img { width: 100%; height: 100%; object-fit: cover; } .product__body { display: grid; gap: var(--space-2); } .product__title { font-family: var(--font-sans); font-weight: 700; font-size: var(--copy-xl); } .product__price { font-weight: 600; color: rgb(var(--primary-on-surface)); } .product__note { font-size: var(--copy-xs); color: rgb(var(--muted)); } .product__buy { margin-top: var(--space-2); } .product--soldout { opacity: 0.55; } /* ── footer ─────────────────────────────────────────────────────────────────── */ .site-footer { background: rgb(var(--bg-2)); border-top: var(--stroke-hairline) solid var(--line-2); } .site-footer__inner { width: var(--col); margin-inline: auto; padding-block: var(--band-tight); } .site-footer__grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .site-footer__bar { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--stroke-hairline) solid var(--line); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--copy-xs); color: rgb(var(--muted)); } .footer-block { display: grid; gap: var(--space-3); } .footer-block h3, .footer-block h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--copy-xs); color: rgb(var(--muted)); } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .footer-links a { color: rgb(var(--fg)); text-decoration: none; font-size: var(--copy-sm); } .footer-links a:hover { color: rgb(var(--primary-on-surface)); } /* ── motion ─────────────────────────────────────────────────────────────────── */ .is-in { opacity: 1; transform: none; } .theme-ready * { transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* the click/keyboard path the script drives */ /* ── site layer — Divergence-specific, appended after the direction ────────────── Everything here is layout the DIRECTION does not own: the embedded form and map frames, and the one-off rhythm of this site's bands. Still token-pure. */ .formcard iframe, .rail iframe, .footer-block iframe { display: block; width: 100%; border: 0; border-radius: var(--radius-xl); background: rgb(var(--bg-3)); } .footer-block iframe { min-height: 200px; } /* ---- footer, measured off the live page ------------------------------------------------ The direction's `.site-footer__grid` is `auto-fit minmax(220px, 1fr)`, which produced five tracks at this width. The source is an explicit 3-column grid: `gap-4` for the maps and `gap-8` for the link columns, inside `py-8`. */ /* live's footer is white with no top rule — it reads as part of the page, not a tinted slab */ .site-footer { background: rgb(var(--bg)); border-top: 0; } .site-footer__inner { padding-block: 32px; } .site-footer__inner { width: var(--col-7xl); max-width: none; padding-inline: var(--pad); } .footer-maps { margin-bottom: 32px; } .footer-maps__title { font-size: var(--copy-xl); font-weight: 600; margin-bottom: 16px; text-align: center; } .site-footer__grid--maps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .site-footer__grid--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } /* The footer runs one step down from the page scale: `text-lg` headings (18px/28px) over `text-sm` body (14px/20px), with the legal block at `text-xs`. The direction's generic `.footer-block` inherits the page scale and a reading measure, both wrong here. */ /* All four are `text-lg font-semibold` in black Roboto on live. The direction styles `h4` and `.footer-links a` as uppercase gold eyebrows, which is right for its own grammar and wrong for this footer, so the site layer restates them. */ .site-footer .footer-block h3, .site-footer .footer-block h4, .footer-maps__title { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 600; margin: 0 0 16px; text-transform: none; letter-spacing: normal; color: rgb(var(--fg)); } .site-footer a { color: rgb(var(--fg)); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .site-footer .footer-links a { color: rgb(var(--fg)); text-transform: none; letter-spacing: normal; } /* `>` on purpose: a descendant selector here is (0,3,1) and outranks every `.footer-addr__*` rule below, which is how the address blocks ended up carrying a 16px bottom margin each. The source only styles the column's own paragraphs. */ .site-footer .footer-block > p { font-size: 14px; line-height: 20px; margin: 0 0 16px; max-width: none; } .site-footer .footer-block > p:last-child { margin-bottom: 0; } .site-footer .footer-links a { font-size: 14px; line-height: 20px; } .footer-legal, .footer-legal .consent { max-width: none; } .site-footer__grid--maps + * { margin-top: 0; } .footer-map__label { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; font-size: var(--copy-sm); line-height: var(--lead-sm); font-weight: 600; } .footer-map__dot { width: 12px; height: 12px; border-radius: 50%; background: #ef4444; flex: none; } .footer-map__frame { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: var(--stroke-hairline) solid var(--line-2); } .footer-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; } .footer-social { display: flex; gap: 16px; } .footer-social__link { display: inline-flex; color: rgb(var(--fg-2)); transition: color var(--dur-2) var(--ease-out); } .footer-social__link:hover { color: rgb(var(--primary-on-surface)); } /* the source's Quick Links are `space-y-2` blocks, not a bullet list */ .site-footer .footer-links { display: grid; gap: 8px; justify-items: start; } .footer-addr + .footer-addr { margin-top: 16px; } .footer-addr__label { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; } .footer-addr__map { color: inherit; text-decoration: none; } .footer-addr__map:hover { text-decoration: underline; } .footer-addr__map p, .footer-addr__tel { font-size: 14px; line-height: 20px; margin: 0; } .footer-addr__tel { margin-top: 4px; } .footer-legal { margin-top: 32px; padding-top: 16px; text-align: center; } /* `.site-footer .footer-block p` above is (0,3,1); a bare `.footer-legal .consent` is (0,2,0) and silently lost the tie, leaving this block at 14px/20px. Matching the specificity. */ /* Every `.footer-block` is a grid in the direction. Inside the equal-height column grid it inherits `align-content: stretch`, so its rows split the tallest column's height between them — an 18px heading was occupying 92px. The source's columns are plain block divs. */ .site-footer .footer-block { display: block; gap: normal; align-content: start; } .site-footer .footer-legal .consent { font-size: 12px; line-height: 16px; margin: 0; max-width: none; } .site-footer .footer-legal .consent + .consent { margin-top: 16px; } .site-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 16px; font-size: var(--copy-sm); line-height: var(--lead-sm); } .site-footer__logo { margin-top: 32px; display: flex; justify-content: center; } .site-footer__logo img { height: 32px; width: auto; } /* Header and footer logos swap to the mono mark on hover, as `FooterLogo.tsx` and the header's own `isHovered` do. Two stacked images, so there is no request on first hover. */ .brand--swap { position: relative; display: inline-flex; } .brand--swap .brand__hover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); } .brand--swap > img:first-child { transition: opacity var(--dur-base) var(--ease-standard); } /* Fade the BASE out as the overlay comes in. Both were opaque, so the gold mark stayed visible underneath and the swap was a no-op. */ .brand--swap:hover > img:first-child, .brand--swap:focus-visible > img:first-child { opacity: 0; } .brand--swap:hover .brand__hover, .brand--swap:focus-visible .brand__hover { opacity: 1; } @media (max-width: 767px) { .site-footer__grid--maps, .site-footer__grid--cols { grid-template-columns: minmax(0, 1fr); } .site-footer__pipe { display: none; } } .hero__h2 { text-align: center; max-width: 56ch; margin-inline: auto; } .section--seam-up { text-align: center; } .section--seam-up .hero__lede { margin-inline: auto; } .section--seam-up .hero__actions { justify-content: center; } .cta .figure--icon { height: 48px; width: auto; margin-inline: auto; opacity: 0.8; } .card__media video { width: 100%; height: 100%; object-fit: cover; background: rgb(var(--fg)); } .doc .prose { max-width: none; font-size: var(--copy-base); line-height: var(--lead-base); } .quote__mark { letter-spacing: 0.1em; } .infolist > li a { white-space: nowrap; } /* ── HEADER + MEGA MENUS, transcribed from app/components/Header.tsx ──────────── The panels are FULL-VIEWPORT-BLEED image-card grids, not dropdown link lists. They are positioned against the
(its only positioned ancestor) with no `top`, so they fall to their static position at 71px — 25px ABOVE the header's bottom border, which they paint over at z-index 9999. `top:100%` is the wrong value and shows the rule. */ .site-header { position: relative; background: rgb(var(--bg)); color: rgb(var(--fg)); border-bottom: 1px solid var(--line-2); padding-block: 24px; } .site-header__inner { width: min(1280px, 100%); margin-inline: auto; padding-inline: 16px; display: flex; align-items: center; justify-content: space-between; gap: 0; min-height: 0; } .brand { flex: 0 0 auto; display: inline-flex; } .brand img { height: 32px; width: auto; display: block; } /* the nav is centred in the LEFTOVER space between logo and button, not on the page */ .navwrap { display: none; } @media (min-width: 768px) { .navwrap { display: flex; flex: 1 1 0%; justify-content: center; align-items: center; } } /* The 47px row, and where it comes from: the
    is FLEX, each
  • is a flex item, and the LINK inside it is inline-block on a 24px line box — so the li is 40px of link plus ~7px of descender space, and the header is 96px rather than 89px. Making the li itself inline-block collapses that 7px and shortens the whole header. */ /* The source's toggle is `md:hidden p-2` around a 24px icon — 40x40, not the direction's 44px minimum hit target, which made the mobile header 93px against live's 89px. 40px still clears WCAG 2.5.8 AA (24px). */ .site-header .nav__toggle { min-height: 0; width: 40px; height: 40px; padding: 8px; color: rgb(var(--muted)); } .site-header .nav__toggle svg, .site-header .nav__toggle img { width: 24px; height: 24px; } /* Hovering one nav item fades and softens the others — `opacity-50 blur-[1px]` on every sibling, 300ms. It reads as the menu focusing on what you are pointing at. */ .nav__list:hover .nav__item:not(:hover) > .nav__link { opacity: .5; filter: blur(1px); } .nav__list .nav__link { transition: opacity 300ms, filter 300ms, color 300ms; } /* `gap: 0` on purpose. The direction sets `gap: var(--space-6)` (32px) on `.nav__list`, and the 24px `space-x-6` margin below ADDS to it — the two together spaced the items 56px apart and widened the nav by 128px, which is also what pushed it onto a second row at 768px. */ .nav__list { display: flex; align-items: flex-start; min-height: 47px; position: relative; list-style: none; margin: 0; padding: 0; gap: 0; font-size: 16px; line-height: 24px; } .nav__item { position: relative; } .nav__item + .nav__item { margin-left: 24px; } .site-header .nav__link { display: inline-block; padding: 8px 4px; font-size: 16px; line-height: 24px; font-weight: 400; color: rgb(var(--fg)); text-decoration: none; background: none; border: 0; cursor: pointer; transition: all 300ms; /* the source's nav is sentence case and untracked; the direction's contract sets uppercase + wide tracking, which is a different navigation entirely */ text-transform: none; letter-spacing: normal; font-family: var(--font-sans); } /* hovering changes only the OTHER items — the hovered one keeps its colour */ .site-header .nav__link:hover, .site-header .nav__item:hover > .nav__link { color: rgb(var(--fg)); } .nav__item[data-mega] > .nav__link { cursor: default; } /* hovering any item dims and blurs every OTHER item */ .nav__list:hover .nav__item > .nav__link { opacity: 0.5; filter: blur(1px); } .nav__list .nav__item:hover > .nav__link { opacity: 1; filter: none; } .header__actions { display: flex; align-items: center; } /* The direction styles `.nav__link` as a 14px uppercase gold-tracking eyebrow, which is its own grammar. This site's nav is plain 16px Roboto at weight 400 with no transform. */ .site-header .nav__link { font-family: var(--font-sans); font-size: var(--copy-base); line-height: var(--lead-base); font-weight: 400; letter-spacing: normal; text-transform: none; color: rgb(var(--fg-2)); } /* live does NOT recolour the item you are pointing at — the entire effect is the OTHER items dimming. Recolouring it too reads as a second, competing state. */ .site-header .nav__link { color: rgb(31 41 55); } .site-header .nav__link:hover, .site-header .nav__item:hover > .nav__link { color: rgb(31 41 55); } .header__cta { display: none; align-items: center; justify-content: center; height: 40px; padding-inline: 16px; border-radius: var(--radius-full); background: rgb(0 0 0); color: rgb(var(--bg)); font-size: 14px; line-height: 20px; font-weight: 400; text-decoration: none; transition: background-color 300ms; } .header__cta:hover { background: rgb(var(--gold)); color: rgb(var(--bg)); } @media (min-width: 768px) { .header__cta { display: inline-flex; } } .nav__toggle { color: rgb(var(--muted)); } @media (min-width: 768px) { .nav__toggle { display: none; } } /* the panels */ .mm { position: absolute; left: 0; top: 71px; width: 100%; z-index: 9999; background: rgb(var(--bg)); box-shadow: var(--shadow-lg); padding: 32px 16px; visibility: hidden; opacity: 0; } .mm__inner { max-width: 1280px; margin-inline: auto; display: grid; gap: 0; } .mm--4 .mm__inner { grid-template-columns: repeat(4, 1fr); } .mm--3 .mm__inner { grid-template-columns: repeat(3, 1fr); } .mm__col { border-right: 1px solid var(--line-2); } .mm__col:last-child { border-right: 0; } .mm__colinner { padding-inline: 24px; } .mm__media { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .mm__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mm h3 a { color: inherit; text-decoration: none; } .mm h3 a:hover { color: rgb(var(--gold-deep)); } a.mm__media { display: block; } .mm h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 16px; color: rgb(var(--fg)); font-family: var(--font-sans); } .mm p { font-size: 16px; line-height: 24px; color: rgb(var(--muted)); margin-bottom: 16px; } .mm p a { color: inherit; text-decoration: none; } .mm p a:hover { text-decoration: underline; } .mm__more { color: rgb(var(--gold-deep)); font-size: 16px; line-height: 24px; text-decoration: none; } .mm__more:hover { color: rgb(var(--gold-deep)); text-decoration: underline; } .mm__more:hover { text-decoration: underline; } .mm__list { list-style: none; margin: 0; padding: 0; } .mm__list li + li { margin-top: 8px; } .mm__list a { font-size: 16px; line-height: 24px; color: rgb(var(--fg)); text-decoration: none; } .mm__list a:hover { color: rgb(var(--gold-deep)); } /* open on hover of the trigger, and stay open while the pointer is in the panel */ .nav__item[data-mega]:hover ~ .mm, .mm:hover { } .mm.is-open { visibility: visible; opacity: 1; } /* THE MOBILE MENU. `base/presentation.css` sets `.drawer { display: none }` with no condition, so toggling the `hidden` attribute could never reveal it — the drawer reported hidden=false and display:none at the same time. */ .drawer[hidden] { display: none !important; } .drawer:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100; } /* A right-hand sheet over a 50% scrim, per `MobileMenu.tsx`. Every rule here is written to OUT-SPECIFY the direction, which styles this component as a different thing entirely: `.drawer__panel` carries 32px of padding and a 26px flex gap, and `.drawer__list > li > a` (0,2,2) sets the rows to uppercase Syne 700 with a bottom rule and `display: block`. A plain `.drawer__row` (0,1,0) lost to it, which is why the rows kept the eyebrow treatment and the chevrons sat against the label instead of at the right edge — `display: block` meant `justify-content` had nothing to distribute. */ .drawer__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); } .drawer .drawer__panel { position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 384px; background: rgb(var(--bg)); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; } /* head: `flex items-center justify-between px-4 py-6 border-b` */ .drawer .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 16px; border-bottom: var(--stroke-hairline) solid var(--line-2); flex: none; } .drawer .drawer__title { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 600; color: rgb(31 41 55); margin: 0; text-transform: none; letter-spacing: normal; } .drawer .drawer__x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 8px; border: 0; background: none; cursor: pointer; border-radius: var(--radius-full); color: rgb(31 41 55); } .drawer .drawer__x:hover { background: rgb(243 244 246); } .drawer .drawer__x svg { width: 24px; height: 24px; } /* nav: `overflow-y-auto`, list: `p-4 space-y-2` */ .drawer .drawer__nav { overflow-y: auto; flex: 1; } .drawer .drawer__list { list-style: none; margin: 0; padding: 16px; display: grid; gap: 8px; } /* rows: `flex w-full items-center justify-between p-3 text-left text-lg font-medium rounded-lg` */ .drawer .drawer__list > li > a, .drawer .drawer__list > li > button, .drawer .drawer__list .drawer__row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; text-align: left; border: 0; border-bottom: 0; background: none; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 500; text-transform: none; letter-spacing: normal; color: rgb(31 41 55); text-decoration: none; } .drawer .drawer__list .drawer__row:hover { background: rgb(249 250 251); } .drawer .drawer__row > span { font: inherit; color: inherit; } .drawer .drawer__chev { width: 20px; height: 20px; flex: none; color: rgb(107 114 128); transition: transform var(--dur-base) var(--ease-standard); } .drawer .drawer__row--toggle[aria-expanded="true"] .drawer__chev { transform: rotate(180deg); } /* sub-list: `mt-2 pl-4 space-y-1`, links `block w-full p-3 text-left text-gray-600` */ .drawer .drawer__sub { list-style: none; margin: 8px 0 0; padding: 0 0 0 16px; display: grid; gap: 4px; } .drawer .drawer__sub[hidden] { display: none; } .drawer .drawer__sub a, .drawer .drawer__sublink { display: block; width: 100%; padding: 12px; text-align: left; /* the sub-links carry no size class, so they sit at the base 16px, not the rows' text-lg */ font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; text-transform: none; letter-spacing: normal; color: rgb(75 85 99); text-decoration: none; border-radius: var(--radius-md); } .drawer .drawer__sub a:hover, .drawer .drawer__sublink:hover { color: rgb(var(--primary-on-surface)); background: rgb(249 250 251); } @media (max-width: 767px) { .mm { display: none; } } /* ── home hero, transcribed from app/components/Hero.tsx ──────────────────────── Class-for-class off the source component rather than measured off a screenshot. Tailwind reference: py-8 = 32px, py-24 = 96px, mb-8 = 32px, mb-16 = 64px, max-w-4xl = 896px, text-7xl = 72px, text-4xl = 36px, tracking-wider = .05em. */ .filmband { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgb(var(--gold)) 100%); } .filmband__frame { padding-block: 32px; } .filmcard { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: none; cursor: pointer; } .filmcard img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; display: block; } .filmcard__scrim { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.3); border-radius: 25px; } .filmcard__play { width: 64px; height: 64px; border-radius: var(--radius-full); background: rgb(var(--bg)); display: grid; place-items: center; } .filmcard__play::after { content: ""; border-style: solid; border-width: 8px 0 8px 16px; border-color: transparent transparent transparent rgb(0 0 0); margin-left: 4px; } .filmcard video { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; } .heroband { background: linear-gradient(180deg, rgb(var(--gold)) 0%, rgb(var(--bg)) 100%); padding-block: 96px; overflow: hidden; } /* ---- type steps, not fluid interpolation -------------------------------------------------- The source is Tailwind: `text-3xl sm:text-4xl md:text-5xl lg:text-6xl` jumps at 640/768/1024, it does not interpolate. A `clamp(min, Nvw, max)` only reaches its max at one viewport and is wrong at every width between the breakpoints — the hero wordmark topped out at 36px where live renders 72px, and four section headings on the home page ran 22-36% small between 768 and 1200. Every ramp below is the measured live value at each Tailwind breakpoint. */ /* Syne set explicitly: live's wordmark is a SPAN inside the h1, and the display map keys on (tag, text), so an H1 here never matched it. This element IS the wordmark — say so. */ .heroband__title { font-family: var(--font-display); font-size: 30px; line-height: 1.25; letter-spacing: 0.05em; color: rgb(var(--bg)); text-align: center; font-weight: 800; margin-bottom: 32px; } .heroband__sub { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.2em; text-align: center; color: rgb(var(--bg)); font-weight: 400; margin-bottom: 64px; } .heroband__copy { max-width: 896px; margin-inline: auto; text-align: center; color: rgb(var(--fg)); margin-top: 48px; display: grid; gap: 32px; } .heroband__copy h2 { font-size: 24px; font-weight: 700; } .heroband__copy p { font-size: var(--copy-lg); line-height: var(--lead-prose); } /* the silhouette band: four masked figures, 25% wide each, 600px tall */ .sils { position: relative; height: 600px; margin-bottom: 48px; margin-top: 48px; } .sil { position: absolute; height: 100%; width: 25%; display: flex; align-items: center; justify-content: center; } .sil__fig { display: block; width: 100%; height: 100%; background: rgb(0 0 0); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } @media (max-width: 767px) { .sils { height: 800px; } .sil { position: static; width: 100%; height: 25%; } } /* social links stack vertically and knock out of whatever is behind them */ .socials { display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative; } .socials a { background: rgb(var(--bg)); border-radius: var(--radius-full); padding: 8px; mix-blend-mode: difference; display: block; line-height: 0; } .socials img { width: 28px; height: 28px; display: block; } /* ── the Difference block ── max-w-4xl centred, items text-LEFT in a 768px column ── */ .diffblock { max-width: 896px; margin: 80px auto; text-align: center; color: rgb(var(--fg)); } .diffblock > h2 { font-size: 24px; font-weight: 700; margin-bottom: 32px; } .diffblock__lede { font-size: 18px; line-height: 1.6; margin-bottom: 32px; } .diffblock__items { display: grid; gap: 24px; text-align: left; max-width: 768px; margin-inline: auto; } .diffblock__items h3 { font-size: var(--copy-xl); line-height: var(--lead-xl); font-weight: 700; margin-bottom: 8px; } .diffblock__items p { font-size: 18px; line-height: 1.6; } /* ── gallery ── three 4:3 cells, then TWO in a NARROWER centred row. mt-40. ── */ .gallery { margin-top: 160px; max-width: 1152px; margin-inline: auto; } .gallery__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gallery__row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; max-width: 896px; margin-inline: auto; } .gcell { aspect-ratio: 4 / 3; } .gcell img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; display: block; } @media (max-width: 767px) { .gallery { margin-top: 64px; } .gallery__row3, .gallery__row2 { grid-template-columns: 1fr; } } /* ── the four content bands below the hero ── */ .band { padding-block: 64px; } /* py-16 */ .band--wide { padding-block: 96px; } /* py-24 */ .band--tight { padding-block: 64px; } .band--tint { background: rgb(var(--bg-2)); } .bandhead { text-align: center; margin-bottom: 48px; } .bandhead h2 { font-size: var(--copy-4xl); line-height: var(--lead-4xl); font-weight: 700; margin-bottom: 16px; } /* the source sets these two heads in the brand's gold */ .bandhead__gold { color: rgb(var(--gold-deep)); } .bandhead__lede { font-size: 18px; color: rgb(var(--muted)); max-width: 768px; margin-inline: auto; } .bandhead--xl { max-width: 896px; margin-inline: auto; margin-bottom: 64px; } .bandhead--xl h2 { font-size: 36px; line-height: 40px; font-weight: 800; margin-bottom: 24px; } .bandhead--xl .bandhead__lede { font-size: 20px; line-height: 28px; color: rgb(var(--fg-2)); max-width: none; } /* cards: the source's shadcn Card — hairline, rounded, padded, two-up */ .cardgrid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-inline: auto; } .cardgrid--5xl { max-width: 1024px; } .cardgrid--4xl { max-width: 896px; } @media (min-width: 768px) { .cardgrid { grid-template-columns: repeat(2, 1fr); } } .tcard { display: flex; flex-direction: column; background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .tcard__head { padding: 24px 24px 0; } .tcard__head h3 { font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 700; } .tcard__head a { color: inherit; text-decoration: none; } .tcard__body { padding: 24px; color: rgb(var(--fg-2)); display: grid; gap: 12px; } .tcard__body p { line-height: 1.625; } /* testimonial carousel — one slide at a time */ /* The wrapper was a 3-column grid left over from a prev/next layout, which made the track a shrink-to-fit column 592px wide instead of the full 1248px — so translateX(-100%) moved by half a slide. The source is a plain `overflow-hidden` box at max-w-7xl. */ .carousel { position: relative; width: min(1248px, 100%); margin-inline: auto; overflow: hidden; } .carousel__track > * { flex: 0 0 100%; padding-inline: 8px; box-sizing: border-box; } /* NO `overflow: hidden` here. The clip belongs to `.carousel` alone: a transform moves an element's own clip box along with its content, so a track that clips itself crops away the very slide it just translated into view — slides 2 and 3 rendered as a blank white panel while every computed style said "visible". The duplicate `flex: 0 0 100%` below also dropped the 8px gutter the rule above sets. */ .carousel__track { display: flex; } .tslide { margin: 0; background: rgb(var(--bg)); border-radius: 25px; overflow: hidden; } .tslide__media { aspect-ratio: 16 / 9; } .tslide__cap { padding: 16px; } .tslide__cap h3 { font-size: var(--copy-xl); line-height: var(--lead-xl); font-weight: 600; } .tslide__cap p { color: rgb(var(--muted)); } /* the thumbnail row that drives the carousel — `mt-8 flex justify-center space-x-6` */ .tthumbs { margin-top: 32px; display: flex; justify-content: center; gap: 24px; } .tthumb { width: 160px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-md); overflow: hidden; outline: none; box-shadow: 0 0 0 0 rgb(var(--gold-deep)); transition: box-shadow var(--dur-base) var(--ease-standard); } .tthumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .tthumb.is-on { box-shadow: 0 0 0 2px rgb(var(--gold-deep)); } .tthumb:focus-visible { box-shadow: 0 0 0 2px rgb(var(--gold-deep)), 0 0 0 5px rgb(var(--gold-deep) / .35); } @media (max-width: 767px) { .tthumb { width: 93px; height: 96px; } .tthumbs { gap: 12px; } } /* Measured on live: the widget resizes itself to 1007px. At 757 the Submit button sits below the frame and cannot be reached. */ .formframe iframe { display: block; width: 100%; height: 1007px; border: 0; border-radius: 3px; } /* ── /contact, from app/contact/page.tsx ──────────────────────────────────────── One container at py-16; a gold 36px head; two centred 768px paragraphs; a two-column 1024px grid (copy | bare 757px iframe, no heading and no card); then three location cards in a TWO-column 896px grid, so the third sits alone on row 2 at half width. */ .ct { padding-block: 64px; } .ct__h2 { font-size: 36px; line-height: 40px; font-weight: 800; color: rgb(var(--gold-deep)); text-align: center; margin-bottom: 32px; font-family: var(--font-display); } .ct__lede { font-size: 18px; line-height: 28px; color: rgb(var(--fg-2)); text-align: center; max-width: 768px; margin-inline: auto; margin-bottom: 32px; } .ct__lede:last-of-type { margin-bottom: 48px; } .ct__grid { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: 1024px; margin-inline: auto; } @media (min-width: 768px) { .ct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ct__h3 { font-size: 30px; line-height: 36px; font-weight: 800; color: rgb(var(--gold-deep)); margin-bottom: 24px; font-family: var(--font-display); } .ct__h3--center { text-align: center; margin-bottom: 32px; } .ct__left p { font-size: 18px; line-height: 28px; color: rgb(var(--fg-2)); margin-bottom: 16px; } .ct__left .ct__sub { font-weight: 600; color: rgb(var(--fg)); margin-bottom: 8px; } .ct__list { list-style: none; margin: 0 0 24px; padding: 0; font-size: 18px; line-height: 28px; } .ct__list li + li { margin-top: 8px; } .ct__list a { color: rgb(var(--gold-deep)); text-decoration: none; } .ct__list a:hover { text-decoration: underline; } .ct__form iframe { display: block; width: 100%; height: 1007px; border: 0; border-radius: 3px; } .ct__locs { margin-top: 64px; text-align: center; } .ctcards { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 896px; margin-inline: auto; } @media (min-width: 768px) { .ctcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ctcard { background: rgb(var(--bg)); padding: 24px; border-radius: 8px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; } .ctcard h4 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 8px; font-family: var(--font-sans); color: rgb(var(--fg)); } .ctcard__addr { margin-bottom: 8px; font-size: 16px; line-height: 24px; color: rgb(var(--fg-2)); } .ctcard__addr a { color: rgb(var(--gold-deep)); text-decoration: none; } .ctcard__addr a:hover { text-decoration: underline; } .ctcard__note { font-size: 14px; line-height: 20px; color: rgb(var(--muted)); margin-bottom: 16px; } /* ── /our-process, from ProcessPageClient.tsx ─────────────────────────────────── Four bands. The gold statement band alone is ~458px: a 300px-min flex box with 48px of its own padding inside a py-16 section, holding 48px white type at 1.625 leading. */ .pp__title { padding-block: 64px; } .pp__title h2 { font-size: 36px; line-height: 40px; font-weight: 800; color: rgb(var(--gold-deep)); text-align: center; margin-bottom: 32px; font-family: var(--font-display); } .pp__intro { padding-block: 48px; } .pp__intro .container { max-width: 768px; text-align: center; } .pp__intro p { font-size: 18px; line-height: 28px; color: rgb(var(--fg)); margin-bottom: 32px; } .pp__social { display: flex; justify-content: center; } .pp__social a + a { margin-left: 24px; } .pp__social img { width: 24px; height: 24px; display: block; } .pp__statement { padding-block: 64px; background: rgb(var(--gold)); } /* `.pp__stbox h2` is (0,1,1) and wins over a bare `.pp__st`; live sets 48px on 48px. */ .pp__intro { background: rgb(239 246 255); } /* bg-blue-50, as live has it */ /* line-height deliberately NOT set here: this selector is (0,2,0) and would outrank the responsive ramp on `.pp__statement h2` (0,1,1) at every breakpoint. */ .pp__statement .pp__st { white-space: pre-line; max-width: 20ch; } .pp__stbox { min-height: 300px; display: flex; align-items: center; justify-content: center; padding-block: 48px; } /* The page's centrepiece RAMPS — measured on live at three widths: 30px/1.625 below 768, 36px/40px from 768, 48px/48px from 1024. It was locked at 36px, which is 25% too small at desktop and 20% too big on a phone. The comment above claimed "live sets 48px on 48px", which is true only at >=1024; the single hard-coded value below it never matched anywhere. */ .pp__statement h2 { font-family: var(--font-display); font-weight: 800; color: rgb(var(--bg)); text-align: center; letter-spacing: 0.05em; white-space: pre-line; font-size: 30px; line-height: 1.625; } @media (min-width: 768px) { .pp__statement h2 { font-size: 36px; line-height: 40px; } } @media (min-width: 1024px) { .pp__statement h2 { font-size: 48px; line-height: 48px; } } .pp__steps { padding-block: 64px; background: rgb(var(--info-surface)); position: relative; } .tl__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgb(var(--gold)); transform: translateX(-50%); } .pp__steps .container { max-width: 896px; position: relative; } .tl { display: grid; gap: 48px; } .tl { display: grid; gap: 128px; } /* the source's `space-y-32` */ .tl__row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; } .tl__row--flip .tl__copy { order: 2; } .tl__dot { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: var(--radius-full); background: rgb(var(--gold)); border: 4px solid rgb(var(--bg)); } .tl__copy { display: flex; align-items: center; } .tl__copyinner { text-align: left; max-width: 576px; } .tl__numcell { display: flex; align-items: center; justify-content: center; } .tl__num { width: 128px; height: 128px; border-radius: var(--radius-full); background: rgb(var(--gold)); color: rgb(var(--bg)); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; } .tl__row h3 { font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 700; margin-bottom: 24px; white-space: pre-line; } .tl__row p { font-size: var(--copy-lg); line-height: 1.625; color: rgb(var(--fg-2)); max-width: 65ch; } .pp__social-link { display: inline-flex; color: rgb(var(--muted)); } .pp__social-link:hover { color: rgb(var(--primary-on-surface)); } /* Below the md breakpoint live abandons the timeline for a plain stacked card list: no rail, no dot, and the numeral always ahead of its copy. Keeping the alternation on one column put step 2's numeral after its text and dropped the dot on top of the heading. */ @media (max-width: 767px) { .tl { gap: 32px; } .tl__row { grid-template-columns: minmax(0, 1fr); gap: 16px; } .tl__row--flip .tl__copy { order: 0; } .tl__numcell { order: -1; } .tl__dot, .tl__rail { display: none; } .tl__num { width: 96px; height: 96px; font-size: 30px; } } @media (max-width: 767px) { .tl__rail { display: none; } .tl__row { grid-template-columns: 1fr; } .tl__side:empty { display: none; } } /* ── home ProcessTabs ── 48px circles on a 1px connector, 25px-radius white panel ── */ .steptabs { position: relative; max-width: 896px; margin-inline: auto; margin-bottom: 48px; display: flex; justify-content: space-between; align-items: flex-start; gap: 0; } .steptabs::before { content: ""; position: absolute; top: 24px; left: 0; width: 100%; height: 1px; background: rgb(0 0 0); } .steptab { position: relative; width: 48px; height: 48px; border-radius: var(--radius-full); border: 1px solid rgb(0 0 0); background: rgb(var(--bg)); color: rgb(0 0 0); font-family: var(--font-display); font-weight: 700; font-size: 18px; cursor: pointer; transition: all 300ms; } .steptab.is-on { background: rgb(0 0 0); color: rgb(var(--bg)); } .steptab__cell { display: flex; flex-direction: column; align-items: center; width: 250px; } .steptab__label { text-align: center; max-width: 200px; margin: 16px 0 0; font-size: var(--copy-sm); line-height: var(--lead-sm); font-weight: 500; } .steppanels { max-width: 992px; margin-inline: auto; } .steppanel { background: rgb(var(--bg)); border-radius: 25px; padding: 48px; box-shadow: var(--shadow-lg); max-width: none; } .steppanel h3 { font-size: 36px; line-height: 40px; font-weight: 700; margin-bottom: 24px; text-align: left; color: rgb(var(--fg)); } .steppanel p { font-size: 18px; line-height: 1.625; color: rgb(var(--fg-2)); } /* /our-team editorial — full-width single column, per the source */ /* measured: Roboto 30/36 at weight 700, gold, centred — not the display face */ .tm__h2 { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 700; color: rgb(var(--gold-deep)); text-align: center; margin-bottom: 32px; } .tm__lede { font-size: 18px; line-height: 28px; color: rgb(var(--fg-2)); margin-bottom: 24px; } /* Live's team editorial is NOT prose: it is base copy — 16px/24px in slate ink inside the max-w-7xl container, with 48px above each h3 and 24px under each paragraph. Running it through `.prose` (18px/32px, gray-600) made the page 7% taller than live. */ .tm__ed { max-width: none; } /* `.prose.tm__ed` on purpose: the shared `.prose p` rule is (0,1,1) like a bare `.tm__ed p` and is emitted LATER, so it won the tie and kept the prose scale. */ .prose.tm__ed p, .prose.tm__ed li { font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--fg)); } .prose.tm__ed p { margin: 0 0 24px; } .prose.tm__ed h3 { font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 700; color: rgb(var(--fg)); margin: 48px 0 16px; } .prose.tm__ed > * + * { margin-top: 0; } .prose.tm__ed ul, .prose.tm__ed ol { margin: 0 0 24px; } /* live nests two max-w-7xl containers, each with px-4, so the column is inset 32px not 16 */ .tm__sec > .container--7xl { padding-inline: 32px; } /* ── /reviews, from ReviewsClientPage.tsx + ReviewsContent.tsx ────────────────── A FIXED 400px photographic hero under a flat scrim; a py-16 editorial; then the CMS cards two-up with a 150-character excerpt behind a Read More. */ .rvhero { position: relative; height: 400px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-size: cover; background-position: 50% 50%; } .rvhero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); } .rvhero__inner { position: relative; z-index: 10; text-align: center; color: rgb(var(--bg)); padding-inline: 16px; } .rvhero h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; /* uppercase at 48px does not fit a 390px viewport; the source's own mobile step is text-5xl, but with `uppercase` on top of it the words are wider than the band */ color: rgb(var(--bg)); font-size: 36px; line-height: 1; margin-bottom: 16px; letter-spacing: 0; } .rvhero p { font-size: 20px; line-height: 28px; font-weight: 300; color: rgb(var(--bg)); max-width: 672px; margin-inline: auto; } .rvbody { padding-block: 64px; } .rvbody__inner { max-width: 896px; margin-inline: auto; text-align: center; } .rvbody__inner h2 { font-size: 36px; line-height: 40px; font-weight: 800; color: rgb(var(--gold-deep)); margin-bottom: 32px; font-family: var(--font-display); } .rvbody__inner h3 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 24px 0 16px; } .rvbody__inner p { font-size: 16px; line-height: 24px; color: rgb(var(--muted)); margin-bottom: 32px; } .rvbody__inner ul { list-style: none; margin: 0 0 32px; padding: 0; text-align: left; max-width: 672px; margin-inline: auto; } .rvbody__inner li + li { margin-top: 8px; } .rvgrid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1280px; margin: 0 auto 48px; } @media (min-width: 768px) { .rvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rvcard { background: rgb(var(--bg)); border: 1px solid var(--line-2); border-radius: 8px; padding: 24px; } .rvcard h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 8px; font-family: var(--font-sans); color: rgb(var(--fg)); } .rvcard__meta { font-size: 14px; line-height: 20px; color: rgb(107 114 128); margin-bottom: 16px; } /* stars, the Read More button and the modal the live card opens */ .rv__stars { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; color: rgb(var(--gold-deep)); } .rv__stars .star { width: 20px; height: 20px; flex: none; } .rvcard .rv__excerpt { font-size: 16px; line-height: 24px; color: rgb(var(--muted)); margin-bottom: 16px; } .rv__more { background: transparent; color: rgb(var(--primary-on-surface)); border-color: rgb(var(--primary-on-surface)); border-radius: var(--radius-sm); font-weight: 700; } .rv__more:hover { background: rgb(var(--primary-on-surface)); color: rgb(var(--bg)); } /* `display` MUST stay behind [open]. A native is hidden by the UA rule `dialog:not([open]){display:none}`, but an AUTHOR-origin `display` outranks the UA sheet regardless of specificity — cascade ORIGIN is checked before specificity. An unguarded `display:flex` here renders all 40 review dialogs open and inline, stacked into the page. */ .rvmodal[open] { display: flex; } .rvmodal { max-width: 672px; width: calc(100% - 32px); max-height: 90vh; padding: 0; flex-direction: column; border: 0; border-radius: var(--radius-lg); background: rgb(var(--bg)); color: rgb(var(--fg)); overflow: hidden; } .rvmodal::backdrop { background: rgb(0 0 0 / 0.8); } .rvmodal__head { flex: none; position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: var(--stroke-hairline) solid var(--line-2); background: rgb(var(--bg)); } .rvmodal__title { font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 700; margin: 0; } .rvmodal__x { background: none; border: 0; padding: 4px; cursor: pointer; color: rgb(107 114 128); display: inline-flex; } .rvmodal__x:hover { color: rgb(var(--fg-2)); } /* flex:1 rather than a calc against an assumed header height — the bio header is 136px with its portrait, so `calc(90vh - 89px)` cut the last lines off every bio at 390. */ .rvmodal__body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; } .rvmodal__body p { font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--muted)); margin: 0 0 16px; } .rvmodal__body p:last-child { margin-bottom: 0; } .rvpage { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .rvpage__btn { min-width: 40px; height: 40px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: var(--copy-sm); border-radius: var(--radius-sm); border: var(--stroke-hairline) solid var(--line-2); background: rgb(var(--bg)); color: rgb(var(--fg)); } .rvpage__btn:hover { background: rgb(var(--bg-3)); } .rvpage__btn.is-on { background: rgb(var(--fg)); color: rgb(var(--bg)); border-color: rgb(var(--fg)); } /* team cards: a 150-character excerpt over a full-width Read More, the bio in a modal */ /* `p-6` on the card body — name, credentials, excerpt and button are all inset 24px. The direction's `.doc` has no padding, so the copy ran flush to the card edge. */ .doc { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .doc__photo { margin: 0; } /* `p-6` on a body wrapper, exactly as the source does. Insetting the children with `margin-inline` instead pushed the full-width button 48px past the card and clipped it. */ .doc__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .doc__name, .doc__cred, .doc__bio, .doc__more { margin-inline: 0; } .doc__bio { font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--muted)); margin: 0 0 16px; flex: 1; } .doc__more { margin-top: auto; background: transparent; color: rgb(var(--fg)); border-color: var(--line-2); border-radius: var(--radius-sm); font-weight: 500; } .doc__more:hover { background: rgb(var(--primary-on-surface)); color: rgb(var(--bg)); border-color: rgb(var(--primary-on-surface)); } /* Same cascade trap as .rvmodal[open] above — 12 bio dialogs on /our-team. */ .biomodal[open] { display: flex; } .biomodal { max-width: 672px; width: calc(100% - 32px); max-height: 90vh; padding: 0; border: 0; flex-direction: column; border-radius: var(--radius-lg); background: rgb(var(--bg)); color: rgb(var(--fg)); overflow: hidden; } .biomodal::backdrop { background: rgb(0 0 0 / 0.8); } .biomodal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: var(--stroke-hairline) solid var(--line-2); flex: none; } .biomodal__title { font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 700; margin: 0; } .biomodal__body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; max-width: none; } .biomodal__photo { width: 88px; height: 88px; border-radius: var(--radius-full); object-fit: cover; flex: none; } .biomodal__ident { flex: 1; min-width: 0; } .biomodal__cred { margin: 4px 0 0; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--primary-on-surface)); font-weight: 600; } .biomodal__head { gap: 16px; } .rvmodal__meta { margin: 0 0 16px; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(107 114 128); } .rv__excerpt { font-size: 16px; line-height: 24px; color: rgb(var(--fg-2)); margin-bottom: 16px; } .rv__more > summary { list-style: none; cursor: pointer; color: rgb(var(--gold-deep)); font-size: 14px; line-height: 20px; } .rv__more > summary::-webkit-details-marker { display: none; } .rv__full { margin-top: 16px; font-size: 16px; line-height: 24px; color: rgb(var(--fg-2)); display: grid; gap: 12px; } .rvtail { max-width: 896px; margin: 64px auto 0; text-align: center; } .rvtail h3 { font-size: 30px; line-height: 36px; font-weight: 700; margin-bottom: 24px; } .rvtail h4 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 16px; } .rvtail p { font-size: 18px; line-height: 28px; color: rgb(var(--muted)); margin-bottom: 32px; } .rvtail ul { list-style: none; margin: 0 auto 32px; padding: 0; text-align: left; max-width: 320px; color: rgb(var(--fg-2)); } .rvtail li + li { margin-top: 8px; } /* ── /location/, from LocationClientPage.tsx ────────────────────────────── One 896px column. No map band and no video band — both are guarded on CMS columns the locations collection does not have, so neither renders on the live site. */ .lc { padding-block: 64px; } .lc__col { max-width: 896px; margin-inline: auto; } .lc__card { border: 1px solid var(--line-2); border-radius: 8px; padding: 32px; box-shadow: var(--shadow-sm); margin-bottom: 48px; } .lc__card > h2 { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 700; color: rgb(var(--gold-deep)); margin-bottom: 24px; } .lc__row { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 768px) { .lc__row { flex-direction: row; justify-content: space-between; } } /* The closing "Book Your Appointment" is a centred black pill on live — 18px/500 over 12px/32px padding — not the generic inline outline link the prose renderer emits. */ /* `display` lives HERE and is `flex`, not `inline-flex`. This rule outranks the `.lc__prose > a.btn` one below it (an extra :last-child), so an `inline-flex` here silently beat that rule's `display:block` — and `margin-inline:auto` cannot centre an inline box. The pill sat flush left at x=272 where live centres it at x=593. Measured, not inferred. */ .lc__prose > a.btn:last-child, .lc__prose a.btn--outline { display: flex; width: fit-content; margin-inline: auto; background: rgb(var(--fg)); color: rgb(var(--bg)); border-color: rgb(var(--fg)); font-size: var(--copy-lg); line-height: 28px; font-weight: 500; padding: 12px 32px; min-height: 52px; } .lc__prose > a.btn:last-child:hover, .lc__prose a.btn--outline:hover { background: rgb(var(--gold-deep)); color: rgb(var(--bg)); border-color: rgb(var(--gold-deep)); } .lc__prose { text-align: left; } .lc__prose > a.btn { display: block; width: fit-content; margin-inline: auto; } .lc__item { display: flex; align-items: flex-start; } .lc__item > .ic { color: rgb(var(--gold-deep)); margin-right: 12px; margin-top: 4px; flex: none; } .lc__itembody { min-width: 0; } .lc__item h3 { font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: 4px; color: rgb(var(--fg)); font-family: var(--font-sans); } .lc__item a, .lc__item p { font-size: 16px; line-height: 24px; color: rgb(var(--fg-2)); text-decoration: none; } .lc__item a:hover { text-decoration: underline; } .lc__prose { max-width: none; } .lc__prose h1 { font-size: 36px; line-height: 1; font-weight: 700; margin-bottom: 24px; } .lc__prose h2 { font-size: 30px; line-height: 36px; font-weight: 700; } .lc__prose h3 { font-size: 24px; line-height: 32px; font-weight: 700; } .lc__prose p { font-size: 18px; line-height: 32px; color: rgb(var(--muted)); } /* The closing CTA comes through the CMS rich text, not a hand-authored band — it is the LAST h2 in `.lc__prose`, the paragraph after it, and the pill. On live that block is centred and the heading is gold; here it was rendering as ordinary left-aligned, near-black body prose. `.lc__cta` below it is the dead remnant of the band that was removed for duplicating this copy, and is kept only because the preview still names it. */ .lc__prose > h2:last-of-type { text-align: center; color: rgb(var(--gold-deep)); } .lc__prose > h2:last-of-type ~ p { text-align: center; } .lc__cta { margin-top: 64px; text-align: center; } .lc__cta h2 { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 700; color: rgb(var(--gold-deep)); margin-bottom: 24px; } .lc__cta p { font-size: 18px; line-height: 1.625; color: rgb(var(--muted)); margin-bottom: 32px; } .lc__btn { display: flex; justify-content: center; } /* CMS rich text can carry an unbreakable string (a long URL, a hyphen-free compound). No element's right edge exceeds the viewport, but the container's scroll width does — which is why the page scrolled sideways on a phone with nothing visibly sticking out. */ .prose, .prose *, .rvbody__inner, .rvbody__inner *, .rvtail, .rvtail *, .rvcard, .rvcard *, .lc__item, .lc__item * { overflow-wrap: anywhere; } .prose h1, .prose h2, .prose h3 { overflow-wrap: break-word; } .lc__btn a { background: rgb(0 0 0); color: rgb(var(--bg)); padding: 12px 32px; border-radius: var(--radius-full); font-size: 18px; line-height: 28px; font-weight: 500; text-decoration: none; } /* ── the tail band, on every page ── pt-24 + py-48, 48px words, 72px mark ── */ .tail { position: relative; overflow: hidden; padding-top: 96px; background: linear-gradient(180deg, rgb(var(--gold)) 0%, rgb(var(--bg)) 100%); } .tail__wash { position: absolute; top: 96px; left: 0; right: 0; bottom: 0; opacity: 0.6; mix-blend-mode: multiply; -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top; mask-position: top; background: linear-gradient(180deg, rgb(var(--gold) / 0.9) 0%, rgb(var(--gold) / 0.85) 50%, rgb(var(--bg)) 100%); } .tail__inner { position: relative; z-index: 1; width: var(--col); margin-inline: auto; padding-block: 192px; } .tail__stack { max-width: 896px; margin-inline: auto; text-align: center; display: grid; gap: 64px; justify-items: center; } .tail__words { display: grid; gap: 16px; } /* the whole tail band sits inside the source's syne wrapper, buttons included */ .tail .btn { font-family: var(--font-display); } /* live gives the band CTA a bespoke `hover:bg-[#D2A741]`; the direction's generic `.btn--primary:hover` only lightens to --fg-2, which reads as no hover at all. Scoped so the 20 "Learn More" buttons on /services keep their own (correct) slight-lighten hover. */ .tail .btn--primary:hover, .cta .btn--primary:hover, .ct .btn--primary:hover { background: rgb(var(--gold)); border-color: rgb(var(--gold)); color: rgb(var(--bg)); } .tail__words h2 { font-family: var(--font-display); font-size: 36px; line-height: 1; font-weight: 800; color: rgb(var(--bg)); } .tail__mark { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 800; color: rgb(var(--bg)); letter-spacing: 0; } @media (max-width: 767px) { .tail__inner { padding-block: 96px; } } /* the home page, and only the home page, is set in the display face throughout */ .syne, .syne p, .syne li, .syne a, .syne button, .syne span { font-family: var(--font-display); } /* a service page's title is 48px on the source; /reviews is 60px; interior prose runs h2 at 30px. Not one scale — the source was authored with per-page utilities. */ /* the source steps this down on a phone (text-4xl md:text-5xl); a fixed 48px pushed "Knee Pain Treatment" past a 390px viewport and scrolled the page sideways */ .page-title { font-size: 36px; line-height: 1; letter-spacing: 0; font-weight: 700; } .page-title--lg { font-size: 36px; line-height: 1; } /* Prose runs its own scale on this site: 18px over 32px in gray-600, not the 16/24 the page body uses. 599 of 620 live
  • and 175 of 254 live

    render at exactly 18/32. */ .prose, .prose p, .prose li { font-size: var(--copy-lg); line-height: var(--lead-prose); color: rgb(var(--muted)); } /* Tailwind Typography's own neutrals, which is what live renders: grey-300 bullets and near-black medium-weight inline links. The direction paints both with the brand accent, which turns every list and every inline link into a gold element live does not have. */ .prose li::marker { color: rgb(209 213 219); } .prose p a, .prose li a { color: rgb(var(--ink)); font-weight: 500; text-decoration: underline; } .prose p a:hover, .prose li a:hover { color: rgb(var(--primary-on-surface)); } /* the service/location page title is 48/48 at weight 700, not 800 over 52.8 */ .prose h1, .lc__prose h1, .page-title { font-weight: 700; } .prose--legal p, .prose--legal li { color: rgb(55 65 81); } /* The source writes `prose max-w-none` inside a max-w-4xl container, so the reading column is the full 864px. The direction's 72ch measure clamped it to 728 and re-wrapped every paragraph — worth up to 7% of page height on the longer service pages. */ .container--narrow > .prose { max-width: none; } .prose h2 { font-size: 30px; line-height: 36px; } /* the 20 service pages */ .prose h3 { font-size: var(--copy-2xl); line-height: var(--lead-2xl); } .prose h1 { font-size: 36px; line-height: 1; letter-spacing: 0; } .prose--lg h2 { font-size: var(--copy-4xl); line-height: var(--lead-4xl); } /* reviews, facilities */ /* the legal pages are Tailwind `prose prose-lg`: 18px/32px body, h2 36px, h3 20px/28px. A 30px h3 there added ~176px of height across the seven numbered sections. */ /* Measured off the live page: the legal prose column is 864px of content, not the 728px `container--narrow` gives. A narrower column re-wraps every paragraph and added ~600px of page height. */ .prose--legal { font-size: var(--copy-lg); line-height: var(--lead-prose); color: rgb(var(--muted)); max-width: 864px; margin-inline: auto; } .section--legal > .container--narrow { max-width: none; padding-inline: var(--pad); } .prose--legal h2 { font-size: 36px; line-height: 40px; color: rgb(var(--gold-deep)); text-align: center; margin: 0 0 32px; font-family: var(--font-display); font-weight: 800; } .prose--legal h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 24px 0 16px; font-family: var(--font-sans); } .prose--legal p { font-size: 18px; line-height: 32px; margin: 0 0 24px; } /* A base rule makes every `ul` a 10px-gap grid. Grid items do not collapse margins, so each list ran ~90px taller than live, which lays them out in normal block flow. Scoped to `.prose` — the grid is right for the card/tick lists, wrong for document text. */ .prose ul, .prose ol { display: block; gap: normal; } .prose--legal ul { margin: 24px 0; padding-inline-start: 28px; list-style: disc; } .prose--legal li { margin: 12px 0; padding-inline-start: 8px; display: list-item; } .doc__name { font-size: var(--copy-2xl); line-height: var(--lead-2xl); } /* ── clinician cards ── grid-cols-1 / md:2 / lg:4, gap-8, SQUARE portraits ── The source renders 288x288 squares at a 1280 container, in a white rounded card with shadow-lg. Mine were 3:4 portraits in an auto-fit grid, which is ~96px taller per row. */ .docs { grid-template-columns: 1fr; gap: 32px; } @media (min-width: 768px) { .docs { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .docs { grid-template-columns: repeat(4, 1fr); } } .doc { background: rgb(var(--bg)); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); transition: box-shadow 300ms, transform 300ms; } .doc:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); } .doc__photo { aspect-ratio: 1 / 1; border-radius: 0; } .doc__photo img { transition: transform 300ms; } .doc__photo img:hover { transform: scale(1.05); } .doc__name, .doc__cred, .doc details { padding-inline: 16px; } .doc__name { padding-top: 16px; } .doc details { padding-bottom: 16px; } /* a grid item's default min-width is its CONTENT, so a long unbroken credential line pushed the column past the viewport at 390px. 6px of overflow, on one page. */ .docs > .doc { min-width: 0; } .doc, .doc * { overflow-wrap: anywhere; } .quote__name { font-size: var(--copy-base); line-height: var(--lead-base); } /* the clinic and process pages set their sub-heads at 18px on the source */ .prose--compact h3 { font-size: 18px; line-height: 28px; } .svc-index .card__title { font-size: var(--copy-xl); line-height: var(--lead-xl); font-weight: 600; color: rgb(var(--fg)); } /* live: 3 tracks at 24px, not the direction's auto-fit — and the count line under it */ .grid.svc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* ---- /sitemap-page: grey banner over a two-column link grid --------------------------- */ .smhero { background: rgb(var(--bg-2)); padding-block: 64px; } .smhero__inner { text-align: center; } .smhero__title { font-size: 48px; line-height: 1; font-weight: 700; margin: 0 0 16px; } .smhero__lede { font-size: var(--copy-lg); line-height: var(--lead-lg); color: rgb(var(--muted)); margin: 0; } .smgrid { max-width: 896px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .smcol--wide { grid-column: 1 / -1; } .smcol__h { font-size: var(--copy-xl); line-height: var(--lead-xl); font-weight: 700; color: rgb(var(--gold-deep)); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 16px; } .smcol__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .smcol__list a { color: rgb(var(--fg-2)); text-decoration: none; font-size: var(--copy-base); line-height: var(--lead-base); } .smcol__list a:hover { color: rgb(var(--primary-on-surface)); } /* The Services column is `grid md:grid-cols-3 gap-x-8 gap-y-2` in the source: 20 links read as three columns from 768px up, not one tall stack. Stacked, the page ran 13% taller than the original. The column rule belongs to the WIDE column only — Locations stays a list. */ @media (min-width: 768px) { .smcol--wide .smcol__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 8px; } } @media (max-width: 767px) { .smgrid { grid-template-columns: minmax(0, 1fr); } } /* ---- /our-facilities: three Cards inside max-w-4xl, 48px padding ---------------------- */ .container--7xl { width: var(--col-7xl); } .fac__col { max-width: 896px; margin-inline: auto; } .fac__h2 { font-size: var(--copy-4xl); line-height: var(--lead-4xl); font-weight: 800; text-align: center; color: rgb(var(--gold-deep)); margin: 0 0 32px; } .fac__intro { margin-bottom: 64px; } .fac__intro p { font-size: var(--copy-lg); line-height: 1.625; color: rgb(var(--muted)); margin: 0; } /* The gap between cards is 48px, ONCE. This grid's `gap` and a `margin-bottom` on the child BOTH apply, so carrying both put 97px between cards where live measures 49. And the card itself is `flex flex-col gap-4` on live: that 16px gap stacks ON TOP of the children's own margins, which is where 48px of card height went (3 gaps x 16px). Measured child by child: live spans 40/39/32px between the four children, this carried 24/23/16. */ .fac__list { display: grid; gap: 48px; } .fac__body { display: flex; flex-direction: column; gap: 16px; padding: 48px; } .fac__title { font-size: var(--copy-3xl); line-height: var(--lead-3xl); font-weight: 800; color: rgb(var(--gold-deep)); margin: 0 0 24px; } .fac__desc { font-size: var(--copy-lg); line-height: 1.625; color: rgb(var(--muted)); margin: 0 0 24px; } .fac__addr { display: flex; align-items: center; margin-bottom: 16px; } .fac__addr .ic { color: rgb(var(--gold-deep)); margin-right: 12px; flex: none; } .fac__addr span { color: rgb(var(--fg-2)); font-weight: 500; } .fac__link { margin: 0; color: rgb(var(--muted)); } .fac__link a { color: rgb(var(--primary-on-surface)); text-decoration: none; } .fac__link a:hover { text-decoration: underline; } @media (max-width: 767px) { .fac__body { padding: 32px; } } /* ---- the /blog and /reviews hero band ------------------------------------------------- */ .pagehero { position: relative; isolation: isolate; padding-block: 128px; overflow: hidden; } .pagehero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; } .pagehero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); z-index: -1; } .pagehero__inner { position: relative; text-align: center; color: rgb(var(--bg)); } .pagehero__title { font-size: 60px; line-height: 60px; font-weight: 700; color: rgb(var(--bg)); margin: 0 0 16px; letter-spacing: normal; } .pagehero__lede { font-size: var(--copy-2xl); line-height: var(--lead-2xl); color: rgb(var(--bg)); max-width: 768px; margin: 0 auto; } @media (max-width: 767px) { .pagehero { padding-block: 96px; } .pagehero__title { font-size: 36px; line-height: 40px; } .pagehero__lede { font-size: var(--copy-xl); line-height: var(--lead-xl); } } /* ---- /locations: 2-up inside max-w-4xl, gold Syne headings, icon rows ----------------- */ .loc-index__title { font-size: var(--copy-4xl); line-height: var(--lead-4xl); font-weight: 800; text-align: center; color: rgb(var(--gold-deep)); margin: 0 0 32px; } .loc-index__lede { font-size: var(--copy-lg); line-height: var(--lead-lg); text-align: center; color: rgb(var(--fg-2)); max-width: 768px; margin: 0 auto 48px; } .grid.loc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 896px; margin-inline: auto; } /* the source's CardContent is a flex column with a 16px gap on top of the children's own margins — that gap is the whole 48px the card was short */ .clinic-card { background: rgb(var(--bg)); border: var(--stroke-hairline) solid rgb(226 232 240); border-radius: var(--radius-md); } .clinic-card__body { padding: 32px; display: flex; flex-direction: column; gap: 16px; } .clinic-card .card__title { font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 800; color: rgb(var(--gold-deep)); margin-bottom: 16px; } .clinic-card__rows { display: grid; gap: 12px; margin-bottom: 24px; } .clinic-row { display: flex; align-items: flex-start; } .clinic-row--mid { align-items: center; } .clinic-row .ic { color: rgb(var(--gold-deep)); margin-right: 12px; flex: none; } .clinic-row:not(.clinic-row--mid) .ic { margin-top: 4px; } .clinic-row p { margin: 0; font-size: var(--copy-base); line-height: var(--lead-base); } .clinic-row__strong { font-weight: 500; } .clinic-row__muted { color: rgb(var(--muted)); } .clinic-row__hours { font-size: var(--copy-sm) !important; line-height: var(--lead-sm) !important; color: rgb(var(--muted)); } .clinic-row__tel { color: rgb(var(--primary-on-surface)); text-decoration: none; } .clinic-row__tel:hover { text-decoration: underline; } .clinic-card__desc { color: rgb(var(--muted)); margin: 0 0 16px; font-size: var(--copy-base); line-height: var(--lead-base); } @media (max-width: 767px) { .grid.loc-index { grid-template-columns: minmax(0, 1fr); } } /* ---- /services: search + filter row, and the card the source actually ships ----------- */ .svcfilter { display: flex; gap: 16px; margin-bottom: 32px; } .svcfilter__search { position: relative; flex: 1; } .svcfilter__search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--border)); pointer-events: none; } .svcfilter__search input { width: 100%; height: 40px; padding: 8px 12px 8px 40px; font: inherit; font-size: var(--copy-sm); line-height: var(--lead-sm); border: var(--stroke-hairline) solid var(--line-2); border-radius: var(--radius-md); background: rgb(var(--bg)); color: rgb(var(--fg)); } .svcfilter__loc { display: flex; align-items: center; gap: 8px; } .svcfilter__loc .ic { color: rgb(var(--muted)); flex: none; } .svcfilter__loc select { width: 192px; height: 40px; padding: 8px 12px; font: inherit; font-size: var(--copy-sm); border: var(--stroke-hairline) solid var(--line-2); border-radius: var(--radius-md); background: rgb(var(--bg)); color: rgb(var(--fg)); } .svccard { display: flex; flex-direction: column; } /* `hover:shadow-lg transition-shadow` on the source's Cards — Tailwind's shadow-lg. */ .svccard, .rvcard, .clinic-card, .doc, .fac { transition: box-shadow var(--dur-base) var(--ease-standard); } .svccard:hover, .rvcard:hover, .clinic-card:hover, .doc:hover, .fac:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); } .svccard__head { display: grid; gap: 6px; } /* live's CardContent is `p-6` all round, so there are 48px between the description and the button block — not the 24 that dropping the top padding left. */ .svccard__body { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 16px; } .svccard__head p { font-size: var(--copy-sm); line-height: var(--lead-sm); color: rgb(var(--muted)); margin: 0; } .svccard__locs { display: flex; align-items: flex-start; gap: 8px; } .svccard__locs .ic { color: rgb(var(--muted)); margin-top: 2px; flex: none; } .badges { display: flex; flex-wrap: wrap; gap: 4px; } .badge { display: inline-flex; align-items: center; border-radius: var(--radius-full); background: rgb(var(--bg-3)); color: rgb(var(--fg-2)); padding: 2px 10px; font-size: var(--copy-xs); line-height: var(--lead-xs); font-weight: 600; } .svccard__head { padding: 24px; } /* The cards are shadcn Cards: their buttons are 6px rounded rectangles at weight 500, not the brand pill the hero CTAs use. Both shapes are on the live site. */ .svccard .btn, .clinic-card .btn, .infocard .btn { border-radius: var(--radius-sm); font-weight: 500; } /* the contact page's "See Details" is shadcn's `outline` variant, not the filled default */ .ctcard .btn, .ctcard a.btn--primary { background: rgb(var(--bg)); color: rgb(var(--primary-on-surface)); border-color: rgb(var(--primary-on-surface)); border-radius: var(--radius-sm); font-weight: 500; } .ctcard .btn:hover, .ctcard a.btn--primary:hover { background: rgb(var(--primary-on-surface)); color: rgb(var(--bg)); } /* `margin-top: auto`, not `justify-content: space-between` on the parent: a card with no location chips has only this one child in the body, and space-between pins a lone child to the START — so 5 of 7 rows had their button floating 36px above the card foot. */ .svccard__foot { margin-top: auto; padding-top: 16px; } /* the empty state's way out, mirroring the source's outline Button */ .svcfilter__clear { display: block; margin: 16px auto 0; background: transparent; color: rgb(var(--fg)); border: var(--stroke-hairline) solid var(--line-2); border-radius: var(--radius-sm); font-weight: 500; } .svcfilter__clear:hover { background: rgb(var(--primary-on-surface)); color: rgb(var(--bg)); border-color: rgb(var(--primary-on-surface)); } .svcfilter__empty { grid-column: 1 / -1; text-align: center; padding: 48px 0; font-size: var(--copy-lg); color: rgb(var(--muted)); } @media (max-width: 900px) { .svcfilter { flex-direction: column; } .svcfilter__loc select { flex: 1; width: auto; } } /* live /services is `py-8`, not the 64px standard band */ /* Tailwind's own breakpoints, with the size live computes at each one. */ @media (min-width: 640px) { .heroband__title { font-size: 36px; } .heroband__sub, .heroband__copy h2, .diffblock > h2 { font-size: 24px; } .tail__mark { font-size: 36px; } .page-title, .prose h1, .lc__prose h1, .rvhero h1 { font-size: 48px; } .page-title--lg { font-size: 48px; } } @media (min-width: 768px) { .heroband__title { font-size: 48px; } .heroband__sub { font-size: 24px; } .heroband__copy h2, .diffblock > h2 { font-size: 30px; } .bandhead--xl h2, .bandhead__gold, .tail__words h2 { font-size: 48px; line-height: 48px; } .bandhead--xl .bandhead__lede, .rvhero p { font-size: 24px; line-height: 32px; } .tail__mark { font-size: 48px; } .page-title--lg, .rvhero h1 { font-size: 60px; } } @media (min-width: 1024px) { .heroband__title { font-size: 60px; } .heroband__sub { font-size: 30px; } .heroband__copy h2, .diffblock > h2 { font-size: 36px; } .tail__mark { font-size: 60px; } } @media (min-width: 1280px) { .heroband__title { font-size: 72px; line-height: 72px; } .heroband__sub { font-size: 36px; } .tail__mark { font-size: 72px; line-height: 72px; } } .section--py8 { padding-block: 32px; } /* Every page wrapper in the source carries `min-h-screen`, so a page shorter than the viewport still pushes its footer to the fold. Only /blog is short enough to notice. */ main { min-height: 100vh; } .section--py12 { padding-block: 48px; } .blog-empty { text-align: center; padding-block: 48px; } /* ---- /blog list + /blog/ article ------------------------------------------------- */ /* `BlogPosts.tsx`: a max-w-4xl column of articles separated by a hairline rule, each a linked h2, a muted date, the excerpt, and a "Read more" link. */ .bloglist { max-width: 896px; margin-inline: auto; display: grid; gap: 32px; } .blogitem { padding-bottom: 32px; border-bottom: var(--stroke-hairline) solid var(--line-2); } .bloglist > .blogitem:last-child { border-bottom: 0; padding-bottom: 0; } .blogitem__title { margin: 0 0 8px; font-size: var(--copy-2xl); line-height: var(--lead-2xl); font-weight: 600; } .blogitem__title a { color: rgb(var(--fg)); text-decoration: none; } .blogitem__title a:hover { color: rgb(var(--primary-on-surface)); } .blogitem__date { margin: 0 0 16px; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--fg-2)); } .blogitem__excerpt { margin: 0; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--fg-2)); } .blogitem__more { display: inline-block; margin-top: 16px; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--primary-on-surface)); text-decoration: none; font-weight: 500; } .blogitem__more:hover { text-decoration: underline; } /* `BlogPostContent.tsx`: back-link, title, date, then the excerpt as a standfirst behind a gold rule — the one place the live design puts a gold BAR rather than gold words. */ .blogart { max-width: 768px; margin-inline: auto; } .blogart__back { display: inline-block; margin-bottom: 32px; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--primary-on-surface)); text-decoration: none; } .blogart__back:hover { text-decoration: underline; } /* Every number below is `BlogPostContent.tsx`'s own Tailwind class, confirmed against the live page with getComputedStyle: p = 16/26 mb-6 gray-700, h2 = 24/32 700 mt-10 mb-5 gray-900, h3 = 20/28 600 mt-8 mb-4 gray-800, title = 36/40 700 in ROBOTO. Taking the direction's `prose` scale instead (18/32 on a 728 measure) ran every post 8-26% tall. */ .blogart__title { margin: 0 0 16px; font-size: 36px; line-height: 40px; font-weight: 700; color: rgb(17 24 39); } .blogart__date { margin: 0 0 32px; font-size: 16px; line-height: 24px; color: rgb(107 114 128); } .blogart__standfirst { margin: 0 0 40px; padding-left: 16px; border-left: 4px solid var(--gold); font-size: 20px; line-height: 28px; font-style: italic; color: rgb(75 85 99); } .blogart__body { font-size: 16px; line-height: 26px; color: rgb(55 65 81); } .blogart__body p { margin: 0 0 24px; font-size: 16px; line-height: 26px; color: rgb(55 65 81); } .blogart__body h2 { margin: 40px 0 20px; font-size: 24px; line-height: 32px; font-weight: 700; color: rgb(17 24 39); } .blogart__body h3 { margin: 32px 0 16px; font-size: 20px; line-height: 28px; font-weight: 600; color: rgb(31 41 55); } .blogart__body h4 { margin: 24px 0 12px; font-size: 18px; line-height: 28px; font-weight: 600; color: rgb(31 41 55); } .blogart__body h5 { margin: 16px 0 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: rgb(31 41 55); } .blogart__body h6 { margin: 16px 0 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: rgb(55 65 81); } .blogart__body ul, .blogart__body ol { margin: 0 0 24px; padding-left: 24px; } .blogart__body ul { list-style: disc; } .blogart__body ol { list-style: decimal; } .blogart__body li { margin-bottom: 8px; color: rgb(55 65 81); } .blogart__body li:last-child { margin-bottom: 0; } .blogart__body a { color: rgb(var(--primary-on-surface)); } .blogart__body strong { font-weight: 700; } .blogart__body blockquote { margin: 24px 0; padding-left: 16px; border-left: 4px solid var(--gold); font-style: italic; color: rgb(75 85 99); } .blogart__body hr { margin: 32px 0; border: 0; border-top: 1px solid rgb(229 231 235); } .blogart__body pre { margin: 24px 0; padding: 16px; border-radius: var(--radius-md); background: rgb(243 244 246); overflow-x: auto; } .blogart__body > :first-child { margin-top: 0; } .blogart__img { display: block; max-width: 100%; height: auto; margin: 16px 0; border-radius: var(--radius-md); } .blog-empty p { margin: 0; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--muted)); } .svc-index__count { margin-top: 32px; text-align: center; font-size: var(--copy-base); line-height: var(--lead-base); color: rgb(var(--muted)); } @media (max-width: 900px) { .grid.svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid.svc-index { grid-template-columns: minmax(0, 1fr); } } .featrow h3 { font-size: 18px; line-height: 28px; } .pagehead { background-size: cover; background-position: center; color: rgb(var(--bg)); } .pagehead .page-title, .pagehead .hero__lede { color: rgb(var(--bg)); } .sec-head--plain .sec-head__title { font-size: var(--copy-4xl); line-height: var(--lead-4xl); } .home-gallery .grid > :nth-child(n+4) img { aspect-ratio: 440 / 330; } .feat__title { font-size: var(--copy-xl); line-height: var(--lead-xl); } .steppanel h3 { font-size: var(--copy-4xl); line-height: var(--lead-4xl); } .card--film .card__title { font-size: var(--copy-xl); line-height: var(--lead-xl); } /* `display: grid` outranks the UA's `[hidden] { display: none }`, so without this every process panel renders at once and the tabs switch nothing. */ .steppanel[hidden] { display: none; } /* ---- measured against the live render, element by element ---------------------------- * * * Every value here is what getComputedStyle reports on divergenceptandwellness.com for the * SAME element, matched by tag + normalised text. This block sits LAST in the site layer on * purpose: an earlier copy of it lost three rules to plain source order, because an override * at equal specificity placed ABOVE the rule it overrides does nothing. Where a rule below * is more specific than its target looks, that is deliberate and noted. */ /* /blog list: live renders "Read more" at 400, not 500. */ .blogitem__more { font-weight: 400; } /* /service/*: the hero standfirst is 18px on a 32px line — not the direction's 24px lede. */ .hero__lede--svc { font-size: 18px; line-height: 32px; } /* /service/*: the closing "Ready to Start Your Recovery?" band. Live = 24/32 over 16/24. `#get-started` is the service form band and nothing else — form_band() has one call site. */ #get-started .sec-head__title { font-size: 24px; line-height: 32px; } #get-started .sec-head__lede { font-size: 16px; line-height: 24px; } /* /reviews editorial: live h3 is 30/36 at weight 400 — lighter and larger than it looked. */ .rvbody__inner h3 { font-size: 30px; line-height: 36px; font-weight: 400; } /* and the eight testimonials are a 672px LEFT-aligned measure inside the 896px centred column. Selected by the
    signature line; verified no other paragraph there has one. */ .rvbody__inner p:has(br) { max-width: 672px; margin-inline: auto; text-align: left; } /* home: the hero wordmark lines, both section h2s, and the two ledes. `.diffblock > h2` is a DIFFERENT element from `.heroband__copy h2` — the first override missed it entirely. */ .heroband__sub .u-display { line-height: 40px; } .heroband__copy h2 { line-height: 40px; } .diffblock > h2 { line-height: 40px; } .heroband__copy > p:first-of-type { font-size: 20px; line-height: 28px; } .bandhead__lede { font-size: 18px; line-height: 28px; } /* Card titles carry `tracking-tight` on live — -0.025em, which measures -0.5px at 20px on the 20 /services cards and -0.6px at 24px on the 7 home cards. Verified it is exactly the card titles: every other visible h2/h3 on both pages measures 0 tracking on BOTH sites, so this cannot bleed into a heading the original leaves alone. */ .card__title { letter-spacing: -0.025em; } /* /sitemap-page column headings are `tracking-wide` — 0.025em, 0.5px at 20px. The direction's --tracking-wide is more than twice that (1.2px measured) on all four. */ .smcol__h { letter-spacing: 0.025em; } /* /our-process below 768px: the original does not stack the timeline, it ABANDONS it. `ProcessPageClient.tsx` renders the timeline `hidden md:block` and a separate `md:hidden` list of white `rounded-lg shadow-lg p-6` cards, each with a 40px gold numeral circle centred over an 18px bold centred title. This carried the desktop timeline into the phone with a 96px numeral at 30px — measured 96/30 here against live's 40/18. */ @media (max-width: 767px) { .tl__num { width: 40px; height: 40px; font-size: 18px; } .tl__row { background: rgb(var(--bg)); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .tl__row h3 { font-size: 18px; line-height: 28px; text-align: center; } /* the mobile card's copy carries no size class in the source, so it is the 16/24 base — not the 18/29.25 prose size the desktop timeline uses. Measured: live 456px tall for the Remedy paragraph, this 614px, which is most of a 430px page-height gap over three cards. */ .tl__row p { font-size: 16px; line-height: 24px; } } /* /reviews: the "Read More" modal exists to READ the review, and its body was 16/24 in grey-600 where live sets 20px on a 1.625 line in grey-800 — a fifth smaller and lighter than the original, in the one place the text is the point. */ .rvmodal__body, .rvmodal__body p { font-size: 20px; line-height: 1.625; color: rgb(31 41 55); } /* /our-team: the credential line under each of the 12 names. The direction styles `.doc__cred` as a small uppercase meta label — 12px/400 grey, letter-spaced — but this site's live design has it as a 16px/600 GOLD line in normal case. Measured on live: 16px, weight 600, no text-transform, normal tracking, #D2A741. Gold goes through --gold-deep here, as every other gold heading on this site does, because #D2A741 is 2.25:1 on white. */ .doc__cred { font-size: 16px; line-height: 24px; font-weight: 600; text-transform: none; letter-spacing: normal; color: rgb(var(--gold-deep)); } /* /our-team: the intro under the page heading is body scale on live, not the prose lede. */ .tm__lede { font-size: 16px; line-height: 24px; } /* /contact, /contact-us: "Prefer to talk to a human?" is body weight on live. Scoped to the FIRST .ct__sub only — `.ct__left` holds two (the second is "Clinic Hours:", which live does render at 600), and an unscoped override flipped that one too. Written at (0,2,0) or higher because a bare `.ct__sub` cannot outrank `.ct__left .ct__sub`. */ .ct__left .ct__sub:first-of-type { font-weight: 400; } /* home carries TWO `.bandhead--xl .bandhead__lede` paragraphs and live sets them DIFFERENTLY: "We offer specialized programs..." is 24/32 in the display face, "Don't just take our word for it..." is 18/28 in the body face. `u-display` is the discriminator, so the override excludes it — a blanket rule here fixed one and shrank the other by a third. */ @media (min-width: 1024px) { .bandhead--xl .bandhead__lede:not(.u-display) { font-size: 18px; line-height: 28px; } } /* ...and its MEASURE. `.bandhead--xl .bandhead__lede` sets `max-width:none`, so the Client Success intro spanned the full 896px column where VideoCarousel.tsx gives it `max-w-3xl` (768px). Same `:not(.u-display)` discriminator: the two display-face ledes in this block really are full-width on live. */ .bandhead--xl .bandhead__lede:not(.u-display) { max-width: 768px; margin-inline: auto; } /* /service/*: the closing band's measure is 800px on live, not 611. At 611 the lede wrapped to TWO lines where live holds one — the only one of these width deltas that is actually visible, because the rest are centred text in a wider box (same centre, same wrap). */ #get-started > .container--narrow { max-width: 800px; } /* `.sec-head--center` carries its own ~611px reading measure, which re-imposed the wrap even after the container widened. Lifted inside this band only. */ #get-started .sec-head { max-width: none; } /* /location/*: the closing CTA paragraph sits on live's 1.625 body leading (29px at 18px), not the 32px the rest of `.lc__prose p` uses. */ .lc__prose > h2:last-of-type ~ p { line-height: 1.625; }