/* ===================================================================== a11y.css — how the accessibility preferences look. js/a11y.js writes data-* on ; every rule here reacts to those and to nothing else, so a preference can be changed at runtime with no reload and no screen needing to know it exists. Text SIZE is deliberately absent: it is not a font rule. The scene is a fixed design box fitted to the screen, so the size lever lives in js/scale.js, which shrinks the box instead. See the comment there. ===================================================================== */ /* ---------- bold text ---------- A 400-weight glyph on a painted background disappears where a 700 at the same colour does not — weight buys legibility that colour alone cannot. */ html[data-bold="1"] body, html[data-bold="1"] button, html[data-bold="1"] input, html[data-bold="1"] textarea, html[data-bold="1"] p, html[data-bold="1"] span, html[data-bold="1"] small, html[data-bold="1"] li { font-weight: 700 !important; } html[data-bold="1"] h1, html[data-bold="1"] h2, html[data-bold="1"] h3, html[data-bold="1"] b, html[data-bold="1"] strong { font-weight: 900 !important; } /* ---------- underline controls ---------- Colour alone must never carry meaning (WCAG 1.4.1). Anything that can be pressed gets a visible affordance so it is identifiable without seeing hue. */ html[data-underline="1"] .text-btn, html[data-underline="1"] .page-nav button, html[data-underline="1"] .onb-footlinks button, html[data-underline="1"] .pw-links button, html[data-underline="1"] .pw-restore { text-decoration: underline !important; } /* Not the lobby's play button: its affordance is PAINTED — a giant green pill with a play triangle — and the element itself is a transparent hit area over the artwork. An outline there draws a floating rectangle across the picture and tells the player nothing they did not already know. */ html[data-underline="1"] #home #startDay { outline: none !important; } html[data-underline="1"] .primary, html[data-underline="1"] .secondary, html[data-underline="1"] .compact, html[data-underline="1"] .back, html[data-underline="1"] .day, html[data-underline="1"] .onb-option { outline: 2px solid currentColor; outline-offset: -2px; } /* The exercise cards and the three daily pedestals were missing from this list — which meant that on the two screens where EVERY element is a button, the switch reported itself on and did nothing. They get the affordance on the title, where it reads as "this word is a link", rather than a box around a picture. */ html[data-underline="1"] .game-card h3, html[data-underline="1"] .session-card h3 { text-decoration: underline; text-underline-offset: 3px; } html[data-underline="1"] .game-card, html[data-underline="1"] .session-card { outline: 2px solid currentColor; outline-offset: -2px; } /* ---------- bigger touch targets ---------- --a11y-tap is 48px normally, 64px in this mode. 48 is the floor for the general population; 64 is what a less steady hand actually needs. */ html[data-big-targets="1"] button, html[data-big-targets="1"] .onb-option, html[data-big-targets="1"] [role="button"] { min-height: var(--a11y-tap, 64px) !important; } /* NOT the switch. It is a pill of a fixed proportion (70x38 with a 28px knob); forcing a 64px minimum height while the width stayed at 70 turned it into a circle with the knob stranded in one corner. A switch grows by scaling BOTH axes, and its tap area is extended invisibly instead — the finger gets the 64px, the eye keeps the pill. */ html[data-big-targets="1"] .switch { min-height: 0 !important; flex: 0 0 84px !important; width: 84px !important; height: 46px !important; } html[data-big-targets="1"] .switch i { width: 34px !important; height: 34px !important; top: 4px !important; left: 4px !important; } html[data-big-targets="1"] .switch.on i { translate: 38px 0 !important; } /* the invisible half of the target */ .switch { position: relative; } .switch::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 16px); height: var(--a11y-tap, 48px); } html[data-big-targets="1"] .back, html[data-big-targets="1"] .calendar-controls button, html[data-big-targets="1"] .bottom-nav button { min-width: var(--a11y-tap, 64px) !important; } /* ---------- reduced motion ---------- Set by our own switch OR by the OS. Vestibular sensitivity is common at this age, and a moving background is a reason to put the phone down. */ html[data-reduce-motion="1"] *, html[data-reduce-motion="1"] *::before, html[data-reduce-motion="1"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html[data-reduce-motion="1"] #lobbyVideo, html[data-reduce-motion="1"] .coach-hand, html[data-reduce-motion="1"] .coach-assistant, html[data-reduce-motion="1"] .coach-bubble { animation: none !important; } html[data-reduce-motion="1"] #home #storeBtn { animation: none !important; } /* ---------- the settings block itself ---------- */ .set-a11y .set-sublabel { margin: 14px 0 8px; font-weight: 800; color: var(--deep); } .a11y-sizes { display: flex; gap: 10px; } .a11y-sizes button { flex: 1; min-height: 76px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px solid #b8d2ae; border-radius: 16px; background: #fffdf7; color: var(--deep); font-family: inherit; cursor: pointer; } .a11y-sizes button i { font-style: normal; font-size: 12px; font-weight: 800; } .a11y-sizes button.on { background: #e2efdc; border-color: var(--green); box-shadow: inset 0 0 0 2px var(--green); } /* ===================================================================== READ-ALOUD BUTTON --------------------------------------------------------------------- Deliberately outside the scaled stage: it must stay the same physical size whatever the text scale, because it is the control someone reaches for when they can no longer read the thing that would tell them where it is. ===================================================================== */ .speak-btn{ /* above the onboarding overlay (190000) and the game bar: this is the control someone reaches for BECAUSE they cannot read what is covering it */ /* Bottom-LEFT and lifted clear of the footer: every screen in this app puts its primary action in a full-width bar at the bottom and its close button at the top, so this is the one corner that is reliably empty. */ /* `bottom` is set from JS against the measured navigation bar — a constant here was a guess, and it was wrong on every screen that has a nav. */ position:fixed;left:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:200000; width:64px;height:64px;border-radius:50%;border:3px solid #143c2b; background:#1f6b4a;color:#fff;font-size:28px;line-height:1; display:grid;place-items:center;cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35); } .speak-btn[hidden]{display:none} .speak-btn:active{transform:translateY(2px)} .speak-btn.speaking{background:#c8791a;border-color:#5a3405} html[data-reduce-motion="1"] .speak-btn:active{transform:none}