/* ========================================================================== Accessibility Widget - CBS Business Solutions Lightweight, dependency-free floating accessibility controls. All widget UI is sized in px so it stays constant while the page text scales (text scaling is done by changing the root font-size). ========================================================================== */ /* ---- Toggle button (floating) ---- */ .a11y-toggle { position: fixed; bottom: 20px; inset-inline-end: 20px; /* opposite side from the cookie notice (which anchors inline-start) */ width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #1d4ed8; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); z-index: 2147483000; transition: transform 0.15s ease, background 0.15s ease; } .a11y-toggle:hover { background: #1e40af; transform: scale(1.05); } .a11y-toggle:focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; } .a11y-toggle svg { width: 28px; height: 28px; display: block; fill: currentColor; } /* ---- Panel ---- */ .a11y-panel { position: fixed; bottom: 84px; inset-inline-end: 20px; width: 264px; max-width: calc(100vw - 40px); background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22); padding: 16px; z-index: 2147483000; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; box-sizing: border-box; } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #0f172a; } .a11y-group { margin-bottom: 14px; } .a11y-group:last-child { margin-bottom: 0; } .a11y-group-label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; } /* Row of buttons for text sizing */ .a11y-row { display: flex; gap: 8px; align-items: center; } .a11y-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 9px; background: #f8fafc; color: #0f172a; font-size: 15px; font-family: inherit; cursor: pointer; text-align: center; transition: background 0.12s ease, border-color 0.12s ease; } .a11y-btn:hover { background: #eef2ff; border-color: #a5b4fc; } .a11y-btn:focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; } .a11y-btn.is-active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .a11y-btn-toggle { width: 100%; } .a11y-size-display { min-width: 46px; text-align: center; font-weight: 700; font-size: 14px; color: #1d4ed8; } .a11y-reset { width: 100%; margin-top: 4px; background: #fff; border-style: dashed; } /* Close button in header */ .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .a11y-panel-head h2 { margin: 0; } .a11y-close { border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #64748b; padding: 2px 6px; border-radius: 6px; } .a11y-close:hover { background: #f1f5f9; color: #0f172a; } .a11y-close:focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; } /* ========================================================================== State classes applied to ========================================================================== */ /* ---- Stop animations ---- */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ---- High contrast ---- */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6, html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast strong, html.a11y-contrast label, html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast blockquote, html.a11y-contrast figcaption { color: #fff !important; background-color: transparent !important; } html.a11y-contrast a { color: #ffd24d !important; } html.a11y-contrast a:hover { color: #ffe38a !important; } html.a11y-contrast .card, html.a11y-contrast .container, html.a11y-contrast section, html.a11y-contrast header, html.a11y-contrast footer, html.a11y-contrast .footer, html.a11y-contrast main, html.a11y-contrast article { background: #000 !important; background-image: none !important; border-color: #fff !important; } html.a11y-contrast button, html.a11y-contrast .btn { background: #000 !important; color: #ffd24d !important; border: 2px solid #ffd24d !important; } html.a11y-contrast img { filter: none; } /* Keep the widget itself readable regardless of contrast/no-motion state */ html.a11y-contrast .a11y-panel { background: #ffffff !important; color: #0f172a !important; border-color: #0f172a !important; } html.a11y-contrast .a11y-panel h2, html.a11y-contrast .a11y-panel .a11y-group-label, html.a11y-contrast .a11y-panel .a11y-btn { color: inherit !important; } html.a11y-contrast .a11y-toggle { background: #000 !important; color: #ffd24d !important; border-color: #ffd24d !important; } @media (max-width: 480px) { .a11y-toggle { width: 46px; height: 46px; bottom: 16px; inset-inline-end: 16px; } .a11y-panel { bottom: 72px; inset-inline-end: 16px; } } /* ========================================================================== Global keyboard-focus visibility (WCAG 2.1 AA - 2.4.7 Focus Visible) This file is loaded on every page. On index.html / he/index.html it is loaded UNLAYERED, so it also wins over the layered `outline: none` rules in styles-new.css (unlayered CSS beats layered CSS regardless of specificity). The widget's own controls above keep their amber ring because those selectors have higher specificity than these. ========================================================================== */ /* The root-cause `outline: none` focus rules (.faq-question:focus, .problem-statement *, faq aria-expanded) were removed at the source in styles-new.css. !important is kept here because the remaining brand focus rules (e.g. html[lang="en"] .btn-primary:focus) have high specificity, and an enforced, consistent focus indicator must win over them — verified in browser. :focus-visible is what keyboard users get. */ :focus-visible { outline: 2px solid #1D4ED8 !important; outline-offset: 2px !important; } :focus { outline: 2px solid #1D4ED8; outline-offset: 2px; } /* On dark surfaces (dark header / dark footer) a white ring reads far more clearly than blue. Scoped so it only affects those contexts. */ .header :focus-visible, .footer :focus-visible { outline-color: #FFFFFF !important; } .header :focus, .footer :focus { outline-color: #FFFFFF; }