/* ============================================================================ ClubSync accessibility widget — the visual layer. Ported from the application's widget (src/app/globals.css, the a11y layer) to vanilla CSS for this static page. Ported, not copied: the app's high-contrast rules key off Tailwind classes and design tokens that do not exist here, so that control is re-expressed against THIS page's own custom properties. ── The zero-delta guarantee ──────────────────────────────────────────────── Every rule is gated behind a `data-a11y-*` attribute on , and a preference sitting at its DEFAULT removes the attribute rather than writing a neutral value. A visitor who never opens the panel matches none of these selectors and renders a byte-identical page. That is a property of the cascade, not a promise. ── Why `zoom` is on and never on ───────────────────────────── `zoom` and `filter` both create a containing block for `position: fixed` descendants. Moving either down one element unpins the nav and every fixed overlay on the page. Do not "tidy" these selectors. ============================================================================ */ /* ── Text size ───────────────────────────────────────────────────────────── */ html[data-a11y-text="115"] { zoom: 1.15; } html[data-a11y-text="130"] { zoom: 1.3; } html[data-a11y-text="150"] { zoom: 1.5; } /* ── Monochrome ──────────────────────────────────────────────────────────── */ html[data-a11y-mono="on"] { filter: grayscale(1); } /* ── High contrast ────────────────────────────────────────────────────────── This page drives its colour from a small set of custom properties, so overriding them at :root reaches almost everything for free. --micro is the important one: at #67808F it is the page's faintest text. The gradient override is the other half. Sections painted with the blue gradient put white text over a stop that measures 3.06:1; under high contrast the whole ramp collapses to the dark end, which measures 7.14:1. */ html[data-a11y-contrast="high"] { --ink: #000000; --body-c: #14212B; --micro: #2C3E4B; --hair: #4A6375; --hair2: #3C5567; --faint: #4A6375; --panel: #FFFFFF; } /* Blue gradient fields carry WHITE text, and the light end of the ramp measures 3.06:1 against it. Under high contrast those fields collapse to the dark end (7.14:1). Which elements those are cannot be expressed in a selector — a gradient is not matchable — so a11y.js stamps `data-a11y-darkfield` on them when the control turns on, and this rule does the rest. Deliberately NOT a blanket `background-image:none` on section/div: that would strip the page's light gradients and decorative fills too, which makes the page look broken rather than more legible. */ html[data-a11y-contrast="high"] [data-a11y-darkfield] { background-image: none !important; background-color: #0B2536 !important; } /* Image edges must stay distinguishable from the surface behind them. */ html[data-a11y-contrast="high"] img { outline: 1px solid #4A6375; } /* ── Underline links ─────────────────────────────────────────────────────── */ html[data-a11y-links="on"] a { text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* ── Highlight headings ───────────────────────────────────────────────────── A start-edge rule plus a hairline underline rather than a full box: a border on all four sides of every heading turns a dense page into a grid of boxes, which is harder to scan, not easier. `inline-start` follows the page when it flips between RTL and LTR. */ html[data-a11y-headings="on"] :is(h1,h2,h3,h4,h5,h6) { border-inline-start: 4px solid currentColor !important; border-bottom: 1px solid rgba(11,37,54,.35) !important; padding-inline-start: 10px !important; padding-bottom: 3px !important; border-radius: 0 !important; } /* ── Text spacing (WCAG 1.4.12) ───────────────────────────────────────────── Scoped to text-bearing elements. Applying this to `*` would inflate every chip, badge and grid cell; div and span are load-bearing layout here. */ html[data-a11y-spacing="on"] body { word-spacing: .1em; } html[data-a11y-spacing="on"] :is(p,li,label,td,th,h1,h2,h3,h4,h5,h6) { line-height: 1.6 !important; letter-spacing: .055em !important; } html[data-a11y-spacing="on"] p { margin-bottom: 1.5em !important; } /* ── Stop animations ──────────────────────────────────────────────────────── The user-driven twin of prefers-reduced-motion. This page animates heavily on scroll, so the reveal transforms are neutralised too — otherwise elements that animate in would freeze mid-way and never become visible. */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="off"] [class*="reveal"], html[data-a11y-motion="off"] .sitem { opacity: 1 !important; transform: none !important; } /* ── Large cursor ─────────────────────────────────────────────────────────── Inline SVG: no extra request, no asset to lose. Black fill with a white stroke so it stays visible over both the white content and the blue fields. */ html[data-a11y-cursor="large"], html[data-a11y-cursor="large"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10.5-6.2.7 3.3 6.4-2.9 1.5-3.2-6.5L5 19z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2, auto; } html[data-a11y-cursor="large"] :is(a,button,[role="button"],summary,label) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5a1.6 1.6 0 013.2 0V10h.6V8.3a1.6 1.6 0 013.2 0V11h.6V9.6a1.6 1.6 0 013.2 0V16a5.5 5.5 0 01-5.5 5.5h-2A5.5 5.5 0 016 16v-3.6a1.6 1.6 0 013.1-.5z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2, pointer; } /* ── Strong focus indicator ───────────────────────────────────────────────── Two-tone by design: a dark ring for light surfaces plus an amber halo for dark ones, so the indicator survives every background on the page without needing to know which one it is on. */ html[data-a11y-focus="strong"] :focus-visible { outline: 3px solid #0b1220 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #ffd23f !important; border-radius: 4px; } /* ── Reading guide ────────────────────────────────────────────────────────── One element does both halves: the transparent band is the element, and the 100vh spread shadow dims everything outside it. pointer-events:none is load-bearing — this covers the viewport, so without it the guide would swallow every click on the page. */ .a11y-guide { position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 1140; pointer-events: none; background: transparent; box-shadow: 0 0 0 100vh rgba(0,0,0,.45); border-top: 1px solid rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.4); will-change: transform; } /* ════════════════════════════════════════════════════════════════════════════ Widget chrome ════════════════════════════════════════════════════════════════════════════ */ .a11y-launcher { position: fixed; left: 16px; bottom: 16px; z-index: 1150; width: 44px; height: 44px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #1f2937; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); transition: transform .15s ease; } .a11y-launcher:hover { transform: scale(1.06); } .a11y-launcher:active { transform: scale(.96); } .a11y-backdrop { position: fixed; inset: 0; z-index: 1700; background: rgba(0,0,0,.45); } .a11y-panel { position: fixed; z-index: 1701; inset-block: 0; left: 0; width: 340px; max-width: 92vw; background: #fff; color: #111827; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0,0,0,.3); overflow-y: auto; overscroll-behavior: contain; font-family: 'Rubik', system-ui, sans-serif; } @media (max-width: 767px) { /* Phone: a bottom sheet is reachable with one thumb; a full-height side drawer is not. */ .a11y-panel { inset-block: auto 0; left: 0; right: 0; width: auto; max-width: none; max-height: 86vh; border-radius: 20px 20px 0 0; } } .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #e5e7eb; } .a11y-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; margin: 0; } .a11y-x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: #374151; } .a11y-gtitle { padding: 14px 16px 6px; margin: 0; font-size: 13px; font-weight: 700; color: #6b7280; } .a11y-item { border-bottom: 1px solid #e5e7eb; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; background: transparent; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; } .a11y-row:hover { background: #f3f4f6; } .a11y-row[aria-pressed="true"] { background: #eef2ff; } .a11y-row .lbl { display: flex; align-items: center; gap: 10px; font-size: 15px; } .a11y-row .st { font-size: 13px; font-weight: 700; flex-shrink: 0; color: #9ca3af; } .a11y-row[aria-pressed="true"] .st { color: #1f2937; } /* #4b5563 is 7.56:1 on white. Small print inside an accessibility panel is exactly the text that must not be low-contrast grey. */ .a11y-note { margin: 0; padding: 0 16px 12px; font-size: 12px; line-height: 1.6; color: #4b5563; } .a11y-seg { display: flex; gap: 6px; padding: 12px 16px; } .a11y-seg button { flex: 1; min-height: 44px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; color: #374151; font: inherit; font-weight: 600; cursor: pointer; } .a11y-seg button[aria-pressed="true"] { background: #1f2937; border-color: #1f2937; color: #fff; } .a11y-foot { padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .a11y-reset { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; color: #374151; font: inherit; font-weight: 700; cursor: pointer; } .a11y-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; } .a11y-links a { color: #1d4ed8; font-weight: 600; } .a11y-fine { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.6; }