/* Furver accessibility preferences. Applied through data attributes on . */ html[data-a11y-text-size="large"] { font-size: 112.5%; } html[data-a11y-reduce-motion="true"] { scroll-behavior: auto !important; } html[data-a11y-reduce-motion="true"] *, html[data-a11y-reduce-motion="true"] *::before, html[data-a11y-reduce-motion="true"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } html[data-a11y-focus-visible="true"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #22d3ee !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.2) !important; } body.accessibility-dialog-open { overflow: hidden !important; } .accessibility-menu-dialog { width: min(92vw, 560px); max-width: 560px; max-height: min(86dvh, 720px); margin: auto; padding: 0; border: 1px solid rgba(129, 140, 248, 0.32); border-radius: 24px; background: transparent; color: var(--furver-text, #e2e8f0); box-shadow: 0 30px 80px rgba(2, 6, 23, 0.48); overflow: hidden; } .accessibility-menu-dialog::backdrop { background: rgba(2, 6, 23, 0.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .accessibility-menu-dialog.is-fallback-open { position: fixed; inset: 0; z-index: 2147483000; } .accessibility-menu-panel { max-height: min(86dvh, 720px); padding: 24px; background: radial-gradient(circle at 90% 0%, rgba(34, 211, 238, 0.12), transparent 36%), linear-gradient(145deg, #17172d, #101024 72%); overflow-y: auto; overscroll-behavior: contain; } .accessibility-menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; } .accessibility-menu-heading { min-width: 0; } .accessibility-menu-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #67e8f9; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .accessibility-menu-title { margin: 0; color: #f8fafc; font-size: clamp(1.35rem, 4vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; } .accessibility-menu-description { margin: 8px 0 0; color: #aeb8cc; font-size: 0.88rem; line-height: 1.6; } .accessibility-menu-close { width: 42px; height: 42px; flex: 0 0 42px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 13px; background: rgba(255, 255, 255, 0.06); color: #e2e8f0; display: inline-grid; place-items: center; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .accessibility-menu-close:hover { border-color: rgba(103, 232, 249, 0.48); background: rgba(103, 232, 249, 0.1); transform: translateY(-1px); } .accessibility-options { display: grid; gap: 12px; } .accessibility-option { min-width: 0; padding: 15px 16px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 17px; background: rgba(255, 255, 255, 0.045); display: flex; align-items: center; gap: 13px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .accessibility-option:hover { border-color: rgba(129, 140, 248, 0.34); background: rgba(129, 140, 248, 0.08); transform: translateY(-1px); } .accessibility-option-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: rgba(34, 211, 238, 0.1); color: #67e8f9; display: inline-grid; place-items: center; font-size: 1rem; } .accessibility-option-copy { min-width: 0; flex: 1 1 auto; } .accessibility-option-title { display: block; color: #f8fafc; font-size: 0.93rem; font-weight: 750; line-height: 1.3; } .accessibility-option-description { display: block; margin-top: 3px; color: #9faac0; font-size: 0.76rem; line-height: 1.45; } .accessibility-switch { width: 46px; height: 26px; flex: 0 0 46px; margin: 0; border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 999px; background: #292b43; appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .accessibility-switch::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #dbe4f0; box-shadow: 0 2px 7px rgba(2, 6, 23, 0.28); position: absolute; top: 3px; left: 3px; transition: transform 160ms ease, background 160ms ease; } .accessibility-switch:checked { border-color: #22d3ee; background: linear-gradient(135deg, #4f46e5, #0891b2); } .accessibility-switch:checked::after { background: #ffffff; transform: translateX(20px); } .accessibility-switch:focus-visible, .accessibility-menu-close:focus-visible, .accessibility-reset-button:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; } .accessibility-menu-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, 0.14); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .accessibility-status { min-height: 20px; margin: 0; color: #9faac0; font-size: 0.74rem; line-height: 1.4; } .accessibility-reset-button { min-height: 42px; padding: 10px 15px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 13px; background: rgba(255, 255, 255, 0.055); color: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.8rem; font-weight: 750; white-space: nowrap; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .accessibility-reset-button:hover { border-color: rgba(103, 232, 249, 0.44); background: rgba(103, 232, 249, 0.08); } html[data-theme="light"] .accessibility-menu-dialog { border-color: rgba(79, 70, 229, 0.2); color: #1e293b; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2); } html[data-theme="light"] .accessibility-menu-panel { background: radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.12), transparent 36%), linear-gradient(145deg, #ffffff, #f6f8fc 72%); } html[data-theme="light"] .accessibility-menu-title, html[data-theme="light"] .accessibility-option-title { color: #172033; } html[data-theme="light"] .accessibility-menu-description, html[data-theme="light"] .accessibility-option-description, html[data-theme="light"] .accessibility-status { color: #64748b; } html[data-theme="light"] .accessibility-menu-close, html[data-theme="light"] .accessibility-reset-button { border-color: rgba(79, 70, 229, 0.16); background: rgba(79, 70, 229, 0.055); color: #334155; } html[data-theme="light"] .accessibility-option { border-color: rgba(71, 85, 105, 0.13); background: rgba(255, 255, 255, 0.74); } html[data-theme="light"] .accessibility-option:hover { border-color: rgba(79, 70, 229, 0.28); background: #f8faff; } html[data-theme="light"] .accessibility-option-icon { background: rgba(37, 99, 235, 0.08); color: #2563eb; } html[data-theme="light"] .accessibility-switch { border-color: rgba(100, 116, 139, 0.3); background: #dbe3ee; } html[data-theme="light"] .accessibility-switch::after { background: #ffffff; } html[data-theme="light"] .accessibility-switch:checked { border-color: #2563eb; background: linear-gradient(135deg, #4f46e5, #0284c7); } @media (max-width: 575.98px) { .accessibility-menu-dialog { width: min(94vw, 560px); border-radius: 20px; } .accessibility-menu-panel { padding: 19px; } .accessibility-menu-header { gap: 12px; } .accessibility-option { padding: 13px; } .accessibility-option-icon { width: 38px; height: 38px; flex-basis: 38px; } .accessibility-menu-footer { align-items: stretch; flex-direction: column; } .accessibility-reset-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .accessibility-menu-dialog *, .accessibility-menu-dialog *::before, .accessibility-menu-dialog *::after { transition: none !important; } }