/* a11y.css — accessibility + low-bandwidth presentation layer (Phase 2). All behaviour is driven by data-* attributes set on by a11y.js (persisted to localStorage). Loaded after main.css so it can override the design-token variables for high-contrast mode. */ /* ── Skip to content ─────────────────────────────────────────────────────── */ .skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--saffron,#FF6B00);color:#fff; padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none} .skip-link:focus{left:0} /* ── Visible focus for keyboard users (doesn't affect mouse via :focus-visible) ── */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid #1A7FE8;outline-offset:2px;border-radius:4px} html[data-keyboard="1"] :focus{outline:3px solid #1A7FE8;outline-offset:2px} /* ── Font scaling (scales rem-based sizing site-wide) ────────────────────── */ html[data-fontscale="1"]{font-size:108%} html[data-fontscale="2"]{font-size:118%} html[data-fontscale="3"]{font-size:131%} /* ── Dyslexia-friendly font (OpenDyslexic; only downloaded when enabled) ──── */ @font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap; src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff')} @font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap; src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff')} html[data-dyslexia="1"] body, html[data-dyslexia="1"] .site-main, html[data-dyslexia="1"] p, html[data-dyslexia="1"] li, html[data-dyslexia="1"] h1, html[data-dyslexia="1"] h2, html[data-dyslexia="1"] h3, html[data-dyslexia="1"] .c-lede, html[data-dyslexia="1"] a, html[data-dyslexia="1"] td, html[data-dyslexia="1"] th{font-family:'OpenDyslexic',Verdana,sans-serif !important;letter-spacing:.02em;word-spacing:.08em;line-height:1.7 !important} /* ── High contrast: redefine the design tokens so it cascades everywhere ──── */ html[data-contrast="1"]{ --saffron:#A33B00;--saffron-d:#7A2C00;--saffron-light:#fff0e6;--saffron-mid:#A33B00; --deep:#000;--deep-mid:#000;--sky:#0033cc;--sky-light:#e6ecff; --emerald:#006b3c;--purple:#4b0082; --cream:#ffffff;--white:#ffffff;--border:#000000;--border-dark:#000000;--text-muted:#1a1a1a; } html[data-contrast="1"] body{background:#fff;color:#000} html[data-contrast="1"] a{text-decoration:underline} html[data-contrast="1"] .c-eyebrow,html[data-contrast="1"] .sd-sub,html[data-contrast="1"] .gb-email{color:#1a1a1a !important} html[data-contrast="1"] *{box-shadow:none !important} /* ── Reduce motion ───────────────────────────────────────────────────────── */ html[data-reduce-motion="1"] *, html[data-reduce-motion="1"] *::before, html[data-reduce-motion="1"] *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* ── Low-bandwidth: hide heavy media (user opt-in for 2G/3G) ──────────────── */ html[data-lowbw="1"] img{display:none !important} html[data-lowbw="1"] video,html[data-lowbw="1"] iframe{display:none !important} html[data-lowbw="1"] [data-heavy]{display:none !important} html[data-lowbw="1"] .lowbw-note{display:block} .lowbw-note{display:none;font-size:.8rem;color:var(--text-muted);font-style:italic} /* ── Floating accessibility button + panel ───────────────────────────────── */ #a11y-fab{position:fixed;right:16px;bottom:16px;z-index:1400;width:52px;height:52px;border-radius:50%; background:var(--deep,#0A1628);color:#fff;border:2px solid #fff;box-shadow:0 6px 22px rgba(0,0,0,.28); font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center} #a11y-fab:hover{background:var(--saffron,#FF6B00)} #a11y-panel{position:fixed;right:16px;bottom:80px;z-index:1401;width:300px;max-width:calc(100vw - 32px); max-height:78vh;overflow-y:auto;background:#fff;color:#0A1628;border:1px solid #d7d9de;border-radius:16px; box-shadow:0 18px 50px rgba(10,22,40,.25);padding:16px} #a11y-panel[hidden]{display:none} .a11y-title{font-weight:800;font-size:1rem;margin:0 0 .2rem;color:#0A1628} .a11y-desc{font-size:.76rem;color:#5b6472;margin:0 0 .9rem} .a11y-group{margin-bottom:.9rem} .a11y-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#5b6472;margin-bottom:.35rem} .a11y-btns{display:flex;gap:.4rem;flex-wrap:wrap} .a11y-btn{flex:1;min-width:56px;min-height:40px;border:1.5px solid #d7d9de;background:#f7f8fa;border-radius:9px; font-size:.82rem;font-weight:600;color:#0A1628;cursor:pointer;padding:.35rem .5rem} .a11y-btn:hover{border-color:#FF6B00} .a11y-btn[aria-pressed="true"],.a11y-btn.active{background:#FF6B00;border-color:#FF6B00;color:#fff} .a11y-row{display:flex;gap:.4rem} #a11y-panel .a11y-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#5b6472;min-height:40px;min-width:40px} #a11y-install{display:none;width:100%;margin-top:.4rem;background:var(--saffron,#FF6B00);color:#fff;border:none; border-radius:9px;min-height:44px;font-weight:700;cursor:pointer} .a11y-foot{font-size:.72rem;color:#8a93a2;margin-top:.6rem;border-top:1px solid #eee;padding-top:.6rem}