/* ============================================================ THEME.CSS — Light / Dark Theme Toggle Styles Campus List | Admission Consultant Website ============================================================ */ /* ════════════════════════════════════════════ LIGHT THEME VARIABLE OVERRIDES Applied when ════════════════════════════════════════════ */ [data-theme="light"] { /* ── Backgrounds ── */ --clr-dark-950: #f0f4ff; --clr-dark-900: #e8eeff; --clr-dark-800: #dde5ff; --clr-dark-700: #ccd6ff; --clr-dark-600: #b8c6ff; --clr-dark-500: #a0b0f0; --clr-surface-1: #f5f7ff; --clr-surface-2: #eaefff; --clr-surface-3: #e0e8ff; /* ── Text ── */ --clr-text-primary: #0d0d2b; --clr-text-secondary: #3a3a6e; --clr-text-muted: #6868a0; --clr-text-inverse: #f0f0ff; /* ── Hero gradient (light) ── */ --gradient-hero: linear-gradient( 135deg, #eef1ff 0%, #e8edff 40%, #dde5ff 70%, #e8edff 100% ); /* ── Cards (light) ── */ --gradient-card: linear-gradient(145deg, #ffffff 0%, #f0f4ff 100%); /* ── Glass (light) ── */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(99, 102, 241, 0.15); /* ── Borders (light) ── */ --border-subtle: 1px solid rgba(0, 0, 0, 0.06); --border-light: 1px solid rgba(0, 0, 0, 0.10); --border-medium: 1px solid rgba(0, 0, 0, 0.18); --border-primary:1px solid rgba(99, 102, 241, 0.30); /* ── Shadows (light) ── */ --shadow-sm: 0 2px 8px rgba(99, 102, 241, 0.08); --shadow-md: 0 4px 20px rgba(99, 102, 241, 0.12); --shadow-lg: 0 8px 40px rgba(99, 102, 241, 0.16); --shadow-xl: 0 16px 60px rgba(99, 102, 241, 0.18); /* ── Glow (softer in light) ── */ --glow-primary: 0 0 30px rgba(99, 102, 241, 0.2); --glow-accent: 0 0 30px rgba(249, 115, 22, 0.2); --glow-gold: 0 0 30px rgba(251, 191, 36, 0.2); /* ── Glow gradient ── */ --gradient-glow: radial-gradient(ellipse at center, rgba(99,102,241,0.12) 0%, transparent 70%); /* ── Scrollbar (light) ── */ --scrollbar-thumb: var(--clr-primary-300); } /* Light theme scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--clr-dark-900); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--clr-primary-400); } /* Light theme selection */ [data-theme="light"] ::selection { background: rgba(99, 102, 241, 0.2); color: var(--clr-dark-950); } /* ════════════════════════════════════════════ LIGHT THEME: Component-specific overrides ════════════════════════════════════════════ */ /* Navbar in light */ [data-theme="light"] #navbar.scrolled { background: rgba(240, 244, 255, 0.92); box-shadow: 0 1px 0 rgba(99, 102, 241, 0.12), var(--shadow-md); } [data-theme="light"] .navbar__mobile-menu { background: rgba(240, 244, 255, 0.98); border-bottom: 1px solid rgba(99, 102, 241, 0.12); } /* Hero canvas — lighter particles in light mode */ [data-theme="light"] #heroCanvas { opacity: 0.4; } /* Hero grid bg — lighter */ [data-theme="light"] .hero__grid-bg { background-image: linear-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px); } /* Form control in light */ [data-theme="light"] .form-control { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(99, 102, 241, 0.2); color: var(--clr-text-primary); } [data-theme="light"] .form-control:focus { background: #ffffff; border-color: var(--clr-primary-500); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } [data-theme="light"] select.form-control option { background: #ffffff; color: var(--clr-text-primary); } /* Hero search card in light */ [data-theme="light"] .hero__search-card { background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-xl), 0 0 60px rgba(99, 102, 241, 0.10); } /* College card in light */ [data-theme="light"] .college-card { background: #ffffff; border-color: rgba(99, 102, 241, 0.12); box-shadow: var(--shadow-sm); } [data-theme="light"] .college-card:hover { box-shadow: var(--shadow-lg); } /* Step cards in light */ [data-theme="light"] .step-card { background: #ffffff; border-color: rgba(99, 102, 241, 0.12); box-shadow: var(--shadow-sm); } /* Feature items in light */ [data-theme="light"] .feature-item { background: #ffffff; border-color: rgba(99, 102, 241, 0.12); } /* Why-us visual card in light */ [data-theme="light"] .why-us__visual-card { background: #ffffff; border-color: rgba(99, 102, 241, 0.15); box-shadow: var(--shadow-lg); } /* Search tags in light */ [data-theme="light"] .search-tag { background: rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.15); color: var(--clr-text-secondary); } [data-theme="light"] .search-tag:hover { background: rgba(99, 102, 241, 0.12); color: var(--clr-primary-600); } /* Stats strip in light */ [data-theme="light"] .stats-strip { background: #ffffff; border-top-color: rgba(99, 102, 241, 0.12); border-bottom-color: rgba(99, 102, 241, 0.12); } [data-theme="light"] .stat-item:not(:last-child)::after { background: rgba(99, 102, 241, 0.15); } /* CTA banner in light */ [data-theme="light"] .cta-banner { background: linear-gradient(135deg, #e8edff 0%, #dde5ff 50%, #e8edff 100%); } /* Footer in light */ [data-theme="light"] .footer { background: #e8edff; border-top-color: rgba(99, 102, 241, 0.12); } [data-theme="light"] .footer__bottom { border-top-color: rgba(99, 102, 241, 0.1); } [data-theme="light"] .footer__social-link { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.15); } /* Autocomplete in light */ [data-theme="light"] .autocomplete-box { background: #ffffff; border-color: rgba(99, 102, 241, 0.2); box-shadow: var(--shadow-lg); } [data-theme="light"] .autocomplete-item { color: var(--clr-text-secondary); border-bottom-color: rgba(99, 102, 241, 0.08); } [data-theme="light"] .autocomplete-item:hover { background: rgba(99, 102, 241, 0.08); color: var(--clr-primary-600); } /* Noise overlay (less visible in light) */ [data-theme="light"] .noise-overlay { opacity: 0.15; } /* Success chips in light */ [data-theme="light"] .success-chip { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); } /* ════════════════════════════════════════════ THEME TOGGLE BUTTON STYLES ════════════════════════════════════════════ */ .theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--glass-bg); border: var(--border-light); cursor: pointer; transition: all var(--transition-base); flex-shrink: 0; overflow: hidden; } .theme-toggle:hover { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.35); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } /* Sun & Moon icons inside toggle */ .theme-toggle__icon { position: absolute; font-size: 1.1rem; transition: transform var(--transition-spring), opacity var(--transition-base); line-height: 1; user-select: none; } /* Dark mode: show moon, hide sun */ .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.5); } .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Light mode: show sun, hide moon */ [data-theme="light"] .theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* ── Theme transition (applied during switch) ── */ .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.3s ease, box-shadow 0.4s ease !important; }