only. Site * chrome (header/footer, decision #10) sits outside this class and must never * inherit these values — do not move this class up to or . * * Two new page-only tokens with no theme-wide equivalent yet (comp geometry, * not a scale drift): --retreat-col-gap (90px two-col gap) and --font-price * (80px price numeral). Loaded after tokens.css (inc/enqueue.php) so this * cascade wins over the :root defaults at equal specificity. * * ── MOBILE OVERRIDE CONTRACT (review round 1, blocker 1 + 2 fix) ── * The theme carries site-wide !important mobile rules that hardcode heading/ * button/eyebrow sizes at <=768px (global.css:229-245, typography.css:44-58, * buttons.css:84-87) and steps its own --space-md/--space-lg tokens down at * 1024px and 768px (tokens.css:97,112 area). Two consequences fixed below: * * 1. Core heading/button/eyebrow blocks carry the theme's own classes * (.wp-block-heading, .wp-block-button__link, .eyebrow family), so the * theme's !important mobile rules were winning over these tokens on * mobile even though the tokens themselves were correct. Fixed with a * `.retreat-page`-scoped counter-layer at the bottom of this file that * re-asserts the retreat tokens at higher specificity (class + class * beats the theme's bare-element/single-class selectors) — see the * "MOBILE OVERRIDE COUNTER-LAYER" block below. * 2. These tokens were flat pins (e.g. --space-md: 34px at every viewport) * while the theme's own equivalent steps down twice. At <=768px the * theme's --space-lg drops to 24px while our flat --space-md sat at * 34px — a scale inversion (retreat "md" > theme "lg"). Fixed with * responsive steps below, proportioned off the theme's own chain. * Invariant asserted at every breakpoint: --space-md < --space-lg * (theme --space-lg: 40 / 32@1024 / 24@768, unmodified here). */ /* R1-6 fix (2026-08-15): `.editor-styles-wrapper` added alongside * `.retreat-page` on this one (desktop) rule — the block editor's iframe * canvas carries `.editor-styles-wrapper` on its body but never * `.retreat-page` (that class lives on the front-end template's

, * which the canvas doesn't reproduce), so every one of these custom * properties silently never activated in the editor before this fix — see * inc/enqueue.php's kdpc_editor_block_assets_retreat() docblock for the * full mechanism writeup. * * R1 KICKBACK ROUND 1 CORRECTION (finding #3): this comment previously * claimed the fix also covered "its two @media steps below" — false. Only * this base rule was widened; the three @media blocks below kept * `.retreat-page` alone, so the editor canvas still fell back to desktop * token values whenever device preview (or emulation) put the canvas at * 1024/768/480px. Each of those three blocks now carries its own * `.editor-styles-wrapper` arm (see below) — same fix, same reasoning, * applied per breakpoint instead of assumed to cascade. * * Deliberately NOT widened on the `.retreat-page .eyebrow` rule or the * "MOBILE OVERRIDE COUNTER-LAYER" block further down — both are * narrower-purpose fixes (a font-size nit, a ≤768px !important fight) that * don't affect the "editor shows the retreat page in the right ballpark" * bar this fix is targeting, and widening them adds !important-interaction * risk (the counter-layer block) for no real benefit — the CSS file itself * is only ever enqueued in the editor on a retreat-gated screen to begin * with (enqueue.php's page/template check), so there's no cross-page leak * risk either way. */ .retreat-page, .editor-styles-wrapper { --font-xl: 22px; /* theme --font-xl = 24px; comp eyebrow/card H3 = 22px */ --font-3xl: 40px; /* theme --font-3xl = 44px; comp H1/H2 = 40px */ --font-md: 18px; /* theme --font-md = 17px; comp body/button = 18px */ --space-sm: 22px; /* theme --space-sm = 24px; comp card gutters = 22px */ --space-md: 34px; /* theme --space-md = 32px; comp grid/stat rows = 34px */ --retreat-col-gap: 90px; /* comp two-col gap — no theme equivalent */ --font-price: 80px; /* comp price numeral — no theme equivalent */ /* Page tokens (moved from bands.css, review round 1 finding #5) — single home for .retreat-page custom props, decision-log #14 grain band. */ --retreat-blue-grain: #0260c7; --retreat-blue-grain-light: #1c72d6; --retreat-blue-grain-dark: #0154ac; /* ── R1-2 fix (2026-08-15) — band + story-panel corner radii ── * Both values verified against Figma node ground truth, not eyeballed: * --radius-band: the hero band's bottom corners (90:34) and the join * band's top corners (90:29) both export as literal Tailwind classes * `rounded-bl-[100px]`/`rounded-br-[100px]` — exact 100px, not the * 20px (--radius-md) previously wired into `.retreat-band--rounded`. * Cross-checked with a pixel-fit of the actual corner curve on both * screenshots (hero 90:30, join's band group 90:25): both arcs match * a 100px radius model point-for-point at every x sampled 0-90px, well * outside pixel-measurement noise. Standalone token (not folded into * the shared radius scale) because it's a comp geometry constant, same * status as --retreat-col-gap/--font-price above — a rebuild-promotion * candidate if this becomes the site's new "full-bleed band" radius. * --radius-story-panel: the story section's navy panel (90:216/90:217) * was assumed r20 (modules/expander.css's `.retreat-story__panel` * comment claimed "matches comp (90:217) exactly" at --radius-md) — * WRONG. 90:217 renders as an exported SVG asset (not a native Figma * rounded-rect), so get_design_context's Tailwind class guess doesn't * apply; opened the actual SVG path instead: * `M0 35C0 15.67 15.67 0 35 0H1190...` — the corner Bezier control * points (15.67 = 35 * (1 - 0.4477), the standard circle-approximation * constant) are the textbook signature of an exact 35px radius rect. * Cross-validated the method on a card confirmed r20 elsewhere * (90:107, a native rect: Tailwind literally returns `rounded-[20px]`) * to make sure the SVG-path read wasn't a units/scale artifact — it * wasn't. No theme token lands on 35px (nearest: --radius-lg 24px, * --radius-xl 40px, both >5px off) — page-scoped value per * theme-conventions.md's token-over-literal rule, not a raw px in * expander.css. Single call site (modules/expander.css); not promoted * to the shared radius scale since only this one panel needs it. */ --radius-band: 100px; --radius-story-panel: 35px; /* ── R1-1 fix (2026-08-15) — how-it-works CTA gap ── * Target gap between the day-two step's body paragraph and the "Reserve * your spot" CTA below it, node-verified: 93:337 (CTA) top y2325 minus * 90:242 (day-two body) bottom y2274 = 51px, desktop. how-it-works.css's * `.retreat-how__step-text > .retreat-how__cta-wrap` rule consumes this via * calc() (subtracting the step-text flex column's own constant 8px * --space-3xs gap, so this value IS the full rendered gap, not a * pre-subtracted margin). ≤1024/≤768 steps are derived, not measured (no * mobile Figma frame — figma-analysis-2026-08.md §Design gaps), using the * same ratio as --space-2xl's own responsive step (120 -> 80 -> 60, i.e. * ~0.667x then ~0.5x of the desktop value) since that's the token driving * the adjacent header->steps gap in the same section — keeps the two * gaps' relative rhythm in proportion at every breakpoint. */ --retreat-how-cta-gap: 51px; /* ── R2-4 fix (2026-08-16) — standard inter-section rhythm ── * The build gave every white/flow section `padding-block: var(--space-100)` * (100px, stepping 64@1024/48@768), and since page-rhythm.css renders * sections flush with zero added gap, every seam was TWO section paddings * stacked — ~200px desktop. The comp (frame 1:561, content-bottom to * next-content-top measured across all 9 seams) shows seams ranging * 55-128px, averaging ~90-100px — roughly HALF of what --space-100 was * producing. RULING (Alain, R2 feedback): standardize to a single shared * page token so every section pulls the same value, landing seams at a * uniform ~96-100px rather than chasing each comp seam's own number * individually (comp variance is real but small — 55 to 128 outside the * one deliberate isnt->join exception below — and a uniform rhythm reads * better than 9 slightly-different hand-tuned gaps). * * Value: --space-48 (the theme's own 48px token) at desktop — landing * seam = 2 x 48 = 96px, centered in the comp's typical 76-115 band. * Responsive steps do NOT chain off --space-48's own cascade (48 -> 40@1024 * -> 32@768) — the brief calls for HALVING the pre-fix --space-100 chain * instead (100 -> 64 -> 48, halved = 50 -> 32 -> 24), which is a different, * steeper descent than --space-48's own step. Asserted explicitly per * breakpoint below for that reason, same "bespoke page constant with its * own responsive steps" precedent as --retreat-how-cta-gap above. */ --retreat-section-pad: var(--space-48); } /* ── Eyebrow desktop size (round 3 fix, finding #3) ── * typography.css:14-17 hardcodes `.eyebrow` at 18px with no responsive * step of its own; the mobile counter-layer above pins retreat's eyebrow to * --font-xl (22px desktop / 20px <=768px), so without this rule the eyebrow * was LARGER on mobile (22px, via the counter-layer) than on desktop (18px, * theme default) — inverted scale. This rule gives desktop its own --font-xl * assertion so the descent is monotonic: 22px desktop -> 20px <=768px. * Grepped the theme for every other `.eyebrow` font-size rule (hero.css, * split-intro.css, team-clarity-tool.css, culture.css) — all target * different classes (.hero__eyebrow, .split-intro__eyebrow, etc.), not * bare `.eyebrow`, so typography.css:14-17 is the only conflicting source. * No !important needed: typography.css's `.eyebrow` is single-class * (0,1,0); `.retreat-page .eyebrow` is two classes (0,2,0) and wins on * specificity alone. */ .retreat-page .eyebrow { font-size: var(--font-xl); } /* ── Responsive token steps (blocker 2 fix) ── * Derived proportionally from the theme's own --space-md chain (32 -> 24@1024 * -> 20@768) and theme.json's fluid clamp() for headings, so these page pins * step down instead of staying flat. --space-md < --space-lg holds at every * viewport (checked against the theme's unmodified --space-lg: 40/32/24). */ /* R1 kickback round 1 fix (finding #3): `.editor-styles-wrapper` widened * onto the base desktop rule above (R1-6) but NOT onto these three @media * steps — the editor canvas iframe carries a real viewport width, so * switching device preview to Tablet/Mobile (or emulating the canvas at * those widths) DOES trigger these breakpoints, but only `.retreat-page` * was listed, which never matches inside the canvas. The editor kept * showing desktop token values (--font-3xl 40px, etc.) at every preview * width — the R1-6 header comment's claim that "the media steps were * covered" by the base-rule widening alone was false; each step needs its * own selector. Mirrored exactly, same selector-list shape as the base rule. */ @media (max-width: 1024px) { .retreat-page, .editor-styles-wrapper { --font-3xl: 34px; /* 40 -> 34, ~0.85 of desktop, matches theme's clamp descent */ --space-md: 26px; /* 34 -> 26, mirrors theme --space-md's 32 -> 24 step */ --retreat-how-cta-gap: 34px; /* 51 -> 34, ~0.667x, mirrors --space-2xl's 120 -> 80 step */ /* R2-4 fix (2026-08-16): halved from the pre-R2-4 --space-100 chain's 64px 1024 step (not --space-48's own 40px 1024 step — see the base rule's header comment for why this token doesn't chain off --space-48). */ --retreat-section-pad: 32px; --radius-band: 80px; /* 100 -> 80: band corner scales with viewport (comp is desktop-only; at narrow widths a fixed 100px curve eats into band content — Alain-reported 2026-08-16, hero stats + join heading crowding/clipping) */ } } @media (max-width: 768px) { .retreat-page, .editor-styles-wrapper { --font-3xl: 28px; /* 34 -> 28 */ --font-xl: 20px; /* 22 -> 20 */ --font-md: 17px; /* 18 -> 17, lands exactly on theme --font-md at this bp */ --space-sm: 18px; /* 22 -> 18 */ --space-md: 20px; /* 26 -> 20, lands exactly on theme --space-md at this bp */ --font-price: 56px; /* 80 -> 56 */ --retreat-how-cta-gap: 26px; /* 51 -> 26, ~0.5x, mirrors --space-2xl's 120 -> 60 step */ /* R2-4 fix (2026-08-16): halved from the pre-R2-4 --space-100 chain's 48px 768 step. */ --retreat-section-pad: 24px; --radius-band: 56px; /* 80 -> 56 */ } } @media (max-width: 480px) { .retreat-page, .editor-styles-wrapper { --font-price: 44px; /* 56 -> 44, price numeral needs a 3rd step to stay readable at narrow widths */ --radius-band: 40px; /* 56 -> 40, ~11% of a 360px viewport — the curve stops intruding on the band's content column */ } } /* ── Mobile override counter-layer (blocker 1 fix) ── * Re-asserts the retreat tokens above at <=768px against the theme's * site-wide !important mobile rules (global.css:229-245, typography.css: * 44-58, buttons.css:84-87), which target the same selectors retreat's core * blocks render with. `.retreat-page ` is higher specificity than * the theme's bare-element/single-class selectors, so this wins even though * both sides use !important — no reliance on source order. * * Round 3 fix (finding #1, blocker): the h2 arm used to catch every * `.wp-block-heading:where(:not(h1))` — h3/h4/h5 included — inflating every * sub-heading to --font-3xl on mobile and stomping the proof page's 15px * section-label h3s. Arms are now split by element: h2 gets its own arm, * h3/h4 (block-editor headings, carrying .wp-block-heading) join the * existing --font-xl arm alongside the legacy h3/.service-card__label * selectors. See dev/style-proof.css for the proof-label re-assertion this * required. */ @media (max-width: 768px) { .retreat-page h2, .retreat-page h2.wp-block-heading { font-size: var(--font-3xl) !important; } .retreat-page h3, .retreat-page h3.wp-block-heading, .retreat-page h4.wp-block-heading, .retreat-page .service-card__label { font-size: var(--font-xl) !important; } .retreat-page .eyebrow, .retreat-page .hero__eyebrow, .retreat-page .description__label, .retreat-page .for-you__label { font-size: var(--font-xl) !important; } .retreat-page .wp-block-button__link { font-size: var(--font-md) !important; /* Round 3 fix (finding #6d): --space-2xs (12px) vertical padding at 17px font-size rendered ~41px tall — under the 44px touch-target floor. --space-xs (16px, not stepped down for retreat mobile) pushes rendered height back over 44px; verified via getBoundingClientRect. */ padding: var(--space-xs) var(--space-sm) !important; } }