/* * Bureau Marten – A11y Widget Stylesheet * Version: 1.3.0 * * Fully self-contained – no theme CSS variables required. * All colors are defined inline and cannot be overridden by the theme. * z-index: 9999 ensures the widget appears above Elementor sticky headers. * !important on button properties overrides Elementor's global button styles. * * New in 1.3: --bm-a11y-accent-text controls text color on accent backgrounds * (hover/active states). Default: #111111. Set to #ffffff for dark accent colors. * * WCAG 2.1 AA color contrasts: * #111 on #fff = 18.1:1 ✓ * #fff on #111 = 18.1:1 ✓ * #111 on #F4C500 = 8.2:1 ✓ * #555 on #fff = 7.4:1 ✓ */ /* ── Widget-scoped custom properties ────────────────────────────────────────── */ .bm-a11y-widget { --bm-a11y-black: #111111; --bm-a11y-white: #ffffff; --bm-a11y-accent: #F4C500; --bm-a11y-accent-text: #111111; --bm-a11y-border: #d0d0d0; --bm-a11y-mid: #555555; --bm-a11y-radius: 4px; --bm-a11y-trans: 0.15s ease; } /* ── Widget wrapper ─────────────────────────────────────────────────────────── */ .bm-a11y-widget { position: fixed !important; left: 0 !important; bottom: 48px !important; z-index: 9999 !important; display: flex !important; align-items: flex-end !important; /* * IMPORTANT: font-size: 16px isolates the widget from the font-size * value that the widget itself modifies via JS. Without this, all em-based * sizes (buttons, panel) would grow and overflow when font size is increased. * All internal measurements use em (relative to this fixed 16px). */ font-size: 16px !important; } /* ── Button reset (overrides Elementor/theme globals) ───────────────────────── */ .bm-a11y-widget button { box-sizing: border-box !important; margin: 0 !important; font-family: inherit !important; line-height: 1.3 !important; text-decoration: none !important; box-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; transition: background var(--bm-a11y-trans), color var(--bm-a11y-trans), border-color var(--bm-a11y-trans) !important; } /* ── Trigger button ─────────────────────────────────────────────────────────── */ .bm-a11y-widget .bm-a11y-trigger { background: var(--bm-a11y-black) !important; color: var(--bm-a11y-white) !important; border: none !important; border-radius: 0 var(--bm-a11y-radius) var(--bm-a11y-radius) 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5em !important; padding: 0.75em 0.5em !important; position: relative !important; font-size: 1em !important; width: auto !important; height: auto !important; text-align: center !important; } .bm-a11y-widget .bm-a11y-trigger:hover, .bm-a11y-widget .bm-a11y-trigger:focus-visible { background: var(--bm-a11y-accent) !important; color: var(--bm-a11y-accent-text) !important; outline: none !important; } /* Focus indicator (WCAG 2.4.7) */ .bm-a11y-widget .bm-a11y-trigger:focus-visible { outline: 3px solid var(--bm-a11y-accent) !important; outline-offset: 2px !important; } /* Active indicator when at least one setting is enabled */ .bm-a11y-widget .bm-a11y-trigger.has-active { background: var(--bm-a11y-accent) !important; color: var(--bm-a11y-accent-text) !important; } .bm-a11y-widget .bm-a11y-trigger.has-active:hover, .bm-a11y-widget .bm-a11y-trigger.has-active:focus-visible { background: var(--bm-a11y-black) !important; color: var(--bm-a11y-white) !important; } /* Vertically rotated label */ .bm-a11y-trigger-label { font-size: 0.625em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: inherit; } /* ── Panel ──────────────────────────────────────────────────────────────────── */ .bm-a11y-panel[hidden] { display: none !important; } .bm-a11y-panel { position: absolute; bottom: 0; left: 100%; width: 16em; background: var(--bm-a11y-white); border: 1px solid var(--bm-a11y-border); border-radius: 0 var(--bm-a11y-radius) var(--bm-a11y-radius) 0; padding: 1.25em; display: flex; flex-direction: column; gap: 0.75em; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12); /* No overflow:hidden – focus rings remain visible */ } /* ── Panel title ────────────────────────────────────────────────────────────── */ .bm-a11y-title { font-size: 0.75em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bm-a11y-mid); margin: 0 0 0.25em; padding: 0; line-height: 1.3; font-family: inherit; } /* ── Font controls & font buttons ───────────────────────────────────────────── */ .bm-a11y-font-controls { display: flex; gap: 0.25em; width: 100%; } .bm-a11y-widget .bm-a11y-font-btn { flex: 1 !important; width: auto !important; height: auto !important; border: 1px solid var(--bm-a11y-border) !important; background: var(--bm-a11y-white) !important; background-color: var(--bm-a11y-white) !important; color: var(--bm-a11y-black) !important; font-size: 0.875em !important; font-weight: 700 !important; padding: 0.5em 0 !important; border-radius: var(--bm-a11y-radius) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .bm-a11y-widget .bm-a11y-font-btn:hover, .bm-a11y-widget .bm-a11y-font-btn:focus-visible { background: var(--bm-a11y-accent) !important; background-color: var(--bm-a11y-accent) !important; color: var(--bm-a11y-accent-text) !important; border-color: var(--bm-a11y-accent) !important; outline: none !important; } .bm-a11y-widget .bm-a11y-font-btn:focus-visible { outline: 3px solid var(--bm-a11y-accent) !important; outline-offset: 2px !important; } /* ── Feature toggle buttons ─────────────────────────────────────────────────── */ .bm-a11y-widget .bm-a11y-toggle { width: 100% !important; height: auto !important; padding: 0.5em 0.75em !important; border: 1px solid var(--bm-a11y-border) !important; background: var(--bm-a11y-white) !important; background-color: var(--bm-a11y-white) !important; color: var(--bm-a11y-black) !important; font-size: 0.875em !important; font-weight: 400 !important; text-align: left !important; border-radius: var(--bm-a11y-radius) !important; display: block !important; } .bm-a11y-widget .bm-a11y-toggle:hover, .bm-a11y-widget .bm-a11y-toggle:focus-visible { border-color: var(--bm-a11y-black) !important; outline: none !important; } .bm-a11y-widget .bm-a11y-toggle:focus-visible { outline: 3px solid var(--bm-a11y-accent) !important; outline-offset: 2px !important; } /* Active state (aria-pressed="true") */ .bm-a11y-widget .bm-a11y-toggle[aria-pressed="true"] { background: var(--bm-a11y-black) !important; background-color: var(--bm-a11y-black) !important; color: var(--bm-a11y-white) !important; border-color: var(--bm-a11y-black) !important; } .bm-a11y-widget .bm-a11y-toggle[aria-pressed="true"]:hover, .bm-a11y-widget .bm-a11y-toggle[aria-pressed="true"]:focus-visible { background: var(--bm-a11y-mid) !important; background-color: var(--bm-a11y-mid) !important; border-color: var(--bm-a11y-mid) !important; } /* ── Reset button ───────────────────────────────────────────────────────────── */ .bm-a11y-widget .bm-a11y-reset { width: 100% !important; height: auto !important; padding: 0.5em 0.75em !important; border: none !important; background: none !important; background-color: transparent !important; color: var(--bm-a11y-mid) !important; font-size: 0.75em !important; font-weight: 400 !important; text-align: left !important; margin-top: 0.25em !important; border-radius: var(--bm-a11y-radius) !important; display: block !important; } .bm-a11y-widget .bm-a11y-reset:hover { color: var(--bm-a11y-black) !important; background: none !important; background-color: transparent !important; } .bm-a11y-widget .bm-a11y-reset:focus-visible { outline: 3px solid var(--bm-a11y-accent) !important; outline-offset: 2px !important; color: var(--bm-a11y-black) !important; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL A11Y STATES Classes are set on – affect the entire page. !important is required to override theme CSS. ═══════════════════════════════════════════════════════════════════════════ */ /* High contrast */ html.a11y-contrast { filter: grayscale(1) contrast(1.6) !important; } /* No animations (manually enforce prefers-reduced-motion) */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Underline links */ html.a11y-underline a { text-decoration: underline !important; text-underline-offset: 0.2em; } /* Large cursor */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23111111'/%3E%3C/svg%3E") 8 8, auto !important; } /* ── Responsive: panel on small screens ─────────────────────────────────────── */ @media (max-width: 400px) { .bm-a11y-panel { width: calc(100vw - 3.5em); max-width: 16em; } }