/* * Rathbone 2026 — Direction D base element rules + a11y micro-utilities * ====================================================================== * * Sits between gdh-master v3 (parent) and brand-d.css (active brand * direction). Everything v3 ships canonically — buttons, cards, hero- * split, site-nav, site-footer, accordion, breadcrumb, eyebrow, * easy-read, status-pill, eligibility-panel, referral-cta, * funder-logo-strip, report-feature, timeline, mission, ways, faq, * pull-quote, sr-only, container — is consumed straight from the parent * and re-coloured / re-sized via brand-d.css token overrides. * * This file only owns: * @layer base Direction D's body / heading / paragraph / link * element rules (display-scale h1-h4 on bare elements, * bold-underlined body links, 70ch prose max-width). * @layer utilities Two Rathbone-only a11y enhancements that v3 doesn't * ship: external-link screen-reader announcement, * coarse-pointer 44px touch-target enforcement * (WCAG 2.5.5). * * Load order in functions.php: * 1. gdh-master.css (parent — v3.17.0 tokens + components) * 2. theme-layout.css (parent — header/footer scaffolding) * 3. rathbone-master.css (this file — base element rules + 2 utilities) * 4. brand-d.css (active brand — :root token overrides + custom tokens) * 5. style.css (page-scoped overrides) */ @layer base { /* ── Direction D body element rules ── Bare h1-h4 land at display size (deliberate — the home / page hero uses `.hero-split__h1` for the largest level, but section-leading bare h2 / h3 inside content should still feel editorial-large). v3's default applies prose sizes to bare h-elements; we re-point them at display sizes for Direction D's accessibility-led scale. h5 / h6 are treated as eyebrow-like utility headings — uppercase, brand-secondary, small. */ body { font-family: var(--font-body); font-size: var(--text-1); line-height: 1.65; color: var(--text-body); background: var(--bg-page); font-weight: 400; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); line-height: 1.2; letter-spacing: -0.01em; } h1 { font-size: var(--text-display-h1); font-weight: 700; } h2 { font-size: var(--text-display-h2); font-weight: 700; } h3 { font-size: var(--text-display-h3); font-weight: 700; } h4 { font-size: var(--text-display-h4); font-weight: 700; } h5, h6 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; color: var(--brand-secondary); } p, li, dd { color: var(--text-body-soft); line-height: 1.7; max-width: 70ch; } /* Utility-text paragraphs (eyebrow / signpost / preheader / lede / subheading / micro) aren't prose — drop the 70ch measure so the box fills its container and can honour a centered section header. Without this an .eyebrow in a `text-align: center` header centres its text inside a left-pinned 70ch box, reading as left-aligned. */ p[class*="eyebrow"], p.signpost, p.preheader, p.lede, p.subheading, p.micro { max-width: none; } a { color: var(--text-link); } /* Prose-link treatment — bold + underline + hover — scoped to UNCLASSED links so it can't leak into component links. A card is itself an , so a base `a { text-decoration: underline; font-weight: 700 }` would underline and embolden the WHOLE card (title, summary, status pill). Prose links are unclassed; component links (.btn, .site-nav__link, .svc-card, …) style themselves. */ a:not([class]) { font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1.5px; } a:not([class]):hover { color: var(--text-link-hover); text-decoration-color: var(--brand-accent); } } @layer utilities { /* External-link screen-reader announcement — appends "(opens in new tab)" off-screen so screen readers warn the user. v3's @layer utilities doesn't include this. */ a[target="_blank"]::after { content: " (opens in new tab)"; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Touch-target enforcement (WCAG 2.5.5) — coarse pointers get 44px minimum on small interactive surfaces v3 doesn't widen by default. */ @media (pointer: coarse) { .btn--sm, .audience-tag, .theme-tag, .page-nav__link { min-height: 44px; display: inline-flex; align-items: center; } } /* Centre the width-capped CTA paragraph. Master's `.cta-text p` sets a max-inline-size (32em) but no auto margin, so when its effective cap — the smaller of 32em and this theme's `p { max-width: 70ch }` — is narrower than the 640px .cta-section__layout, the paragraph pins LEFT and reads as off-centre beside the centred heading + buttons. 70ch resolves narrower once Atkinson Hyperlegible loads, which is why it shows on-device but not with a fallback font. (Upstream fix: master's .cta-text p should carry margin-inline: auto.) */ .cta-text p:not(.eyebrow):not(.signpost):not(.preheader) { margin-inline: auto; } /* "Sunshine on brick" — gold highlight-mark for two-or-three words inside a display heading. A hand-swiped band of brand accent behind the text; clone keeps the band intact across line wraps. Display sizes only — never on body copy. */ .text-mark { background: linear-gradient(transparent 58%, var(--brand-accent) 58% 94%, transparent 94%); padding-inline: 0.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Text-mark on the mid-teal text-heroes (the secondary/utility tier). Gold-over-teal muddies to khaki (near-opposite hues), so here the swipe is a LIGHT TEAL instead — analogous to the #3D6863 hero, so it reads as a clean tone-on-tone highlight. Heading stays WHITE (same swipe shape as the cream pages); the band is lighter than the hero so it's visible, but kept mid enough that the white glyphs hold where they cross it. */ .archive-hero .text-mark { background: linear-gradient( transparent 58%, color-mix(in srgb, var(--brand-secondary) 60%, white) 58% 94%, transparent 94%); color: inherit; /* keep the white heading colour */ padding: 0 0.05em; /* back to the swipe's inline-only padding */ border-radius: 0; } /* Section-surface utilities for composing per-page colour rhythm — the warm counterparts to master's .surface--light / --dark. Applied to
s to sequence a page's "score" (cream openings, sage air, white reading). Win over component section defaults via layer order. */ .surface--cream { background-color: var(--bg-surface-warm); } .surface--sage { background-color: var(--bg-surface-alt); } .surface--white { background-color: var(--bg-page); } } @layer components { /* Editor-authored content rhythm. `.post-body` wraps the_content() in single.php, single-opportunity.php, single-adult_service.php and single-youth_programme.php — but it had no CSS rule anywhere in the parent or the child, and master resets `p { margin: 0 }`. Every news article therefore rendered as an unbroken wall of text, with headings butted straight against the paragraph above them. Mirrors master's .flow rhythm using the same tokens rather than inventing a second scale. Deliberately NOT `.flow` itself: that also sets font-size: var(--text-prose-body), which would override the per-template body sizes already set inline (17px on news singles, 18px on programme bodies). Rhythm only, no type-size change. Rule order matters, as in master: the heading-trail rule must come after the heading-above rules so an h3 following an h2 gets the tight gap, not the section-break one. */ .post-body > * + * { margin-block-start: var(--flow-space); } .post-body > * + h2 { margin-block-start: var(--flow-space-h2); } .post-body > * + h3 { margin-block-start: var(--flow-space-h3); } .post-body > :is(h1, h2, h3, h4, h5, h6) + * { margin-block-start: var(--flow-space-tight); } .post-body ul, .post-body ol { padding-inline-start: var(--space-lg); } .post-body li + li { margin-block-start: var(--space-2xs); } /* Intro-paragraph gap. Master v3.17.0 line 4442 carries an inverted selector: `.intro-text p:not(:has(+ p))` matches the LAST paragraph of a run, so the margin lands after it instead of between paragraphs — the opposite of what its own comment says. Consecutive paragraphs therefore render with no separation at all (measured on For Adults: 0px between paragraphs, 16px trailing the last). This adds the complement — a gap on paragraphs that ARE followed by a paragraph — rather than fighting master's rule, so the two target different elements and there is no specificity contest. The :not() guards mirror master's so utility paragraphs are left alone. The leading half of the same bug (line-height only on the last paragraph) is already masked by this file's own p/li/dd rule, so it needs nothing here. (Upstream fix: canonical gdh-master is corrected in v3.21.4. Rathbone vendors v3.17.0 and the 16-release pull is deliberately deferred until after launch — v3.17.1 touched CTA centring and v3.17.2 submenu indent, both patterns this site uses heavily. Delete this rule when that pull lands.) */ .intro-text p:has(+ p):not(.eyebrow):not(.signpost):not(.preheader) { margin-block-end: var(--space-sm); } /* Hero with no featured image. Master's .hero-split__inner is a 3fr 2fr grid whose media half is a background-image at `cover`; with no image to show there is nothing to put in that column, so collapse to a single full-width text panel rather than painting a placeholder into it. Templates add this class when the post has no thumbnail. */ .hero-split--no-media .hero-split__inner { grid-template-columns: 1fr; } /* SVG logo sizing. v3's .site-nav__logo / .site-footer__logo use block-size:auto + max-block-size:48px — fine for a raster PNG (concrete intrinsic px) but an SVG that carries only a viewBox (no width/height on ) collapses to 0×0 under auto sizing. Pin an explicit height; width follows the viewBox aspect ratio. */ .site-nav__logo, .site-footer__logo { block-size: 44px; max-block-size: none; inline-size: auto; } /* News-card photo crop fix. Master puts aspect-ratio: 4/3 on .news-card__photo, but aspect-ratio is only a PREFERRED size — the in-flow img's automatic minimum size lets portrait images (e.g. event posters) stretch the box taller, so card photos rendered at whatever ratio the upload happened to be. Absolutely positioning the media inside the frame (master already sets position: relative + overflow: clip) makes the 4/3 crop a hard constraint; object-fit: cover from master handles the crop. (Upstream fix: master should ship this on .news-card__photo's children.) */ .news-card__photo > img, .news-card__photo > div { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } /* Nav dropdown indent fix. Master's .site-nav__submenu resets margin, list-style and padding-BLOCK but never padding-inline, so the