/* assets/a11y-widget.css — lockd.it accessibility widget Real, native a11y controls (font scale, high contrast, link underlines, motion pause). No third-party overlays. State persists in localStorage. */ .a11y-fab { position: fixed; left: 18px; bottom: 18px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--bg); border: none; box-shadow: var(--shadow-lg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.18s var(--ease-out), background 0.18s; } .a11y-fab:hover { background: var(--mint-deep); transform: translateY(-2px); } .a11y-fab:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; } .a11y-fab svg { width: 26px; height: 26px; } .a11y-panel { position: fixed; left: 18px; bottom: 78px; z-index: 81; width: 320px; max-width: calc(100vw - 36px); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg); border: 1px solid var(--rule); padding: 20px; font-size: 14px; display: none; animation: a11y-rise 0.2s var(--ease-out); } .a11y-panel.is-open { display: block; } @keyframes a11y-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .a11y-panel h3 { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 4px; } .a11y-panel .a11y-sub { font-size: 12px; color: var(--ink-mute); margin: 0 0 16px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--rule-soft); } .a11y-row:first-of-type { border-top: none; } .a11y-row .label { font-size: 13px; color: var(--ink); flex: 1; } .a11y-row .label .desc { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 2px; } /* Font-size segmented control */ .a11y-seg { display: inline-flex; gap: 0; padding: 2px; background: var(--bg-alt); border-radius: var(--r-sm); } .a11y-seg button { padding: 6px 10px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-mute); border: none; background: none; border-radius: 4px; cursor: pointer; transition: all 0.15s; } .a11y-seg button.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); } .a11y-seg button:hover:not(.is-active) { color: var(--ink); } /* Toggle switch */ .a11y-tog { position: relative; width: 38px; height: 22px; border-radius: 100px; background: var(--rule-strong); transition: background 0.15s; cursor: pointer; border: none; padding: 0; flex-shrink: 0; } .a11y-tog::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform 0.18s var(--ease-out); box-shadow: 0 1px 3px rgba(0,0,0,.15); } .a11y-tog.is-on { background: var(--mint); } .a11y-tog.is-on::after { transform: translateX(16px); } .a11y-reset { display: block; width: 100%; margin-top: 16px; padding: 10px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-soft); background: var(--bg-warm); border: 1px solid var(--rule); border-radius: var(--r-sm); cursor: pointer; transition: all 0.15s; } .a11y-reset:hover { color: var(--coral-deep); border-color: var(--coral); } .a11y-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-alt); border: none; color: var(--ink-soft); font-size: 14px; line-height: 1; cursor: pointer; } .a11y-close:hover { background: var(--coral-soft); color: var(--coral-deep); } /* === EFFECTS APPLIED TO === */ /* Font scale via CSS root variable */ html.a11y-font-md { font-size: 17px; } html.a11y-font-lg { font-size: 19px; } html.a11y-font-xl { font-size: 21px; } /* High contrast — darken ink + lighten bg + thicker borders */ html.a11y-contrast { --ink: #000000; --ink-soft: #1a1a1a; --ink-mute: #2a2a2a; --bg: #FFFFFF; --bg-alt: #F2F2F2; --bg-warm: #FFFFFF; --surface: #FFFFFF; --rule: #444444; --rule-soft: #666666; --rule-strong: #000000; --mint-deep: #006837; --coral-deep: #B0241B; } html.a11y-contrast img:not([alt=""]) { outline: 1px solid var(--rule); } /* Underline all links */ html.a11y-underline a:not(.btn):not(.wordmark):not(.cookie-banner .btn-cookie) { text-decoration: underline !important; } /* Pause animations & transitions */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } @media (max-width: 600px) { .a11y-fab { left: 12px; bottom: 12px; width: 46px; height: 46px; } .a11y-panel { left: 12px; bottom: 68px; } } @media print { .a11y-fab, .a11y-panel { display: none !important; } }