/* ============================================================ ACCESSIBILITY MODES Applied via data-* attributes on element. Persisted in localStorage and applied before first paint. ============================================================ */ /* ── HIGH CONTRAST ────────────────────────────────────────── WCAG 1.4.6 Enhanced Contrast (AAA): 7:1 minimum ratio ─────────────────────────────────────────────────────────── */ [data-contrast="high"] { --color-bg: #000000; --color-surface: #0a0a0a; --color-surface-hover: #1a1a1a; --color-border: #ffffff; --color-text: #ffffff; --color-text-muted: #cccccc; --color-accent: #ffff00; --color-accent-hover: #e6e600; --color-accent-text: #000000; --color-danger: #ff6b6b; --color-success: #69ff69; --card-shadow: none; --card-hover-shadow: 0 0 0 2px #ffffff; --gradient-start: #ffff00; --gradient-end: #ffaa00; --gradient-accent: linear-gradient(135deg, #ffff00, #ffaa00); --glow-color: rgba(255, 255, 0, 0.4); } [data-contrast="high"] .glass-card { background: #0a0a0a; border-color: #ffffff; } [data-contrast="high"] .event-card, [data-contrast="high"] .artist-card { border-color: #ffffff; } [data-contrast="high"] .genre-pill { background: #222222; color: #ffff00; border: 1px solid #ffff00; } [data-contrast="high"] .btn-hero-secondary { background: #000000; border-color: #ffffff; color: #ffffff; } /* Force visible outlines in high contrast */ [data-contrast="high"] :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 2px !important; } /* ── COLORBLIND: DEUTERANOPIA / PROTANOPIA ────────────────── Okabe-Ito palette — safe for red-green color blindness. Replaces green/red semantic colors with blue/orange. ─────────────────────────────────────────────────────────── */ [data-colorblind="deuteranopia"], [data-colorblind="protanopia"] { /* Replace red danger with orange (safe for all) */ --color-danger: #d55e00; /* Replace green success with sky blue */ --color-success: #0072b2; } /* Dark mode variants using full Okabe-Ito palette */ [data-colorblind="deuteranopia"][data-theme="default"], [data-colorblind="protanopia"][data-theme="default"] { --color-danger: #e69f00; /* Okabe-Ito yellow-orange */ --color-success: #56b4e9; /* Okabe-Ito sky blue */ --color-accent: #0072b2; /* Okabe-Ito blue */ --color-accent-hover: #005a8e; --gradient-start: #0072b2; --gradient-end: #56b4e9; --gradient-accent: linear-gradient(135deg, #0072b2, #56b4e9); } /* Genre pill colors that were green — remap to blue */ [data-colorblind="deuteranopia"] .genre-pill, [data-colorblind="protanopia"] .genre-pill { background: color-mix(in srgb, #0072b2 12%, transparent); color: #0072b2; } /* Badge status indicators: add shape/pattern, not just color */ [data-colorblind="deuteranopia"] .status-badge, [data-colorblind="protanopia"] .status-badge { text-decoration: underline; } /* ── TRITANOPIA ────────────────────────────────────────────── Replaces blue-yellow distinctions with red-green safe palette ─────────────────────────────────────────────────────────── */ [data-colorblind="tritanopia"] { --color-accent: #cc0000; --color-accent-hover: #aa0000; --color-danger: #cc0000; --color-success: #006600; --gradient-start: #cc0000; --gradient-end: #ff6666; --gradient-accent: linear-gradient(135deg, #cc0000, #ff6666); } /* ── LARGE TEXT ───────────────────────────────────────────── WCAG 1.4.4 Resize Text: content reflows at 200% zoom. We apply 120% scale here for users who prefer larger UI. ─────────────────────────────────────────────────────────── */ [data-text-size="large"] { font-size: 112.5%; /* 18px base from 16px */ } [data-text-size="large"] .event-card .event-name, [data-text-size="large"] .artist-card .artist-name { font-size: 1.15rem; } [data-text-size="large"] .nav-links a { font-size: 1rem; } [data-text-size="large"] .genre-pill { font-size: 0.8rem; } [data-text-size="large"] .footer-nav a { font-size: 1rem; } /* ── MANUAL REDUCED MOTION ────────────────────────────────── User preference toggle — same effect as prefers-reduced-motion media query but can be applied even when OS setting isn't set. ─────────────────────────────────────────────────────────── */ [data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reduced-motion="true"] .animate-on-scroll { opacity: 1 !important; transform: none !important; } [data-reduced-motion="true"] .stat-number { /* Skip count animation, show final value immediately */ transition: none !important; }