/* Theme Name: boothwyn Theme URI: https://libertyconcepts.com/ Author: Liberty Concepts Author URI: https://libertyconcepts.com/ Description: A neutral, block-ready starter theme for the lc-blocks plugin. Ships chrome (header, footer, navigation, base typography); blocks self-style from the lc-blocks plugin. Version: 1.1.1793216081 Requires at least: 6.4 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: blockstart */ /* The text domain above is deliberately `blockstart`, not the project slug that boothwyn substitutes into `Theme Name:`. It is hard-coded in 50 places across 9 PHP files; changing it here alone silently orphans every one of them with no error. If you rename it, rename the literals in the same commit. */ /* ========================================================================= Tokens / fallbacks (mirror theme.json so chrome tracks the palette) ========================================================================= */ /* Slugs below are deliberately the STARTER's, not Boothwyn's token names: the lc-blocks plugin makes 276 references to `primary`, `secondary`, `text`, `dark`, `subtle` and friends, so remapping the values re-skins every block with no per-block work. theme.json carries the real Boothwyn token name in each palette entry's `name` field, which is what an editor sees in the colour picker. Source: BP_Master_Token_Sheet_v3 §1. Two slugs are worth knowing about because their starter names now mislead: --bs-primary-light is Accent/Mid-green #056752 — a DARK green. Every lc-blocks use of it is a `color:` (eyebrow, links, in-block accents), so it has to be contrast-safe on white; the light green would fail there. --bs-secondary is Accent/Light-green #A7DBBA. Every use is a background, border, or text-on-dark. */ :root { --bs-primary: var(--wp--preset--color--primary, #4EC278); /* Brand/Primary */ --bs-primary-light: var(--wp--preset--color--primary-light, #056752); /* Accent/Mid-green */ --bs-secondary: var(--wp--preset--color--secondary, #A7DBBA); /* Accent/Light-green */ --bs-subtle: var(--wp--preset--color--subtle, #EBF5F2); /* Neutral/100 */ --bs-dark: var(--wp--preset--color--dark, #0C3330); /* Brand/Dark */ --bs-text: var(--wp--preset--color--text, #232626); /* Neutral/900 */ --bs-white: var(--wp--preset--color--white, #FFFFFF); /* Neutral/White */ --bs-off-white: var(--wp--preset--color--off-white, #F5F5F5); /* Surface/Gradient-Base */ --bs-neutral-200: var(--wp--preset--color--neutral-200, #CFE5DF); /* Neutral/200 */ --bs-neutral-300: var(--wp--preset--color--neutral-300, #BCCCC7); /* Neutral/300 */ --bs-muted: var(--wp--preset--color--muted, #464D4B); /* Neutral/700 */ --bs-heading: var(--wp--preset--font-family--heading, "Geist", sans-serif); --bs-body: var(--wp--preset--font-family--body, "Inter", sans-serif); --bs-mono: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace); --bs-content: var(--wp--style--global--content-size, 1280px); --bs-header-h: var(--bp-header-h); /* Licensure status colours: one green ramp, dark → light (PM's per-step table, 28 Oct 2026; it replaced the 14 Oct categorical set). Shared by the map block and the State pages, so they cannot drift apart. Measured — see lc-blocks licensure-map/style.scss. */ --bp-status-licensed: #0C3330; --bp-status-partial: #056752; --bp-status-renewal: #5FA38F; --bp-status-application: #A8CEC2; --bp-status-none: #EBF5F2; --bp-status-none-edge: #B9CFC8; } /* ========================================================================= Font-size preset aliases — NOT optional, and not cosmetic ========================================================================= WordPress kebab-cases preset slugs when it generates custom properties, so the slug `h1` emits `--wp--preset--font-size--h-1`, with a hyphen before the digit. Nothing warns. Every consumer writes the name the obvious way. lc-blocks references `--wp--preset--font-size--h3`, `--h4`, `--h5`, `--h2`, `--h1` in 33 places, and theme.json's own `styles.elements.h1..h6` do the same. All of them were resolving to nothing and silently using their hardcoded fallbacks — which is why it looked fine: the fallbacks are close to the right values, and the hero H1's `clamp(32px, 5vw, 62px)` happens to equal the real token at exactly 1440 and 375, the two widths first measured. Defining both spellings here fixes every consumer in one place, without renaming slugs that block code already references. Discovered 13 Aug 2026 when the audience heading rendered at its 28px fallback at all three widths. ========================================================================= */ :root { --wp--preset--font-size--h1: var(--bp-fs-h1); --wp--preset--font-size--h2: var(--bp-fs-h2); --wp--preset--font-size--h3: var(--bp-fs-h3); --wp--preset--font-size--h4: var(--bp-fs-h4); --wp--preset--font-size--h5: var(--bp-fs-h5); --wp--preset--font-size--h6: var(--bp-fs-h6); } /* ========================================================================= Responsive scale — type, spacing, chrome ========================================================================= Why this is piecewise rather than one clamp() per token. The design states exact values at four built frames (375 / 768 / 1024 / 1440 — token sheet §8, read from the frames, not derived). Those values are NOT linear in viewport width: H1 rises 32→44 over the first range, 44→48 over the second, 48→62 over the third. A single clamp() would hit the two ends and drift everywhere between, which is exactly the "close but not exact" drift dev-rules §E calls out. Interpolating per range hits every stated value exactly at its own breakpoint and stays fluid in between. Above 1440 the rule is different and comes from project-log.md's cross-phase decision: everything scales proportionally to 1920, then stops. That is driven by ONE variable, --bp-u — a length equal to 1px at 1440 and 1.3333px at 1920+ — so `calc(62 * var(--bp-u))` is H1 at any width in that range. Side margin is the deliberate exception: it stays 80px above 1440. That is not a judgement call, it is forced — the log fixes the container lock at 1760px, and 1920 − (2 × 80) = 1760 exactly. Had the margin scaled with everything else the container would land at 1707 and contradict the lock. ========================================================================= */ :root { /* Zoom unit — only meaningful at ≥1440; 1px keeps it inert below. */ --bp-u: 1px; /* Type — 375 values held below 375 (the smallest designed frame). */ --bp-fs-h1: 32px; --bp-fs-h2: 28px; --bp-fs-h3: 24px; --bp-fs-h4: 20px; --bp-fs-h5: 20px; --bp-fs-h6: 18px; --bp-fs-eyebrow: 14px; /* Text/Eyebrow-S. It tracks Eyebrow below 1024 and then diverges: the built frames put it at 16 across both tablet widths and 14 at desktop, in BOTH places it appears (Quality's ACCREDITATIONS & CREDENTIALS at BP Homepage Tablet.dc.html:87, and Technology's FOCUSED THERAPEUTIC AREAS). Non-monotonic, but consistent across two independent sections. */ --bp-fs-eyebrow-s: 14px; --bp-fs-body: 16px; --bp-fs-small: 14px; --bp-fs-caption: 12px; /* never scales below 1440 — and 12px is the floor */ --bp-fs-button: 13px; /* never scales below 1440 */ /* Line-height (token sheet §2). P-Long is the one token that changes. */ --bp-lh-tight: 1.2; /* H1–H3, eyebrow, category, caption, tag, button */ --bp-lh-snug: 1.4; /* H4–H6 */ --bp-lh-body: 1.6; /* Text/P-Short */ --bp-lh-long: 1.8; /* Text/P-Long at 375 — see the note at ≥768 */ /* Letter-spacing (token sheet §2, unit is %). */ --bp-ls-none: 0; --bp-ls-eyebrow: 0.04em; /* 4% — Text/Eyebrow, Text/Eyebrow-S */ --bp-ls-wide: 0.12em; /* 12% — Text/Category, Text/Link, Text/Button */ --bp-ls-caption: 0.02em; /* 2% — Text/Caption */ /* Layout (token sheet §4 / §8). */ --bp-side: 20px; --bp-inset: 8px; --bp-section: 60px; --bp-header-h: 64px; --bp-detail: 900px; /* Header chrome. --bp-header-pad is the BAR's inset and is deliberately not --bp-side: the comps inset the bar 40px at 1440 where the content grid uses 80px (BP Header.dc.html:15). Holding it at 40px above 1440 preserves that relationship exactly — the bar stays 80px wider than the content container at both 1440 and 1920 — which is why it does not scale with --bp-u. */ --bp-header-pad: 20px; --bp-logo-h: 34px; --bp-burger-bar-w: 22px; --bp-burger-bar-gap: 5px; /* Buttons. The standard button IS responsive — 16/28 below desktop, 18/32 at desktop — confirmed three ways: the Figma component (101:30) draws every one of its eight filled variants at 18/32; the tablet frame uses 16/28 for all sixteen of its standard buttons; and 18+18+~15.6 is the 52px height §5a itself states. The `14px 24px` in §5a is the HEADER CTA variant, not the standard one — the tablet frame uses it exactly twice, on its two headers. Consumed by lc-blocks' buttons block, which carries its own fallbacks. */ --bp-btn-pad-y: 16px; --bp-btn-pad-x: 28px; --bp-btn-gap: 12px; /* stacked full-width at mobile (§5a) */ /* Light_Gradient_BG — one export for every breakpoint, pinned to the bottom of its section over Surface/Gradient-Base. It SUPERSEDES three retired exports (HP_Quality_Gradient BG, Multi-content Mesh, the 375 light export); do not build against those names. Set here rather than in the block so the uploaded media URL stays out of block markup. */ /* ── Delivered design assets ── QA Q30, 20 Aug 2026 ────────────────────── `--bp-light-gradient-bg`, `--bp-telehealth-gradient-bg`, `--bp-watermark-molecule`, `--bp-keypage-gradient-bg` and `--bp-logomark-improvement` are NOT declared here any more. They are built in `functions.php` (`bs_enqueue_assets`) from `get_theme_file_uri()`, because their URLs cannot be written into a stylesheet correctly: an absolute URL is environment-specific, and a relative url() does not work inside a custom property — it resolves against the document or the substituting stylesheet, not this one. Corrected defect #19 has the measurements. The files themselves are in `assets/images/`, beside the logos and favicons. `style.css` now contains no `url()` at all, which is the invariant worth keeping: any asset this theme needs gets its URL built in PHP. */ /* HP_Telehealth_Gradient BG — the delivered 1440 × 1450 export, whose height is exactly the Technology section's own at desktop. Same reasoning as above: kept out of block markup so the media URL is not baked into save() output and does not have to survive migration. */ /* HP Molecule Watermark — the delivered 370 × 896 export, with the crop of the wider vector already baked in. Consumed by lc/fancy-container. */ /* Key page top gradient BG — the delivered 1440 × 780 export. §9c item A: the ASSET at desktop, the CSS radial below it, and the value is identical either way. The band itself is 870 (Figma 425:2288), so the asset covers. */ /* Feature Split-Full-width-Gradient BG — REMOVED 20 Aug 2026, QA Q9. The delivered 2880 × 1162 export scales to 2560 × 1033 / 976 KB on upload, and that is what was loading as a desktop section background on two pages. The token sheet reads "asset at desktop, CSS gradient below" and that is how it was built — but the sheet also says the CSS value "scales to any height without stretching the artwork", and the identical CSS gradient was already running below 768. So the export bought ~1 MB per page and nothing else. Developer decision: CSS at every width. `lc/feature-split`'s `--bg-gradient` variant now paints its own `linear-gradient` unconditionally. ⚠️ Note what went with it: this custom property held an ABSOLUTE `boothwyn.lndo.site` URL, which would have shipped to production pointing at a developer's local machine. The three properties still below carry the same hazard — see §9c item A for the key-page gradient, which is the one still open. */ /* Logo Mark_Improvement Section — the delivered 33 × 49 export. A background rather than inline markup: it carries three multi-stop gradients, and this keeps the media URL out of block save() output. */ --bp-gap-intra: 30px; --bp-gap-inter: 60px; --bp-radius: 4px; --bp-radius-pill: 9999px; /* Content container: viewport minus both side margins, capped at 1760. */ --bp-container-max: 1760px; --bp-container: min(calc(100vw - (2 * var(--bp-side))), var(--bp-container-max)); /* Horizontal inset for FULL-BLEED bands — the interior heroes, the filter bar, the card grid. Those paint edge to edge and inset their content with padding rather than centring it in `--bp-container`, so above 1920 their copy kept hugging the viewport while every ordinary section sat in a 400px gutter. Design review, 31 Aug 2026: "apply the maximum container width 1760px rule above 1920px screens". ⚠️ NO MEDIA QUERY, and none is needed: at 1920 `(1920 - 1760) / 2` is exactly 80, which is `--bp-side` at that width, so the two arms meet and the curve is continuous. Below 1920 `--bp-side` always wins and nothing moves; above it the gutter opens so the content lines up with the 1760 container. */ --bp-gutter: max(var(--bp-side), calc((100vw - var(--bp-container-max)) / 2)); } /* ── 375 → 768 ─────────────────────────────────────────────────────────── */ @media (min-width: 375px) { :root { --bp-fs-h1: calc(32px + 12 * (100vw - 375px) / 393); --bp-fs-h2: calc(28px + 10 * (100vw - 375px) / 393); --bp-fs-h3: calc(24px + 4 * (100vw - 375px) / 393); --bp-fs-h4: calc(20px + 8 * (100vw - 375px) / 393); --bp-fs-h5: calc(20px + 2 * (100vw - 375px) / 393); --bp-fs-h6: calc(18px + 2 * (100vw - 375px) / 393); --bp-fs-eyebrow: calc(14px + 2 * (100vw - 375px) / 393); --bp-fs-eyebrow-s: calc(14px + 2 * (100vw - 375px) / 393); } } /* ── 768 → 1024 (tablet) ───────────────────────────────────────────────── */ @media (min-width: 768px) { :root { --bp-fs-h1: calc(44px + 4 * (100vw - 768px) / 256); --bp-fs-h2: 38px; --bp-fs-h3: calc(28px + 6 * (100vw - 768px) / 256); --bp-fs-h4: 28px; --bp-fs-h5: 22px; --bp-fs-h6: 20px; --bp-fs-eyebrow: 16px; --bp-fs-eyebrow-s: 16px; /* Body steps rather than scales — the log's "body text does not shrink" holds from here up; the step to 16 happens only at mobile. Confirmed against BP Standard Pages Mobile.dc.html:109. */ --bp-fs-body: 18px; --bp-lh-long: 2; --bp-side: 40px; --bp-inset: 16px; --bp-section: 80px; --bp-header-h: 76px; --bp-header-pad: 40px; --bp-logo-h: 40px; --bp-burger-bar-w: 24px; --bp-burger-bar-gap: 6px; --bp-btn-gap: 16px; /* side by side, content width */ } } /* ── 1024 → 1440 ───────────────────────────────────────────────────────── */ @media (min-width: 1024px) { :root { --bp-fs-h1: calc(48px + 14 * (100vw - 1024px) / 416); --bp-fs-h2: calc(38px + 16 * (100vw - 1024px) / 416); --bp-fs-h3: calc(34px + 10 * (100vw - 1024px) / 416); --bp-fs-h4: calc(28px + 4 * (100vw - 1024px) / 416); --bp-fs-h5: calc(22px + 2 * (100vw - 1024px) / 416); --bp-fs-eyebrow: calc(16px + 2 * (100vw - 1024px) / 416); --bp-fs-eyebrow-s: calc(16px - 2 * (100vw - 1024px) / 416); /* §8 states 76px at 1024 and 90px at 1440 and nothing between. Interpolating rather than stepping keeps the bar consistent with the type scale, which glides across the same range — a step would snap the whole header 14px taller at exactly 1440. Same reasoning for the logo, 40 → 50. */ --bp-header-h: calc(76px + 14 * (100vw - 1024px) / 416); --bp-logo-h: calc(40px + 10 * (100vw - 1024px) / 416); } } /* ── 1440 → 1920: proportional zoom ────────────────────────────────────── */ @media (min-width: 1440px) { :root { --bp-u: calc(100vw / 1440); --bp-fs-h1: calc(62 * var(--bp-u)); --bp-fs-h2: calc(54 * var(--bp-u)); --bp-fs-h3: calc(44 * var(--bp-u)); --bp-fs-h4: calc(32 * var(--bp-u)); --bp-fs-h5: calc(24 * var(--bp-u)); --bp-fs-h6: calc(20 * var(--bp-u)); --bp-fs-eyebrow: calc(18 * var(--bp-u)); --bp-fs-eyebrow-s: calc(14 * var(--bp-u)); --bp-fs-body: calc(18 * var(--bp-u)); --bp-fs-small: calc(14 * var(--bp-u)); --bp-fs-caption: calc(12 * var(--bp-u)); --bp-fs-button: calc(13 * var(--bp-u)); /* ⚠️ The measure scales WITH the type, and it did not before. `--bp-detail` was a flat 900px while every font size above steps onto `--bp-u`, so at 1920 the headings were 33% larger inside an unchanged 900px column and wrapped an extra line — the Learning Hub h1 went from 2 lines at 1440 to 3 at 1920, with dead space beside it. Design review, 31 Aug 2026: "the text container can be wider so there's less white spacing on right". Scaling it keeps the measure in CHARACTERS constant, which is the whole point of the `--bp-u` model, and resolves to exactly 900 at 1440 so no drawn frame moves. */ --bp-detail: calc(900 * var(--bp-u)); /* Side margin stays 80px — see the header note. */ --bp-side: 80px; --bp-inset: calc(16 * var(--bp-u)); --bp-section: calc(100 * var(--bp-u)); --bp-header-h: calc(90 * var(--bp-u)); --bp-logo-h: calc(50 * var(--bp-u)); --bp-gap-intra: calc(30 * var(--bp-u)); --bp-gap-inter: calc(60 * var(--bp-u)); } } /* ── ≥1920: scaling stops, container locked at 1760 ────────────────────── */ @media (min-width: 1920px) { :root { --bp-u: 1.3333px; } } /* ========================================================================= Base ========================================================================= */ /* Element defaults live in the `base` layer, which is ordered BELOW `blocks`. These are bare tag selectors, so without a layer they would beat a block's own class-based styling — unlayered CSS wins over any layer regardless of specificity. An `h1..h6` rule here would then silently restyle every heading inside every block. Anything that should *win* over blocks (theme chrome, project overrides) stays unlayered, below. */ @layer base { *, *::before, *::after { box-sizing: border-box; } /* ⚠️ Motion, so it is switched off when the reader asks for less. A smooth scroll is exactly the kind of movement `prefers-reduced-motion` is for, and the anchor handler in theme.js passes `behavior: 'auto'` explicitly, so nothing depends on this being on. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--bs-body); font-size: var(--bp-fs-body); line-height: var(--bp-lh-body); color: var(--bs-text); background: var(--bs-white); -webkit-font-smoothing: antialiased; } body.has-mobile-menu { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } /* Accent/Mid-green. NOT --bs-primary: Brand/Primary #4EC278 is a bright green that fails contrast as text on white. Token sheet §2b gives the link colour as Accent/Mid-green on light, Brand/Primary on dark. */ a { color: var(--bs-primary-light); } /* Deliberately no line-height or letter-spacing here. theme.json sets both per-element (1.2 on H1–H3, 1.4 on H4–H6, tracking 0 throughout), and its generated CSS lands in this same `base` layer at the same specificity — so a blanket rule here would be decided by stylesheet order, not intent. The starter's -0.01em tracking was a starter default; every Heading token in §2a specifies 0. */ h1, h2, h3, h4, h5, h6 { font-family: var(--bs-heading); font-weight: 600; } } .site-wrapper { overflow-x: clip; } .site-main { min-height: 40vh; } /* ------------------------------------------------------------------------- * Prose typography — cascade layer * ------------------------------------------------------------------------- * Everything that styles the_content() output by ELEMENT (p, headings, lists, * blockquote, figure…) belongs in this layer. * * Why: prose rules are written against bare tags, so they also match the markup * inside an LC block and restyle it by accident. lc-blocks puts its CSS in the * `blocks` layer, which is ordered above `prose`, so block styling always wins — * no `:not([class*="lc-"])` guard needed on each selector. * * Note what is NOT in here: the alignment breakout below is structural layout * that must beat block CSS, so it stays unlayered. Theme chrome stays unlayered * too — layering it would hand the cascade to unlayered plugin CSS (Gravity * Forms, ACF) and to WordPress core's own block styles. * * A project's own theme CSS is unlayered and therefore beats both layers, which * is the intended way to re-skin a block. * ---------------------------------------------------------------------- */ @layer prose { /* Centered content width for non-block template bodies (prose pages, single body) */ .article-content { max-width: var(--bs-content); margin-inline: auto; padding-inline: 24px; } /* Inter-element rhythm. If per-element margins are added later, drop this owl — a more specific per-element rule silently overrides it. */ .article-content > * + * { margin-top: 1.2em; } /* LC blocks carry their own vertical spacing (block.json `style.spacing.margin`), so the prose rhythm must not stack on top of it. This reset is NOT redundant with the layer order. Layers only arbitrate a *conflict* — where both sides declare the same property. Here the owl declares margin-top and the block declares none (only 2 of 21 block roots declare any margin), so there is nothing to arbitrate and prose applies unopposed. An explicit reset is the only thing that stops it. */ .article-content > [class*="wp-block-lc-"] { margin-top: 0; } } /* ------------------------------------------------------------------------- * Block alignment — the theme owns this (lc-blocks' fallback option is off). * Full blocks fill the viewport; wide blocks cap at the wide size. lc blocks * self-constrain their own inner content, so block-driven pages render in a * full-width flow (front-page.php / page.php block-hero mode) and these rules * size the aligned blocks. Normal (un-aligned) content stays contained. * ---------------------------------------------------------------------- */ .alignwide { max-width: var(--wp--style--global--wide-size, 1760px); margin-left: auto; margin-right: auto; box-sizing: border-box; } .alignfull { width: 100%; max-width: none; } /* Colored separators between showcase sections render as a thin rule. */ .wp-block-separator.has-background:not(.is-style-dots) { border: 0 !important; height: 1px; } .wp-block-separator.has-background:not(.is-style-dots):not(.alignwide):not(.alignfull) { width: 100%; } /* ------------------------------------------------------------------------- * Aligned blocks inside a constrained content column * ------------------------------------------------------------------------- * The rules above size aligned blocks in a full-width flow. Inside a container * that caps the_content() at a content width, they cannot escape it: `.alignfull` * resolves to the column width, not the viewport, and alignleft/alignright get no * float at all. These rules break them back out. * * Written ONCE for every such container via :is(). To cover a new container, add * it to the two lists below — do NOT copy the rule bodies. (Duplicating these per * container is how they drift out of sync.) * ---------------------------------------------------------------------- */ /* Default (align-none) content in the FULL-BLEED flow. * ------------------------------------------------------------------------- * `.page-blocks` is deliberately unconstrained — the lc sections inside it are * mostly align-none and take their width from the container, then self-constrain * with `--bp-container`. That left ordinary content with no width at all. * Measured on `/human/for-providers/` at 1440 before this rule: paragraph, * heading and list all `x=0 w=1440`, running edge to edge — and because the wide * rule below clamps to `100vw - 2 * gutter`, **`.alignwide` came out NARROWER * than align-none**, 1392 against 1440. The whole ladder was inverted, which is * what the content-entry note of 8 Sep 2026 reported. * * `--bp-detail` is the site's reading column and the same token * `.page-content__inner` uses, so a paragraph now measures identically whether * or not the page has a block hero — the two page modes finally agree. Chosen * over `--bp-container` (which would have aligned prose with the sections' * inner content) on the developer's call, 8 Sep 2026: measure won over * alignment, and it is also what engagys does for the same case. * * ⚠️ `:not([class*="wp-block-lc-"])` IS LOAD-BEARING. On the key and landing * pages `feature-split`, `accordion`, `related-posts` and `contact-form` are all * align-none — measured, not assumed — so capping every align-none child would * collapse every section on three pages to the reading width. engagys can put a * plain `max-width` on its own `.page-blocks` because its lc blocks are marked * wide or full; ours are not. * * The `100% - 2 * --bp-side` term is the gutter: `.page-blocks` has no padding * of its own, so without it the text would touch the screen edges below 900. * ---------------------------------------------------------------------- */ .page-blocks > :not([class*="wp-block-lc-"]):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) { max-width: min(var(--bp-detail), calc(100% - 2 * var(--bp-side))); margin-inline: auto; } /* Wide: the lc sections' content width, so a wide core block lines up with the * content inside the lc blocks around it. Every lc section centres its inner * content in `--bp-container`; this is the same token, so the two edges are the * same number at every width (scrollbar term included). * * Before (PM request, Oct 2026): `min(1760, 100vw - 2 * 24px)`, and `width: auto` * at ≤1024 — which in the full-width `.page-blocks` flow meant the screen edge. * Measured on a probe page, wide heading / paragraph / columns against the * Contact Form's inner content: x=0 vs 20 at 375, 0 vs 33 at 768, 17 vs 73 at * 1440. They only agreed at ≥1920, where both cap at 1760. */ :is(.article-content, .page-blocks) > .alignwide { --bs-wide-w: var(--bp-container); width: var(--bs-wide-w); max-width: none; margin-left: calc((100% - var(--bs-wide-w)) / 2); margin-right: calc((100% - var(--bs-wide-w)) / 2); box-sizing: border-box; } /* Full: reach the viewport edges. */ :is(.article-content, .page-blocks) > .alignfull, /* lc blocks are full-bleed sections that own their inner width via the block-inner mixin, so their wide variant is forced full-viewport too — else their painted background stops short of the edge. */ :is(.article-content, .page-blocks) > .alignwide[class*="wp-block-lc-"] { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; } /* ⚠️ `100vw` INCLUDES THE SCROLLBAR, and `.page-blocks` does not — so the pair * above is wrong by half a scrollbar in a browser that reserves space for one. * Reported 8 Sep 2026 on `/human/for-providers/`: the full-width paragraph's * first character was cut off at the left edge. Simulated with a 15px * scrollbar and measured at a 1440 viewport: * * .page-blocks 1425 (the layout width) * .alignfull x=-7.5 w=1440 right=1432.5 * * 7.5px lost off the left, 7.5px hanging past the right. ⚠️ IT WAS NEVER ONLY * THE PARAGRAPH — the lc full-bleed sections measured identically, so every * band on the site was half a scrollbar off-centre and a whole one too wide. * * ⚠️ NO HARNESS CAN SEE THIS. Headless Chromium uses overlay scrollbars, so * `innerWidth - clientWidth` is 0 in CI and the geometry looks perfect. It has * to be simulated (`html,body{max-width:calc(100vw - 15px)}`) or seen in a real * browser. Same blind spot as the 1200px touch-header overflow. * * `.page-blocks` already spans the layout width, so a full-bleed child there * needs no breakout at all — `100%` is exactly right and cannot include a * scrollbar. Kept separate rather than folded into the `:is()` above because * the two containers genuinely differ: `.article-content` sits in a 900 column * and does need to break out. * * ⚠️ `.article-content` STILL HAS THIS BUG and is not fixed here. There is no * pure-CSS breakout from a narrow centred column that avoids `100vw` — the * options are a JS-set `--bs-vw`, or `container-type: inline-size` on a * full-width ancestor so `100cqw` can be used, which brings `contain: layout` * and its own consequences. A decision, not a patch. */ .page-blocks > .alignfull, .page-blocks > .alignwide[class*="wp-block-lc-"] { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* Prose-level lc blocks sit in the reading column, like a paragraph — on every * page type. They are not sections: a quote, a callout, a row of buttons, an * eyebrow, a list of links, the share row and FAQ List read as part of the text * around them. Every other lc block is a full-width section (above). * * ⚠️ MUST STAY AFTER the rule above. A legacy `alignwide` class (blocks no * longer have an Align control, but stored content keeps the class) would * otherwise win: `:is()` takes its most specific argument, so this selector is * (0,3,0) — the same as `.page-blocks > .alignwide[class*=…]` — and the later * rule wins the tie. Add a new prose-level block to this list. */ .page-blocks > :is( .wp-block-lc-quote, .wp-block-lc-callout, .wp-block-lc-buttons, .wp-block-lc-eyebrow, .wp-block-lc-direct-links, .wp-block-lc-share, .wp-block-lc-test-results-lookup, .wp-block-lc-accordion.is-style-inline ) { width: auto; max-width: min(var(--bp-detail), calc(100% - 2 * var(--bp-side))); margin-inline: auto; } /* The EDITOR CANVAS has no `.page-blocks`: its root container is the well there. * WordPress gives it a constrained layout from theme.json's contentSize (1280) at * zero specificity, which used to be overruled per block by the Align support. * With no Align control, every section would sit at 1280 in the editor and every * paragraph at 1280 too. These mirror the three front-end rules above, so a block * is the same width in the canvas as on the page: prose and prose-level blocks in * the 900 column, lc sections full width. (theme.json's contentSize is left at * 1280 on purpose: core group blocks use it on the front end.) */ .is-root-container > :not([class*="wp-block-lc-"]):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) { max-width: min(var(--bp-detail), calc(100% - 2 * var(--bp-side))); } .is-root-container > [class*="wp-block-lc-"] { max-width: none; } /* Wide core blocks at the lc content width, as on the front end. Without this, core's canvas rule caps them at theme.json's wideSize (1760), which is wider than any canvas, so they ran edge to edge. The first :not() keeps lc sections full; the second is for WEIGHT — core's rule, `.block-editor-block-list__layout.is-root-container > .alignwide`, is (0,3,0) and comes later, so at (0,3,0) this one measured no change at all. */ .is-root-container > .alignwide:not([class*="wp-block-lc-"]):not(.alignfull) { max-width: var(--bp-container); margin-inline: auto; } /* ⚠️ The two :not()s are for WEIGHT: core's canvas layout rule (the constrained root, capping at contentSize 1280) is (0,2,0) and comes later. This rule used to win only because one item below has two classes and :is() takes its heaviest argument, so removing FAQ List from the list would have put every Quote and Callout at full width in the editor. (Found porting this to the starter, whose list is all single classes: the Quote measured full canvas width there.) */ .is-root-container > :not(.alignleft):not(.alignright):is( .wp-block-lc-quote, .wp-block-lc-callout, .wp-block-lc-buttons, .wp-block-lc-eyebrow, .wp-block-lc-direct-links, .wp-block-lc-share, .wp-block-lc-test-results-lookup, .wp-block-lc-accordion.is-style-inline ) { max-width: min(var(--bp-detail), calc(100% - 2 * var(--bp-side))); margin-inline: auto; } /* Floated images. */ :is(.article-content, .page-blocks) > :is(.wp-block-image, figure).alignleft { float: left; margin: 0.5em 2em 1em 0; max-width: 50%; } :is(.article-content, .page-blocks) > :is(.wp-block-image, figure).alignright { float: right; margin: 0.5em 0 1em 2em; max-width: 50%; } @media (max-width: 768px) { :is(.article-content, .page-blocks) > :is(.wp-block-image, figure).alignleft, :is(.article-content, .page-blocks) > :is(.wp-block-image, figure).alignright { float: none; margin-inline: 0; max-width: 100%; } } /* Visually hidden, still announced and still focusable. Standard WP pattern. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* The skip link is the exception: it must become visible when focused. */ .skip-link:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: 12px 20px; top: 8px; left: 8px; z-index: 1000; background: var(--bs-white); color: var(--bs-text); border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.2); text-decoration: underline; } /* ========================================================================= Header ========================================================================= Three drawn frames — BP Header.dc.html (1440/90), BP Homepage Tablet.dc.html:52 (1024/76, abbreviated variant), BP Homepage Mobile.dc.html:50 (375/64). Heights, bar inset, logo height and hamburger bar metrics all come from the responsive scale at the top of this file. The desktop nav switches in at 1200, not 1024: the tablet comp measures the six labels at ~620px, which does not fit beside the logo and CTA at 1024. 1200 is also the log's desktop breakpoint. ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bs-white); /* Only `transform` — the shadow's arrival stays instant, which is the behaviour the design review signed off on. */ transition: transform .35s ease; } /* Hide on scroll down, reveal on scroll up — design review, 8 Sep 2026. The class is toggled in theme.js; see the guards there for when it deliberately will not apply. `sticky` means the translate slides the bar out of its stuck position with no body-padding compensation needed. */ .site-header.is-hidden { transform: translateY(-100%); } /* ⚠️ Reduced motion keeps the header put. The JS never adds `is-hidden` in that case, and this is the belt to that braces — a stray class must not move a landmark for a reader who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } .site-header.is-hidden { transform: none; } } .site-header__inner { height: var(--bp-header-h); box-sizing: border-box; padding-inline: var(--bp-header-pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header__brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .site-header__logo { height: var(--bp-logo-h); width: auto; } /* Desktop nav — hidden until the labels fit. */ .site-header__nav { display: none; } .site-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 50px; } .site-header__menu a { font-family: var(--bs-heading); font-size: 16px; font-weight: 500; line-height: var(--bp-lh-tight); color: var(--bs-dark); text-decoration: none; white-space: nowrap; transition: color .2s ease; } .site-header__menu .current-menu-item > a { color: var(--bs-primary-light); } /* §08: no hover on touch. Only :hover is gated — siblings must not be. */ @media (hover: hover) { .site-header__menu a:hover { color: var(--bs-primary-light); } } /* ── Desktop dropdowns ──────────────────────────────────────────────────── * ⚠️ NOT DESIGNED — no frame, component or annotation in the package draws a * desktop submenu (the package's only "dropdown" is the Learning Hub filter). * Built 14 Aug 2026 on the developer's instruction. Every value below is reused * rather than invented: Neutral/White surface, Neutral/200 hairline, the single * 4px system radius, the top-level label's own Geist 16/500, and the drawer's * subordinate 12px row rhythm. No shadow — the only shadow the token sheet * sanctions is the Nav TEXT shadow at 30%, which is far too heavy for a panel, * and a lighter one would be a value from nowhere. Flagged in dev-log.md. * * The
  • stretches to the full bar height so the panel can hang off its bottom * edge with no dead gap for the pointer to cross on the way down. */ /* The nav and menu have to carry the bar's full height for `top: 100%` on the panel to mean "the bottom of the header bar". Without this the menu is only as tall as its own text line — it is a centred flex item of `__inner` — and the panel hangs from mid-bar, overlapping it by 29–48px depending on frame. `align-items: center` on the menu keeps the labels where they were. */ .site-header__nav { align-self: stretch; } .site-header__menu { height: 100%; } .site-header__menu > li { position: relative; display: flex; align-items: center; gap: 4px; } .site-header__menu > li.has-children { align-self: stretch; } .site-header__expand { flex-shrink: 0; width: 24px; height: 24px; padding: 0; margin-right: -4px; background: none; border: 0; cursor: pointer; color: var(--bs-dark); display: flex; align-items: center; justify-content: center; } .site-header__expand svg { transform: rotate(90deg); transition: transform .2s ease; } .site-header__expand[aria-expanded="true"] svg { transform: rotate(-90deg); } /* Design review, 31 Aug 2026: no caret at desktop — with sub-items coming under every top-level item, six carets cost ~168px of bar (28 each) and, once every item has one, distinguish nothing. ⚠️ GATED ON `hover: hover`, NOT on width alone, and that is the whole point. The button is the ONLY way a touch device opens a submenu: hovering opens it for a mouse, `focusin` opens it for a keyboard, and the click handler exists precisely for `(hover: none)` — see the note in theme.js. Hiding it on width alone would strand a touch laptop or an iPad in landscape at >=1200 with no way to reach a submenu at all. `display: none` rather than a zero-size box: the button must leave the tab order with the caret, or it becomes an invisible focus stop. It stays IN THE DOM, which matters — `setSub()` reads `aria-expanded` off it and returns early if it is missing, so removing it in PHP would disable hover and focus opening too. */ @media (min-width: 1200px) and (hover: hover) { .site-header__expand { display: none; } } .site-header__submenu { position: absolute; top: 100%; left: -16px; z-index: 10; list-style: none; margin: 0; padding: 8px 0; width: max-content; min-width: 200px; background: var(--bs-white); border: 1px solid var(--bs-neutral-200); border-radius: var(--bp-radius); } .site-header__submenu[hidden] { display: none; } .site-header__submenu a { display: block; padding: 12px 20px; color: var(--bs-dark); text-shadow: none; } /* Hover gets the row wash; the current page gets colour only, which is how the top-level menu already marks itself (dev-rules §B — one treatment, not two). Worth knowing while the menu is still seeded with placeholders: four of Human's five children currently point at `/`, so on the homepage WordPress marks them all `current-menu-item` and colours the lot. That is the seed, not the rule. */ /* §08: no hover on touch. Only :hover is gated — siblings must not be. */ @media (hover: hover) { .site-header__submenu a:hover { background: var(--bs-subtle); } } .site-header__submenu .current-menu-item > a { color: var(--bs-primary-light); } /* §08: no hover on touch. Only :hover is gated — siblings must not be. */ @media (hover: hover) { .site-header__submenu a:hover { color: var(--bs-primary-light); } } /* Hover and focus open the panel via JS, not via a CSS `:hover > { display: block }` rule. A CSS rule can reveal the panel but cannot touch `hidden` or `aria-expanded`, so the panel would be visible to a mouse user while still hidden from assistive tech and reported as collapsed. theme.js drives all three together — hover, focus and the button — so there is one state, not two. Hover is gated to `(hover: hover)` and ≥1200 in the script (§12). */ .site-header__actions { display: flex; align-items: center; gap: 40px; flex: 0 0 auto; } /* "Careers". Inter 12 here, not the Geist Mono 12 of Text/Link — read from BP Header.dc.html:26. The token sheet flags it as an unexplained off-pattern case (§2b); built as drawn, confirm with design. */ .site-header__secondary { display: none; font-family: var(--bs-body); font-size: 12px; font-weight: 600; line-height: var(--bp-lh-tight); letter-spacing: var(--bp-ls-wide); text-transform: uppercase; color: var(--bs-dark); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } /* CTA. Padding is 12/20 at desktop and 14/24 at tablet, read from the two frames. Neither is the §5a "Standard" 16/28 — the header CTA is its own compact size. Hover swaps fill for the Accent/CTA-Hover token; nothing moves or resizes. */ .site-header__cta { display: none; box-sizing: border-box; align-items: center; justify-content: center; padding: 14px 24px; border-radius: var(--bp-radius); font-family: var(--bs-body); /* ⚠️ A LITERAL 13, not `--bp-fs-button` — design review, 8 Sep 2026: "The Contact text is huge". The token is `calc(13 * var(--bp-u))` above 1440, and this button was the ONLY text in the bar reading it: the nav is a hard 16 and `.site-header__secondary` a hard 12, both as drawn. So the drawn hierarchy inverted on wide screens — measured CONTACT 13 / 14.4 / 17.3 at 1440 / 1600 / 1920 against a nav that stayed at 16, i.e. the CTA went from smaller than the menu to larger than it, and the box from 115x40 to 140x45. `BP Header.dc.html:27` draws this button as a FIXED box — `width: 114px; height: 40px; padding: 12px 20px`, Inter 13/600/0.12em — so a literal is what the comp states, and it is the same reasoning `--bp-header-pad` already carries: header chrome holds its drawn size above 1440 while the content grid scales. ⚠️ The bar's GEOMETRY still scales (height 90 -> 120, logo 50 -> 67); that is deliberate and unchanged, so above 1440 a taller bar holds drawn-size text. Scoped to this one selector, and here is where each of `--bp-fs-button`'s three other consumers stands. `.site-drawer__cta` never renders above 1200, where --bp-u is 1px, so it is already 13 and nothing to do. `.prefooter__btn` sits in a band whose heading DOES scale (`calc(44 * var(--bp-u))`), so it is consistent as it is. ⚠️ `.site-footer__subscribe input[type="submit"]` WAS THE SAME DEFECT and is pinned the same way — found by sweeping the footer at 1440 vs 1920 rather than assuming: heading 20/20, subscribe title 16/16, copyright 14/14, all flat, while that button went 13 → 17.3 exactly as this one did. Approved and fixed in the same session; the note lives on that rule. */ font-size: 13px; font-weight: 600; line-height: var(--bp-lh-tight); letter-spacing: var(--bp-ls-wide); text-transform: uppercase; color: var(--bs-dark); text-decoration: none; white-space: nowrap; } /* 44px target at every width; only the bars inside change size. */ .site-header__burger { width: 44px; height: 44px; margin-right: -10px; flex-shrink: 0; background: none; border: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--bp-burger-bar-gap); cursor: pointer; color: var(--bs-dark); } .site-header__burger span { display: block; width: var(--bp-burger-bar-w); height: 2px; background: currentColor; } @media (min-width: 768px) { .site-header__secondary, .site-header__cta { display: inline-flex; } .site-header__actions { gap: 28px; } } /* Coming-soon mode (inc/coming-soon.php) has no drawer, which is where the Contact button lives below 768, so the bar keeps it at every width. */ .is-coming-soon .site-header__cta { display: inline-flex; } /* Beside the 163px logo it measured 10px past the screen edge at 320. The bar has 280px inside its gutters there: 163 logo + 12 gap + 103 button fits. */ @media (max-width: 374px) { .is-coming-soon .site-header__inner { gap: 12px; } .is-coming-soon .site-header__cta { padding-inline: 14px; } } @media (min-width: 1200px) { .site-header__nav { display: flex; flex: 1 1 auto; justify-content: center; } .site-header__burger { display: none; } .site-header__actions { gap: 40px; } .site-header__cta { padding: 12px 20px; } /* The two dropdown chevrons add 56px to the menu, and at 1200 the bar was already close: measured 1224 needed of 1200 (212 logo + 703 nav + 220 actions + 40 padding + 48 inner gaps). The 50px label gap is a 1440 value and the design has no 1200 frame, so it interpolates across the range (pattern-inventory §15) rather than being cut flat. */ .site-header__menu { gap: calc(40px + 10 * (100vw - 1200px) / 240); } } /* Interpolation stops at the frame it was read from. */ @media (min-width: 1440px) { .site-header__menu { gap: 50px; } } /* Standard button steps up at desktop. 1200 rather than 1440 to match where the nav switches — the design states values at 1024 and 1440 and nothing between, and switching both at one breakpoint keeps the bar internally consistent. */ @media (min-width: 1200px) { :root { --bp-btn-pad-y: 18px; --bp-btn-pad-x: 32px; --bp-btn-gap: 8px; } } /* ── Variants ───────────────────────────────────────────────────────────── The design draws two: light-bg/dark (solid) and transparent-bg/light over hero photography. `light` is the light-COLOURED mark for dark grounds and `dark` the dark-coloured one for the white bar — the starter's naming. */ .site-header__logo--light { display: none; } .site-header__logo--dark { display: block; } .site-header--solid { background: var(--bs-white); } /* ⚠️ FIXED, NOT ABSOLUTE, and it must stay out of flow in BOTH states. This was `absolute`, flipping to `sticky` once `.is-scrolled` landed — and that flip put the header INTO the document flow, pushing everything below it down by its own height. Measured on `/for-veterinary-providers/` at the 40px threshold: document height 6781 → 6872 (+91px, the header's height) with a 0.0632 layout shift on `.site-main` four milliseconds later. That was the jump. It also meant the bar scrolled away for the first 40px and then snapped back to the top, which is the second half of what the jank looked like. `fixed` keeps it out of flow throughout, so `.is-scrolled` now changes only paint — background, colours, shadow — and never layout. Clearance is unchanged: these heroes already sit under the bar at rest, and the key-page hero pads itself by `calc(var(--bp-header-h) + var(--bp-section))` for exactly this reason. Only this variant is affected. `--solid` and `--dark` declare no position and inherit `sticky` from the base, which is right for them: they have no hero to overlay, so occupying flow space is what should happen. */ .site-header--transparent { position: fixed; inset-inline: 0; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .18); } .site-header--transparent .site-header__logo--light { display: block; } .site-header--transparent .site-header__logo--dark { display: none; } /* `> li >` matters: these were written when the desktop menu was depth-1, so a bare `a` meant "a top-level label". Now that parents carry a dropdown, an unscoped selector would paint the panel's links white-on-white and give them a text shadow they must not have. */ .site-header--transparent .site-header__menu > li > a, .site-header--transparent .site-header__secondary { color: var(--bs-white); } .site-header--transparent .site-header__burger, .site-header--transparent .site-header__expand { color: var(--bs-white); } /* Text Shadow effect token (§2f) — #0A211F @ 30%, offset (0,2), radius 20. */ .site-header--transparent .site-header__menu > li > a, .site-header--transparent .site-header__secondary, .site-header--transparent .site-header__brand { text-shadow: 0 2px 20px rgba(10, 33, 31, .30); } .site-header--transparent .site-header__burger span { box-shadow: 0 2px 20px rgba(10, 33, 31, .30); } /* * Scrolled state for the transparent header — NOT designed. * The design shows the transparent bar over hero photography only, and says * nothing about what happens once the hero scrolls past. Left alone, a sticky * transparent bar puts white labels on white page content, which is a legibility * failure rather than a style choice. It reverts to the solid treatment instead. * CONFIRMED BY DESIGN 31 Aug 2026 — the review asked for a shadow ON this state, * which settles that the state itself is wanted. The reversion to solid still has * no drawn frame; only its existence is now agreed. */ /* Design review, 31 Aug 2026: a light shadow so the stuck bar reads as separate from the page content. Modelled on the reference site's `.is-peeking` rule but NOT copied from it — that shadow is `#201a3d0f`, a purple keyed to that brand. Same geometry and the same 6% weight, in Boothwyn's own Brand/Dark. ⚠️ On `.site-header`, not on `--transparent`. The reference scopes it to its transparent variant, but here EVERY page's header is sticky and `is-scrolled` is toggled regardless of variant, so scoping it that way would leave the interior templates stuck against their content with no separation — the exact thing this was asked for. ⚠️ This is the token sheet's SECOND sanctioned shadow; the only other is the Nav text shadow at 30%. The dropdown panel is still deliberately shadowless (see the note above it) — raise the two together with design. */ .site-header.is-scrolled { box-shadow: 0 2px 8px rgba(12, 51, 48, .06); } .site-header--transparent.is-scrolled { /* No `position` here on purpose — see the note above. Changing it was the jump. */ background: var(--bs-white); border-bottom-color: transparent; } .site-header--transparent.is-scrolled .site-header__logo--light { display: none; } .site-header--transparent.is-scrolled .site-header__logo--dark { display: block; } .site-header--transparent.is-scrolled .site-header__menu > li > a, .site-header--transparent.is-scrolled .site-header__secondary { color: var(--bs-dark); text-shadow: none; } .site-header--transparent.is-scrolled .site-header__burger, .site-header--transparent.is-scrolled .site-header__expand { color: var(--bs-dark); } .site-header--transparent.is-scrolled .site-header__burger span { box-shadow: none; } .site-header--transparent.is-scrolled .site-header__brand { text-shadow: none; } /* ========================================================================= Drawer (mobile + tablet navigation) ========================================================================= Full-screen Brand/Dark overlay. The top bar repeats the collapsed header height so the logo does not move when it opens. Item metrics from BP Homepage Mobile.dc.html:516 and :521. ========================================================================= */ .site-drawer { position: fixed; inset: 0; z-index: 200; background: var(--bs-dark); overflow-y: auto; display: flex; flex-direction: column; } .site-drawer[hidden] { display: none; } .site-drawer__top { height: var(--bp-header-h); flex-shrink: 0; box-sizing: border-box; padding-inline: var(--bp-header-pad); display: flex; align-items: center; justify-content: space-between; } .site-drawer__brand img { height: var(--bp-logo-h); width: auto; display: block; } .site-drawer__close { width: 44px; height: 44px; margin-right: -10px; flex-shrink: 0; background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bs-white); } .site-drawer__menu, .site-drawer__submenu { list-style: none; margin: 0; padding: 0; } /* Each row is followed by a hairline that runs edge to edge with no gutter, so the rule sits on the
  • and the padding lives on the row inside it. */ .site-drawer__menu > li { border-bottom: 1px solid var(--bs-primary-light); } .site-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--bp-header-pad); } .site-drawer__link { flex: 1 1 auto; font-family: var(--bs-body); font-size: 20px; font-weight: 500; line-height: var(--bp-lh-tight); color: var(--bs-white); text-decoration: none; } .site-drawer__expand { flex-shrink: 0; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bs-white); } /* Chevron-right closed, chevron-up open. */ .site-drawer__expand svg { transition: transform .2s ease; } .site-drawer__expand[aria-expanded="true"] svg { transform: rotate(-90deg); } /* Sub-items: indented to the 20px gutter plus a 20px step, no dividers, and a tighter 12px rhythm so they read as subordinate to the 16px parent rows. */ .site-drawer__submenu { padding-bottom: 8px; } .site-drawer__submenu[hidden] { display: none; } .site-drawer__submenu .site-drawer__row { padding: 12px var(--bp-header-pad) 12px calc(var(--bp-header-pad) + 20px); } .site-drawer__submenu .site-drawer__link { font-size: 16px; } .site-drawer__actions { margin-top: auto; padding: 24px var(--bp-header-pad) 40px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; } .site-drawer__cta { box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: var(--bp-radius); font-family: var(--bs-body); font-size: var(--bp-fs-button); font-weight: 600; line-height: var(--bp-lh-tight); letter-spacing: var(--bp-ls-wide); text-transform: uppercase; color: var(--bs-dark); text-decoration: none; } /* Design review, 31 Aug 2026 — match the drawn treatment. `BP Homepage Mobile.dc.html:449` (the Nav — Expanded frame) draws this as an ordinary drawer row that happens to be underlined: Inter 20 / 500, sentence case, left aligned. The build had it as a small centred uppercase label — 12 / 600 with wide tracking — which is the TABLET bar's treatment (`.site-header__secondary`), not the drawer's. The two share a name and a purpose but not a type ramp. It now carries its own `padding: 16px var(--bp-header-pad)` — the comp's `padding: 16px 20px`, and the same declaration `.site-drawer__row` uses, so it lines up with the rows above it. It gained that padding when it MOVED OUT of `.site-drawer__actions` (which had been supplying the horizontal half) to sit under the menu where the comp draws it. ⚠️ No bottom border, deliberately: the comp's last divider belongs to the menu row above, and `.site-drawer__menu > li` already draws it. */ .site-drawer__secondary { display: block; padding: 16px var(--bp-header-pad); font-family: var(--bs-body); font-size: 20px; font-weight: 500; line-height: var(--bp-lh-tight); color: var(--bs-white); text-decoration: underline; text-underline-offset: 4px; } /* CONTACT and Careers stay in the tablet bar, so the drawer does not repeat them. ⚠️ BOTH selectors are required. Careers used to live inside `__actions`, so hiding that one block covered it; it now sits under the menu where the comp draws it (design review, 31 Aug 2026) and needs hiding in its own right. Without the second line the tablet drawer and the tablet bar both render Careers — measured, before this line was added. */ @media (min-width: 768px) { .site-drawer__actions, .site-drawer__secondary { display: none; } } @media (min-width: 1200px) { .site-drawer { display: none; } } /* ========================================================================= Pre-footer CTA ========================================================================= */ /* The band is drawn as part of the FOOTER component in Figma (`Footer CTA`, 1440 × 220 at the top of the Desktop Footer instance), not as a page section — which is why it lives here rather than in a block. The larger contact section with the form is a separate, page-placed block; a page that carries that block switches this band off with `hide_prefooter`. Desktop arithmetic closes exactly: 40 + max(106, 140) + 40 = 220, with both columns centred against each other. */ .prefooter { background: var(--bs-subtle); } .prefooter__inner { max-width: var(--bp-container); margin-inline: auto; padding-block: 60px; display: flex; flex-direction: column; gap: 24px; } .prefooter__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } /* 28 / 38 / 38 / 44 across the frames — H2's row below 1024 and H3's value at 1440, so it belongs to no single token. Interpolated across the top range so both stated ends land and nothing jumps. Flagged in dev-log with the Continuous Improvement statement, which is off-token the same way. */ .prefooter__heading { font-size: var(--bp-fs-h2); margin: 0; color: var(--bs-dark); } .prefooter__description { margin: 0; font-family: var(--bs-body); font-size: var(--bp-fs-body); font-weight: 400; line-height: var(--bp-lh-body); color: var(--bs-text); text-wrap: pretty; } @media (min-width: 768px) { .prefooter__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; } .prefooter__heading { flex: 1; min-width: 0; } /* 324 at 768, 452 at 1024, 520 at 1440 — interpolated so each stated frame lands and the heading never gets squeezed. At a flat 452 the 768 frame left the heading 196px and wrapped it to four lines. */ .prefooter__aside { width: calc(324px + 128 * (100vw - 768px) / 256); flex-shrink: 0; } } @media (min-width: 1024px) { .prefooter__heading { font-size: calc(38px + 6 * (100vw - 1024px) / 416); } .prefooter__aside { width: calc(452px + 68 * (100vw - 1024px) / 416); } } @media (min-width: 1200px) { .prefooter__inner { padding-block: 40px; align-items: center; } .prefooter__heading { max-width: 404px; } .prefooter__aside { width: 520px; gap: var(--bp-gap-intra); } } @media (min-width: 1440px) { .prefooter__heading { font-size: calc(44 * var(--bp-u)); max-width: calc(404 * var(--bp-u)); } .prefooter__inner { padding-block: calc(40 * var(--bp-u)); } .prefooter__aside { width: calc(520 * var(--bp-u)); } } .prefooter__btn { padding: 16px 28px; color: var(--bs-dark); border-radius: var(--bp-radius); text-decoration: none; font-family: var(--bs-body); font-size: var(--bp-fs-button); font-weight: 600; /* Was MISSING, so this button alone inherited the body's 1.6 and rendered 52.8px tall where every other CTA on the site is 47.6. Five comp instances of this exact button state `line-height: 1.2`, and `.site-header__cta`, `.site-drawer__cta` and `lc/buttons --cta` all already declared it. QA Q39. */ line-height: var(--bp-lh-tight); letter-spacing: var(--bp-ls-wide); text-transform: uppercase; } /* ========================================================================= CTA hover wipe — the theme-side half ========================================================================= `BP Hover Effects.dc.html` §01: the CTA-Hover gradient wipes in left-to-right and the label turns Neutral/White. These three are every theme control on the CTA colour scheme — `background: var(--bs-primary)` with `color: var(--bs-dark)`. They are the same button in three places (all three read the same Site Settings Contact CTA), so they get one definition rather than three copies (dev-rules §B). ⚠️ NOT `.error-404__btn`, which also uses `--bs-primary`: it sets `color: #fff` and `border-radius: 999px`, i.e. it never had a Boothwyn pass and is not on this scheme. Logged rather than folded in — see dev-log QA Q37. ⚠️ `.site-drawer__cta` had NO hover rule at all before this, so for that one this ADDS behaviour rather than animating what was there. Deliberate, on the developer's call: it is the drawer's copy of the header's Contact button and behaving differently would read as a bug. ── Why background-size and not §01's `::before` + `scaleX` ── §01 codes the wipe as an absolutely-positioned pseudo-element scaled with `scaleX`, with the label lifted above it on `z-index: 1`. Built that way first, it BROKE the label: a `::before` at `z-index: 0` paints over its parent's in-flow content, and **a bare text node cannot be given a z-index**. All three of these buttons emit their label as bare text (`header.php:85`, `header.php:132`, `footer.php:82`), as do seven of the eight blocks that emit `lc-buttons__btn`. A background layer always paints behind text, whatever the markup — so the gradient is a second background on the button, revealed by animating `background-size` off a `left center` position. Genuinely lost: `scaleX` resolves the gradient in the unscaled box then scales the result, while `background-size` resolves it in the scaled box, so the 83° ramp differs subtly DURING the wipe. Identical at rest. `background-size` is also not compositor-accelerated. Both accepted 21 Aug 2026 against a label that vanishes. ⚠️ The plugin carries the SAME mechanism for `.lc-buttons__btn--cta` (`lc-blocks/src/blocks/buttons/style.scss`). A theme cannot share a Sass mixin with a plugin — two copies, two codebases. Keep them in step. ========================================================================= */ .site-header__cta, .site-drawer__cta, .prefooter__btn { /* Longhands throughout: the `background` shorthand resets `background-size` and would silently kill the wipe. */ background-color: var(--bs-primary); background-image: var(--wp--preset--gradient--cta-hover, linear-gradient(83deg, #0C3330 0%, #4EC278 90%)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background-size 0.3s ease, color 0.3s ease; } /* :focus-visible matches :hover. ⚠️ NOT in the design — §01 specifies hover only. Developer's call, 21 Aug 2026; logged as QA Q34. */ .site-header__cta:focus-visible, .site-drawer__cta:focus-visible, .prefooter__btn:focus-visible { background-size: 100% 100%; color: var(--bs-white); } /* §08: no hover on touch. Only :hover is gated — siblings must not be. */ @media (hover: hover) { .site-header__cta:hover, .site-drawer__cta:hover, .prefooter__btn:hover { background-size: 100% 100%; color: var(--bs-white); } } /* §03's closing media query, honoured. The transition goes; the hover STATE stays, so these users still get feedback — it just arrives instantly. */ @media (prefers-reduced-motion: reduce) { .site-header__cta, .site-drawer__cta, .prefooter__btn { transition: none; } } /* ========================================================================= Footer ========================================================================= BP Footer.dc.html (1440) and BP Footer Mobile.dc.html (375). Tablet is not drawn: the desktop row needs 213 + 660 + gap ≈ 900px, so it holds at 1024 (944 content) and stacks below that. Stated assumption — see dev-log.md. ========================================================================= */ .site-footer { background: var(--bs-dark); color: var(--bs-white); } /* 8px brand bar. Four stops, 90deg. Not a token — it appears in no palette or gradient table, and #A6E6BD is not in §1. Flagged for design. */ .site-footer__bar-top { height: 8px; background: linear-gradient(90deg, #4EC278 0%, #056752 31.25%, #4EC278 66.83%, #A6E6BD 100%); } .site-footer__inner { box-sizing: border-box; padding: 60px var(--bp-side) 40px; display: flex; flex-direction: column; gap: 40px; } .site-footer__top { display: flex; flex-direction: column; gap: 40px; } .site-footer__brand { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .site-footer__logo { height: 80px; width: auto; display: block; } .site-footer__brand-meta { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } /* nowrap is from the comp, and it is load-bearing: at 20px the line is ~237px against a 213px brand column, so it deliberately runs into the column gap rather than breaking the number across two lines. */ .site-footer__phone { margin: 0; font-family: var(--bs-body); font-size: 16px; font-weight: 400; line-height: var(--bp-lh-body); color: var(--bs-white); white-space: nowrap; } .site-footer__phone a { color: var(--bs-white); text-decoration: underline; text-underline-offset: 4px; } .site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; } .site-footer__social a { display: block; text-decoration: none; } .site-footer__social img { width: 40px; height: 40px; display: block; } .site-footer__main { display: flex; flex-direction: column; gap: 32px; } /* Three columns from one menu at depth 2: top-level item = heading, children = links. Rendering follows the menu, so a fourth column is an editor action. */ .site-footer__columns { display: block; } .site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; } /* Column headings. `> a` is kept alongside the span deliberately — the walker emits a span at depth 0 today (design review: the three categories are not clickable), but if a column ever gets a real destination the heading must not lose its type. See BP_Footer_Walker for why this is an element change rather than `pointer-events: none`. */ .site-footer__menu > li > a, .site-footer__menu > li > .site-footer__heading { display: block; font-family: var(--bs-body); font-size: 18px; font-weight: 600; line-height: var(--bp-lh-tight); color: var(--bs-primary); text-decoration: none; margin-bottom: 16px; } .site-footer__menu .sub-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .site-footer__menu .sub-menu a { font-family: var(--bs-heading); font-size: 16px; font-weight: 500; line-height: var(--bp-lh-tight); color: var(--bs-white); text-decoration: none; } /* §08: no hover on touch. Only :hover is gated — siblings must not be. */ @media (hover: hover) { .site-footer__menu .sub-menu a:hover { color: var(--bs-secondary); } } .site-footer__subscribe { display: flex; flex-direction: column; gap: 16px; } .site-footer__subscribe-title { margin: 0; font-family: var(--bs-body); font-size: 16px; font-weight: 400; line-height: var(--bp-lh-snug); letter-spacing: -0.01em; color: var(--bs-white); text-wrap: pretty; } /* ── Subscribe form (Gravity Forms) ─────────────────────────────────────── The design draws a bare input and a Subscribe button; Gravity Forms ships a labelled, validated form in its "orbital" theme. Restyled rather than restructured — the label is hidden from sight but kept for screen readers, because the comp's placeholder-only treatment would otherwise leave the field with no accessible name once the placeholder is typed over. Values from BP Footer.dc.html:62-63 and BP Footer Mobile.dc.html:64-65. */ .site-footer__subscribe .gform_wrapper { margin: 0; } .site-footer__subscribe .gform_wrapper .gform_fields { display: flex; flex-direction: column; gap: 16px; grid-template-columns: none; } .site-footer__subscribe .gfield { width: auto; padding: 0; } .site-footer__subscribe .gfield--type-submit { margin: 0; } /* Visually hidden, still announced. */ .site-footer__subscribe .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* * The form opts out of Gravity Forms' framework theme via * `gform-theme__disable-framework` on its container (see footer.php), so these * plain rules are uncontested. Values from BP Footer.dc.html:62-63 (desktop) and * BP Footer Mobile.dc.html:64-65 (mobile). * * The label is hidden from sight but kept for screen readers: the comp shows a * placeholder only, and a placeholder disappears as soon as it is typed over, * which would leave the field with no accessible name. */ .site-footer__subscribe .gform_wrapper { margin: 0; } .site-footer__subscribe .gform_wrapper .gform_fields { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: none; } .site-footer__subscribe .gform_wrapper .gfield { width: auto; padding: 0; margin: 0; } .site-footer__subscribe .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .site-footer__subscribe input[type="email"], .site-footer__subscribe input[type="text"]:not([type="hidden"]) { box-sizing: border-box; width: 100%; height: 51px; border: 1px solid #D1D1D1; border-radius: var(--bp-radius); padding: 16px 20px; background: transparent; font-family: var(--bs-body); font-size: 16px; font-weight: 500; line-height: var(--bp-lh-tight); color: var(--bs-white); } .site-footer__subscribe input[type="email"]:focus { outline: 2px solid var(--bs-secondary); outline-offset: 1px; } .site-footer__subscribe input::placeholder { color: var(--bs-white); opacity: .6; } /* ⚠️ `text-align: center` is REQUIRED, not redundant. Chrome centres an `input[type="submit"]` by default, but something upstream resets it to `start` here, and at 375 the button is full width — so the label sat 28px from the left with 229px of space after it (design review, 31 Aug 2026). It hides at desktop only because the button shrinks to fit its text. Every other full-width button escapes this by being `display: flex` with `justify-content: center`; this one is a `block`-level input, so alignment is what governs it. Measured across the site: this button is the only one affected. */ /* ⚠️ BOTH ELEMENTS, because Gravity Forms changed which one it emits. Up to 2.10.3 the submit was ``; 3.x emits `