/* ════════════════════════════════════════════════════════════════════════ CLB Accessibility - Lighthouse Display Preferences widget styles Rocksteady Consulting for Columbia Lighthouse for the Blind. Self-contained: does not depend on the active theme's CSS. Every host-page preference rule keys off a data-attribute on , so "unset" falls straight through to the visitor's own @media (prefers-*). CLB tokens: teal #063e3e, beam #fee065, ink #0d1321. ════════════════════════════════════════════════════════════════════════ */ /* ---- launcher (FAB): beam background + ink icon for contrast ---- */ .clbp-fab{position:fixed;right:18px;bottom:18px;z-index:99990;width:48px;height:48px;border-radius:50%;border:0; background:#fee065;color:#0d1321;display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.28);} .clbp-fab--left{left:18px;right:auto;} .clbp-fab:focus-visible{outline:3px solid #063e3e;outline-offset:3px;} .clbp-fab svg{width:24px;height:24px;} @media (max-width:600px){.clbp-fab{right:12px;bottom:12px;}.clbp-fab--left{left:12px;right:auto;}} /* ---- inline launcher rendered by the [clb_accessibility_button] shortcode ---- */ .clbp-inline-btn{display:inline-flex;align-items:center;gap:8px;background:#fee065;color:#0d1321; border:1.5px solid #063e3e;border-radius:8px;font:inherit;font-size:14px;font-weight:700; padding:8px 14px;cursor:pointer;line-height:1.2;} .clbp-inline-btn svg{width:18px;height:18px;flex:none;} .clbp-inline-btn:focus-visible{outline:3px solid #063e3e;outline-offset:2px;} /* ---- dialog ---- */ dialog.clbp-panel{width:min(94vw,380px);max-height:86vh;border:1px solid #d3dcd5;border-radius:14px;padding:0; color:#0d1321;background:#f8f6ee;box-shadow:0 24px 60px rgba(0,0,0,.34);font-family:var(--clb-font,var(--font-primary,system-ui,Verdana,sans-serif));} dialog.clbp-panel:focus{outline:none;} dialog.clbp-panel::backdrop{background:rgba(13,19,33,.45);} .clbp-hd{position:sticky;top:0;background:#063e3e;color:#fff;padding:16px 18px;border-radius:14px 14px 0 0;} .clbp-hd h2{margin:0;font-size:17px;font-weight:700;color:#fff;} .clbp-hd h2:focus-visible{outline:3px solid #fee065;outline-offset:3px;} .clbp-hd .clbp-x{position:absolute;top:11px;right:11px;width:34px;height:34px;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer;} .clbp-hd .clbp-x:focus-visible{outline:3px solid #fee065;outline-offset:2px;} .clbp-sub{padding:12px 18px 4px;font-size:12.5px;line-height:1.5;color:#3a4151;} .clbp-body{padding:6px 18px 14px;overflow:auto;} .clbp-fs{border:0;margin:14px 0 0;padding:0;} .clbp-fs legend{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#063e3e;padding:0 0 6px;} .clbp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;} .clbp-row .lab{font-size:14px;color:#0d1321;} .clbp-row .hint{display:block;font-size:11.5px;color:#3a4151;margin-top:1px;} /* ---- native checkbox switch ---- */ .clbp-switch{position:relative;display:inline-flex;flex:none;} .clbp-switch-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;} .clbp-switch-ui{display:inline-flex;align-items:center;width:56px;height:30px;border:1.5px solid #063e3e;border-radius:999px;background:#fff;transition:background .15s;pointer-events:none;} .clbp-switch-ui::before{content:"";width:22px;height:22px;margin:0 2px;border-radius:50%;background:#063e3e;transition:transform .15s,background .15s;} .clbp-switch-input:checked + .clbp-switch-ui{background:#063e3e;border-color:#063e3e;} .clbp-switch-input:checked + .clbp-switch-ui::before{transform:translateX(26px);background:#fee065;} .clbp-switch-input:focus-visible + .clbp-switch-ui{outline:3px solid #063e3e;outline-offset:2px;box-shadow:0 0 0 5px #fee065;} /* ---- stepper ---- */ .clbp-step{display:flex;align-items:center;gap:6px;} .clbp-step button{width:32px;height:32px;border:1.5px solid #063e3e;border-radius:8px;background:#fff;color:#063e3e;font-size:18px;font-weight:700;cursor:pointer;line-height:1;} .clbp-step button[aria-disabled="true"]{opacity:.4;} .clbp-step button:focus-visible{outline:3px solid #063e3e;outline-offset:2px;box-shadow:0 0 0 5px #fee065;} .clbp-step .val{min-width:54px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;} /* ---- native radio cards ---- */ .clbp-radios{display:flex;flex-direction:column;gap:6px;margin-top:4px;} .clbp-radio{position:relative;display:flex;align-items:center;gap:9px;border:1.5px solid #d3dcd5;border-radius:9px;padding:8px 11px;background:#fff;cursor:pointer;font-size:13.5px;color:#0d1321;} .clbp-radio input{position:absolute;opacity:0;width:1px;height:1px;margin:0;} .clbp-radio .dot{width:16px;height:16px;border-radius:50%;border:2px solid #063e3e;flex:none;} .clbp-radio input:checked ~ .dot{background:#063e3e;box-shadow:inset 0 0 0 2px #fff;} .clbp-radio:has(input:checked){border-color:#063e3e;background:#e7efed;font-weight:700;} .clbp-radio:has(input:focus-visible){outline:3px solid #063e3e;outline-offset:2px;box-shadow:0 0 0 5px #fee065;} /* ---- footer ---- */ .clbp-ft{border-top:1px solid #d3dcd5;margin-top:14px;padding-top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;} .clbp-reset{background:none;border:1.5px solid #d3dcd5;border-radius:8px;color:#0d1321;font:inherit;font-size:12.5px;padding:6px 12px;cursor:pointer;} .clbp-reset:focus-visible,.clbp-why:focus-visible{outline:3px solid #063e3e;outline-offset:2px;box-shadow:0 0 0 5px #fee065;} .clbp-ft a{font-size:12px;color:#063e3e;} .clbp-why{background:none;border:0;padding:0;font:inherit;font-size:12px;color:#063e3e;text-decoration:underline;text-underline-offset:2px;cursor:pointer;} .clbp-why-panel{font-size:12px;line-height:1.55;color:#3a4151;background:#efece0;border-radius:9px;padding:10px 12px;} .clbp-why-panel[hidden]{display:none;} .clbp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;} .clbp-guide{position:fixed;left:0;right:0;height:2.2em;background:rgba(254,224,101,.22);border-top:2px solid #063e3e;border-bottom:2px solid #063e3e;z-index:99980;pointer-events:none;display:none;} /* honor the visitor's reduce-motion (and our own toggle) for the widget's own UI */ @media (prefers-reduced-motion:reduce){.clbp-switch-ui,.clbp-switch-ui::before{transition:none;}} html[data-clb-motion="reduce"] .clbp-switch-ui,html[data-clb-motion="reduce"] .clbp-switch-ui::before{transition:none;} /* ═══════════ PREFERENCE EFFECTS (data-attr driven on ) ═══════════ */ /* text size via zoom */ html[data-clb-text="125"]{zoom:1.25;}html[data-clb-text="150"]{zoom:1.5;}html[data-clb-text="200"]{zoom:2;} /* comfortable spacing (WCAG 1.4.12), scoped to text containers, not layout */ html[data-clb-spacing="on"] p,html[data-clb-spacing="on"] li,html[data-clb-spacing="on"] dd,html[data-clb-spacing="on"] blockquote,html[data-clb-spacing="on"] figcaption{ line-height:1.9!important;letter-spacing:.045em!important;word-spacing:.16em!important;} html[data-clb-spacing="on"] p{margin-bottom:1.6em!important;} /* always-underline links */ html[data-clb-links="on"] a{text-decoration:underline!important;text-underline-offset:2px;} /* reduce motion (user-forced, on top of OS pref) */ html[data-clb-motion="reduce"] *,html[data-clb-motion="reduce"] *::before,html[data-clb-motion="reduce"] *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} /* hand-designed high-contrast LIGHT theme: override the site's OWN CSS variables (it is var-driven). NOTE: --clb-focus is a full "Npx solid color" shorthand on this site, so we override the WHOLE shorthand (not a bare color) or the page focus ring disappears (WCAG 2.4.7). */ html[data-clb-contrast="light"]{--clb-ink:#0a0f17;--clb-fg-2:#1c2330;--clb-fg-3:#33404f;--clb-teal:#003636; --clb-cream:#ffffff;--clb-white:#ffffff;--clb-line:#4a5a55;--clb-beam:#fee065;--clb-beam-ink:#000000; --primary:#003636;--primary-1:#003636;--clb-focus:3px solid #7a5c00;background:#ffffff!important;color:#0a0f17!important;} /* RESPECT real Windows High Contrast: stand down so we never fight the OS palette */ @media (forced-colors:active){html[data-clb-contrast]{background:Canvas!important;color:CanvasText!important;} .clbp-fab{border:1px solid;} /* keep the selected state visible when the OS strips background colors */ .clbp-switch-input:checked + .clbp-switch-ui{outline:2px solid Highlight;} .clbp-switch-input:checked + .clbp-switch-ui::before{background:Highlight;} .clbp-radio input:checked ~ .dot{background:Highlight;} .clbp-radio:has(input:checked){outline:2px solid Highlight;outline-offset:1px;}}