/* NextPlay accessibility layer for the PUBLIC pages (2026-09). * * Additive by design: nothing in here changes what a mouse user sees in the * default state. Every rule fires only for an input modality or a user * preference (keyboard focus, prefers-reduced-motion) or styles an element * that is visually hidden until it is needed (skip link, sr-only text). * * The 1px-clip technique for hidden text is deliberate and must stay: * left:-9999px becomes scrollable overflow in RTL and unlocked the whole * mobile layout once (the 2026-09-03 Hebrew-mobile incident, see base.html). * * Loaded AFTER each page's own stylesheet so :focus-visible wins over the * `outline: none` several pages set on their inputs' base state. */ .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-to-content { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-to-content:focus { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 99999; width: auto; height: auto; clip-path: none; padding: 12px 24px; background: #f48c25; color: #fff; border-radius: 8px; font-weight: 700; text-decoration: none; } /* Keyboard focus ring. :focus-visible does not match a mouse click on a * link or button, so pointer users never see it; text fields are excluded * because the browser treats typing into them as keyboard focus, and each * page already draws its own border-colour focus state on inputs. */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="switch"]:focus-visible, [role="slider"]:focus-visible, [tabindex]:not(input):not(textarea):not(select):focus-visible { outline: 2px solid #ff6b35; outline-offset: 2px; } /* The skip link lands focus here; the page itself needs no ring. */ #main-content:focus, #main-content:focus-visible { outline: none; } /* ── Accessibility preferences (a11y-menu.js) ────────────────────────── * Classes on , persisted per browser. Nothing here applies until a * visitor turns a preference on. */ html.np-a11y-s1 { font-size: 112.5%; } html.np-a11y-s2 { font-size: 125%; } html.np-a11y-u a { text-decoration: underline !important; } html.np-a11y-m *, html.np-a11y-m *::before, html.np-a11y-m *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.np-a11y-f *:focus { outline: 3px solid #ffb400 !important; outline-offset: 3px !important; } /* High contrast lifts every muted text token the two stylesheets define and * puts dark text on the orange buttons (white on orange is 3.1:1). */ html.np-a11y-c { --text-muted: #d6dce4; --text-dim: #c4ccd6; --text-2: #d6dce4; --text-3: #c4ccd6; --lm-text-3: #333; } html.np-a11y-c body { color: #fff; } html.np-a11y-c a { text-decoration: underline; } html.np-a11y-c .btn-primary, html.np-a11y-c .btn-primary-auth, html.np-a11y-c .register-btn, html.np-a11y-c .contact-submit, html.np-a11y-c .share-cta-btn, html.np-a11y-c .np-a11y-btn { color: #0f1520 !important; } /* The 30px corner button (public pages only) and its panel. */ .np-a11y-btn { position: fixed; bottom: 12px; inset-inline-start: 12px; z-index: 9990; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #ff6b35; color: #fff; opacity: 0.55; display: grid; place-items: center; cursor: pointer; transition: opacity 0.15s; } .np-a11y-btn:hover, .np-a11y-btn:focus-visible, .np-a11y-btn[aria-expanded="true"] { opacity: 1; } .np-a11y-btn svg { width: 18px; height: 18px; fill: currentColor; } .np-a11y-panel { position: fixed; bottom: 50px; inset-inline-start: 12px; z-index: 9991; width: 236px; max-width: calc(100vw - 24px); padding: 12px; background: #161d28; color: #f0f3f6; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); font-family: inherit; font-size: 13px; line-height: 1.4; } .np-a11y-panel[hidden] { display: none; } .np-a11y-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .np-a11y-title { font-weight: 700; } .np-a11y-close { background: none; border: 0; color: #9ba4b0; font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .np-a11y-close:hover { color: #fff; } .np-a11y-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .np-a11y-row:first-of-type { border-top: 0; } .np-a11y-label { color: inherit; } .np-a11y-switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; border: 0; background: #2a3548; cursor: pointer; padding: 0; } .np-a11y-switch[aria-checked="true"] { background: #ff6b35; } .np-a11y-switch-knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: #c8cdd4; transition: inset-inline-start 0.15s; } .np-a11y-switch[aria-checked="true"] .np-a11y-switch-knob { inset-inline-start: 17px; background: #fff; } .np-a11y-seg { display: flex; gap: 4px; } .np-a11y-seg-btn { border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #c8cdd4; border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer; } .np-a11y-seg-btn[aria-checked="true"] { background: #ff6b35; border-color: #ff6b35; color: #fff; font-weight: 700; } .np-a11y-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; } .np-a11y-foot a { color: #ff8c5a; } .np-a11y-reset { background: none; border: 0; color: #9ba4b0; font: inherit; font-size: 12px; cursor: pointer; padding: 0; } .np-a11y-reset:hover { color: #fff; } /* Inline variant (Settings page in the app): same rows, no popover chrome. */ .np-a11y-inline .np-a11y-row { border-top-color: var(--border, rgba(255, 255, 255, 0.06)); padding: 10px 0; } .np-a11y-inline .np-a11y-foot { border-top-color: var(--border, rgba(255, 255, 255, 0.08)); } .np-a11y-inline .np-a11y-foot a { color: var(--accent, #ff8c5a); } /* Pages built on welcome.css run 25 infinite animations (hero orbs, the AI * hub diagram) with no reduced-motion guard. This honours the OS setting * without touching that file. Durations are shortened rather than set to * `none` so an animation that reveals content still reaches its end state. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }