/* CV — accessibility preferences widget (Regulation 35 / IS 5568) A user-preference comfort tool: every effect here is a CSS class toggle on , driven only by what the visitor explicitly asks for in the panel. It never touches content markup (no injected alt text, no rewritten ARIA) — see js/accessibility-widget.js for why that line matters legally, not just technically. */ /* --- high-contrast palette: reuses the existing design tokens rather than a blanket filter, so text stays crisp instead of washed out --- */ html.a11y-contrast-high { --ink: #000000; --ink-soft: #1a1a1a; --bg: #ffffff; --bg-raised: #f0f0f0; --paper: #ffffff; --line: #000000; --line-soft: #333333; --accent: #00636b; --accent-soft: #00838f; } html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-invert img, html.a11y-contrast-invert video { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-mono { filter: grayscale(1); } /* The widget itself must stay legible under invert/mono, or a visitor who turns one of these on has no way to see the control that turns it back off. */ html.a11y-contrast-invert #a11y-widget-panel, html.a11y-contrast-invert #a11y-widget-trigger, html.a11y-contrast-mono #a11y-widget-panel, html.a11y-contrast-mono #a11y-widget-trigger { filter: invert(1) hue-rotate(180deg); } /* --- text size: scales the root font-size, so every rem-based token (spacing, type scale) in tokens.css scales consistently with it --- */ html.a11y-text-115 { font-size: 115%; } html.a11y-text-130 { font-size: 130%; } html.a11y-text-150 { font-size: 150%; } /* --- line spacing: body already defaults to 1.6 (base.css), so the steps here are chosen to read as clearly different from that --- */ html.a11y-lines-2 body { line-height: 1.9; } html.a11y-lines-3 body { line-height: 2.3; } /* --- readable font: plain OS stack, not a webfont swap — a webfont changes rendered text width and can reflow layout in ways the visitor didn't ask for --- */ html.a11y-readable-font { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* --- highlighted links --- */ html.a11y-links a:not(.btn):not(.identity-nav a):not(.mobile-menu nav a) { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* --- highlighted headings --- */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4 { background: rgba(255, 214, 0, 0.28); box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.28); border-radius: 4px; } /* --- cursor size/contrast --- */ html.a11y-cursor-black, html.a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M2 2 L2 24 L8.5 18.5 L12.5 26 L16 24.3 L12 17 L20 17 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto !important; } html.a11y-cursor-large, html.a11y-cursor-large * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 28 28'%3E%3Cpath d='M2 2 L2 24 L8.5 18.5 L12.5 26 L16 24.3 L12 17 L20 17 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto !important; } html.a11y-cursor-large.a11y-cursor-black, html.a11y-cursor-large.a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 28 28'%3E%3Cpath d='M2 2 L2 24 L8.5 18.5 L12.5 26 L16 24.3 L12 17 L20 17 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto !important; } /* --- stop animations: immediate CSS-level effect; the GSAP-driven pin/ scroll choreography additionally needs reduced-motion.js to see this preference at load time (js/accessibility-widget.js reloads the page when this toggle changes, same as the OS prefers-reduced-motion path already handles). --- */ html.a11y-reduce-motion, html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* --- widget chrome --- */ #a11y-widget-trigger { position: fixed; bottom: var(--sp-3); left: var(--sp-3); z-index: 200; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4); border: 2px solid #fff; } #a11y-widget-trigger svg { width: 26px; height: 26px; } #a11y-widget-panel { position: fixed; bottom: calc(var(--sp-3) + 60px); left: var(--sp-3); z-index: 200; width: min(90vw, 320px); max-height: min(75vh, 560px); overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); border: var(--border); box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.35); padding: var(--sp-3); } #a11y-widget-panel[hidden] { display: none; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); } .a11y-panel-head h2 { font-size: var(--step-sm); } .a11y-panel-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .a11y-panel-close:hover { background: var(--bg-raised); } .a11y-panel-close svg { width: 16px; height: 16px; } .a11y-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); } .a11y-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-2) var(--sp-1); border: var(--border); border-radius: var(--radius); background: var(--bg); font-size: var(--step-xs); font-weight: 600; text-align: center; line-height: 1.3; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .a11y-toggle svg { width: 20px; height: 20px; } .a11y-toggle[aria-pressed="true"], .a11y-toggle.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .a11y-reset { width: 100%; margin-top: var(--sp-2); padding: 0.6rem; border-radius: var(--radius); border: var(--border); font-size: var(--step-xs); font-weight: 700; } .a11y-reset:hover { background: var(--bg-raised); } .a11y-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (min-width: 860px) { /* Keeps clear of the back-to-top button, which sits on the physical right (see components.css). */ #a11y-widget-trigger, #a11y-widget-panel { bottom: var(--sp-4); } } /* --- print: settings meant for on-screen reading shouldn't follow the visitor to paper --- */ @media print { html[class*="a11y-"] { filter: none !important; } html[class*="a11y-text-"] { font-size: 100% !important; } html[class*="a11y-lines-"] body { line-height: normal !important; } #a11y-widget-trigger, #a11y-widget-panel { display: none !important; } }