/* GroundSwell self-hosted accessibility toolbar — no third-party account. Accent: #7FBBE6 (matches the app's blue). Prefs persist in localStorage under `mt_a11y_prefs` and are re-applied on every load by accessibility.js. */ :root { --mt-a11y-accent: #7FBBE6; } /* Floating launcher button (bottom-right). Lives on so page text-size zoom (applied to ) never scales the control itself. */ .mt-a11y-btn { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--mt-a11y-accent); color: #0d0f17; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mt-a11y-btn:hover { transform: scale(1.06); } .mt-a11y-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .mt-a11y-btn svg { width: 28px; height: 28px; } .mt-a11y-panel { position: fixed; right: 20px; bottom: 84px; z-index: 2147483000; width: 300px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); overflow-y: auto; background: #38495F; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.4; } .mt-a11y-panel.open { display: block; } .mt-a11y-panel h2 { font-size: 1.05rem; margin: 0 0 2px; color: #fff; } .mt-a11y-sub { color: #94a3b8; font-size: 0.82rem; margin: 0 0 14px; } .mt-a11y-row { margin-bottom: 12px; } .mt-a11y-label { display: block; font-size: 0.85rem; color: #cbd5e1; margin-bottom: 6px; } .mt-a11y-steps { display: flex; align-items: center; gap: 8px; } .mt-a11y-steps .mt-a11y-bar { flex: 1; display: flex; gap: 4px; } .mt-a11y-steps .mt-a11y-bar span { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); } .mt-a11y-steps .mt-a11y-bar span.on { background: var(--mt-a11y-accent); } .mt-a11y-steps button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #e2e8f0; font-size: 1.1rem; cursor: pointer; line-height: 1; } .mt-a11y-steps button:hover { background: rgba(255, 255, 255, 0.1); } .mt-a11y-steps button:focus-visible { outline: 2px solid var(--mt-a11y-accent); outline-offset: 1px; } .mt-a11y-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #e2e8f0; font-size: 0.9rem; font-family: inherit; cursor: pointer; text-align: left; } .mt-a11y-toggle:hover { background: rgba(255, 255, 255, 0.07); } .mt-a11y-toggle:focus-visible { outline: 2px solid var(--mt-a11y-accent); outline-offset: 1px; } .mt-a11y-toggle .mt-a11y-pip { flex-shrink: 0; width: 38px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.15s; } .mt-a11y-toggle .mt-a11y-pip::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; } .mt-a11y-toggle[aria-pressed="true"] .mt-a11y-pip { background: var(--mt-a11y-accent); } .mt-a11y-toggle[aria-pressed="true"] .mt-a11y-pip::after { transform: translateX(16px); } .mt-a11y-reset { width: 100%; margin-top: 6px; padding: 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: #94a3b8; font-size: 0.85rem; font-family: inherit; cursor: pointer; } .mt-a11y-reset:hover { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.3); } .mt-a11y-reset:focus-visible { outline: 2px solid var(--mt-a11y-accent); outline-offset: 1px; } .mt-a11y-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #94a3b8; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 6px; } .mt-a11y-close:hover { color: #e2e8f0; } /* ============================================================ Page-level accessibility overrides (applied to ). ============================================================ */ /* Readable font — generic legible stack, no external font needed. */ html.mt-a11y-readable, html.mt-a11y-readable body, html.mt-a11y-readable body * { font-family: "Atkinson Hyperlegible", Verdana, Tahoma, Arial, sans-serif !important; letter-spacing: 0.01em !important; } /* Highlight links — underline + soft highlight (skips the toolbar's own controls). */ html.mt-a11y-links a:not(.mt-a11y-btn):not(.mt-a11y-reset) { text-decoration: underline !important; text-underline-offset: 2px !important; background: rgba(255, 235, 59, 0.22) !important; outline: 1px solid rgba(255, 235, 59, 0.55); } /* High contrast — force strong black/white/yellow. Broad + heavy by design. */ html.mt-a11y-contrast body { background: #000 !important; } html.mt-a11y-contrast body *:not(.mt-a11y-btn):not(.mt-a11y-panel):not(.mt-a11y-panel *) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html.mt-a11y-contrast a:not(.mt-a11y-btn) { color: #ffff00 !important; } html.mt-a11y-contrast button:not(.mt-a11y-btn):not(.mt-a11y-close), html.mt-a11y-contrast .btn { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* Keep the toolbar itself usable in high-contrast. */ html.mt-a11y-contrast .mt-a11y-btn { background: #000 !important; color: #ffff00 !important; border: 2px solid #fff !important; } html.mt-a11y-contrast .mt-a11y-panel { background: #000 !important; border: 2px solid #fff !important; }