/* ========================================================================= Coaches Eye — Accessibility toolkit Self-contained. Nothing here runs until the user turns a setting on from Settings ▸ Legal & Accessibility (or the landing-page footer). All toggles default OFF; state lives in localStorage("ce_a11y") and is applied as classes on . The always-on pieces (visible keyboard focus ring, skip link) are baseline WCAG niceties that don't change how the app looks for mouse users. ========================================================================= */ /* ---- Baseline: a clearly visible focus ring for keyboard users only ------ */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--primary-color, #38bdf8) !important; outline-offset: 2px !important; border-radius: 4px; } /* ---- Skip-to-content link (visible only when focused) -------------------- */ .a11y-skip-link { position: fixed; top: -60px; left: 12px; z-index: 2147483600; background: #38bdf8; color: #061019; font: 700 14px/1 Inter, system-ui, sans-serif; padding: 12px 18px; border-radius: 0 0 10px 10px; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: top .15s ease; } .a11y-skip-link:focus { top: 0; } /* ========================================================================= Applied setting states (classes toggled on ) ========================================================================= */ /* Larger text */ html.a11y-large-text { font-size: 118%; } html.a11y-large-text body { font-size: 1.06em; line-height: 1.55; } /* Readable font — swaps to a highly legible system font everywhere */ html.a11y-readable-font, html.a11y-readable-font * { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; letter-spacing: .015em !important; } /* Underline all links so they don't rely on color alone */ html.a11y-underline-links a { text-decoration: underline !important; } /* High contrast — override the app's theme variables so it cascades app-wide */ html.a11y-high-contrast { --text-light: #ffffff !important; --text-lighter:#ffffff !important; --border-color: rgba(255,255,255,.6) !important; --border-color-hover: rgba(255,255,255,.9) !important; --panel-bg: rgba(10,12,16,.94) !important; } html.a11y-high-contrast body { background: #000 !important; } html.a11y-high-contrast a, html.a11y-high-contrast .btn { text-decoration: underline; } html.a11y-high-contrast .text-gray-400, html.a11y-high-contrast .text-gray-500 { color: #e5e7eb !important; } /* Reduce motion — kill animations/transitions app-wide */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ========================================================================= Text reader floating bar (shown only while Text Reader is ON) ========================================================================= */ .a11y-reader-bar { position: fixed; left: 16px; bottom: 16px; z-index: 2147483500; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(38,43,54,.98), rgba(20,24,32,.98)); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); font: 600 13px/1 Inter, system-ui, sans-serif; color: #fff; max-width: calc(100vw - 32px); } .a11y-reader-bar .a11y-reader-title { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; color: #cbd5e1; white-space: nowrap; } .a11y-reader-bar button { appearance: none; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif; padding: 8px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap; } .a11y-reader-bar button:hover { background: rgba(255,255,255,.14); } .a11y-reader-bar button.primary { background: #38bdf8; color: #061019; border-color: transparent; } .a11y-reader-bar button.primary:hover { filter: brightness(1.08); } /* Element currently being read aloud */ .a11y-reading-highlight { outline: 3px solid #38bdf8 !important; outline-offset: 2px !important; background: rgba(56,189,248,.14) !important; border-radius: 4px; } html.a11y-reader-armed .a11y-readable-hint { cursor: help; } /* ========================================================================= Accessibility settings modal ========================================================================= */ .a11y-modal-overlay { position: fixed; inset: 0; z-index: 2147483400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); } .a11y-modal { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: #14181f; color: #e6edf3; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.6); font-family: Inter, system-ui, sans-serif; } .a11y-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; } .a11y-modal-header h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; } .a11y-modal-close { appearance: none; border: none; background: rgba(255,255,255,.08); color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; } .a11y-modal-close:hover { background: rgba(255,255,255,.16); } .a11y-modal-intro { margin: 0; padding: 0 20px 4px; color: #9aa7b4; font-size: .86rem; line-height: 1.5; } .a11y-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.07); } .a11y-row:first-of-type { border-top: none; } .a11y-row-text { flex: 1 1 auto; min-width: 0; } .a11y-row-title { font-weight: 700; color: #fff; font-size: .96rem; } .a11y-row-desc { color: #93a1ae; font-size: .8rem; line-height: 1.45; margin-top: 2px; } /* Accessible toggle switch (built on a real checkbox) */ .a11y-switch { position: relative; flex: 0 0 auto; width: 50px; height: 30px; } .a11y-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 2; } .a11y-switch .a11y-track { position: absolute; inset: 0; background: #3a424e; border-radius: 999px; transition: background .15s ease; } .a11y-switch .a11y-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 2px 5px rgba(0,0,0,.4); } .a11y-switch input:checked ~ .a11y-track { background: #38bdf8; } .a11y-switch input:checked ~ .a11y-thumb { transform: translateX(20px); } .a11y-switch input:focus-visible ~ .a11y-track { outline: 3px solid #38bdf8; outline-offset: 2px; } .a11y-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 20px; border-top: 1px solid rgba(255,255,255,.07); } .a11y-reset-btn { appearance: none; border: none; background: none; color: #93a1ae; font-size: .84rem; cursor: pointer; text-decoration: underline; padding: 6px 2px; } .a11y-reset-btn:hover { color: #fff; } .a11y-done-btn { appearance: none; border: none; cursor: pointer; background: #38bdf8; color: #061019; font-weight: 800; font-size: .95rem; padding: 11px 22px; border-radius: 11px; } .a11y-done-btn:hover { filter: brightness(1.08); } /* Footer accessibility launcher (landing page) — matches the legal links */ .landing-a11y-link { background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; }