/* ========================================================================== Grading US Coins — accessibility layer Focus visibility, high-contrast mode, text-size hooks, reduced-motion, and respect for user/system preferences. Loaded after styles.css so it can override. These rules are toggled by data-* attributes set in app.js and persisted in localStorage. ========================================================================== */ /* Always-visible, high-contrast focus ring for keyboard users */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* Don't remove focus for mouse users without an alternative — keep a subtle ring */ a:focus, button:focus, input:focus, summary:focus { outline-color: var(--focus); } /* ----- Text-size controls (A- / A / A+ / A++) ----- app.js sets data-text-size on ; we bump --base-font accordingly. Minimum stays comfortably large for older readers. */ html[data-text-size="normal"] { --base-font: 18px; } html[data-text-size="large"] { --base-font: 21px; } html[data-text-size="xlarge"] { --base-font: 24px; } html[data-text-size="xxlarge"] { --base-font: 28px; } /* ----- High-contrast mode ----- */ html[data-contrast="high"] { --bg: #ffffff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0; --ink: #000000; --ink-soft: #1a1a1a; --line: #000000; --line-strong:#000000; --brand: #0b3d91; /* strong blue, AAA on white */ --brand-deep: #0b3d91; --gold: #7a5c12; --gold-soft: #ffe8a0; --patina: #0b3d91; --patina-deep:#0b3d91; --focus: #b80000; } html[data-contrast="high"] body { background: #fff; } html[data-contrast="high"] a { text-decoration: underline; } html[data-contrast="high"] .card, html[data-contrast="high"] .term, html[data-contrast="high"] .level { border-width: 2px; } html[data-contrast="high"] nav.primary a[aria-current="page"] { outline: 2px solid #000; } html[data-contrast="high"] .hero__coin span { color: #000; } /* ----- Reading width comfort toggle (optional, set via app.js) ----- */ html[data-reading="comfort"] { --measure: 60ch; --line-height: 1.85; } /* ----- Reduced motion (also handled in styles.css; reinforce) ----- */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } /* The site uses a premium dark "museum" theme by default (set in styles.css). Users who need maximum legibility can switch to High contrast (white) from the reading toolbar; that override is defined above. */ /* ----- TTS "now reading" marker ----- A calm gold underline plus a faint tint marks the active block. The previous bright fill washed the cream text out on the dark theme and hurt legibility, so text colour is left untouched and the cue stays subtle. */ .tts-reading { background: color-mix(in srgb, var(--brand) 10%, transparent); text-decoration-line: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 5px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent); } html[data-contrast="high"] .tts-reading { background: color-mix(in srgb, var(--brand) 22%, transparent); text-decoration-thickness: 3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } /* ----- Target sizes: ensure interactive controls are at least 44x44 ----- */ a.button, .toolbar button, .tts button, button.btn, nav.primary a { min-height: 44px; display: inline-flex; align-items: center; } /* ----- Forms: clear labels and large hit areas ----- */ input[type="search"]:focus { outline: 3px solid var(--focus); outline-offset: 1px; }