/* ============================================================= Discovery Preparatory Academy — accessibility preferences. Two parts: 1. The widget itself (button + panel) — must itself be accessible: large touch target, visible focus ring, high-contrast colours, readable at any zoom. 2. The enhancement classes toggled on by /js/a11y.js. Loaded AFTER the page's own stylesheet, so the variable overrides for high contrast win. App pages (admin + portal) carry body.dpa-app so the dark-theme and light-theme high-contrast maps can be kept apart. ============================================================= */ /* ---------- The widget ---------- */ .a11y-widget { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.4; } .a11y-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px; /* WCAG target size */ background: #10233d; color: #ffffff; border: 2px solid #ffffff; border-radius: 24px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .a11y-btn:hover { background: #1c3a63; } .a11y-btn:focus-visible, .a11y-panel input:focus-visible, .a11y-reset:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } .a11y-icon { font-size: 20px; line-height: 1; } .a11y-panel { position: absolute; right: 0; bottom: 56px; width: 240px; background: #ffffff; color: #10233d; border: 2px solid #10233d; border-radius: 12px; padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); } .a11y-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #10233d; } .a11y-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; color: #10233d; } .a11y-row input { width: 20px; height: 20px; flex: none; accent-color: #10233d; cursor: pointer; } .a11y-reset { margin-top: 10px; width: 100%; padding: 8px; background: #f0f0f0; color: #10233d; border: 1px solid #10233d; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; } .a11y-reset:hover { background: #e2e2e2; } @media (max-width: 480px) { .a11y-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .a11y-btn { padding: 12px; } } /* ============================================================== Enhancement classes (toggled on ) ============================================================== */ /* ---- Larger text ---- */ html.a11y-large-text { font-size: 118.75%; } /* scales all rem/em (public site) */ html.a11y-large-text body.dpa-app { font-size: 1.12rem; line-height: 1.65; } html.a11y-large-text body.dpa-app .kpi-sub, html.a11y-large-text body.dpa-app table, html.a11y-large-text body.dpa-app .tab, html.a11y-large-text body.dpa-app label { font-size: 1rem; } /* ---- Reduce motion ---- */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Reveal-on-scroll content must be visible even if its JS never ran. */ html.a11y-reduce-motion .reveal { opacity: 1 !important; transform: none !important; } /* ---- Underline links ---- */ html.a11y-underline a { text-decoration: underline !important; } /* ---- High contrast ---- */ /* App (dark theme): brighten text, pure-black surfaces, white lines. Every admin/portal element uses these variables, so overriding them on body cascades everywhere. */ html.a11y-contrast body.dpa-app { --ink: #ffffff; --ink-dim: #f0f0f0; --bg: #000000; --panel: #000000; --panel-2: #0d0d0d; --line: #ffffff; --accent: #7cc0ff; --accent-soft: #14324f; --good: #5fe07a; --warn: #ffd23f; --bad: #ff6b6b; } html.a11y-contrast body.dpa-app { background: #000; color: #fff; } html.a11y-contrast body.dpa-app a { text-decoration: underline; } /* Public site (light theme): force near-black text on white, dark underlined links, and stronger borders. Belt-and-braces: variables AND direct rules, since not every element references a variable. */ html.a11y-contrast body:not(.dpa-app) { --ink: #000000; --ink-2: #000000; --ink-3: #111111; --text-on-light: #000000; --muted-on-light: #1a1a1a; --line-light: #000000; background: #ffffff; color: #000000; } html.a11y-contrast body:not(.dpa-app) h1, html.a11y-contrast body:not(.dpa-app) h2, html.a11y-contrast body:not(.dpa-app) h3, html.a11y-contrast body:not(.dpa-app) p, html.a11y-contrast body:not(.dpa-app) li, html.a11y-contrast body:not(.dpa-app) label, html.a11y-contrast body:not(.dpa-app) td, html.a11y-contrast body:not(.dpa-app) th { color: #000000; } html.a11y-contrast body:not(.dpa-app) a { color: #00308f; text-decoration: underline; } html.a11y-contrast body:not(.dpa-app) input, html.a11y-contrast body:not(.dpa-app) textarea, html.a11y-contrast body:not(.dpa-app) select { border: 2px solid #000000 !important; color: #000; } /* ============================================================== Read Aloud (text-to-speech) — /js/tts.js ============================================================== */ /* Live highlight painted onto DOM Ranges (no markup change; keeps links). */ ::highlight(tts-sentence) { background-color: rgba(215, 183, 106, 0.20); color: inherit; } ::highlight(tts-word) { background-color: #e7cb83; color: #1c1405; } /* Fallback for browsers without the CSS Custom Highlight API: mark the block. */ .tts-block-current { background-color: rgba(215, 183, 106, 0.12); box-shadow: inset 3px 0 0 #c79a3e; border-radius: 2px; } /* "Listen to this page" button under the headline */ .tts-listen { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 1.25rem; padding: 0.6rem 1.1rem; background: #d8b76a; color: #1c1405; border: 1px solid #e7cb83; border-radius: 999px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: background-color 0.15s ease, transform 0.15s ease; } .tts-listen:hover { background: #e7cb83; transform: translateY(-1px); } .tts-listen:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } .tts-listen-ic { font-size: 1.05em; line-height: 1; } .tts-listen[aria-pressed="true"] { background: #f1ead6; } /* Floating player — bottom-centre (the corners are taken by other widgets) */ .tts-player { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2147482600; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; max-width: calc(100vw - 24px); padding: 8px 12px; background: #17130c; color: #f1ead6; border: 1px solid #c79a3e; border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; } .tts-player[hidden] { display: none; } .tts-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: #d8b76a; color: #1c1405; border: 0; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; } .tts-btn:hover { background: #e7cb83; } .tts-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } .tts-status { min-width: 4.5em; font-weight: 600; color: #e7cb83; } .tts-ctl { display: inline-flex; align-items: center; gap: 6px; color: #e8e0cc; } .tts-ctl-lbl { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #b0a07c; } .tts-rate, .tts-voice { background: #100d08; color: #f1ead6; border: 1px solid #6b5a2e; border-radius: 6px; padding: 6px 8px; font: inherit; cursor: pointer; } .tts-voice { max-width: 200px; } .tts-rate:focus-visible, .tts-voice:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; } /* Entry inside the Accessibility panel (white/navy to match it) */ .tts-a11y-item { display: block; width: 100%; margin-top: 10px; padding: 8px; background: #10233d; color: #ffffff; border: 1px solid #10233d; border-radius: 6px; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .tts-a11y-item:hover { background: #1c3a63; } .tts-a11y-item:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } /* Floating action bar shown above a highlighted selection (Read + Magnify) */ .tts-selbar { position: absolute; z-index: 2147482700; display: flex; gap: 2px; padding: 3px; background: #17130c; border: 1px solid #c79a3e; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .tts-selbar[hidden] { display: none; } .tts-sel-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; background: transparent; color: #f1ead6; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; } .tts-sel-btn:hover { background: #2a2216; color: #e7cb83; } .tts-sel-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } .tts-sel-btn .tts-ic { font-size: 13px; } .tts-lang { margin-left: 2px; max-width: 9.5rem; background: #241d12; color: #f1ead6; border: 1px solid #4b3f22; border-radius: 999px; padding: 6px 8px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .tts-lang:hover { border-color: #c79a3e; } .tts-lang:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } /* Magnifier overlay — large, high-contrast reading view of the selection */ .tts-mag { position: fixed; inset: 0; z-index: 2147483200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: clamp(12px, 3vw, 28px); background: rgba(6, 4, 2, 0.88); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .tts-mag[hidden] { display: none; } .tts-mag-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .tts-mag-btn { min-height: 44px; padding: 8px 16px; background: #d8b76a; color: #1c1405; border: 0; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .tts-mag-btn:hover { background: #e7cb83; } .tts-mag-close { background: #241d12; color: #f1ead6; border: 1px solid #c79a3e; } .tts-mag-close:hover { background: #2f2617; } .tts-mag-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; } .tts-mag-text { width: 100%; max-width: 900px; max-height: 74vh; overflow: auto; background: #fdfbf4; color: #14110b; border: 1px solid #c79a3e; border-radius: 12px; padding: clamp(20px, 4vw, 40px); line-height: 1.5; font-weight: 500; letter-spacing: 0.01em; white-space: pre-wrap; overflow-wrap: break-word; outline: none; } body.tts-mag-open { overflow: hidden; } @media (max-width: 560px) { .tts-player { gap: 6px 8px; padding: 8px; } .tts-ctl-lbl { display: none; } .tts-voice { max-width: 34vw; } } @media (prefers-reduced-motion: reduce) { .tts-listen, .tts-btn { transition: none; } } html.a11y-reduce-motion .tts-listen, html.a11y-reduce-motion .tts-btn { transition: none; } @media print { .tts-player, .tts-listen { display: none !important; } } /* ============================================================== Magnifying glass (follows the cursor) — /js/magnifier.js ============================================================== */ .mag-lens { position: fixed; z-index: 2147483500; border-radius: 50%; overflow: hidden; border: 3px solid #d8b76a; background: #100d08; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(0, 0, 0, 0.35); pointer-events: none; /* clicks pass through to the real page underneath */ cursor: none; } .mag-lens[hidden] { display: none; } .mag-lens__page { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } .mag-hint { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 2147483501; background: #17130c; color: #f1ead6; border: 1px solid #c79a3e; border-radius: 999px; padding: 8px 16px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); white-space: nowrap; max-width: calc(100vw - 24px); } .mag-hint[hidden] { display: none; } @media print { .mag-lens, .mag-hint { display: none !important; } }