/* * Next-Gen Chess — accessibility preferences. * Toggles are applied as classes on by a11y.js and persist in * localStorage. Everything here is opt-in and additive: with no class set the * site looks exactly as before. */ /* --- High-contrast / colorblind-safe board --------------------------------- * A grayscale board maximises luminance contrast, which is safe across all * colour-vision types, and we strengthen piece shadows + last-move outlines so * they don't rely on hue. Works with any board that uses the --sq-* / --hl-* * custom properties (projector, trainer, review, coach). */ html.a11y-cb { --sq-light: #FFFFFF; --sq-dark: #6A6A6A; --hl-last: rgba(0, 0, 0, .28); --hl-move: #0B60FF; } html.a11y-cb .sq img, html.a11y-cb .msq img { filter: drop-shadow(0 0 1px #000) drop-shadow(0 2px 2px rgba(0,0,0,.5)); } html.a11y-cb .sq.last::after, html.a11y-cb .sq.good::after { outline: 3px solid #0B60FF; outline-offset: -3px; } /* --- Dyslexia-friendly / readable font ------------------------------------- * Prefer a real dyslexia face if the reader has one installed, then fall back * to highly-legible system faces. Looser spacing aids tracking. No web-font is * downloaded (CSP-safe). */ html.a11y-font, html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea { font-family: "OpenDyslexic", "Atkinson Hyperlegible", "Comic Sans MS", Verdana, Tahoma, sans-serif !important; letter-spacing: .03em; word-spacing: .08em; line-height: 1.7 !important; } /* --- Larger text ----------------------------------------------------------- */ html.a11y-large { font-size: 118%; } /* --- Always-on focus visibility (helps keyboard users everywhere) ---------- */ html.a11y-focus :focus-visible, html.a11y-cb :focus-visible { outline: 3px solid #0B60FF !important; outline-offset: 2px !important; } /* --- The floating widget + panel (self-injected by a11y.js) ---------------- */ #a11y-fab { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: #1ED3C6; color: #04121a; font-size: 1.4rem; line-height: 48px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); } #a11y-fab:hover { background: #17b8ad; } #a11y-panel { position: fixed; left: 16px; bottom: 74px; z-index: 2147483000; width: 260px; background: #121C2F; color: #E8EEF7; border: 1px solid #24304A; border-radius: 12px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } #a11y-panel[hidden] { display: none; } #a11y-panel h2 { font-size: .95rem; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; } #a11y-panel label { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: .9rem; cursor: pointer; } #a11y-panel input[type=checkbox] { width: 18px; height: 18px; accent-color: #1ED3C6; } #a11y-panel .a11y-foot { margin-top: 8px; border-top: 1px solid #24304A; padding-top: 8px; font-size: .78rem; } #a11y-panel .a11y-foot a { color: #1ED3C6; } @media print { #a11y-fab, #a11y-panel { display: none !important; } }