/* ========================================================================== Accessibility preferences panel + the effect classes it toggles on . First-party (no third-party overlay). The widget is injected by assets/js/a11y-prefs.js and is hidden unless JS is active; the effect classes are applied to (by an early inline script in functions.php, then by the widget) so saved preferences take effect before paint. ========================================================================== */ /* Widget chrome ----------------------------------------------------------- */ html:not(.js) .ali-a11y { display: none; } .ali-a11y { position: fixed; right: 1rem; bottom: 1rem; z-index: 99999; font-family: var(--wp--preset--font-family--body, system-ui, sans-serif); } .ali-a11y__toggle { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #ffffff; background: var(--wp--preset--color--secondary, #13294b); color: #ffffff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .ali-a11y__toggle svg { width: 26px; height: 26px; fill: currentColor; } .ali-a11y__toggle:focus-visible, .ali-a11y button:focus-visible { outline: 3px solid var(--wp--preset--color--primary, #488c36); outline-offset: 2px; } .ali-a11y__panel { position: absolute; right: 0; bottom: 60px; width: 290px; max-width: 86vw; background: #ffffff; color: #1a1a1a; border: 2px solid #13294b; border-radius: 10px; padding: 16px 16px 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); } .ali-a11y__panel[hidden] { display: none; } .ali-a11y__panel h2 { font-size: 1.05rem; margin: 0 0 12px; color: #13294b; } .ali-a11y__group { margin: 0 0 12px; } .ali-a11y__legend { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; color: #13294b; } .ali-a11y__row { display: flex; gap: 6px; flex-wrap: wrap; } .ali-a11y__btn { flex: 1 1 auto; min-height: 40px; padding: 6px 10px; border: 1px solid #13294b; border-radius: 6px; background: #ffffff; color: #13294b; font: inherit; font-weight: 600; cursor: pointer; } .ali-a11y__btn[aria-pressed="true"] { background: #13294b; color: #ffffff; } .ali-a11y__toggle-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; } .ali-a11y__state { font-weight: 700; } .ali-a11y__reset { margin-top: 2px; background: none; border: 0; color: #386c28; text-decoration: underline; cursor: pointer; font: inherit; padding: 4px; } .ali-a11y__close { position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: #13294b; } /* Effect classes (toggled on ) ------------------------------------- */ /* Text size — scales the root font-size, so rem-based type grows site-wide. */ html.a11y-text-1 { font-size: 112.5%; } html.a11y-text-2 { font-size: 131.25%; } /* High contrast — overrides the brand palette custom properties so the change flows through every var() usage; pure black text on white surfaces, darker muted text, black borders, and underlined links. Navy/footer sections keep their already-high-contrast light-on-dark pairings. */ html.a11y-contrast { --wp--preset--color--base: #ffffff; --wp--preset--color--surface: #ffffff; --wp--preset--color--contrast: #000000; --wp--preset--color--muted: #1a1a1a; --wp--preset--color--border: #000000; background: #ffffff; } html.a11y-contrast body { color: #000000; } html.a11y-contrast a { text-decoration: underline; } /* Reduce motion — neutralizes CSS animation/transition/auto-scroll. JS auto-advancing widgets (rotator, billboard, timeline) also read this class at init, so a reload fully stops their motion too. */ 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; } /* Underline links — for readers who rely on a non-color link cue. */ html.a11y-underline a { text-decoration: underline; }