/** * Accessibility toolbar — effects and panel styling. * * Effect rules key off data-a11y-* attributes on , set by a11y.js / * a11y-boot.php. They use !important because they exist specifically to win * over utility classes and inline theme colours — that is their whole job. */ /* ── Text size ──────────────────────────────────────────────────────────── Scaling the ROOT font-size, not body, so every rem-based Bootstrap spacing/sizing utility (padding, gaps, icon sizes) grows with it — the same effect as a user pressing browser zoom, but persisted per account. */ :root { --a11y-scale: 1; } html { font-size: calc(100% * var(--a11y-scale)); } /* ── High contrast ─────────────────────────────────────────────────────── */ html[data-a11y-contrast="on"] { --bs-body-bg: #000 !important; --bs-body-color: #fff !important; --ink: #fff !important; --ink-2: #f5f5f5 !important; --surface: #000 !important; --line: #fff !important; --muted: #e5e5e5 !important; } html[data-a11y-contrast="on"] body { background: #000 !important; color: #fff !important; } html[data-a11y-contrast="on"] a { color: #ffe600 !important; text-decoration: underline !important; } html[data-a11y-contrast="on"] .card, html[data-a11y-contrast="on"] .pc-portal-bar, html[data-a11y-contrast="on"] .pc-tabbar, html[data-a11y-contrast="on"] .btn, html[data-a11y-contrast="on"] .form-control, html[data-a11y-contrast="on"] .form-select, html[data-a11y-contrast="on"] .alert { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } html[data-a11y-contrast="on"] .btn-brand, html[data-a11y-contrast="on"] .lp-btn-solid { background: #ffe600 !important; color: #000 !important; border-color: #ffe600 !important; } html[data-a11y-contrast="on"] img { filter: grayscale(1) contrast(1.2); } /* Marketing pages layer decorative photos, glows and gradients (the public homepage hero, section dividers) behind their own text using a private background — not `body` — so the rules above never reach them. Every one of those layers is already marked aria-hidden="true" (screen readers skip them today), which makes them safe to remove outright rather than guess at overriding each one's own background property by name. */ html[data-a11y-contrast="on"] [aria-hidden="true"]:not(.bi, [class*="bi-"]) { display: none !important; } html[data-a11y-contrast="on"] .hp-hero, html[data-a11y-contrast="on"] .hp-section, html[data-a11y-contrast="on"] .pc-footer { background: #000 !important; color: #fff !important; } /* ── Dyslexia-friendly text ─────────────────────────────────────────────── The evidence behind dyslexia-friendly display is mostly about SPACING and a plain, uniform-width-feeling sans typeface, not a novelty font — so this widens letter/word spacing and switches to a widely-available legible stack rather than shipping a custom webfont. */ html[data-a11y-dyslexia="on"] body, html[data-a11y-dyslexia="on"] p, html[data-a11y-dyslexia="on"] li, html[data-a11y-dyslexia="on"] label, html[data-a11y-dyslexia="on"] h1, html[data-a11y-dyslexia="on"] h2, html[data-a11y-dyslexia="on"] h3, html[data-a11y-dyslexia="on"] h4, html[data-a11y-dyslexia="on"] h5, html[data-a11y-dyslexia="on"] h6, html[data-a11y-dyslexia="on"] .btn, html[data-a11y-dyslexia="on"] .form-control { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; letter-spacing: .035em !important; word-spacing: .12em !important; line-height: 1.7 !important; } html[data-a11y-dyslexia="on"] p, html[data-a11y-dyslexia="on"] li { text-align: left !important; } /* ── Underline links ──────────────────────────────────────────────────── */ html[data-a11y-underline="on"] a { text-decoration: underline !important; } /* ── Reduce motion ────────────────────────────────────────────────────── */ html[data-a11y-motion="on"] *, html[data-a11y-motion="on"] *::before, html[data-a11y-motion="on"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ── Large cursor ───────────────────────────────────────────────────────── A self-contained inline SVG data URI — no extra file request, nothing for the Content-Security-Policy's img/script origins to allow. */ html[data-a11y-cursor="on"], html[data-a11y-cursor="on"] a, html[data-a11y-cursor="on"] button { cursor: url('data:image/svg+xml;utf8,') 2 2, auto !important; } /* ── Toggle button ────────────────────────────────────────────────────── */ [data-a11y-open] { line-height: 1; } /* ── Floating trigger (public pages) ────────────────────────────────────── Same fixed-circle language as .pc-totop (the back-to-top button), on the OPPOSITE corner and permanently visible rather than scroll-triggered — this is the one control every visitor must be able to find immediately, signed in or not, without first scrolling to discover it exists. */ .pc-a11y-fab { position: fixed; left: clamp(.9rem, 2.5vw, 1.75rem); bottom: clamp(.9rem, 2.5vw, 1.75rem); width: 3.1rem; height: 3.1rem; padding: 0; border: 0; border-radius: 50%; z-index: 1040; cursor: pointer; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--brand-2, #4f46e5) 0%, var(--brand, #0059b3) 55%, var(--brand-deep, #003090) 100%); box-shadow: 0 10px 26px -8px rgba(0,48,144,.62); color: #fff; font-size: 1.55rem; transition: box-shadow .3s ease, transform .3s ease; } .pc-a11y-fab:hover, .pc-a11y-fab:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px -10px rgba(0,48,144,.7), 0 0 0 6px rgba(0,160,80,.22); } .pc-a11y-fab:focus-visible { outline: 3px solid var(--reef-2, #00a050); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .pc-a11y-fab { transition: none; } } /* ── Panel ────────────────────────────────────────────────────────────── */ .pc-a11y-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1090; } .pc-a11y-sheet { position: fixed; z-index: 1091; background: var(--surface, #fff); color: var(--ink, #0f172a); border-radius: 14px 14px 0 0; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 1rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.25); } @media (min-width: 576px) { .pc-a11y-sheet { left: auto; bottom: auto; top: 4.2rem; right: 1rem; width: 21rem; border-radius: 14px; max-height: calc(100vh - 6rem); } } .pc-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; } .pc-a11y-head h2 { font-size: 1.05rem; font-weight: 800; margin: 0; } .pc-a11y-close { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: inherit; padding: .2rem .4rem; border-radius: 8px; } .pc-a11y-close:hover { background: rgba(127,127,127,.15); } .pc-a11y-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line, #e5e7eb); } .pc-a11y-row:last-of-type { border-bottom: 0; } .pc-a11y-stepper { display: flex; align-items: center; gap: .5rem; } .pc-a11y-stepper button { width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--line, #cbd5e1); background: transparent; color: inherit; font-weight: 700; } .pc-a11y-stepper button:disabled { opacity: .4; } .pc-a11y-stepper span { min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; } .pc-a11y-toggle { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line, #e5e7eb); cursor: pointer; gap: 1rem; } .pc-a11y-toggle:last-of-type { border-bottom: 0; } .pc-a11y-toggle input { width: 2.6rem; height: 1.5rem; accent-color: var(--brand, #0059b3); } .pc-a11y-reset { margin-top: .85rem; width: 100%; padding: .6rem; border-radius: 10px; border: 1px solid var(--line, #cbd5e1); background: transparent; color: inherit; font-weight: 700; } .pc-a11y-reset:hover { background: rgba(127,127,127,.12); }