/* MetaTool self-hosted accessibility toolbar. No third-party dependency. Loaded site-wide via templates/_accessibility.html. All sizing here is in px so the widget itself is immune to the text-size control (which scales the document root font-size). */ #mt-a11y, #mt-a11y * { box-sizing: border-box; } /* Floating trigger button (bottom-right). */ #mt-a11y-trigger { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; border: none; background: #7FBBE6; color: #0f172a; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); z-index: 2147483000; transition: transform .15s ease, box-shadow .15s ease; } #mt-a11y-trigger:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); } #mt-a11y-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #mt-a11y-trigger svg { width: 28px; height: 28px; } /* Panel. */ #mt-a11y-panel { position: fixed; right: 20px; bottom: 84px; width: 300px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); overflow-y: auto; background: #1F2A36; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); padding: 18px; z-index: 2147483000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; } #mt-a11y-panel[hidden] { display: none; } #mt-a11y-panel h2 { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: #fff; } #mt-a11y-panel .mt-a11y-sub { font-size: 12px; color: #94a3b8; margin: 0 0 14px; } #mt-a11y-panel .mt-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } #mt-a11y-panel .mt-a11y-row:first-of-type { border-top: none; } #mt-a11y-panel .mt-a11y-label { font-size: 13px; color: #e2e8f0; } /* Toggle buttons. */ #mt-a11y-panel .mt-a11y-toggle { flex: 0 0 auto; min-width: 56px; border: 1px solid rgba(255, 255, 255, 0.18); background: #0f172a; color: #cbd5e1; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s; } #mt-a11y-panel .mt-a11y-toggle[aria-pressed="true"] { background: #7FBBE6; color: #0f172a; border-color: #7FBBE6; } #mt-a11y-panel .mt-a11y-toggle:focus-visible { outline: 2px solid #7FBBE6; outline-offset: 2px; } /* Text-size stepper. */ #mt-a11y-panel .mt-a11y-stepper { display: flex; align-items: center; gap: 6px; } #mt-a11y-panel .mt-a11y-step { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.18); background: #0f172a; color: #fff; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; line-height: 1; } #mt-a11y-panel .mt-a11y-step:hover { border-color: #7FBBE6; } #mt-a11y-panel .mt-a11y-step:focus-visible { outline: 2px solid #7FBBE6; outline-offset: 2px; } #mt-a11y-panel .mt-a11y-step:disabled { opacity: .4; cursor: not-allowed; } #mt-a11y-panel .mt-a11y-stepval { min-width: 34px; text-align: center; font-size: 12px; color: #94a3b8; } #mt-a11y-panel .mt-a11y-reset { width: 100%; margin-top: 14px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } #mt-a11y-panel .mt-a11y-reset:hover { background: rgba(255, 255, 255, 0.06); } #mt-a11y-panel .mt-a11y-reset:focus-visible { outline: 2px solid #7FBBE6; outline-offset: 2px; } #mt-a11y-panel .mt-a11y-foot { margin-top: 12px; font-size: 11px; color: #64748b; text-align: center; line-height: 1.4; } /* ---- Effects applied to ------------------------------------------ */ /* Readable font: override the brand display fonts with a high-legibility sans. */ html.mt-a11y-readable, html.mt-a11y-readable * { font-family: Arial, Helvetica, "Segoe UI", sans-serif !important; letter-spacing: normal !important; } /* The toolbar always keeps its own font. */ html.mt-a11y-readable #mt-a11y, html.mt-a11y-readable #mt-a11y * { font-family: Helvetica, Arial, sans-serif !important; } /* Highlight links: make every link obvious. */ html.mt-a11y-links a:not(#mt-a11y a) { text-decoration: underline !important; text-underline-offset: 2px !important; outline: 1px dashed currentColor; outline-offset: 2px; } /* High contrast: force strong fg/bg and visible borders, leave the toolbar alone. */ html.mt-a11y-contrast body { background: #000 !important; } html.mt-a11y-contrast body :not(#mt-a11y):not(#mt-a11y *) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } html.mt-a11y-contrast a:not(#mt-a11y a) { color: #ffe600 !important; text-decoration: underline !important; } html.mt-a11y-contrast button:not(#mt-a11y button):not(#mt-a11y *), html.mt-a11y-contrast input, html.mt-a11y-contrast select, html.mt-a11y-contrast textarea { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } /* Keep images visible (don't blank them) but lift them off pure black. */ html.mt-a11y-contrast img { background: #fff !important; } /* Respect reduced-motion for the trigger/panel transitions. */ @media (prefers-reduced-motion: reduce) { #mt-a11y-trigger { transition: none; } }