/* ═══════════════════════════════════════════════════════════════ HayfishAI · Accessibility preferences layer The defaults in style.css are already accessibility-native: warm dark grey background, lifted off-white foreground, body line-height 1.65, system cursor, focus rings, skip link, animations that respect `prefers-reduced-motion`, body weight ≥400. This file is for the four genuinely personal preferences that can't be inferred from the OS: 1. Higher contrast — for users who want pure white-on-black 2. Larger text — for users who don't use browser zoom 3. Reduce motion — manual override (auto already respects OS) 4. Readable font — Atkinson Hyperlegible All toggles set a `data-a11y-*` attribute on ; CSS responds. ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1. CONTRAST · HIGHER For users who want maximum contrast — pure white on pure black. The default warm-grey palette is already AA/AAA across the board, but some users need or prefer more. ───────────────────────────────────────────────────────────── */ html[data-a11y-contrast="higher"]{ --bg-0:#000000; --bg-1:#050505; --bg-2:#0b0b0c; --bg-3:#121214; --bg-4:#1a1a1d; --ink-1:#ffffff; --ink-2:#f0f0f0; --ink-3:#cfcfcf; --ink-4:#a8a8a8; --line-1:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24); --line-3:rgba(255,255,255,.40); } html[data-a11y-contrast="higher"] body{ background: var(--bg-0); /* drop the soft radial gradients */ } html[data-a11y-contrast="higher"] .noise, html[data-a11y-contrast="higher"] .vignette, html[data-a11y-contrast="higher"] .atmosphere{ display: none !important; } /* Flatten gradient-clipped emphasis to solid lime so no part of a glyph dips below AA. */ html[data-a11y-contrast="higher"] :is( .hero-headline em, .page-title em, .section-title em, .cta-card h2 em, .teaser h3 em, .cell h3 em, .step h3 em, .step-detail h4 em, .value-card h3 em, .role-title em, .office .city em, .faq-item h4 em, .quote q em, .tenet h3 em, .foot-brand em, .nav-brand em ), html[data-a11y-contrast="higher"] .hero-headline .it{ background: none !important; -webkit-text-fill-color: var(--lime) !important; color: var(--lime) !important; } /* Underline links in body copy — colour alone shouldn't carry the link semantic when contrast is the user's stated need. */ html[data-a11y-contrast="higher"] :is( .section-body, .hero-sub, .page-lede, .teaser p, .cell p, .step p, .privacy-item p, .manifesto-prose, .faq-item p, .crumbs ) a{ text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* ───────────────────────────────────────────────────────────── 2. TEXT · LARGER Bumps body and UI text by ~18%. Headings are deliberately left alone — they're already huge and rescaling via em blows out layout. ───────────────────────────────────────────────────────────── */ html[data-a11y-text="large"] :is( p, li, dd, dt, label, input, textarea, select, button, .nav-links a, .foot-col a, .crumbs, .crumbs a, .meta, .tag, .role-meta, .form-help, .hero-sub, .section-body, .page-lede, .teaser p, .cell p, .step p, .value-card p, .perk p, .privacy-item p, .tenet p, .manifesto-prose p, .office .addr, .faq-item p, .lightbox-info dd, .marquee-item, .foot-tag, .foot-bot, .attribution, .hp-prompt, .hp-chip, .hp-bar ){ font-size: 1.18em !important; } html[data-a11y-text="large"] :is(.section-label, .hero-eyebrow, .page-eyebrow){ font-size: 1.10em !important; } /* ───────────────────────────────────────────────────────────── 3. MOTION · REDUCE (manual) The base stylesheet's @media(prefers-reduced-motion) already does this when the OS asks. This is the manual override for users whose OS pref isn't set, or who want to reduce motion on this site only. ───────────────────────────────────────────────────────────── */ html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html[data-a11y-motion="reduce"] .marquee-track{ animation: none !important; transform: none !important; } html[data-a11y-motion="reduce"] .reveal, html[data-a11y-motion="reduce"] .reveal-stagger > *{ opacity: 1 !important; transform: none !important; } html[data-a11y-motion="reduce"] [data-magnetic]{ transform: none !important; } html[data-a11y-motion="reduce"] .scan, html[data-a11y-motion="reduce"] .pulse, html[data-a11y-motion="reduce"] .hp-prompt .typing::after{ animation: none !important; opacity: 1 !important; } html[data-a11y-motion="reduce"] .hero-preview{ transform: none !important; } /* ───────────────────────────────────────────────────────────── 4. FONT · READABLE (Atkinson Hyperlegible) Designed by the Braille Institute for low-vision readers. Distinguishes 1/l/I and O/0. Loaded on demand by a11y.js only when this toggle is active. ───────────────────────────────────────────────────────────── */ html[data-a11y-font="readable"]{ --sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; --display: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; --serif: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; --mono: "Atkinson Hyperlegible", ui-monospace, monospace; font-feature-settings: normal !important; } /* Atkinson's stroke contrast suffers under the gradient-clip emphasis, so flatten emphasis to solid lime when this font is on. */ html[data-a11y-font="readable"] em, html[data-a11y-font="readable"] .hero-headline .it{ background: none !important; -webkit-text-fill-color: var(--lime) !important; color: var(--lime) !important; font-style: normal !important; } /* ═══════════════════════════════════════════════════════════════ PANEL UI — launcher button, slide-in card, controls ═══════════════════════════════════════════════════════════════ */ .a11y-launcher{ position: fixed; bottom: 20px; right: 20px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px 12px 14px; background: rgba(20,22,30,.85); color: var(--ink-1); border: 1px solid var(--line-3); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 6px 24px rgba(0,0,0,.4); transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .a11y-launcher:hover{ background: rgba(30,32,40,.95); border-color: var(--lime); transform: translateY(-1px); } .a11y-launcher:focus-visible{ outline: 3px solid var(--lime); outline-offset: 3px; } .a11y-launcher svg{ width: 18px; height: 18px; flex: none; } .a11y-launcher .a11y-launcher-text{ white-space: nowrap; } @media (max-width: 640px){ .a11y-launcher{ padding: 12px; } .a11y-launcher .a11y-launcher-text{ display: none; } } .a11y-backdrop{ position: fixed; inset: 0; z-index: 9001; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .a11y-backdrop.open{ opacity: 1; pointer-events: auto; } .a11y-panel{ position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 9002; background: var(--bg-1); border-left: 1px solid var(--line-2); box-shadow: -10px 0 60px rgba(0,0,0,.6); transform: translateX(110%); transition: transform .3s var(--ease-out); display: flex; flex-direction: column; } .a11y-panel.open{ transform: translateX(0); } .a11y-panel[aria-hidden="true"]{ visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s; } .a11y-panel.open[aria-hidden="false"]{ visibility: visible; transition: transform .3s var(--ease-out); } html[data-a11y-motion="reduce"] .a11y-panel{ transition: opacity .15s linear; transform: none; opacity: 0; } html[data-a11y-motion="reduce"] .a11y-panel.open{ opacity: 1; } @media (prefers-reduced-motion: reduce){ .a11y-panel{ transition: opacity .15s linear; transform: none; opacity: 0; } .a11y-panel.open{ opacity: 1; } } .a11y-panel-head{ padding: 22px 24px 16px; border-bottom: 1px solid var(--line-1); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .a11y-panel-head h2{ margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-1); } .a11y-panel-head p{ margin: 6px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 36ch; } .a11y-panel-close{ flex: none; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s; } .a11y-panel-close:hover{ background: rgba(255,255,255,.05); color: var(--ink-1); border-color: var(--ink-3); } .a11y-panel-close svg{ width: 16px; height: 16px; } .a11y-panel-body{ padding: 8px 24px 24px; overflow-y: auto; flex: 1; } .a11y-panel-body fieldset{ border: none; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line-1); } .a11y-panel-body fieldset:last-of-type{ border-bottom: none; } .a11y-panel-body legend{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; padding: 0; } .a11y-panel-body .a11y-help{ font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0 0 12px; } /* Segmented radio */ .a11y-seg{ display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--line-1); padding: 4px; border-radius: 12px; } .a11y-seg input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .a11y-seg label{ display: flex; align-items: center; justify-content: center; padding: 9px 8px; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; text-align: center; transition: background .2s, color .2s; user-select: none; } .a11y-seg label:hover{ color: var(--ink-1); background: rgba(255,255,255,.04); } .a11y-seg input:checked + label{ background: var(--lime); color: #000; font-weight: 600; } .a11y-seg input:focus-visible + label{ outline: 3px solid var(--lime); outline-offset: 3px; } /* Toggle switch */ .a11y-toggle{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; } .a11y-toggle .a11y-toggle-label{ flex: 1; } .a11y-toggle .a11y-toggle-label strong{ display: block; font-size: 14px; color: var(--ink-1); font-weight: 500; } .a11y-toggle .a11y-toggle-label small{ display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; } .a11y-toggle input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .a11y-toggle .a11y-switch{ flex: none; width: 42px; height: 24px; background: rgba(255,255,255,.10); border: 1px solid var(--line-2); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s, border-color .2s; } .a11y-toggle .a11y-switch::before{ content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--ink-2); border-radius: 50%; transition: transform .2s var(--ease), background .2s; } .a11y-toggle input:checked + .a11y-switch{ background: var(--lime); border-color: var(--lime); } .a11y-toggle input:checked + .a11y-switch::before{ transform: translateX(18px); background: #000; } .a11y-toggle input:focus-visible + .a11y-switch{ outline: 3px solid var(--lime); outline-offset: 3px; } .a11y-panel-footer{ padding: 16px 24px 24px; border-top: 1px solid var(--line-1); display: flex; gap: 10px; } .a11y-reset{ flex: 1; padding: 10px 16px; background: transparent; border: 1px solid var(--line-3); color: var(--ink-2); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .a11y-reset:hover{ background: rgba(255,255,255,.05); color: var(--ink-1); border-color: var(--ink-2); } .a11y-reset:focus-visible{ outline: 3px solid var(--lime); outline-offset: 3px; }