/* ================================================================ Vision Telecom IT Solution — Theme System Each theme overrides CSS variables defined in style.css Theme is applied via ================================================================ */ /* ── DEFAULT (Navy & Gold) — already in style.css :root ──── */ body.theme-default { /* uses :root defaults */ } /* ── THEME: EMERALD GREEN ─────────────────────────────────── */ body.theme-emerald { --navy: #064e3b; --navy2: #065f46; --blue: #047857; --blue2: #059669; --gold: #f59e0b; --gold2: #d97706; } body.theme-emerald #site-header { background: #064e3b; } body.theme-emerald .hero { background: linear-gradient(135deg,#064e3b 0%,#065f46 55%,#047857 100%); } body.theme-emerald .stats-bar { background: #f59e0b; } body.theme-emerald nav#main-nav a.active, body.theme-emerald nav#main-nav a:hover { background: rgba(255,255,255,.12); } body.theme-emerald footer { background: #064e3b; } body.theme-emerald .cta-banner { background: #064e3b; } body.theme-emerald .about-card { background: #064e3b; } body.theme-emerald .section-badge { background: rgba(5,150,105,.1); color: #059669; } body.theme-emerald .hero-badge { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.25); } /* ── THEME: ROYAL PURPLE ──────────────────────────────────── */ body.theme-purple { --navy: #2e1065; --navy2: #3b0764; --blue: #6d28d9; --blue2: #7c3aed; --gold: #f59e0b; --gold2: #d97706; } body.theme-purple #site-header { background: #2e1065; } body.theme-purple .hero { background: linear-gradient(135deg,#2e1065 0%,#3b0764 55%,#4c1d95 100%); } body.theme-purple .stats-bar { background: #f59e0b; } body.theme-purple footer { background: #2e1065; } body.theme-purple .cta-banner { background: #2e1065; } body.theme-purple .about-card { background: #2e1065; } body.theme-purple .section-badge { background: rgba(124,58,237,.1); color: #7c3aed; } body.theme-purple .hero-badge { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.25); } /* ── THEME: CRIMSON RED ───────────────────────────────────── */ body.theme-crimson { --navy: #7f1d1d; --navy2: #991b1b; --blue: #b91c1c; --blue2: #dc2626; --gold: #fbbf24; --gold2: #f59e0b; } body.theme-crimson #site-header { background: #7f1d1d; } body.theme-crimson .hero { background: linear-gradient(135deg,#7f1d1d 0%,#991b1b 55%,#b91c1c 100%); } body.theme-crimson .stats-bar { background: #fbbf24; } body.theme-crimson footer { background: #7f1d1d; } body.theme-crimson .cta-banner { background: #7f1d1d; } body.theme-crimson .about-card { background: #7f1d1d; } body.theme-crimson .section-badge { background: rgba(220,38,38,.1); color: #dc2626; } body.theme-crimson .hero-badge { background: rgba(251,191,36,.15); color: #fbbf24; border-color: rgba(251,191,36,.25); } /* ── THEME: OCEAN TEAL ────────────────────────────────────── */ body.theme-teal { --navy: #0c4a6e; --navy2: #075985; --blue: #0369a1; --blue2: #0284c7; --gold: #f59e0b; --gold2: #d97706; } body.theme-teal #site-header { background: #0c4a6e; } body.theme-teal .hero { background: linear-gradient(135deg,#0c4a6e 0%,#075985 55%,#0369a1 100%); } body.theme-teal .stats-bar { background: #f59e0b; } body.theme-teal footer { background: #0c4a6e; } body.theme-teal .cta-banner { background: #0c4a6e; } body.theme-teal .about-card { background: #0c4a6e; } body.theme-teal .section-badge { background: rgba(2,132,199,.1); color: #0284c7; } body.theme-teal .hero-badge { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.25); } /* ── THEME: CHARCOAL (Dark/Modern) ───────────────────────── */ body.theme-charcoal { --navy: #111827; --navy2: #1f2937; --blue: #374151; --blue2: #4b5563; --gold: #f59e0b; --gold2: #d97706; --light: #f9fafb; } body.theme-charcoal #site-header { background: #111827; } body.theme-charcoal .hero { background: linear-gradient(135deg,#111827 0%,#1f2937 55%,#374151 100%); } body.theme-charcoal .stats-bar { background: #f59e0b; } body.theme-charcoal footer { background: #111827; } body.theme-charcoal .cta-banner { background: #111827; } body.theme-charcoal .about-card { background: #1f2937; } body.theme-charcoal .btn-blue { background: #374151; } body.theme-charcoal .btn-blue:hover { background: #1f2937; } body.theme-charcoal .section-badge { background: rgba(75,85,99,.1); color: #374151; } body.theme-charcoal .hero-badge { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.25); } /* ── THEME: SUNSET ORANGE ─────────────────────────────────── */ body.theme-orange { --navy: #7c2d12; --navy2: #9a3412; --blue: #c2410c; --blue2: #ea580c; --gold: #fbbf24; --gold2: #f59e0b; } body.theme-orange #site-header { background: #7c2d12; } body.theme-orange .hero { background: linear-gradient(135deg,#7c2d12 0%,#9a3412 55%,#c2410c 100%); } body.theme-orange .stats-bar { background: #fbbf24; } body.theme-orange footer { background: #7c2d12; } body.theme-orange .cta-banner { background: #7c2d12; } body.theme-orange .about-card { background: #7c2d12; } body.theme-orange .section-badge { background: rgba(234,88,12,.1); color: #ea580c; } body.theme-orange .hero-badge { background: rgba(251,191,36,.15); color: #fbbf24; border-color: rgba(251,191,36,.25); } /* ── THEME: ROSE GOLD ─────────────────────────────────────── */ body.theme-rose { --navy: #881337; --navy2: #9f1239; --blue: #be123c; --blue2: #e11d48; --gold: #f59e0b; --gold2: #d97706; } body.theme-rose #site-header { background: #881337; } body.theme-rose .hero { background: linear-gradient(135deg,#881337 0%,#9f1239 55%,#be123c 100%); } body.theme-rose .stats-bar { background: #f59e0b; } body.theme-rose footer { background: #881337; } body.theme-rose .cta-banner { background: #881337; } body.theme-rose .about-card { background: #881337; } body.theme-rose .section-badge { background: rgba(225,29,72,.1); color: #e11d48; } body.theme-rose .hero-badge { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.25); } /* ── THEME: MIDNIGHT BLUE (High Contrast) ────────────────── */ body.theme-midnight { --navy: #020617; --navy2: #0f172a; --blue: #1d4ed8; --blue2: #2563eb; --gold: #eab308; --gold2: #ca8a04; } body.theme-midnight #site-header { background: #020617; } body.theme-midnight .hero { background: linear-gradient(135deg,#020617 0%,#0f172a 55%,#1e3a5f 100%); } body.theme-midnight .stats-bar { background: #eab308; } body.theme-midnight footer { background: #020617; } body.theme-midnight .cta-banner { background: #020617; } body.theme-midnight .about-card { background: #0f172a; } body.theme-midnight .section-badge { background: rgba(37,99,235,.1); color: #2563eb; } body.theme-midnight .hero-badge { background: rgba(234,179,8,.15); color: #eab308; border-color: rgba(234,179,8,.25); }