/** * CryptoLingo - Main Application Stylesheet * * This is the single CSS file for the entire application. * It consolidates all styles previously scattered across PHP templates. * * Architecture Overview: * ===================== * * 1. THEME SYSTEM (Light & Dark) * - Light theme is the default, defined in :root * - Dark theme overrides are defined under .theme-dark * - Route-based theme application (see base.php) * * 2. THEME APPLICATION * - /onboarding route: Automatically applies dark theme * - All other routes: Use light theme by default * - Theme is applied by adding .theme-dark class to element * * 3. FUTURE EXTENSIBILITY * - User preference toggle: Store choice in database/cookies * - Dashboard dark mode: Apply .theme-dark to body when user prefers * - Per-route overrides: Extend route detection in base.php * - Theme utilities: Create JS functions (setTheme(), toggleTheme()) * * 4. COLOR SYSTEM * CSS variables provide consistent theming: * - --color-bg: Main page background * - --color-surface: Card/panel backgrounds * - --color-text: Primary text color * - --color-text-muted: Secondary/muted text * - --color-border: Border color for cards/inputs * - --color-accent: Primary brand color (ocean blue) * - --color-accent-hover: Hover state for accent * - --color-accent-light: Light accent for backgrounds * * 5. STYLE ORGANIZATION * - Font imports * - Theme variables (light & dark) * - Global base styles * - Component-specific styles * - Utility classes * - Animations * - Mobile optimizations */ /* ========================================================================== FONT IMPORTS ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ========================================================================== THEME SYSTEM - CSS VARIABLES ========================================================================== */ /** * Light Theme (Default) * * Applied to all routes by default unless overridden. * Uses bright, ocean-inspired colors with high contrast for readability. */ :root { --color-bg: #f0f9ff; /* ocean-50 - Light blue background */ --color-surface: #ffffff; /* white - Card/panel background */ --color-text: #0c4a6e; /* ocean-900 - Dark blue text */ --color-text-muted: #64748b; /* gray-500 - Secondary text */ --color-border: #e5e7eb; /* gray-200 - Subtle borders */ --color-accent: #0ea5e9; /* ocean-500 - Primary brand color */ --color-accent-hover: #0284c7; /* ocean-600 - Accent hover state */ --color-accent-light: #e0f2fe; /* ocean-100 - Light accent backgrounds */ } /** * Dark Theme * * Currently applied to: /onboarding route * Theme-ready pages: Dashboard * * To enable dark theme on dashboard: * - Add dashboard route to theme detection in base.php, OR * - Implement user preference toggle * * Uses true dark backgrounds with high-contrast text and brighter accents * optimized for reduced eye strain in low-light environments. */ .theme-dark { --color-bg: #0a0f1a; /* True dark background - deep navy */ --color-surface: #1a2332; /* Elevated card surface - lighter navy */ --color-text: #e0f2fe; /* ocean-100 - High contrast light text */ --color-text-muted: #94a3b8; /* gray-400 - Muted text in dark mode */ --color-border: #334155; /* gray-700 - Subtle dark borders */ --color-accent: #38bdf8; /* ocean-400 - Brighter accent for dark */ --color-accent-hover: #0ea5e9; /* ocean-500 - Accent hover (darker) */ --color-accent-light: #0c4a6e; /* ocean-900 - Darker accent backgrounds */ } /* ========================================================================== GLOBAL BASE STYLES ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; } /* ========================================================================== COMPONENT STYLES ========================================================================== */ /** * Wave Background * Used for hero sections and decorative headers */ .wave-bg { background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%); } /** * Card Shadow * Consistent shadow for card components */ .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /** * Skill Locked State * Visual indicator for locked/unavailable content */ .skill-locked { filter: grayscale(0.5); opacity: 0.7; } /* ========================================================================== ANIMATIONS ========================================================================== */ /** * Float Animation * Gentle up-and-down motion for visual interest */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } /** * Pulse Glow Animation * Expanding glow effect for attention-grabbing elements */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); } } .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } /* ========================================================================== UTILITY CLASSES ========================================================================== */ /** * Alpine.js Cloak * Hides elements until Alpine.js initializes to prevent FOUC */ [x-cloak] { display: none !important; } /** * Safe Viewport Height Classes * Uses svh (small viewport height) for mobile browsers with dynamic UI */ @supports (height: 100svh) { .h-screen-safe { height: 100svh; } .min-h-screen-safe { min-height: 100svh; } .max-h-screen-safe { max-height: 100svh; } } /* Fallback for browsers without svh support */ @supports not (height: 100svh) { .h-screen-safe { height: 100vh; } .min-h-screen-safe { min-height: 100vh; } .max-h-screen-safe { max-height: 100vh; } } /** * Mobile Viewport Constraint * Prevents scrolling on lesson pages on mobile via CSS */ @media (max-width: 768px) { body.lesson-page-container, body:has(.lesson-page-container) { overflow: hidden; position: fixed; width: 100%; height: 100vh; height: 100svh; } } /** * Line Clamp Utilities * Truncate text to specific number of lines with ellipsis */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== ONBOARDING-SPECIFIC STYLES ========================================================================== */ /** * Onboarding Option Selector * * Interactive cards for multi-choice questions in onboarding flow. * Fully themed for both light and dark modes. */ /* Default unchecked state - uses theme variables */ .onboarding-option { border-color: var(--color-border); background-color: var(--color-surface); } /* Dark theme hover effect for options */ .theme-dark .onboarding-option { background-color: var(--color-surface); border-color: var(--color-border); transition: all 0.2s ease; } .theme-dark .onboarding-option:hover { border-color: var(--color-accent); background-color: rgba(56, 189, 248, 0.1); /* ocean-400 with opacity */ } /* Checked state for all themes */ .onboarding-option-checked { border-color: var(--color-accent) !important; background-color: var(--color-accent-light) !important; } .theme-dark .onboarding-option-checked { border-color: var(--color-accent) !important; background-color: var(--color-accent-light) !important; } /* Option text styling */ .theme-dark .onboarding-option-text { color: var(--color-text); } .theme-dark .onboarding-option-subtext { color: var(--color-text-muted); } /** * Onboarding Textarea * Styled for dark theme compatibility */ .theme-dark .onboarding-textarea { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .theme-dark .onboarding-textarea:focus { border-color: var(--color-accent); background-color: var(--color-surface); } .theme-dark .onboarding-textarea::placeholder { color: var(--color-text-muted); } /** * Onboarding Buttons * Theme-aware button styles for navigation */ .theme-dark .onboarding-btn-back { background-color: rgba(255, 255, 255, 0.1); color: var(--color-text); border: 1px solid var(--color-border); } .theme-dark .onboarding-btn-back:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.15); } /** * Back Arrow Button * Duolingo-style back navigation */ .back-arrow { color: var(--color-text-muted); background-color: transparent; transition: all 0.2s ease; } .back-arrow:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); } .theme-dark .back-arrow:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); } /** * Primary CTA Button (Onboarding) */ .theme-dark .onboarding-btn-primary { background: linear-gradient(to right, var(--color-accent), var(--color-accent-hover)); } .theme-dark .onboarding-btn-primary:hover:not(:disabled) { opacity: 0.9; } /** * Disabled Button State */ .theme-dark .onboarding-btn-disabled { background-color: var(--color-border); color: var(--color-text-muted); } /* ========================================================================== DASHBOARD-SPECIFIC STYLES ========================================================================== */ /** * Dashboard Hero Section * Welcome header with user stats */ .theme-dark .dashboard-hero { background: linear-gradient(to right, #0c4a6e, #075985); /* ocean-900 to ocean-800 for dark */ } /** * Dashboard Stat Cards in Hero * XP and Streak cards with translucent backgrounds */ .theme-dark .dashboard-stat-card { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } /** * Success Message Banner */ .theme-dark .dashboard-success-banner { background-color: rgba(34, 197, 94, 0.15); /* green with opacity */ border-color: rgba(34, 197, 94, 0.3); } .theme-dark .dashboard-success-text { color: #86efac; /* green-300 for dark mode */ } /** * Course Cards * Main cards for My Courses and Explore sections */ .theme-dark .dashboard-course-card { background-color: var(--color-surface); border-color: var(--color-border); } .theme-dark .dashboard-course-card-border-default { border-color: var(--color-border); } .theme-dark .dashboard-course-card-border-started { border-color: rgba(56, 189, 248, 0.5); /* ocean-400 with opacity */ } .theme-dark .dashboard-course-card-border-completed { border-color: rgba(34, 197, 94, 0.5); /* green-500 with opacity */ } /** * Course Card Text Elements */ .theme-dark .dashboard-course-title { color: var(--color-text); } .theme-dark .dashboard-course-description { color: var(--color-text-muted); } .theme-dark .dashboard-course-stats { color: var(--color-text-muted); } /** * Course Icon Background * Tinted background for course icons */ .theme-dark .dashboard-course-icon-bg { /* Icon backgrounds use inline styles with color opacity, no override needed */ opacity: 0.9; } /** * Archive Menu Dropdown */ .theme-dark .dashboard-archive-menu-button { color: var(--color-text-muted); } .theme-dark .dashboard-archive-menu-button:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--color-text); } .theme-dark .dashboard-archive-menu { background-color: var(--color-surface); border-color: var(--color-border); } .theme-dark .dashboard-archive-menu-item { color: var(--color-text); } .theme-dark .dashboard-archive-menu-item:hover { background-color: rgba(255, 255, 255, 0.05); } /** * Progress Bars */ .theme-dark .dashboard-progress-bar-bg { background-color: rgba(255, 255, 255, 0.1); } .theme-dark .dashboard-progress-bar-fill { background-color: var(--color-accent); } .theme-dark .dashboard-progress-text { color: var(--color-text-muted); } /** * Premium Badge */ .theme-dark .dashboard-premium-badge { background-color: rgba(250, 204, 21, 0.2); /* yellow with opacity */ color: #fcd34d; /* yellow-300 */ } /** * Primary Action Buttons */ .theme-dark .dashboard-btn-primary { background-color: var(--color-accent); color: #ffffff; } .theme-dark .dashboard-btn-primary:hover { background-color: var(--color-accent-hover); } /** * Secondary Action Buttons (Archive, etc.) */ .theme-dark .dashboard-btn-secondary { background-color: rgba(255, 255, 255, 0.1); color: var(--color-text); } .theme-dark .dashboard-btn-secondary:hover { background-color: rgba(255, 255, 255, 0.15); } /** * Completed Badge */ .theme-dark .dashboard-completed-badge { background-color: rgba(34, 197, 94, 0.2); /* green with opacity */ color: #86efac; /* green-300 */ } /** * "Added to My Courses" Status */ .theme-dark .dashboard-enrolled-status { color: #86efac; /* green-300 */ } /** * Empty State */ .theme-dark .dashboard-empty-state { background-color: var(--color-surface); } .theme-dark .dashboard-empty-icon-bg { background-color: var(--color-accent-light); } .theme-dark .dashboard-empty-title { color: var(--color-text); } .theme-dark .dashboard-empty-description { color: var(--color-text-muted); } /** * Section Headers */ .theme-dark .dashboard-section-title { color: var(--color-text); } /** * Archived Courses */ .theme-dark .dashboard-archived-card { background-color: var(--color-surface); opacity: 0.7; } /* ========================================================================== FOOTER - DARK THEME ========================================================================== */ /** * Footer Background and Borders */ .theme-dark footer { background-color: var(--color-surface); border-top-color: var(--color-border); } /** * Footer Section Headers */ .theme-dark footer h3 { color: var(--color-text); } /** * Footer Links */ .theme-dark footer a { color: var(--color-text-muted); } .theme-dark footer a:hover { color: var(--color-accent); } /** * Footer Brand Name and Logo Text */ .theme-dark footer .font-semibold { color: var(--color-text); } /** * Footer Copyright Text */ .theme-dark footer p { color: var(--color-text-muted); } /** * Footer Bottom Border */ .theme-dark footer .border-t { border-top-color: var(--color-border); } /* ========================================================================== NAVIGATION BAR - DARK THEME ========================================================================== */ /** * Navigation Bar (Main Header Navigation Only) * Note: Uses 'body > nav' selector to avoid affecting footer nav elements */ /* Light theme - default shadow */ .nav-header { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } /* Dark theme - border instead of shadow */ .theme-dark .nav-header { box-shadow: none; border-bottom: 1px solid var(--color-border); } .theme-dark body > nav .nav-logo-text { color: var(--color-text); } .theme-dark body > nav .nav-link { color: var(--color-text-muted); } .theme-dark body > nav .nav-link:hover { color: var(--color-text); } /** * Notification Bell Icon */ .theme-dark body > nav button[aria-label="Notifications"] { color: var(--color-text-muted); } .theme-dark body > nav button[aria-label="Notifications"]:hover { color: var(--color-text); } /** * User Avatar */ .theme-dark body > nav a[title^="Profile"] { background-color: rgba(56, 189, 248, 0.2); /* ocean-400 with low opacity */ } .theme-dark body > nav a[title^="Profile"]:hover { background-color: rgba(56, 189, 248, 0.3); } .theme-dark body > nav a[title^="Profile"] span { color: var(--color-accent); } /** * Guest Navigation - Join Now Button */ .theme-dark body > nav a[href="/auth"] { background-color: var(--color-accent) !important; } .theme-dark body > nav a[href="/auth"]:hover { background-color: var(--color-accent-hover) !important; } /* Light theme hover (default) */ body > nav a[href="/auth"]:hover { opacity: 0.9; } /* ========================================================================== COURSE PAGE - DARK THEME ========================================================================== */ /** * Course Page Header * Gradient hero section with course info and progress */ .theme-dark .course-header { background: linear-gradient(to right, #0c4a6e, #075985); /* ocean-900 to ocean-800 for dark */ } .theme-dark .course-back-link { color: var(--color-text); } .theme-dark .course-back-link:hover { color: #ffffff; } .theme-dark .course-icon-wrapper { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .theme-dark .course-title { color: #ffffff; } .theme-dark .course-description { color: var(--color-text); } /** * Course Progress Card */ .theme-dark .course-progress-card { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .theme-dark .course-progress-label, .theme-dark .course-progress-percent { color: #ffffff; } .theme-dark .course-progress-bar { background-color: #ffffff; } .theme-dark .course-progress-text { color: var(--color-text); } .theme-dark .course-cta-button { background-color: #ffffff; color: #0c4a6e; } .theme-dark .course-cta-button:hover { background-color: var(--color-text); } /** * Course Skills Section */ .theme-dark .course-skills-section { background-color: var(--color-bg); } /** * Skill Cards */ .theme-dark .skill-card { background-color: var(--color-surface); border-color: var(--color-border); } .theme-dark .skill-card-header { border-bottom-color: var(--color-border); } .theme-dark .skill-icon-wrapper { /* Icon wrapper backgrounds use conditional PHP classes based on skill completion status (bg-green-100, bg-ocean-100, bg-gray-100), no theme override needed */ } .theme-dark .skill-title { color: var(--color-text); } .theme-dark .skill-description { color: var(--color-text-muted); } /** * Skill Badges */ .theme-dark .skill-badge-locked { background-color: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); } .theme-dark .skill-badge-completed { background-color: rgba(34, 197, 94, 0.2); color: #86efac; /* green-300 */ } .theme-dark .skill-feedback-button { color: var(--color-text-muted); } .theme-dark .skill-feedback-button:hover { color: var(--color-accent); background-color: rgba(56, 189, 248, 0.1); } /** * Skill Progress */ .theme-dark .skill-progress-label { color: var(--color-text-muted); } .theme-dark .skill-progress-percent { color: var(--color-accent); } .theme-dark .skill-progress-bar-bg { background-color: rgba(255, 255, 255, 0.1); } .theme-dark .skill-progress-bar-fill { background-color: var(--color-accent); } /** * Lessons List */ .theme-dark .skill-lessons-list { background-color: var(--color-surface); } /** * Lesson Items */ .theme-dark .lesson-item { /* Base lesson item styles */ } .theme-dark .lesson-item-current { background-color: rgba(56, 189, 248, 0.1); border-color: var(--color-accent); } .theme-dark .lesson-item-current:hover { background-color: rgba(56, 189, 248, 0.15); } .theme-dark .lesson-item-available:hover { background-color: rgba(56, 189, 248, 0.05); } .theme-dark .lesson-item-locked { /* Locked items keep default styling */ } .theme-dark .lesson-status-icon { /* Status icons use conditional background colors set via PHP classes based on lesson status (bg-green-500, bg-ocean-500, bg-gray-300), no theme override needed */ } .theme-dark .lesson-title { color: var(--color-text); } .theme-dark .lesson-item-locked .lesson-title { color: var(--color-text-muted); } .theme-dark .lesson-meta { color: var(--color-text-muted); } .theme-dark .lesson-start-button { background-color: var(--color-accent); color: #ffffff; } .theme-dark .lesson-start-button:hover { background-color: var(--color-accent-hover); } /** * Lesson Modal */ .theme-dark .lesson-modal-overlay { /* Overlay uses standard black bg-opacity, no change needed */ } .theme-dark .lesson-modal-content { background-color: var(--color-surface); } .theme-dark .lesson-modal-close { color: var(--color-text-muted); } .theme-dark .lesson-modal-close:hover { color: var(--color-text); } .theme-dark .lesson-modal-title { color: var(--color-text); } .theme-dark .lesson-modal-breadcrumb { color: var(--color-text-muted); } .theme-dark .lesson-modal-status { background-color: rgba(56, 189, 248, 0.1); } .theme-dark .lesson-modal-status-title { color: var(--color-text); } .theme-dark .lesson-modal-status-text { color: var(--color-text-muted); } .theme-dark .lesson-modal-xp { color: var(--color-text-muted); } .theme-dark .lesson-modal-button { background-color: var(--color-accent); color: #ffffff; } .theme-dark .lesson-modal-button:hover { background-color: var(--color-accent-hover); } /** * Skill Feedback Modal */ .theme-dark .feedback-modal-overlay { /* Overlay uses standard black bg-opacity, no change needed */ } .theme-dark .feedback-modal-content { background-color: var(--color-surface); } .theme-dark .feedback-modal-title { color: var(--color-text); } .theme-dark .feedback-modal-subtitle { color: var(--color-text-muted); } .theme-dark .feedback-modal-close { color: var(--color-text-muted); } .theme-dark .feedback-modal-close:hover { color: var(--color-text); } .theme-dark .feedback-modal-prompt { color: var(--color-text); } /** * Feedback Buttons */ .theme-dark .feedback-button-yes, .theme-dark .feedback-button-no { background-color: var(--color-surface); border-color: var(--color-border); } .theme-dark .feedback-button-yes:hover { border-color: #14b8a6; /* teal-500 */ background-color: rgba(20, 184, 166, 0.1); } .theme-dark .feedback-button-no:hover { border-color: #f97316; /* orange-500 */ background-color: rgba(249, 115, 22, 0.1); } .theme-dark .feedback-textarea { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .theme-dark .feedback-textarea:focus { border-color: var(--color-accent); } .theme-dark .feedback-textarea::placeholder { color: var(--color-text-muted); } .theme-dark .feedback-submit-button { background-color: var(--color-accent); color: #ffffff; } .theme-dark .feedback-submit-button:hover { background-color: var(--color-accent-hover); } /** * Feedback Success State */ .theme-dark .feedback-success { /* Success state keeps default styling with green accent */ } .theme-dark .feedback-success-title { color: var(--color-text); } .theme-dark .feedback-success-message { color: var(--color-text-muted); } .theme-dark .feedback-success-close { background-color: var(--color-accent); color: #ffffff; } .theme-dark .feedback-success-close:hover { background-color: var(--color-accent-hover); } /* ========================================================================== LESSON PAGE - DARK THEME ========================================================================== */ /** * Lesson Page Container * Full-page background with centered content */ .lesson-page-container { background-color: var(--color-bg); } /** * Lesson Content Wrapper * Mobile: Fullscreen flex container * Desktop: Max-width centered container */ .lesson-content-wrapper { /* Mobile gets full height via flex layout */ } @media (max-width: 768px) { .lesson-content-wrapper { /* Ensure proper spacing on mobile without overflow */ padding-bottom: 0.5rem; } } /** * Lesson Header (Progress Bar Section) */ .lesson-header { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } .lesson-back-btn { color: var(--color-text-muted); } .lesson-back-btn:hover { background-color: rgba(0, 0, 0, 0.05); color: var(--color-text); } .theme-dark .lesson-back-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .lesson-progress-bg { background-color: var(--color-border); } .lesson-progress-fill { background-color: var(--color-accent); } .lesson-count { color: var(--color-text-muted); } /** * Lesson Content Cards * Card-based containers for lesson content */ .lesson-card { /* Background color applied inline to use CSS variables */ /* Border radius to match Tailwind's rounded-2xl */ border-radius: 1rem; /* Soft shadow that properly follows rounded corners */ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } /* Mobile: Remove card styling for fullscreen experience */ @media (max-width: 768px) { .lesson-card { border-radius: 0; box-shadow: none; } } .theme-dark .lesson-card { /* Soft shadow for dark theme that follows rounded corners */ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } /* Mobile dark theme: Remove shadow */ @media (max-width: 768px) { .theme-dark .lesson-card { box-shadow: none; } } /** * Lesson Card Inner - Background and padding control */ .lesson-card-inner { /* No background on mobile - transparent */ background-color: transparent; } @media (min-width: 769px) { .lesson-card-inner { background-color: var(--color-surface); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .theme-dark .lesson-card-inner { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } } .theme-dark .lesson-badge { background-color: var(--color-accent-light); color: var(--color-accent); } .theme-dark .lesson-heading { color: var(--color-text); } .theme-dark .lesson-text { color: var(--color-text-muted); line-height: 1.7; } .theme-dark .lesson-tip { background-color: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.2); } /** * Lesson Feedback Divider */ .lesson-feedback-divider { border-top: 1px solid var(--color-border); } /** * Lesson Feedback Buttons */ .theme-dark .lesson-feedback-btn { color: var(--color-text-muted); } .theme-dark .lesson-feedback-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--color-accent); } .theme-dark .lesson-feedback-option { border-color: var(--color-border); color: var(--color-text); } .theme-dark .lesson-feedback-option:hover { border-color: var(--color-accent); background-color: rgba(56, 189, 248, 0.1); } .theme-dark .lesson-feedback-reason { border-color: var(--color-border); color: var(--color-text); } .theme-dark .lesson-feedback-reason:hover { border-color: var(--color-accent); background-color: rgba(56, 189, 248, 0.1); } /** * Quiz Cards */ .theme-dark .lesson-quiz-question { color: var(--color-text); } .theme-dark .lesson-quiz-option { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .theme-dark .lesson-quiz-option:hover:not(:disabled) { border-color: var(--color-accent); background-color: rgba(56, 189, 248, 0.1); } .theme-dark .lesson-quiz-option-label { border-color: var(--color-border); color: var(--color-text-muted); } /** * Match Cards */ .theme-dark .lesson-match-term, .theme-dark .lesson-match-def { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .theme-dark .lesson-match-term:hover:not(:disabled), .theme-dark .lesson-match-def:hover:not(:disabled) { border-color: var(--color-accent); background-color: rgba(56, 189, 248, 0.1); } .theme-dark .lesson-match-header { color: var(--color-text-muted); } /** * Fill in the Blank Cards */ .theme-dark .lesson-fill-input { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .theme-dark .lesson-fill-input:focus { border-color: var(--color-accent); background-color: var(--color-surface); } .theme-dark .lesson-fill-input::placeholder { color: var(--color-text-muted); } .theme-dark .lesson-fill-hint { color: var(--color-text-muted); } /** * Navigation Buttons */ .lesson-nav-prev { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .lesson-nav-prev:hover { border-color: var(--color-accent); background-color: rgba(14, 165, 233, 0.1); } .theme-dark .lesson-nav-prev:hover { background-color: rgba(56, 189, 248, 0.1); } .lesson-nav-next { background-color: var(--color-accent); color: #ffffff; } .lesson-nav-next:hover { background-color: var(--color-accent-hover); } .lesson-nav-disabled { background-color: var(--color-border); color: var(--color-text-muted); } /** * Lesson Footer - Sticky footer for navigation buttons * Transparent on mobile, white background on desktop */ @media (max-width: 768px) { .lesson-footer { background-color: transparent !important; border-color: transparent !important; } } @media (min-width: 769px) { .lesson-footer { background-color: var(--color-surface) !important; } } /** * Completion Modal */ .theme-dark .lesson-complete-modal { background-color: var(--color-surface); } .theme-dark .lesson-complete-title { color: var(--color-text); } .theme-dark .lesson-complete-text { color: var(--color-text-muted); } .theme-dark .lesson-complete-xp-badge { background-color: var(--color-accent-light); color: var(--color-accent); } /** * Hearts Warning Banner */ .theme-dark .lesson-hearts-banner { /* Keeps red background for visibility */ } /** * Out of Hearts Modal */ .theme-dark .lesson-hearts-modal { background-color: var(--color-surface); } .theme-dark .lesson-hearts-modal-title { color: var(--color-text); } .theme-dark .lesson-hearts-modal-text { color: var(--color-text-muted); } /* ========================================================================== PROFILE-SPECIFIC STYLES ========================================================================== */ /** * Profile Header * Gradient header with user information */ .theme-dark .profile-header { background: linear-gradient(135deg, #0c4a6e, #075985); /* ocean-900 to ocean-800 for dark */ } .theme-dark .profile-display-name { color: #ffffff; } .theme-dark .profile-username { color: rgba(255, 255, 255, 0.9); } /** * Profile Cards * Main cards for account overview, preferences, etc. */ .theme-dark .profile-card { background-color: var(--color-surface); border-color: var(--color-border); } /** * Profile Section Titles */ .theme-dark .profile-section-title { color: var(--color-text); } /** * Profile Labels and Text */ .theme-dark .profile-label { color: var(--color-text-muted); } .theme-dark .profile-value { color: var(--color-text); } .theme-dark .profile-description { color: var(--color-text-muted); } /** * Profile Info Rows (email, joined date, etc.) */ .theme-dark .profile-info-row { border-color: var(--color-border); } /** * Profile Stats (XP, Streak, Hearts) */ .theme-dark .profile-stat-value { color: var(--color-text); } .theme-dark .profile-stat-label { color: var(--color-text-muted); } /** * Profile Success Messages */ .theme-dark .profile-success-message { background-color: rgba(34, 197, 94, 0.15); /* green with opacity */ border-color: rgba(34, 197, 94, 0.3); } .theme-dark .profile-success-text { color: #86efac; /* green-300 for dark mode */ } .theme-dark .profile-success-icon { color: #86efac; } /** * Profile Error Messages */ .theme-dark .profile-error-message { background-color: rgba(239, 68, 68, 0.15); /* red with opacity */ border-color: rgba(239, 68, 68, 0.3); } .theme-dark .profile-error-text { color: #fca5a5; /* red-300 for dark mode */ } .theme-dark .profile-error-icon { color: #fca5a5; } /** * Profile Buttons */ .theme-dark .profile-btn-primary { background-color: var(--color-accent); color: #ffffff; } .theme-dark .profile-btn-primary:hover { background-color: var(--color-accent-hover); } .theme-dark .profile-btn-secondary { background-color: var(--color-bg); color: var(--color-text); } .theme-dark .profile-btn-secondary:hover { background-color: var(--color-border); } .theme-dark .profile-btn-disabled { background-color: var(--color-bg); color: var(--color-text-muted); } /** * Profile Input Fields */ .theme-dark .profile-input { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } /** * Profile Referral Code Badge */ .theme-dark .profile-referral-code { background-color: var(--color-accent-light); border-color: var(--color-accent); } .theme-dark .profile-referral-code-text { color: var(--color-accent); } /** * Profile Stats Divider */ .theme-dark .profile-stats-divider { border-color: var(--color-border); } /** * Profile Stat Cards (referral stats) */ .theme-dark .profile-stat-card { background-color: var(--color-bg); } /** * Profile Empty State */ .theme-dark .profile-empty-icon { color: var(--color-text-muted); } /** * Admin-specific Styles * Keep red theme for danger zone */ .theme-dark .profile-admin-card { background-color: var(--color-surface); border-color: rgba(239, 68, 68, 0.3); } .theme-dark .profile-admin-title { color: #fca5a5; /* red-300 for dark mode */ } .theme-dark .profile-admin-text { color: #fca5a5; } .theme-dark .profile-warning-box { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } .theme-dark .profile-warning-text { color: #fca5a5; } .theme-dark .profile-btn-danger { background-color: #ef4444; color: #ffffff; } .theme-dark .profile-btn-danger:hover { background-color: #dc2626; } /** * Profile Modal */ .theme-dark .profile-modal { background-color: var(--color-surface); } .theme-dark .profile-modal-title { color: #fca5a5; /* red-300 for admin modals */ } .theme-dark .profile-modal-text { color: var(--color-text); } /* ========================================================================== EMAIL PREFERENCES PAGE - DARK THEME ========================================================================== */ /** * Email Preferences Header * Header card with page title and description */ .theme-dark .email-prefs-header { background-color: var(--color-surface); } .theme-dark .email-prefs-title { color: var(--color-text); } .theme-dark .email-prefs-subtitle { color: var(--color-text-muted); } /** * Success/Error Messages */ .theme-dark .email-prefs-message-success { background-color: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; /* green-300 */ } .theme-dark .email-prefs-message-error { background-color: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; /* red-300 */ } /** * Preferences Form Container */ .theme-dark .email-prefs-form { background-color: var(--color-surface); } /** * Essential Emails Section (Disabled) */ .theme-dark .email-prefs-essential { background-color: var(--color-bg); } .theme-dark .email-prefs-checkbox-disabled { border-color: var(--color-border); color: var(--color-text-muted); } .theme-dark .email-prefs-badge-essential { color: var(--color-text-muted); } /** * Email Preference Items */ .theme-dark .email-prefs-item { border-color: var(--color-border); } .theme-dark .email-prefs-label { color: var(--color-text); } .theme-dark .email-prefs-description { color: var(--color-text-muted); } /** * Checkboxes * Ocean-themed checkboxes that work in dark mode */ .theme-dark .email-prefs-checkbox { border-color: var(--color-border); } .theme-dark .email-prefs-checkbox:checked { background-color: var(--color-accent); border-color: var(--color-accent); } /** * Save Button Footer */ .theme-dark .email-prefs-footer { background-color: var(--color-bg); border-color: var(--color-border); } .theme-dark .email-prefs-submit { background-color: var(--color-accent); color: #ffffff; } .theme-dark .email-prefs-submit:hover { background-color: var(--color-accent-hover); } /** * Back Link */ .theme-dark .email-prefs-back-link { color: var(--color-accent); } .theme-dark .email-prefs-back-link:hover { color: var(--color-accent-hover); } /* ========================================================================== NOTIFICATIONS PAGE - DARK THEME ========================================================================== */ /** * Notifications Page (Mobile Full-Screen) * Displays all user notifications in a full-page view on mobile */ /** * Page Header Section */ .theme-dark .notifications-page-title { color: var(--color-text); } .theme-dark .notifications-page-subtitle { color: var(--color-text-muted); } /** * Mark All as Read Button */ .theme-dark .notifications-mark-all-btn { background-color: var(--color-accent); color: #ffffff; } .theme-dark .notifications-mark-all-btn:hover { background-color: var(--color-accent-hover); } /** * Empty State Card */ .theme-dark .notifications-empty-state { background-color: var(--color-surface); } .theme-dark .notifications-empty-icon { color: var(--color-text-muted); } .theme-dark .notifications-empty-title { color: var(--color-text); } .theme-dark .notifications-empty-text { color: var(--color-text-muted); } /** * Notification Cards * Individual notification items with unread/read states */ .theme-dark .notification-card { background-color: var(--color-surface); border-color: var(--color-border); } .theme-dark .notification-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /** * Unread Notification Card * Visually distinct styling for unread notifications */ .theme-dark .notification-card-unread { background-color: rgba(56, 189, 248, 0.1); /* ocean-400 with low opacity */ border-color: rgba(56, 189, 248, 0.3); } /** * Notification Icon Backgrounds */ .theme-dark .notification-icon-bg-default { background-color: rgba(148, 163, 184, 0.2); /* gray with opacity */ } .theme-dark .notification-icon-bg-heart { background-color: rgba(239, 68, 68, 0.2); /* red with opacity */ } .theme-dark .notification-icon-bg-hearts-full { background-color: rgba(236, 72, 153, 0.2); /* pink with opacity */ } /** * Notification Content */ .theme-dark .notification-title { color: var(--color-text); } .theme-dark .notification-message { color: var(--color-text-muted); } .theme-dark .notification-time { color: var(--color-text-muted); } /** * Unread Indicator Dot */ .theme-dark .notification-unread-dot { background-color: var(--color-accent); } /* ========================================================================== NOTIFICATIONS MODAL (DESKTOP) - DARK THEME ========================================================================== */ /** * Notifications Dropdown Modal * Desktop-only dropdown shown from navigation bell icon */ /** * Modal Container */ .theme-dark .notifications-modal { background-color: var(--color-surface); border-color: var(--color-border); } /** * Modal Header */ .theme-dark .notifications-modal-header { background-color: rgba(255, 255, 255, 0.05); border-bottom-color: var(--color-border); } .theme-dark .notifications-modal-title { color: var(--color-text); } .theme-dark .notifications-modal-mark-all { color: var(--color-accent); } .theme-dark .notifications-modal-mark-all:hover { color: var(--color-accent-hover); } /** * Modal Items */ .theme-dark .notifications-modal-item { border-bottom-color: var(--color-border); } .theme-dark .notifications-modal-item:hover { background-color: rgba(255, 255, 255, 0.05); } .theme-dark .notifications-modal-item-unread { background-color: rgba(56, 189, 248, 0.1); } .theme-dark .notifications-modal-item-unread:hover { background-color: rgba(56, 189, 248, 0.15); } /** * Modal Item Content */ .theme-dark .notifications-modal-item-title { color: var(--color-text); } .theme-dark .notifications-modal-item-message { color: var(--color-text-muted); } .theme-dark .notifications-modal-item-time { color: var(--color-text-muted); } /** * Modal Icon Backgrounds */ .theme-dark .notifications-modal-icon-bg-default { background-color: rgba(148, 163, 184, 0.2); } .theme-dark .notifications-modal-icon-bg-heart { background-color: rgba(239, 68, 68, 0.2); } .theme-dark .notifications-modal-icon-bg-hearts-full { background-color: rgba(236, 72, 153, 0.2); } /** * Modal Empty State */ .theme-dark .notifications-modal-empty-icon { color: var(--color-text-muted); } .theme-dark .notifications-modal-empty-text { color: var(--color-text-muted); } /** * Modal Footer */ .theme-dark .notifications-modal-footer { background-color: rgba(255, 255, 255, 0.05); border-top-color: var(--color-border); } .theme-dark .notifications-modal-footer-link { color: var(--color-accent); } .theme-dark .notifications-modal-footer-link:hover { color: var(--color-accent-hover); } /* ========================================================================== MOBILE "ADD TO HOME SCREEN" BANNER - DARK THEME ========================================================================== */ /** * Mobile Banner Container */ .theme-dark #app-banner { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } .theme-dark #app-banner p { color: var(--color-text); } /** * Banner CTA Button (Add button) */ .theme-dark #app-banner-cta { background-color: var(--color-accent); } .theme-dark #app-banner-cta:hover { background-color: var(--color-accent-hover); } /** * Banner Close Button */ .theme-dark #app-banner-close { background-color: transparent; color: var(--color-text-muted); } .theme-dark #app-banner-close:hover { background-color: transparent; color: var(--color-text); } /** * Instructions Modal */ .theme-dark #app-instructions-modal > div { background-color: var(--color-surface); } .theme-dark #app-instructions-modal h3 { color: var(--color-text); } .theme-dark #app-instructions-modal p { color: var(--color-text-muted); } .theme-dark #app-instructions-modal strong { color: var(--color-text); } .theme-dark #modal-close { color: var(--color-text-muted); } .theme-dark #modal-close:hover { color: var(--color-text); } /** * Instructions Step Numbers */ .theme-dark #app-instructions-modal .bg-ocean-100 { background-color: rgba(56, 189, 248, 0.2); } .theme-dark #app-instructions-modal .text-ocean-600 { color: var(--color-accent); } /* ========================================================================== LESSON COMPLETED PAGE - DARK THEME ========================================================================== */ /** * Lesson Completed Page * * Dark theme styles for the lesson completion celebration page. * Follows the same UX/UI patterns as other dark-themed pages. */ /* Background gradient - dark themed */ .theme-dark .min-h-screen.bg-gradient-to-br { background: linear-gradient(to bottom right, var(--color-bg), rgba(15, 23, 41, 1), rgba(10, 22, 40, 1)) !important; } /* Main celebration card */ .theme-dark .min-h-screen .bg-white { background-color: var(--color-surface) !important; } /* Card heading */ .theme-dark .min-h-screen .text-ocean-900 { color: var(--color-text) !important; } /* Secondary text */ .theme-dark .min-h-screen .text-gray-600 { color: var(--color-text-muted) !important; } /* Stats grid items background */ .theme-dark .min-h-screen .bg-ocean-50 { background-color: rgba(56, 189, 248, 0.1) !important; } .theme-dark .min-h-screen .bg-orange-50 { background-color: rgba(251, 146, 60, 0.1) !important; } .theme-dark .min-h-screen .bg-pink-50 { background-color: rgba(236, 72, 153, 0.1) !important; } /* Stats text colors - using Tailwind color values for consistency */ .theme-dark .min-h-screen .text-orange-900 { color: rgba(251, 146, 60, 1) !important; /* orange-400 for dark theme */ } .theme-dark .min-h-screen .text-pink-900 { color: rgba(236, 72, 153, 1) !important; /* pink-500 for dark theme */ } /* Progress section */ .theme-dark .min-h-screen .bg-gray-50 { background-color: rgba(255, 255, 255, 0.05) !important; } .theme-dark .min-h-screen .text-gray-700 { color: var(--color-text-muted) !important; } .theme-dark .min-h-screen .bg-gray-200 { background-color: rgba(255, 255, 255, 0.1) !important; } .theme-dark .min-h-screen .text-green-600 { color: rgba(74, 222, 128, 1) !important; /* green-400 for dark theme */ } /* Feedback section */ .theme-dark .min-h-screen textarea.border-gray-200 { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } .theme-dark .min-h-screen textarea.border-gray-200:focus { border-color: var(--color-accent) !important; } .theme-dark .min-h-screen textarea::placeholder { color: var(--color-text-muted) !important; } /* Success feedback message */ .theme-dark .min-h-screen .bg-green-50 { background-color: rgba(74, 222, 128, 0.1) !important; } /* Secondary button */ .theme-dark .min-h-screen .bg-white.border-2 { background-color: transparent !important; border-color: var(--color-accent) !important; } .theme-dark .min-h-screen .bg-white.border-2:hover { background-color: rgba(56, 189, 248, 0.1) !important; } /* Text colors for lesson completed page */ .theme-dark .min-h-screen .text-ocean-600 { color: var(--color-accent) !important; }