/* BL Accessibility (self-hosted, no third-party) */ :root{ --bl-a11y-bottom: 16px; --bl-a11y-left: 16px; --bl-a11y-z: 2147483000; --bl-a11y-btn: 52px; --bl-a11y-radius: 14px; --bl-a11y-border: rgba(0,0,0,.18); --bl-a11y-shadow: 0 12px 28px rgba(0,0,0,.18); --bl-a11y-bg: #ffffff; --bl-a11y-fg: #111111; } /* Floating button */ .bl-a11y-btn{ position: fixed; left: var(--bl-a11y-left); bottom: var(--bl-a11y-bottom); width: var(--bl-a11y-btn); height: var(--bl-a11y-btn); border-radius: 999px; border: 1px solid var(--bl-a11y-border); box-shadow: var(--bl-a11y-shadow); background: var(--bl-a11y-bg); color: var(--bl-a11y-fg); display: inline-flex; align-items: center; justify-content: center; z-index: var(--bl-a11y-z); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .bl-a11y-btn:focus-visible{ outline: 3px solid rgba(0,0,0,.35); outline-offset: 3px; } .bl-a11y-btn .bl-a11y-icon{ font-size: 22px; line-height: 1; } /* Panel */ .bl-a11y-panel{ position: fixed; left: var(--bl-a11y-left); bottom: calc(var(--bl-a11y-bottom) + var(--bl-a11y-btn) + 12px); width: min(320px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; border-radius: var(--bl-a11y-radius); border: 1px solid var(--bl-a11y-border); box-shadow: var(--bl-a11y-shadow); background: var(--bl-a11y-bg); color: var(--bl-a11y-fg); z-index: calc(var(--bl-a11y-z) + 1); padding: 14px; display: none; } .bl-a11y-panel[aria-hidden="false"]{ display: block; } .bl-a11y-title{ font-weight: 700; font-size: 16px; margin: 2px 0 10px; } .bl-a11y-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; } .bl-a11y-row label{ font-size: 14px; margin: 0; } .bl-a11y-actions{ display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .bl-a11y-chip{ border: 1px solid var(--bl-a11y-border); background: #f7f7f7; color: #111; border-radius: 999px; padding: 8px 10px; font-size: 13px; line-height: 1; cursor: pointer; } .bl-a11y-chip[aria-pressed="true"]{ background: #111; color: #fff; } .bl-a11y-divider{ height: 1px; background: rgba(0,0,0,.10); margin: 12px 0; } .bl-a11y-hint{ font-size: 12px; opacity: .75; margin-top: 10px; } /* Accessibility effects (applied to ) */ html.bl-a11y-grayscale{ filter: grayscale(1); } html.bl-a11y-high-contrast{ filter: contrast(1.25); } html.bl-a11y-readable-font body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; line-height: 1.6; } html.bl-a11y-underline-links a{ text-decoration: underline !important; } html.bl-a11y-highlight-links a{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; background: rgba(255, 235, 59, 0.28); } html.bl-a11y-reduce-motion *, html.bl-a11y-reduce-motion *::before, html.bl-a11y-reduce-motion *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }