/* ══════════════════════════════════════════════════════════════
WEBZLINE SCHOOL ERP — LIGHT THEME
══════════════════════════════════════════════════════════════
Usage:
1. Add this file after your main styles.css
2. Toggle by adding/removing class "light" on
document.body.classList.toggle('light');
3. Optional: Add a theme toggle button in your navbar:
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════
1. DESIGN TOKENS OVERRIDE
══════════════════════════════════════ */
/* Early FOUC prevention — html gets .light before body is parsed */
html.light {
background: #f8fafc;
}
body.light {
--bg: #f8fafc;
--bg-card: rgba(255, 255, 255, 0.85);
--bg-card-h: rgba(255, 255, 255, 1);
--bdr: #e2e8f0;
--bdr-h: rgba(59, 130, 246, 0.35);
--t1: #0f172a;
--t2: #334155;
--t3: #64748b;
--t4: #94a3b8;
/* Accent colors stay the same but slightly deepened for contrast */
--blue: #2563eb;
--blue-d: #1d4ed8;
--green: #059669;
--amber: #d97706;
--red: #dc2626;
--purple: #7c3aed;
--cyan: #0891b2;
--pink: #db2777;
background: var(--bg);
color: var(--t1);
}
/* ══════════════════════════════════════
2. BACKGROUND EFFECTS
══════════════════════════════════════ */
/* Glow orbs — softer, lighter colors */
body.light .glow-orb {
opacity: 0.04;
filter: blur(100px);
}
body.light .glow-blue { background: #93c5fd; }
body.light .glow-purple { background: #c4b5fd; }
body.light .glow-green { background: #6ee7b7; }
body.light .glow-amber { background: #fcd34d; }
body.light .glow-pink { background: #f9a8d4; }
/* Grid texture — very subtle */
body.light .grid-texture {
background-image:
linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px);
}
/* Noise — barely visible */
body.light .noise {
opacity: 0.015;
}
/* Glow separator lines */
body.light .glow-line {
background: linear-gradient(90deg, transparent, #93c5fd, #c4b5fd, transparent);
opacity: 0.25;
}
/* ══════════════════════════════════════
3. UNIFIED COMPONENTS
══════════════════════════════════════ */
/* Section badge */
body.light .section-badge {
background: rgba(37, 99, 235, 0.06);
border-color: rgba(37, 99, 235, 0.15);
color: var(--blue);
}
/* Section title */
body.light .section-title {
color: #0f172a;
}
body.light .section-title span {
color: var(--blue);
}
/* Section subtitle */
body.light .section-sub {
color: #64748b;
}
/* ── Cards ── */
body.light .card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.light .card:hover {
background: #fff;
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
body.light .card::before {
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.15), transparent);
}
body.light .card::after {
background: radial-gradient(circle, rgba(37, 99, 235, 0.02) 0%, transparent 60%);
}
/* ── Buttons ── */
body.light .btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
}
body.light .btn-primary:hover {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}
body.light .btn-secondary {
background: #fff;
color: #1e293b;
border: 1px solid #d1d5db;
}
body.light .btn-secondary:hover {
background: #f8fafc;
border-color: #9ca3af;
}
body.light .btn-accent {
background: linear-gradient(135deg, #059669, #047857);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.2);
}
body.light .btn-accent:hover {
box-shadow: 0 8px 24px rgba(5, 150, 105, 0.3);
}
/* ── Icon wraps ── */
body.light .card:hover .icon-wrap {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ══════════════════════════════════════
4. ANNOUNCEMENT BAR
══════════════════════════════════════ */
body.light .announce {
background: linear-gradient(90deg, #1e40af, #6d28d9);
}
/* ══════════════════════════════════════
5. NAVBAR
══════════════════════════════════════ */
body.light .navbar {
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(20px);
border-bottom: 1px solid #e2e8f0;
}
body.light .navbar.scrolled {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
body.light .nav-logo {
color: #0f172a;
}
body.light .nav-links a {
color: #64748b;
}
body.light .nav-links a:hover {
color: #0f172a;
}
body.light .nav-links a::after {
background: var(--blue);
}
body.light .nav-right .signin {
color: #64748b;
}
/* ══════════════════════════════════════
6. HERO
══════════════════════════════════════ */
body.light .hero::before {
background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
}
body.light .hero h1 {
color: #0f172a;
}
body.light .hero h1 span {
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
body.light .hero .hero-sub {
color: #475569;
}
body.light .hero-badge {
background: rgba(217, 119, 6, 0.06);
border-color: rgba(217, 119, 6, 0.15);
color: #b45309;
}
body.light .hero-checks span {
color: #475569;
}
body.light .hero-checks svg {
stroke: var(--green);
}
/* Hero trust bar */
body.light .hero-trust {
background: #fff;
border-color: #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.light .hero-trust .avatars span {
border-color: #fff;
}
body.light .hero-trust p {
color: #475569;
}
body.light .hero-trust b {
color: #0f172a;
}
/* Screenshot panel */
body.light .hero-screenshot::before {
background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
}
body.light .screen-wrap {
background: #fff;
border-color: #e2e8f0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
body.light .screen-header {
background: #f8fafc;
border-bottom-color: #e2e8f0;
}
body.light .screen-title {
color: #64748b;
}
/* Sidebar */
body.light .sidebar-nav {
border-right-color: #e2e8f0;
background: #fafbfc;
}
body.light .sidebar-item {
color: #64748b;
}
body.light .sidebar-item.active {
background: rgba(37, 99, 235, 0.06);
color: var(--blue);
border-right-color: var(--blue);
}
/* Invoice area */
body.light .invoice-area {
background: #fff;
}
body.light .invoice-header h3 {
color: #0f172a;
}
body.light .inv-tab {
color: #94a3b8;
background: #f1f5f9;
}
body.light .inv-tab.active {
background: rgba(37, 99, 235, 0.08);
color: var(--blue);
}
body.light .inv-table th {
color: #94a3b8;
border-bottom-color: #e2e8f0;
}
body.light .inv-table td {
color: #475569;
border-bottom-color: #f1f5f9;
}
body.light .inv-table .sn {
color: #0f172a;
}
/* Status pills — keep colorful but lighter */
body.light .sp-paid { background: rgba(5, 150, 105, 0.08); color: #047857; }
body.light .sp-unpaid { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
body.light .sp-partial { background: rgba(217, 119, 6, 0.08); color: #b45309; }
/* Collection & toast badges */
body.light .collection-badge {
background: rgba(37, 99, 235, 0.06);
border-color: rgba(37, 99, 235, 0.15);
backdrop-filter: blur(12px);
}
body.light .collection-badge .cb-n { color: var(--blue); }
body.light .collection-badge .cb-l { color: #64748b; }
body.light .toast-notif {
background: rgba(5, 150, 105, 0.08);
border-color: rgba(5, 150, 105, 0.2);
color: #047857;
backdrop-filter: blur(12px);
}
/* Feature pills below screenshot */
body.light .hero-pills span {
background: #fff;
border-color: #e2e8f0;
color: #475569;
}
body.light .hero-pills span:hover {
border-color: rgba(37, 99, 235, 0.3);
}
/* ══════════════════════════════════════
7. TICKER
══════════════════════════════════════ */
body.light .ticker {
border-color: #e2e8f0;
background: #f8fafc;
}
body.light .ticker::before {
background: linear-gradient(90deg, #f8fafc, transparent);
}
body.light .ticker::after {
background: linear-gradient(270deg, #f8fafc, transparent);
}
body.light .ticker-item {
color: #475569;
}
/* ══════════════════════════════════════
8. FEATURE CARDS
══════════════════════════════════════ */
body.light .feature-card h3 {
color: #0f172a;
}
body.light .feature-card p {
color: #64748b;
}
/* ══════════════════════════════════════
9. BEFORE / AFTER
══════════════════════════════════════ */
body.light .ba-before {
background: rgba(220, 38, 38, 0.02);
border-color: rgba(220, 38, 38, 0.1);
}
body.light .ba-after {
background: rgba(5, 150, 105, 0.02);
border-color: rgba(5, 150, 105, 0.1);
}
body.light .ba-header h3 {
color: #0f172a;
}
body.light .ba-list li {
color: #475569;
border-bottom-color: #f1f5f9;
}
body.light .ba-before .ba-bullet { background: rgba(220, 38, 38, 0.06); }
body.light .ba-after .ba-bullet { background: rgba(5, 150, 105, 0.06); }
/* ══════════════════════════════════════
10. WALKTHROUGH
══════════════════════════════════════ */
body.light .wt-wrap {
background: #fff;
border-color: #e2e8f0;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
body.light .wt-tabs {
border-right-color: #e2e8f0;
background: #fafbfc;
}
body.light .wt-tab {
border-left-color: transparent;
}
body.light .wt-tab.active {
background: rgba(37, 99, 235, 0.04);
border-left-color: var(--blue);
}
body.light .wt-tab .wt-num { color: #94a3b8; }
body.light .wt-tab .wt-name { color: #475569; }
body.light .wt-tab.active .wt-name { color: #0f172a; }
body.light .wt-tab .wt-desc { color: #94a3b8; }
body.light .wt-content-header { color: #0f172a; }
body.light .wt-content-sub { color: #64748b; }
/* Mock Attendance */
body.light .mock-att {
background: #f8fafc;
border-color: #e2e8f0;
}
body.light .att-day { color: #94a3b8; }
body.light .att-p { background: rgba(5, 150, 105, 0.08); color: #047857; }
body.light .att-a { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
body.light .att-l { background: rgba(217, 119, 6, 0.08); color: #b45309; }
body.light .att-stat {
background: #fff;
border-color: #e2e8f0;
}
body.light .att-stat .num { color: var(--blue); }
body.light .att-stat .label { color: #94a3b8; }
body.light .wt-note {
background: rgba(37, 99, 235, 0.04);
border-color: rgba(37, 99, 235, 0.1);
color: #475569;
}
/* Responsive walkthrough tabs */
@media (max-width: 768px) {
body.light .wt-tabs {
border-bottom-color: #e2e8f0;
border-right: none;
}
body.light .wt-tab.active {
border-bottom-color: var(--blue);
border-left-color: transparent;
}
}
/* ══════════════════════════════════════
11. MODULES GRID
══════════════════════════════════════ */
body.light .mod-pill {
color: #64748b;
border-color: #e2e8f0;
background: #fff;
}
body.light .mod-pill:hover:not(.active) {
background: #f1f5f9;
}
body.light .mod-pill.active {
background: var(--blue);
color: #fff;
border-color: var(--blue);
}
body.light .mod-card h4 { color: #0f172a; }
body.light .mod-card p { color: #94a3b8; }
/* Plan badges — slightly deeper for light bg */
body.light .pt-free { background: rgba(5, 150, 105, 0.08); color: #047857; }
body.light .pt-basic { background: rgba(37, 99, 235, 0.08); color: #1d4ed8; }
body.light .pt-standard { background: rgba(124, 58, 237, 0.08); color: #6d28d9; }
body.light .pt-pro { background: rgba(217, 119, 6, 0.08); color: #b45309; }
body.light .pt-enterprise { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
body.light .plan-tag { /* Same as above, cascade applies */ }
/* ══════════════════════════════════════
12. TESTIMONIALS
══════════════════════════════════════ */
body.light .testi-stars { color: #d97706; }
body.light .testi-quote { color: #475569; }
body.light .testi-author { border-top-color: #f1f5f9; }
body.light .testi-name { color: #0f172a; }
body.light .testi-role { color: #94a3b8; }
body.light .testi-avatar { border: 2px solid #fff; }
/* Trust strip */
body.light .trust-strip { }
body.light .trust-pill {
background: #fff;
border-color: #e2e8f0;
color: #475569;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
body.light .trust-pill:hover {
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* ══════════════════════════════════════
13. COMPARISON TABLE
══════════════════════════════════════ */
body.light .cmp-wrap {
border-color: #e2e8f0;
background: #fff;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
body.light .cmp-table thead th {
border-bottom-color: #e2e8f0;
color: #64748b;
}
body.light .th-hl {
background: rgba(37, 99, 235, 0.03);
border-top-color: var(--blue);
}
body.light .th-product { color: #0f172a; }
body.light .th-price { color: #94a3b8; }
body.light .cmp-table tbody td {
border-bottom-color: #f1f5f9;
color: #475569;
}
body.light .cmp-table tbody td:first-child { color: #0f172a; }
body.light .td-hl { background: rgba(37, 99, 235, 0.015); }
body.light .cy { color: #047857; }
body.light .cn { color: #94a3b8; }
body.light .cp { color: #b45309; }
body.light .cmp-cta {
background: rgba(37, 99, 235, 0.02);
border-top-color: #e2e8f0;
}
/* ══════════════════════════════════════
14. PRICING
══════════════════════════════════════ */
body.light .price-tier { color: #94a3b8; }
body.light .price-amt { color: #0f172a; }
body.light .price-amt .cur { color: #0f172a; }
body.light .price-amt .per { color: #94a3b8; }
body.light .price-desc { color: #64748b; }
body.light .price-features li { color: #475569; }
body.light .price-features svg { stroke: var(--green); }
/* Popular card */
body.light .price-card.pop {
border-color: var(--blue);
box-shadow: 0 0 0 1px var(--blue), 0 8px 40px rgba(37, 99, 235, 0.1);
}
body.light .price-card.pop::before {
background: linear-gradient(135deg, var(--blue), var(--purple));
opacity: 0.04;
}
body.light .pop-tag {
background: var(--blue);
}
/* ══════════════════════════════════════
15. SERVICES
══════════════════════════════════════ */
body.light .svc-card h3 { color: #0f172a; }
body.light .svc-card p { color: #64748b; }
body.light .svc-list li { color: #475569; }
body.light .svc-list li::before { color: #cbd5e1; }
body.light .svc-price {
border-top-color: #f1f5f9;
}
body.light .svc-price .sl { color: #94a3b8; }
body.light .svc-price .sa { color: #0f172a; }
/* Bundle strip */
body.light .bundle {
background: rgba(37, 99, 235, 0.03);
border-color: rgba(37, 99, 235, 0.1);
}
body.light .bundle p { color: #475569; }
body.light .bundle b { color: #0f172a; }
/* ══════════════════════════════════════
16. DEMO FORM
══════════════════════════════════════ */
body.light .demo-bens li { color: #475569; }
body.light .db-icon { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
/* Quick timeline */
body.light .qt {
border-top-color: #e2e8f0;
}
body.light .qt h4 { color: #0f172a; }
body.light .qt-step::before { background: #e2e8f0; }
body.light .qt-dot {
background: rgba(37, 99, 235, 0.06);
border-color: var(--blue);
color: var(--blue);
}
body.light .qt-label { color: #334155; }
body.light .qt-time { color: #94a3b8; }
/* Form card */
body.light .demo-form {
background: #fff;
border-color: #e2e8f0;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
body.light .demo-form::before {
background: radial-gradient(circle, rgba(37, 99, 235, 0.03), transparent);
}
body.light .demo-form h3 { color: #0f172a; }
body.light .form-sub { color: #64748b; }
body.light .form-label { color: #334155; }
body.light .form-input {
background: #f8fafc;
border-color: #e2e8f0;
color: #0f172a;
}
body.light .form-input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
background: #fff;
}
body.light .form-input::placeholder { color: #94a3b8; }
body.light .form-note span { color: #94a3b8; }
/* ══════════════════════════════════════
17. FAQ
══════════════════════════════════════ */
body.light .faq-q h4 { color: #0f172a; }
body.light .faq-toggle {
background: #f1f5f9;
color: #94a3b8;
}
body.light .faq-item.open .faq-toggle {
color: var(--blue);
background: rgba(37, 99, 235, 0.08);
}
body.light .faq-a p { color: #64748b; }
/* ══════════════════════════════════════
18. FINAL CTA
══════════════════════════════════════ */
body.light .final-cta {
background: linear-gradient(135deg, #1e40af 0%, #1e3a5f 50%, #312e81 100%);
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 20px 60px rgba(37, 99, 235, 0.12);
}
/* Text inside CTA stays white (dark bg) */
body.light .final-cta h2 { color: #fff; }
body.light .final-cta p { color: rgba(255, 255, 255, 0.7); }
/* ══════════════════════════════════════
19. FOOTER
══════════════════════════════════════ */
body.light .footer {
background: #f1f5f9;
border-top-color: #e2e8f0;
}
body.light .footer-brand .logo { color: #0f172a; }
body.light .footer-brand p { color: #64748b; }
body.light .footer-socials span {
background: #fff;
border-color: #e2e8f0;
color: #94a3b8;
}
body.light .footer-socials span:hover {
border-color: var(--blue);
color: var(--blue);
}
body.light .footer-col h4 { color: #94a3b8; }
body.light .footer-col a { color: #64748b; }
body.light .footer-col a:hover { color: #0f172a; }
/* Newsletter */
body.light .footer-nl p { color: #94a3b8; }
body.light .footer-nl input {
background: #fff;
border-color: #e2e8f0;
color: #0f172a;
}
body.light .footer-nl input:focus { border-color: var(--blue); }
body.light .footer-nl button { background: var(--blue); }
/* Footer bottom */
body.light .footer-bottom {
border-top-color: #e2e8f0;
}
body.light .footer-bottom .copy { color: #94a3b8; }
body.light .footer-bottom .legal a { color: #94a3b8; }
body.light .footer-bottom .legal a:hover { color: #475569; }
/* ══════════════════════════════════════
20. ALTERNATE SECTION BACKGROUNDS
══════════════════════════════════════ */
/* Every other section gets a subtle off-white bg in light mode */
body.light .section:nth-child(even) {
background: rgba(241, 245, 249, 0.5);
}
/* Sections with inline bg gradients (walkthrough, testimonials, pricing, demo) */
body.light [style*="background:linear-gradient(180deg,rgba(255,255,255"] {
background: rgba(241, 245, 249, 0.4) !important;
}
/* ══════════════════════════════════════
21. SCROLLBAR STYLING
══════════════════════════════════════ */
body.light::-webkit-scrollbar {
width: 10px;
}
body.light::-webkit-scrollbar-track {
background: #f1f5f9;
}
body.light::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 5px;
}
body.light::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* ══════════════════════════════════════
22. SELECTION HIGHLIGHT
══════════════════════════════════════ */
body.light ::selection {
background: rgba(37, 99, 235, 0.12);
color: #1e40af;
}
/* ══════════════════════════════════════
23. THEME TOGGLE BUTTON (Optional)
══════════════════════════════════════
Add this button in your navbar:
══════════════════════════════════════ */
.theme-toggle {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--bdr);
background: var(--bg-card);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.theme-toggle:hover {
border-color: var(--bdr-h);
transform: translateY(-1px);
}
/* Toggle icon visibility — show icon for the action (what click will do) */
.theme-icon-dark,
.theme-icon-light {
position: absolute;
transition: opacity 0.3s, transform 0.3s;
}
/* Dark theme: show ☀️ sun (click to go light) */
.theme-icon-dark {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
.theme-icon-light {
opacity: 1;
transform: rotate(0) scale(1);
}
/* Light theme: show 🌙 moon (click to go dark) */
body.light .theme-icon-light {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
body.light .theme-icon-dark {
opacity: 1;
transform: rotate(0) scale(1);
}
/* Toggle button in light mode */
body.light .theme-toggle {
background: #fff;
border-color: #e2e8f0;
}
body.light .theme-toggle:hover {
border-color: rgba(37, 99, 235, 0.3);
}
/* ══════════════════════════════════════
24. SMOOTH THEME TRANSITION
══════════════════════════════════════ */
body.light,
body.light *,
body.light *::before,
body.light *::after {
transition:
background-color 0.4s ease,
border-color 0.4s ease,
color 0.3s ease,
box-shadow 0.4s ease;
}
/* Exclude elements that need their own transitions */
body.light .ticker-track,
body.light .btn-primary::before,
body.light .glow-orb,
body.light [class*="att-cell"],
body.light .announce::after {
transition: none;
}
/* OTP Light Mode Overrides */
body.light .otp-input { background: #fff; border-color: var(--bdr); color: var(--t1); }
body.light .otp-input:focus { border-color: var(--blue); }