/* ============================================================================ a11y.css · Accessibility overlay for the AEMCCO Almería 2026 deck ---------------------------------------------------------------------------- PURELY ADDITIVE. This file only ADDS override rules; it never removes or rewrites anything in index.html / widgets.js / slides.md. Safe to include last in the cascade (or to inline verbatim via build_standalone.py). Load it AFTER the engine, e.g. in right before : Selectors are written with enough specificity (html body, .deck .x, .slide .x) to win regardless of source order, so ordering is not critical. What it fixes (see scratchpad/a11y/AUDIT.md for the full WCAG 2.1 audit): 1. Small teal text (kicker / titlebar / meta / inline .accent) fails AA 4.5:1 on the light "surface" backgrounds (teal 47,143,176 → 3.51:1). Fixed by a darker BRAND teal applied ONLY on the light-depth slides. 2. ALL-CAPS kickers tracked at .32em hurt legibility (dyslexia + general). Loosened tracking + larger min size, kept the brand look. 3. Dyslexia-friendly, offline, humanist sans font stack (no downloads). 4. Roomier line-height and a capped measure (line length) for reading. IMPORTANT DESIGN NOTE — why the contrast fix is scoped by depth: The engine repaints --acc / --acc2 every animation frame as an INLINE style on (the "depth journey"). A flat hard-coded color here would freeze the accents and break the descent (a dark teal would vanish on the near-black abyss). So we DO NOT touch the accents globally. Instead we re-declare --acc / --acc2 only on the LOW-DEPTH (still-light) slides, where the audit fails. Custom-property inheritance resolves to the nearest ancestor that sets it, so a value set on `.slide[...]` overrides the inherited root value inside that slide's subtree only. Mid/deep slides keep the engine's dynamic accents (which already pass AA — verified 4.4:1 … 10.4:1). Additive, non-destructive. ============================================================================ */ /* ---------------------------------------------------------------------------- 1) DYSLEXIA-FRIENDLY TYPOGRAPHY — legible humanist sans, 100% offline. WHY: the deck ships "Segoe UI"/system-sans. We prepend widely-installed humanist faces with open, unambiguous letterforms and generous spacing. 'Atkinson Hyperlegible' is used ONLY IF the viewer already has it installed (no network fetch); otherwise it is silently skipped and Verdana/Tahoma/ DejaVu Sans take over — all preinstalled on Windows / macOS / Linux. `html body` (specificity 0,0,2) beats the engine's inline `body` (0,0,1), so this wins no matter the include order. ---------------------------------------------------------------------------- */ html body{ font-family: "Atkinson Hyperlegible", Verdana, Tahoma, "Trebuchet MS", "Segoe UI", system-ui, -apple-system, "DejaVu Sans", Arial, sans-serif; /* Slightly softer default tracking than dense sans; helps letter separation. */ letter-spacing: .005em; /* Kerning + normal ligatures only; avoid decorative substitutions. */ font-kerning: normal; text-rendering: optimizeLegibility; } /* WHY: comfortable reading rhythm. 1.05–1.1 in the engine is display-tight for headings (fine) but body copy wants ~1.5. We raise line-height where text actually flows and leave the big display headings alone. */ .deck .lead{ line-height: 1.6; /* WCAG 1.4.8 recommends >=1.5 for blocks */ opacity: 1; /* engine set .92; restore full ink contrast */ } .deck .cols .k, .deck .stage .ph, .deck .meta, .deck .univ{ line-height: 1.5; /* roomier leading for the small supporting text */ } /* WHY: cap the measure (line length). Long lines are hard to track (dyslexia, low vision). ~60ch is the comfortable ceiling; the engine already centers .lead at 42ch which is even better, so we only guard the general case and keep it centered. */ .deck .lead{ max-width: 60ch; margin-left: auto; margin-right: auto; } /* WHY: nudge up the smallest type so it clears comfortable minimums even on the low end of the clamp() ramps. These only RAISE the floor of the clamp; the fluid upper bound is untouched. */ .deck .kicker{ font-size: .98rem; /* px de diseño (el deck escala vía #scaler) */ } .deck .univ{ font-size: 1.02rem; /* px de diseño */ } .deck .cols .k{ font-size: 1.08rem; /* px de diseño */ } /* ---------------------------------------------------------------------------- 2) TRACKING / ALL-CAPS LEGIBILITY. WHY: .32em letter-spacing on an ALL-CAPS kicker breaks words into loose glyphs and is the single worst readability offender for dyslexic readers. We keep the uppercase brand style but relax tracking to a readable value. (WCAG 1.4.12 also asks that content tolerate letter-spacing up to .12em; a fixed huge tracking is the opposite problem — visual fragmentation.) ---------------------------------------------------------------------------- */ .deck .kicker{ letter-spacing: .16em; /* was .32em — halved, still clearly a kicker */ word-spacing: .12em; /* keep word boundaries legible when spaced */ } .deck .meta{ letter-spacing: .1em; /* was .18em */ } .deck .univ{ letter-spacing: .12em; /* was .22em; loosen the tiny uppercase line */ opacity: .85; /* was .7 (4.97:1, borderline) → ~6:1 safe */ } .deck .titlebar{ letter-spacing: .08em; /* was .14em */ } .deck .wordmark{ letter-spacing: .03em; /* was .06em on the serif wordmark */ } /* ---------------------------------------------------------------------------- 3) CONTRAST FIX — darker BRAND teal / purple on the LIGHT (surface) slides. WHY: on #f4fafd..#d6ebf7 the engine teal 47,143,176 is only 3.51:1 (3.01:1 on the darker gradient stop) — it PASSES for big headings (>=3:1) but FAILS AA 4.5:1 for the small text that uses it (kicker, titlebar, meta, inline .accent, .cols .n captions). We re-declare the accents to darker, still-teal / still-purple hues, but ONLY inside low-depth (light-background) slides: brand teal 28, 98,124 → 6.46:1 on bgTop, 5.53:1 on bgBot (AA pass) brand purple 120,55,112 → 7.73:1 on bgTop, 6.62:1 on bgBot (AAA pass) Deeper slides are intentionally NOT matched here, so the engine's dynamic bright accents (which already pass AA on the dark water: 4.4:1…10.4:1) keep animating through the descent. Attribute set chosen to cover depth 0 … ~0.2 (the visually-light zone; ink flips light around .13–.27) WITHOUT catching 0.3+ or the "0.9"/"1" abyss slides. ---------------------------------------------------------------------------- */ .slide[data-depth="0"], .slide[data-depth^="0.0"], .slide[data-depth^="0.1"], .slide[data-depth="0.2"]{ --acc: 28, 98,124; /* darker brand teal — AA on the light gradient */ --acc2: 120,55,112; /* darker brand purple — AAA on the light gradient */ } /* WHY: the wordmark teal/purple letters read the raw palette via .t/.m/.d and also resolve rgb(var(--acc)); on light slides they now inherit the darker brand values above automatically — no extra rule needed. This comment is a pointer, not a rule. */ /* ---------------------------------------------------------------------------- 4) FOCUS VISIBILITY (bonus, additive) — keyboard users navigate this deck. WHY: links inside slides (rendered from markdown) get the UA outline only; make it a clear, high-contrast ring in both light and dark phases using the live accent so it stays visible across the depth journey. ---------------------------------------------------------------------------- */ .deck a:focus-visible, .deck a:focus{ outline: 3px solid rgb(var(--acc)); outline-offset: 2px; border-radius: 3px; } /* ---------------------------------------------------------------------------- 5) LATER: bundle 'Atkinson Hyperlegible' for GUARANTEED offline legibility. Right now the stack only USES Atkinson if the viewer happens to have it installed. To guarantee it everywhere (still 100% offline), embed the woff2 as a base64 data: URI so there is no network request. TEMPLATE below — fill the placeholder, then Atkinson becomes the primary face for everyone. Where to get the fonts (Open Font License, redistributable): - Braille Institute: https://www.brailleinstitute.org/freefont/ - Google Fonts: https://fonts.google.com/specimen/Atkinson+Hyperlegible - GitHub (woff2): https://github.com/googlefonts/atkinson-hyperlegible Make the base64 (offline, once you have the .woff2 locally): base64 -w0 AtkinsonHyperlegible-Regular.woff2 > reg.b64 base64 -w0 AtkinsonHyperlegible-Bold.woff2 > bold.b64 then paste each blob where PLACEHOLDER_* sits below. TRADE-OFF: woff2 is ~40KB (Regular) + ~40KB (Bold) ≈ 80–100KB total added to the HTML as base64 (+~33% over binary). For a self-contained file:// deck that is usually acceptable; if size matters, ship Regular only and let the engine's 700-weight synth-bold cover headings, or subset to Latin. BUILD NOTE: build_standalone.py currently inlines index.html + widgets.js + data. It must ALSO inline this a11y.css (drop its contents into a