/** * Easy to Read Mode - Accessibility Theme * * This file overrides CSS custom properties defined in scout.css. * Activated by adding 'easy-read-mode' class to or */ /* ============================================ ACCESSIBLE FONT Atkinson Hyperlegible - designed by Braille Institute ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* ============================================ DESIGN TOKEN OVERRIDES These swap the dark theme values for accessible light theme. No !important needed - just override the variables. ============================================ */ html.easy-read-mode, body.easy-read-mode { /* Background colors - dark → light */ --color-bg-primary: #FEFDFB; --color-bg-secondary: #FFFFFF; --color-bg-tertiary: #F5F3F0; --color-bg-hover: rgba(0, 42, 65, 0.05); /* Text colors - light → dark */ --color-text-primary: #002a41; --color-text-secondary: #374151; --color-text-tertiary: #4B5563; --color-text-muted: #6B7280; /* Accent colors - gold → ocean blue for contrast */ --color-accent: #1e75bb; --color-accent-hover: #1a5a8f; /* Semantic colors - darker for contrast on light bg */ --color-success: #047857; --color-success-dark: #065f46; --color-error: #DC2626; --color-error-dark: #B91C1C; /* Border colors */ --color-border: #CBD5E1; --color-border-hover: #94A3B8; /* Component-specific */ --color-input-bg: #FFFFFF; --color-input-border: #94A3B8; --color-input-placeholder: #6B7280; --color-button-secondary-border: #6B7280; /* Shadows - lighter for light theme */ --shadow-glow: none; /* Focus ring */ --color-focus-ring: #1e75bb; } /* ============================================ BASE STYLES Font, size, and layout adjustments ============================================ */ html.easy-read-mode, body.easy-read-mode { background-color: var(--color-bg-primary); color: var(--color-text-primary); font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.125rem; line-height: 1.7; } /* Apply accessible font to all elements */ body.easy-read-mode * { font-family: inherit; } /* ============================================ TYPOGRAPHY - Sentence Case Uppercase is harder to read ============================================ */ /* Override global h1 uppercase from base tailwind */ html.easy-read-mode h1, html.easy-read-mode h2, html.easy-read-mode h3, body.easy-read-mode h1, body.easy-read-mode h2, body.easy-read-mode h3 { text-transform: none !important; letter-spacing: normal !important; } body.easy-read-mode .uppercase, body.easy-read-mode .font-heading, body.easy-read-mode [class*="uppercase"] { text-transform: none !important; letter-spacing: normal !important; } body.easy-read-mode .tracking-wide, body.easy-read-mode .tracking-wider, body.easy-read-mode .tracking-widest { letter-spacing: normal; } /* ============================================ ANIMATIONS - Disable for accessibility ============================================ */ html.easy-read-mode *, html.easy-read-mode *::before, html.easy-read-mode *::after, body.easy-read-mode *, body.easy-read-mode *::before, body.easy-read-mode *::after { animation: none !important; transition: none !important; } /* Specific animation classes - explicit override */ html.easy-read-mode .animate-swim, html.easy-read-mode .animate-pulse, html.easy-read-mode .animate-pulse-fade, html.easy-read-mode .animate-spin, html.easy-read-mode .animate-bounce, body.easy-read-mode .animate-swim, body.easy-read-mode .animate-pulse, body.easy-read-mode .animate-pulse-fade, body.easy-read-mode .animate-spin, body.easy-read-mode .animate-bounce { animation: none !important; transform: none !important; } body.easy-read-mode .welcome-icon { box-shadow: none; background-color: #E0F2FE; } /* Welcome screen - override entrance animations that start at opacity: 0 */ body.easy-read-mode .welcome-icon, body.easy-read-mode .welcome-greeting, body.easy-read-mode .welcome-headline, body.easy-read-mode .welcome-subtitle, body.easy-read-mode .welcome-input, body.easy-read-mode .welcome-actions { opacity: 1 !important; transform: none !important; animation: none !important; } /* Welcome screen copy colors */ body.easy-read-mode .welcome-headline, body.easy-read-mode h1.text-paper, body.easy-read-mode h1[x-html] { color: var(--color-text-primary) !important; } body.easy-read-mode .welcome-subtitle, body.easy-read-mode p.text-paper\/60 { color: var(--color-text-secondary) !important; } body.easy-read-mode .welcome-input textarea, body.easy-read-mode .welcome-input input { background-color: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; color: var(--color-text-primary) !important; } body.easy-read-mode .welcome-input textarea::placeholder, body.easy-read-mode .welcome-input input::placeholder { color: var(--color-text-muted) !important; } body.easy-read-mode .welcome-actions button { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; color: var(--color-text-primary) !important; } /* ============================================ TAILWIND CLASS OVERRIDES These override Tailwind's hardcoded colors. TODO: Migrate HTML to use CSS variables directly. ============================================ */ /* --- Backgrounds --- */ body.easy-read-mode .bg-ink, body.easy-read-mode [class*="bg-[#0d1117]"] { background-color: var(--color-bg-primary) !important; } body.easy-read-mode .bg-charcoal, body.easy-read-mode [class*="bg-[#1a1f26]"], body.easy-read-mode [class*="bg-[#1e232a]"] { background-color: var(--color-bg-secondary) !important; } body.easy-read-mode .bg-paper\/10, body.easy-read-mode .bg-paper\/5 { background-color: var(--color-bg-tertiary) !important; } /* --- Text --- */ body.easy-read-mode .text-paper, body.easy-read-mode .text-paper\/90, body.easy-read-mode .text-paper\/80, body.easy-read-mode .text-paper\/70, body.easy-read-mode .text-white { color: var(--color-text-primary) !important; } body.easy-read-mode .text-paper\/60, body.easy-read-mode .text-paper\/50 { color: var(--color-text-secondary) !important; } body.easy-read-mode .text-paper\/40, body.easy-read-mode .text-paper\/30 { color: var(--color-text-muted) !important; } /* --- Accent Colors --- */ body.easy-read-mode .bg-gold, body.easy-read-mode button.bg-gold, body.easy-read-mode a.bg-gold { background-color: var(--color-accent) !important; color: #FFFFFF !important; opacity: 1 !important; } body.easy-read-mode .text-gold { color: var(--color-accent) !important; } body.easy-read-mode .bg-ocean, body.easy-read-mode button.bg-ocean, body.easy-read-mode a.bg-ocean { background-color: var(--color-accent) !important; color: #FFFFFF !important; opacity: 1 !important; } /* --- Destructive/Red buttons --- */ body.easy-read-mode .bg-red-500, body.easy-read-mode .bg-red-600, body.easy-read-mode button.bg-red-500, body.easy-read-mode button.bg-red-600 { background-color: #dc2626 !important; color: #FFFFFF !important; opacity: 1 !important; } /* --- Success/Error --- */ body.easy-read-mode .text-emerald-400, body.easy-read-mode .text-emerald-500, body.easy-read-mode .text-green-400 { color: var(--color-success) !important; } body.easy-read-mode .bg-emerald-600, body.easy-read-mode .bg-emerald-500 { background-color: #d1fae5 !important; /* light mint green */ color: #065f46 !important; /* dark green text */ } body.easy-read-mode a.bg-emerald-600, body.easy-read-mode button.bg-emerald-600 { background-color: #d1fae5 !important; /* light mint green */ color: #065f46 !important; /* dark green text for CTAs */ } body.easy-read-mode .text-red-400 { color: var(--color-error) !important; } /* --- Borders --- */ body.easy-read-mode .border-paper\/10, body.easy-read-mode .border-paper\/20 { border-color: var(--color-border) !important; } body.easy-read-mode .border-emerald-500\/30 { border-color: var(--color-success) !important; } /* --- Inputs --- */ body.easy-read-mode input, body.easy-read-mode textarea, body.easy-read-mode select { background-color: var(--color-input-bg) !important; color: var(--color-text-primary) !important; border-color: var(--color-input-border) !important; } body.easy-read-mode input::placeholder, body.easy-read-mode textarea::placeholder { color: var(--color-input-placeholder) !important; } /* --- Links --- */ body.easy-read-mode a { color: var(--color-accent) !important; } body.easy-read-mode a:hover { color: var(--color-accent-hover) !important; } /* ============================================ COMPONENT-SPECIFIC OVERRIDES ============================================ */ /* Credits page - BEST VALUE badge and Buy Now buttons */ body.easy-read-mode .absolute.bg-gold, body.easy-read-mode div.bg-gold, body.easy-read-mode .bg-gold.text-ink { background-color: var(--color-accent) !important; color: #FFFFFF !important; opacity: 1 !important; z-index: 10; } body.easy-read-mode .border-gold { border-color: var(--color-accent) !important; } /* Ensure text on gold/accent backgrounds is white */ body.easy-read-mode .bg-gold .text-ink, body.easy-read-mode .bg-gold.text-ink, body.easy-read-mode .bg-ocean .text-ink, body.easy-read-mode .bg-ocean.text-ink { color: #FFFFFF !important; } /* Chat Messages - Scout responses */ body.easy-read-mode .prose, body.easy-read-mode .prose-invert { color: var(--color-text-primary) !important; } body.easy-read-mode .prose p, body.easy-read-mode .prose li, body.easy-read-mode .prose span, body.easy-read-mode .prose-invert p, body.easy-read-mode .prose-invert li, body.easy-read-mode .prose-invert span { color: var(--color-text-primary) !important; } body.easy-read-mode .prose strong, body.easy-read-mode .prose-invert strong { color: var(--color-text-primary) !important; font-weight: 700; } body.easy-read-mode .prose h1, body.easy-read-mode .prose h2, body.easy-read-mode .prose h3, body.easy-read-mode .prose-invert h1, body.easy-read-mode .prose-invert h2, body.easy-read-mode .prose-invert h3 { color: var(--color-text-primary) !important; } body.easy-read-mode .prose code, body.easy-read-mode .prose-invert code { color: var(--color-text-primary) !important; background-color: var(--color-bg-tertiary) !important; } /* Assistant message container */ body.easy-read-mode .text-paper { color: var(--color-text-primary) !important; } /* Message bubble backgrounds */ body.easy-read-mode [class*="bg-paper/"] { background-color: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; } /* User message bubbles (only opacity variants, not solid bg-gold) */ body.easy-read-mode .bg-gold\/20, body.easy-read-mode .bg-gold\/10, body.easy-read-mode .bg-gold\/5 { background-color: rgba(30, 117, 187, 0.15) !important; } /* Scout icon in messages */ body.easy-read-mode .ring-gold\/40 { --tw-ring-color: rgba(30, 117, 187, 0.4) !important; } /* Report Type Badges - higher contrast for easy reading */ body.easy-read-mode .bg-signal { background-color: #4a3680 !important; /* darker purple */ } body.easy-read-mode .bg-scan { background-color: #6a1f6a !important; /* darker magenta */ } body.easy-read-mode .bg-solutions { background-color: #2a5490 !important; /* darker blue */ } body.easy-read-mode .bg-teal-600, body.easy-read-mode .bg-cyan-500 { background-color: #0d7377 !important; /* darker teal */ } /* Ensure badge text stays white and readable */ body.easy-read-mode .bg-signal.text-white, body.easy-read-mode .bg-scan.text-white, body.easy-read-mode .bg-solutions.text-white, body.easy-read-mode .bg-teal-600.text-white, body.easy-read-mode .bg-cyan-500.text-white { color: #FFFFFF !important; } /* Brand Picker */ body.easy-read-mode .brand-picker-button { background-color: var(--color-bg-secondary) !important; border: 2px solid var(--color-border) !important; color: var(--color-text-primary) !important; } body.easy-read-mode .brand-picker-dropdown { background-color: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; } /* Circular Nav Buttons */ body.easy-read-mode .rounded-full.bg-paper\/10 { border: 2px solid var(--color-border) !important; background-color: var(--color-bg-secondary) !important; } body.easy-read-mode .rounded-full.bg-paper\/10:hover { border-color: var(--color-accent) !important; } /* Scout Icon */ body.easy-read-mode .rounded-full.ring-2 { background-color: #E0F2FE !important; --tw-ring-color: var(--color-accent) !important; } /* Checkboxes */ body.easy-read-mode input[type="checkbox"] { background-color: var(--color-bg-secondary); border: 2px solid var(--color-border); accent-color: var(--color-accent); } body.easy-read-mode input[type="checkbox"]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } /* Loading Screen */ body.easy-read-mode .loading-screen { background: var(--color-bg-primary) !important; } body.easy-read-mode .loading-screen img { animation: none !important; transform: none !important; filter: none !important; } body.easy-read-mode .loading-screen p { color: var(--color-text-primary) !important; animation: none !important; } /* Loading spinners - show as static circle */ body.easy-read-mode .animate-spin { animation: none !important; } body.easy-read-mode [class*="border-t-gold"].animate-spin, body.easy-read-mode [class*="border-t-transparent"].animate-spin { border-color: var(--color-accent) !important; border-top-color: var(--color-accent) !important; } /* ============================================ FOCUS STATES ============================================ */ body.easy-read-mode *:focus-visible { outline: 3px solid var(--color-focus-ring) !important; outline-offset: 3px !important; } body.easy-read-mode input:focus-visible, body.easy-read-mode select:focus-visible, body.easy-read-mode textarea:focus-visible { border-color: var(--color-focus-ring) !important; box-shadow: 0 0 0 3px rgba(30, 117, 187, 0.3) !important; } /* Skip Link */ body.easy-read-mode a[href="#main-content"]:focus { position: fixed !important; top: 1rem !important; left: 1rem !important; z-index: 9999 !important; padding: 1rem 1.5rem !important; background-color: var(--color-accent) !important; color: #FFFFFF !important; font-weight: 600 !important; border-radius: 0.5rem !important; } /* ============================================ KEYBOARD SHORTCUTS MODAL ============================================ */ body.easy-read-mode [role="dialog"] { background-color: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; } body.easy-read-mode [role="dialog"] h2, body.easy-read-mode [role="dialog"] h3 { color: var(--color-text-primary) !important; } body.easy-read-mode [role="dialog"] kbd { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; color: var(--color-text-primary) !important; } /* ============================================ SELECTION ============================================ */ body.easy-read-mode ::selection { background: rgba(30, 117, 187, 0.3); color: var(--color-text-primary); } /* ============================================ REVIEW STUDIO - Easy Read Mode ============================================ */ .easy-read-mode { /* SURFACES */ --rs-surface-app: #f8fafc; /* Slate 50 */ --rs-surface-panel: #ffffff; --rs-surface-hover: #f1f5f9; --rs-surface-selected: rgba(37, 99, 235, 0.08); --rs-surface-accepted: rgba(16, 185, 129, 0.15); /* BORDERS - more visible for accessibility */ --rs-border-subtle: #e2e8f0; /* Slate 200 */ --rs-border-strong: #cbd5e1; /* Slate 300 */ --rs-border-active: #2563eb; /* Blue 600 */ /* INK - high contrast */ --rs-ink-body: #0f172a; /* Slate 900 */ --rs-ink-secondary: #334155; /* Slate 700 */ --rs-ink-muted: #475569; /* Slate 600 */ --rs-ink-faint: #94a3b8; /* Slate 400 */ /* ACCENTS - Blue for better accessibility on white */ --rs-accent: #2563eb; /* Blue 600 */ --rs-accent-hover: #1d4ed8; /* Blue 700 */ --rs-accent-text: #ffffff; /* SUCCESS */ --rs-success: #059669; /* Emerald 600 */ --rs-success-hover: #047857; --rs-success-text: #ffffff; /* HANDLE */ --rs-resize-handle-hover: rgba(37, 99, 235, 0.2); /* CHAT - Scout avatar and message styling (light mode) */ --rs-avatar-bg: #e0f2fe; /* Sky 100 */ --rs-avatar-ring: rgba(37, 99, 235, 0.4); --rs-msg-assistant-bg: #f8fafc; --rs-msg-assistant-border: #e2e8f0; --rs-msg-user-bg: #f1f5f9; --rs-msg-user-border: #e2e8f0; --rs-input-bg: #ffffff; --rs-input-border: #cbd5e1; --rs-input-shadow: rgba(0, 0, 0, 0.05); } /* Panel depth override for light mode */ .easy-read-mode .rs-panel-depth { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border: 1px solid var(--rs-border-subtle); } /* Ensure editorial font inherits in easy-read mode */ .easy-read-mode .rs-font-editorial { font-family: 'Georgia', 'Cambria', 'Times New Roman', serif; } /* ============================================ SIDEBAR - Easy Read Overrides ============================================ */ body.easy-read-mode .scout-sidebar { background-color: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; } body.easy-read-mode .scout-sidebar-item { color: var(--color-text-primary) !important; } body.easy-read-mode .scout-sidebar-item:hover, body.easy-read-mode .scout-sidebar-item.active { background-color: var(--color-bg-tertiary) !important; } body.easy-read-mode .scout-sidebar-icon { color: var(--color-text-secondary) !important; } body.easy-read-mode .scout-sidebar-label { color: var(--color-text-primary) !important; } /* ============================================ SCOUT ACTIONS PANEL - Easy Read Overrides ============================================ */ body.easy-read-mode .scout-actions-panel { background: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; } body.easy-read-mode .scout-actions-header { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; } body.easy-read-mode .scout-actions-content { background-color: var(--color-bg-secondary) !important; } body.easy-read-mode .scout-actions-section-title { color: var(--color-text-muted) !important; } body.easy-read-mode .scout-actions-footer { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; } /* Action Cards */ body.easy-read-mode .scout-action-card { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; } body.easy-read-mode .scout-action-card--signal { border-color: rgba(74, 54, 128, 0.4) !important; } body.easy-read-mode .scout-action-card--scan { border-color: rgba(106, 31, 106, 0.4) !important; } body.easy-read-mode .scout-action-card--solutions { border-color: rgba(42, 84, 144, 0.4) !important; } body.easy-read-mode .scout-action-card--disabled { opacity: 0.6 !important; } body.easy-read-mode .scout-action-card-icon { background-color: var(--color-bg-secondary) !important; } body.easy-read-mode .scout-action-card-title { color: var(--color-text-primary) !important; } body.easy-read-mode .scout-action-card-desc { color: var(--color-text-secondary) !important; } /* Quick Prompts */ body.easy-read-mode .scout-quick-prompt { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; } body.easy-read-mode .scout-quick-prompt:hover { border-color: var(--color-accent) !important; background-color: rgba(30, 117, 187, 0.1) !important; } body.easy-read-mode .scout-quick-prompt p { color: var(--color-text-secondary) !important; } body.easy-read-mode .scout-quick-prompt:hover p { color: var(--color-text-primary) !important; } /* ============================================ SETTINGS DROPDOWN - Easy Read Overrides ============================================ */ body.easy-read-mode .settings-dropdown { background-color: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } body.easy-read-mode .settings-nav-item { color: var(--color-text-primary) !important; } body.easy-read-mode .settings-nav-item:hover { background-color: var(--color-bg-tertiary) !important; } body.easy-read-mode .settings-nav-icon { background-color: var(--color-bg-tertiary) !important; } body.easy-read-mode .settings-card { background-color: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; } body.easy-read-mode .settings-card-icon { background-color: var(--color-bg-secondary) !important; } body.easy-read-mode .settings-card-title { color: var(--color-text-muted) !important; } body.easy-read-mode .settings-option { color: var(--color-text-primary) !important; } body.easy-read-mode .settings-option:hover { background-color: var(--color-bg-secondary) !important; } body.easy-read-mode .settings-toggle-pills { background-color: var(--color-bg-secondary) !important; color: var(--color-text-primary) !important; } body.easy-read-mode .settings-value { background-color: var(--color-bg-secondary) !important; color: var(--color-text-primary) !important; } body.easy-read-mode .settings-toggle { background-color: var(--color-bg-tertiary) !important; } body.easy-read-mode .settings-legal { border-color: var(--color-border) !important; } body.easy-read-mode .settings-legal p { font-size: 12px !important; line-height: 1.5 !important; } body.easy-read-mode .settings-legal a { color: var(--color-text-tertiary) !important; font-size: 12px !important; } body.easy-read-mode .settings-legal a:hover { color: var(--color-text-primary) !important; } body.easy-read-mode .settings-signout { border-color: var(--color-border) !important; } /* ============================================ TOAST NOTIFICATIONS Higher contrast colors for accessibility ============================================ */ /* Warning toasts - dark text on amber background */ body.easy-read-mode .bg-amber-600 { background-color: #fbbf24 !important; /* amber-400 - lighter for better contrast */ color: #78350f !important; /* amber-900 - dark text */ border-color: #d97706 !important; /* amber-600 */ } body.easy-read-mode .bg-amber-600 svg { color: #78350f !important; } body.easy-read-mode .bg-amber-600 button { color: #78350f !important; } body.easy-read-mode .bg-amber-600 button:hover { background-color: rgba(120, 53, 15, 0.1) !important; } /* Success toasts - ensure good contrast */ body.easy-read-mode .bg-green-800 { background-color: #166534 !important; /* green-800 */ color: #ffffff !important; border-color: #15803d !important; /* green-700 */ } /* Error toasts - ensure good contrast */ body.easy-read-mode .bg-red-800 { background-color: #991b1b !important; /* red-800 */ color: #ffffff !important; border-color: #b91c1c !important; /* red-700 */ } /* Info toasts - light background with dark text */ body.easy-read-mode .bg-\[#1a1f26\] { background-color: var(--color-bg-secondary) !important; color: var(--color-text-primary) !important; border-color: var(--color-border) !important; }