/* QORA / qoraguard.com — accessibility preferences. Preferences are stored in localStorage (key "qg_a11y") and applied by a11y.js as classes on (plus an inline font-size for text scaling). Everything here is opt-in and additive: with no class set the site looks exactly as before. Brand tokens mirror qg.css (QORA red #e10f1f, surface #111318). */ /* ── High-contrast mode ────────────────────────────────────────────────── Push text to full white, brighten the accent, make borders visible, and drop the ambient red glow + scan grid so content reads at maximum contrast. We override the shared design tokens so the whole site (which is built on them) lifts in one place. */ html.a11y-contrast { --bg: #000000; --bg-2: #000000; --surface: #0a0b0f; --surface-2: #12141b; --fg: #ffffff; --fg-dim: #ffffff; --fg-faint: rgba(255, 255, 255, 0.85); --accent: #ff4d59; --accent-2: #ff6b75; --border: rgba(255, 255, 255, 0.55); --border-soft: rgba(255, 255, 255, 0.4); } html.a11y-contrast body::before, html.a11y-contrast body::after { display: none !important; } html.a11y-contrast .chrome { -webkit-text-fill-color: #ffffff; color: #ffffff !important; background: none !important; } html.a11y-contrast a { text-decoration: underline; } html.a11y-contrast .btn-primary { background: var(--accent); color: #000; } html.a11y-contrast .btn { border-color: var(--border); } /* ── Underline links ───────────────────────────────────────────────────── Don't rely on colour alone to signal links. We skip logo/button anchors so chrome doesn't sprout underlines, but everything in running content gets one. */ html.a11y-underline main a, html.a11y-underline .site-footer a, html.a11y-underline p a { text-decoration: underline !important; text-underline-offset: 2px; } /* ── Reduce motion ─────────────────────────────────────────────────────── Kill animations, transitions and smooth scrolling site-wide. Also neutralises the reveal-on scroll animations and the hero crossfade timing. */ html.a11y-motion, html.a11y-motion * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.a11y-motion [data-reveal] { opacity: 1 !important; transform: none !important; } /* ── Readable / dyslexia-friendly font ─────────────────────────────────── Prefer a real dyslexia face if installed, then highly-legible system faces. Looser tracking + line-height aids reading. No web-font is downloaded. */ html.a11y-readable, html.a11y-readable body, html.a11y-readable button, html.a11y-readable input, html.a11y-readable select, html.a11y-readable textarea { font-family: "OpenDyslexic", "Atkinson Hyperlegible", "Comic Sans MS", Verdana, Tahoma, sans-serif !important; letter-spacing: 0.02em; word-spacing: 0.08em; line-height: 1.75 !important; } html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3 { letter-spacing: 0 !important; } /* ── Always-on focus visibility (helps keyboard users once any pref is on) ─ */ html.a11y-focus :focus-visible, html.a11y-contrast :focus-visible { outline: 3px solid var(--accent, #e10f1f) !important; outline-offset: 2px !important; border-radius: 2px; } /* ── The floating widget + panel (self-injected by a11y.js) ──────────────── */ #qg-a11y-fab { position: fixed; left: 18px; bottom: 18px; z-index: 2147483000; width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; padding: 0; background: #e10f1f; color: #fff; box-shadow: 0 8px 30px -8px rgba(225, 15, 31, 0.7), 0 0 0 1px rgba(225, 15, 31, 0.35); transition: transform 0.15s ease, background 0.15s ease; } #qg-a11y-fab:hover { background: #ff2b3a; transform: translateY(-1px); } #qg-a11y-fab svg { width: 26px; height: 26px; display: block; } #qg-a11y-panel { position: fixed; left: 18px; bottom: 80px; z-index: 2147483000; width: 288px; max-width: calc(100vw - 36px); background: #111318; color: #f5f5f7; border: 1px solid #24262d; border-radius: 14px; padding: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } #qg-a11y-panel[hidden] { display: none; } #qg-a11y-panel .qg-a11y-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; } #qg-a11y-panel .qg-a11y-title svg { width: 18px; height: 18px; color: #e10f1f; } #qg-a11y-panel .qg-a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px 12px; margin-bottom: 4px; border-bottom: 1px solid #24262d; } #qg-a11y-panel .qg-a11y-size .lbl { font-size: 0.9rem; } #qg-a11y-panel .qg-a11y-size .ctrl { display: flex; align-items: center; gap: 8px; } #qg-a11y-panel .qg-a11y-size .pct { font-size: 0.78rem; color: rgba(245, 245, 247, 0.62); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; } #qg-a11y-panel button.qg-step { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; border: 1px solid #24262d; background: #161920; color: #f5f5f7; font-size: 1rem; line-height: 1; display: grid; place-items: center; } #qg-a11y-panel button.qg-step:hover { border-color: rgba(245, 245, 247, 0.4); background: #1c2029; } #qg-a11y-panel button.qg-step:disabled { opacity: 0.4; cursor: not-allowed; } #qg-a11y-panel label.qg-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 0.9rem; cursor: pointer; border-radius: 8px; } #qg-a11y-panel label.qg-toggle:hover { background: rgba(245, 245, 247, 0.04); } #qg-a11y-panel label.qg-toggle input[type=checkbox] { width: 18px; height: 18px; accent-color: #e10f1f; flex: none; } #qg-a11y-panel .qg-a11y-foot { margin-top: 10px; border-top: 1px solid #24262d; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: rgba(245, 245, 247, 0.62); } #qg-a11y-panel .qg-a11y-foot a { color: #e10f1f; text-decoration: none; } #qg-a11y-panel .qg-a11y-foot a:hover { text-decoration: underline; } #qg-a11y-panel button.qg-reset { border: 1px solid #24262d; background: transparent; color: rgba(245, 245, 247, 0.62); border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; cursor: pointer; } #qg-a11y-panel button.qg-reset:hover { color: #f5f5f7; border-color: rgba(245, 245, 247, 0.4); } @media print { #qg-a11y-fab, #qg-a11y-panel { display: none !important; } }