/** * VALKYRRIS Accessibility Widget — scoped styles * IS 5568 / WCAG 2.1 AA compliant toolbar * Site effect classes apply only when toggled on . */ /* ─── Widget shell (never affected by site a11y modes) ─── */ .a11y-widget { position: static; pointer-events: none; --a11y-accent: #2563eb; --a11y-accent-hover: #1d4ed8; --a11y-surface: #ffffff; --a11y-surface-2: #f8fafc; --a11y-border: #cbd5e1; --a11y-text: #0f172a; --a11y-text-muted: #475569; --a11y-shadow: 0 4px 24px rgba(15, 23, 42, 0.18); --a11y-radius: 12px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; } .a11y-widget *, .a11y-widget *::before, .a11y-widget *::after { box-sizing: border-box; } /* ─── Trigger — flat left tab (hidden), pill on hover/focus ─── */ .a11y-widget__trigger-rail { pointer-events: auto; --a11y-trigger-height: 2.75rem; --a11y-trigger-tab-width: 2.25rem; position: fixed; left: 0; top: 50%; z-index: 2147483647; padding-left: max(0px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; width: var(--a11y-trigger-tab-width); max-width: min(calc(100vw - 1rem), 20rem); overflow: visible; transform: translateY(-50%); visibility: visible; opacity: 1; transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .a11y-widget__trigger-rail:hover, .a11y-widget__trigger-rail:has(.a11y-widget__trigger:focus-visible), .a11y-widget__trigger-rail.a11y-widget__trigger-rail--open { width: max-content; overflow: visible; } .a11y-widget__trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 0; width: var(--a11y-trigger-tab-width); height: var(--a11y-trigger-height); min-width: var(--a11y-trigger-tab-width); min-height: var(--a11y-trigger-height); max-width: var(--a11y-trigger-tab-width); padding: 0; border: 2px solid var(--a11y-accent); border-left: none; border-radius: 0 999px 999px 0; background: var(--a11y-surface); color: var(--a11y-text); font: inherit; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em; cursor: pointer; box-shadow: var(--a11y-shadow); transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1), padding 0.28s cubic-bezier(0.22, 1, 0.36, 1), gap 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .a11y-widget__trigger-rail:hover .a11y-widget__trigger, .a11y-widget__trigger-rail:has(.a11y-widget__trigger:focus-visible) .a11y-widget__trigger, .a11y-widget__trigger-rail.a11y-widget__trigger-rail--open .a11y-widget__trigger { width: auto; min-width: max-content; max-width: none; padding: 0.625rem 1rem 0.625rem 0.75rem; gap: 0.5rem; background: var(--a11y-surface-2); border-color: var(--a11y-accent-hover); } .a11y-widget__trigger:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 3px; } .a11y-widget__trigger-icon { display: block; flex-shrink: 0; width: 1.75rem; height: 1.75rem; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } .a11y-widget__trigger-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } .a11y-widget__trigger-rail:hover .a11y-widget__trigger-label, .a11y-widget__trigger-rail:has(.a11y-widget__trigger:focus-visible) .a11y-widget__trigger-label, .a11y-widget__trigger-rail.a11y-widget__trigger-rail--open .a11y-widget__trigger-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; opacity: 1; pointer-events: auto; } /* ─── Overlay & dialog ─── */ .a11y-widget__overlay { pointer-events: auto; position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } .a11y-widget__overlay[hidden] { display: none !important; } .a11y-widget__dialog { width: min(100%, 28rem); max-height: none; overflow: visible; display: flex; flex-direction: column; border: 2px solid var(--a11y-border); border-radius: var(--a11y-radius); background: var(--a11y-surface); color: var(--a11y-text); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25); } .a11y-widget__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--a11y-border); background: var(--a11y-surface-2); flex-shrink: 0; } .a11y-widget__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--a11y-text); } .a11y-widget__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--a11y-border); border-radius: 8px; background: var(--a11y-surface); color: var(--a11y-text); font-size: 1.5rem; line-height: 1; cursor: pointer; } .a11y-widget__close:hover { border-color: var(--a11y-accent); color: var(--a11y-accent); } .a11y-widget__close:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } .a11y-widget__body { padding: 0.625rem 1rem 0.875rem; overflow: visible; } .a11y-widget__section { margin-bottom: 0.625rem; } .a11y-widget__section:last-child { margin-bottom: 0; } .a11y-widget__section--reset { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--a11y-border); } .a11y-widget__label { display: block; margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a11y-text-muted); } .a11y-widget__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .a11y-widget__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0.375rem 0.75rem; border: 1px solid var(--a11y-border); border-radius: 8px; background: var(--a11y-surface); color: var(--a11y-text); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .a11y-widget__btn:hover { border-color: var(--a11y-accent); color: var(--a11y-accent); } .a11y-widget__btn:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } .a11y-widget__btn[aria-pressed="true"] { background: var(--a11y-accent); border-color: var(--a11y-accent); color: #ffffff; } .a11y-widget__btn--wide { flex: 1 1 100%; justify-content: flex-start; text-align: left; } .a11y-widget__value { min-width: 3.5rem; text-align: center; font-weight: 700; color: var(--a11y-accent); } .a11y-widget__reset { width: 100%; margin-top: 0; border-color: var(--a11y-accent); background: var(--a11y-accent); color: #ffffff; } .a11y-widget__reset:hover { background: var(--a11y-accent-hover); border-color: var(--a11y-accent-hover); color: #ffffff; } .a11y-widget__hint { margin: 0.25rem 0 0; font-size: 0.6875rem; line-height: 1.35; color: var(--a11y-text-muted); } .a11y-widget__live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 480px) { .a11y-widget__trigger-rail { --a11y-trigger-height: 2.75rem; --a11y-trigger-tab-width: 2.25rem; } } /* ─── Site accessibility modes (scoped to html classes) ─── */ /* Text scaling via root rem base — only when attribute present */ html[data-a11y-font-scale] { font-size: calc(100% * var(--a11y-font-scale, 1)); } /* High-contrast dark */ html.a11y-high-contrast-dark :where(body *:not(.a11y-widget):not(.a11y-widget *):not(#valkyrris-site-header):not(#valkyrris-site-header *)) { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-high-contrast-dark :where( body img:not(.a11y-widget *):not(.valkyrris-brand-logo), body video:not(.a11y-widget *), body svg:not(.a11y-widget *) ) { filter: contrast(1.25) !important; } /* Brand logo keeps intended colors — not site HC filters */ html.a11y-high-contrast-dark #valkyrris-site-header .valkyrris-brand-logo { filter: none !important; } html.a11y-high-contrast-dark :where(body a:not(.a11y-widget *):not(#valkyrris-site-header *)) { color: #ffff00 !important; text-decoration: underline !important; text-underline-offset: 0.15em; } /* Inverted colors — page only; widget lives outside this tree */ html.a11y-inverted-colors #valkyrris-page-content { filter: invert(1) hue-rotate(180deg); transform: translateZ(0); } /* Link & interactive highlight */ html.a11y-highlight-links :where( body a:not(.a11y-widget *):not(#valkyrris-site-header *), body button:not(.a11y-widget *):not(#valkyrris-site-header *), body [role="button"]:not(.a11y-widget *):not(#valkyrris-site-header *), body input[type="submit"]:not(.a11y-widget *):not(#valkyrris-site-header *), body input[type="button"]:not(.a11y-widget *):not(#valkyrris-site-header *), body input[type="reset"]:not(.a11y-widget *):not(#valkyrris-site-header *), body select:not(.a11y-widget *):not(#valkyrris-site-header *), body summary:not(.a11y-widget *):not(#valkyrris-site-header *), body label[for]:not(.a11y-widget *):not(#valkyrris-site-header *), body [tabindex]:not([tabindex="-1"]):not(.a11y-widget *):not(#valkyrris-site-header *) ) { outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.15em !important; background-color: rgba(255, 191, 0, 0.15) !important; } /* Readable sans-serif font */ html.a11y-readable-font :where(body *:not(.a11y-widget):not(.a11y-widget *):not(#valkyrris-site-header):not(#valkyrris-site-header *)) { font-family: Arial, Helvetica, "Segoe UI", system-ui, sans-serif !important; } /* Pause animations & motion (status dot also pauses — see globals.css) */ html.a11y-pause-animations :where( *:not(.a11y-widget):not(.a11y-widget *):not(#valkyrris-site-header):not(#valkyrris-site-header *) ), html.a11y-pause-animations :where( *:not(.a11y-widget):not(.a11y-widget *):not(#valkyrris-site-header):not(#valkyrris-site-header *)::before ), html.a11y-pause-animations :where( *:not(.a11y-widget):not(.a11y-widget *):not(#valkyrris-site-header):not(#valkyrris-site-header *)::after ) { animation: none !important; animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } /* Prevent paused transitions from leaving content stuck at opacity: 0 (page only) */ html.a11y-pause-animations #valkyrris-page-content, html.a11y-pause-animations #valkyrris-page-content *:not(.signal-status-dot) { opacity: 1 !important; } /* Background video — freeze on current frame (playback stopped via JS) */ html.a11y-pause-animations #valkyrris-page-content video.valkyrris-backdrop-video { animation: none !important; } /* Widget always on top and visible — never inherit page a11y filters */ .a11y-widget, .a11y-widget__trigger-rail, .a11y-widget__trigger, .a11y-widget__overlay { visibility: visible !important; filter: none !important; } @media (prefers-reduced-motion: reduce) { .a11y-widget__trigger-rail { transition: none; } .a11y-widget__trigger-label { transition: none; } .a11y-widget__trigger-rail:hover, .a11y-widget__trigger-rail:has(.a11y-widget__trigger:focus-visible), .a11y-widget__trigger-rail.a11y-widget__trigger-rail--open { width: max-content; } .a11y-widget__btn, .a11y-widget__close { transition: none; } }