/* ═══════════════════════════════════════════════════════════════ careiti-a11y.css — senior accessibility layer (pairs with careiti-a11y.js) Loaded on every game page. Deliberately scoped so it works on pages that are NOT .c-scope (careiti-ui.css only scales large-font inside .c-scope). ═══════════════════════════════════════════════════════════════ */ /* ── Large font ─────────────────────────────────────────────── Scales the root so em/rem-based layouts grow with it; explicit body rule covers pages that pin body font-size in px. */ html.large-font { font-size: 118%; } body.large-font { font-size: 118%; } body.large-font .ca11y-bar { font-size: 12px; } /* keep the bar itself compact */ /* ── High contrast ──────────────────────────────────────────── b4d-theme-toggle.js already stamps data-contrast on ; these rules make it meaningful on pages that never styled it. */ html[data-contrast="high"] body { background: #000 !important; color: #fff !important; } html[data-contrast="high"] a { color: #7DE8DC !important; } html[data-contrast="high"] button:not(.ca11y-btn), html[data-contrast="high"] .btn { border: 2px solid #fff !important; } html[data-contrast="high"] * { text-shadow: none !important; } html[data-contrast="high"] .ca11y-bar { background: #000; border-color: #fff; } html[data-contrast="high"] .ca11y-btn { color: #fff; } /* ── Accessibility bar ──────────────────────────────────────── Bottom-right, above any fixed nav; 44px minimum tap target. */ .ca11y-bar { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); z-index: 9998; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(28, 25, 23, .10); box-shadow: 0 6px 22px rgba(28, 25, 23, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: "PingFang HK", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; } .ca11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; min-height: 48px; padding: 4px 6px; border: none; border-radius: 13px; background: transparent; color: #57534E; font: inherit; line-height: 1.15; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .16s, color .16s; } .ca11y-btn:hover { background: rgba(13, 148, 136, .08); } .ca11y-btn:focus-visible { outline: 3px solid #0D9488; outline-offset: 2px; } .ca11y-btn[aria-pressed="true"] { background: #0D9488; color: #fff; } .ca11y-btn.speaking { background: #F59E0B; color: #fff; } .ca11y-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ca11y-btn span { font-size: 10px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; } /* Dark theme pages */ html[data-theme="dark"] .ca11y-bar { background: rgba(28, 25, 23, .92); border-color: rgba(255, 255, 255, .14); } html[data-theme="dark"] .ca11y-btn { color: #E7E5E4; } /* Small screens: collapse to icons so the bar never covers gameplay */ @media (max-width: 380px) { .ca11y-btn span { display: none; } .ca11y-btn { min-width: 48px; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .ca11y-btn { transition: none; } } @media print { .ca11y-bar { display: none !important; } }