/* ===== Boosinka Accessibility — toolbar widget (site-neutral) ===== Theme the widget by defining these custom properties in your theme: --booa11y-primary button/active background (default #1f2937) --booa11y-on-primary icon/active text (default #ffffff) --booa11y-surface panel background (default #ffffff) --booa11y-border borders (default #d1d5db) --booa11y-muted idle control background (default #f3f4f6) --booa11y-focus focus ring (default #111827) --booa11y-link statement link (default #1d4ed8) --booa11y-font widget font (default system stack) Structural rules carry !important so hostile theme CSS can't hide the widget. */ .booa11y{position:fixed !important;bottom:18px;z-index:99999 !important;font-family:var(--booa11y-font,system-ui,-apple-system,Segoe UI,Arial,sans-serif)} .booa11y-pos-left{left:18px;right:auto} .booa11y-pos-right{right:18px;left:auto} #booa11y-toggle{width:48px;height:48px;border-radius:50%;background:var(--booa11y-primary,#1f2937) !important;color:var(--booa11y-on-primary,#fff) !important;border:none;cursor:pointer;display:flex !important;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3);padding:0} #booa11y-toggle:hover,#booa11y-toggle:focus-visible{filter:brightness(1.15)} #booa11y-toggle:focus-visible{outline:3px solid var(--booa11y-focus,#111827) !important;outline-offset:2px} #booa11y-panel{position:absolute;bottom:58px;width:min(240px,calc(100vw - 36px));max-height:70vh;overflow:auto;background:var(--booa11y-surface,#fff) !important;border:1px solid var(--booa11y-border,#d1d5db);border-radius:8px;padding:14px;box-shadow:0 6px 24px rgba(0,0,0,.18)} #booa11y-panel[hidden]{display:none !important} .booa11y-pos-left #booa11y-panel{left:0} .booa11y-pos-right #booa11y-panel{right:0} .booa11y-title{font-weight:700;color:var(--booa11y-primary,#1f2937);font-size:15px;margin-bottom:10px;letter-spacing:1px} .booa11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} #booa11y-panel button{border:1px solid var(--booa11y-border,#d1d5db);background:var(--booa11y-muted,#f3f4f6);color:var(--booa11y-primary,#1f2937);border-radius:4px;padding:8px 6px;min-height:40px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.3} #booa11y-panel button[aria-pressed="true"]{background:var(--booa11y-primary,#1f2937);color:var(--booa11y-on-primary,#fff);border-color:var(--booa11y-primary,#1f2937)} #booa11y-panel button:focus-visible{outline:3px solid var(--booa11y-focus,#111827) !important;outline-offset:1px} #booa11y-panel .booa11y-reset{grid-column:1/-1;background:var(--booa11y-surface,#fff);border-style:dashed} .booa11y-statement{display:block;margin-top:10px;font-size:12px;color:var(--booa11y-link,#1d4ed8);text-align:center;text-decoration:underline} /* ===== Modes (classes applied to ) ===== `zoom` is intentional: it scales px-sized theme text (rem scaling would not); standardized and supported in all current engines. */ html.booa11y-fs-1{zoom:1.1} html.booa11y-fs-2{zoom:1.25} html.booa11y-fs-3{zoom:1.4} html.booa11y-grayscale{filter:grayscale(1)} /* Broad recolor rules use only CSS3-safe :not(simple) chains; the widget's own look is explicitly restored right after, so Selectors-4 support isn't required. */ html.booa11y-contrast,html.booa11y-contrast body{background:#000 !important} html.booa11y-contrast body *:not(img):not(svg):not(video){background-color:#000 !important;color:#ffe97d !important;border-color:#ffe97d !important} html.booa11y-contrast a{color:#7dc4ff !important;text-decoration:underline !important} html.booa11y-light,html.booa11y-light body{background:#fff !important} html.booa11y-light body *:not(img):not(svg):not(video){background-color:#fff !important;color:#000 !important} html.booa11y-light a{color:#00309c !important;text-decoration:underline !important} html.booa11y-links a{text-decoration:underline !important;font-weight:600 !important} html.booa11y-font body,html.booa11y-font body *{font-family:Arial,Helvetica,sans-serif !important} html.booa11y-noanim *,html.booa11y-noanim *::before,html.booa11y-noanim *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important} /* ===== Widget restore — placed after mode rules so the toolbar stays usable in every mode ===== */ html.booa11y-contrast #booa11y-panel,html.booa11y-light #booa11y-panel{background:var(--booa11y-surface,#fff) !important} html.booa11y-contrast #booa11y-panel button,html.booa11y-light #booa11y-panel button{background:var(--booa11y-muted,#f3f4f6) !important;color:var(--booa11y-primary,#1f2937) !important;border-color:var(--booa11y-border,#d1d5db) !important} html.booa11y-contrast #booa11y-panel button[aria-pressed="true"],html.booa11y-light #booa11y-panel button[aria-pressed="true"]{background:var(--booa11y-primary,#1f2937) !important;color:var(--booa11y-on-primary,#fff) !important} html.booa11y-contrast #booa11y-toggle,html.booa11y-light #booa11y-toggle{background:var(--booa11y-primary,#1f2937) !important;color:var(--booa11y-on-primary,#fff) !important} html.booa11y-contrast .booa11y-title,html.booa11y-light .booa11y-title{color:var(--booa11y-primary,#1f2937) !important} html.booa11y-contrast .booa11y-statement,html.booa11y-light .booa11y-statement{color:var(--booa11y-link,#1d4ed8) !important} html.booa11y-font #booa11y,html.booa11y-font #booa11y *{font-family:var(--booa11y-font,system-ui,Arial,sans-serif) !important}