/* a11y.css — AA Medical Supply accessibility panel Every user preference is a class on scoped a11y-*. Loaded AFTER theme.css. JS only toggles classes; all rendering is here. See docs/superpowers/specs/2026-08-17-accessibility-widget-and-remediation-design.md */ /* ============================================================ 1. Text sizing — works because theme.css is rem-based ============================================================ */ html.a11y-text-125{font-size:125%} html.a11y-text-150{font-size:150%} html.a11y-text-175{font-size:175%} html.a11y-text-200{font-size:200%} /* WCAG 1.4.10 Reflow — at 150%+ the desktop nav overflows and clips its last items. Text scaling does not change the viewport, so theme.css's 860px breakpoint never fires. Reuse the existing (already tested) mobile nav. The top bar is deliberately left alone: it wraps cleanly and carries the phone number, the single most useful element for these users. */ html.a11y-text-150 .nav-links, html.a11y-text-175 .nav-links, html.a11y-text-200 .nav-links{display:none} html.a11y-text-150 .hamburger, html.a11y-text-175 .hamburger, html.a11y-text-200 .hamburger{display:flex} /* ============================================================ 2. Text spacing (WCAG 1.4.12) — stepped ============================================================ */ html.a11y-line-height-1 body *{line-height:1.6 !important} html.a11y-line-height-2 body *{line-height:2 !important} html.a11y-line-height-3 body *{line-height:2.4 !important} html.a11y-letter-spacing-1 body *{letter-spacing:.06em !important} html.a11y-letter-spacing-2 body *{letter-spacing:.12em !important} html.a11y-letter-spacing-3 body *{letter-spacing:.2em !important} html.a11y-word-spacing-1 body *{word-spacing:.1em !important} html.a11y-word-spacing-2 body *{word-spacing:.2em !important} html.a11y-word-spacing-3 body *{word-spacing:.35em !important} html.a11y-align-left body *{text-align:left !important} html.a11y-align-center body *{text-align:center !important} /* ============================================================ 3. Dyslexia-friendly font System stack rather than a hosted webfont — no extra download, and these faces ship on Windows, macOS, iOS and Android. ============================================================ */ html.a11y-dyslexia body, html.a11y-dyslexia body *{ font-family:'Comic Sans MS','Trebuchet MS',Verdana,sans-serif !important; letter-spacing:.06em; } /* Readable-font profile: a clean high-legibility stack, no novelty face. */ html.a11y-readable body, html.a11y-readable body *{ font-family:Verdana,Tahoma,'Segoe UI',Arial,sans-serif !important; } /* ============================================================ 4. Link & heading emphasis ============================================================ */ /* Floating controls are excluded — they are already high-contrast buttons, and highlighting them makes the page look broken rather than clearer. */ html.a11y-links a:not(.call-fab):not(.a11y-statement):not(.ma-call):not(.ma-cov):not(.btn){ text-decoration:underline !important; text-underline-offset:3px; background:#FFF3B0 !important; color:#0B1B2B !important; box-shadow:0 0 0 2px #FFF3B0; } html.a11y-links a.btn{text-decoration:underline !important;text-underline-offset:3px} html.a11y-headings h1,html.a11y-headings h2, html.a11y-headings h3,html.a11y-headings h4{ outline:2px dashed var(--navy); outline-offset:4px; } /* ============================================================ 5. Colour modes — mutually exclusive (enforced in a11y.js) ============================================================ */ /* The accessibility UI and its overlays are exempt from every colour mode — see the "combination overrides" block at the end of this file. */ html.a11y-contrast-dark body, html.a11y-contrast-dark body *:not(svg):not(path){ background-color:#000 !important; color:#FFF !important; border-color:#FFF !important; } html.a11y-contrast-dark a,html.a11y-contrast-dark a *{color:#FFFF00 !important} html.a11y-contrast-dark button{border:1px solid #FFF !important} html.a11y-contrast-dark img{opacity:.85} html.a11y-contrast-light body, html.a11y-contrast-light body *:not(svg):not(path){ background-color:#FFF !important; color:#000 !important; border-color:#000 !important; } html.a11y-contrast-light a,html.a11y-contrast-light a *{color:#0000CC !important} /* Filters go on , NOT . A filter on any element makes it the containing block for its position:fixed descendants — which would detach the accessibility button, the panel, .call-fab, the sticky nav and the reading mask from the viewport and make them scroll with the page. The CSS Filter Effects spec exempts the document root from that rule, so applying it here is safe. */ html.a11y-invert{filter:invert(1) hue-rotate(180deg)} html.a11y-invert img,html.a11y-invert video{filter:invert(1) hue-rotate(180deg)} html.a11y-mono{filter:grayscale(1)} html.a11y-saturate-low{filter:saturate(.5)} html.a11y-saturate-high{filter:saturate(2)} /* ============================================================ 6. Orientation aids ============================================================ */ html.a11y-big-cursor,html.a11y-big-cursor *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L16 30 L21 42 L27 39 L22 27 L34 27 Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; } html.a11y-no-anim *,html.a11y-no-anim *::before,html.a11y-no-anim *::after{ animation-duration:0s !important; animation-delay:0s !important; transition-duration:0s !important; transition-delay:0s !important; scroll-behavior:auto !important; } html.a11y-no-anim [data-parallax]{transform:none !important} /* Hide images. Note: is a replaced element, so ::before/::after do not render on it in any current browser — an earlier attempt to show alt text in the image's footprint could never have worked. Images are hidden but keep their space, so the layout does not jump. */ html.a11y-hide-images img{visibility:hidden} html.a11y-tooltips [title],html.a11y-tooltips [aria-label]{position:relative} html.a11y-tooltips [title]:hover::after, html.a11y-tooltips [aria-label]:hover::after{ content:attr(title) attr(aria-label); position:absolute;left:0;top:0;z-index:160; background:var(--navy);color:#fff; padding:6px 10px;border-radius:6px;font-size:.85rem; white-space:nowrap;transform:translateY(-130%); pointer-events:none; } /* Highlight whatever the pointer or keyboard is on. */ html.a11y-highlight-focus a:focus, html.a11y-highlight-focus button:focus, html.a11y-highlight-focus input:focus, html.a11y-highlight-focus select:focus, html.a11y-highlight-focus textarea:focus{ outline:4px solid #E8B500 !important;outline-offset:2px !important; } html.a11y-highlight-hover a:hover, html.a11y-highlight-hover button:hover{ outline:4px solid #E8B500 !important;outline-offset:2px !important; } /* ============================================================ 7. Reading guide & mask (positioned by a11y.js) ============================================================ */ #a11yGuide{ position:fixed;left:0;width:100%;height:4px; background:var(--navy);z-index:155;pointer-events:none;display:none; } html.a11y-guide #a11yGuide{display:block} #a11yMaskTop,#a11yMaskBottom{ position:fixed;left:0;width:100%; background:rgba(0,0,0,.72);z-index:154;pointer-events:none;display:none; } html.a11y-mask #a11yMaskTop,html.a11y-mask #a11yMaskBottom{display:block} /* ============================================================ 8. The trigger button z-index 140 — above .aam-modal (130) and .user-menu (130). Bottom-LEFT so it never collides with .call-fab (bottom-right) or the mobile action bar. ============================================================ */ .a11y-fab{ position:fixed;left:20px;bottom:20px;z-index:140; width:56px;height:56px;border-radius:50%; background:#1B5FBF;color:#fff;border:3px solid #fff; display:flex;align-items:center;justify-content:center; cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.35); transition:transform .2s,background .2s;padding:0; } .a11y-fab:hover{background:#14488F;transform:scale(1.07)} .a11y-fab svg{width:34px;height:34px;fill:currentColor} /* ============================================================ 9. The panel ============================================================ */ /* Transparent AND click-through. A scrim would hide the very page the user is adjusting, and a click-blocking layer would stop them using the site while the panel is open. Outside-click-to-close is handled by a document listener in a11y.js instead of by this element. */ .a11y-backdrop{ position:fixed;inset:0; background:transparent !important; pointer-events:none; z-index:145;display:none; } .a11y-backdrop.open{display:block} .a11y-panel{ position:fixed;left:16px;bottom:16px;z-index:150; width:min(420px,calc(100vw - 32px)); max-height:calc(100vh - 32px); display:none;flex-direction:column; background:#fff;color:#1D2733; border-radius:12px; box-shadow:0 24px 70px rgba(10,20,32,.4); overflow:hidden; font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif; /* Fixed anchor for the panel's own type. Everything inside sizes in `em`, NOT `rem` — rem resolves against the document root, which the Text Size control changes, so rem children would grow with the page and the panel would become unusable at 200%. This is the one place in the feature where rem is the wrong unit. */ font-size:16px; } .a11y-panel.open{display:flex} /* ---- header ---- */ .a11y-head{ background:#1B5FBF;color:#fff; padding:16px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0; } /* Inline SVGs must be size-constrained here or they expand to fill the flex row (same gotcha as .btn svg / .ct-ico svg in theme.css). */ .a11y-head > svg{width:28px;height:28px;fill:#fff;flex-shrink:0} .a11y-head h2{ font-family:inherit;font-size:1.12em;font-weight:700; margin:0;color:#fff;flex:1;line-height:1.2;letter-spacing:0; } .a11y-head-close{ width:36px;height:36px;flex-shrink:0; background:rgba(255,255,255,.16);border:0;border-radius:50%; color:#fff;font-size:1.4em;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;font-family:inherit; } .a11y-head-close:hover{background:rgba(255,255,255,.3)} /* ---- utility row ---- */ .a11y-utils{ display:grid;grid-template-columns:1fr 1fr;gap:1px; background:#D9E2EC;flex-shrink:0; } .a11y-util{ background:#F4F7FA;border:0;padding:11px 6px; font-family:inherit;font-size:.8em;font-weight:600;color:#1B5FBF; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px; } .a11y-util:hover{background:#E7EEF6} .a11y-util svg{width:15px;height:15px;fill:currentColor;flex-shrink:0} /* ---- scrolling body ---- */ .a11y-body{overflow-y:auto;padding:16px 18px 20px;flex:1;-webkit-overflow-scrolling:touch} .a11y-body h3{ font-family:inherit; font-size:.72em;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:#5A6B7D;margin:20px 0 10px;padding-bottom:7px; border-bottom:1px solid #E3E9EF; } .a11y-body h3:first-child{margin-top:0} /* ---- profile rows with switches ---- */ /* font-size:1em is required, not optional: