/* ========================================================================== FanSion Sports — Accessibility layer (modern major-site features) Vision · hearing · motor · cognitive · vestibular ========================================================================== */ /* —— Screen-reader only —— */ .fs-sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .fs-sr-only-focusable:focus, .fs-sr-only-focusable:focus-visible { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; overflow: visible !important; white-space: normal !important; } /* —— Skip links: fully off-screen until keyboard focus (never block the UI) —— */ .fs-skip-group { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; pointer-events: none; z-index: 10000; } /* When a skip link is focused, open the group as a fixed bar */ .fs-skip-group:focus-within { position: fixed; left: 0.5rem; top: 0.5rem; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; pointer-events: auto; display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: calc(100vw - 1rem); } .skip-link, .fs-skip-link { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; z-index: 10000; padding: 0.65rem 1rem; border-radius: 0.5rem; background: #fff; color: #0a0a0c !important; font-family: system-ui, sans-serif; font-size: 0.9rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); transform: none !important; } .fs-skip-group:focus-within .skip-link, .fs-skip-group:focus-within .fs-skip-link, .skip-link:focus, .skip-link:focus-visible, .fs-skip-link:focus, .fs-skip-link:focus-visible { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; outline: 3px solid #3ef0c8; outline-offset: 3px; pointer-events: auto; } /* —— Keyboard focus —— */ :focus { outline: none; } :focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; border-radius: 4px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; } body.command-center :focus-visible, body.galaxy :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(255, 255, 255, 0.85); } html.fs-a11y-strong-focus :focus-visible { outline-width: 4px !important; outline-offset: 4px !important; box-shadow: 0 0 0 2px #000, 0 0 0 6px #fff !important; } /* —— Touch targets —— */ .gx-home-btn, .nav-toggle, .galaxy-word, button.yoyo-craft-btn, #yoyo-lamp-btn, .footer-inline a, .fs-a11y-btn, .fs-a11y-fab { min-height: 44px; min-width: 44px; } .galaxy-word { display: inline-flex; align-items: center; padding-top: 0.4em; padding-bottom: 0.4em; } /* ========== USER PREFS (classes on ) ========== */ /* Text size steps (major sites: A− A A+) */ html.fs-a11y-text-lg { font-size: 112.5%; } html.fs-a11y-text-xl { font-size: 125%; } html.fs-a11y-text-xxl { font-size: 137.5%; } html.fs-a11y-text-lg body, html.fs-a11y-text-xl body, html.fs-a11y-text-xxl body { line-height: 1.55; } /* Legacy toggle class maps to large */ html.fs-a11y-large-text { font-size: 118%; } /* Readable / dyslexia-friendly font */ html.fs-a11y-readable-font, html.fs-a11y-readable-font body, html.fs-a11y-readable-font button, html.fs-a11y-readable-font input, html.fs-a11y-readable-font textarea, html.fs-a11y-readable-font select, html.fs-a11y-readable-font .galaxy-word, html.fs-a11y-readable-font .fs-logo-name { font-family: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif !important; letter-spacing: 0.01em; } /* Text spacing (WCAG 1.4.12 style) */ html.fs-a11y-text-spacing body, html.fs-a11y-text-spacing p, html.fs-a11y-text-spacing li, html.fs-a11y-text-spacing .galaxy-word, html.fs-a11y-text-spacing .jumbotron-detail, html.fs-a11y-text-spacing .fs-a11y-prose { line-height: 1.75 !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; } /* High contrast */ html.fs-a11y-contrast body, html.fs-a11y-contrast body.command-center, html.fs-a11y-contrast body.galaxy { background: #000 !important; color: #fff !important; } html.fs-a11y-contrast a { color: #fff !important; text-decoration: underline; text-underline-offset: 0.15em; } html.fs-a11y-contrast .galaxy-word { color: #e8e8e8 !important; text-shadow: none !important; } html.fs-a11y-contrast .galaxy-word.is-lit, html.fs-a11y-contrast .galaxy-word:hover, html.fs-a11y-contrast .galaxy-word:focus-visible { color: #fff !important; background: rgba(255, 255, 255, 0.12); text-shadow: none !important; } html.fs-a11y-contrast .jumbotron-title, html.fs-a11y-contrast .jumbotron-detail { color: #fff !important; text-shadow: none !important; } html.fs-a11y-contrast #fs-ufo-spotlight, html.fs-a11y-contrast .jumbotron-spot, html.fs-a11y-contrast .jumbotron-lights, html.fs-a11y-contrast .jumbotron-stage-lamps { opacity: 0 !important; display: none !important; } html.fs-a11y-contrast .fs-a11y-fab { background: #000 !important; border-color: #fff !important; color: #fff !important; } /* Grayscale (photosensitivity / focus) */ html.fs-a11y-grayscale body { filter: grayscale(1); } html.fs-a11y-grayscale .fs-a11y-fab, html.fs-a11y-grayscale .fs-a11y-dock, html.fs-a11y-grayscale .fs-skip-group { filter: none; } /* Underline links */ html.fs-a11y-underline-links a[href] { text-decoration: underline !important; text-underline-offset: 0.16em; text-decoration-thickness: 1px; } html.fs-a11y-underline-links a[href]:hover, html.fs-a11y-underline-links a[href]:focus-visible { text-decoration-thickness: 2px; } /* Big cursor */ html.fs-a11y-big-cursor, html.fs-a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1.5' d='M4 3 L4 26 L11 20 L16 29 L20 27 L15 18 L24 18 Z'/%3E%3C/svg%3E") 4 3, auto !important; } html.fs-a11y-big-cursor a, html.fs-a11y-big-cursor button, html.fs-a11y-big-cursor [role="button"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1.5' d='M4 3 L4 26 L11 20 L16 29 L20 27 L15 18 L24 18 Z'/%3E%3C/svg%3E") 4 3, pointer !important; } /* Reading / focus mode: dim chrome, center content */ html.fs-a11y-reading-mode #cc-particles, html.fs-a11y-reading-mode .galaxy-veil, html.fs-a11y-reading-mode #fs-ufo-spotlight { display: none !important; } html.fs-a11y-reading-mode .galaxy-nav .galaxy-word:not(:focus):not(:hover):not(.is-lit) { opacity: 0.35; } html.fs-a11y-reading-mode main, html.fs-a11y-reading-mode .galaxy-content, html.fs-a11y-reading-mode .fs-a11y-prose { max-width: 40rem; } /* Hide decorative motion layers */ html.fs-a11y-reduce-motion #cc-particles, html.fs-a11y-reduce-motion #fs-ufo-spotlight, html.fs-a11y-reduce-motion .jumbotron-stage-lamps { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } #cc-particles { display: none !important; } } html.fs-a11y-reduce-motion *, html.fs-a11y-reduce-motion *::before, html.fs-a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-contrast: more) { body.command-center, body.galaxy { background: #000; } a, .galaxy-word { text-decoration: underline; text-underline-offset: 0.12em; } } @media (forced-colors: active) { .galaxy-brand, .galaxy-word, .gx-home-btn, button, a { forced-color-adjust: auto; } } /* ========== FLOATING WIDGET ========== Default = slim left-edge tab (peek). Expands only while panel is open. ========== */ .fs-a11y-fab { position: fixed !important; left: 0 !important; right: auto !important; top: auto !important; bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 5.25rem)) !important; z-index: 2147483000 !important; display: inline-flex !important; visibility: visible !important; opacity: 0.92 !important; align-items: center; justify-content: center; gap: 0; /* Slim side tab — does not block the page */ width: 1.65rem !important; min-width: 1.65rem !important; max-width: 1.65rem !important; min-height: 3.25rem !important; height: 3.25rem !important; padding: 0.35rem 0.15rem !important; border-radius: 0 0.55rem 0.55rem 0 !important; border: 1px solid rgba(62, 240, 200, 0.45); border-left: none; background: rgba(8, 8, 12, 0.88); color: #fff !important; font-family: system-ui, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4); pointer-events: auto !important; transform: none !important; transition: width 0.2s ease, max-width 0.2s ease, min-width 0.2s ease, padding 0.2s ease, border-radius 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } /* Expanded pill only while dock is open */ .fs-a11y-fab.is-open, .fs-a11y-fab[aria-expanded="true"] { left: max(0.5rem, env(safe-area-inset-left, 0px)) !important; bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important; width: auto !important; min-width: 44px !important; max-width: none !important; min-height: 44px !important; height: auto !important; padding: 0.5rem 0.9rem !important; gap: 0.4rem; border-radius: 999px !important; border: 1.5px solid rgba(62, 240, 200, 0.7); opacity: 1 !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 4px 20px rgba(0, 0, 0, 0.5); } .fs-a11y-fab:hover, .fs-a11y-fab:focus-visible { opacity: 1 !important; background: rgba(16, 16, 22, 0.96); border-color: rgba(62, 240, 200, 0.85); } .fs-a11y-fab-icon { font-size: 0.95rem; line-height: 1; } /* Hide long label on side tab; show only when expanded */ .fs-a11y-fab-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .fs-a11y-fab.is-open .fs-a11y-fab-label, .fs-a11y-fab[aria-expanded="true"] .fs-a11y-fab-label { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; overflow: visible !important; white-space: nowrap !important; } .fs-a11y-fab-arrow { display: none; font-size: 0.85rem; line-height: 1; opacity: 0.85; } .fs-a11y-fab.is-open .fs-a11y-fab-arrow, .fs-a11y-fab[aria-expanded="true"] .fs-a11y-fab-arrow { display: none; } /* Legacy .is-peek class maps to default side-tab look */ .fs-a11y-fab.is-peek { /* default styles above already are the tab */ } @media (prefers-reduced-motion: reduce) { .fs-a11y-fab, .fs-a11y-dock { transition: none !important; } } html.fs-a11y-reduce-motion .fs-a11y-fab, html.fs-a11y-reduce-motion .fs-a11y-dock { transition: none !important; } .fs-a11y-dock { position: fixed; left: max(0.75rem, env(safe-area-inset-left, 0px)); bottom: max(4.75rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem)); z-index: 2147483001; width: min(calc(100vw - 1.5rem), 20rem); max-height: min(70vh, 28rem); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, left 0.35s ease, bottom 0.35s ease; } /* Dock sits above the slim tab */ .fs-a11y-dock.is-open { left: max(0.5rem, env(safe-area-inset-left, 0px)); bottom: max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.25rem)); pointer-events: auto; opacity: 1; transform: translateY(0); } .fs-a11y-dock-panel { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; padding: 0.85rem 0.95rem 1rem; background: rgba(6, 6, 10, 0.97); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); max-height: min(68vh, 27rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } .fs-a11y-dock-panel h2 { margin: 0 0 0.3rem; font-size: 0.95rem; color: #fff; font-weight: 700; } .fs-a11y-dock-panel .fs-a11y-dock-help { margin: 0 0 0.65rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } .fs-a11y-dock-panel .fs-a11y-controls { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; } .fs-a11y-dock-panel .fs-a11y-btn { width: 100%; justify-content: flex-start; } .fs-a11y-dock-more { display: inline-block; margin-top: 0.65rem; font-size: 0.8rem; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 0.15em; } .fs-a11y-dock-kbd { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); line-height: 1.45; } .fs-a11y-dock-kbd kbd { display: inline-block; padding: 0.05em 0.35em; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; font-size: 0.68rem; font-family: ui-monospace, monospace; color: #fff; } /* Page panels */ .fs-a11y-panel { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; padding: 1rem 1.1rem; background: rgba(0, 0, 0, 0.45); margin: 1rem 0 1.5rem; } .fs-a11y-panel h2 { margin: 0 0 0.75rem; font-size: 1rem; letter-spacing: 0.04em; } .fs-a11y-controls { display: flex; flex-wrap: wrap; gap: 0.55rem; } .fs-a11y-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); color: #fff; font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left; } .fs-a11y-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); border-color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); } .fs-a11y-btn:hover { background: rgba(255, 255, 255, 0.12); } .fs-a11y-btn-row { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; } .fs-a11y-btn-row .fs-a11y-btn { flex: 1 1 auto; min-width: 2.75rem; justify-content: center; border-radius: 0.5rem; padding: 0.5rem 0.55rem; font-size: 0.8rem; } .fs-a11y-status { margin: 0.65rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); } .fs-a11y-prose { max-width: 40rem; color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; line-height: 1.6; } .fs-a11y-prose h2 { margin-top: 1.75rem; margin-bottom: 0.5rem; font-size: 1.15rem; color: #fff; } .fs-a11y-prose ul { padding-left: 1.25rem; } .fs-a11y-prose li { margin: 0.35rem 0; } .fs-a11y-prose a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; } /* Keyboard help modal */ .fs-a11y-help { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.72); } .fs-a11y-help[hidden] { display: none !important; } .fs-a11y-help-card { width: min(100%, 22rem); max-height: 80vh; overflow: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.25); background: #0a0a0e; color: #fff; padding: 1.1rem 1.15rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); } .fs-a11y-help-card h2 { margin: 0 0 0.65rem; font-size: 1.05rem; } .fs-a11y-help-card dl { margin: 0; font-size: 0.88rem; line-height: 1.5; } .fs-a11y-help-card dt { font-weight: 700; margin-top: 0.55rem; color: #fff; } .fs-a11y-help-card dd { margin: 0.15rem 0 0; color: rgba(255, 255, 255, 0.7); } .fs-a11y-help-close { margin-top: 1rem; width: 100%; } /* —— Mobile phones: keep slim edge tab; expand only when open —— */ @media (max-width: 859px) { .fs-a11y-fab { width: 1.5rem !important; min-width: 1.5rem !important; max-width: 1.5rem !important; min-height: 3rem !important; height: 3rem !important; bottom: max(5.25rem, calc(env(safe-area-inset-bottom, 0px) + 5rem)) !important; z-index: 98; opacity: 0.88 !important; } .fs-a11y-fab.is-open, .fs-a11y-fab[aria-expanded="true"] { width: auto !important; min-width: 44px !important; max-width: none !important; min-height: 44px !important; height: auto !important; bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important; opacity: 1 !important; } .fs-a11y-dock { width: min(calc(100vw - 1.25rem), 22rem); max-height: min(72dvh, 30rem); bottom: max(4.25rem, calc(env(safe-area-inset-bottom, 0px) + 4rem)); } .fs-a11y-dock-panel { max-height: min(68dvh, 28rem); padding: 1rem 1rem 1.1rem; } .fs-a11y-dock-panel .fs-a11y-btn { min-height: 48px; font-size: 0.9rem; } .fs-a11y-dock-kbd { display: none; } /* Less padding — tab no longer steals a full pill of space */ body.galaxy, body.command-center { padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)); } } @media (max-width: 380px) { .fs-a11y-fab { width: 1.4rem !important; min-width: 1.4rem !important; max-width: 1.4rem !important; } }