/* ============================================ Accessibility Styles Font Sizing & Dark Mode Overrides ============================================ */ /* Font Size Levels */ [data-font-size="small"] { font-size: 16px; } [data-font-size="medium"] { font-size: 18px; } [data-font-size="large"] { font-size: 22px; } [data-font-size="xl"] { font-size: 26px; } /* Ensure headings scale proportionally */ [data-font-size="large"] h1 { font-size: 2.2rem; } [data-font-size="large"] h2 { font-size: 1.7rem; } [data-font-size="large"] h3 { font-size: 1.4rem; } [data-font-size="xl"] h1 { font-size: 2.4rem; } [data-font-size="xl"] h2 { font-size: 1.9rem; } [data-font-size="xl"] h3 { font-size: 1.5rem; } [data-font-size="xxl"] { font-size: 31px; /* 140% of 22px large base */ } [data-font-size="xxl"] h1 { font-size: 2.6rem; } [data-font-size="xxl"] h2 { font-size: 2.1rem; } [data-font-size="xxl"] h3 { font-size: 1.7rem; } [data-font-size="xxxl"] { font-size: 35px; /* 160% of 22px large base */ } [data-font-size="xxxl"] h1 { font-size: 2.8rem; } [data-font-size="xxxl"] h2 { font-size: 2.3rem; } [data-font-size="xxxl"] h3 { font-size: 1.9rem; } /* Focus indicators — keyboard users only (focus-visible) */ /* Remove the browser default for mouse/touch users */ *:focus:not(:focus-visible) { outline: none; } /* Clear, branded outline for keyboard navigation */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [type="checkbox"]:focus-visible, [tabindex]:focus-visible, *:focus-visible { outline: 3px solid #1565C0; outline-offset: 2px; border-radius: 2px; } /* Skip to content link */ .skip-link { position: absolute; top: -100px; left: var(--spacing-md); background: var(--accent-primary); color: #FFFFFF; padding: var(--spacing-sm) var(--spacing-md); border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 9999; font-weight: 600; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* Reduced motion — respect user OS setting */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High contrast enhancements for dark mode */ [data-theme="dark"] .quiz-option { border-width: 2px; } [data-theme="dark"] .module-card { border-width: 2px; } [data-theme="dark"] a { text-decoration-thickness: 2px; } /* Ensure tap targets on touch devices */ @media (pointer: coarse) { .progress-checkbox { width: 40px; height: 40px; } .quiz-option { padding: var(--spacing-md); } .sidebar nav a { min-height: 56px; padding: var(--spacing-md); } } /* Screen reader only utility */ .sr-only { position: absolute; 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; } /* Dyslexia-friendly font — toggled via .dyslexic-font class on (set by accessibility.js) */ /* Also covers class on for forward compatibility */ body.dyslexic-font, .dyslexic-font body, html.dyslexic-font body { font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important; } /* ============================================ High Contrast Mode (Phase 4D) Toggle adds class .high-contrast to ============================================ */ html.high-contrast { filter: contrast(1.5) grayscale(0.3); } /* ============================================ Reduce Animations (Phase 4C — Cognitive) Toggle adds class .reduce-motion to ============================================ */ body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ============================================ Reading Guide (Phase 4C — Cognitive) Highlights hovered paragraph in yellow ============================================ */ body.reading-guide p:hover, body.reading-guide li:hover, body.reading-guide dt:hover, body.reading-guide dd:hover { background-color: #fff176; border-radius: 3px; cursor: default; } /* Dark mode reading guide — softer yellow */ [data-theme="dark"] body.reading-guide p:hover, [data-theme="dark"] body.reading-guide li:hover, [data-theme="dark"] body.reading-guide dt:hover, [data-theme="dark"] body.reading-guide dd:hover { background-color: #5c5000; color: #fff; } /* ============================================ aria-live Announcer Region (Phase 4A) ============================================ */ #dc-live-region { position: absolute; 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; }