/* ACaaS Launchpad accessibility toolbar and WCAG basics. Self-hosted and self-contained: no external fonts, no remote assets, no network. Ships as a sibling of a11y.js. Loaded on the Onboarding Wizard app, the front door, the Console, the Decision Analyzer, and the Runtime Monitor, so the same widget and the same baseline WCAG rules travel with every surface. Everything is scoped so the widget stays legible in every mode, including its own high-contrast mode. The widget markup is created by a11y.js and lives directly under , outside any app content root. The page-wide modes are applied broadly, then the widget's own styles are re-asserted with higher specificity so the toolbar never disappears. */ /* ------------------------------------------------------------------ * * 1. WCAG baseline that applies to the page, not just the widget * ------------------------------------------------------------------ */ /* Visible keyboard focus site-wide. We never remove outlines; we make them clear. :focus-visible keeps this off for plain mouse clicks. */ :focus-visible { outline: 3px solid #1b3a6b; outline-offset: 2px; } /* A light halo so the outline reads on dark surfaces too. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.55); } /* Honor the operating-system reduced-motion preference by default, before the user touches the widget at all. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Skip-to-main link: visually hidden until it receives keyboard focus. */ .a11y-skip { position: absolute; left: 8px; top: -60px; z-index: 2147483000; display: inline-block; padding: 10px 16px; background: #1a1a2e; color: #ffffff; font: 700 15px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s ease; } .a11y-skip:focus { top: 0; outline: 3px solid #ffd54a; outline-offset: 2px; } /* Where focus lands after the skip link, do not draw a persistent outline ring around the whole main region. */ [tabindex="-1"]:focus { outline: none; } /* ------------------------------------------------------------------ * * 2. User-selectable modes (classes toggled on by a11y.js) * ------------------------------------------------------------------ */ /* Reduce motion, chosen explicitly in the widget. Mirrors the media query. */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Readable font: high-legibility system stack, no external font file, with a little extra letter and word spacing. */ html.a11y-readable body, html.a11y-readable body * { font-family: Verdana, "DejaVu Sans", "Segoe UI", Tahoma, Arial, sans-serif !important; letter-spacing: 0.03em !important; word-spacing: 0.08em !important; } /* Highlight links: underline and visually strengthen every link. */ html.a11y-highlight-links body a { text-decoration: underline !important; text-underline-offset: 2px !important; text-decoration-thickness: 2px !important; font-weight: 700 !important; outline: 1px dashed currentColor; outline-offset: 1px; } /* High contrast: boost foreground and background contrast across the page. Recognizable black canvas, white text, amber links. */ html.a11y-contrast body { background: #000000 !important; color: #ffffff !important; } html.a11y-contrast body * { background-color: transparent !important; background-image: none !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-contrast body a { color: #ffe27a !important; text-decoration: underline !important; } html.a11y-contrast body button, html.a11y-contrast body input, html.a11y-contrast body select, html.a11y-contrast body textarea { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff !important; } html.a11y-contrast body :focus-visible { outline: 3px solid #ffe27a !important; } /* ------------------------------------------------------------------ * * 3. The floating toolbar button * ------------------------------------------------------------------ */ .a11y-root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.35; } .a11y-fab { position: fixed; right: 20px; bottom: 20px; z-index: 2147483001; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #ffffff; background: #1a1a2e; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); padding: 0; } .a11y-fab:hover { background: #24244a; } .a11y-fab__glyph { font-size: 26px; line-height: 1; } .a11y-fab:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; } /* ------------------------------------------------------------------ * * 4. The panel * ------------------------------------------------------------------ */ .a11y-panel { position: fixed; right: 20px; bottom: 86px; z-index: 2147483001; width: 320px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); overflow-y: auto; background: #ffffff; color: #16213e; border: 2px solid #1a1a2e; border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32); padding: 16px 16px 18px; } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .a11y-panel__title { margin: 0; font-size: 17px; font-weight: 800; color: #1a1a2e; } .a11y-close { background: transparent; border: 1px solid #c4c9d4; border-radius: 6px; width: 30px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; color: #1a1a2e; } .a11y-close:hover { background: #f0f1f5; } .a11y-group { border: 0; margin: 0 0 14px; padding: 0; } .a11y-group__legend { padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4b5563; } /* Text-size stepper */ .a11y-size { display: flex; align-items: center; gap: 8px; } .a11y-size__btn { flex: 0 0 auto; min-width: 44px; height: 44px; border: 1px solid #1a1a2e; background: #ffffff; color: #1a1a2e; border-radius: 8px; font-size: 18px; font-weight: 800; cursor: pointer; } .a11y-size__btn:hover { background: #eef0f6; } .a11y-size__reset { flex: 1 1 auto; font-size: 14px; } .a11y-size__value { flex: 0 0 auto; min-width: 52px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } /* Toggle rows: real checkboxes with visible labels */ .a11y-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #e6e8ee; cursor: pointer; font-size: 15px; } .a11y-toggle:first-of-type { border-top: 0; } .a11y-toggle input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #00897b; cursor: pointer; } .a11y-toggle__text { flex: 1 1 auto; } .a11y-resetall { width: 100%; margin-top: 12px; padding: 11px; border: 1px solid #1a1a2e; background: #1a1a2e; color: #ffffff; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; } .a11y-resetall:hover { background: #2c2c50; } .a11y-panel__foot { margin: 12px 0 0; font-size: 12px; color: #6b7280; line-height: 1.4; } /* ------------------------------------------------------------------ * * 5. Re-assert the widget's own styling inside page-wide modes, with * higher specificity so the toolbar always stays legible. * ------------------------------------------------------------------ */ /* Readable-font mode must not restyle the widget's own type. */ html.a11y-readable .a11y-root, html.a11y-readable .a11y-root * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; letter-spacing: normal !important; word-spacing: normal !important; } /* Highlight-links mode must not restyle the widget or the skip link. */ html.a11y-highlight-links .a11y-root a, html.a11y-highlight-links a.a11y-skip { text-decoration: none !important; outline: none !important; font-weight: inherit !important; } /* High-contrast mode keeps the widget on its own legible palette. */ html.a11y-contrast .a11y-fab { background: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } html.a11y-contrast .a11y-panel { background: #ffffff !important; color: #16213e !important; border-color: #1a1a2e !important; } html.a11y-contrast .a11y-panel *, html.a11y-contrast .a11y-panel input { color: #16213e !important; border-color: #c4c9d4 !important; } html.a11y-contrast .a11y-panel__title { color: #1a1a2e !important; } html.a11y-contrast .a11y-size__btn, html.a11y-contrast .a11y-close { border-color: #1a1a2e !important; color: #1a1a2e !important; } html.a11y-contrast .a11y-resetall { background: #1a1a2e !important; color: #ffffff !important; border-color: #1a1a2e !important; } html.a11y-contrast a.a11y-skip { background: #1a1a2e !important; color: #ffffff !important; } /* Respect chosen reduced motion for the widget too. */ html.a11y-reduce-motion .a11y-skip, html.a11y-reduce-motion .a11y-fab { transition: none !important; }