/* ============================================================================ Homework Turtle — Accessibility-Aware Design Tokens ---------------------------------------------------------------------------- All tokens are CSS custom properties on :root that switch automatically based on data-* attributes set on . Consumers should bind to tokens (e.g., color: var(--text)) instead of hard-coding values, so user accessibility preferences cascade everywhere. Attributes consumed by this file: [data-theme="light|dark|hc-light|hc-dark"] Color theme [data-reading-tint="cream|light-yellow|...] Reading background tint [data-font-family="lexend|atkinson|...] Font family swap [data-text-size="sm|md|lg|xl|xxl"] Text size multiplier [data-line-spacing="tight|normal|relaxed|...] Line-height + letter-spacing [data-reduce-motion="true"] Disable motion [data-larger-tap-targets="true"] Bigger touch targets ============================================================================ */ /* ============================================================================ 1. FONT FACES ---------------------------------------------------------------------------- Three families chosen specifically for accessibility: - Lexend: research-backed for reading fluency in all readers - Atkinson Hyperlegible: designed by Braille Institute for low-vision - OpenDyslexic: weighted bottoms reduce character flipping and rotation confusion for readers with dyslexia font-display: swap prevents invisible-text flashes during font load, which can disorient users with cognitive load issues. ============================================================================ */ @font-face { font-family: 'Inter'; src: url('/fonts/InterVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-Variable.woff2') format('woff2-variations'); font-weight: 200 1000; font-display: swap; } /* Lexend has four static weights here (Regular/Medium/SemiBold/Bold) rather than a variable file, matching the iOS bundle. */ @font-face { font-family: 'Lexend'; src: url('/fonts/Lexend-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/fonts/Lexend-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/fonts/Lexend-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/fonts/Lexend-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('/fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('/fonts/OpenDyslexic-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } /* ============================================================================ 2. ROOT — DEFAULTS & STRUCTURAL TOKENS ---------------------------------------------------------------------------- Defaults are the light theme. Per-attribute blocks below override. ============================================================================ */ :root { /* --- COLOR (default = light theme) --------------------------------------- Every color token is paired to a contrast-checked value so consumers never hard-code hex. Hierarchy is conveyed by both color AND weight to preserve legibility for color-blind users. ------------------------------------------------------------------------- */ --bg: #FFFFFF; /* Page background — base canvas */ --surface: #F7F5F0; /* Cards / panels — sits above --bg */ --surface-elevated: #FFFFFF; /* Modals / popovers — top layer */ --text: #1A1A1A; /* Primary copy — WCAG AAA on --bg */ --text-secondary: #4A4A4A; /* Supporting copy — WCAG AA */ --text-tertiary: #757575; /* Hints / placeholders — sparing use */ --accent: #2B7A77; /* Brand teal — links, primary buttons */ --accent-subtle: #E0F0EE; /* Tinted accent backgrounds, chips */ --success: #2D7A3E; /* "Saved", "Completed", "Synced" */ --warning: #C76E00; /* Amber — caution / unsaved / over limit. DO NOT use red here. Red triggers anxiety in some users and color-blind users cannot reliably distinguish red from green warnings. */ --error: #B3261E; /* Reserved for delete-forever / data loss confirmations ONLY. Validation messages should use --warning. */ --border: #D4D0C8; /* Default 1px component borders */ --divider: #E8E5E0; /* Subtle separators between rows */ /* --- READING TINT -------------------------------------------------------- A subtle background hue applied to long-form reading surfaces. Reduces white-page glare for users with visual stress, Irlen syndrome, or migraine triggers. Default unset (transparent); activate via [data-reading-tint]. Consumers apply it (e.g., body { background-color: var(--reading-tint); }) so it does not require a global rule here. ------------------------------------------------------------------------- */ --reading-tint: transparent; /* --- FONT FAMILY -------------------------------------------------------- Default leads with the Homework Turtle brand font (Inter), then falls back through the OS system stack. [data-font-family] overrides this to one of the accessibility-focused families loaded above when the student picks one in Personalize/Accessibility. ------------------------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; /* --- TYPE SCALE --------------------------------------------------------- Multiplier-based: --text-scale defaults to 1 and is overridden by [data-text-size]. Sizes are in rem so they ALSO respect the user's browser font-size setting (a separate axis of accessibility). Body text consumers should use var(--text-base), which equals calc(1rem * var(--text-scale)). ------------------------------------------------------------------------- */ --text-scale: 1; /* Overridden per [data-text-size] */ --text-xs: calc(0.75rem * var(--text-scale)); /* 12px @ scale=1 */ --text-sm: calc(0.875rem * var(--text-scale)); /* 14px */ --text-base: calc(1rem * var(--text-scale)); /* 16px — body default */ --text-lg: calc(1.125rem * var(--text-scale)); /* 18px */ --text-xl: calc(1.25rem * var(--text-scale)); /* 20px */ /* --- SPACING SCALE ------------------------------------------------------ Rem units intentionally — spacing scales with browser zoom and root font-size, which is required by WCAG SC 1.4.4 (Resize Text). Pixel comments assume default 16px root. ------------------------------------------------------------------------- */ --space-xxs: 0.125rem; /* 2px — hairline gaps in dense components */ --space-xs: 0.25rem; /* 4px — icon-to-text gap */ --space-sm: 0.5rem; /* 8px — small inline padding */ --space-md: 1rem; /* 16px — default block padding */ --space-lg: 1.5rem; /* 24px — section spacing */ --space-xl: 2rem; /* 32px — large gutters */ --space-xxxl: 3rem; /* 48px — top-of-page hero spacing */ /* --- MOTION ------------------------------------------------------------- Three durations + two easings. Defaults are short — long animations are exhausting for users with vestibular disorders, ADHD, and concussion sensitivity. The reduced-motion overrides further down take precedence when the user opts in. ------------------------------------------------------------------------- */ --duration-short: 150ms; /* Hover / focus / small state changes */ --duration-long: 400ms; /* Hero / onboarding only */ --ease-out-custom: cubic-bezier(0.2, 0.8, 0.2, 1); /* Natural decel */ /* --- TAP TARGETS -------------------------------------------------------- WCAG 2.5.5 (AAA) requires 44×44px minimum interactive area. We default to that and bump to 56px when [data-larger-tap-targets="true"] for users with motor impairments, tremor, or one-handed phone use. ------------------------------------------------------------------------- */ --min-tap-target: 44px; /* --- LETTER SPACING & LINE HEIGHT --------------------------------------- Discrete tokens for each value. The "current-*" tokens below resolve to one of these based on [data-line-spacing] (which bundles both dimensions, since looser line-height typically pairs with looser letter-spacing for dyslexia-friendly typography). 0.12em letter-spacing is the British Dyslexia Association's recommended value. ------------------------------------------------------------------------- */ --letter-spacing-default: 0; --letter-spacing-increased: 0.12em; --line-height-tight: 1.3; /* Headings, single-line UI rows */ --line-height-normal: 1.5; /* Body — WCAG SC 1.4.12 minimum */ --line-height-relaxed: 1.75; /* Long-form reading mode */ --line-height-spacious: 2.0; /* Maximum, for users who need it */ /* Resolved (current) tokens — body text consumers bind to these. */ --current-letter-spacing: var(--letter-spacing-default); --current-line-height: var(--line-height-normal); } /* ============================================================================ 3. THEME OVERRIDES ---------------------------------------------------------------------------- Each [data-theme] swaps the entire color palette. The default :root block already covers light, but we re-declare it explicitly so toggling between themes always lands on a consistent palette. ============================================================================ */ [data-theme="light"] { --bg: #FFFFFF; --surface: #F7F5F0; --surface-elevated: #FFFFFF; --text: #1A1A1A; --text-secondary: #4A4A4A; --text-tertiary: #757575; --accent: #2B7A77; --accent-subtle: #E0F0EE; --success: #2D7A3E; --warning: #C76E00; --error: #B3261E; --border: #D4D0C8; --divider: #E8E5E0; } /* Standard dark theme — comfortable for long evening sessions, reduces blue-light melatonin disruption for users with sleep disorders. */ [data-theme="dark"] { --bg: #1A1816; --surface: #2A2624; --surface-elevated: #3A3532; --text: #F0EDE6; --text-secondary: #C0BBB3; --text-tertiary: #8B857D; --accent: #5BC4BD; --accent-subtle: #1F3F3D; --success: #6BC07A; --warning: #E89945; --error: #E57373; --border: #3F3935; --divider: #2F2A27; } /* High-contrast variants serve users with low vision. Body-text contrast exceeds WCAG AAA (>= 7:1). Borders are pure black/white for unambiguous edge detection — text-secondary intentionally matches text so hierarchy is conveyed by font weight, not faint color. */ [data-theme="hc-light"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-elevated: #FFFFFF; --text: #000000; --text-secondary: #000000; --text-tertiary: #1A1A1A; --accent: #003D7A; --accent-subtle: #D6E4F5; --success: #006400; --warning: #8B4500; --error: #8B0000; --border: #000000; --divider: #000000; } [data-theme="hc-dark"] { --bg: #000000; --surface: #000000; --surface-elevated: #0F0F0F; --text: #FFFFFF; --text-secondary: #FFFFFF; --text-tertiary: #E0E0E0; --accent: #FFD700; --accent-subtle: #3A3000; --success: #00FF66; --warning: #FFB300; --error: #FF6B6B; --border: #FFFFFF; --divider: #FFFFFF; } /* ============================================================================ 4. READING TINTS ---------------------------------------------------------------------------- Pastel hues reduce the contrast between text and background just enough to minimize visual stress while preserving legibility. Each tint addresses different sensory needs — yellow/cream are commonly recommended for Irlen syndrome; blue/green can help migraine triggers. ============================================================================ */ [data-reading-tint="cream"] { --reading-tint: #FAF6EC; } [data-reading-tint="light-yellow"] { --reading-tint: #FFFBE6; } [data-reading-tint="light-blue"] { --reading-tint: #EAF4FF; } [data-reading-tint="light-green"] { --reading-tint: #EAFBEE; } [data-reading-tint="light-pink"] { --reading-tint: #FFF0F4; } /* ============================================================================ 5. FONT FAMILY OVERRIDES ---------------------------------------------------------------------------- Each value sets --font-sans to the chosen family with the system stack as fallback in case the custom font fails to load. Failure shouldn't leave a low-vision user with an unstyled (and likely illegible) screen. ============================================================================ */ [data-font-family="inter"] { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } [data-font-family="plusjakartasans"] { --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } [data-font-family="nunito"] { --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } [data-font-family="lexend"] { --font-sans: 'Lexend', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } [data-font-family="atkinson"] { --font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } [data-font-family="opendyslexic"] { --font-sans: 'OpenDyslexic', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* ============================================================================ 6. TEXT SIZE MULTIPLIER ---------------------------------------------------------------------------- Scales every --text-* token simultaneously. md (1.0) is default; sm shrinks for dense interfaces; lg/xl/xxl progressively enlarge for low-vision users without requiring browser-level zoom (which can break layouts in ways our scale-aware spacing avoids). ============================================================================ */ [data-text-size="sm"] { --text-scale: 0.875; } [data-text-size="md"] { --text-scale: 1; } [data-text-size="lg"] { --text-scale: 1.15; } [data-text-size="xl"] { --text-scale: 1.30; } [data-text-size="xxl"] { --text-scale: 1.50; } /* ============================================================================ 7. LINE SPACING (bundles line-height + letter-spacing) ---------------------------------------------------------------------------- A single attribute switches both axes together because dyslexia-friendly typography typically requires both relaxed line-height AND increased letter-spacing — splitting them into two attributes invites users to choose mismatched combinations. Consumers bind body text to var(--current-line-height) and var(--current-letter-spacing). ============================================================================ */ [data-line-spacing="tight"] { --current-line-height: var(--line-height-tight); --current-letter-spacing: var(--letter-spacing-default); } [data-line-spacing="normal"] { --current-line-height: var(--line-height-normal); --current-letter-spacing: var(--letter-spacing-default); } [data-line-spacing="relaxed"] { --current-line-height: var(--line-height-relaxed); --current-letter-spacing: var(--letter-spacing-increased); } [data-line-spacing="spacious"] { --current-line-height: var(--line-height-spacious); --current-letter-spacing: var(--letter-spacing-increased); } /* ============================================================================ 8. TAP TARGETS ---------------------------------------------------------------------------- Bumps the minimum interactive size for users with motor impairments, tremor, Parkinson's, or one-handed mobile use. Components that need to guarantee tap area should use min-width/min-height: var(--min-tap-target). ============================================================================ */ [data-larger-tap-targets="true"] { --min-tap-target: 56px; } /* ============================================================================ 9. REDUCED MOTION ---------------------------------------------------------------------------- Two paths to disable: OS-level (prefers-reduced-motion) and in-app ([data-reduce-motion="true"], for users who can't or don't want to change OS settings). Both paths override duration tokens to a negligible value AND globally strip animations/transitions, because some animations are coded with hard-coded durations that bypass our tokens. Vestibular-disorder users need that safety net — a single parallax effect can trigger nausea or migraine. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-short: 0.01ms; --duration-long: 0.01ms; } *, *::before, *::after { animation: none !important; transition: none !important; } } [data-reduce-motion="true"] { --duration-short: 0.01ms; --duration-long: 0.01ms; } [data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after { animation: none !important; transition: none !important; } /* ============================================================================ 9. ACCESSIBILITY CLASS RULES (canonical home — applies everywhere) ---------------------------------------------------------------------------- These classes are toggled on by accessibility-manager.js whenever the user flips the corresponding setting. Putting them here means they work on every page that loads accessibility-tokens.css (index.html, accessibility.html, personalize.html, etc.) — not just the SPA. Previously these were inline in the SPA only, so toggling Bold Text or Highlight Links on /accessibility.html had no visible effect on the page doing the toggling. ============================================================================ */ /* BOLD TEXT — broad selector with !important to win against the SPA's many element-specific font-weight declarations. Headings keep their natural heavy weight (boosted to 800). */ html.a11y-bold-text body, html.a11y-bold-text body p, html.a11y-bold-text body span, html.a11y-bold-text body div, html.a11y-bold-text body li, html.a11y-bold-text body a, html.a11y-bold-text body button, html.a11y-bold-text body input, html.a11y-bold-text body textarea, html.a11y-bold-text body select, html.a11y-bold-text body label, html.a11y-bold-text body td, html.a11y-bold-text body th, html.a11y-bold-text body .nav-item, html.a11y-bold-text body .bn-item, html.a11y-bold-text body .pick-card-name, html.a11y-bold-text body .pick-card-preview, html.a11y-bold-text body .tint-card-name, html.a11y-bold-text body .tint-card-sample, html.a11y-bold-text body .font-name, html.a11y-bold-text body .font-desc, html.a11y-bold-text body .font-preview, html.a11y-bold-text body .theme-card-name, html.a11y-bold-text body .form-input, html.a11y-bold-text body .form-select { font-weight: 600 !important; } html.a11y-bold-text body h1, html.a11y-bold-text body h2, html.a11y-bold-text body h3, html.a11y-bold-text body h4, html.a11y-bold-text body h5, html.a11y-bold-text body h6, html.a11y-bold-text body strong, html.a11y-bold-text body b { font-weight: 800 !important; } /* HIGHLIGHT LINKS — inline links only. Scoped with :not() so navigation chrome (.nav-item, .bn-item, .dd-item, .back-link, .more-link) is left alone — otherwise the padding override collapses the nav rows. Uses a noticeably stronger gold tint than --gold-dim so the highlight is actually visible against the dark background. */ html.a11y-highlight-links body a:not(.nav-item):not(.bn-item):not(.dd-item):not(.back-link):not(.more-link) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; color: var(--gold) !important; background: rgba(232, 200, 122, 0.35); padding: 1px 6px; border-radius: 4px; outline: 1px solid rgba(232, 200, 122, 0.6); outline-offset: 0; } html.a11y-highlight-links body a:not(.nav-item):not(.bn-item):not(.dd-item):not(.back-link):not(.more-link):hover, html.a11y-highlight-links body a:not(.nav-item):not(.bn-item):not(.dd-item):not(.back-link):not(.more-link):focus-visible { background: var(--gold); color: var(--bg) !important; outline: 2px solid var(--gold); outline-offset: 2px; } /* REDUCE TRANSPARENCY / REDUCE UI COMPLEXITY — relocated here too so they work on the standalone pages as well as the SPA. */ html.a11y-reduce-transparency body .modal-overlay { background: rgba(0, 0, 0, 0.95); backdrop-filter: none; } html.a11y-reduce-transparency body .modal { border-color: var(--text-tertiary); } html.a11y-reduce-ui-complexity body .auth-card, html.a11y-reduce-ui-complexity body .modal, html.a11y-reduce-ui-complexity body .widget, html.a11y-reduce-ui-complexity body .deck-card, html.a11y-reduce-ui-complexity body .auth-btn-primary, html.a11y-reduce-ui-complexity body .card { box-shadow: none !important; }