/* ============================================================ Red Shed 2026 — DESIGN LAYER (design.css) Appended to the redshed-fonts plugin; ships alongside the theme's zones.css. Plain CSS, no build step. Uses theme custom properties (--wp--preset--*) and the zone tokens (--zone-*) wherever possible so it inherits the RSX and Easy Oar re-mappings automatically. Campaign: "Find Your Better". Device: the pennant double- chevron. Language: flat colour blocks, no gradients, minimal shadow, uppercase condensed headings, calm confident tone. Mobile-first, CSS-only devices, no JS, no external assets. ============================================================ */ /* Convenience aliases so this file reads cleanly. These map to the theme.json palette + fontFamily presets. */ :root { --rs-teal: var(--wp--preset--color--rs-teal); --rs-red: var(--wp--preset--color--rs-red); --rs-beige: var(--wp--preset--color--rs-beige); --rs-white: var(--wp--preset--color--rs-white); --rs-black: var(--wp--preset--color--rs-black); --rs-font-heading: var(--wp--preset--font-family--heading); --rs-font-body: var(--wp--preset--font-family--body); /* Vertical rhythm scale for full-bleed bands. Mobile-first; scaled up at the tablet breakpoint below. */ --rs-band-pad: 2.5rem; /* top/bottom padding inside a band */ --rs-flow: 1.25rem; /* default gap between stacked items */ /* The pennant double-chevron, as an inline SVG mask. Tinted with background-color so it always follows the chosen ink colour (currentColor-style) and needs no external asset. */ --rs-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M2%202%20L10%208%20L2%2014%20M12%202%20L20%208%20L12%2014'%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); } /* ============================================================ a. PENNANT DEVICE .pennant headings get a double-chevron mark before the text. Sized to cap height (em units), tinted with the zone accent so it works on any background. Overrides the stale clip-path version in zones.css cleanly. ============================================================ */ .pennant::before { content: ""; display: inline-block; width: 0.92em; height: 0.6em; margin-right: 0.4em; /* nudge up so the chevron centres on the cap height */ transform: translateY(-0.06em); background: none; /* clear any inherited paint */ background-color: var(--zone-accent, var(--rs-red)); -webkit-mask: var(--rs-chevron) left center / contain no-repeat; mask: var(--rs-chevron) left center / contain no-repeat; /* clip-path from the old rule must not linger */ clip-path: none; vertical-align: baseline; } /* On strong/dark bands the accent can go muddy; force the mark to the brand red for punch on teal, navy and deepwater. */ .band-teal .pennant::before, .band-red .pennant::before, .rs-hero .pennant::before { background-color: var(--rs-red); } .band-red .pennant::before { background-color: var(--rs-white); /* red-on-red would vanish */ } /* .pennant-band — a full-width colour band that leads with the device. Pair with a .band-* helper for its colour. */ .pennant-band { padding-block: var(--rs-band-pad); padding-inline: 1.25rem; } /* ============================================================ b. SECTION RHYTHM + ALTERNATING BANDS Generous vertical spacing for full-bleed groups, plus band colour helpers that also fix ink, links and buttons inside. ============================================================ */ .wp-block-group.alignfull { padding-block: var(--rs-band-pad); } /* Beige band — the default calm ground. */ .band-beige { background-color: var(--rs-beige); color: var(--rs-teal); } .band-beige a { color: var(--rs-teal); } .band-beige a:hover { color: var(--rs-red); } /* Teal band — the signature deep ground. */ .band-teal { background-color: var(--rs-teal); color: var(--rs-beige); } .band-teal :is(h1,h2,h3,h4,h5,h6) { color: var(--rs-beige); } .band-teal a { color: var(--rs-white); text-underline-offset: 0.2em; } .band-teal a:hover { color: var(--rs-red); } /* Red band — used sparingly, for accent / high-energy moments. */ .band-red { background-color: var(--rs-red); color: var(--rs-white); } .band-red :is(h1,h2,h3,h4,h5,h6) { color: var(--rs-white); } .band-red a { color: var(--rs-white); } .band-red a:hover { color: var(--rs-teal); } /* ============================================================ c. BUTTONS Refine size/padding; enforce uppercase Carplates; give each band a sensible hover; keep outline variants legible anywhere. Theme.json already sets red fill + Carplates; this tunes it. ============================================================ */ .wp-block-button__link { padding: 0.75em 1.5em; font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.15; border-radius: 2px; } /* Outline variant — 2px, follows current ink, fills on hover. */ .is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; background-color: transparent; padding: calc(0.75em - 2px) calc(1.5em - 2px); } /* Solid button hover per band (fill flips to a contrasting brand colour rather than just darkening). */ .band-teal .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--rs-red); color: var(--rs-white); } .band-red .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--rs-teal); color: var(--rs-white); } /* Outline legibility on dark bands + hero. */ .band-teal .is-style-outline .wp-block-button__link, .rs-hero .is-style-outline .wp-block-button__link { color: var(--rs-white); border-color: var(--rs-white); } .band-teal .is-style-outline .wp-block-button__link:hover, .rs-hero .is-style-outline .wp-block-button__link:hover { background-color: var(--rs-white); color: var(--rs-teal); } .band-beige .is-style-outline .wp-block-button__link { color: var(--rs-teal); border-color: var(--rs-teal); } .band-beige .is-style-outline .wp-block-button__link:hover { background-color: var(--rs-teal); color: var(--rs-white); } /* ============================================================ d. EASY OAR ZONE — bold colour blocking Milk ≈ site beige, so the zone must colour-block to feel like its own world: Deepwater intro, Water section bands, Lake accents, Pressura uppercase headings, mono small labels. ============================================================ */ .zone-easy-oar { --zone-accent: var(--eo-water, #2170BA); } /* Page intro area — first full band reads as Deepwater/Milk. Apply .eo-intro to the opening group, or it falls to the hero. */ .zone-easy-oar .eo-intro, .zone-easy-oar .rs-hero { background-color: var(--wp--preset--color--eo-deepwater); color: var(--wp--preset--color--eo-milk); } .zone-easy-oar .eo-intro :is(h1,h2,h3,h4) { color: var(--wp--preset--color--eo-milk); } /* Water section bands (the copy already colours some groups eo-water; this guarantees legible Milk ink on them). */ .zone-easy-oar .has-eo-water-background-color { color: var(--wp--preset--color--eo-milk); } .zone-easy-oar .has-eo-water-background-color :is(h1,h2,h3,h4) { color: var(--wp--preset--color--eo-milk); } /* Lake highlight — pale blue accent panel for callouts. */ .zone-easy-oar .eo-lake-panel, .zone-easy-oar .has-eo-lake-background-color { background-color: var(--wp--preset--color--eo-lake); color: var(--wp--preset--color--eo-deepwater); } /* Pressura uppercase headings (reinforces zones.css). */ .zone-easy-oar :is(h1,h2,h3,h4), .zone-easy-oar .wp-block-heading { font-family: var(--wp--preset--font-family--pressura); text-transform: uppercase; letter-spacing: 0.03em; } /* Mono accents for small labels: hours, prices, day names. */ .zone-easy-oar .eo-mono, .eo-mono { font-family: 'GT Pressura Mono', 'Art Company Mono', ui-monospace, 'Courier New', monospace; font-weight: 300; letter-spacing: 0.02em; font-size: 0.95em; } /* Easy Oar buttons — Water fill, Milk ink, Red Shed red on hover. */ .zone-easy-oar .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--wp--preset--color--eo-water); color: var(--wp--preset--color--eo-milk); } .zone-easy-oar .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--wp--preset--color--eo-deepwater); color: var(--wp--preset--color--eo-milk); } /* ============================================================ e. RSX ZONE — depth Navy framing, cream ink, Dwight, tan / pale-green accent details, red CTAs. Extends zones.css .zone-rsx. ============================================================ */ .zone-rsx { --zone-accent: var(--rsx-red, #EE4242); background-color: var(--wp--preset--color--rsx-navy); color: var(--wp--preset--color--rsx-cream); } /* Tan / pale-green hairline details on section headings. */ .zone-rsx .pennant { border-bottom: 1px solid rgba(168, 122, 97, 0.5); /* tan #A87A61 */ padding-bottom: 0.4rem; } .zone-rsx .eo-lake-panel, /* reuse the accent-panel hook if present */ .zone-rsx .rsx-accent { background-color: rgba(204, 217, 186, 0.12); /* light green #CCD9BA wash */ border-left: 3px solid #A87A61; /* tan rule */ padding: 1rem 1.25rem; } /* Dwight everywhere (reinforces zones.css). */ .zone-rsx :is(h1,h2,h3,h4), .zone-rsx .wp-block-heading { font-family: var(--wp--preset--font-family--dwight); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--rsx-cream); } .zone-rsx p, .zone-rsx li { font-family: var(--wp--preset--font-family--dwight); font-weight: 300; } /* Red CTAs in RSX. */ .zone-rsx .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--wp--preset--color--rsx-red); color: var(--rs-white); } .zone-rsx .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--wp--preset--color--rsx-cream); color: var(--wp--preset--color--rsx-navy); } .zone-rsx .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--rsx-cream); border-color: var(--wp--preset--color--rsx-cream); } .zone-rsx .is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--rsx-cream); color: var(--wp--preset--color--rsx-navy); } /* ============================================================ f. COVER / HERO .rs-hero (wp:cover) — flat teal overlay (no gradient), fluid headline, pennant on the H1, sensible mobile height. ============================================================ */ .rs-hero { --rs-hero-min: 420px; min-height: var(--rs-hero-min); align-items: center; text-align: left; } /* Overlay stays a flat colour at its dimRatio — we only make sure there are no rounded corners and the ink is bright. */ .rs-hero .wp-block-cover__inner-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } .rs-hero h1, .rs-hero .wp-block-heading { color: var(--rs-white); font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: 0.01em; margin: 0; max-width: 16ch; } /* Optional supporting line under the hero H1. */ .rs-hero p { color: var(--rs-beige); font-size: clamp(1.05rem, 2.5vw, 1.35rem); max-width: 44ch; margin-top: 0.75rem; } /* ============================================================ g. PHOTO BLOCKS .rs-photo-band — full-bleed image band. .rs-photo-split — image + text, 50/50, stacks under 700px. Both carry a subtle 2px Red Shed red top rule as brand detail. ============================================================ */ .rs-photo-band { margin-block: 0; border-top: 2px solid var(--rs-red); } .rs-photo-band img { display: block; width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; } .rs-photo-split { border-top: 2px solid var(--rs-red); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; } .rs-photo-split img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; } .rs-photo-split .rs-photo-split__text { padding: 2rem 1.5rem; align-self: center; } /* ============================================================ h. TABLES (pricing / hours) Brand styling; stacks to labelled rows under 600px. Uses data-label on for the stacked view where present. ============================================================ */ .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table th { background-color: var(--rs-teal); color: var(--rs-beige); font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; padding: 0.7rem 0.9rem; font-weight: 400; } .wp-block-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(37, 55, 57, 0.15); } .wp-block-table tbody tr:nth-child(even) td { background-color: rgba(240, 237, 222, 0.5); /* soft beige zebra */ } /* ============================================================ i. MINDBODY / HEALCODE WIDGET FRAME .rs-widget-wrap — brand frame + max width. Font nudges are a best-effort inherit; no !important wars with the vendor CSS. ============================================================ */ .rs-widget-wrap { max-width: 760px; margin-inline: auto; padding: 1.25rem; background: var(--rs-white); border: 1px solid rgba(37, 55, 57, 0.15); border-top: 3px solid var(--rs-red); border-radius: 2px; } .rs-widget-wrap .healcode-widget, .rs-widget-wrap .healcode-pricing-widget, .rs-widget-wrap [class*="healcode"] { font-family: var(--rs-font-body); max-width: 100%; } /* ============================================================ j. TABLET / DESKTOP SCALE-UP + MOBILE POLISH Mobile-first defaults above; open up the rhythm on wider screens, and harden the small-screen edges. ============================================================ */ @media (min-width: 782px) { :root { --rs-band-pad: 4.5rem; --rs-flow: 1.75rem; } .rs-hero { --rs-hero-min: 480px; } .rs-photo-split .rs-photo-split__text { padding: 3rem 2.5rem; } } @media (max-width: 781px) { /* Photo split stacks image over text. */ .rs-photo-split { grid-template-columns: 1fr; } /* Slightly shorter hero on phones. */ .rs-hero { --rs-hero-min: 340px; } .rs-hero h1, .rs-hero .wp-block-heading { max-width: 14ch; } } @media (max-width: 600px) { /* Stacked table rendering: each row becomes a card, each cell a labelled line via its data-label attribute. */ .wp-block-table table, .wp-block-table thead, .wp-block-table tbody, .wp-block-table tr, .wp-block-table th, .wp-block-table td { display: block; width: 100%; } .wp-block-table thead { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; } .wp-block-table tr { margin-bottom: 1rem; border: 1px solid rgba(37, 55, 57, 0.2); } .wp-block-table tbody tr:nth-child(even) td { background-color: transparent; } .wp-block-table td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; border-bottom: 1px solid rgba(37, 55, 57, 0.12); } .wp-block-table td[data-label]::before { content: attr(data-label); font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.03em; text-align: left; color: var(--rs-teal); } /* Tighten band rhythm and hero copy on the smallest screens. */ .wp-block-group.alignfull, .pennant-band { padding-inline: 1rem; } .rs-hero .wp-block-cover__inner-container { padding-inline: 1rem; } /* Header / nav breathing room on mobile. */ .wp-block-navigation { font-size: 1rem; } .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.4rem; } /* Newsletter field goes full width so it doesn't overflow. */ .rs-newsletter { max-width: 100%; } } /* ============================================================ Red Shed 2026 — DESIGN LAYER, PASS 2 (design2.css) Loads AFTER design-pass/design.css. Additions only, no rewrites of pass 1. Adds the "rich page" primitives Monique asked for: numbered curriculum blocks, a course-details card, the CSS-only tier picker, and a 2–3-up gallery strip. Reuses pass-1 tokens (--rs-*, --zone-*) and band helpers. Mobile-first, CSS-only devices, no JS required. ============================================================ */ /* ============================================================ k. NUMBERED CURRICULUM BLOCKS (.rs-num-blocks) Big Carplates numerals 01–06 in Red Shed red, a title and a line of copy. 2 columns on desktop, 1 on mobile. Mirrors the current site's numbered "what you'll learn" list, with depth. ============================================================ */ .rs-num-blocks { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-block: var(--rs-flow); } .rs-num-block { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; padding: 1.25rem 1.25rem 1.25rem 1rem; background: var(--rs-white); border: 1px solid rgba(37, 55, 57, 0.14); border-top: 3px solid var(--rs-red); border-radius: 2px; } .rs-num-block__n { font-family: var(--rs-font-heading); font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 0.85; color: var(--rs-red); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .rs-num-block__body :is(h3, .wp-block-heading) { margin: 0 0 0.25rem; font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.03em; color: var(--rs-teal); font-size: 1.05rem; line-height: 1.15; } .rs-num-block__body p { margin: 0; } /* Numbered blocks sitting inside a teal band flip their ink. */ .band-teal .rs-num-block { background: rgba(240, 237, 222, 0.06); border-color: rgba(240, 237, 222, 0.22); } .band-teal .rs-num-block__body :is(h3, .wp-block-heading) { color: var(--rs-beige); } /* ============================================================ l. COURSE-DETAILS CARD (.rs-course-card) A framed panel with an uppercase teal band header and a set of labelled rows: duration, sessions, price, who it's for, what's included. The "spec sheet" for a course. ============================================================ */ .rs-course-card { max-width: none; margin-inline: 0; background: var(--rs-white); border: 1px solid rgba(37, 55, 57, 0.15); border-radius: 2px; overflow: hidden; } .rs-course-card__head { background: var(--rs-teal); color: var(--rs-beige); font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.85rem 1.25rem; font-size: 1.05rem; } .rs-course-card__body { padding: 0.5rem 1.25rem 1.25rem; } .rs-course-card dl { display: grid; grid-template-columns: 1fr; margin: 0; } .rs-course-card dt { font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; color: var(--rs-red); margin-top: 1rem; } .rs-course-card dd { margin: 0.15rem 0 0; } @media (min-width: 600px) { .rs-course-card dl { grid-template-columns: 12rem 1fr; column-gap: 1.25rem; } .rs-course-card dt { margin-top: 0.9rem; } .rs-course-card dd { margin-top: 0.9rem; } .rs-course-card dt:first-of-type, .rs-course-card dd:first-of-type { margin-top: 0.6rem; } } /* ============================================================ m. TIER PICKER (.rs-tier-picker) — CSS-ONLY, NO JS Five hidden radios, then a row of tab labels, then the panels. The :checked radio swaps which panel shows and which tab reads active, via the general-sibling combinator. Radios MUST precede tabs and panels in source order for this to work. Mobile: tabs become a horizontal scroll row. ============================================================ */ .rs-tier-picker { max-width: 720px; margin-inline: auto; } .rs-tier-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .rs-tier-tabs { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; scrollbar-width: thin; } .rs-tier-tabs label { flex: 1 0 auto; text-align: center; white-space: nowrap; cursor: pointer; padding: 0.7rem 1rem; font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--rs-teal); background: var(--rs-beige); border: 1px solid rgba(37, 55, 57, 0.18); border-radius: 2px; position: relative; } .rs-tier-tabs label:hover { border-color: var(--rs-red); } .rs-tier-tabs label .rs-tier-flag { display: block; font-family: var(--rs-font-body); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6rem; color: var(--rs-red); margin-top: 0.15rem; } /* keyboard focus ring on the radio -> show on its label */ .rs-tier-radio:focus-visible + .rs-tier-tabs label { outline: none; } .rs-tier-picker:focus-within .rs-tier-tabs { outline: 2px solid transparent; } .rs-tier-panels { margin-top: 1rem; border: 1px solid rgba(37, 55, 57, 0.15); border-top: 3px solid var(--rs-red); border-radius: 2px; background: var(--rs-white); } .rs-tier-panel { display: none; padding: 1.5rem 1.5rem 1.75rem; } .rs-tier-panel__price { font-family: var(--rs-font-heading); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; color: var(--rs-red); } .rs-tier-panel__price span { font-size: 1rem; color: var(--rs-teal); letter-spacing: 0.03em; } .rs-tier-panel__allow { font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.03em; color: var(--rs-teal); margin: 0.6rem 0 0.4rem; } .rs-tier-panel ul { margin: 0.5rem 0 1.1rem; } /* Selected-tier styling: active tab + matching panel. Radios precede the tabs/panels so ~ reaches both. */ #rs-tier-recovery:checked ~ .rs-tier-tabs label[for="rs-tier-recovery"], #rs-tier-bronze:checked ~ .rs-tier-tabs label[for="rs-tier-bronze"], #rs-tier-silver:checked ~ .rs-tier-tabs label[for="rs-tier-silver"], #rs-tier-gold:checked ~ .rs-tier-tabs label[for="rs-tier-gold"], #rs-tier-platinum:checked ~ .rs-tier-tabs label[for="rs-tier-platinum"] { background: var(--rs-teal); color: var(--rs-beige); border-color: var(--rs-teal); } #rs-tier-gold:checked ~ .rs-tier-tabs label[for="rs-tier-gold"] .rs-tier-flag, .rs-tier-tabs label[for="rs-tier-gold"] .rs-tier-flag { color: inherit; } #rs-tier-recovery:checked ~ .rs-tier-panels .rs-tier-panel--recovery, #rs-tier-bronze:checked ~ .rs-tier-panels .rs-tier-panel--bronze, #rs-tier-silver:checked ~ .rs-tier-panels .rs-tier-panel--silver, #rs-tier-gold:checked ~ .rs-tier-panels .rs-tier-panel--gold, #rs-tier-platinum:checked ~ .rs-tier-panels .rs-tier-panel--platinum { display: block; } /* ============================================================ n. GALLERY STRIP (.rs-gallery-strip) 2–3 images in a row, equal height, brand red top rule. Stacks to a single column on the smallest screens. ============================================================ */ .rs-gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 2px solid var(--rs-red); margin-block: 0; } .rs-gallery-strip img { display: block; width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; } .rs-gallery-strip.is-2up { grid-template-columns: repeat(2, 1fr); } @media (max-width: 600px) { .rs-gallery-strip, .rs-gallery-strip.is-2up { grid-template-columns: 1fr 1fr; } .rs-tier-tabs label { flex: 0 0 auto; } } /* ============================================================ ROUND 3 (final) — Monique + independent designer, 1 Aug 2026 ============================================================ */ /* 1. Pennant device: hero H1 + the LEAD heading of each colour band (one per section) */ .pennant::before { display: none !important; } h1.pennant::before, .rs-hero .pennant::before, .wp-block-group > .pennant:first-child::before, .band-teal .pennant:first-of-type::before, .band-beige .pennant:first-of-type::before, .band-red .pennant:first-of-type::before { display: inline-block !important; } /* 2. Carplates stays on H1+H2 (style guide), aggression fixed by SIZE; Formular from H3 down */ :where(.wp-block-post-content) h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: 0.02em; } :where(.wp-block-post-content) :where(h3, h4, h5, h6) { font-family: var(--wp--preset--font-family--body); font-weight: 500; text-transform: none; letter-spacing: 0; } .rs-hero .wp-block-heading { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; } /* 3. Double-heading fix: hide template post title when the page opens with a hero */ body:has(.rs-hero) .wp-block-post-title, .wp-site-blocks:has(.rs-hero) .wp-block-post-title { display: none; } /* 4. Curriculum: 2-col open card grid on desktop; accordion behaviour on mobile only (JS assist) */ .rs-num-accordion { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } details.rs-num-block { background: rgba(255,255,255,0.07); border-left: 4px solid var(--wp--preset--color--rs-red, #EF4343); margin: 0; } .band-beige details.rs-num-block, .wp-block-post-content > .rs-num-accordion details.rs-num-block { background: var(--wp--preset--color--rs-white, #fff); } details.rs-num-block summary { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; list-style: none; cursor: default; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem; color: inherit; } details.rs-num-block summary::-webkit-details-marker { display: none; } details.rs-num-block summary .rs-num { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--rs-red, #EF4343); font-size: 1.7rem; line-height: 1; min-width: 2.4rem; } details.rs-num-block summary::after { content: none; margin-left: auto; font-size: 1.4rem; font-weight: 300; color: var(--wp--preset--color--rs-red, #EF4343); } details.rs-num-block .rs-num-body { padding: 0 1.1rem 1rem 4.4rem; } details.rs-num-block .rs-num-body p { margin: 0; font-weight: 300; } @media (max-width: 781px) { .rs-num-accordion { grid-template-columns: 1fr; gap: 0.5rem; } details.rs-num-block summary { cursor: pointer; } details.rs-num-block summary::after { content: "+"; } details.rs-num-block[open] summary::after { content: "\2212"; } details.rs-num-block .rs-num-body { padding-left: 1.1rem; } } /* 5. Intro Pack card (membership page, above the picker) */ .rs-intro-card { background: var(--wp--preset--color--rs-beige, #F0EDDE); border-left: 6px solid var(--wp--preset--color--rs-red, #EF4343); padding: 1.4rem 1.6rem; margin: 1.5rem 0; } .rs-intro-card h3 { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; margin: 0 0 0.4rem; color: var(--wp--preset--color--rs-teal, #253739); } .rs-intro-card p { font-weight: 300; margin: 0 0 0.9rem; } /* 6. Nav: heavier, clearer, better on mobile */ .wp-block-navigation a { font-weight: 500; font-size: 1rem; letter-spacing: 0.01em; } .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--rs-red, #EF4343); } .wp-block-navigation .wp-block-navigation__submenu-container { background: var(--wp--preset--color--rs-teal, #253739) !important; border: none; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 0.4rem 0; min-width: 240px; } .wp-block-navigation .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--rs-beige, #F0EDDE) !important; padding: 0.55rem 1.1rem; font-size: 0.95rem; } .wp-block-navigation .wp-block-navigation__submenu-container a:hover { color: var(--wp--preset--color--rs-red, #EF4343) !important; } .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--rs-teal, #253739) !important; padding: 4rem 1.5rem 2rem; } .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--rs-beige, #F0EDDE) !important; font-size: 1.25rem; font-weight: 500; padding: 0.6rem 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; box-shadow: none; padding-left: 1rem; } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; } /* 7. Header: Memberships primary + Book outline */ .pass-button .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid var(--wp--preset--color--rs-beige, #F0EDDE); color: var(--wp--preset--color--rs-beige, #F0EDDE); } .pass-button .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--rs-beige, #F0EDDE); color: var(--wp--preset--color--rs-teal, #253739); } /* ============================================================ Red Shed 2026 — DESIGN LAYER, PASS 3 / ROUND 4 (design4.css) Loads AFTER design.css + the round-3 block (design2). Appends only — no full re-declaration of existing selectors. Sources: [BRAND] device fidelity (pennant, slash, ticks, arrow) [DESIGNER] section-rhythm movement utilities + one grid fix [UX] pass-3 punch-list P1s + the cheap listed P2s [GUTTER] folded from the temporary #rs-mobile-gutter block Plain CSS, mobile-first, no JS, no external assets. ============================================================ */ /* ============================================================ [BRAND] Device tokens Rework of --rs-chevron ONLY: the pennant is a SOLID filled double arrowhead, not a hairline stroke. Placement rules in design.css (.pennant::before, per-band tints) are untouched — the mark is alpha-masked so background-color still tints it. ============================================================ */ :root { --rs-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M2%201.5%20L11%208%20L2%2014.5%20Z%20M12.5%201.5%20L21.5%208%20L12.5%2014.5%20Z'%20fill='black'/%3E%3C/svg%3E"); /* single directional pennant — one solid arrow, wayfinding */ --rs-pennant-1: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M3%201.5%20L21%208%20L3%2014.5%20Z'%20fill='black'/%3E%3C/svg%3E"); /* red brand tick */ --rs-tick: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2013%20L10%2019%20L20%205'%20fill='none'%20stroke='black'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ [BRAND] Diagonal slash-line accent — "the lines". One short run of red diagonal strokes. Discipline: ONE per page, as a divider / top-right corner accent, never a full background. ------------------------------------------------------------ */ .rs-slash { height: 1.1rem; margin: 0 0 1.25rem; background-image: repeating-linear-gradient(-45deg, var(--rs-red) 0 3px, transparent 3px 11px); background-repeat: no-repeat; background-size: 7.5rem 100%; background-position: right center; } .band-teal .rs-slash, .band-red .rs-slash { background-image: repeating-linear-gradient(-45deg, var(--rs-beige) 0 3px, transparent 3px 11px); } /* ------------------------------------------------------------ [BRAND] Red tick bullets for inclusion lists. Applied via the .rs-ticks class, and auto-applied to the tier-picker feature lists (definitionally inclusion lists) so no markup edit is needed there. Alpha-masked SVG tinted brand red. ------------------------------------------------------------ */ ul.rs-ticks, .rs-tier-panel ul { list-style: none; padding-left: 0; margin-left: 0; } ul.rs-ticks li, .rs-tier-panel ul li { position: relative; padding-left: 1.7em; margin-bottom: 0.4em; } ul.rs-ticks li::before, .rs-tier-panel ul li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.05em; height: 1.05em; background-color: var(--rs-red); -webkit-mask: var(--rs-tick) center / contain no-repeat; mask: var(--rs-tick) center / contain no-repeat; } /* ------------------------------------------------------------ [BRAND] Single directional pennant for wayfinding links (the four category doors / primary "go here" links). Cheap: add .rs-doorlink to the card link; a solid red arrow trails it. ------------------------------------------------------------ */ .rs-doorlink { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; font-family: var(--rs-font-heading); text-transform: uppercase; letter-spacing: 0.03em; } .rs-doorlink::after { content: ""; width: 1.1em; height: 0.72em; background-color: currentColor; -webkit-mask: var(--rs-pennant-1) center / contain no-repeat; mask: var(--rs-pennant-1) center / contain no-repeat; transition: transform 150ms ease; } .rs-doorlink:hover::after { transform: translateX(0.2em); } /* ============================================================ [DESIGNER] Movement appendix — rhythm, overlap, scale, hover. Grouped selectors (not re-declarations of design.css rules). ============================================================ */ /* Photo zoom on hover — overflow-clip wrapper + gentle scale. */ .rs-photo-band, .rs-photo-split, .rs-gallery-strip img, .rs-media-figure { overflow: hidden; } .rs-photo-band img, .rs-photo-split img, .rs-gallery-strip img, .rs-media-figure img { transition: transform .5s ease; will-change: transform; } .rs-photo-band:hover img, .rs-photo-split:hover img, .rs-gallery-strip img:hover, .rs-media-figure:hover img { transform: scale(1.04); } /* Overlap: pull a block up into the one above so sections knit. (clamp reordered to valid MIN,PREFERRED,MAX ordering.) */ .rs-overlap { margin-top: clamp(-4rem, -4vw, -2.5rem); position: relative; z-index: 2; } /* Stat row — big Carplates numerals against small labels. */ .rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; margin-block: var(--rs-flow); } .rs-stat__n { font-family: var(--rs-font-heading); font-size: clamp(2.6rem, 8vw, 4rem); line-height: .85; color: var(--rs-red); } .rs-stat__l { font-family: var(--rs-font-body); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: currentColor; margin-top: .3rem; } @media (max-width: 600px) { .rs-stats { grid-template-columns: 1fr 1fr; } } /* Display pull-quote — oversized Carplates, calm colour per band. */ .rs-pullquote { max-width: 22ch; margin-inline: auto; text-align: center; } .rs-pullquote p { font-family: var(--rs-font-heading); text-transform: uppercase; font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.05; color: var(--rs-teal); } .band-teal .rs-pullquote p { color: var(--rs-beige); } .band-red .rs-pullquote p { color: var(--rs-white); } /* [DESIGNER] Grid fix: numbered blocks shipped 1fr-only in design2; open them to 2-up on wider screens (the "1fr stack"). */ @media (min-width: 600px) { .rs-num-blocks { grid-template-columns: 1fr 1fr; } } /* ============================================================ [UX] Pass-3 punch list — P1 first, then the listed cheap P2s. ============================================================ */ /* [P1] Restore keyboard focus on the tier picker. design.css killed the ring with outline:none; put a visible red ring on the label of the focused radio. #id specificity + later source beats the removal rule. */ #rs-tier-recovery:focus-visible ~ .rs-tier-tabs label[for="rs-tier-recovery"], #rs-tier-bronze:focus-visible ~ .rs-tier-tabs label[for="rs-tier-bronze"], #rs-tier-silver:focus-visible ~ .rs-tier-tabs label[for="rs-tier-silver"], #rs-tier-gold:focus-visible ~ .rs-tier-tabs label[for="rs-tier-gold"], #rs-tier-platinum:focus-visible ~ .rs-tier-tabs label[for="rs-tier-platinum"] { outline: 3px solid var(--rs-red); outline-offset: 2px; } /* [P1] Global visible focus for keyboard users (buttons, nav, links, summary, inputs). */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--rs-red); outline-offset: 2px; } /* [P1] Tier-tab scroll clue: x-snap + right-edge fade so users know the strip scrolls and more tiers sit off-screen. Distinct selector (.rs-tier-picker .rs-tier-tabs) — no design.css dup. */ .rs-tier-picker .rs-tier-tabs { scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .rs-tier-picker .rs-tier-tabs label { scroll-snap-align: center; } /* [P1] Tier-panel fade-swap — the newly shown panel animates in (display:none can't tween, but the reveal restarts this). */ .rs-tier-panels > .rs-tier-panel { animation: rs-fade 220ms ease; } @keyframes rs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* [P1/P2] Button press feedback + unified transitions. */ .wp-block-button__link, .rs-tier-tabs label { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 80ms ease; } .wp-block-button__link:active { transform: translateY(1px); } /* [P1] Nav touch targets >= 44px on mobile + roomier tier tabs. Matches design.css descendant specificity, lands later. */ @media (max-width: 781px) { .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.75rem; min-height: 44px; display: flex; align-items: center; } .rs-tier-tabs label { padding: 0.85rem 1.1rem; } } /* [P1] prefers-reduced-motion — honour it in code (she banned gimmicks). Kills durations, freezes the photo zoom. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .rs-photo-band img, .rs-photo-split img, .rs-gallery-strip img, .rs-media-figure img { transition: none; } .rs-photo-band:hover img, .rs-photo-split:hover img, .rs-gallery-strip img:hover, .rs-media-figure:hover img { transform: none; } .rs-doorlink:hover::after { transform: none; } } /* ============================================================ [GUTTER] Folded from the temporary