/* ============================================================ Vector 4 — Accessibility toolbar A self-contained, brand-matched a11y widget. Every visual adjustment is a class on so it can be toggled and persisted independently of the rest of the site. ============================================================ */ /* ── Floating launch button (FAB) ────────────────────────── */ .a11y-fab { position: fixed; bottom: clamp(1rem, 3vw, 1.75rem); right: clamp(1rem, 3vw, 1.75rem); z-index: 1200; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border: 2px solid var(--color-black); border-radius: var(--r-pill); background: var(--color-blue); color: var(--color-lime); cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } [dir="rtl"] .a11y-fab { right: auto; left: clamp(1rem, 3vw, 1.75rem); } .a11y-fab:hover { transform: scale(1.06); } .a11y-fab:focus-visible { outline: 3px solid var(--color-lime); outline-offset: 3px; } .a11y-fab svg { width: 1.9rem; height: 1.9rem; display: block; } /* ── Panel ───────────────────────────────────────────────── */ .a11y-panel { position: fixed; bottom: clamp(4.75rem, 9vw, 5.75rem); right: clamp(1rem, 3vw, 1.75rem); z-index: 1300; width: min(20rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 7rem)); overflow-y: auto; background: #0b0b0b; border: 1px solid var(--border-hover); border-radius: var(--r-xl); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); padding: var(--sp-4); color: var(--text); font-family: var(--font-body); transform-origin: bottom right; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } [dir="rtl"] .a11y-panel { right: auto; left: clamp(1rem, 3vw, 1.75rem); transform-origin: bottom left; } .a11y-panel[hidden] { display: none; } .a11y-panel.is-closing, .a11y-panel.is-opening { opacity: 0; transform: translateY(10px) scale(0.97); } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .a11y-panel__title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: var(--tracking-tight); } .a11y-panel__close { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .a11y-panel__close:hover { background: var(--bg-surface-hover); border-color: var(--border-hover); } .a11y-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Text-size stepper ───────────────────────────────────── */ .a11y-step { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); } .a11y-step__label { flex: 1; font-size: var(--fs-sm); font-weight: 600; } .a11y-step__btn { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text); font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .a11y-step__btn:hover { background: var(--bg-surface-hover); border-color: var(--border-hover); } .a11y-step__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .a11y-step__val { min-width: 2.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } /* ── Toggle grid ─────────────────────────────────────────── */ .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .a11y-toggle { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .a11y-toggle svg { width: 1.4rem; height: 1.4rem; } .a11y-toggle:hover { background: var(--bg-surface-hover); border-color: var(--border-hover); } .a11y-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .a11y-toggle[aria-pressed="true"] { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-black); } .a11y-reset { width: 100%; margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .a11y-reset:hover { color: var(--text); border-color: var(--border-hover); } .a11y-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Reading guide bar ───────────────────────────────────── */ .a11y-guide { position: fixed; left: 0; right: 0; height: 2.4rem; z-index: 1150; pointer-events: none; background: rgba(240, 254, 71, 0.08); border-top: 2px solid var(--color-lime); border-bottom: 2px solid var(--color-lime); transform: translateY(-50%); } /* ════════════════════════════════════════════════════════════ ADJUSTMENT CLASSES (applied to ) ════════════════════════════════════════════════════════════ */ /* Text size — scales every rem-based size on the site */ html.a11y-text-1 { font-size: 108%; } html.a11y-text-2 { font-size: 116%; } html.a11y-text-3 { font-size: 125%; } html.a11y-text-4 { font-size: 135%; } /* Readable font — highly legible system stack + looser spacing */ html.a11y-readable-font { --font-display: Verdana, Tahoma, Arial, sans-serif; --font-body: Verdana, Tahoma, Arial, sans-serif; } html.a11y-readable-font body { letter-spacing: 0.01em; line-height: 1.7; } /* High contrast — full-strength text, stronger borders, dark surfaces */ html.a11y-contrast { --text: #fff; --text-muted: #fff; --bg: #000; --bg-surface: rgba(255, 255, 255, 0.10); --bg-surface-hover: rgba(255, 255, 255, 0.18); --border: rgba(255, 255, 255, 0.55); --border-hover: rgba(255, 255, 255, 0.85); } html.a11y-contrast body { background: #000; } html.a11y-contrast :is(p, li, address, figcaption, .page-intro, .nav-link, .footer-copy) { color: #fff !important; } html.a11y-contrast img, html.a11y-contrast video { filter: contrast(1.08); } /* Highlight links */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; } html.a11y-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Big cursor — re-enable a large OS cursor (overrides cursor.css) and hide the decorative custom cursor. */ html.a11y-big-cursor, html.a11y-big-cursor *, html.a11y-big-cursor *::before, html.a11y-big-cursor *::after { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='56' viewBox='0 0 48 56'%3E%3Cpath d='M6 2 L6 44 L17 34 L24 50 L31 47 L24 31 L40 31 Z' fill='%23F0FE47' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, auto !important; } html.a11y-big-cursor .cursor-wrap { display: none !important; } /* Reduce motion — kill animations/transitions and decorative canvases */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.a11y-no-motion .page-hero > canvas, html.a11y-no-motion .hero > canvas { display: none !important; } @media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-panel { transition: none; } }