/* - ACCESSIBILITY OVERRIDES — add to bottom of styles.css All modes are toggled via classes on - */ /* ── 1. LIGHT MODE - Keeps the full gold/Cinzel theme, just inverts to light - */ html.a11y-light { --gold: #8a6000; --gold-dim: #a07820; --white: #1a1610; --body-text: #2e2a22; --muted: #5a5040; --dark: #f5f0e8; --border: rgba(120,90,0,0.25); --nav-bg: rgba(245,240,232,.97); --nav-border: rgba(120,90,0,.2); --nav-text: rgba(60,50,30,.8); --nav-text-hover: #1a1610; --drop-bg: rgba(240,234,220,.99); --gold-faint: rgba(120,90,0,.07); } html.a11y-light body { background: var(--dark); color: var(--white); } html.a11y-light .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(180,140,40,.08) 0%, transparent 70%), linear-gradient(180deg, #f5f0e8 0%, #ece6d8 50%, #f5f0e8 100%); } html.a11y-light .hero-grid { opacity: .04; } html.a11y-light .hero-orb { background: radial-gradient(ellipse, rgba(180,140,40,.05) 0%, transparent 70%); border-color: rgba(120,90,0,.1); } html.a11y-light .divider { background: linear-gradient(to right, transparent, rgba(120,90,0,.2), transparent); } html.a11y-light nav { background: var(--nav-bg); border-bottom-color: var(--nav-border); } html.a11y-light .mobile-menu, html.a11y-light .nav-a11y-panel { background: var(--drop-bg); } html.a11y-light .nav-dropdown { background: var(--drop-bg); } html.a11y-light .btn-primary { background: var(--gold); color: #f5f0e8; } html.a11y-light .btn-secondary { color: var(--gold); border-color: var(--gold-dim); } html.a11y-light .news-card-small, html.a11y-light .news-card-featured { background: #ece6d8; } html.a11y-light .news-card-small:hover { background: rgba(120,90,0,.06); } html.a11y-light .trailer-section::before { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(180,140,40,.05) 0%, transparent 70%); } html.a11y-light .trailer-box { background: rgba(0,0,0,.03); border-color: var(--border); } html.a11y-light .gallery-item { background: rgba(120,90,0,.04); } html.a11y-light .gallery-item:hover { background: rgba(120,90,0,.09); } html.a11y-light .gallery-overlay { background: rgba(245,240,232,.7); } html.a11y-light footer { border-top-color: var(--border); } /* ── 2. SIMPLE FONT - Swaps Cinzel + Rajdhani for plain system sans-serif - */ html.a11y-font body, html.a11y-font .nav-link, html.a11y-font .nav-category, html.a11y-font .nav-dropdown a, html.a11y-font .mobile-category-trigger, html.a11y-font .mobile-category-links a, html.a11y-font .mobile-menu > a, html.a11y-font .section-label, html.a11y-font .btn-primary, html.a11y-font .btn-secondary, html.a11y-font .roadmap-phase, html.a11y-font .news-tag, html.a11y-font .a11y-option-name, html.a11y-font .a11y-panel-label, html.a11y-font .a11y-reset { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; letter-spacing: .03em !important; } html.a11y-font .hero-title, html.a11y-font .section-title, html.a11y-font .nav-logo, html.a11y-font .footer-logo, html.a11y-font .roadmap-name, html.a11y-font .news-card-title, html.a11y-font .featured-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; letter-spacing: .01em !important; } /* - 3. LARGER TEXT - Bumps base size up ~20%, scales relative units with it - */ html.a11y-size { font-size: 120%; } html.a11y-size .hero-title { font-size: clamp(3rem, 7vw, 6rem); } html.a11y-size .section-title { font-size: clamp(1.7rem, 3vw, 2.6rem); } html.a11y-size .nav-link, html.a11y-size .nav-category { font-size: .8rem; } html.a11y-size .nav-dropdown a { font-size: .8rem; } html.a11y-size .hero-desc { font-size: 1.05rem; } html.a11y-size .news-card-title { font-size: 1.05rem; } html.a11y-size .news-card-excerpt, html.a11y-size .featured-desc { font-size: 1rem; } html.a11y-size .roadmap-name { font-size: 1.05rem; } html.a11y-size .roadmap-desc { font-size: .92rem; } /* ── 4. HIGH CONTRAST - Maximum legibility — pure whites, bright gold, clear borders - */ html.a11y-contrast { --gold: #ffd24d; --gold-dim: #ffbe00; --white: #ffffff; --body-text: #e8e8e8; --muted: #b0a890; --dark: #000000; --border: rgba(255,210,77,.4); } html.a11y-contrast body { background: #000; color: #fff; } html.a11y-contrast nav { background: #000; border-bottom: 1px solid var(--gold); } html.a11y-contrast .nav-dropdown, html.a11y-contrast .mobile-menu, html.a11y-contrast .nav-a11y-panel { background: #0a0a0a; border-color: var(--gold); } html.a11y-contrast .nav-link, html.a11y-contrast .nav-category, html.a11y-contrast .nav-dropdown a, html.a11y-contrast .mobile-menu > a, html.a11y-contrast .mobile-category-trigger, html.a11y-contrast .mobile-category-links a { color: #e8e8e8; } html.a11y-contrast .nav-link:hover, html.a11y-contrast .nav-category:hover, html.a11y-contrast .nav-dropdown a:hover { color: #fff; background: rgba(255,210,77,.12); } html.a11y-contrast .divider { background: var(--gold); opacity: .3; height: 1px; } html.a11y-contrast .section-label { color: var(--gold); } html.a11y-contrast .section-title { color: #fff; } html.a11y-contrast .btn-primary { background: var(--gold); color: #000; } html.a11y-contrast .btn-secondary { border: 1px solid var(--gold); color: var(--gold); } html.a11y-contrast .news-card-small { background: #0d0d0d; border: .5px solid rgba(255,210,77,.2); } html.a11y-contrast .news-card-small:hover { background: rgba(255,210,77,.06); } html.a11y-contrast .roadmap-track::before { background: var(--gold); opacity: .25; } html.a11y-contrast .trailer-box { border: 1px solid var(--gold); background: #0a0a0a; } html.a11y-contrast .gallery-item { border: .5px solid rgba(255,210,77,.15); } html.a11y-contrast footer { border-top: 1px solid rgba(255,210,77,.25); } html.a11y-contrast .hero-grid { opacity: .1; } /* - 5. DYSLEXIA FRIENDLY - OpenDyslexic font, generous spacing, softened background - */ @import url('https://fonts.cdnfonts.com/css/opendyslexic') layer(dyslexia); html.a11y-dyslexia body { font-family: 'OpenDyslexic', 'Comic Sans MS', Arial, sans-serif !important; line-height: 1.9 !important; letter-spacing: .04em !important; word-spacing: .16em !important; --dark: #0e0c08; } html.a11y-dyslexia .hero-title, html.a11y-dyslexia .section-title, html.a11y-dyslexia .nav-logo, html.a11y-dyslexia .roadmap-name, html.a11y-dyslexia .news-card-title, html.a11y-dyslexia .featured-title { font-family: 'OpenDyslexic', Arial, sans-serif !important; letter-spacing: .04em !important; line-height: 1.3 !important; } html.a11y-dyslexia .nav-link, html.a11y-dyslexia .nav-category, html.a11y-dyslexia .nav-dropdown a, html.a11y-dyslexia .mobile-menu > a, html.a11y-dyslexia .mobile-category-trigger, html.a11y-dyslexia .section-label, html.a11y-dyslexia .btn-primary, html.a11y-dyslexia .btn-secondary { font-family: 'OpenDyslexic', Arial, sans-serif !important; letter-spacing: .06em !important; } html.a11y-dyslexia .hero-desc, html.a11y-dyslexia .news-card-excerpt, html.a11y-dyslexia .featured-desc, html.a11y-dyslexia .roadmap-desc { line-height: 2.1 !important; } /* - 6. REDUCE MOTION - Kills all transitions, animations, and transforms - */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; } html.a11y-motion .hero-orb { display: none; } html.a11y-motion .hero-badge, html.a11y-motion .hero-eyebrow, html.a11y-motion .hero-title, html.a11y-motion .hero-divider, html.a11y-motion .hero-desc, html.a11y-motion .hero-ctas, html.a11y-motion .scroll-hint { opacity: 1 !important; transform: none !important; } /* - ARTICLE PAGE OVERRIDES (article.css classes) - */ /* ── ARTICLE: LIGHT MODE ── */ html.a11y-light .banner-overlay { background: linear-gradient(to bottom, rgba(245,240,232,.15) 0%, rgba(245,240,232,0) 35%, rgba(245,240,232,.55) 75%, rgba(245,240,232,1) 100%); } html.a11y-light .banner-placeholder { background: linear-gradient(135deg, rgba(120,90,0,.08) 0%, rgba(120,90,0,.02) 50%, rgba(120,90,0,.05) 100%); } html.a11y-light .banner-tag { background: rgba(245,240,232,.85); color: var(--gold); } html.a11y-light .article-body p, html.a11y-light .article-body ul li { color: var(--body-text); } html.a11y-light .article-body h2 { color: var(--white); border-bottom-color: var(--border); } html.a11y-light .article-body h3 { color: var(--gold); } html.a11y-light .callout { background: rgba(120,90,0,.04); border-left-color: var(--gold-dim); } html.a11y-light .callout p { color: var(--muted); } html.a11y-light .dev-notice { background: rgba(120,90,0,.02); border-color: var(--border); } html.a11y-light .dev-notice p { color: var(--muted); } html.a11y-light .survey-box { background: rgba(120,90,0,.03); border-color: var(--gold-dim); } html.a11y-light .survey-box p { color: var(--muted); } html.a11y-light .hiatus-box { background: rgba(120,90,0,.04); border-color: rgba(120,90,0,.35); } html.a11y-light .hiatus-box p { color: var(--body-text); } html.a11y-light .teaser-box { background: rgba(0,0,0,.01); border-color: var(--border); } html.a11y-light .teaser-box p { color: var(--muted); } html.a11y-light .closing-note { background: rgba(0,0,0,.01); border-color: var(--border); color: var(--muted); } html.a11y-light .section-banner { background-color: rgba(120,90,0,.03); border-color: var(--border); } html.a11y-light .section-banner::before { background: linear-gradient(to right, rgba(245,240,232,.8) 0%, rgba(245,240,232,.4) 50%, rgba(245,240,232,.8) 100%); } html.a11y-light .article-image img { border-color: var(--border); } html.a11y-light .image-caption, html.a11y-light .video-caption { border-left-color: var(--border); color: var(--muted); } html.a11y-light .article-footer { border-top-color: var(--border); color: var(--muted); } html.a11y-light .btn-back { color: var(--muted); border-color: var(--border); } html.a11y-light .btn-back:hover { color: var(--gold); border-color: var(--gold-dim); } html.a11y-light .meta-tag { color: #f5f0e8; } /* ── ARTICLE: SIMPLE FONT ── */ html.a11y-font .article-title, html.a11y-font .article-body h2, html.a11y-font .section-banner-title, html.a11y-font .teaser-box-title, html.a11y-font .survey-box-title, html.a11y-font .socials-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; letter-spacing: .01em !important; } html.a11y-font .article-body h3, html.a11y-font .article-body p, html.a11y-font .article-body ul li, html.a11y-font .callout p, html.a11y-font .dev-notice p, html.a11y-font .survey-box p, html.a11y-font .hiatus-box p, html.a11y-font .teaser-box p, html.a11y-font .closing-note, html.a11y-font .banner-tag, html.a11y-font .meta-date, html.a11y-font .meta-author, html.a11y-font .btn-back, html.a11y-font .survey-btn { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; letter-spacing: .02em !important; } /* ── ARTICLE: LARGER TEXT ── */ html.a11y-size .article-title { font-size: clamp(2rem, 4.5vw, 3.4rem); } html.a11y-size .article-body p, html.a11y-size .article-body ul li { font-size: 1.1rem; line-height: 2; } html.a11y-size .article-body h2 { font-size: 1.4rem; } html.a11y-size .article-body h3 { font-size: 1.1rem; } html.a11y-size .callout p, html.a11y-size .dev-notice p, html.a11y-size .survey-box p, html.a11y-size .hiatus-box p, html.a11y-size .teaser-box p, html.a11y-size .closing-note { font-size: 1rem; line-height: 1.9; } /* ── ARTICLE: HIGH CONTRAST ── */ html.a11y-contrast .banner-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 75%, #000 100%); } html.a11y-contrast .article-body p, html.a11y-contrast .article-body ul li { color: #e8e8e8; } html.a11y-contrast .article-body h2 { color: #fff; border-bottom-color: var(--gold); } html.a11y-contrast .callout { border-left-color: var(--gold); background: rgba(255,210,77,.04); } html.a11y-contrast .dev-notice, html.a11y-contrast .survey-box, html.a11y-contrast .hiatus-box, html.a11y-contrast .teaser-box { border-color: rgba(255,210,77,.3); background: rgba(255,210,77,.03); } html.a11y-contrast .article-image img { border-color: rgba(255,210,77,.3); } html.a11y-contrast .image-caption, html.a11y-contrast .video-caption { border-left-color: var(--gold); } html.a11y-contrast .article-footer { border-top-color: rgba(255,210,77,.25); } html.a11y-contrast .closing-note { border-color: rgba(255,210,77,.2); } html.a11y-contrast .video-wrapper { border-color: rgba(255,210,77,.3); } /* ── ARTICLE: DYSLEXIA FRIENDLY ── */ html.a11y-dyslexia .article-title, html.a11y-dyslexia .article-body h2, html.a11y-dyslexia .article-body h3 { font-family: 'OpenDyslexic', Arial, sans-serif !important; letter-spacing: .04em !important; line-height: 1.4 !important; } html.a11y-dyslexia .article-body p, html.a11y-dyslexia .article-body ul li, html.a11y-dyslexia .callout p, html.a11y-dyslexia .dev-notice p, html.a11y-dyslexia .survey-box p, html.a11y-dyslexia .hiatus-box p, html.a11y-dyslexia .teaser-box p, html.a11y-dyslexia .closing-note { font-family: 'OpenDyslexic', Arial, sans-serif !important; line-height: 2.1 !important; letter-spacing: .04em !important; word-spacing: .16em !important; } /* ── ARTICLE: REDUCE MOTION ── */ html.a11y-motion .article-image img, html.a11y-motion .btn-back, html.a11y-motion .survey-btn, html.a11y-motion .banner-img { transition: none !important; } /* ── HOME SCHEDULE: LIGHT MODE ── */ html.a11y-light .home-schedule-item:hover { background: rgba(120,90,0,0.04); } html.a11y-light .home-schedule-title { color: var(--white); } /* ── HOME SCHEDULE: SIMPLE FONT ── */ html.a11y-font .home-schedule-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; letter-spacing: 0.01em !important; } html.a11y-font .home-schedule-week, html.a11y-font .home-schedule-type, html.a11y-font .home-schedule-date { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; letter-spacing: 0.03em !important; } /* ── HOME SCHEDULE: LARGER TEXT ── */ html.a11y-size .home-schedule-title { font-size: 1rem; } html.a11y-size .home-schedule-date { font-size: 0.78rem; } /* ── HOME SCHEDULE: HIGH CONTRAST ── */ html.a11y-contrast .home-schedule-item:hover { background: rgba(255,210,77,0.03); } html.a11y-contrast .home-schedule-title { color: #ffffff; } html.a11y-contrast .home-schedule-item { border-right-color: rgba(255,210,77,0.08); } /* ── HOME SCHEDULE: DYSLEXIA FRIENDLY ── */ html.a11y-dyslexia .home-schedule-title { font-family: 'OpenDyslexic', Arial, sans-serif !important; letter-spacing: 0.04em !important; line-height: 1.4 !important; } html.a11y-dyslexia .home-schedule-week, html.a11y-dyslexia .home-schedule-type, html.a11y-dyslexia .home-schedule-date { font-family: 'OpenDyslexic', Arial, sans-serif !important; letter-spacing: 0.04em !important; }