/* ══════════════════════════════════════════════════════════════ APEX Light Mode — Ivory Elite Theme Applied via [data-theme="light"] on / ══════════════════════════════════════════════════════════════ */ /* ── Foundation ── */ [data-theme="light"] { --bg: #FAFAF8 !important; --surface: rgba(255,255,255,0.9) !important; --surface-solid: #FFFFFF !important; --surface2: rgba(245,243,240,0.95) !important; --border: rgba(0,0,0,0.08) !important; --border-hover: rgba(0,0,0,0.15) !important; --text: #1a1a2e !important; --text-dim: #555566 !important; --text-muted: #888899 !important; /* Shared dark vars → light overrides */ --void: #FAFAF8 !important; --deep: #F5F3F0 !important; --dark: #FAFAF8 !important; --base: #F5F3F0 !important; --elevated: #FFFFFF !important; --card: rgba(255,255,255,0.95) !important; --glass: rgba(0,0,0,0.03) !important; --glass-bg: rgba(255,255,255,0.85) !important; --glass-border: rgba(0,0,0,0.08) !important; /* Text overrides */ --text-primary: #1a1a2e !important; --text-secondary: #555566 !important; --text-bright: #1a1a2e !important; --text-glow: #333344 !important; /* Tobacco freedom */ --tf-secondary: #e8e4df !important; --tf-primary: #2d5a87 !important; /* Arena */ --gradient-card: linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, rgba(236, 72, 153, 0.03) 100%) !important; color-scheme: light; } /* ── Body ── */ [data-theme="light"] body, [data-theme="light"].body { background: #FAFAF8 !important; color: #1a1a2e !important; } /* Remove dark ambient glow backgrounds */ [data-theme="light"] body::before, [data-theme="light"] body::after { opacity: 0.3 !important; } /* ── Cards, Panels, Sections ── */ [data-theme="light"] .card, [data-theme="light"] .stat-card, [data-theme="light"] .dashboard-card, [data-theme="light"] .tier-card, [data-theme="light"] .pool-card, [data-theme="light"] .token-card, [data-theme="light"] .feature-card, [data-theme="light"] .game-card, [data-theme="light"] .nft-card, [data-theme="light"] .quest-card, [data-theme="light"] .position-card, [data-theme="light"] .swap-card, [data-theme="light"] .info-card, [data-theme="light"] .price-card, [data-theme="light"] .plan-card, [data-theme="light"] .aura-card, [data-theme="light"] .challenge-card, [data-theme="light"] .reward-card, [data-theme="light"] .vault-card, [data-theme="light"] .drip-card, [data-theme="light"] .strategy-card, [data-theme="light"] .deposit-card, [data-theme="light"] .yield-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03) !important; color: #1a1a2e !important; } /* ── Sections with dark backgrounds ── */ [data-theme="light"] .hero, [data-theme="light"] .hero-section, [data-theme="light"] .page-header, [data-theme="light"] .page-title-bar, [data-theme="light"] .stats-section, [data-theme="light"] .section, [data-theme="light"] .main-content, [data-theme="light"] .content, [data-theme="light"] .container, [data-theme="light"] .wrapper { color: #1a1a2e !important; } /* Hero/header gradient overrides */ [data-theme="light"] .page-title-bar { background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(99,102,241,0.06)) !important; border-bottom-color: rgba(0,0,0,0.06) !important; } /* ── Stat Cards ── */ [data-theme="light"] .stat-value { color: #1a1a2e !important; } [data-theme="light"] .stat-label { color: #666677 !important; } [data-theme="light"] .stat-icon { background: rgba(99,102,241,0.08) !important; } /* ── Typography ── */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] .section-title, [data-theme="light"] .card-title, [data-theme="light"] .card-header { color: #1a1a2e !important; } [data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] label, [data-theme="light"] .description, [data-theme="light"] .subtitle { color: #444455 !important; } /* ── Inputs & Forms ── */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .input, [data-theme="light"] .pool-input, [data-theme="light"] .stake-input, [data-theme="light"] .search-input { background: #FFFFFF !important; border-color: rgba(0,0,0,0.12) !important; color: #1a1a2e !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #999 !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: rgba(99,102,241,0.5) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important; } /* ── Buttons ── */ [data-theme="light"] .btn, [data-theme="light"] .action-btn, [data-theme="light"] .tab-btn, [data-theme="light"] .btn-sm, [data-theme="light"] .max-btn, [data-theme="light"] .challenge-btn { color: #1a1a2e !important; } [data-theme="light"] .btn-sm, [data-theme="light"] .max-btn { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.1) !important; } [data-theme="light"] .btn-sm:hover, [data-theme="light"] .max-btn:hover { background: rgba(99,102,241,0.08) !important; } /* Tab buttons */ [data-theme="light"] .tab-btn { background: transparent !important; border-color: transparent !important; } [data-theme="light"] .tab-btn.active, [data-theme="light"] .tab-btn:hover { background: rgba(99,102,241,0.08) !important; } /* Primary/CTA buttons keep their accent color */ [data-theme="light"] .btn.primary, [data-theme="light"] .primary-btn, [data-theme="light"] .cta-btn, [data-theme="light"] .apex-nav-cta { color: #FFFFFF !important; } /* ── Tables & Lists ── */ [data-theme="light"] table, [data-theme="light"] .table { color: #1a1a2e !important; } [data-theme="light"] th { background: rgba(0,0,0,0.03) !important; color: #555566 !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] td { border-color: rgba(0,0,0,0.05) !important; color: #333344 !important; } [data-theme="light"] tr:hover td { background: rgba(99,102,241,0.03) !important; } /* ── Modal / Overlays ── */ [data-theme="light"] .modal, [data-theme="light"] .modal-content, [data-theme="light"] .popup, [data-theme="light"] .overlay-content, [data-theme="light"] .dialog, [data-theme="light"] .toast { background: #FFFFFF !important; color: #1a1a2e !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important; } /* ── Badges & Tags ── */ [data-theme="light"] .badge, [data-theme="light"] .tag, [data-theme="light"] .hero-badge, [data-theme="light"] .game-feature-tag { background: rgba(99,102,241,0.08) !important; color: #4f46e5 !important; } /* ── Scrollbar ── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #F5F3F0 !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) !important; } /* ── Info Tips / Tooltips ── */ [data-theme="light"] .info-tip, [data-theme="light"] .tooltip { background: #FFFFFF !important; color: #444455 !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; } /* ── Position/Staking rows ── */ [data-theme="light"] .position-row, [data-theme="light"] .position-label { color: #555566 !important; } [data-theme="light"] .position-value { color: #1a1a2e !important; } /* ── Lock options (fleet staking) ── */ [data-theme="light"] .lock-option { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } [data-theme="light"] .lock-option:hover { border-color: rgba(99,102,241,0.3) !important; background: rgba(99,102,241,0.03) !important; } /* ── Timeline items (journey) ── */ [data-theme="light"] .timeline-item { background: #FFFFFF !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .timeline-title { color: #1a1a2e !important; } [data-theme="light"] .timeline-desc, [data-theme="light"] .timeline-time, [data-theme="light"] .timeline-source { color: #666677 !important; } /* ── Dashboard specific ── */ [data-theme="light"] .dashboard-card { background: #FFFFFF !important; } /* ── Pricing cards ── */ [data-theme="light"] .plan-card { background: #FFFFFF !important; } [data-theme="light"] .plan-card.featured, [data-theme="light"] .plan-card.popular { background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(168,85,247,0.04)) !important; border-color: rgba(99,102,241,0.2) !important; } /* ── Social page ── */ [data-theme="light"] .social-card, [data-theme="light"] .profile-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Swap page neon overrides ── */ [data-theme="light"] .swap-container, [data-theme="light"] .swap-box, [data-theme="light"] .swap-panel { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important; } /* ── OTC page ── */ [data-theme="light"] .order-card, [data-theme="light"] .trade-card, [data-theme="light"] .otc-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Affiliate ── */ [data-theme="light"] .affiliate-card, [data-theme="light"] .referral-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Subscribe ── */ [data-theme="light"] .subscribe-card, [data-theme="light"] .pricing-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Drip vault ── */ [data-theme="light"] .drip-card, [data-theme="light"] .vault-card, [data-theme="light"] .vault-panel { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Pixel Arcade ── */ [data-theme="light"] .arcade-card, [data-theme="light"] .game-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Guardians / Aura NFT ── */ [data-theme="light"] .guardian-card, [data-theme="light"] .aura-card, [data-theme="light"] .nft-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Inline styles override ── Many pages use inline background on body/divs. This catches the broadest patterns. */ [data-theme="light"] [style*="background"] { /* Can't override inline with CSS alone, handled by JS below */ } /* ── Dividers & Borders ── */ [data-theme="light"] hr, [data-theme="light"] .divider { border-color: rgba(0,0,0,0.06) !important; background: rgba(0,0,0,0.06) !important; } /* ── Code / Pre blocks ── */ [data-theme="light"] code, [data-theme="light"] pre { background: rgba(0,0,0,0.04) !important; color: #1a1a2e !important; } /* ── Links ── */ [data-theme="light"] a { color: #4f46e5; } [data-theme="light"] a:hover { color: #7c3aed; } /* ── Selection ── */ [data-theme="light"] ::selection { background: rgba(99,102,241,0.2); color: #1a1a2e; } /* ── Tobacco Freedom ── */ [data-theme="light"] .tf-hero, [data-theme="light"] .tf-section, [data-theme="light"] .tf-card, [data-theme="light"] .tf-panel, [data-theme="light"] .savings-card, [data-theme="light"] .health-card, [data-theme="light"] .milestone-card, [data-theme="light"] .community-card, [data-theme="light"] .progress-card, [data-theme="light"] .tf-container, [data-theme="light"] .dashboard-section, [data-theme="light"] .dashboard-grid, [data-theme="light"] .dashboard-main, [data-theme="light"] .breathing-exercise, [data-theme="light"] .breath-circle, [data-theme="light"] .checkin-section, [data-theme="light"] .checkin-option, [data-theme="light"] .sidebar-card, [data-theme="light"] .badge-section, [data-theme="light"] .badge-card, [data-theme="light"] .badge-grid, [data-theme="light"] .stats-row, [data-theme="light"] .stat-box, [data-theme="light"] .tabs-nav, [data-theme="light"] .tab-content, [data-theme="light"] .settings-modal, [data-theme="light"] .settings-content, [data-theme="light"] .timeline-section, [data-theme="light"] .connect-prompt, [data-theme="light"] .tf-footer, [data-theme="light"] .user-stats, [data-theme="light"] .streak-display, [data-theme="light"] .timer-display, [data-theme="light"] .wallet-list, [data-theme="light"] .wallet-item { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } [data-theme="light"] .badge-status.locked { color: #888899 !important; } [data-theme="light"] .badge-rarity { color: #1a1a2e !important; } /* ── OTC specific ── */ [data-theme="light"] .otc-container, [data-theme="light"] .order-book, [data-theme="light"] .order-form, [data-theme="light"] .order-row, [data-theme="light"] .trade-history, [data-theme="light"] .market-stats, [data-theme="light"] .depth-chart { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } /* ── Dashboard ── */ [data-theme="light"] .dashboard-container, [data-theme="light"] .wallet-overview, [data-theme="light"] .activity-feed, [data-theme="light"] .portfolio-section, [data-theme="light"] .holdings-list, [data-theme="light"] .transaction-row, [data-theme="light"] .chart-container { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } /* ── Guardians/Aura ── */ [data-theme="light"] .guardian-grid, [data-theme="light"] .aura-section, [data-theme="light"] .companion-card, [data-theme="light"] .mint-section, [data-theme="light"] .collection-grid { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } /* ── Counters / Timers ── */ [data-theme="light"] .timer-value, [data-theme="light"] .counter-value { color: #1a1a2e !important; } [data-theme="light"] .timer-label, [data-theme="light"] .timer-unit, [data-theme="light"] .counter-label { color: #666677 !important; } /* ── Particle / Decoration opacity reduce ── */ [data-theme="light"] .particle, [data-theme="light"] .glow, [data-theme="light"] .ambient { opacity: 0.15 !important; } /* ── Footer ── */ [data-theme="light"] footer, [data-theme="light"] .footer { background: #F5F3F0 !important; color: #555566 !important; border-color: rgba(0,0,0,0.06) !important; } /* ── Reactor containers ── */ [data-theme="light"] .reactor-container { opacity: 0.4; } /* ── Kill ALL neon / bright green text in light mode ── */ [data-theme="light"] [style*="color: #00ff"], [data-theme="light"] [style*="color:#00ff"], [data-theme="light"] [style*="color: #0f0"], [data-theme="light"] [style*="color:#0f0"], [data-theme="light"] [style*="color: rgb(0, 255"], [data-theme="light"] [style*="color: #22c55e"], [data-theme="light"] [style*="color:#22c55e"], [data-theme="light"] [style*="color: #34d399"], [data-theme="light"] [style*="color:#34d399"], [data-theme="light"] [style*="color: #00D4AA"], [data-theme="light"] [style*="color:#00D4AA"], [data-theme="light"] [style*="color: #10b981"], [data-theme="light"] [style*="color:#10b981"], [data-theme="light"] [style*="color: #4ecdc4"], [data-theme="light"] [style*="color:#4ecdc4"] { color: #4f46e5 !important; } /* ── Neon color var overrides ── */ [data-theme="light"] { --neon-green: #059669 !important; --neon-cyan: #0891b2 !important; --neon-pink: #be185d !important; --neon-purple: #7c3aed !important; --neon-blue: #2563eb !important; --neon-yellow: #b45309 !important; --neon-orange: #c2410c !important; --primary: #4f46e5 !important; --secondary: #7c3aed !important; --accent: #b45309 !important; --success: #059669 !important; --danger: #dc2626 !important; --green: #059669 !important; --green-glow: rgba(5,150,105,0.15) !important; --cyan: #0891b2 !important; --gold: #b45309 !important; --gold-glow: rgba(180,83,9,0.15) !important; --red: #dc2626 !important; --accent-glow: rgba(79,70,229,0.15) !important; --glow-cyan: rgba(8,145,178,0.2) !important; --glow-green: rgba(5,150,105,0.2) !important; --glow-pink: rgba(190,24,93,0.2) !important; --glow-yellow: rgba(180,83,9,0.2) !important; } /* ── Swap page: kill neon glow, dark panels ── */ [data-theme="light"] .swap-interface, [data-theme="light"] .token-select, [data-theme="light"] .token-list, [data-theme="light"] .slippage-panel, [data-theme="light"] .route-info, [data-theme="light"] .price-impact, [data-theme="light"] .pool-stats, [data-theme="light"] .pool-list, [data-theme="light"] .lp-panel { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } /* ── Tobacco Freedom: dark section backgrounds ── */ [data-theme="light"] .breath-exercise, [data-theme="light"] .craving-tool, [data-theme="light"] .quit-timer, [data-theme="light"] .savings-tracker, [data-theme="light"] .health-timeline, [data-theme="light"] .community-section, [data-theme="light"] .motivation-section, [data-theme="light"] .journal-section, [data-theme="light"] .support-section { background: #FFFFFF !important; color: #1a1a2e !important; } /* ── Arena: game panels, score displays ── */ [data-theme="light"] .game-area, [data-theme="light"] .game-panel, [data-theme="light"] .score-display, [data-theme="light"] .game-over, [data-theme="light"] .leaderboard, [data-theme="light"] .game-controls { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a2e !important; } /* ── Journey: era sections ── */ [data-theme="light"] .era-section, [data-theme="light"] .era-card, [data-theme="light"] .milestone-item, [data-theme="light"] .quest-item { background: #FFFFFF !important; border-color: rgba(0,0,0,0.06) !important; color: #1a1a2e !important; } /* ── Catch-all: any div/section with dark inline bg (JS handles rest) ── */ [data-theme="light"] .apex-light-active, [data-theme="light"] body.apex-light-active { background: #FAFAF8 !important; } [data-theme="light"] body.apex-light-active::before { background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.03) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(168,85,247,0.02) 0%, transparent 50%) !important; } /* ── Gradient text: ensure readability ── */ [data-theme="light"] [style*="-webkit-text-fill-color: transparent"], [data-theme="light"] [style*="background-clip: text"] { filter: saturate(1.3) brightness(0.7) !important; } /* ── Box shadows: soften dark glows ── */ [data-theme="light"] [style*="box-shadow"] { filter: none !important; } /* ── SVG / icon brightness ── */ [data-theme="light"] svg { filter: none !important; } /* ── P21 Token Lottery ── */ [data-theme="light"] .p21-card, [data-theme="light"] .p21-section, [data-theme="light"] .p21-info-item, [data-theme="light"] .p21-announce { background: #FFFFFF !important; border-color: rgba(168,85,247,0.15) !important; color: #1a1a2e !important; } [data-theme="light"] .p21-subtitle, [data-theme="light"] .p21-stat-label, [data-theme="light"] .p21-info-label { color: #666677 !important; } [data-theme="light"] .p21-stat-value { color: #7c3aed !important; } [data-theme="light"] .p21-info-value { color: #1a1a2e !important; } /* ── Smooth transition for theme change ── */ [data-theme="light"] * { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease; }