/* 72HWD ADA Accessibility Widget ─────────────────────────────── Left-edge sticky tab opens a panel of user-facing accessibility tools. Preferences persist via localStorage and apply data-attributes to that the rules below cascade off. The widget itself is built to WCAG 2.1 AA: keyboard navigable, visible focus, real ARIA, screen-reader friendly. */ /* ── Skip link — first thing in the tab order. Hidden until focused. ── */ .hwd-skip-link{position:absolute;top:-100px;left:8px;background:#0E1B32;color:#fff;padding:10px 16px;border-radius:6px;font-family:var(--display, sans-serif);font-weight:700;font-size:14px;text-decoration:none;z-index:99999;transition:top .15s} .hwd-skip-link:focus{top:8px;outline:3px solid #FFD600;outline-offset:2px} /* ── Site-wide visible focus ring (overrides any rule that suppressed it) ── */ *:focus-visible{outline:3px solid #2B5FC1;outline-offset:2px;border-radius:2px} button:focus-visible,a:focus-visible{outline:3px solid #2B5FC1;outline-offset:3px} /* ── Left-edge tab (collapsed state) ─────────────────────────────────── */ .hwd-ada-tab{position:fixed;left:0;top:50%;transform:translateY(-50%);background:#2B5FC1;color:#fff;border:none;padding:14px 7px;border-radius:0 8px 8px 0;cursor:pointer;display:flex;align-items:center;writing-mode:vertical-rl;text-orientation:mixed;font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 14px -4px rgba(14,27,50,.4);z-index:2147483646;transition:background .15s,transform .15s} .hwd-ada-tab:hover,.hwd-ada-tab:focus-visible{background:#1E4AA8;transform:translateY(-50%) translateX(2px)} /* ── Panel (expanded state) ─────────────────────────────────────────── */ .hwd-ada-panel{position:fixed;left:0;top:0;bottom:0;width:340px;max-width:88vw;background:#fff;color:#0E1B32;box-shadow:6px 0 28px -8px rgba(14,27,50,.25);z-index:2147483647;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.9,.3,1.15);font-family:-apple-system,BlinkMacSystemFont,"Inter",Arial,sans-serif} .hwd-ada-panel.open{transform:none} .hwd-ada-panel *{box-sizing:border-box} .hwd-ada-head{padding:18px 20px;background:#0E1B32;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px} .hwd-ada-title{display:flex;align-items:center;gap:10px;font-family:var(--display,inherit);font-weight:800;font-size:16px;letter-spacing:-.01em} .hwd-ada-title svg{width:24px;height:24px} .hwd-ada-close{background:transparent;border:none;color:#fff;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;transition:background .15s} .hwd-ada-close:hover,.hwd-ada-close:focus-visible{background:rgba(255,255,255,.14)} .hwd-ada-intro{padding:14px 20px;font-size:13px;color:#3a4259;background:#F4F6FA;border-bottom:1px solid #E3E7EF;line-height:1.5} .hwd-ada-body{flex:1;overflow-y:auto;padding:8px 0} .hwd-ada-group{padding:6px 0;border-bottom:1px solid #E3E7EF} .hwd-ada-group:last-child{border-bottom:none} .hwd-ada-group-title{font-family:var(--display,inherit);font-weight:800;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5C6478;padding:10px 20px 6px} .hwd-ada-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;cursor:pointer;transition:background .12s;border:none;background:transparent;width:100%;text-align:left;color:inherit;font-family:inherit;font-size:14px} .hwd-ada-row:hover,.hwd-ada-row:focus-visible{background:#F4F6FA;outline:none} .hwd-ada-row:focus-visible{box-shadow:inset 3px 0 0 #2B5FC1} .hwd-ada-row-label{display:flex;align-items:center;gap:10px;flex:1} .hwd-ada-row-icon{width:22px;height:22px;flex-shrink:0;color:#2B5FC1} .hwd-ada-row-name{font-weight:600;color:#0E1B32} .hwd-ada-row-desc{font-size:12px;color:#5C6478;display:block;margin-top:1px;font-weight:400} /* Toggle pill */ .hwd-ada-toggle{position:relative;width:38px;height:22px;border-radius:99px;background:#D2D2D7;flex-shrink:0;transition:background .15s} .hwd-ada-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s} .hwd-ada-row.on .hwd-ada-toggle{background:#10B981} .hwd-ada-row.on .hwd-ada-toggle::after{transform:translateX(16px)} /* Step buttons for text size */ .hwd-ada-steps{display:flex;align-items:center;gap:4px;padding:8px 20px} .hwd-ada-step{flex:1;background:#F4F6FA;border:1.5px solid #E3E7EF;border-radius:8px;padding:10px;cursor:pointer;font-family:inherit;font-weight:700;color:#0E1B32;transition:all .15s} .hwd-ada-step:hover,.hwd-ada-step:focus-visible{border-color:#2B5FC1;outline:none;background:#fff} .hwd-ada-step.on{background:#2B5FC1;border-color:#2B5FC1;color:#fff} .hwd-ada-step .s-sm{font-size:13px} .hwd-ada-step .s-md{font-size:16px} .hwd-ada-step .s-lg{font-size:20px} .hwd-ada-step .s-xl{font-size:24px} .hwd-ada-foot{padding:14px 20px;border-top:1px solid #E3E7EF;background:#F4F6FA;display:flex;gap:8px} .hwd-ada-reset{flex:1;background:#fff;border:1.5px solid #D2D2D7;border-radius:8px;padding:10px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;color:#9B1C2E;transition:all .12s} .hwd-ada-reset:hover,.hwd-ada-reset:focus-visible{border-color:#9B1C2E;background:#fff5f5;outline:none} .hwd-ada-statement{font-size:11px;color:#5C6478;line-height:1.5;padding:0 20px 14px;background:#F4F6FA} .hwd-ada-statement a{color:#2B5FC1;font-weight:600} /* ── Backdrop ────────────────────────────────────────────────────────── */ .hwd-ada-backdrop{position:fixed;inset:0;background:rgba(14,27,50,.4);z-index:2147483645;opacity:0;pointer-events:none;transition:opacity .2s} .hwd-ada-backdrop.show{opacity:1;pointer-events:auto} /* ───────────────────────────────────────────────────────────────────── */ /* User-applied accessibility modes — all keyed off data-attrs. */ /* These take precedence over normal site styles. */ /* ───────────────────────────────────────────────────────────────────── */ /* TEXT SIZE — scales root font-size which em/rem cascade off */ html[data-ada-text="larger"]{font-size:18px} html[data-ada-text="largest"]{font-size:21px} /* HIGH CONTRAST — high contrast black/white/yellow palette */ html[data-ada-contrast="high"]{background:#000 !important;color:#fff !important} html[data-ada-contrast="high"] body{background:#000 !important;color:#fff !important} html[data-ada-contrast="high"] *{background-color:transparent !important;color:#fff !important;border-color:#FFD600 !important;box-shadow:none !important;text-shadow:none !important;background-image:none !important} html[data-ada-contrast="high"] a,html[data-ada-contrast="high"] a *{color:#FFD600 !important;text-decoration:underline !important} html[data-ada-contrast="high"] button,html[data-ada-contrast="high"] [role="button"]{background:#000 !important;color:#FFD600 !important;border:2px solid #FFD600 !important} html[data-ada-contrast="high"] img{filter:grayscale(1) contrast(1.2)} html[data-ada-contrast="high"] .hwd-ada-tab,html[data-ada-contrast="high"] .hwd-ada-panel,html[data-ada-contrast="high"] .hwd-ada-panel *{filter:none !important} /* GRAYSCALE — remove all color */ html[data-ada-grayscale="on"]{filter:grayscale(1)} html[data-ada-grayscale="on"] .hwd-ada-panel,html[data-ada-grayscale="on"] .hwd-ada-tab{filter:grayscale(0)} /* UNDERLINE LINKS — surface every with an underline */ html[data-ada-links="underline"] a:not(.hwd-skip-link):not(.hwd-ada-tab):not(.hwd-ada-row):not(.hwd-ada-close){text-decoration:underline !important;text-decoration-thickness:2px;text-underline-offset:2px} /* DYSLEXIA-FRIENDLY FONT — fallback to system sans-serif with looser spacing */ html[data-ada-font="readable"],html[data-ada-font="readable"] *:not(.hwd-ada-tab):not(.hwd-ada-panel):not(.hwd-ada-panel *){font-family:Verdana,"Trebuchet MS",Tahoma,system-ui,sans-serif !important;letter-spacing:.02em;word-spacing:.06em;line-height:1.65} /* BIG CURSOR — enlarged custom cursor */ html[data-ada-cursor="big"],html[data-ada-cursor="big"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M5 2l14 8-6 1 4 8-3 1-4-8-5 5z'/%3E%3C/svg%3E") 0 0, auto !important} /* REDUCE MOTION — kill animations + transitions */ html[data-ada-motion="reduce"] *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important} /* FOCUS HIGHLIGHT — extra-thick visible focus ring everywhere */ html[data-ada-focus="strong"] *:focus,html[data-ada-focus="strong"] *:focus-visible{outline:4px solid #FFD600 !important;outline-offset:3px !important;background-color:rgba(255,214,0,.15) !important} /* READING GUIDE — horizontal bar that follows the cursor */ .hwd-ada-guide{position:fixed;left:0;right:0;height:48px;background:rgba(255,214,0,.18);border-top:2px solid #FFD600;border-bottom:2px solid #FFD600;pointer-events:none;z-index:9989;display:none} html[data-ada-guide="on"] .hwd-ada-guide{display:block} /* Mobile tweaks */ @media(max-width:680px){ .hwd-ada-tab{padding:12px 8px;font-size:10px} .hwd-ada-tab svg{width:18px;height:18px} .hwd-ada-panel{width:300px} } /* Print — hide widget chrome */ @media print{ .hwd-ada-tab,.hwd-ada-panel,.hwd-ada-backdrop,.hwd-ada-guide,.hwd-skip-link{display:none !important} }