/* ============ ACCESSIBILITY TOOLBAR ============ */ .a11y-toggle { position: fixed; bottom: 20px; left: 20px; z-index: 999; width: 52px; height: 52px; border-radius: 50%; background: var(--red); border: none; color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.5); } .a11y-panel { position: fixed; bottom: 82px; left: 20px; z-index: 999; width: 280px; max-width: calc(100vw - 40px); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px; display: none; box-shadow: 0 8px 30px rgba(0,0,0,.6); } .a11y-panel.open { display: block; } .a11y-panel h3 { font-family: var(--font-heading); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; color: #fff; } .a11y-panel button.a11y-tool { display: block; width: 100%; text-align: left; background: var(--bg-panel-alt); border: 1px solid var(--border); color: var(--text-cream); padding: 10px 12px; margin-bottom: 8px; border-radius: 4px; font-family: var(--font-body); font-size: 14px; cursor: pointer; } .a11y-panel button.a11y-tool.active { background: var(--red); border-color: var(--red); color: #fff; } .a11y-panel button.a11y-reset { width: 100%; background: transparent; border: 1px solid var(--red-dark); color: var(--red-dark); padding: 10px 12px; border-radius: 4px; cursor: pointer; font-family: var(--font-body); font-size: 14px; margin-top: 4px; } /* Toggle classes applied to */ /* Larger Text — uses zoom instead of font-size%, since the site's type scale is set in px throughout; font-size on only affects descendants sized in em/rem/%, so it silently did nothing before. */ html.a11y-text-lg { zoom: 115%; } html.a11y-text-xl { zoom: 130%; } html.a11y-grayscale { filter: grayscale(100%); } /* High Contrast — every component sets its own explicit color, which wins over an inherited value from body/p regardless of !important, so this needs to reach every text-carrying element directly. Rather than enumerate every panel/card class site-wide (fragile — misses anything added later), every element's background is forced transparent so the pure-black body shows through uniformly, with buttons/toolbar controls excluded so they keep their own treatment. */ html.a11y-contrast body, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast a, html.a11y-contrast label, html.a11y-contrast div, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast strong, html.a11y-contrast em, html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast blockquote { color: #FFFFFF !important; } html.a11y-contrast body { background: #000000 !important; } html.a11y-contrast *:not(.btn):not(.a11y-toggle):not(.a11y-panel):not(.a11y-tool):not(.a11y-reset):not(.scroll-top-btn):not(body) { background-color: transparent !important; background-image: none !important; } html.a11y-contrast a { color: #FFD400 !important; text-decoration: underline !important; } html.a11y-contrast .btn, html.a11y-contrast .btn-primary, html.a11y-contrast .btn-outline { background: #FFD400 !important; color: #000000 !important; border-color: #FFD400 !important; } html.a11y-contrast *:not(.a11y-panel):not(.a11y-toggle) { border-color: #FFFFFF !important; } /* Invert Colors */ html.a11y-invert { filter: invert(1) hue-rotate(180deg); } /* Light Background — same universal-transparency approach as High Contrast above, so it covers every current and future component. */ html.a11y-light-bg body, html.a11y-light-bg p, html.a11y-light-bg span, html.a11y-light-bg li, html.a11y-light-bg a, html.a11y-light-bg label, html.a11y-light-bg div, html.a11y-light-bg h1, html.a11y-light-bg h2, html.a11y-light-bg h3, html.a11y-light-bg h4, html.a11y-light-bg strong, html.a11y-light-bg em, html.a11y-light-bg td, html.a11y-light-bg th, html.a11y-light-bg blockquote { color: #111111 !important; } html.a11y-light-bg body { background: #FFFFFF !important; } html.a11y-light-bg *:not(.btn):not(.a11y-toggle):not(.a11y-panel):not(.a11y-tool):not(.a11y-reset):not(.scroll-top-btn):not(body) { background-color: transparent !important; background-image: none !important; } html.a11y-light-bg a { color: #B00000 !important; } html.a11y-light-bg .btn, html.a11y-light-bg .btn-primary, html.a11y-light-bg .btn-outline { background: #B00000 !important; color: #FFFFFF !important; border-color: #B00000 !important; } html.a11y-light-bg *:not(.a11y-panel):not(.a11y-toggle) { border-color: #CCCCCC !important; } html.a11y-underline-links a { text-decoration: underline !important; } html.a11y-readable-font body, html.a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; }