/* ========================================================================== TinkyTown Accessibility Layer — a11y.css Target: WCAG 2.1 AAA where practical, AA everywhere. Section 508 / EN 301 549 / ADA Title III (28 CFR § 36.303) compliant. -------------------------------------------------------------------------- This file is the visual/CSS half of the accessibility system. It is paired with /js/a11y.js which toggles the data-attributes on . ========================================================================== */ /* ---------- Root tokens ---------- */ :root { --a11y-amber: #e8a33d; --a11y-amber-hot: #ffaa00; --a11y-bg: #0d0b10; --a11y-panel-bg: #15121b; --a11y-panel-border: #2a2332; --a11y-text: #f5f2ea; --a11y-muted: #b9b1a3; --a11y-focus: #e8a33d; --a11y-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); --a11y-radius: 14px; --a11y-z: 2147483000; /* sit above everything site-owned, below browser UI */ } /* ========================================================================== 1. Skip link — first tab stop on every page (WCAG 2.4.1) ========================================================================== */ .a11y-skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: calc(var(--a11y-z) + 10); background: var(--a11y-amber); color: #111; padding: 12px 18px; font-weight: 700; border-radius: 0 0 10px 10px; text-decoration: none; font-family: "General Sans", system-ui, -apple-system, sans-serif; } .a11y-skip:focus, .a11y-skip:focus-visible { position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: auto; height: auto; outline: 3px solid #fff; outline-offset: 2px; } /* ========================================================================== 2. Focus rings — never remove, always amber, AAA contrast on dark bg ========================================================================== */ *:focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 2px !important; border-radius: 4px; } /* kill any lingering "outline: none" pattern, but only when keyboard-focused */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(232, 163, 61, 0.25) !important; } /* ========================================================================== 3. Floating open button + panel shell ========================================================================== */ .a11y-fab { position: fixed; right: 18px; bottom: 96px; /* sit above any existing amber floating button */ width: 56px; height: 56px; border-radius: 50%; border: 2px solid #111; background: var(--a11y-amber); color: #111; font-size: 26px; line-height: 1; cursor: pointer; z-index: var(--a11y-z); box-shadow: var(--a11y-shadow); display: flex; align-items: center; justify-content: center; transition: transform 160ms ease, box-shadow 160ms ease; font-family: system-ui, sans-serif; } .a11y-fab:hover { transform: scale(1.06); } .a11y-fab:active { transform: scale(0.96); } .a11y-panel { position: fixed; right: 18px; bottom: 164px; width: min(380px, calc(100vw - 36px)); max-height: calc(100vh - 200px); overflow-y: auto; background: var(--a11y-panel-bg); color: var(--a11y-text); border: 1px solid var(--a11y-panel-border); border-radius: var(--a11y-radius); box-shadow: var(--a11y-shadow); z-index: var(--a11y-z); padding: 18px 18px 22px; font-family: "General Sans", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; display: none; } .a11y-panel[data-open="true"] { display: block; } .a11y-panel h2 { font-family: "Fraunces", Georgia, serif; font-size: 20px; margin: 0 0 4px; color: var(--a11y-amber); } .a11y-panel p.a11y-sub { margin: 0 0 14px; color: var(--a11y-muted); font-size: 13px; } .a11y-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 8px; background: transparent; border: 1px solid var(--a11y-panel-border); color: var(--a11y-text); cursor: pointer; font-size: 18px; line-height: 1; } .a11y-close:hover { background: rgba(255,255,255,0.06); } /* ---------- Group ---------- */ .a11y-group { border-top: 1px solid var(--a11y-panel-border); padding: 12px 0; } .a11y-group:first-of-type { border-top: none; padding-top: 4px; } .a11y-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--a11y-muted); margin: 0 0 8px; } /* ---------- Button row (segmented control) ---------- */ .a11y-row { display: flex; gap: 6px; flex-wrap: wrap; } .a11y-btn { flex: 1 1 auto; min-height: 40px; /* WCAG 2.5.5 target size */ min-width: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--a11y-panel-border); background: #1d1824; color: var(--a11y-text); cursor: pointer; font-size: 14px; font-family: inherit; text-align: center; transition: background 120ms ease, border-color 120ms ease; } .a11y-btn:hover { background: #251e2e; } .a11y-btn[aria-pressed="true"] { background: var(--a11y-amber); color: #111; border-color: var(--a11y-amber); font-weight: 700; } .a11y-btn.wide { flex-basis: 100%; } /* ---------- Range slider ---------- */ .a11y-range { width: 100%; accent-color: var(--a11y-amber); } .a11y-range-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--a11y-muted); margin-bottom: 4px; } /* ---------- Select ---------- */ .a11y-select { width: 100%; min-height: 40px; padding: 8px 10px; background: #1d1824; color: var(--a11y-text); border: 1px solid var(--a11y-panel-border); border-radius: 10px; font-family: inherit; font-size: 14px; } /* ---------- Reset button ---------- */ .a11y-reset { margin-top: 10px; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #5a2a2a; background: transparent; color: #ff8a8a; cursor: pointer; font-family: inherit; font-size: 14px; } .a11y-reset:hover { background: rgba(255, 80, 80, 0.08); } /* ---------- Visually-hidden live region ---------- */ .a11y-sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== 4. Font size scale — applied to Uses rem scaling on so the whole document responds. ========================================================================== */ html[data-a11y-font="md"] { font-size: 100%; } /* 16px */ html[data-a11y-font="lg"] { font-size: 112.5%; } /* 18px visual ~ 125% */ html[data-a11y-font="xl"] { font-size: 125%; } html[data-a11y-font="xxl"] { font-size: 150%; } /* Body-level font scaling as a fallback if rem-based layouts are rigid */ html[data-a11y-font="lg"] body { font-size: 1.125rem; } html[data-a11y-font="xl"] body { font-size: 1.25rem; } html[data-a11y-font="xxl"] body { font-size: 1.5rem; } /* ========================================================================== 5. High contrast / inverted — WCAG 1.4.6 AAA (7:1) ========================================================================== */ html[data-a11y-contrast="high"] body, html[data-a11y-contrast="high"] { background: #000 !important; color: #fff !important; } html[data-a11y-contrast="high"] * { background-image: none !important; text-shadow: none !important; box-shadow: none !important; } html[data-a11y-contrast="high"] a, html[data-a11y-contrast="high"] a * { color: var(--a11y-amber-hot) !important; text-decoration: underline !important; } html[data-a11y-contrast="high"] button, html[data-a11y-contrast="high"] .btn, html[data-a11y-contrast="high"] [role="button"] { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html[data-a11y-contrast="high"] button:hover, html[data-a11y-contrast="high"] .btn:hover { background: #fff !important; color: #000 !important; } html[data-a11y-contrast="high"] input, html[data-a11y-contrast="high"] textarea, html[data-a11y-contrast="high"] select { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* Toolbar stays usable in high contrast */ html[data-a11y-contrast="high"] .a11y-panel { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html[data-a11y-contrast="high"] .a11y-btn[aria-pressed="true"] { background: var(--a11y-amber-hot) !important; color: #000 !important; } /* Inverted — monochrome invert hack, cheap and fast */ html[data-a11y-contrast="inverted"] body { filter: invert(1) hue-rotate(180deg); background: #fff !important; } html[data-a11y-contrast="inverted"] img, html[data-a11y-contrast="inverted"] video, html[data-a11y-contrast="inverted"] picture, html[data-a11y-contrast="inverted"] svg, html[data-a11y-contrast="inverted"] [style*="background-image"] { filter: invert(1) hue-rotate(180deg); /* re-invert media */ } html[data-a11y-contrast="inverted"] .a11y-panel, html[data-a11y-contrast="inverted"] .a11y-fab { filter: invert(1) hue-rotate(180deg); /* keep toolbar readable */ } /* ========================================================================== 6. Reader mode (blind-friendly / low-vision) ========================================================================== */ html[data-a11y-mode="reader"] body { line-height: 1.9 !important; letter-spacing: 0.02em !important; word-spacing: 0.06em !important; font-weight: 500 !important; } html[data-a11y-mode="reader"] p, html[data-a11y-mode="reader"] li, html[data-a11y-mode="reader"] blockquote, html[data-a11y-mode="reader"] dd { max-width: 70ch !important; line-height: 1.9 !important; } html[data-a11y-mode="reader"] h1, html[data-a11y-mode="reader"] h2, html[data-a11y-mode="reader"] h3, html[data-a11y-mode="reader"] h4 { font-weight: 800 !important; line-height: 1.25 !important; } html[data-a11y-mode="reader"] a { text-decoration: underline !important; text-underline-offset: 3px; } /* hide purely decorative imagery */ html[data-a11y-mode="reader"] img[alt=""], html[data-a11y-mode="reader"] [role="presentation"], html[data-a11y-mode="reader"] [aria-hidden="true"] { display: none !important; } /* flatten pull-quotes and fancy display treatments */ html[data-a11y-mode="reader"] blockquote, html[data-a11y-mode="reader"] .pullquote, html[data-a11y-mode="reader"] .fancy { background: transparent !important; border: none !important; border-left: 4px solid var(--a11y-amber) !important; padding: 8px 16px !important; font-style: normal !important; font-size: 1rem !important; } /* ========================================================================== 7. Underline-all-links toggle ========================================================================== */ html[data-a11y-links="underline"] a, html[data-a11y-links="underline"] a * { text-decoration: underline !important; text-underline-offset: 3px; } /* ========================================================================== 8. Dyslexia-friendly fonts ========================================================================== */ html[data-a11y-dys="opendyslexic"] body, html[data-a11y-dys="opendyslexic"] h1, html[data-a11y-dys="opendyslexic"] h2, html[data-a11y-dys="opendyslexic"] h3, html[data-a11y-dys="opendyslexic"] h4, html[data-a11y-dys="opendyslexic"] p, html[data-a11y-dys="opendyslexic"] button, html[data-a11y-dys="opendyslexic"] input, html[data-a11y-dys="opendyslexic"] textarea, html[data-a11y-dys="opendyslexic"] a { font-family: "OpenDyslexic", "Atkinson Hyperlegible", Verdana, sans-serif !important; letter-spacing: 0.03em !important; } html[data-a11y-dys="atkinson"] body, html[data-a11y-dys="atkinson"] h1, html[data-a11y-dys="atkinson"] h2, html[data-a11y-dys="atkinson"] h3, html[data-a11y-dys="atkinson"] h4, html[data-a11y-dys="atkinson"] p, html[data-a11y-dys="atkinson"] button, html[data-a11y-dys="atkinson"] input, html[data-a11y-dys="atkinson"] textarea, html[data-a11y-dys="atkinson"] a { font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important; letter-spacing: 0.01em !important; } /* ========================================================================== 9. Reading line / paragraph highlight (dyslexia aid) ========================================================================== */ html[data-a11y-readline="on"] p:hover, html[data-a11y-readline="on"] li:hover, html[data-a11y-readline="on"] h1:hover, html[data-a11y-readline="on"] h2:hover, html[data-a11y-readline="on"] h3:hover, html[data-a11y-readline="on"] h4:hover, html[data-a11y-readline="on"] blockquote:hover, html[data-a11y-readline="on"] td:hover { background: rgba(232, 163, 61, 0.14) !important; outline: 1px dashed rgba(232, 163, 61, 0.5); border-radius: 4px; } /* ========================================================================== 10. Reduced motion (WCAG 2.3.3 AAA) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 11. Print-friendly (a11y concern — hides toolbar) ========================================================================== */ @media print { .a11y-fab, .a11y-panel, .a11y-skip { display: none !important; } } /* ========================================================================== 12. Forced-colors (Windows High Contrast) compatibility ========================================================================== */ @media (forced-colors: active) { .a11y-btn[aria-pressed="true"] { background: Highlight !important; color: HighlightText !important; border: 2px solid HighlightText !important; } *:focus-visible { outline: 3px solid Highlight !important; } }