@import "./global.css"; /* ===================================================================== WeCatchAI - Light Homepage Theme Scoped to .light-homepage (applied to BOTH and ) Overrides dark theme in styles.css without affecting any other page. ROOT CAUSES FIXED: 1. html.light-homepage targets directly (no :has() needed) 2. @supports iOS block uses html.light-homepage 3. .section no longer set to transparent (was leaking dark body) 4. .hero gets explicit light background 5. @media (max-width:768px) block counters ALL mobile dark overrides ===================================================================== */ /* ── 1. Base backgrounds - bulletproof across all browsers ───────────── */ html.light-homepage { background: #f8faff !important; background-color: #f8faff !important; } body.light-homepage { background: #f8faff !important; background-color: #f8faff !important; color: #1e293b !important; } /* ── NUCLEAR DEFAULT: Force every descendant text dark. Explicit selectors below (buttons, active tabs, colored badges) override this via higher specificity. This covers ALL dynamically-rendered JS content automatically - no need to enumerate individual class names. DO NOT remove this rule. ──────────────────────────────────────────── */ body.light-homepage * { color: #1e293b !important; } /* iOS Safari override */ @supports (-webkit-touch-callout: none) { html.light-homepage, body.light-homepage { background: #f8faff !important; background-color: #f8faff !important; } } /* Hide the Three.js 3D canvas - use both html and body for max coverage */ html.light-homepage #three-canvas, body.light-homepage #three-canvas { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ── 2. Section backgrounds - all explicit, none transparent ─────────── */ /* Default: every .section gets the page background */ body.light-homepage .section { background: #f8faff !important; background-image: none !important; } /* Hero - was missing, causing dark bleed-through */ body.light-homepage .hero { background: #f8faff !important; background-image: none !important; } /* Section-specific alternating backgrounds */ body.light-homepage #how-it-works { background: #ffffff !important; } body.light-homepage #our-mission, body.light-homepage .mission-section { background: #eff6ff !important; background-image: none !important; border-top: 1px solid #dbeafe !important; border-bottom: 1px solid #dbeafe !important; } body.light-homepage #explore-submissions, body.light-homepage .recent-section { background: #f1f5f9 !important; } body.light-homepage #leaderboard { background: #ffffff !important; } body.light-homepage #rewards { background: #f8faff !important; } /* Containers should be transparent (they sit inside the colored sections) */ body.light-homepage .container { background: transparent !important; } /* ── 3. Navigation ───────────────────────────────────────────────────── */ body.light-homepage .nav { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } body.light-homepage .nav-title { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #2563eb !important; color: #2563eb !important; } body.light-homepage .nav-tagline { color: #64748b !important; } body.light-homepage .nav-link { color: #475569 !important; } body.light-homepage .nav-link:hover { color: #2563eb !important; } body.light-homepage .nav-link:focus-visible, body.light-homepage .mobile-nav-link:focus-visible { outline-color: rgba(37, 99, 235, 0.5) !important; } body.light-homepage .btn-primary { background: #2563eb !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important; } body.light-homepage .btn-primary:hover { background: #1d4ed8 !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important; transform: translateY(-1px) !important; } body.light-homepage .btn-secondary { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; } body.light-homepage .btn-secondary:hover { background: #f1f5f9 !important; } /* Hamburger bars (legacy class - kept harmless) */ body.light-homepage .hamburger-line { background: #1e293b !important; } /* Mobile menu toggle button box */ body.light-homepage .mobile-menu-toggle { border: 2px solid #cbd5e1 !important; background: transparent !important; } body.light-homepage .mobile-menu-toggle:hover { background: #f1f5f9 !important; border-color: #2563eb !important; } body.light-homepage .mobile-menu-toggle.active { background: #eff6ff !important; border-color: #2563eb !important; } /* The three hamburger lines (bare tags inside the toggle, no class) */ body.light-homepage .mobile-menu-toggle span { background: #1e293b !important; box-shadow: none !important; } /* Mobile slide-out menu */ body.light-homepage .mobile-menu { background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; } body.light-homepage .mobile-nav-link { color: #475569 !important; } body.light-homepage .mobile-nav-link:hover { color: #2563eb !important; background: #f1f5f9 !important; } body.light-homepage .mobile-signin-btn, body.light-homepage .mobile-login-btn, body.light-homepage #mobileSignInBtn, body.light-homepage #mobileSignInButton, body.light-homepage #mobileTopSignIn { background: #2563eb !important; color: #ffffff !important; } /* User dropdown */ body.light-homepage .user-menu-trigger { color: #1e293b !important; } body.light-homepage .user-name-display { color: #1e293b !important; } body.light-homepage .dropdown-arrow { color: #64748b !important; } body.light-homepage .user-dropdown-menu { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important; } body.light-homepage .dropdown-item { color: #374151 !important; } body.light-homepage .dropdown-item:hover { background: #f1f5f9 !important; color: #2563eb !important; } body.light-homepage .dropdown-divider { border-color: #e2e8f0 !important; } body.light-homepage .dropdown-name { color: #0f172a !important; } body.light-homepage .dropdown-subtitle { color: #64748b !important; } /* Notification bell */ body.light-homepage .notification-bell-btn { color: #475569 !important; } body.light-homepage .notification-bell-btn:hover { color: #2563eb !important; } body.light-homepage .notification-panel { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important; } body.light-homepage .notification-header { border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; } body.light-homepage .notification-header h3 { color: #0f172a !important; } /* ── 4. Hero content ─────────────────────────────────────────────────── */ body.light-homepage .hero-title { color: #0f172a !important; } body.light-homepage .gradient-text { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #2563eb !important; color: #2563eb !important; } body.light-homepage .highlight-cyan { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; } body.light-homepage .hero-subtitle { color: #475569 !important; } body.light-homepage .hero-logo-section { color: #1e293b !important; } /* ── 5. Section titles (all sections) ────────────────────────────────── */ body.light-homepage .section-title { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; } body.light-homepage .explore-title-row .section-title { -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; } /* ── 6. Analysis / Detection form card ───────────────────────────────── */ body.light-homepage .analysis-form, body.light-homepage .analysis-form.primary-card { background: #ffffff !important; background-image: none !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.light-homepage .form-title { color: #0f172a !important; } body.light-homepage .form-reward-subtitle { color: #475569 !important; } body.light-homepage .form-reward-subtitle strong { color: #2563eb !important; } body.light-homepage .form-subtitle { color: #64748b !important; } /* Detection tabs */ body.light-homepage .detection-tabs { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 4px !important; } body.light-homepage .detection-tab { color: #64748b !important; background: transparent !important; border-radius: 7px !important; } body.light-homepage .detection-tab:hover { color: #2563eb !important; background: rgba(37, 99, 235, 0.06) !important; } body.light-homepage .detection-tab.active { background: #2563eb !important; color: #ffffff !important; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important; } /* Link input */ body.light-homepage .hero-link-input, body.light-homepage .form-input { background: #f8faff !important; border: 1.5px solid #e2e8f0 !important; color: #1e293b !important; } body.light-homepage .hero-link-input:focus, body.light-homepage .form-input:focus { border-color: #2563eb !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } body.light-homepage .hero-link-input::placeholder, body.light-homepage .form-input::placeholder { color: #94a3b8 !important; } /* Submit button */ body.light-homepage .hero-submit-btn, body.light-homepage .submit-btn { background: #2563eb !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important; } body.light-homepage .hero-submit-btn:hover, body.light-homepage .submit-btn:hover { background: #1d4ed8 !important; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important; transform: translateY(-1px) !important; } body.light-homepage .hero-submit-btn:disabled, body.light-homepage .submit-btn:disabled { background: #cbd5e1 !important; box-shadow: none !important; } /* Text textarea */ body.light-homepage .text-editor-wrapper textarea, body.light-homepage #textDetectionInput { background: #f8faff !important; border: 1.5px solid #e2e8f0 !important; color: #1e293b !important; } body.light-homepage .text-editor-wrapper textarea:focus, body.light-homepage #textDetectionInput:focus { border-color: #2563eb !important; background: #ffffff !important; } body.light-homepage .text-editor-footer { background: #f1f5f9 !important; border-top: 1px solid #e2e8f0 !important; color: #64748b !important; } /* Voting / Justification modal form elements */ body.light-homepage .modal-form-panel textarea, body.light-homepage .modal-content textarea { background: #f8faff !important; border: 1.5px solid #e2e8f0 !important; color: #1e293b !important; } body.light-homepage .modal-form-panel textarea::placeholder, body.light-homepage .modal-content textarea::placeholder { color: #94a3b8 !important; } body.light-homepage .modal-form-panel textarea:focus, body.light-homepage .modal-content textarea:focus { border-color: #2563eb !important; background: #ffffff !important; } body.light-homepage .modal-form-panel input:not([type="range"]):not([type="checkbox"]), body.light-homepage .modal-form-panel select { background: #f8faff !important; border: 1.5px solid #e2e8f0 !important; color: #1e293b !important; } body.light-homepage .modal-form-panel input:not([type="range"]):not([type="checkbox"])::placeholder { color: #94a3b8 !important; } /* ── aiJustificationModal - full light theme ─────────────────────────── */ /* Outer shell: replace dark gradient with light slate gradient */ body.light-homepage .modal-split-view { background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important; } /* Left panel: white card */ body.light-homepage .modal-content-preview { background: #ffffff !important; border-right-color: #e2e8f0 !important; } body.light-homepage .modal-content-preview, body.light-homepage .modal-content-preview * { color: #1e293b !important; } body.light-homepage .modal-content-preview .preview-content-title { color: #0f172a !important; } body.light-homepage .modal-content-preview a, body.light-homepage .modal-content-preview .preview-url { color: #2563eb !important; } body.light-homepage .modal-content-preview .preview-url:hover { color: #1d4ed8 !important; } body.light-homepage .preview-label { color: #2563eb !important; } body.light-homepage .preview-placeholder { background: #f1f5f9 !important; color: #94a3b8 !important; } body.light-homepage .placeholder-text { color: #94a3b8 !important; } body.light-homepage .preview-score-badge { background: #f1f5f9 !important; border-color: #e2e8f0 !important; } body.light-homepage .preview-score-badge .score-label { color: #64748b !important; } body.light-homepage .preview-score-badge .score-value { color: #2563eb !important; } body.light-homepage .preview-score-badge .score-value.high-score { color: #ef4444 !important; } body.light-homepage .preview-score-badge .score-value.medium-score { color: #f59e0b !important; } /* Right panel: slate background, dark text */ body.light-homepage .modal-form-panel *:not(textarea):not(input):not(select):not(option) { color: #1e293b !important; } body.light-homepage .modal-form-panel h3, body.light-homepage .modal-form-panel h4 { color: #0f172a !important; } /* #userRatingStatus - override inline dark box */ body.light-homepage #userRatingStatus { background: #eff6ff !important; border-color: #bfdbfe !important; } body.light-homepage #currentRatingDisplay { color: #16a34a !important; } body.light-homepage #awardEligibilityStatus { color: #64748b !important; } body.light-homepage #progressToSeven>div:first-child { color: #64748b !important; } /* Progress bar track - inline rgba(255,255,255,0.2) → light gray */ body.light-homepage #progressToSeven>div:last-child { background: #e2e8f0 !important; } /* community-guidelines-warning - inline dark red box → light red */ body.light-homepage .community-guidelines-warning { background: #fef2f2 !important; border-color: #fecaca !important; } body.light-homepage .community-guidelines-warning * { color: #991b1b !important; } /* Restore form inputs to dark-on-light */ body.light-homepage .modal-form-panel textarea, body.light-homepage .modal-form-panel input:not([type="range"]):not([type="checkbox"]), body.light-homepage .modal-form-panel select { color: #1e293b !important; } body.light-homepage .char-count { color: #64748b !important; } /* Word / coherence counters - inline rgba(255,255,255,0.6) → muted slate */ body.light-homepage #wordCounter, body.light-homepage #coherenceCounter { color: #94a3b8 !important; } /*