/** * Native Accessibility Remediation — visitor toolset. * * Every adjustment is keyed off a data-a11y-* attribute on , set by the * pre-paint snippet and the panel script. The plugin's own UI carries the * .na11y-ui class and is excluded from every global effect, so the panel stays * readable while the page around it is inverted, greyscaled or blacked out. */ /* ══════════════════════════════════════════════════════════════════════════ 1. Shared primitives ══════════════════════════════════════════════════════════════════════════ */ :root { --na11y-accent: #005a9c; --na11y-accent-ink: #ffffff; --na11y-surface: #ffffff; --na11y-surface-2: #f5f6f8; --na11y-ink: #1a1d21; --na11y-ink-2: #55606c; --na11y-line: #dfe3e8; --na11y-radius: 10px; --na11y-shadow: 0 18px 48px rgba(15, 23, 42, 0.22); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .native-a11y-skip-link { position: absolute; top: -60px; left: 0; z-index: 2147483647; padding: 10px 18px; background: #000; color: #fff; font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .native-a11y-skip-link:focus { top: 0; outline: 3px solid #ffcc00; outline-offset: 2px; } [dir="rtl"] .native-a11y-skip-link { left: auto; right: 0; } @media print { .no-print { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ 2. Panel chrome ══════════════════════════════════════════════════════════════════════════ */ #native-a11y-ui-root { position: fixed; /* A positioned element with a z-index forms a stacking context, so every z-index below is relative to this one. Inter-plugin contract with the Native Privacy & Consent Compliance plugin: this root (2147483646) must outrank its consent notice as a whole (.na11y-consent, 2147483644), or the open panel would render beneath the banner. Harmless when that plugin is absent. */ z-index: 2147483646; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--na11y-ink); } /* Inter-plugin contract: --na11y-consent-inset is set on by the Native Privacy & Consent Compliance plugin's script, to the height of its notice, so the trigger stays reachable while the notice is up — somebody may need high contrast in order to read it. The 0px fallback makes this a no-op when that plugin is absent. */ .na11y-pos--bottom-right { bottom: calc(24px + var(--na11y-consent-inset, 0px)); right: 24px; } .na11y-pos--bottom-left { bottom: calc(24px + var(--na11y-consent-inset, 0px)); left: 24px; } .na11y-pos--middle-right { top: 50%; right: 24px; } .na11y-pos--middle-left { top: 50%; left: 24px; } /* Centring is applied to the button, never to the root: a transform on the root would become the containing block for the fixed-position dialog. */ .na11y-pos--middle-right #native-a11y-toggle, .na11y-pos--middle-left #native-a11y-toggle { transform: translateY(-50%); } .na11y-pos--middle-right #native-a11y-toggle:hover, .na11y-pos--middle-left #native-a11y-toggle:hover { transform: translateY(-50%) scale(1.06); } .na11y-pos--top-right { top: 24px; right: 24px; } .na11y-pos--top-left { top: 24px; left: 24px; } #native-a11y-toggle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 2px solid var(--na11y-accent-ink); border-radius: 50%; background: var(--na11y-accent); color: var(--na11y-accent-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .na11y-size--small #native-a11y-toggle { width: 44px; height: 44px; } .na11y-size--large #native-a11y-toggle { width: 72px; height: 72px; } #native-a11y-toggle svg { width: 60%; height: 60%; } #native-a11y-toggle:hover { transform: scale(1.06); } #native-a11y-toggle:focus-visible { outline: 3px solid #ffcc00; outline-offset: 3px; } #native-a11y-modal { position: fixed; inset: 0; z-index: 2147483645; display: flex; align-items: stretch; justify-content: flex-end; } /* The dialog ships with [hidden]; without this rule it would flash open before the script runs. */ #native-a11y-modal[hidden] { display: none; } .a11y-modal-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); border: 0; } .a11y-modal-content { position: relative; display: flex; flex-direction: column; width: 400px; max-width: 100vw; height: 100%; background: var(--na11y-surface); box-shadow: var(--na11y-shadow); animation: na11y-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .na11y-pos--bottom-left #native-a11y-modal, .na11y-pos--middle-left #native-a11y-modal, .na11y-pos--top-left #native-a11y-modal { justify-content: flex-start; } @keyframes na11y-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .a11y-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--na11y-accent); color: var(--na11y-accent-ink); } .a11y-modal-header h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: inherit; } #a11y-modal-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: inherit; cursor: pointer; } #a11y-modal-close:hover { background: rgba(255, 255, 255, 0.3); } .a11y-modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 24px; } .a11y-section { margin-bottom: 26px; } .a11y-section h3 { margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--na11y-line); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--na11y-ink-2); } .na11y-section__note { margin: 8px 0 12px; font-size: 0.82rem; color: var(--na11y-ink-2); } .a11y-modal-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--na11y-line); background: var(--na11y-surface-2); } .na11y-footer-link { padding: 0; border: 0; background: none; color: var(--na11y-accent); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Buttons ─────────────────────────────────────────────────────────────── */ .na11y-btn { padding: 10px 18px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .na11y-btn--primary { background: var(--na11y-accent); color: var(--na11y-accent-ink); } .na11y-btn--primary:hover { filter: brightness(0.92); } .na11y-btn--ghost { background: var(--na11y-surface); color: var(--na11y-ink); border-color: #7b8794; } .na11y-btn--ghost:hover { background: var(--na11y-surface-2); } .na11y-btn--block { display: block; width: 100%; } .na11y-ui :focus-visible { outline: 3px solid #ffcc00; outline-offset: 2px; } /* Profiles ────────────────────────────────────────────────────────────── */ .na11y-profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .na11y-profile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--na11y-line); border-radius: var(--na11y-radius); background: var(--na11y-surface-2); font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--na11y-ink); text-align: center; cursor: pointer; } .na11y-profile:hover { border-color: var(--na11y-accent); background: var(--na11y-surface); } .na11y-profile.is-active { background: var(--na11y-accent); border-color: var(--na11y-accent); color: var(--na11y-accent-ink); } .na11y-profile__icon { font-size: 1.4rem; line-height: 1; } /* Switch rows ─────────────────────────────────────────────────────────── */ .na11y-row { border-bottom: 1px solid #f0f2f5; } .na11y-row:last-child { border-bottom: 0; } .na11y-switch { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; cursor: pointer; } .na11y-switch input { position: absolute; width: 42px; height: 24px; margin: 0; opacity: 0; cursor: pointer; } .na11y-switch__track { position: relative; flex: none; width: 42px; height: 24px; margin-top: 2px; border-radius: 999px; background: #c3cad3; transition: background-color 0.18s ease; } .na11y-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: transform 0.18s ease; } .na11y-switch input:checked ~ .na11y-switch__track { background: var(--na11y-accent); } .na11y-switch input:checked ~ .na11y-switch__track::after { transform: translateX(18px); } .na11y-switch input:disabled ~ .na11y-switch__track { opacity: 0.55; } .na11y-switch input:focus-visible ~ .na11y-switch__track { outline: 3px solid #ffcc00; outline-offset: 2px; } .na11y-row__text { display: block; } .na11y-row__label { display: block; font-size: 0.9rem; font-weight: 600; } .na11y-row__hint { display: block; font-size: 0.78rem; color: var(--na11y-ink-2); } /* Steppers ────────────────────────────────────────────────────────────── */ .na11y-stepper { margin: 14px 0; } .na11y-stepper__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .na11y-stepper__label { font-size: 0.88rem; font-weight: 600; } .na11y-stepper__value { font-size: 0.82rem; color: var(--na11y-ink-2); font-variant-numeric: tabular-nums; } .na11y-stepper__controls { display: flex; align-items: center; gap: 10px; } .na11y-step-btn { flex: none; width: 36px; height: 36px; border: 1px solid var(--na11y-line); border-radius: 50%; background: var(--na11y-surface-2); font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1; color: var(--na11y-ink); cursor: pointer; } .na11y-step-btn:hover { border-color: var(--na11y-accent); background: var(--na11y-surface); } .na11y-stepper__track { flex: 1; height: 6px; border-radius: 3px; background: var(--na11y-line); overflow: hidden; } .na11y-stepper__fill { display: block; height: 100%; width: 0; background: var(--na11y-accent); } /* Fields, selects, segmented controls ─────────────────────────────────── */ .na11y-field { margin: 14px 0; } .na11y-field__label { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 600; } .na11y-select { width: 100%; padding: 9px 10px; border: 1px solid var(--na11y-line); border-radius: 8px; background: var(--na11y-surface); font: inherit; font-size: 0.9rem; color: var(--na11y-ink); } .na11y-segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--na11y-line); border-radius: 8px; background: var(--na11y-surface-2); } .na11y-segmented button { flex: 1 1 auto; padding: 7px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--na11y-ink-2); cursor: pointer; } .na11y-segmented button[aria-pressed="true"] { background: var(--na11y-accent); color: var(--na11y-accent-ink); } /* Structure list ──────────────────────────────────────────────────────── */ .na11y-structure { max-height: 260px; margin: 10px 0 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--na11y-line); border-radius: 8px; } .na11y-structure__item { border-bottom: 1px solid #f0f2f5; } .na11y-structure__item:last-child { border-bottom: 0; } .na11y-structure__link { display: block; width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 0.83rem; color: var(--na11y-ink); text-align: left; cursor: pointer; } .na11y-structure__link:hover { background: var(--na11y-surface-2); } .na11y-structure__item--h2 .na11y-structure__link { padding-left: 22px; } .na11y-structure__item--h3 .na11y-structure__link { padding-left: 34px; } .na11y-structure__item--h4 .na11y-structure__link { padding-left: 46px; } .na11y-structure__item--h5 .na11y-structure__link, .na11y-structure__item--h6 .na11y-structure__link { padding-left: 58px; } .na11y-structure__item--landmark .na11y-structure__link { font-variant: small-caps; } .na11y-structure__empty { padding: 10px; font-size: 0.83rem; color: var(--na11y-ink-2); } /* Shortcut list ───────────────────────────────────────────────────────── */ .na11y-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 0.82rem; } .na11y-keys dt { margin: 0; } .na11y-keys dd { margin: 0; color: var(--na11y-ink-2); } .na11y-keys kbd { padding: 2px 6px; border: 1px solid var(--na11y-line); border-bottom-width: 2px; border-radius: 4px; background: var(--na11y-surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; } /* Floating aids ───────────────────────────────────────────────────────── */ #a11y-reading-ruler { position: fixed; left: 0; width: 100%; height: 36px; background: rgba(255, 221, 0, 0.28); border-top: 2px solid #f5b800; border-bottom: 2px solid #f5b800; pointer-events: none; z-index: 2147483630; } #a11y-reading-mask-top, #a11y-reading-mask-bottom { position: fixed; left: 0; width: 100%; background: rgba(0, 0, 0, 0.72); pointer-events: none; z-index: 2147483630; } #a11y-reading-mask-top { top: 0; height: 0; } #a11y-reading-mask-bottom { bottom: auto; height: 0; } #a11y-magnifier-bar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(900px, 96vw); max-height: 30vh; overflow: auto; padding: 16px 22px; background: #10141a; color: #fff; font-size: 1.6rem; line-height: 1.4; border-top: 4px solid var(--na11y-accent); pointer-events: none; z-index: 2147483635; } #a11y-visual-alert-area { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 2147483646; pointer-events: none; } .a11y-visual-toast { padding: 12px 22px; border: 2px solid #ffcc00; border-radius: 999px; background: #10141a; color: #fff; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } .na11y-tts-target { outline: 3px dashed var(--na11y-accent) !important; outline-offset: 2px !important; background-color: rgba(255, 221, 0, 0.22) !important; cursor: pointer !important; } @media (max-width: 480px) { .a11y-modal-content { width: 100vw; } .na11y-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .a11y-modal-content { animation: none; } #native-a11y-toggle, .na11y-switch__track, .na11y-switch__track::after { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 3. Page adjustments The .na11y-ui exclusions keep the plugin's own surfaces legible while the rest of the document is transformed. ══════════════════════════════════════════════════════════════════════════ */ /* Typography steps ────────────────────────────────────────────────────── */ html[data-a11y-line-height="2"] body *:not(.na11y-ui):not(.na11y-ui *) { line-height: 1.5 !important; } html[data-a11y-line-height="3"] body *:not(.na11y-ui):not(.na11y-ui *) { line-height: 1.8 !important; } html[data-a11y-line-height="4"] body *:not(.na11y-ui):not(.na11y-ui *) { line-height: 2 !important; } html[data-a11y-line-height="5"] body *:not(.na11y-ui):not(.na11y-ui *) { line-height: 2.4 !important; } html[data-a11y-letter-spacing="2"] body *:not(.na11y-ui):not(.na11y-ui *) { letter-spacing: 0.05em !important; } html[data-a11y-letter-spacing="3"] body *:not(.na11y-ui):not(.na11y-ui *) { letter-spacing: 0.1em !important; } html[data-a11y-letter-spacing="4"] body *:not(.na11y-ui):not(.na11y-ui *) { letter-spacing: 0.15em !important; } html[data-a11y-word-spacing="2"] body *:not(.na11y-ui):not(.na11y-ui *) { word-spacing: 0.1em !important; } html[data-a11y-word-spacing="3"] body *:not(.na11y-ui):not(.na11y-ui *) { word-spacing: 0.2em !important; } html[data-a11y-word-spacing="4"] body *:not(.na11y-ui):not(.na11y-ui *) { word-spacing: 0.3em !important; } html[data-a11y-text-align="left"] body *:not(.na11y-ui):not(.na11y-ui *) { text-align: left !important; } html[data-a11y-text-align="center"] body *:not(.na11y-ui):not(.na11y-ui *) { text-align: center !important; } html[data-a11y-text-align="right"] body *:not(.na11y-ui):not(.na11y-ui *) { text-align: right !important; } html[data-a11y-font="readable"] body *:not(.na11y-ui):not(.na11y-ui *) { font-family: "Atkinson Hyperlegible", Verdana, Tahoma, system-ui, sans-serif !important; } html[data-a11y-font="serif"] body *:not(.na11y-ui):not(.na11y-ui *) { font-family: Georgia, "Times New Roman", serif !important; } html[data-a11y-font="mono"] body *:not(.na11y-ui):not(.na11y-ui *) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } html[data-a11y-font="dyslexic"] body *:not(.na11y-ui):not(.na11y-ui *) { font-family: "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important; letter-spacing: 0.04em !important; } /* Contrast modes ──────────────────────────────────────────────────────── */ html[data-a11y-high-contrast] body, html[data-a11y-high-contrast] body *:not(.na11y-ui):not(.na11y-ui *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y-high-contrast] body a:not(.na11y-ui *), html[data-a11y-high-contrast] body a:not(.na11y-ui *) * { color: #ffd700 !important; text-decoration: underline !important; } html[data-a11y-high-contrast] body :is(input, select, textarea, button):not(.na11y-ui *) { border: 2px solid #fff !important; } html[data-a11y-high-contrast] body :is(img, video, svg, canvas):not(.na11y-ui *) { background: transparent !important; } html[data-a11y-dark-contrast] body, html[data-a11y-dark-contrast] body *:not(.na11y-ui):not(.na11y-ui *) { background-color: #14161c !important; background-image: none !important; color: #e7e9ee !important; border-color: #3a4050 !important; } html[data-a11y-dark-contrast] body a:not(.na11y-ui *), html[data-a11y-dark-contrast] body a:not(.na11y-ui *) * { color: #8ec6ff !important; text-decoration: underline !important; } html[data-a11y-dark-contrast] body :is(img, video):not(.na11y-ui *) { opacity: 0.88; } /* Filter modes apply to body's children so the plugin UI keeps true colour. #native-a11y-consent-root is the Native Privacy & Consent Compliance plugin's root (inter-plugin contract: its root also carries .na11y-ui, so the global effects above exclude it too). The selectors simply never match when that plugin is absent. */ html[data-a11y-monochrome] body > *:not(#native-a11y-ui-root):not(#native-a11y-consent-root) { filter: grayscale(100%); } html[data-a11y-low-saturation] body > *:not(#native-a11y-ui-root):not(#native-a11y-consent-root) { filter: saturate(45%); } html[data-a11y-high-saturation] body > *:not(#native-a11y-ui-root):not(#native-a11y-consent-root) { filter: saturate(190%); } html[data-a11y-invert] body > *:not(#native-a11y-ui-root):not(#native-a11y-consent-root) { filter: invert(100%) hue-rotate(180deg); } /* Media is inverted back so photographs still look like photographs. */ html[data-a11y-invert] body :is(img, video, iframe, canvas, svg, picture):not(.na11y-ui *) { filter: invert(100%) hue-rotate(180deg); } /* Sight & orientation ─────────────────────────────────────────────────── */ html[data-a11y-highlight-links] body a[href]:not(.na11y-ui *) { outline: 2px solid #b8860b !important; outline-offset: 2px !important; background-color: rgba(255, 221, 0, 0.2) !important; text-decoration: underline !important; font-weight: 700 !important; } html[data-a11y-highlight-headings] body :is(h1, h2, h3, h4, h5, h6):not(.na11y-ui *) { outline: 2px dashed #0b6bcb !important; outline-offset: 3px !important; background-color: rgba(11, 107, 203, 0.08) !important; } html[data-a11y-focus-highlight] body *:not(.na11y-ui *):focus, html[data-a11y-focus-highlight] body *:not(.na11y-ui *):focus-visible { outline: 4px solid #ffcc00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.55) !important; } html[data-a11y-big-cursor] body, html[data-a11y-big-cursor] body *:not(.na11y-ui *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 64 64'%3E%3Cpath d='M0 0 L40 24 L24 28 L40 60 L28 64 L12 32 L0 40 Z' fill='%23000' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E") 0 0, auto !important; } html[data-a11y-hide-images] body :is(img, picture, figure, video):not(.na11y-ui *) { opacity: 0.08 !important; filter: grayscale(100%) !important; } /* Motor & vestibular ──────────────────────────────────────────────────── */ html[data-a11y-large-targets] body :is(a[href], button, input[type="submit"], input[type="button"], select, summary):not(.na11y-ui *) { min-width: 44px !important; min-height: 44px !important; padding: 10px 14px !important; } html[data-a11y-freeze-motion] body *:not(.na11y-ui *), html[data-a11y-freeze-motion] body *:not(.na11y-ui *)::before, html[data-a11y-freeze-motion] body *:not(.na11y-ui *)::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; background-attachment: scroll !important; } /* Cognitive ───────────────────────────────────────────────────────────── */ html[data-a11y-focus-mode] body :is(aside, .sidebar, .widget-area, .widgets, [role="complementary"], .advertisement, .ads):not(.na11y-ui *) { display: none !important; } html[data-a11y-focus-mode] body :is(main, article, #main-content, #content, .entry-content):not(.na11y-ui *) { max-width: 46rem !important; margin-left: auto !important; margin-right: auto !important; float: none !important; width: auto !important; } /* Respect the operating system's own reduced-motion setting regardless. */ @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; } } /* ══════════════════════════════════════════════════════════════════════════ 4. Generated documents (statement, cookie policy) ══════════════════════════════════════════════════════════════════════════ */ .native-a11y-doc { max-width: 70ch; } .native-a11y-doc h3 { margin-top: 1.8em; } .native-a11y-doc__list dt { font-weight: 700; margin-top: 1em; } .native-a11y-doc__list dd { margin: 0.2em 0 0; } .native-a11y-doc__table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 0.9em; } .native-a11y-doc__table th, .native-a11y-doc__table td { padding: 0.6em 0.7em; border: 1px solid #d8dde3; text-align: left; vertical-align: top; } .native-a11y-doc__table th { background: #f3f5f8; } .native-a11y-doc__hosts { columns: 2; font-size: 0.9em; } .native-a11y-statement__issues { padding: 1em 1.4em; border-left: 5px solid #b32d2e; border-radius: 6px; background: #fdf1f1; } .native-a11y-statement__clear { padding: 1em 1.4em; border-left: 5px solid #1a7f37; border-radius: 6px; background: #f0f9f2; } .native-a11y-statement__authority { padding: 1em 1.4em; border-left: 5px solid #005a9c; border-radius: 6px; background: #eff6fc; } @media (forced-colors: active) { #native-a11y-toggle, .a11y-modal-content, .na11y-profile, .na11y-step-btn, .na11y-segmented button, .na11y-switch__track, .native-a11y-skip-link, .native-a11y-doc__table th, .native-a11y-doc__table td, .native-a11y-statement__issues, .native-a11y-statement__clear, .native-a11y-statement__authority { border: 2px solid ButtonText !important; } .na11y-profile[aria-pressed="true"], .na11y-segmented button[aria-pressed="true"] { border: 2px solid Highlight !important; background: Highlight !important; color: HighlightText !important; } }