/* ============================================ DARK-MODE.CSS - Dark Mode Color Scheme ============================================ */ /* Dark mode is toggled by adding 'dark-mode' class to */ body.dark-mode { background: var(--gradient-background-dark); } /* ============================================ HEADER - Dark Mode ============================================ */ body.dark-mode .header { background: rgba(30, 27, 75, 0.95); border-bottom: 1px solid rgba(139, 92, 246, 0.3); box-shadow: var(--shadow-dark); } body.dark-mode .title { color: #c4b5fd; } body.dark-mode .python-badge { background: rgba(139, 92, 246, 0.2); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .status-ready { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } body.dark-mode .status-loading { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } /* ============================================ HAMBURGER MENU - Dark Mode ============================================ */ body.dark-mode .menu-btn { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } body.dark-mode .menu-btn:hover { background: rgba(139, 92, 246, 0.3); } body.dark-mode .menu-panel { background: rgba(30, 27, 75, 0.98); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5); } body.dark-mode .menu-header { color: #c4b5fd; border-bottom: 2px solid #312e81; } body.dark-mode .menu-item { color: #cbd5e1; } body.dark-mode .menu-item:hover { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } body.dark-mode .menu-item.active { background: rgba(139, 92, 246, 0.25); color: #c4b5fd; } body.dark-mode .menu-overlay { background: rgba(0, 0, 0, 0.6); } /* ============================================ CARDS & PANELS - Dark Mode ============================================ */ body.dark-mode .lesson-sidebar, body.dark-mode .lessons-content, body.dark-mode .ad-column { background: rgba(30, 27, 75, 0.95); box-shadow: var(--shadow-dark); } body.dark-mode .lesson-sidebar h3, body.dark-mode .lessons-header h2, body.dark-mode .filter-title { color: #c4b5fd; } body.dark-mode .lessons-header p { color: #94a3b8; } /* ============================================ LESSON CARDS - Dark Mode ============================================ */ body.dark-mode .lesson-card { background: rgba(49, 46, 129, 0.6); border: 1px solid rgba(139, 92, 246, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } body.dark-mode .lesson-card:hover { box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); border-color: #8b5cf6; } body.dark-mode .lesson-card h3 { color: #e2e8f0; } body.dark-mode .lesson-card p { color: #94a3b8; } body.dark-mode .lesson-card-footer { border-top: 1px solid rgba(139, 92, 246, 0.2); } body.dark-mode .lesson-category { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } body.dark-mode .lesson-difficulty { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } /* ============================================ FILTERS - Dark Mode ============================================ */ body.dark-mode .filter-btn { background: rgba(49, 46, 129, 0.6); border: 1px solid rgba(139, 92, 246, 0.3); color: #cbd5e1; } body.dark-mode .filter-btn:hover { background: rgba(139, 92, 246, 0.2); border-color: #8b5cf6; color: #a78bfa; } body.dark-mode .filter-btn.active { background: var(--gradient-primary); color: white; border-color: #8b5cf6; } /* ============================================ PROGRESS BAR - Dark Mode ============================================ */ body.dark-mode .progress-bar { border-top: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .progress-label { color: #94a3b8; } body.dark-mode .progress-track { background: rgba(49, 46, 129, 0.6); } /* ============================================ AD SPACE - Dark Mode ============================================ */ body.dark-mode .partner-box { border: 2px dashed rgba(139, 92, 246, 0.3); background: rgba(49, 46, 129, 0.3); } body.dark-mode .partner-box span { color: #64748b; } /* ============================================ AI CHAT - Dark Mode ============================================ */ body.dark-mode #ai-messages { background: #1e1b4b; } body.dark-mode .welcome-message { color: #94a3b8; } body.dark-mode .welcome-message h3 { color: #e2e8f0; } /* AI message bubbles stay white for contrast */ body.dark-mode .ai-message .message-content { background: rgba(49, 46, 129, 0.8); color: #e2e8f0; border: 1px solid rgba(139, 92, 246, 0.3); } /* User message bubbles stay blue (good contrast in dark mode) */ body.dark-mode .user-message .message-content { /* Keep the blue gradient - it works well in dark mode */ } body.dark-mode .ai-feedback-content { background: rgba(49, 46, 129, 0.8); border: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .ai-message { color: #e2e8f0; } body.dark-mode .ai-thinking { color: #94a3b8; } body.dark-mode #ai-input { background: rgba(49, 46, 129, 0.6); border: 2px solid rgba(139, 92, 246, 0.3); color: #e2e8f0; } body.dark-mode #ai-input::placeholder { color: #64748b; } body.dark-mode #ai-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); } /* ============================================ CODE EDITOR - Dark Mode ============================================ */ body.dark-mode .code-panel, body.dark-mode .output-panel, body.dark-mode .coach-panel, body.dark-mode #coachPanel, body.dark-mode #aiChatPanel { background: rgba(30, 27, 75, 0.95); box-shadow: var(--shadow-dark); } body.dark-mode .panel-header { background: rgba(49, 46, 129, 0.6); border-bottom: 1px solid rgba(139, 92, 246, 0.3); color: #c4b5fd; } body.dark-mode .output-error { color: #fca5a5; } /* ============================================ BUTTONS - Dark Mode ============================================ */ body.dark-mode .btn-primary { background: var(--gradient-primary); color: white; } body.dark-mode .btn-primary:hover { box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); } body.dark-mode .btn-secondary { background: rgba(100, 116, 139, 0.3); color: #cbd5e1; border: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .btn-secondary:hover { background: rgba(139, 92, 246, 0.2); border-color: #8b5cf6; } /* ============================================ LESSON MODAL - Dark Mode (Visual Hierarchy) ============================================ */ body.dark-mode .lesson-modal-overlay { background: rgba(0, 0, 0, 0.85); } /* Modal background */ body.dark-mode .lesson-modal-content { background: rgba(30, 27, 75, 0.98) !important; border: 1px solid rgba(139, 92, 246, 0.3); } /* ============================================ LESSON SURFACES - Dark Mode (Semantic Classes) ============================================ */ /* Slide container - subtle background to separate from modal */ body.dark-mode .lesson-slide { background: rgba(40, 37, 85, 0.5); border-radius: 12px; } /* Primary lesson surface - dark-neutral elevated above modal */ body.dark-mode .lesson-surface { color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Text hierarchy on lesson surfaces */ body.dark-mode .lesson-surface h1, body.dark-mode .lesson-surface h2 { color: var(--text-heading); } body.dark-mode .lesson-surface h3, body.dark-mode .lesson-surface h4 { color: #e2e8f0; } body.dark-mode .lesson-surface p, body.dark-mode .lesson-surface li { color: #cbd5e1; } body.dark-mode .lesson-surface strong { color: #f7fafc; font-weight: 700; } /* Inset surfaces (code blocks, output panels) */ body.dark-mode .lesson-surface--inset { border-color: rgba(100, 116, 139, 0.3); color: #e2e8f0; } /* Output panels with green tint */ body.dark-mode .lesson-surface--output { color: #9ae6b4; } /* Labels within surfaces */ body.dark-mode .code-label, body.dark-mode .output-label { color: #a0aec0; font-weight: 600; } /* Inline code pills (not inside inset surfaces) */ body.dark-mode .lesson-surface:not(.lesson-surface--inset) code { background: rgba(139, 92, 246, 0.15) !important; /* Override inline */ color: #c4b5fd !important; border: 1px solid rgba(139, 92, 246, 0.25); } /* Code inside inset surfaces inherits surface color */ body.dark-mode .lesson-surface--inset code { background: transparent; border: none; color: #e2e8f0; } /* Hero icons - reduce brightness */ body.dark-mode .lesson-surface [style*="font-size: 48px"], body.dark-mode .lesson-surface [style*="font-size: 80px"] { opacity: 0.85; filter: grayscale(0.1); } /* ============================================ LESSON CONTENT CLASSES - Dark Mode (Phase 3) NOTE: Most colors are now handled automatically by CSS variables in theme.css. Only visual enhancements (opacity, filters, shadows) remain here. ============================================ */ /* Hero Icons - Add subtle visual effects */ body.dark-mode .lesson-hero-icon, body.dark-mode .lesson-hero-icon--medium, body.dark-mode .lesson-hero-icon--small { opacity: 0.9; filter: brightness(1.1); } /* Callout Boxes - Add translucent backgrounds for depth */ body.dark-mode .lesson-callout { background: rgba(58, 58, 58, 0.5); } body.dark-mode .lesson-callout--warning { background: rgba(62, 47, 31, 0.5); } body.dark-mode .lesson-callout--success { background: rgba(16, 95, 65, 0.2); } body.dark-mode .lesson-callout--danger { background: rgba(95, 31, 31, 0.2); } /* Info Boxes - Subtle background */ body.dark-mode .lesson-info-box { background: rgba(44, 44, 44, 0.6); border-color: rgba(74, 74, 74, 0.8); } /* Inline Code - Add subtle border for definition */ body.dark-mode .lesson-code-inline, body.dark-mode .lesson-code-inline--lg, body.dark-mode .lesson-code-inline--md { background: rgba(58, 58, 58, 0.6); border: 1px solid rgba(93, 173, 226, 0.2); } /* Mistake items in lesson surfaces */ body.dark-mode .lesson-surface .mistake-box, body.dark-mode .mistake-item { background: rgba(60, 56, 115, 0.6) !important; /* Override inline */ border-left-color: rgba(239, 68, 68, 0.8) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } body.dark-mode .mistake-wrong { color: #fca5a5; } body.dark-mode .mistake-code-wrong, body.dark-mode .mistake-wrong code { background: rgba(239, 68, 68, 0.25); color: #fca5a5; } body.dark-mode .mistake-right { color: #6ee7b7; } body.dark-mode .mistake-code-right, body.dark-mode .mistake-right code { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; } body.dark-mode .mistake-explanation { color: #94a3b8; } /* Checkpoint list items */ body.dark-mode .checkpoint-list li { background: rgba(167, 139, 250, 0.15) !important; /* Override inline */ border-left-color: rgba(167, 139, 250, 0.8) !important; color: #e9d5ff !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Navigation */ body.dark-mode .lesson-close-btn { color: #cbd5e1; background: rgba(139, 92, 246, 0.2); } body.dark-mode .lesson-close-btn:hover { background: rgba(139, 92, 246, 0.3); } body.dark-mode .lesson-nav-btn { background: rgba(49, 46, 129, 0.6); color: #cbd5e1; border: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .lesson-nav-btn:hover { background: rgba(139, 92, 246, 0.3); } body.dark-mode .lesson-nav-btn.primary { background: var(--gradient-primary); color: white; } body.dark-mode .slide-nav { background: rgba(30, 27, 75, 0.95); border-top: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .lesson-slide-count-inline { color: #94a3b8; } /* ============================================ CHALLENGE MODE - Dark Mode ============================================ */ body.dark-mode #challengeObjective, body.dark-mode #successCriteria { color: #e2e8f0; } body.dark-mode .criterion { color: #cbd5e1; } body.dark-mode .criterion.pass { color: #34d399; } body.dark-mode #speechBubble { background: rgba(49, 46, 129, 0.95); color: #e2e8f0; border: 1px solid rgba(139, 92, 246, 0.3); } /* ============================================ CELEBRATION TOAST - Dark Mode (EXACT SPEC) ============================================ */ body.dark-mode #celebrationToast { background: rgba(10, 8, 20, 0.6); border: 1px solid rgba(139, 92, 246, 0.25); } /* Brighter text for contrast */ body.dark-mode .celebration-title { color: #e0e7ff; } body.dark-mode .celebration-message { color: #c4b5fd; } /* ============================================ SCROLLBARS - Dark Mode ============================================ */ body.dark-mode ::-webkit-scrollbar { width: 12px; height: 12px; } body.dark-mode ::-webkit-scrollbar-track { background: rgba(30, 27, 75, 0.5); } body.dark-mode ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 6px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.6); } /* ============================================ DARK MODE TOGGLE BUTTON ============================================ */ .dark-mode-toggle { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 10px 0; border-radius: 10px; cursor: pointer; font-size: 18px; color: #334155; transition: var(--transition-standard); } .dark-mode-toggle:hover { background: #f5f3ff; color: #7c3aed; } body.dark-mode .dark-mode-toggle { color: #cbd5e1; } body.dark-mode .dark-mode-toggle:hover { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } .toggle-switch { position: relative; width: 48px; height: 24px; background: #cbd5e1; border-radius: var(--radius-md); transition: background 0.3s; } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: var(--transition-slow); } body.dark-mode .toggle-switch { background: #8b5cf6; } body.dark-mode .toggle-switch::after { transform: translateX(24px); } /* ============================================ CODEMIRROR EDITOR - DARK MODE ============================================ */ .dark-mode .CodeMirror { background: #1a1625; color: #e2e8f0; border: 1px solid rgba(139, 92, 246, 0.3) !important; } .dark-mode .CodeMirror-gutters { background: #13111a !important; border-right: 1px solid rgba(139, 92, 246, 0.3) !important; } .dark-mode .CodeMirror-linenumber { color: #6b7280 !important; } .dark-mode .CodeMirror-cursor { border-left: 2px solid #8b5cf6 !important; } .dark-mode .CodeMirror-selected { background: rgba(139, 92, 246, 0.2) !important; } .dark-mode .CodeMirror-line::selection, .dark-mode .CodeMirror-line > span::selection, .dark-mode .CodeMirror-line > span > span::selection { background: rgba(139, 92, 246, 0.3) !important; } /* Match the output panel styling */ .dark-mode .code-panel { background: rgba(30, 27, 75, 0.95) !important; } .dark-mode .output-panel { background: rgba(30, 27, 75, 0.95) !important; } .dark-mode #outputDisplay, .dark-mode #outputDisplayIDE, .dark-mode #outputDisplayAITutor { background: #1a1625; color: #e0e7ff; border: 1px solid rgba(139, 92, 246, 0.3); } /* Challenge Cards - Better contrast */ body.dark-mode .lesson-objective, body.dark-mode .success-criteria { background: rgba(30, 30, 46, 0.8) !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; } body.dark-mode .lesson-objective h3, body.dark-mode .lesson-objective h4, body.dark-mode .success-criteria h3, body.dark-mode .success-criteria h4 { color: #e2e8f0 !important; } body.dark-mode .lesson-objective p, body.dark-mode .lesson-objective li, body.dark-mode .success-criteria p, body.dark-mode .success-criteria li { color: #cbd5e1 !important; } body.dark-mode .success-item { color: #b8c5d0 !important; } body.dark-mode .success-item.completed { color: #58d68d !important; } body.dark-mode .expected-output, body.dark-mode .lesson-objective > div[style*="background: #f8fafc"] { background: rgba(30, 30, 46, 0.8) !important; border-left-color: rgba(139, 92, 246, 0.6) !important; color: #c9d1d9 !important; } body.dark-mode .lesson-objective > div[style*="background: #f8fafc"] pre { color: #e2e8f0 !important; } /* Hint Buttons - Dark mode styling */ body.dark-mode .hint-btn, body.dark-mode .solution-btn { background: rgba(139, 92, 246, 0.2) !important; color: #c9d1d9 !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; } body.dark-mode .hint-btn:hover, body.dark-mode .solution-btn:hover { background: rgba(139, 92, 246, 0.3) !important; border-color: rgba(139, 92, 246, 0.6) !important; } /* Hints section - Better contrast */ body.dark-mode .hints-section { color: #cbd5e1 !important; } /* Expected Output Box - Dark mode */ body.dark-mode .expected-output-box { background: rgba(30, 30, 46, 0.8) !important; border-left-color: rgba(139, 92, 246, 0.6) !important; color: #cbd5e1 !important; } body.dark-mode .expected-output-box strong { color: #e2e8f0 !important; } body.dark-mode .expected-output-box pre { color: #e2e8f0 !important; } /* Hints section heading - Better contrast */ body.dark-mode .hints-section h4 { color: #cbd5e1 !important; } /* ============================================ AI TUTOR CHAT - DARK MODE ============================================ */ body.dark-mode #aiChatPanel { background: rgba(30, 27, 75, 0.95); border: 1px solid rgba(139, 92, 246, 0.3); } /* AI Tutor IDE Column - Dark Mode */ body.dark-mode .ai-tutor-grid .code-panel, body.dark-mode .ai-tutor-grid .output-section { background: rgba(30, 27, 75, 0.95); border: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode .ai-tutor-grid .panel-header { background: rgba(49, 46, 129, 0.6); border-bottom: 1px solid rgba(139, 92, 246, 0.3); color: #c4b5fd; } body.dark-mode #ai-messages-tutor { background: rgba(20, 18, 50, 0.6); } body.dark-mode .ai-input-container { background: rgba(30, 27, 75, 0.95); border-top-color: rgba(139, 92, 246, 0.3); } body.dark-mode #ai-input-tutor { background: rgba(0, 0, 0, 0.25); color: #e8e8e8; border: 1px solid rgba(255, 255, 255, 0.12); } body.dark-mode #ai-input-tutor::placeholder { color: rgba(232, 232, 232, 0.4); } body.dark-mode #ai-input-tutor:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); } body.dark-mode .panel-header { background: rgba(30, 27, 75, 0.95); border-bottom: 1px solid rgba(139, 92, 246, 0.3); } /* ============================================ CHEAT SHEET PAGE - DARK MODE ============================================ */ body.dark-mode { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); } body.dark-mode .coverage-document { background: rgba(30, 27, 75, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } body.dark-mode .document-header { border-bottom: 2px solid rgba(139, 92, 246, 0.3); } body.dark-mode .document-header h1 { color: #c4b5fd; } body.dark-mode .document-header p { color: #94a3b8; } body.dark-mode .search-tip { background: rgba(139, 92, 246, 0.15); border-left-color: #8b5cf6; color: #cbd5e1; } body.dark-mode .search-tip strong { color: #c4b5fd; } body.dark-mode .search-tip kbd { background: rgba(49, 46, 129, 0.6) !important; border-color: rgba(139, 92, 246, 0.3) !important; color: #e2e8f0; } body.dark-mode .lesson-section { background: rgba(49, 46, 129, 0.6); border-color: rgba(139, 92, 246, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode .lesson-header { border-bottom-color: rgba(139, 92, 246, 0.3); } body.dark-mode .lesson-title { color: #e2e8f0; } body.dark-mode .lesson-content { color: #e2e8f0; } body.dark-mode .lesson-content p { color: #e2e8f0; } body.dark-mode .lesson-content ul, body.dark-mode .lesson-content li { color: #e2e8f0; } body.dark-mode .lesson-content h3 { color: #c4b5fd; background: rgba(139, 92, 246, 0.15); } body.dark-mode .lesson-content h4 { color: #a78bfa; background: rgba(251, 191, 36, 0.15); } body.dark-mode .lesson-content > p:first-of-type { background: rgba(59, 130, 246, 0.15); color: #e2e8f0; } body.dark-mode .lesson-content strong { color: #f7fafc; } body.dark-mode .lesson-content code { background: rgba(0, 0, 0, 0.3); color: #c4b5fd; } body.dark-mode pre { background: #1e1b4b !important; border: 1px solid rgba(139, 92, 246, 0.3); } body.dark-mode pre code { color: #e2e8f0; } body.dark-mode .ready-box { background: rgba(16, 185, 129, 0.15); border-left-color: #10b981; } body.dark-mode .ready-box h4, body.dark-mode .ready-box ul { color: #6ee7b7; } body.dark-mode .highlight-box { background: rgba(251, 191, 36, 0.15); border-left-color: #f59e0b; } body.dark-mode .highlight-box strong { color: #fbbf24; } body.dark-mode .toc { background: rgba(49, 46, 129, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode .toc h2 { color: #c4b5fd; } body.dark-mode .toc-link { color: #a78bfa; } body.dark-mode .toc-link:hover { background: rgba(139, 92, 246, 0.2); } body.dark-mode .mistakes-table { background: rgba(30, 27, 75, 0.6); border-color: rgba(139, 92, 246, 0.3); } body.dark-mode .mistakes-table th { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.3); } body.dark-mode .mistakes-table td { background: rgba(30, 27, 75, 0.6); border-color: rgba(139, 92, 246, 0.2); color: #cbd5e1; } body.dark-mode .mistakes-table tr:hover { background: rgba(139, 92, 246, 0.1); } body.dark-mode .floating-menu-btn { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6); } body.dark-mode .floating-nav-panel { background: rgba(30, 27, 75, 0.98); backdrop-filter: blur(10px); box-shadow: -2px 0 20px rgba(0, 0, 0, 0.5); } body.dark-mode .floating-nav-header { color: #c4b5fd; border-bottom-color: rgba(139, 92, 246, 0.3); } body.dark-mode .floating-nav-item { color: #cbd5e1; } body.dark-mode .floating-nav-item:hover { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } body.dark-mode .menu-item { color: #cbd5e1; } body.dark-mode .menu-item:hover { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }