/* ========================================================================= Accessibility layer Applied as classes on , rendered server-side from a cookie so there is no flash of the wrong theme and no dependency on JavaScript. The text-spacing option implements WCAG 1.4.12 values exactly. We offer it as a control rather than only tolerating it, because our learners include people who read Devanagari slowly and benefit from the looser setting even without a diagnosed impairment. Note there is no dyslexia font option: web fonts are banned on this project (village bandwidth), and the spacing control is better evidenced than the fonts anyway. ========================================================================= */ /* --------------------------------------------------------- text scaling -- */ /* Scaling the root lets every rem-based size follow, including tap targets. */ html.a11y-text-large { font-size: 118%; } html.a11y-text-xlarge { font-size: 138%; } html.a11y-text-large body, html.a11y-text-xlarge body { font-size: 1.125rem; } /* ------------------------------------------------------ contrast: high --- */ /* Pure black on white, heavier borders, no tinted panels. */ html.a11y-contrast-high { --navy: #000000; --navy-dark: #000000; --yellow: #FFE500; --sky: #000000; --sky-pale: #FFFFFF; --ink: #000000; --ink-soft: #1A1A1A; --paper: #FFFFFF; --line: #000000; --red: #A5000A; --green: #004D1A; } html.a11y-contrast-high body { background: #FFFFFF; } html.a11y-contrast-high .card, html.a11y-contrast-high .rung-body, html.a11y-contrast-high .lesson, html.a11y-contrast-high .option { border-width: 3px; } html.a11y-contrast-high .btn { border: 3px solid #000; } html.a11y-contrast-high .btn-primary { background: #000; color: #fff; } html.a11y-contrast-high .btn-quiet { color: #fff; border-color: #fff; } html.a11y-contrast-high .example, html.a11y-contrast-high .explain, html.a11y-contrast-high .player, html.a11y-contrast-high .remember { background: #fff; border: 3px solid #000; } html.a11y-contrast-high .keywords li::before { background: #000; } html.a11y-contrast-high .bar { border: 2px solid #000; background: #fff; } html.a11y-contrast-high .bar > span { background: #000; } /* ------------------------------------------------------ contrast: dark --- */ /* For light sensitivity and for reading at night in a village house. */ html.a11y-contrast-dark { --navy: #9FD6E8; --navy-dark: #BFE3EC; --yellow: #FFD23F; --sky: #23303F; --sky-pale: #0E141B; --ink: #F2F5F8; --ink-soft: #B8C2CC; --paper: #18212B; --line: #3A4757; --red: #FF8A80; --green: #6FD68A; } html.a11y-contrast-dark body { background: #0E141B; color: #F2F5F8; } html.a11y-contrast-dark .site-head, html.a11y-contrast-dark .site-foot { background: #18212B; border-bottom: 1px solid #3A4757; } html.a11y-contrast-dark .btn { background: var(--yellow); color: #11181F; } html.a11y-contrast-dark .btn-primary { background: #9FD6E8; color: #11181F; } html.a11y-contrast-dark .btn-ghost { background: transparent; color: #9FD6E8; border-color: #9FD6E8; } html.a11y-contrast-dark .lang-btn.is-on { background: var(--yellow); color: #11181F; } html.a11y-contrast-dark .rung-num { background: #18212B; } html.a11y-contrast-dark .example, html.a11y-contrast-dark .explain, html.a11y-contrast-dark .player { background: #202B36; } html.a11y-contrast-dark .options-review .opt-correct { background: #16301F; } html.a11y-contrast-dark img.lesson-img { filter: brightness(.92); } /* ---------------------------------------------------- text spacing (AA) -- */ /* Exactly the WCAG 1.4.12 Text Spacing values. */ html.a11y-spacing-wide body, html.a11y-spacing-wide p, html.a11y-spacing-wide li, html.a11y-spacing-wide label, html.a11y-spacing-wide .keywords li, html.a11y-spacing-wide .simple { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.a11y-spacing-wide p { margin-bottom: 2em !important; } /* Devanagari conjuncts break visually under heavy letter-spacing, so Hindi gets the word and line spacing but a gentler letter value. */ html.a11y-spacing-wide body.lang-hi, html.a11y-spacing-wide body.lang-hi p, html.a11y-spacing-wide body.lang-hi li { letter-spacing: 0.04em !important; line-height: 1.9 !important; } /* ------------------------------------------------------------- links ----- */ html.a11y-links-underline a { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-links-underline .btn { text-decoration: none !important; } /* ------------------------------------------------------------- motion ---- */ html.a11y-motion-reduced *, html.a11y-motion-reduced *::before, html.a11y-motion-reduced *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ==================================================== the settings panel == */ .skip-links { position: absolute; z-index: 200; } .a11y-panel { background: var(--paper); border-bottom: 4px solid var(--yellow); padding: calc(var(--step) * 3) 0; color: var(--ink); } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { margin-bottom: var(--step); } .a11y-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: calc(var(--step) * 2); margin-bottom: calc(var(--step) * 2); } .a11y-group { border: 2px solid var(--line); border-radius: var(--radius); padding: var(--step) calc(var(--step) * 1.5) calc(var(--step) * 1.5); margin: 0; } .a11y-group legend { font-weight: 700; padding: 0 var(--step); color: var(--navy); } .a11y-option { display: flex; align-items: center; gap: var(--step); min-height: 48px; cursor: pointer; } .a11y-option input { width: 26px; height: 26px; accent-color: var(--navy); flex: 0 0 auto; } .a11y-actions { display: flex; flex-wrap: wrap; gap: var(--step); align-items: center; } .a11y-actions .btn { margin: 0; } .a11y-status { margin: var(--step) 0 0; font-weight: 700; color: var(--green); } /* Preview swatches so the choice is visible before saving, for a learner who cannot read the option labels comfortably in the first place. */ .a11y-option span { line-height: 1.3; } .a11y-group[data-preview="text"] .a11y-option:nth-of-type(2) span { font-size: 1.15em; } .a11y-group[data-preview="text"] .a11y-option:nth-of-type(3) span { font-size: 1.35em; } /* ===================================================== accessible player == */ .media-block { margin-bottom: calc(var(--step) * 3); } .player-controls { display: flex; flex-wrap: wrap; gap: var(--step); margin-top: var(--step); } .player-btn { min-height: 48px; min-width: 48px; padding: 0 calc(var(--step) * 2); border: 2px solid var(--navy); border-radius: var(--radius); background: var(--paper); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; } .player-btn:hover { background: var(--sky-pale); } .player-btn[aria-pressed="true"] { background: var(--navy); color: #fff; } .speed-group { display: flex; align-items: center; gap: var(--step); } .speed-group label { font-weight: 700; } .speed-group select { min-height: 48px; font: inherit; padding: 0 var(--step); border: 2px solid var(--navy); border-radius: var(--radius); background: var(--paper); color: var(--ink); } /* Sighted-user-invisible but screen-reader-available. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Windows High Contrast Mode / forced-colors: never let our colours win. */ @media (forced-colors: active) { .btn, .option, .card, .a11y-group { border: 2px solid ButtonBorder; } .bar > span { background: Highlight; } .keywords li::before { background: CanvasText; } :focus-visible { outline: 3px solid Highlight; } }