/* ════════════════════════════════════════════════════════════════════ FOUNDATIONS A11Y · ACCESSIBILITY TOGGLE PANEL ──────────────────────────────────────────────────────────────────── Companion to /foundations-a11y.js. Provides: - Floating "Aa" trigger button (bottom-right, bottom: 20px) - Slide-in panel with controls for: · Reading font (system / Atkinson Hyperlegible / OpenDyslexic) · Text size (default / large / x-large) · Line spacing (default / loose) · Letter spacing (default / loose) · Background tint (none / warm cream / cool grey / sepia) - All choices persisted via localStorage under key 'foundations.a11y' - Settings apply via classes on ; HTML markup is untouched. Coordinates with /foundations-tts.* — the TTS floating controls live at bottom: 80px to clear this trigger at bottom: 20px. ═══════════════════════════════════════════════════════════════════════ */ /* ── Fonts (loaded only when feature is enabled) ──────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.cdnfonts.com/css/opendyslexic'); /* ── Body-class font overrides ───────────────────────────────────── Applied via document.body classList from foundations-a11y.js. We scope changes to lesson reading regions so chrome (sidebar, audio bar, command status) keeps its native typography. */ body.a11y-font-atkinson .panel, body.a11y-font-atkinson .lesson-panel, body.a11y-font-atkinson .panel *, body.a11y-font-atkinson .lesson-panel * { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif !important; } body.a11y-font-dyslexic .panel, body.a11y-font-dyslexic .lesson-panel, body.a11y-font-dyslexic .panel *, body.a11y-font-dyslexic .lesson-panel * { font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important; letter-spacing: 0.02em; } /* Text size — applies a base font-size scaler to lesson panels */ body.a11y-size-large .panel, body.a11y-size-large .lesson-panel { font-size: 17px; line-height: 1.7; } body.a11y-size-large .panel p, body.a11y-size-large .lesson-panel p, body.a11y-size-large .panel li, body.a11y-size-large .lesson-panel li { font-size: 17px; } body.a11y-size-xlarge .panel, body.a11y-size-xlarge .lesson-panel { font-size: 19px; line-height: 1.8; } body.a11y-size-xlarge .panel p, body.a11y-size-xlarge .lesson-panel p, body.a11y-size-xlarge .panel li, body.a11y-size-xlarge .lesson-panel li { font-size: 19px; } /* Line spacing */ body.a11y-line-loose .panel p, body.a11y-line-loose .lesson-panel p, body.a11y-line-loose .panel li, body.a11y-line-loose .lesson-panel li, body.a11y-line-loose .panel .lead, body.a11y-line-loose .lesson-panel .lead, body.a11y-line-loose .panel blockquote, body.a11y-line-loose .lesson-panel blockquote { line-height: 2 !important; } /* Letter spacing */ body.a11y-letter-loose .panel p, body.a11y-letter-loose .lesson-panel p, body.a11y-letter-loose .panel li, body.a11y-letter-loose .lesson-panel li, body.a11y-letter-loose .panel h1, body.a11y-letter-loose .lesson-panel h1, body.a11y-letter-loose .panel h2, body.a11y-letter-loose .lesson-panel h2, body.a11y-letter-loose .panel h3, body.a11y-letter-loose .lesson-panel h3, body.a11y-letter-loose .panel h4, body.a11y-letter-loose .lesson-panel h4 { letter-spacing: 0.04em; } /* Background tint — applied to .panel containers */ body.a11y-tint-cream .panel, body.a11y-tint-cream .lesson-panel { background-color: #fdf6e3 !important; color: #3a2f1f; } body.a11y-tint-cream .panel p, body.a11y-tint-cream .lesson-panel p, body.a11y-tint-cream .panel li, body.a11y-tint-cream .lesson-panel li, body.a11y-tint-cream .panel .lead, body.a11y-tint-cream .lesson-panel .lead, body.a11y-tint-cream .panel h1, body.a11y-tint-cream .lesson-panel h1, body.a11y-tint-cream .panel h2, body.a11y-tint-cream .lesson-panel h2, body.a11y-tint-cream .panel h3, body.a11y-tint-cream .lesson-panel h3, body.a11y-tint-cream .panel h4, body.a11y-tint-cream .lesson-panel h4 { color: #3a2f1f; } body.a11y-tint-grey .panel, body.a11y-tint-grey .lesson-panel { background-color: #e9eaec !important; color: #1a1d22; } body.a11y-tint-grey .panel p, body.a11y-tint-grey .lesson-panel p, body.a11y-tint-grey .panel li, body.a11y-tint-grey .lesson-panel li, body.a11y-tint-grey .panel .lead, body.a11y-tint-grey .lesson-panel .lead, body.a11y-tint-grey .panel h1, body.a11y-tint-grey .lesson-panel h1, body.a11y-tint-grey .panel h2, body.a11y-tint-grey .lesson-panel h2, body.a11y-tint-grey .panel h3, body.a11y-tint-grey .lesson-panel h3, body.a11y-tint-grey .panel h4, body.a11y-tint-grey .lesson-panel h4 { color: #1a1d22; } body.a11y-tint-sepia .panel, body.a11y-tint-sepia .lesson-panel { background-color: #f4ecd8 !important; color: #5b4633; } body.a11y-tint-sepia .panel p, body.a11y-tint-sepia .lesson-panel p, body.a11y-tint-sepia .panel li, body.a11y-tint-sepia .lesson-panel li, body.a11y-tint-sepia .panel .lead, body.a11y-tint-sepia .lesson-panel .lead, body.a11y-tint-sepia .panel h1, body.a11y-tint-sepia .lesson-panel h1, body.a11y-tint-sepia .panel h2, body.a11y-tint-sepia .lesson-panel h2, body.a11y-tint-sepia .panel h3, body.a11y-tint-sepia .lesson-panel h3, body.a11y-tint-sepia .panel h4, body.a11y-tint-sepia .lesson-panel h4 { color: #5b4633; } /* ── Floating "Aa" trigger button ─────────────────────────────────── */ .a11y-trigger { position: fixed; right: 20px; bottom: 20px; z-index: 9996; /* one below TTS controls (9997) */ width: 52px; height: 52px; border-radius: 50%; background: #0a0a0a; color: #ffffff; border: 1px solid #2a9d8f; cursor: pointer; font-family: system-ui, -apple-system, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: transform .15s ease, box-shadow .15s ease; } .a11y-trigger:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.45); } .a11y-trigger:focus-visible { outline: 3px solid #c49a2e; outline-offset: 3px; } .a11y-trigger-letter-big { font-size: 22px; } .a11y-trigger-letter-small { font-size: 14px; margin-left: -2px; } /* ── Slide-in panel ────────────────────────────────────────────────── */ .a11y-panel { position: fixed; right: 20px; bottom: 84px; /* sits above the trigger */ z-index: 9998; width: 320px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); overflow-y: auto; background: #0a0a0a; color: #ffffff; border: 1px solid #2a9d8f; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); font-family: system-ui, -apple-system, sans-serif; padding: 18px 20px 16px; display: none; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; } .a11y-panel.open { display: block; opacity: 1; transform: translateY(0); } .a11y-panel-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); } .a11y-panel-title { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin: 0; color: #2a9d8f; } .a11y-panel-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; margin: -4px -8px -4px 0; font-family: inherit; } .a11y-panel-close:hover { color: #ffffff; } .a11y-panel-close:focus-visible { outline: 2px solid #c49a2e; outline-offset: 2px; border-radius: 4px; } .a11y-group { margin-bottom: 14px; } .a11y-group:last-child { margin-bottom: 4px; } .a11y-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; display: block; } .a11y-options { display: flex; flex-wrap: wrap; gap: 6px; } .a11y-option { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #ffffff; padding: 7px 11px; border-radius: 6px; font-family: inherit; font-size: 12px; cursor: pointer; transition: background .12s, border-color .12s; flex: 1 1 auto; min-width: 70px; text-align: center; } .a11y-option:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); } .a11y-option:focus-visible { outline: 2px solid #c49a2e; outline-offset: 2px; } .a11y-option.active { background: rgba(42,157,143,0.22); border-color: #2a9d8f; color: #ffffff; font-weight: 700; } .a11y-reset { margin-top: 6px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); padding: 8px; border-radius: 6px; font-family: inherit; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: background .12s, color .12s; } .a11y-reset:hover { background: rgba(255,255,255,0.08); color: #ffffff; } .a11y-reset:focus-visible { outline: 2px solid #c49a2e; outline-offset: 2px; } /* ── Reduced motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .a11y-trigger, .a11y-panel, .a11y-option { transition: none !important; } .a11y-trigger:hover { transform: none; } } /* ── Mobile ───────────────────────────────────────────────────────── */ @media (max-width: 480px) { .a11y-trigger { width: 46px; height: 46px; right: 16px; bottom: 16px; font-size: 18px; } .a11y-panel { right: 16px; bottom: 76px; width: calc(100vw - 32px); padding: 16px 18px; } }