/* ============================================================ Neurodiverse You — Theme System Three schemes via [data-theme] on : light — default warm off-white (original design) dark — deep navy, reduced glare, sensory-friendly focus — warm amber/cream, ADHD & Irlen-friendly All themes maintain WCAG 2.1 AA contrast. ============================================================ */ /* ── Light (default) ─────────────────────────────────────────*/ [data-theme="light"] { --bg: #F7F5F2; --bg-card: #FFFFFF; --bg-alt: #EFF0F3; --ink: #1A1A2E; --ink-mid: #3D3D55; --ink-soft: #6B6B85; --teal: #006B6B; --teal-mid: #008080; --teal-light: #E0F2F2; --teal-bg: #F0FAFA; --border: #D4D4DC; --border-soft: #E8E8EF; --shadow-sm: 0 1px 3px rgba(26,26,46,.08); --shadow-md: 0 4px 16px rgba(26,26,46,.10); --shadow-lg: 0 12px 40px rgba(26,26,46,.12); --violet: #5B21B6; --violet-bg: #EDE9FE; --amber: #B45309; --amber-bg: #FFF7ED; --amber-light: #FFEDD5; --green: #166534; --green-bg: #DCFCE7; --rose: #9F1239; --rose-bg: #FFE4E6; --blue: #1D4ED8; --blue-bg: #DBEAFE; } /* ── Dark ──────────────────────────────────────────────────── Deep navy. Reduces glare and visual noise. Popular with autistic adults and those with sensory sensitivities to bright screens. */ [data-theme="dark"] { --bg: #0F1117; --bg-card: #1A1D2E; --bg-alt: #151824; --ink: #E8E6F0; --ink-mid: #B0AECA; --ink-soft: #7A78A0; --teal: #2ABFBF; --teal-mid: #33D6D6; --teal-light: #0D3535; --teal-bg: #0A2828; --border: #2E3050; --border-soft: #232540; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 12px 40px rgba(0,0,0,.55); --violet: #8B5CF6; --violet-bg: #150D2E; --amber: #F59E0B; --amber-bg: #1C1300; --amber-light: #2D1F00; --green: #34D399; --green-bg: #00180D; --rose: #FB7185; --rose-bg: #1F0010; --blue: #60A5FA; --blue-bg: #001535; } [data-theme="dark"] body { background: var(--bg); color: var(--ink); } [data-theme="dark"] .site-nav { background: #13162A; border-bottom-color: #2ABFBF; } [data-theme="dark"] .nav-links a { color: #B0AECA; } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active { color: #E8E6F0; background: rgba(42,191,191,.1); } [data-theme="dark"] .dropdown { background: #1A1D2E; border-color: #2E3050; } [data-theme="dark"] .nav-cta-btn { background: var(--teal); color: #fff; } [data-theme="dark"] .form-card, [data-theme="dark"] .service-card { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: var(--bg-alt); color: var(--ink); border-color: var(--border); } [data-theme="dark"] .insurer-bar { background: var(--bg-alt); } [data-theme="dark"] .insurer-pill { background: var(--bg-card); border-color: var(--border); color: var(--ink-mid); } [data-theme="dark"] .faq-item { border-color: var(--border); } [data-theme="dark"] .faq-btn { color: var(--ink); } [data-theme="dark"] .site-footer { background: #07080F; } [data-theme="dark"] .journey-section, [data-theme="dark"] .section-alt { background: var(--bg-alt); } [data-theme="dark"] .page-hero { background: #070A12; } [data-theme="dark"] .hero-banner { background: #070A12; } [data-theme="dark"] .section-teal { background: #003333; } [data-theme="dark"] .nav-logo { color: var(--ink); } /* ── Focus ─────────────────────────────────────────────────── Warm cream background, deep brown ink, amber accent. Evidence-informed for ADHD users: · Warm tones reduce blue-light fatigue · Soft contrast avoids harsh black-on-white glare · Amber CTA draws attention without harshness · Slightly larger base font size aids tracking Inspired by Irlen overlay research & ADHD colour studies. */ [data-theme="focus"] { --bg: #FEFBF3; --bg-card: #FFFDF7; --bg-alt: #FFF6E0; --ink: #1C120A; --ink-mid: #3D2B18; --ink-soft: #7A5C3A; --teal: #B35400; --teal-mid: #CC6200; --teal-light: #FFE4BE; --teal-bg: #FFF3DC; --border: #D4BFA0; --border-soft: #EAD9C0; --shadow-sm: 0 1px 3px rgba(28,18,10,.10); --shadow-md: 0 4px 16px rgba(28,18,10,.12); --shadow-lg: 0 12px 40px rgba(28,18,10,.14); --violet: #6B35B0; --violet-bg: #F3EAFF; --amber: #9C4400; --amber-bg: #FFF0DD; --amber-light: #FFE0B8; --green: #1A5C34; --green-bg: #E2F5EA; --rose: #A02424; --rose-bg: #FFE8E8; --blue: #1840A0; --blue-bg: #E2EEFF; } [data-theme="focus"] body { font-size: 17.5px; line-height: 1.9; } [data-theme="focus"] .site-nav { background: #FFFDF7; border-bottom: 3px solid #B35400; } [data-theme="focus"] .nav-links a { color: #3D2B18; } [data-theme="focus"] .nav-links a:hover, [data-theme="focus"] .nav-links a.active { color: #B35400; background: var(--teal-bg); } [data-theme="focus"] .nav-cta-btn { background: #B35400; } [data-theme="focus"] .nav-logo { color: #1C120A; } [data-theme="focus"] .btn-primary { background: #B35400; border-color: #B35400; } [data-theme="focus"] .btn-primary:hover { background: #1C120A; border-color: #1C120A; } [data-theme="focus"] .section-label { color: #B35400; } [data-theme="focus"] .section-label::before { background: #B35400; } [data-theme="focus"] .card-link { color: #B35400; } [data-theme="focus"] .live-dot { background: #B35400; } [data-theme="focus"] .hero-tag { background: rgba(179,84,0,.12); border-color: rgba(179,84,0,.3); color: #CC6200; } [data-theme="focus"] .form-group input, [data-theme="focus"] .form-group select, [data-theme="focus"] .form-group textarea { border-width: 2px; font-size: 1.0625rem; } [data-theme="focus"] .insurer-bar { background: var(--bg-alt); } [data-theme="focus"] .insurer-pill { border-color: var(--border); } [data-theme="focus"] .site-footer { background: #1C120A; } [data-theme="focus"] .journey-section, [data-theme="focus"] .section-alt { background: var(--bg-alt); } [data-theme="focus"] .faq-btn { color: var(--ink); } [data-theme="focus"] .page-hero { background: #1C120A; } /* ═══════════════════════════════════════════════════════════════ THEME SWITCHER WIDGET — fixed bottom-right floating button ═══════════════════════════════════════════════════════════ */ .theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .ts-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); border: 3px solid var(--bg-card); box-shadow: 0 4px 20px rgba(0,0,0,0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: transform 0.2s, box-shadow 0.2s; line-height: 1; } .ts-btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(0,0,0,0.32); } .ts-btn:focus-visible { outline: 3px solid var(--teal-mid); outline-offset: 3px; } .ts-panel { background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: 16px; padding: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); min-width: 224px; display: none; } .ts-panel.ts-open { display: block; animation: tsPop 0.2s cubic-bezier(0.16,1,0.3,1) both; } @keyframes tsPop { from { opacity:0; transform: translateY(6px) scale(0.96); } to { opacity:1; transform: translateY(0) scale(1); } } .ts-title { font-family: 'Lexend', sans-serif; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .ts-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; margin-bottom: 4px; transition: border-color 0.15s, background 0.15s; text-align: left; } .ts-option:last-child { margin-bottom: 0; } .ts-option:hover { border-color: var(--teal-mid); background: var(--teal-bg); } .ts-option.ts-active { border-color: var(--teal); background: var(--teal-bg); } .ts-option:focus-visible { outline: 3px solid var(--teal-mid); outline-offset: 1px; } .ts-swatch { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,0.08); } .ts-swatch-light { background: conic-gradient(#F7F5F2 180deg, #006B6B 180deg); } .ts-swatch-dark { background: conic-gradient(#0F1117 180deg, #2ABFBF 180deg); } .ts-swatch-focus { background: conic-gradient(#FEFBF3 180deg, #B35400 180deg); } .ts-info { flex: 1; } .ts-name { font-family: 'Lexend', sans-serif; font-size: .875rem; font-weight: 600; color: var(--ink); display: block; line-height: 1.2; } .ts-hint { font-size: .7125rem; color: var(--ink-soft); display: block; margin-top: 2px; line-height: 1.3; } .ts-check { margin-left: auto; color: var(--teal); font-weight: 700; opacity: 0; font-size: .95rem; flex-shrink: 0; } .ts-option.ts-active .ts-check { opacity: 1; } @media (max-width: 480px) { .theme-switcher { bottom: 16px; right: 16px; } .ts-btn { width: 46px; height: 46px; font-size: 1.2rem; } }