/** * QR Communication — Accessibility module * ------------------------------------------------------------- * - Floating accessibility button (FAB) * - Modal panel with toggles * - Global modifier classes applied to via data-a11y-* * * Activated only when the user opts in. No visual impact when all * options are off, beyond the FAB itself. */ /* ============================================================ Floating Accessibility Button (FAB) ============================================================ */ .a11y-fab { position: fixed; right: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem); width: 52px; height: 52px; border-radius: 50%; border: 2px solid transparent; background: var(--accent-primary, #0496B5); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); cursor: pointer; z-index: 950; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .a11y-fab:hover { transform: translateY(-2px); } .a11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-color: var(--accent-primary, #0496B5); } .a11y-fab svg { width: 28px; height: 28px; fill: currentColor; pointer-events: none; } /* Hide FAB while panel open to prevent stacking confusion */ [data-a11y-open="true"] .a11y-fab { visibility: hidden; } /* ============================================================ Panel (dialog) ============================================================ */ .a11y-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 990; display: none; } [data-a11y-open="true"] .a11y-overlay { display: block; } .a11y-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 560px); max-height: 86vh; overflow-y: auto; background: var(--bg-secondary, #FFFFFF); color: var(--text-primary, #0F172A); border-radius: 16px; border: 1px solid var(--border-color, #E1E8F0); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); padding: 1.5rem 1.5rem 1rem; z-index: 1000; display: none; } [data-a11y-open="true"] .a11y-panel { display: block; } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; } .a11y-panel__title { font-size: 1.25rem; font-weight: 700; margin: 0; } .a11y-panel__close { background: transparent; border: 1px solid var(--border-color, #E1E8F0); color: inherit; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .a11y-panel__close:hover { background: var(--surface-hover, #ECF0F6); } .a11y-panel__close:focus-visible { outline: 3px solid var(--accent-primary, #0496B5); outline-offset: 2px; } .a11y-panel__intro { font-size: 0.95rem; color: var(--text-secondary, #475569); margin: 0 0 1rem; } .a11y-panel__group { border: none; padding: 0; margin: 0 0 1rem; } .a11y-panel__legend { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #475569); margin-bottom: 0.5rem; } .a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } @media (max-width: 480px) { .a11y-grid { grid-template-columns: 1fr; } } /* Toggle button (each option) */ .a11y-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid var(--border-color, #E1E8F0); background: var(--bg-primary, #FAFCFE); color: var(--text-primary, #0F172A); font-size: 0.9rem; cursor: pointer; text-align: left; width: 100%; transition: background-color 0.15s ease, border-color 0.15s ease; } .a11y-option:hover { background: var(--surface-hover, #ECF0F6); } .a11y-option:focus-visible { outline: 3px solid var(--accent-primary, #0496B5); outline-offset: 2px; } .a11y-option[aria-pressed="true"] { background: color-mix(in srgb, var(--accent-primary, #0496B5) 12%, transparent); border-color: var(--accent-primary, #0496B5); } .a11y-option[aria-pressed="true"] .a11y-option__check { background: var(--accent-primary, #0496B5); border-color: var(--accent-primary, #0496B5); color: #fff; } .a11y-option__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent-primary, #0496B5); } .a11y-option__label { flex: 1 1 auto; display: flex; flex-direction: column; } .a11y-option__title { font-weight: 600; line-height: 1.2; } .a11y-option__desc { font-size: 0.78rem; color: var(--text-secondary, #475569); line-height: 1.3; } .a11y-option__check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-color-strong, #CBD5E1); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0; } .a11y-option__check::after { content: ""; width: 12px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); opacity: 0; } .a11y-option[aria-pressed="true"] .a11y-option__check::after { opacity: 1; } /* Three-state size selector */ .a11y-stepper { display: flex; gap: 0.25rem; background: var(--bg-primary, #FAFCFE); border: 1px solid var(--border-color, #E1E8F0); border-radius: 10px; padding: 0.25rem; } .a11y-stepper__btn { flex: 1; padding: 0.5rem 0.5rem; background: transparent; border: none; border-radius: 8px; color: inherit; font-size: 0.9rem; cursor: pointer; } .a11y-stepper__btn:focus-visible { outline: 3px solid var(--accent-primary, #0496B5); outline-offset: 2px; } .a11y-stepper__btn[aria-pressed="true"] { background: var(--accent-primary, #0496B5); color: #fff; font-weight: 600; } .a11y-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color, #E1E8F0); } .a11y-reset { background: transparent; border: 1px solid var(--border-color-strong, #CBD5E1); color: var(--text-primary, #0F172A); padding: 0.5rem 0.85rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; } .a11y-reset:hover { background: var(--surface-hover, #ECF0F6); } .a11y-reset:focus-visible { outline: 3px solid var(--accent-primary, #0496B5); outline-offset: 2px; } .a11y-panel__hint { font-size: 0.78rem; color: var(--text-tertiary, #94A3B8); } /* Live region (visually hidden but announced) */ .a11y-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ GLOBAL OPT-IN MODIFIERS (applied on ) ============================================================ */ /* --- Text size --- */ html[data-a11y-text-size="lg"] { font-size: 112.5%; } /* ~18px */ html[data-a11y-text-size="xl"] { font-size: 125%; } /* ~20px */ html[data-a11y-text-size="xxl"] { font-size: 137.5%; } /* ~22px */ /* --- Increased line height & letter spacing for readability --- */ html[data-a11y-readable="true"] body, html[data-a11y-readable="true"] p, html[data-a11y-readable="true"] li, html[data-a11y-readable="true"] dd, html[data-a11y-readable="true"] dt, html[data-a11y-readable="true"] a, html[data-a11y-readable="true"] span:not([class*="icon"]) { line-height: 1.85 !important; letter-spacing: 0.04em !important; word-spacing: 0.12em !important; } /* --- Dyslexia-friendly font (no external font, robust stack) --- */ html[data-a11y-dyslexia="true"] body, html[data-a11y-dyslexia="true"] body * { font-family: "Atkinson Hyperlegible", "Lexend", "Comic Neue", "Verdana", "Tahoma", sans-serif !important; letter-spacing: 0.03em !important; } /* --- High contrast (overrides theme tokens) --- */ html[data-a11y-contrast="high"] { --bg-primary: #000000; --bg-secondary: #000000; --bg-tertiary: #000000; --bg-elevated: #000000; --bg-inverted: #FFFFFF; --text-primary: #FFFFFF; --text-secondary: #FFFF00; --text-tertiary: #FFFF00; --text-inverted: #000000; --border-color: #FFFFFF; --border-color-strong: #FFFFFF; --border-color-subtle: #FFFFFF; --accent-primary: #00FFFF; --accent-secondary: #00FF66; --accent-hover: #00FFFF; --surface-hover: #222222; --surface-pressed: #333333; } html[data-a11y-contrast="high"] body { background: #000 !important; color: #fff !important; } html[data-a11y-contrast="high"] a { color: #00FFFF !important; text-decoration: underline !important; } html[data-a11y-contrast="high"] button, html[data-a11y-contrast="high"] .btn { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #FFFFFF !important; } html[data-a11y-contrast="high"] img:not(.a11y-keep) { filter: grayscale(0.4) contrast(1.2); } /* --- Underline all links --- */ html[data-a11y-underline-links="true"] a:not(.a11y-fab):not(.btn) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* --- Highlight all links (background pill) --- */ html[data-a11y-highlight-links="true"] a:not(.a11y-fab):not(.btn) { background: #fff59d !important; color: #000 !important; padding: 0 4px; border-radius: 3px; text-decoration: underline !important; } /* --- Enhanced focus ring (forced) --- */ html[data-a11y-focus="true"] *:focus, html[data-a11y-focus="true"] *:focus-visible { outline: 4px solid #ff8a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.35) !important; border-radius: 2px; } /* --- Reduce motion (forced override) --- */ html[data-a11y-motion="reduced"] *, html[data-a11y-motion="reduced"] *::before, html[data-a11y-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="reduced"] .scroll-progress { display: none !important; } /* --- Pause autoplaying media --- */ html[data-a11y-pause-media="true"] video, html[data-a11y-pause-media="true"] [data-autoplay] { /* JS pauses; CSS hides decorative motion canvases if any */ } html[data-a11y-pause-media="true"] canvas[data-decorative="true"] { display: none !important; } /* --- Hide images (decorative + content) --- */ html[data-a11y-hide-images="true"] img:not(.a11y-keep), html[data-a11y-hide-images="true"] picture:not(.a11y-keep), html[data-a11y-hide-images="true"] svg:not(.a11y-keep):not(.a11y-option__icon):not(.a11y-fab svg):not([role="img"]) { visibility: hidden !important; opacity: 0 !important; } /* --- Larger cursor --- */ html[data-a11y-cursor="large"], html[data-a11y-cursor="large"] * { cursor: url("data:image/svg+xml;utf8,") 0 0, auto !important; } /* --- Reading guide bar (follows pointer) --- */ .a11y-reading-guide { position: fixed; left: 0; right: 0; height: 56px; background: rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 940; display: none; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } html[data-a11y-reading-guide="true"] .a11y-reading-guide { display: block; } /* Print: hide accessibility UI */ @media print { .a11y-fab, .a11y-overlay, .a11y-panel, .a11y-reading-guide { display: none !important; } }