/* ============================================================ ACCESSIBILITY WIDGET — shared across all pages Loaded after each page's own stylesheet so these overrides win the cascade (see html.a11y-* toggles below). ============================================================ */ /* ---- floating toggle button ---- */ .a11y-btn{ position:fixed; right:20px; bottom:24px; z-index:90; width:42px; height:42px; border-radius:50%; flex:none; background:var(--navy-800); color:#fff; border:none; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .15s ease, background .15s ease; } .a11y-btn:hover{ background:var(--navy-700); transform:translateY(-2px); } .a11y-btn:active{ transform:translateY(0) scale(.96); } .a11y-btn .icn{ width:21px; height:21px; } @media(max-width:940px){ .a11y-btn{ bottom:74px; } } /* ---- panel ---- */ .a11y-panel{ position:fixed; right:20px; bottom:84px; z-index:91; width:min(300px, calc(100vw - 40px)); background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line); padding:18px; display:flex; flex-direction:column; gap:15px; opacity:0; transform:translateY(8px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease; } .a11y-panel.open{ opacity:1; transform:none; pointer-events:auto; } @media(max-width:940px){ .a11y-panel{ bottom:134px; } } .a11y-panel-head{ display:flex; align-items:center; justify-content:space-between; } .a11y-panel-head h4{ font-family:var(--f-disp); font-size:15px; font-weight:800; color:var(--ink); margin:0; } .a11y-panel .x{ background:none; border:none; cursor:pointer; color:var(--muted); padding:2px; display:grid; } .a11y-panel .x .icn{ width:18px; height:18px; } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .a11y-row .lbl{ font-size:13.5px; font-weight:600; color:var(--navy-800); } .a11y-steps{ display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; } .a11y-steps button{ width:32px; height:32px; border:none; background:#fff; cursor:pointer; font-family:var(--f-disp); font-weight:700; font-size:13px; color:var(--navy-800); border-left:1px solid var(--line); } .a11y-steps button:first-child{ border-left:none; } .a11y-steps button.active{ background:var(--amber-500); color:#fff; } .a11y-switch{ position:relative; width:40px; height:23px; border-radius:999px; background:var(--line); border:none; cursor:pointer; flex:none; transition:background .15s ease; padding:0; } .a11y-switch::after{ content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease; } .a11y-switch.on{ background:var(--cta); } .a11y-switch.on::after{ transform:translateX(17px); } .a11y-reset{ font-size:12.5px; font-weight:700; color:var(--amber-600); background:none; border:none; cursor:pointer; text-align:left; padding:0; text-decoration:underline; } /* ============ TOGGLE EFFECTS (applied to ) ============ */ /* High contrast: darken muted/secondary text and borders using the site's own tokens */ html.a11y-contrast{ --muted:#3D4B5A; --body:#000000; --line:#8A97A6; } html.a11y-contrast .btn-ghost{ border-width:2px; border-color:#000; color:#000; } html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea{ border-color:#000; } html.a11y-contrast a:not(.btn){ text-decoration:underline; } /* Reduce motion: overrides the OS-level toggle for users who want it regardless */ 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; } /* Underline links: helps anyone who has trouble distinguishing links by color alone */ html.a11y-underline-links a:not(.btn):not(.logo){ text-decoration:underline !important; text-underline-offset:2px; }