/* ========================================================================== EarnBean — LIGHT THEME OVERRIDE (day mode) Loaded LAST (after modern.css + premium-upgrade.css) so every rule here wins the cascade. body.light-theme is applied by custom-script.js and kept in sync with the server-side body.scheme-light class. ========================================================================== */ /* Anti-flash: is set inline in before first paint — paint the page background instantly so there is no dark flash while deferred JS applies the full body classes. */ html[data-ea-scheme="light"] { background: #eef1f6; } html[data-ea-scheme="light"] body { background: #eef1f6 !important; color: #0f172a; } /* ---------- Base surfaces ---------- */ body.light-theme { --bg: #eef1f6; --bg-soft: #f7f9fc; --surface: #ffffff; --surface-2: #f4f6fa; --surface-3: #e9edf3; --border: rgba(15, 23, 42, .12); --border-strong: rgba(9, 193, 111, .55); --text: #0f172a; --text-muted: #5b6472; --text-dim: #8a93a3; --shadow: 0 20px 45px -15px rgba(15, 23, 42, .16); --glow: 0 0 20px rgba(9, 193, 111, .28); /* Legacy aliases used across old blades */ --cardBg: #ffffff; --cardBgGradient: linear-gradient(165deg, #ffffff, #f4f6fa); --cardBorderBg: rgba(15, 23, 42, .12); --bodyBg: #eef1f6; --bodybg: #eef1f6; --topTransactionsBg: #ffffff; --topTransactionsBorderBg: rgba(15, 23, 42, .12); --footerBg: #f7f9fc; --sidebarBg: #ffffff; --timerBgColor: #ffffff; --tableBackground: #ffffff; --tableHeadBg: transparent; --tableTdBorder: rgba(15, 23, 42, .12); --featuredCardBg: #f4f6fa; --input-dark-bg: #f4f6fa; /* Premium-layer glass tokens: light equivalents */ --ea-glass: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(244, 246, 250, .8)); --ea-glass-2: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(240, 244, 249, .85)); --ea-inset: inset 0 1px 0 rgba(255, 255, 255, .9); --ea-shadow: 0 20px 45px -18px rgba(15, 23, 42, .18); --ea-glow: 0 12px 40px -12px rgba(9, 193, 111, .25); /* Premium-upgrade dark tokens: light equivalents */ --eb-obsidian: #eef1f6; --eb-dark: #f7f9fc; --eb-card: #ffffff; --eb-card-hover: #f4f6fa; --eb-card-border: rgba(15, 23, 42, .1); background: #eef1f6 !important; color: #0f172a !important; background-image: radial-gradient(at 15% 15%, rgba(9, 193, 111, .05) 0px, transparent 50%), radial-gradient(at 85% 85%, rgba(0, 176, 255, .04) 0px, transparent 50%) !important; background-attachment: fixed !important; } /* ---------- Body decoration layers ---------- */ body.light-theme::before { background: radial-gradient(38vw 38vw at 12% 8%, rgba(9, 193, 111, .1), transparent 62%), radial-gradient(34vw 34vw at 88% 18%, rgba(255, 193, 7, .05), transparent 62%), radial-gradient(30vw 30vw at 70% 78%, rgba(74, 222, 128, .06), transparent 62%), radial-gradient(26vw 26vw at 25% 70%, rgba(9, 193, 111, .04), transparent 60%) !important; } body.light-theme::after { background: radial-gradient(circle, rgba(9, 193, 111, .05), transparent 65%) !important; } /* ---------- Navbar ---------- */ body.light-theme .navbar, body.light-theme .navbar-custom, body.light-theme header.navbar { background: rgba(255, 255, 255, .88) !important; border-bottom: 1px solid rgba(15, 23, 42, .08) !important; box-shadow: 0 8px 30px -14px rgba(15, 23, 42, .18) !important; } body.light-theme .navbar::after { background: linear-gradient(90deg, transparent, rgba(9, 193, 111, .45), transparent) !important; } body.light-theme .navbar .text-white, body.light-theme .navbar .nav-link, body.light-theme .navbar a, body.light-theme .navbar button, body.light-theme .navbar span { color: #0f172a !important; } body.light-theme .navbar .my-rounded-btn { background: rgba(15, 23, 42, .05) !important; border-color: rgba(15, 23, 42, .1) !important; color: #0f172a !important; } /* ---------- Sidebar ---------- */ body.light-theme .user-sidebar { background: rgba(255, 255, 255, .94) !important; border-right: 1px solid rgba(15, 23, 42, .08) !important; } body.light-theme .user-sidebar .nav-label, body.light-theme .user-sidebar a, body.light-theme .user-sidebar span { color: #334155 !important; } body.light-theme .user-sidebar .active, body.light-theme .user-sidebar .active span { color: #079f5b !important; } /* ---------- Cards & surfaces (beats premium !important) ---------- */ body.light-theme .offer-card, body.light-theme .featured-cards, body.light-theme .fc-offer-hcard, body.light-theme .fc-offer-row, body.light-theme .fc-partner-card, body.light-theme .stat-box, body.light-theme .pay-box, body.light-theme .part-box, body.light-theme .fc-offer-card, body.light-theme .ea-streak-wrap, body.light-theme .accordion-item.ea-faq-item, body.light-theme .cc-live-panel, body.light-theme .live-feed-item, body.light-theme .summary-card, body.light-theme .top-transactions, body.light-theme .winner-ticker, body.light-theme .ticker, body.light-theme .card, body.light-theme .auth-card, body.light-theme .cashout-card, body.light-theme .podium-box { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 246, 250, .85)) !important; border-color: rgba(15, 23, 42, .1) !important; box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important; color: #0f172a !important; } body.light-theme .podium-box.rank-1 { background: linear-gradient(180deg, rgba(255, 214, 0, .18), #ffffff 100%) !important; } /* Balance/XP summary card: keep the branded green tint, on light */ body.light-theme .summary-card.gradient { background: linear-gradient(120deg, rgba(9, 193, 111, .12), rgba(9, 193, 111, .04) 45%, rgba(56, 225, 255, .05)), linear-gradient(180deg, #ffffff, #f4f6fa) !important; border: 1px solid rgba(9, 193, 111, .35) !important; box-shadow: 0 18px 50px -18px rgba(9, 193, 111, .3), inset 0 1px 0 rgba(255, 255, 255, .9) !important; color: #0f172a !important; } body.light-theme .summary-card.gradient .text-white { color: #0f172a !important; } /* ---------- Text ---------- */ body.light-theme .fc-offer-title, body.light-theme .fc-offer-htitle, body.light-theme .fc-section-title, body.light-theme .featured-title, body.light-theme .stat-num, body.light-theme .summary-card b, body.light-theme .offerwall-title, body.light-theme .fc-offer-title-row, body.light-theme h1, body.light-theme h2, body.light-theme h3, body.light-theme h4, body.light-theme h5, body.light-theme h6, body.light-theme .text-white { color: #0f172a !important; } body.light-theme .fc-offer-desc, body.light-theme .fc-offer-hdesc, body.light-theme .fc-section-sub, body.light-theme .text-muted { color: #5b6472 !important; } body.light-theme .text-white-50 { color: #5b6472 !important; } /* ---------- Chips / badges / payout pills ---------- */ body.light-theme .fc-cat-chip, body.light-theme .fc-dev-badge { background: rgba(15, 23, 42, .05) !important; border-color: rgba(15, 23, 42, .12) !important; color: #5b6472 !important; } body.light-theme .fc-offer-payout, body.light-theme .fc-offer-hpayout { color: #079f5b !important; } /* ---------- Filter bar & tabs ---------- */ body.light-theme .filter-tab-bar, body.light-theme .earn-filter-sticky { background: rgba(255, 255, 255, .9) !important; border: 1px solid rgba(15, 23, 42, .1) !important; } body.light-theme .filter-tab-btn, body.light-theme .device-chip { background: transparent !important; color: #5b6472 !important; } body.light-theme .filter-tab-btn:hover, body.light-theme .device-chip:hover { background: rgba(15, 23, 42, .05) !important; color: #0f172a !important; } body.light-theme .filter-tab-btn.active, body.light-theme .device-chip.active { background: linear-gradient(135deg, #00e676, #00b34a) !important; color: #000 !important; } /* ---------- Inputs (always light surfaces) ---------- */ body.light-theme .form-control, body.light-theme .form-select, body.light-theme .nice-select .current, body.light-theme .offer-search-box input { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, .14) !important; color: #0f172a !important; } body.light-theme .form-control:focus, body.light-theme .form-select:focus, body.light-theme .offer-search-box input:focus { border-color: rgba(9, 193, 111, .55) !important; box-shadow: 0 0 0 3px rgba(9, 193, 111, .15) !important; } body.light-theme .form-control::placeholder, body.light-theme .offer-search-box input::placeholder { color: #8a93a3 !important; } /* ---------- Dropdowns / modals ---------- */ body.light-theme .dropdown-menu { background: #ffffff !important; border-color: rgba(15, 23, 42, .12) !important; box-shadow: 0 20px 45px -15px rgba(15, 23, 42, .2) !important; } body.light-theme .dropdown-item { color: #0f172a !important; } body.light-theme .dropdown-item:hover { background: rgba(9, 193, 111, .08) !important; } body.light-theme .modal-content { background: linear-gradient(145deg, #ffffff, #f4f6fa) !important; border: 1px solid rgba(15, 23, 42, .1) !important; color: #0f172a !important; box-shadow: 0 25px 80px rgba(15, 23, 42, .3) !important; } body.light-theme .modal-header, body.light-theme .modal-footer { border-color: rgba(15, 23, 42, .08) !important; } body.light-theme .modal-content .text-white { color: #0f172a !important; } /* ---------- Offerwall partner cards: keep brand accents readable ---------- */ body.light-theme .fc-partner-card:hover { background: linear-gradient(145deg, #ffffff, #f4f6fa) !important; box-shadow: 0 20px 45px rgba(15, 23, 42, .15) !important; } /* ---------- Mobile bottom bar ---------- */ body.light-theme .mobile-bottom-bar { background: rgba(255, 255, 255, .95) !important; border: 1px solid rgba(15, 23, 42, .1) !important; box-shadow: 0 12px 34px rgba(15, 23, 42, .18) !important; } body.light-theme .mobile-bottom-item { color: #5b6472 !important; } body.light-theme .mobile-bottom-item.active, body.light-theme .mobile-bottom-item.active span { color: #079f5b !important; } /* ---------- Tables ---------- */ body.light-theme table { color: #0f172a; } body.light-theme .table td, body.light-theme .table th { border-color: rgba(15, 23, 42, .1) !important; color: #0f172a !important; } body.light-theme .table thead th { color: #5b6472 !important; } /* ---------- Footers ---------- */ body.light-theme footer, body.light-theme .footer { background: #f7f9fc !important; border-top: 1px solid rgba(15, 23, 42, .08) !important; color: #334155 !important; } /* ---------- Scrollbar ---------- */ body.light-theme ::-webkit-scrollbar-track { background: #eef1f6; } body.light-theme ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 999px; } body.light-theme ::-webkit-scrollbar-thumb:hover { background: #079f5b; } /* ---------- Splash (page-load flash) ---------- */ body.light-theme .splash { background: radial-gradient(1100px 520px at 50% 32%, rgba(9, 193, 111, .08), transparent 62%), #eef1f6 !important; } /* ---------- Misc glass tiles that stayed dark ---------- */ body.light-theme .trustpilot-badge { background: rgba(255, 255, 255, .85) !important; border-color: rgba(9, 193, 111, .35) !important; } body.light-theme .pwa-install-pill { background: linear-gradient(135deg, #ffffff, #f4f6fa) !important; color: #0f172a !important; border-color: rgba(9, 193, 111, .4) !important; } /* ---------- Page-scoped white-text classes (earn/withdraw/rewards/bonus/leaderboard/spin) ---------- */ /* Withdraw: cashout cards are white surfaces in light mode — dark text */ body.light-theme .cashout-name, body.light-theme .cashout-card .cashout-name { color: #0f172a !important; } body.light-theme .calc-amount { color: #0f172a !important; } /* Levels page */ body.light-theme .level-num { color: #0f172a !important; } /* Leaderboard: podium name divs + table user names use var(--eb-heading) now; chips stay white-on-gradient */ body.light-theme .prize-chip { background: rgba(15, 23, 42, .06) !important; border-color: rgba(15, 23, 42, .14) !important; color: #334155 !important; } body.light-theme .rank-1 .podium-badge, body.light-theme .rank-2 .podium-badge, body.light-theme .rank-3 .podium-badge { color: #0f172a !important; } body.light-theme .leader-row-highlight td, body.light-theme .leader-row-highlight span { color: #0f172a !important; } body.light-theme .table tbody td { color: #334155 !important; } /* Bonus page: promo input already tokenized; pill hover — mint pill gets dark text */ body.light-theme .social-pill:hover { color: #0f172a !important; } /* Spin wheel segments sit on colored wedges — white text stays, but give subtle dark outline for light page contrast */ body.light-theme .spin-segment span { text-shadow: 0 1px 2px rgba(0, 0, 0, .55) !important; } /* Rewards quick cards + hero H1/H4 use var(--eb-heading); map heading token to dark text */ body.light-theme { --eb-heading: #0f172a; --eb-muted: #5b6472; } html[data-ea-scheme="light"] body { --eb-heading: #0f172a; }