. */ .pull-quote { border-left: 2px solid var(--ochre); padding: 4px 0 4px 28px; margin-bottom: 36px; } .pull-quote p { font-family: 'Source Serif 4', serif; font-weight: 400; font-style: italic; font-size: 1.375rem; line-height: 1.48; color: var(--ink); text-wrap: pretty; } /* ── WAVE SEPARATORS ────────────────────────────────────────────── */ .wave-sep { display: block; width: 100%; line-height: 0; overflow: hidden; } .wave-sep svg { width: 100%; height: 48px; display: block; } .svc-wave { display: block; width: 100%; line-height: 0; overflow: hidden; } .svc-wave svg { width: 100%; height: 28px; display: block; } /* ── TINTED BANDS (who-section) ────────────────────────────────── Editorial pull-out bands with feathered wave edges. Ochre tint by default; --periwinkle variant available. ─────────────────────────────────────────────────────────────── */ .who-section { padding: var(--sv) 0; background: rgba(201,154,44,calc(var(--ochre-pct) * 0.01)); position: relative; overflow: visible; } .who-section > .wrap { position: relative; z-index: 2; } .who-section::before { content: ''; display: block; position: absolute; top: -48px; left: 0; width: 100%; height: 48px; background: rgba(201,154,44,calc(var(--ochre-pct) * 0.01)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,24 C160,4 320,44 480,24 C640,4 800,44 960,24 C1120,4 1280,44 1440,24 L1440,48 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,24 C160,4 320,44 480,24 C640,4 800,44 960,24 C1120,4 1280,44 1440,24 L1440,48 Z' fill='black'/%3E%3C/svg%3E"); mask-size: 100% 100%; pointer-events: none; } .who-section::after { content: ''; display: block; position: absolute; bottom: -48px; left: 0; width: 100%; height: 48px; background: rgba(201,154,44,calc(var(--ochre-pct) * 0.01)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,24 C160,44 320,4 480,24 C640,44 800,4 960,24 C1120,44 1280,4 1440,24 L1440,0 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,24 C160,44 320,4 480,24 C640,44 800,4 960,24 C1120,44 1280,4 1440,24 L1440,0 Z' fill='black'/%3E%3C/svg%3E"); mask-size: 100% 100%; pointer-events: none; z-index: 1; } .who-section--periwinkle { background: rgba(123,127,212,0.10); } .who-section--periwinkle::before, .who-section--periwinkle::after { background: rgba(123,127,212,0.10); } /* ================================================================= FOOTER Grid: 2fr 1fr 1fr (brand | nav | external). 768px: brand full-width top (grid-column 1/-1), nav+external row. 480px: all single column. footer-bottom: row → column ≤480px. All links: min-height 44px. ================================================================= */ footer { background: var(--ink); padding: clamp(48px, 7vw, 72px) 0 clamp(36px, 5vw, 52px); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 52px; border-bottom: 1px solid rgba(250,248,244,0.07); } /* Use in markup — links to homepage. */ .footer-wordmark { font-family: 'Chillax', 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.025em; color: var(--cream); text-decoration: none; display: block; margin-bottom: 12px; transition: opacity 150ms ease; } a.footer-wordmark:hover, a.footer-wordmark:active { opacity: 0.85; } /* Contrast fix: --cream-muted (#A5A09A) = 7.4:1 on ink. Was cream @38% opacity → 3.9:1 — failed WCAG AA. */ .footer-tagline { font-family: 'Source Serif 4', serif; font-weight: 400; font-style: italic; font-size: 0.9375rem; color: var(--cream-muted); display: block; margin-bottom: 28px; } /* cream @50% on ink = 5.8:1 — passes AA. No change to opacity. */ .footer-contact { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.5; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: opacity 150ms ease; } .footer-contact:hover, .footer-contact:active { opacity: 0.85; } /* Contrast fix: removed opacity: 0.7. Full --periwinkle (#7B7FD4) on ink = 5.3:1 — passes AA. */ .footer-col-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--periwinkle); display: block; margin-bottom: 20px; } .footer-nav-list { list-style: none; } .footer-nav-list li + li { margin-top: 4px; } /* cream @88% on ink = 14.2:1 — passes AAA. No change needed. */ .footer-nav-list a { font-family: 'Chillax', 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--cream); text-decoration: none; opacity: 0.88; transition: opacity 150ms ease; min-height: 44px; display: inline-flex; align-items: center; } .footer-nav-list a:hover, .footer-nav-list a:active { opacity: 1; } .footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; } .footer-legal { display: flex; gap: 22px; align-items: center; } /* cream @50% on ink = 5.8:1 — passes AA. */ .footer-legal-link { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.5; text-decoration: none; transition: opacity 150ms ease; min-height: 44px; display: inline-flex; align-items: center; } .footer-legal-link:hover, .footer-legal-link:active { opacity: 1; } /* Contrast fix: opacity raised from 0.3 → 0.5 = 4.75:1 on ink. */ .footer-meta { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.5; } /* ================================================================= CTA SECTION (shared across all pages) 2-col desk → 1-col ≤768px. ================================================================= */ .cta-section { padding: clamp(64px, 10vw, 96px) 0 clamp(64px, 10vw, 104px); } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; } .cta-left .section-head { font-size: clamp(1.75rem, 5vw, 2.5rem); } .cta-right { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } /* Contrast fix: --ink-muted (#706D68) = 4.8:1 on cream. Was ink @45% opacity → 2.7:1 — failed WCAG AA. */ .cta-email { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 150ms ease; } .cta-email:hover, .cta-email:active { color: var(--ink); } /* ================================================================= FOCUS STATES — WCAG 2.4.7 (AA), 2.4.11 (WCAG 2.2 AA) All interactive elements use :focus-visible (not :focus) to suppress mouse-click rings while preserving keyboard rings. Never write outline: none without a replacement indicator. ================================================================= */ /* Default ring — cream background contexts */ :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; } /* Pill-shaped elements — inherit border-radius on ring */ .pill:focus-visible, .nav-drawer-list a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 100px; } /* Cobalt pill — cream ring */ .pill-cobalt:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 100px; } /* Nav bar context — cream ring on cobalt background */ .site-nav :focus-visible { outline: 2px solid rgba(250, 248, 244, 0.9); outline-offset: 2px; } .site-nav .nav-list a:focus-visible { background: rgba(250,248,244,0.2); border-color: rgba(250,248,244,0.35); border-radius: 100px; } .nav-toggle:focus-visible { outline: 2px solid rgba(250, 248, 244, 0.9); outline-offset: 2px; border-radius: 6px; } /* Footer context — cream ring on ink background */ footer :focus-visible { outline: 2px solid rgba(250, 248, 244, 0.9); outline-offset: 3px; } footer .footer-nav-list a:focus-visible, footer .footer-legal-link:focus-visible, footer .footer-contact:focus-visible { border-radius: 2px; } /* ================================================================= RESPONSIVE BREAKPOINTS — SHARED ================================================================= */ /* ── 768px ─────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* CTA grid: 2-col → 1-col */ .cta-grid { grid-template-columns: 1fr; gap: 36px; } /* Footer: 3-col → brand full-width, nav+external side-by-side */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 40px; } .footer-grid > div:first-child { grid-column: 1 / -1; } /* Pull quote: tighten */ .pull-quote p { font-size: 1.1875rem; } } /* ── 640px — Mobile nav + spacing ──────────────────────────────── */ @media (max-width: 640px) { /* Nav: 64px → 56px, inline links hidden, hamburger + drawer shown */ .site-nav { height: 56px; } .nav-list { display: none; } .nav-toggle { display: flex; } .nav-drawer { display: block; } /* Footer tagline: tighten gap to email below */ .footer-tagline { margin-bottom: 12px; } /* Section head */ .section-head { font-size: clamp(1.5rem, 7vw, 2rem); } /* Pull quote: tighten further */ .pull-quote p { font-size: 1.0625rem; } .pull-quote { padding-left: 18px; } } /* ── 480px — Footer single-col + footer-bottom stack ───────────── */ @media (max-width: 480px) { /* Footer: 2-col → 1-col, centred */ .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; } .footer-grid > div:first-child { grid-column: auto; } /* footer-bottom: row → column, centred */ .footer-bottom { flex-direction: column; align-items: center; gap: 12px; } } /* ================================================================= REDUCED MOTION — WCAG 2.3.3 Disables all transitions and animations for users who have enabled "Reduce Motion" in their OS accessibility settings. ================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Nav drawer: snap open/closed without max-height animation */ .nav-drawer { transition: none; } /* Hamburger bars: skip rotation animation */ .nav-toggle-bar { transition: none; } } /* ── SCROLL-TO-TOP BUTTON ─────────────────────────────────────── */ .scroll-top-btn { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--cobalt); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 9001; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .scroll-top-btn.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top-btn:hover { background: var(--cobalt-hover, #1a3fcf); } /* Hidden on desktop */ @media (min-width: 901px) { .scroll-top-btn { display: none; } }