/* ============================================================ LIGHT THEME OVERRIDES Applied when ============================================================ */ html[data-theme="light"] { --bg: #f0f4f8; --bg-card: #ffffff; --bg-card2: #f5f8fc; --border: rgba(0,128,96,.2); --border-hover:rgba(0,128,96,.55); --text: #1a2332; --muted: #5a6a80; --green-glow: rgba(0,128,96,.2); } /* ── Body background mesh (lighter in light mode) ── */ html[data-theme="light"] body::before { background: radial-gradient(ellipse 80% 60% at 15% 10%, rgba(0,128,96,.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 85% 80%, rgba(0,128,96,.04) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(245,197,66,.02) 0%, transparent 60%); } /* ── Navbar ── */ html[data-theme="light"] .fc-nav { background: #ffffff; border-bottom: 1px solid rgba(0,128,96,.15); box-shadow: 0 2px 16px rgba(0,0,0,.06); } html[data-theme="light"] .fc-nav__links li a { color: #4a5a6a; } html[data-theme="light"] .fc-nav__links li a:hover, html[data-theme="light"] .fc-nav__links li a.active { color: #1a2332; background: rgba(0,128,96,.08); } html[data-theme="light"] .fc-nav__toggle, html[data-theme="light"] .fc-nav__close-mobile { border-color: rgba(0,128,96,.25); color: #4a5a6a; } html[data-theme="light"] .fc-nav__toggle:hover, html[data-theme="light"] .fc-nav__close-mobile:hover { border-color: #008060; color: #1a2332; } /* ── Mobile Drawer ── */ html[data-theme="light"] .fc-nav__drawer { background: rgba(0,0,0,.3); } html[data-theme="light"] .fc-nav__drawer-panel { background: #ffffff; border-left: 1px solid rgba(0,128,96,.15); } html[data-theme="light"] .fc-nav__drawer-links li a { color: #4a5a6a; } html[data-theme="light"] .fc-nav__drawer-links li a:hover, html[data-theme="light"] .fc-nav__drawer-links li a.active { color: #1a2332; background: rgba(0,128,96,.08); } /* ── Theme toggle button ── */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid rgba(0,128,96,.35); border-radius: 8px; cursor: pointer; color: #a0b0c8; font-size: 1rem; flex-shrink: 0; transition: all .2s; padding: 0; } .theme-toggle-btn:hover { border-color: #008060; color: #fff; background: rgba(0,128,96,.1); } html[data-theme="light"] .theme-toggle-btn { border-color: rgba(0,128,96,.3); color: #5a6a80; } html[data-theme="light"] .theme-toggle-btn:hover { border-color: #008060; color: #008060; background: rgba(0,128,96,.08); } /* ── Stats number gradient fix for light mode ── */ html[data-theme="light"] .fc-stats__number { background: linear-gradient(135deg, #1a2332 0%, #008060 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Form inputs in light mode ── */ html[data-theme="light"] .ct-form-group input, html[data-theme="light"] .ct-form-group textarea { background: #f8fafc; border-color: rgba(0,128,96,.2); color: #1a2332; } html[data-theme="light"] .ct-form-group input:focus, html[data-theme="light"] .ct-form-group textarea:focus { background: #ffffff; border-color: rgba(0,128,96,.5); box-shadow: 0 0 0 3px rgba(0,128,96,.1); } html[data-theme="light"] .ct-form-group input::placeholder, html[data-theme="light"] .ct-form-group textarea::placeholder { color: #8a9ab0; } /* ── Form container shadow in light mode ── */ html[data-theme="light"] .ct-form-container { box-shadow: 0 0 40px rgba(0,128,96,.06), 0 8px 32px rgba(0,0,0,.08); } /* ── Free CCcam code boxes ── */ html[data-theme="light"] .fc-cline-card, html[data-theme="light"] .cline-card, html[data-theme="light"] [class*="card"] { background: #ffffff; } /* ── Pricing / plan cards ── */ html[data-theme="light"] .fc-plan, html[data-theme="light"] .fc-plan-card { background: #ffffff; } /* ── Footer ── */ html[data-theme="light"] footer, html[data-theme="light"] .fc-footer { background: #e8edf5; border-top: 1px solid rgba(0,128,96,.15); } html[data-theme="light"] footer *, html[data-theme="light"] .fc-footer * { color: #4a5a6a; }