/* * Retreat landing — story expander module (item I6, build-tracker.md) * * Section 6, "11:47pm story" (patterns/retreat-story.php). Flat navy panel * (90:217 verified flat, NOT the grain band — decision-log #12/#15, LESSONS * note in the build brief) holding two mutually-exclusive content states: * collapsed (intro + CONTINUE READING) and expanded (frame 4:843's full * long-read + COLLAPSE SECTION). JS toggles `.is-hidden`/`.is-active`/ * `.is-shown` (assets/js/expander.js) — no `hidden` attribute baked * into the static block markup (would fail editor validation the same way * hero.css's fetchpriority attempt did; see that file's note). Section * wrapper mirrors leave-with.css's container recipe exactly (max-width * 1216, padding-block var(--space-100), gutter steps at 1240/768). * * Review round 1 fixes: the expanded panel takes `tabindex="-1"` (set at * runtime by expander.js, not baked into block markup — same * editor-validation caution as above) so keyboard/AT focus lands inside it * on expand instead of dropping to (display:none on the clicked * CONTINUE READING button resets activeElement); the focus ring is * suppressed for that programmatic focus below. Collapsed state's heading * is a styled `

`, not an `

` (finding * #6, RULED — see pattern file docblock); it shares the H2's full type * recipe via a combined selector so it stays pixel-identical. * * White-on-navy treatment: since this panel IS genuinely flat navy (not the * grain-band exception), the token spec's "white text on navy at 82% for * body" rule applies — same `opacity: 0.82` recipe already used in * dev/style-proof.css. Headings/eyebrow stay full white (not dimmed). * * Belief-list bars (16:558, 4:1028): `::before`, not `wp:html` (S9 ruling, * LESSONS) — same recipe as who-for.css's note bar (absolute 4px pill, * var(--color-accent), var(--radius-pill)). Yellow-on-navy is the allowed * exception per the token spec's color-usage rules. * * h3 defensive counter (LESSONS): theme.json's h3 element style compiles to * `:root :where(h3)` and TIES (not loses to) a same-specificity class per * the S3/S10 finding — `.retreat-storysubheading` reasserts * lowercase/normal-tracking defensively, same fix applied there. / .retreat-story { max-width: 1216px; margin: 0 auto; / R2-4 fix (2026-08-16): standard inter-section rhythm — see sections/retreat/token-overrides.css's --retreat-section-pad header comment. `.retreat-storypanel` below is BAND-internal padding (the navy panel's own inset), untouched — not section rhythm. / padding-block: var(--retreat-section-pad); padding-inline: 0; } .retreat-storypanel { background: var(--color-retreat-navy); border-radius: var(--radius-story-panel, 35px); / R1-2 fix (2026-08-15): was wrongly --radius-md (20px) — 90:217 is an exported SVG asset, not a native Figma rect, so it doesn't surface a Tailwind radius class; its raw SVG path (`M0 35C0 15.67...`) is an exact 35px rounded-rect. See token-overrides.css's --radius-story-panel header comment for the full evidence trail. Fallback covers the editor canvas (no .retreat-page ancestor there, S3 precedent) — R1 kickback round 1 nit #10: fallback was still 20px, disagreeing with the token's real 35px value; bands.css's --radius-band follows the fallback==token convention (`var(--radius-band, 100px)`), this now matches it exactly instead of silently reverting to the pre-fix radius whenever the token is unavailable. / padding-block: var(--space-64); padding-inline: var(--space-80); color: var(--color-white); } / ── Collapsed / expanded state containers ── * Default (no JS yet, first paint): collapsed visible, expanded hidden via * display:none — matches the comp's default state and avoids a flash of * both states stacked before expander.js runs. / .retreat-storystate--expanded { display: none; opacity: 0; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease; } .retreat-storystate--expanded.is-active { display: block; } .retreat-storystate--expanded.is-active.is-shown { opacity: 1; transform: translateY(0); } .retreat-storystate--collapsed.is-hidden { display: none; } @media (prefers-reduced-motion: reduce) { .retreat-storystate--expanded { transition: none; } } / ── Eyebrow / headings ── / .retreat-storyeyebrow { color: var(--color-white); margin: 0 0 var(--space-sm); } .retreat-storyheading, .retreat-storyheading-p { color: var(--color-white); font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--font-3xl); / 40 / 34@1024 / 28@768 via token-overrides.css / line-height: 1.15; margin: 0 0 var(--space-sm); } .retreat-storysubheading { color: var(--color-white); font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--font-xl); / 22 / 20@768 via token-overrides.css / line-height: 1.2; margin: var(--space-2xl) 0 var(--space-sm); / Defensive counter (LESSONS) — see file header. / text-transform: lowercase; letter-spacing: normal; } / Green punctuation mark uses the shared .retreat-mark utility (sections/retreat/marks.css) — no per-section duplicate here. / / ── Body copy ── / .retreat-storybody { display: flex; flex-direction: column; gap: var(--space-xs); / 16px, matches the comp's inter-paragraph margin / margin: 0 0 var(--space-sm); } .retreat-storybody p { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--font-md); color: var(--color-white); opacity: 0.82; / comp rule: white body text on navy at 82% / margin: 0; } / ── Belief-list pull-quotes (16:557/16:558, 4:1027/4:1028) ── / .retreat-storybeliefs { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); padding-left: var(--space-sm); margin: 0 0 var(--space-sm); } .retreat-storybeliefs::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--space-4xs); / 4px, exact comp match / background: var(--color-accent); border-radius: var(--radius-pill); } .retreat-story__beliefs p { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--font-md); color: var(--color-white); opacity: 0.82; margin: 0; } / ── Toggle controls (90:221-224 CONTINUE READING / near 4:1019-1021 * COLLAPSE SECTION) — outlined pill, explicitly NOT the navy CTA family * (brief instruction). Raw