/* ============================================================ Accessibility — the single shared a11y stylesheet. Loaded on every web surface (landing, IDE, privacy, terms), including the static legal pages that don't load styles.css, so it re-declares the few brand vars it needs. Three parts: (1) base fixes, (2) toggle overrides keyed on , (3) the widget's own component styles. ============================================================ */ :root { --a11y-orange: #ff8a4c; --a11y-surface: #1a1a1a; --a11y-surface-2: #242424; --a11y-text: #ececec; --a11y-line: #2e2e2e; } /* ---- 1. Base fixes (apply on all pages) ------------------- */ /* Always-visible keyboard focus. Pointer users don't see it (:focus-visible). */ :focus-visible { outline: 2px solid var(--a11y-orange); outline-offset: 2px; } /* Skip link: off-screen until focused, then pinned top-left. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--a11y-orange); color: #1a1a1a; padding: 10px 16px; border-radius: 0 0 6px 0; font: 600 14px/1.4 -apple-system, system-ui, sans-serif; text-decoration: none; } .skip-link:focus { left: 0; } /* Screen-reader-only utility (visually hidden, still announced). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- 2. Toggle overrides (keyed on ) ---- */ /* Bigger text: zoom the page body. The widget mounts on , a sibling of , so it stays at its native size. zoom is supported across current Chrome/Edge/Safari/Firefox and (unlike root font-size) scales this px-based layout reliably. */ html[data-a11y-font="1"] body { zoom: 1.15; } html[data-a11y-font="2"] body { zoom: 1.3; } /* High contrast: maximise text contrast and strengthen separators. */ html[data-a11y-contrast="on"] body { background: #000; color: #fff; } html[data-a11y-contrast="on"] .muted, html[data-a11y-contrast="on"] [class*="muted"] { color: #e6e6e6 !important; } html[data-a11y-contrast="on"] a { color: #ffd9a8; } html[data-a11y-contrast="on"] input, html[data-a11y-contrast="on"] textarea, html[data-a11y-contrast="on"] select, html[data-a11y-contrast="on"] .card, html[data-a11y-contrast="on"] [class*="lp-card"], html[data-a11y-contrast="on"] [class*="lp-plan"] { border-color: #fff !important; } /* Highlight links: underline everything and outline on hover/focus. */ html[data-a11y-links="on"] a { text-decoration: underline !important; text-underline-offset: 2px; } html[data-a11y-links="on"] a:hover, html[data-a11y-links="on"] a:focus { outline: 2px solid var(--a11y-orange); outline-offset: 2px; } /* Text spacing: WCAG 1.4.12-friendly line/letter/word spacing. */ html[data-a11y-spacing="on"] body { line-height: 1.8 !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; } html[data-a11y-spacing="on"] p, html[data-a11y-spacing="on"] li { margin-bottom: 1em !important; } /* Readable font: high-legibility stack, no remote fonts (CSP-safe). */ html[data-a11y-dyslexia="on"] body, html[data-a11y-dyslexia="on"] button, html[data-a11y-dyslexia="on"] input, html[data-a11y-dyslexia="on"] textarea, html[data-a11y-dyslexia="on"] select { font-family: "Atkinson Hyperlegible", "Comic Sans MS", "Trebuchet MS", sans-serif !important; letter-spacing: 0.02em; } /* Pause animations: kill all motion. */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } /* ---- 3. Widget component styles --------------------------- */ .a11y-widget { font: 14px/1.4 -apple-system, system-ui, sans-serif; } .a11y-button { position: fixed; right: 16px; bottom: 16px; z-index: 999; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--a11y-orange); color: #1a1a1a; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); display: grid; place-items: center; } .a11y-icon { font-size: 24px; line-height: 1; } .a11y-panel { position: fixed; right: 16px; bottom: 74px; z-index: 999; width: 240px; background: var(--a11y-surface-2); color: var(--a11y-text); border: 1px solid var(--a11y-line); border-radius: 10px; padding: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); } .a11y-panel[hidden] { display: none; } .a11y-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--a11y-text); } .a11y-opts { display: grid; gap: 6px; } .a11y-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: var(--a11y-surface); color: var(--a11y-text); border: 1px solid var(--a11y-line); border-radius: 6px; padding: 9px 11px; font: inherit; cursor: pointer; } .a11y-opt::after { content: "Off"; font-size: 12px; color: #9aa3c7; } .a11y-opt[aria-pressed="true"] { border-color: var(--a11y-orange); } .a11y-opt[aria-pressed="true"]::after { content: "On"; color: var(--a11y-orange); font-weight: 700; } .a11y-opt:hover { border-color: var(--a11y-orange); } /* Bigger-text is a 3-state cycle — its label carries the state, no On/Off badge. */ .a11y-font::after { content: none; } .a11y-font[aria-pressed="true"]::after { content: none; } .a11y-reset { width: 100%; margin-top: 10px; background: transparent; color: var(--a11y-text); border: 1px solid var(--a11y-line); border-radius: 6px; padding: 8px; font: inherit; cursor: pointer; } .a11y-reset:hover { border-color: var(--a11y-orange); } /* Respect the OS-level reduced-motion preference for the widget too. */ @media (prefers-reduced-motion: reduce) { .a11y-button, .a11y-panel { transition: none; } }