/* ================================================================ C-Hub — Light Theme Overrides Applied when ================================================================ */ [data-theme="light"] { /* ── Core palette ─────────────────────────────────────────── */ --bg-base: #f4f5f9; --bg-card: rgba(0, 0, 0, 0.03); --bg-card-hover: rgba(0, 0, 0, 0.06); --border-subtle: rgba(0, 0, 0, 0.10); --border-hover: rgba(124, 92, 255, 0.40); --text-primary: #1a1a2e; --text-secondary: #4a4a68; --text-muted: #8888a4; --accent: #6a4cff; --accent-hover: #5a3ce6; --accent-secondary: #0ba8c8; /* ── Component backgrounds ────────────────────────────────── */ --bg-header: rgba(255, 255, 255, 0.90); --bg-overlay: rgba(255, 255, 255, 0.97); --bg-hover-subtle: rgba(0, 0, 0, 0.05); --bg-hover-faint: rgba(0, 0, 0, 0.03); --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12); } /* ── Hero gradient override ─────────────────────────────────── */ [data-theme="light"] .hero-bg { background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(124, 92, 255, 0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 60%, rgba(11, 184, 216, 0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 50% 10%, rgba(124, 92, 255, 0.04) 0%, transparent 60%); } /* ── How-it-works & Final CTA section backgrounds ───────────── */ [data-theme="light"] .how-it-works { background: radial-gradient(ellipse 50% 45% at 70% 50%, rgba(11, 184, 216, 0.04) 0%, transparent 70%), var(--bg-base); } [data-theme="light"] .final-cta { background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(124, 92, 255, 0.06) 0%, transparent 70%), var(--bg-base); } /* ── Buttons — primary stays white text on purple ───────────── */ [data-theme="light"] .btn-primary { color: #fff; } /* ── Outline button — stronger border for light bg ──────────── */ [data-theme="light"] .btn-outline { border-color: rgba(0, 0, 0, 0.18); } [data-theme="light"] .btn-outline:hover { border-color: var(--accent); } /* ── Step number badge ──────────────────────────────────────── */ [data-theme="light"] .step-num { color: #fff; } /* ── Accent text gradient — richer on light ─────────────────── */ [data-theme="light"] .accent-text { background: linear-gradient(135deg, #6a4cff 0%, #0ba8c8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Lang chevron — ensure visibility ───────────────────────── */ [data-theme="light"] .lang-chevron { stroke: var(--text-secondary); } /* ── Theme toggle button ────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); position: relative; flex-shrink: 0; } .theme-toggle:hover { color: var(--text-primary); background: var(--bg-hover-subtle); border-color: var(--border-hover); } /* Sun icon hidden in dark, shown in light */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ── Scrollbar (optional polish) ────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #eee; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } /* ── Footer bottom — softer divider ─────────────────────────── */ [data-theme="light"] .footer-bottom { border-top-color: rgba(0, 0, 0, 0.08); } /* ── Category card hover shadow ─────────────────────────────── */ [data-theme="light"] .cat-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* ── Advantage card — subtle bg ─────────────────────────────── */ [data-theme="light"] .adv-card { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); } /* ── Placeholder box ────────────────────────────────────────── */ [data-theme="light"] .placeholder-box { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.08); } /* ── Search input — light override ──────────────────────────── */ [data-theme="light"] .header-search-input { background: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); } /* ── Auth card — light override ─────────────────────────────── */ [data-theme="light"] .auth-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .form-input { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .form-input:focus { box-shadow: 0 0 0 3px rgba(106, 76, 255, 0.12); } [data-theme="light"] .auth-divider::before, [data-theme="light"] .auth-divider::after { background: rgba(0, 0, 0, 0.10); } /* ── Form error / alert — light override ────────────────────── */ [data-theme="light"] .form-alert-error { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.2); } [data-theme="light"] .form-input-error { border-color: #dc2626 !important; } /* ── Google Places autocomplete dropdown ────────────────────── */ [data-theme="light"] .pac-container { background: #fff; border-color: rgba(0, 0, 0, 0.1); }