/* ===================================================================== contrast.css — user-activated text contrast (WCAG 2.2) ===================================================================== Active when is set. Backgrounds are NOT changed — only text, links, and button labels. Section tone (class on
): section.light → #ffffff (text, links, button text) section.dark → #666666 (text, links, button text) Other content is adjusted by js/contrast.js to meet 5.48:1 ratio. Toolbar buttons stay transparent — icon swaps on click only. ===================================================================== */ html.a11y-high-contrast { --a11y-hc-light-text: #ffffff; --a11y-hc-dark-text: #666666; --a11y-hc-icon: #a58029; --a11y-hc-icon-active: #212529; } /* section.light — white text, links, and button labels */ html.a11y-high-contrast section.light, html.a11y-high-contrast section.light p, html.a11y-high-contrast section.light li, html.a11y-high-contrast section.light dt, html.a11y-high-contrast section.light dd, html.a11y-high-contrast section.light blockquote, html.a11y-high-contrast section.light figcaption, html.a11y-high-contrast section.light label, html.a11y-high-contrast section.light small, html.a11y-high-contrast section.light span:not(.a11y-sr-only), html.a11y-high-contrast section.light h1, html.a11y-high-contrast section.light h2, html.a11y-high-contrast section.light h3, html.a11y-high-contrast section.light h4, html.a11y-high-contrast section.light h5, html.a11y-high-contrast section.light h6, html.a11y-high-contrast section.light a:not(.a11y-tool-btn):not(.hamburger), html.a11y-high-contrast section.light button:not(.a11y-tool-btn):not(.hamburger):not(.mobile-hamburger):not(.close-icon), html.a11y-high-contrast section.light .btn, html.a11y-high-contrast section.light .btn span, html.a11y-high-contrast section.light .heading { color: var(--a11y-hc-light-text) !important; text-decoration: none !important; } /* section.light — button arrow (::before mask uses currentColor / background) */ html.a11y-high-contrast section.light .button-wrapper a.btn, html.a11y-high-contrast section.light .button-wrapper .btn { color: var(--a11y-hc-light-text) !important; } html.a11y-high-contrast section.light .button-wrapper a.btn::before, html.a11y-high-contrast section.light .button-wrapper .btn::before { background-color: var(--a11y-hc-light-text) !important; } /* section.dark — #666666 text, links, and button labels */ html.a11y-high-contrast section.dark, html.a11y-high-contrast section.dark p, html.a11y-high-contrast section.dark li, html.a11y-high-contrast section.dark dt, html.a11y-high-contrast section.dark dd, html.a11y-high-contrast section.dark blockquote, html.a11y-high-contrast section.dark figcaption, html.a11y-high-contrast section.dark label, html.a11y-high-contrast section.dark small, html.a11y-high-contrast section.dark span:not(.a11y-sr-only), html.a11y-high-contrast section.dark h1, html.a11y-high-contrast section.dark h2, html.a11y-high-contrast section.dark h3, html.a11y-high-contrast section.dark h4, html.a11y-high-contrast section.dark h5, html.a11y-high-contrast section.dark h6, html.a11y-high-contrast section.dark a:not(.a11y-tool-btn):not(.hamburger), html.a11y-high-contrast section.dark button:not(.a11y-tool-btn):not(.hamburger):not(.mobile-hamburger):not(.close-icon), html.a11y-high-contrast section.dark .btn, html.a11y-high-contrast section.dark .btn span, html.a11y-high-contrast section.dark .heading { color: var(--a11y-hc-dark-text) !important; text-decoration: none !important; } /* Transparent toolbar — icon colour only, no background */ html.a11y-high-contrast .a11y-tool-btn { background: transparent !important; border: none !important; } html.a11y-high-contrast .site-header__a11y-tools { --a11y-icon-color: #a58029; --a11y-icon-color-active: #c9a227; } html.a11y-high-contrast .site-header .site-header__hamburger-container.light-mode .site-header__a11y-tools { --a11y-icon-color: #ffffff; --a11y-icon-color-active: #c9a227; } html.a11y-high-contrast .a11y-tool-btn[aria-pressed="true"] .a11y-tool-btn__icon { background-color: var(--a11y-icon-color-active) !important; } /* JS-applied text fixes — colour only, no background */ html.a11y-high-contrast [data-a11y-contrast-fix] { background-color: transparent !important; } html.a11y-high-contrast [data-a11y-contrast-fix="section-light"] { color: var(--a11y-hc-light-text) !important; } html.a11y-high-contrast [data-a11y-contrast-fix="section-dark"] { color: var(--a11y-hc-dark-text) !important; } html.a11y-high-contrast [data-a11y-contrast-fix="auto-white"] { color: #ffffff !important; } html.a11y-high-contrast [data-a11y-contrast-fix="auto-black"] { color: #000000 !important; }