/* Juicy Patterns — accessibility layer (IS 5568 / WCAG 2.1 AA). Two jobs: 1. Baseline a11y primitives every page needs: skip-link, visible focus ring, .sr-only. 2. The Regulation-35 preferences widget: a user-preference comfort tool that only toggles a11y-* classes on . It never mutates content, alt text, or ARIA. Colors fall back to hard-coded hexes so this works even before a page's :root loads. */ /* ---- baseline primitives ------------------------------------------------ */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* skip link — hidden until focused, then pinned top-start */ .skip-link{ position:fixed; top:-100px; inset-inline-start:16px; z-index:1000; background:var(--blue,#2563FF); color:#fff; font-family:var(--sans,system-ui,sans-serif); font-weight:700; font-size:15px; padding:12px 22px; border-radius:0 0 12px 12px; text-decoration:none; box-shadow:0 6px 24px rgba(31,29,25,.22); transition:top .18s ease; } .skip-link:focus{top:0;} /* visible keyboard focus ring everywhere (beats any inline outline:none) */ *:focus-visible{ outline:2.5px solid var(--blue,#2563FF) !important; outline-offset:2px; border-radius:2px; } /* target of the skip link shouldn't show a ring when focused programmatically */ main:focus, main:focus-visible{ outline:none !important; } /* ========================================================================= ACCESSIBILITY PREFERENCES WIDGET ========================================================================= */ #a11y-trigger{ position:fixed; bottom:22px; inset-inline-start:22px; z-index:900; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; background:var(--blue,#2563FF); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(31,29,25,.28); transition:transform .18s ease, background .15s ease; } #a11y-trigger:hover{ background:var(--blue-deep,#1B47C7); transform:translateY(-2px); } #a11y-trigger svg{ width:28px; height:28px; display:block; fill:currentColor; } #a11y-trigger.is-active::after{ content:""; position:absolute; top:2px; inset-inline-end:2px; width:12px; height:12px; border-radius:50%; background:var(--fuchsia,#C81E9B); border:2px solid #fff; } .a11y-overlay{ position:fixed; inset:0; z-index:950; background:rgba(31,29,25,.32); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; } .a11y-overlay.open{ opacity:1; visibility:visible; } #a11y-panel{ position:fixed; top:0; inset-inline-start:0; z-index:960; height:100%; width:min(400px,90vw); background:var(--paper,#FAF9F6); color:var(--ink,#201E1B); box-shadow:0 0 60px rgba(31,29,25,.3); display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); font-family:var(--sans,system-ui,sans-serif); } [dir="rtl"] #a11y-panel{ transform:translateX(100%); } #a11y-panel.open{ transform:translateX(0) !important; } .a11y-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--rule,#DED8CD); } .a11y-head h2{ font-family:var(--serif,var(--sans,system-ui)); font-weight:500; font-size:1.4rem; line-height:1.1; margin:0; } .a11y-close{ width:38px; height:38px; flex:none; border-radius:50%; border:1.5px solid var(--rule,#DED8CD); background:none; color:var(--ink,#201E1B); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s ease; } .a11y-close:hover{ border-color:var(--ink,#201E1B); } .a11y-body{ flex:1; overflow-y:auto; padding:18px 22px 8px; } .a11y-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .a11y-card{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; min-height:96px; padding:14px 8px; text-align:center; cursor:pointer; background:var(--bright,#fff); border:1.5px solid var(--line,#E5E1D9); border-radius:16px; color:var(--ink,#201E1B); font-family:inherit; transition:border-color .15s ease, background .15s ease; } .a11y-card:hover{ border-color:var(--ink-soft,#6A655D); } .a11y-card[aria-pressed="true"], .a11y-card.is-on{ border-color:var(--blue,#2563FF); background:#EEF2FF; box-shadow:inset 0 0 0 1px var(--blue,#2563FF); } .a11y-card svg{ width:26px; height:26px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; } .a11y-card .lbl{ font-size:12.5px; font-weight:600; line-height:1.25; } .a11y-card .val{ font-size:11px; font-weight:700; color:var(--blue,#2563FF); letter-spacing:.02em; } .a11y-reset{ margin:16px 0 6px; width:100%; padding:12px; border-radius:100px; cursor:pointer; background:none; border:1.5px solid var(--rule,#DED8CD); color:var(--ink,#201E1B); font-family:inherit; font-size:14px; font-weight:700; transition:border-color .15s ease; } .a11y-reset:hover{ border-color:var(--ink,#201E1B); } .a11y-foot{ padding:14px 22px 20px; border-top:1px solid var(--rule,#DED8CD); font-size:12.5px; color:var(--ink-soft,#6A655D); line-height:1.5; } .a11y-foot a{ color:var(--blue,#2563FF); font-weight:700; text-decoration:none; } .a11y-foot a:hover{ text-decoration:underline; } .a11y-foot .hint{ display:block; margin-top:6px; opacity:.8; } /* ========================================================================= PREFERENCE CLASSES applied to by the widget / FOUC bootstrap ========================================================================= */ html.a11y-links a{ text-decoration:underline !important; text-underline-offset:2px; font-weight:600 !important; } html.a11y-contrast-high{ filter:contrast(1.32); } html.a11y-contrast-invert{ filter:invert(1) hue-rotate(180deg); } html.a11y-contrast-invert img, html.a11y-contrast-invert svg, html.a11y-contrast-mono img, html.a11y-contrast-mono svg{ filter:invert(1) hue-rotate(180deg); } html.a11y-contrast-mono{ filter:grayscale(1) contrast(1.08); } html.a11y-text-115{ font-size:115%; } html.a11y-text-130{ font-size:130%; } html.a11y-text-150{ font-size:150%; } html.a11y-lines-16 p, html.a11y-lines-16 li, html.a11y-lines-16 .lead, html.a11y-lines-16 blockquote{ line-height:1.6 !important; } html.a11y-lines-20 p, html.a11y-lines-20 li, html.a11y-lines-20 .lead, html.a11y-lines-20 blockquote{ line-height:2 !important; } html.a11y-readable-font, html.a11y-readable-font *{ font-family:system-ui,-apple-system,"Segoe UI",Arial,"Helvetica Neue",sans-serif !important; } html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3{ outline:2px dashed var(--fuchsia,#C81E9B); outline-offset:5px; } html.a11y-cursor-black, html.a11y-cursor-black *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1.5L16 18l-3 1.5-3-6.5L5 16z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 4 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='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1.5L16 18l-3 1.5-3-6.5L5 16z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 8 4, auto !important; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } /* counter-invert the widget so it stays readable under invert / mono */ html.a11y-contrast-invert #a11y-panel, html.a11y-contrast-invert #a11y-trigger, html.a11y-contrast-invert .a11y-overlay, html.a11y-contrast-mono #a11y-panel, html.a11y-contrast-mono #a11y-trigger, html.a11y-contrast-mono .a11y-overlay{ filter:invert(1) hue-rotate(180deg); } @media (max-width:420px){ .a11y-grid{ grid-template-columns:repeat(2,1fr); } } /* print: strip every preference so filters/scaling don't follow to paper */ @media print{ html[class*="a11y-"]{ filter:none !important; } html[class*="a11y-text-"]{ font-size:100% !important; } #a11y-trigger, #a11y-panel, .a11y-overlay, .skip-link{ display:none !important; } }