/* * Rathbone 2026 — Brand Direction D: Refined incumbent * ===================================================== * * Token overrides for gdh-master v3. Loaded after rathbone-master.css so * its :root overrides take effect on everything in the cascade. * * v3 contract: HSL component decomposition is gone — derivations now use * Relative Color Syntax (`oklch(from var(--brand-primary) ...)`) in master. * Brand-level only needs to declare each role colour once. * * Accessibility: * #1e4741 on white 10.47:1 AAA * #1e4741 on #FFC845 6.78:1 AA normal / AAA large * #FFC845 on white 1.54:1 ✗ — yellow is FILL ONLY */ @layer brand { :root { /* ── Brand spine — three roles ── */ --brand-primary: #1e4741; /* deep forest-teal — big fills */ --brand-secondary: #3D6863; /* counterpoint */ --brand-accent: #FFC845; /* golden yellow — fill only */ /* ── Type families ── */ --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; --font-display: 'Instrument Sans', 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; /* ── Type scale — accessibility-led ── 18px body baseline at wide viewports. Scale ratio left at v3 default (1.2 minor third); individual display heading levels are overridden below to preserve Direction D's deliberate clamp values. */ --type-base-min: 1rem; /* 16px narrow */ --type-base-max: 1.125rem; /* 18px wide — body baseline */ /* Display-heading overrides (preserve Direction D's tuned clamps) */ --text-display-h1: clamp(2.5rem, 1.75rem + 3.4vw, 4rem); /* 40 → 64px */ --text-display-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem); /* 30 → 44px */ --text-display-h3: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); /* 24 → 30px */ /* ── Color scheme ── Follow OS preference. v3's surface + text tokens use light-dark() pairs that flip automatically: surfaces become brand-tinted near- black in dark mode, text becomes near-white. Rathbone-specific tokens below use the same light-dark() pattern to stay coherent. */ color-scheme: light dark; /* ── Surfaces: deferred to v3 defaults ── v3 ships `light-dark(white, oklch(from var(--brand-primary) 14% ...))` for --bg-page, --bg-surface, --bg-surface-alt — pure white in light, brand-primary-tinted near-black in dark. No overrides needed here. */ /* ── Text — Direction D forest-teal in light, soft pale-teal in dark ── Light mode preserves the warm forest-teal voice that defines the brand. Dark mode lifts the same hue to ~88% lightness so headings and body stay teal-tinted (not pure neutral) for brand coherence. */ --text-heading: light-dark(#1e4741, oklch(from #1e4741 92% 0.03 h)); /* headings keep the brand teal */ --text-body: light-dark(#1e2724, oklch(from #1e4741 88% 0.035 h)); /* near-black, faint teal bias — not the brand hue */ --text-muted: light-dark(#5A7570, oklch(from #1e4741 70% 0.025 h)); /* ── Rathbone-specific tokens (not in v3 master) ── Consumed by rathbone-master.css; declared here so brand-d is the single point where Rathbone surface/text colours are set. */ --brand-soft: var(--bg-surface-alt); /* alias, follows light/dark with surface */ --bg-surface-warm: light-dark(#FBF8F3, oklch(from var(--brand-primary) 22% 0.018 calc(h + 30))); /* warm cream → warm-tinted dark */ /* "Sunshine on brick": alternate sections breathe SAGE (a whisper of the brand green), not master's default cool grey — the cool grey fought the warm direction. Derived from the primary so it stays one family; dark mode gets the brand-tinted deep surface. */ --bg-surface-alt: light-dark(oklch(from var(--brand-primary) 96% 0.012 h), oklch(from var(--brand-primary) 20% 0.02 h)); --bg-surface-dark: #1e4741; /* fixed-dark zone in markup — does NOT flip */ --text-on-dark: #ffffff; /* used inside fixed-dark surfaces */ --text-body-soft: light-dark(#39433f, oklch(from var(--brand-primary) 82% 0.04 h)); /* paragraph text: dark neutral grey, whisper of teal */ --text-heading-sub: light-dark(#2D5751, oklch(from var(--brand-primary) 82% 0.04 h)); --text-link: light-dark(#1e4741, oklch(from var(--brand-primary) 78% 0.06 h)); --text-link-hover: light-dark(#B88A1F, #FFC845); /* darkened-yellow → bright yellow in dark */ --neutral-200: light-dark(#e4e4e7, oklch(28% 0 0)); /* ── Auxiliary / prose / signpost scale knobs ── Inherited from the v2-era master that the child was originally built against. v3 ships its own --text-prose-h* and --text-card-h* scales, but these "size-relative" knobs (em / clamp variants tuned to a different aesthetic) are still consumed by rathbone-master.css's eyebrow / signpost / prose components — preserved here so the child library renders the same regardless of brand. */ --text-aux-size-micro: 0.85em; --text-aux-size-signpost: 0.875em; --text-prose-size-h3: clamp(1.25rem, 1.1667rem + 0.4167vw, 1.5rem); --text-prose-size-h6: 1rem; --text-util-signpost-size: 1rem; --text-util-signpost-weight: 700; --text-util-signpost-lh: 1.4; --text-util-signpost-ls: 0.15em; --text-util-signpost-mb: 0.25rem; --text-readable-max-width: 65ch; /* ── Layout / component knobs ── */ --space-struct-y-display: clamp(5rem, 8vw + 2rem, 9rem); --svc-photo-w: 160px; --dot-size-md: 8px; --grid-gap-3up: var(--space-lg); /* ── Buttons — Direction D overrides ── v3 defaults: --btn-primary-text = var(--text-on-brand) = white. On our yellow accent that fails (1.54:1). Override to dark teal text. v3's auto-derived --btn-primary-bg-hover via oklch(from accent l-0.08) goes too dark for our golden yellow — pin a specific lighter hover. .btn--tint defaults derive from --brand-accent — yellow tint would fight with yellow CTAs, so re-point at sage-teal-on-primary. */ --btn-primary-text: var(--brand-primary); --btn-primary-bg-hover: #FFD773; --btn-primary-border: var(--brand-accent); --btn-primary-border-hover: #FFD773; --btn-tint-bg: light-dark( color-mix(in oklch, var(--brand-primary) 8%, transparent), color-mix(in oklch, white 12%, transparent) ); --btn-tint-text: light-dark(#1e4741, oklch(from #1e4741 88% 0.035 h)); --btn-tint-border: light-dark( color-mix(in oklch, var(--brand-primary) 18%, transparent), color-mix(in oklch, white 25%, transparent) ); --btn-tint-bg-hover: light-dark( color-mix(in oklch, var(--brand-primary) 14%, transparent), color-mix(in oklch, white 20%, transparent) ); --btn-tint-border-hover: light-dark( color-mix(in oklch, var(--brand-primary) 28%, transparent), color-mix(in oklch, white 35%, transparent) ); --btn-text-color: light-dark(#1e4741, oklch(from #1e4741 88% 0.035 h)); --btn-text-color-hover: var(--text-link-hover); /* ── Focus ring ── v3 default --focus-ring-color is the brand accent (yellow). On light page bg yellow rings sit at ~1.5:1 against white — only visible via the offset gap. Flip so light mode uses forest-teal (high contrast on white), dark mode keeps yellow (high contrast on near-black). */ --focus-ring-color: light-dark(#1e4741, #FFC845); } } /* ── Component-level overrides (sit in @layer overrides, after v3 components) ── v3's `.site-nav__cta--desktop / --mobile` rule applies `color: var(--brand-primary-text)` which is auto-derived to be readable on the PAGE bg. But the CTA button has a YELLOW (brand-accent) bg, not page bg — so in dark mode --brand-primary-text becomes pale teal and reads ~1:1 against yellow. Pin text to brand-primary directly (the same logic Direction D applies to .btn--primary). */ @layer overrides { .site-nav__cta--desktop, .site-nav__cta--mobile { color: var(--brand-primary); } /* Hover parity with .btn--primary. Master's nav-CTA hover darkens the yellow to --brand-accent-strong (the accent forced to 35% L — a dark amber), but every .btn--primary hover LIGHTENS to --btn-primary-bg-hover (#FFD773). The Donate button is a primary CTA, so it should behave like one: reuse the same hover token (stays in sync if the primary is retuned) and keep the dark-teal label. */ .site-nav__cta--desktop:hover, .site-nav__cta--mobile:hover { background-color: var(--btn-primary-bg-hover); color: var(--brand-primary); } }