/* ============================================ LIGHT MODE THEME FOR InQuiziTriv Applied via [data-theme="light"] on ============================================ */ /* ── Core Design Tokens ─────────────────── */ [data-theme="light"] { /* Color System - WCAG AA compliant */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-light: rgba(37, 99, 235, 0.08); --color-success: #059669; --color-danger: #dc2626; --color-warning: #d97706; /* Neutral Colors */ --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-elevated: #f1f5f9; --color-border: #e2e8f0; /* Text Colors */ --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-tertiary: #64748b; } /* ── Global Overrides ───────────────────── */ [data-theme="light"] body, [data-theme="light"] html { background-color: #f8fafc !important; color: #0f172a !important; } /* ── Top Navbar ─────────────────────────── */ [data-theme="light"] .top-navbar { background: #ffffff; border-bottom-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } [data-theme="light"] .navbar-title { color: #0f172a; } [data-theme="light"] .sidebar-toggle { color: #0f172a; } [data-theme="light"] .sidebar-toggle:hover { background: #f1f5f9; border-color: #e2e8f0; } /* ── Sidebar ────────────────────────────── */ [data-theme="light"] .sidebar { background: #ffffff; border-right-color: #e2e8f0; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04); } [data-theme="light"] .sidebar-link { color: #475569; } [data-theme="light"] .sidebar-link:hover { background: #f1f5f9; color: #0f172a; } [data-theme="light"] .sidebar-link.new-chat-btn { background: #2563eb; color: #ffffff; } [data-theme="light"] .sidebar-link.new-chat-btn:hover { background: #1d4ed8; } [data-theme="light"] .sidebar-divider { background: #e2e8f0; } [data-theme="light"] .sidebar-section-title { color: #64748b; } [data-theme="light"] .sidebar-empty-state { color: #94a3b8; } /* Sidebar - Saved Chats */ [data-theme="light"] .ellipsis-btn { color: #475569; } [data-theme="light"] .ellipsis-btn:hover { background: #f1f5f9; } [data-theme="light"] .ellipsis-dropdown { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } [data-theme="light"] .ellipsis-dropdown button { color: #0f172a; } [data-theme="light"] .ellipsis-dropdown button:hover { background: #f1f5f9; } /* Sidebar - Submenu */ [data-theme="light"] .submenu-link { color: #475569; } [data-theme="light"] .submenu-link:hover { background: #f1f5f9; color: #0f172a; } /* ── Main Content Area ──────────────────── */ [data-theme="light"] .main-content { background: #f8fafc; } /* ── Messages ───────────────────────────── */ [data-theme="light"] .messages-box { background: #f8fafc; } [data-theme="light"] .messages-box::-webkit-scrollbar-track { background: #f8fafc; } [data-theme="light"] .messages-box::-webkit-scrollbar-thumb { background: #cbd5e1; } [data-theme="light"] .messages-box::-webkit-scrollbar-thumb:hover { background: #94a3b8; } [data-theme="light"] .message-text { background: #ffffff; border: 1px solid #e2e8f0; } [data-theme="light"] .message.sent .message-text { background: #2563eb; color: #ffffff; border-color: #2563eb; } [data-theme="light"] .message.received .message-text { background: #ffffff; color: #0f172a; } [data-theme="light"] .message-sender { color: #64748b; } [data-theme="light"] .message.sent .message-sender { color: rgba(255, 255, 255, 0.8); } [data-theme="light"] .message-content { color: #1e293b; } [data-theme="light"] .message.sent .message-content { color: #ffffff; } /* ── Typing Indicator ───────────────────── */ [data-theme="light"] .typing-dot { background: #94a3b8; } /* ── Loading Steps ──────────────────────── */ [data-theme="light"] .loading-step { background: #f1f5f9; } [data-theme="light"] .loading-step.active { background: #ffffff; } [data-theme="light"] .loading-step.active .step-text { color: #0f172a; } [data-theme="light"] .loading-step.completed .step-text { color: #475569; } [data-theme="light"] .step-text { color: #475569; } /* ── Input Form ─────────────────────────── */ [data-theme="light"] .message-form { background: #ffffff; border-top-color: #e2e8f0; } [data-theme="light"] .editor-wrapper { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] #rich-editor { color: #0f172a; } [data-theme="light"] #rich-editor .ql-editor { color: #0f172a !important; } [data-theme="light"] #rich-editor .ql-editor.ql-blank::before { color: #94a3b8 !important; opacity: 1 !important; } [data-theme="light"] #rich-editor .ql-container { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } [data-theme="light"] .file-upload-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; } [data-theme="light"] .file-upload-btn:hover { background: #e2e8f0; color: #0f172a; } [data-theme="light"] .send-btn { background: #2563eb; color: #ffffff; } [data-theme="light"] .send-btn:hover:not(:disabled) { background: #1d4ed8; } /* ── Quiz Forms in Messages ─────────────── */ [data-theme="light"] .trivial-quiz-form, [data-theme="light"] .message-content .trivial-quiz-form { background-color: #f8fafc !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; } [data-theme="light"] .trivial-quiz-form h3, [data-theme="light"] .trivial-quiz-form h4, [data-theme="light"] .trivial-quiz-form p, [data-theme="light"] .trivial-quiz-form strong, [data-theme="light"] .trivial-quiz-form div, [data-theme="light"] .trivial-quiz-form label { color: #0f172a !important; } [data-theme="light"] .trivial-quiz-form select { background-color: #ffffff !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; } [data-theme="light"] .trivial-quiz-form select option { background-color: #ffffff !important; color: #0f172a !important; } [data-theme="light"] .trivial-quiz-form .submit-quiz-btn { background-color: #059669 !important; border-color: #059669 !important; color: #ffffff !important; } [data-theme="light"] .trivial-quiz-form .btn-info { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } [data-theme="light"] .message-content .trivial-quiz-form, [data-theme="light"] .message-content .trivial-quiz-form *:not(.submit-quiz-btn):not(.btn-info):not(.btn-primary):not(.quiz-nav-btn.primary):not(.replay-quiz-btn) { color: #0f172a !important; } /* ── Quiz Progress ──────────────────────── */ [data-theme="light"] .quiz-progress-container { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .quiz-progress-title { color: #0f172a; } [data-theme="light"] .quiz-question-counter { background: #f1f5f9; color: #475569; } [data-theme="light"] .quiz-progress-bar { background: #e2e8f0; } [data-theme="light"] .quiz-progress-percentage { color: #475569; } [data-theme="light"] .quiz-nav-btn { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; } [data-theme="light"] .quiz-nav-btn:hover:not(:disabled) { background: #e2e8f0; border-color: #2563eb; } [data-theme="light"] .quiz-nav-btn.primary { background: #2563eb; color: #ffffff; border-color: #2563eb; } [data-theme="light"] .quiz-nav-btn.primary:hover:not(:disabled) { background: #1d4ed8; } /* ── Quiz Results ───────────────────────── */ [data-theme="light"] .quiz-results-container { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); } [data-theme="light"] .quiz-results-header { background: #f1f5f9; border-color: #e2e8f0; } [data-theme="light"] .quiz-results-header::before { background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%); } [data-theme="light"] .results-title { color: #0f172a; } [data-theme="light"] .score-percentage { color: #475569; } [data-theme="light"] .quiz-result-item { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .message-content .green-text, [data-theme="light"] .green-text { color: #059669 !important; } [data-theme="light"] .message-content .red-text, [data-theme="light"] .red-text { color: #dc2626 !important; } [data-theme="light"] .answer-text.answer-correct-color { background-color: rgba(5, 150, 105, 0.08); border-color: #059669; } [data-theme="light"] .answer-text.answer-incorrect-color { background-color: rgba(220, 38, 38, 0.08); border-color: #dc2626; } [data-theme="light"] .message-content .result-user-answer.correct .answer-text, [data-theme="light"] .result-user-answer.correct .answer-text { color: #059669 !important; } [data-theme="light"] .message-content .result-user-answer.incorrect .answer-text, [data-theme="light"] .result-user-answer.incorrect .answer-text { color: #dc2626 !important; } [data-theme="light"] .message-content .result-correct-answer .answer-text, [data-theme="light"] .result-correct-answer .answer-text { color: #059669 !important; } [data-theme="light"] .message-content .result-user-answer .answer-label, [data-theme="light"] .message-content .result-correct-answer .answer-label, [data-theme="light"] .result-user-answer .answer-label, [data-theme="light"] .result-correct-answer .answer-label { color: #64748b !important; } /* ── Local Sessions (Anonymous) ─────────── */ [data-theme="light"] .local-session-item:hover { background-color: #f1f5f9; } [data-theme="light"] .local-session-item .session-title { color: #0f172a; } [data-theme="light"] .local-session-item .session-time { color: #94a3b8; } [data-theme="light"] .local-session-item .session-delete:hover { background-color: rgba(220, 38, 38, 0.1); color: #dc2626; } [data-theme="light"] .local-session-item.active { background-color: #f1f5f9; } [data-theme="light"] .clear-all-sessions-btn { border-color: #e2e8f0; color: #475569; } [data-theme="light"] .clear-all-sessions-btn:hover { background: #f1f5f9; color: #0f172a; } /* ── Disabled Quiz State ────────────────── */ [data-theme="light"] .trivial-quiz-form.quiz-disabled select { background: #f1f5f9 !important; color: #94a3b8 !important; } /* ── Replay Quiz Button ─────────────────── */ [data-theme="light"] .replay-quiz-btn { background: #2563eb; color: #ffffff; } [data-theme="light"] .replay-quiz-btn:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } /* ── Links ──────────────────────────────── */ [data-theme="light"] a, [data-theme="light"] a:visited { color: #2563eb !important; } [data-theme="light"] a:hover { color: #1d4ed8 !important; } /* Fix for sent message links */ [data-theme="light"] .message.sent a, [data-theme="light"] .message.sent a:visited { color: #ffffff !important; text-decoration: underline; } /* ── Welcome Message Inline Styles Fix ──── */ [data-theme="light"] .welcome-message .message-content p { color: #1e293b; } [data-theme="light"] .welcome-message .message-content p[style*="color: #888"] { color: #64748b !important; } /* ── Theme Toggle Button ────────────────── */ .theme-toggle-btn { display: flex; align-items: center; gap: var(--spacing-md, 1rem); padding: var(--spacing-md, 1rem); border-radius: var(--spacing-sm, 0.5rem); color: var(--color-text-secondary, #cbd5e1); text-decoration: none; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; width: 100%; text-align: left; } .theme-toggle-btn:hover { background: var(--color-surface-elevated, #334155); color: var(--color-text-primary, #f1f5f9); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: -2px; } .theme-toggle-btn .material-symbols-outlined { font-size: 1.5rem; min-width: 40px; text-align: center; } /* ── Navbar theme toggle (compact version) ── */ .navbar-theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--spacing-sm, 0.5rem); background: none; border: 1px solid transparent; color: var(--color-text-primary, #f1f5f9); cursor: pointer; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); margin-left: auto; } .navbar-theme-toggle:hover { background: var(--color-surface-elevated, #334155); border-color: var(--color-border, #475569); } [data-theme="light"] .navbar-theme-toggle:hover { background: #f1f5f9; border-color: #e2e8f0; } .navbar-theme-toggle:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; } .navbar-theme-toggle .theme-toggle-label { display: none; } /* ── TTS Toggle Button (matches theme toggle pattern) ── */ .navbar-tts-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--spacing-sm, 0.5rem); background: none; border: 1px solid transparent; color: var(--color-text-primary, #f1f5f9); cursor: pointer; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); margin-left: 0; flex-shrink: 0; } .navbar-tts-toggle:hover { background: var(--color-surface-elevated, #334155); border-color: var(--color-border, #475569); } [data-theme="light"] .navbar-tts-toggle:hover { background: #f1f5f9; border-color: #e2e8f0; } .navbar-tts-toggle:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; } .navbar-tts-toggle .material-symbols-outlined { font-size: 1.25rem; } /* Active / pressed state for TTS toggle */ .tts-toggle-btn[aria-pressed="true"] { color: var(--color-primary, #2563eb); } .tts-toggle-btn[aria-pressed="true"] .tts-toggle-icon { color: var(--color-primary, #2563eb); } [data-theme="light"] .tts-toggle-btn[aria-pressed="true"] { color: #2563eb; } [data-theme="light"] .tts-toggle-btn[aria-pressed="true"] .tts-toggle-icon { color: #2563eb; } /* ============================================ LANDING PAGE - Light Mode Overrides ============================================ */ [data-theme="light"] .landing-nav { background: rgba(255, 255, 255, 0.9); border-bottom-color: #e2e8f0; } [data-theme="light"] .nav-logo { color: #0f172a; } [data-theme="light"] .nav-link { color: #475569; } [data-theme="light"] .nav-link:hover { color: #0f172a; background: #f1f5f9; } [data-theme="light"] .hero-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.06), transparent); } [data-theme="light"] .hero-title { color: #0f172a; } [data-theme="light"] .hero-subtitle { color: #475569; } [data-theme="light"] .hero-badge { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.3); } [data-theme="light"] .hero-visual-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); } [data-theme="light"] .visual-title { color: #0f172a; } [data-theme="light"] .visual-subtitle { color: #64748b; } [data-theme="light"] .visual-question-text { color: #0f172a; } [data-theme="light"] .visual-option { background: #f8fafc; border-color: #e2e8f0; color: #475569; } [data-theme="light"] .visual-option.selected { background: rgba(37, 99, 235, 0.06); border-color: #2563eb; color: #2563eb; } [data-theme="light"] .cta-secondary { color: #0f172a; border-color: #e2e8f0; } [data-theme="light"] .cta-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; } /* Value Section */ [data-theme="light"] .value-section { background: #ffffff; border-top-color: #e2e8f0; border-bottom-color: #e2e8f0; } [data-theme="light"] .value-title { color: #0f172a; } [data-theme="light"] .value-description { color: #475569; } /* How It Works Section */ [data-theme="light"] .how-title { color: #0f172a; } [data-theme="light"] .how-step { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .how-step:hover { border-color: #2563eb; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } [data-theme="light"] .step-title { color: #0f172a; } [data-theme="light"] .step-description { color: #475569; } /* Audience Section */ [data-theme="light"] .audience-section { background: #ffffff; border-top-color: #e2e8f0; border-bottom-color: #e2e8f0; } [data-theme="light"] .audience-title { color: #0f172a; } [data-theme="light"] .audience-card { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] .audience-card:hover { border-color: #2563eb; } [data-theme="light"] .audience-card-title { color: #0f172a; } [data-theme="light"] .audience-card-description { color: #475569; } [data-theme="light"] .audience-icon { background: rgba(37, 99, 235, 0.06); } /* Final CTA Section */ [data-theme="light"] .final-cta-title { color: #0f172a; } [data-theme="light"] .final-cta-description { color: #475569; } /* Footer */ [data-theme="light"] .landing-footer { background: #ffffff; border-top-color: #e2e8f0; } [data-theme="light"] .footer-logo { color: #0f172a; } [data-theme="light"] .footer-link { color: #475569 !important; } [data-theme="light"] .footer-link:hover { color: #0f172a !important; } [data-theme="light"] .footer-copyright { color: #94a3b8; } /* ============================================ HELP PAGE - Light Mode Overrides ============================================ */ [data-theme="light"] .help-container a:not(.cta-button) { color: #2563eb !important; } [data-theme="light"] .help-container a:not(.cta-button):hover { color: #1d4ed8 !important; } [data-theme="light"] .help-container .cta-button, [data-theme="light"] .help-container .cta-button:hover { color: #ffffff !important; } [data-theme="light"] .back-button { background: #ffffff; border-color: #e2e8f0; color: #0f172a; } [data-theme="light"] .back-button:hover { background: #f1f5f9; color: #0f172a; } [data-theme="light"] .help-hero { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .help-hero::before { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(37, 99, 235, 0.04), transparent); } [data-theme="light"] .help-title { color: #0f172a; } [data-theme="light"] .help-subtitle { color: #475569; } [data-theme="light"] .help-toc { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .toc-title { color: #0f172a; } [data-theme="light"] .toc-list a { color: #475569 !important; } [data-theme="light"] .toc-list a:hover { color: #0f172a !important; background: rgba(37, 99, 235, 0.04); } [data-theme="light"] .toc-list a::before { background: #cbd5e1; } [data-theme="light"] .toc-list a:hover::before { background: #2563eb; } [data-theme="light"] .section-title { color: #0f172a; border-bottom-color: #e2e8f0; } [data-theme="light"] .feature-card { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .feature-card:hover { border-color: #2563eb; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.06); } [data-theme="light"] .feature-card h3 { color: #0f172a; } [data-theme="light"] .feature-card p { color: #475569; } [data-theme="light"] .feature-list > li { color: #475569; } [data-theme="light"] .feature-list > li strong { color: #0f172a; } [data-theme="light"] .feature-list ul li { color: #64748b; } [data-theme="light"] .feature-list ul li::before { background: #cbd5e1; } [data-theme="light"] .step-list > li { color: #475569; border-bottom-color: #e2e8f0; } [data-theme="light"] .step-list > li strong { color: #0f172a; } [data-theme="light"] .step-list > li p { color: #64748b; } [data-theme="light"] .step-list ul li { color: #64748b; } [data-theme="light"] .step-list ul li::before { background: #cbd5e1; } [data-theme="light"] .troubleshooting-item { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] .troubleshooting-item p strong { color: #0f172a; } [data-theme="light"] .troubleshooting-item p { color: #475569; } [data-theme="light"] .help-footer .footer-content { background: #ffffff; border-color: #e2e8f0; } [data-theme="light"] .help-footer .footer-content::before { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(37, 99, 235, 0.04), transparent); } [data-theme="light"] .footer-text { color: #475569; } /* ============================================ AUTH PAGES - Light Mode Overrides ============================================ */ [data-theme="light"] .auth-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } [data-theme="light"] .auth-header { border-bottom-color: #e2e8f0; } [data-theme="light"] .auth-title { color: #0f172a; } [data-theme="light"] .auth-subtitle { color: #475569; } [data-theme="light"] .form-label { color: #0f172a; } [data-theme="light"] .form-input { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; } [data-theme="light"] .form-input:hover { border-color: #cbd5e1; } [data-theme="light"] .form-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); } [data-theme="light"] .form-hint { color: #64748b; } [data-theme="light"] .auth-footer { border-top-color: #e2e8f0; } [data-theme="light"] .auth-link-text { color: #475569; } [data-theme="light"] .auth-link { color: #2563eb !important; } [data-theme="light"] .checkbox-label { color: #475569; } /* ============================================ DELETE / CONFIRMATION PAGES - Light Mode ============================================ */ [data-theme="light"] .delete-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } [data-theme="light"] .delete-title { color: #0f172a; } [data-theme="light"] .delete-message { color: #475569; } [data-theme="light"] .btn-secondary { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; } [data-theme="light"] .btn-secondary:hover { background: #e2e8f0; } /* ============================================ ACCOUNT DELETED PAGE - Light Mode ============================================ */ [data-theme="light"] .success-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } [data-theme="light"] .success-title { color: #0f172a; } [data-theme="light"] .success-message { color: #475569; } /* ============================================ SHARED QUIZ PAGE - Light Mode ============================================ */ [data-theme="light"] .shared-quiz-container { background: #f8fafc; } [data-theme="light"] .quiz-header { background: #ffffff; border-bottom-color: #e2e8f0; } [data-theme="light"] .quiz-title { color: #0f172a; } [data-theme="light"] .quiz-description { color: #475569; } [data-theme="light"] .share-info { background: rgba(37, 99, 235, 0.04); border-color: rgba(37, 99, 235, 0.3); } [data-theme="light"] .share-info p { color: #475569; } [data-theme="light"] .share-info strong { color: #0f172a; } [data-theme="light"] .quiz-questions { background: #ffffff; border-color: #e2e8f0; } /* ============================================ OLD STYLES.CSS Overrides for Light Mode ============================================ */ [data-theme="light"] .card { background-color: #ffffff !important; border-color: #e2e8f0 !important; } [data-theme="light"] .card-header { background-color: #2563eb !important; color: #ffffff !important; } [data-theme="light"] .message.sent .message-text { background-color: #2563eb !important; color: #ffffff !important; } [data-theme="light"] .message.received .message-text { background-color: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .message-sent b, [data-theme="light"] .message-received b { color: #64748b !important; } [data-theme="light"] .btn-primary { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } [data-theme="light"] .btn-success { background-color: #059669 !important; border-color: #059669 !important; } [data-theme="light"] #lbl-file-upload { background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0; }