/* ===================================================================== Shield Bharat — Dark Mode Theme Layer --------------------------------------------------------------------- ADDITIVE ONLY. This file is loaded AFTER style.css and never touches your light theme. Light mode = your existing design, unchanged. Dark mode activates when . ===================================================================== */ /* Smooth, tasteful transition when switching themes (not on page load) */ html.theme-ready, html.theme-ready body, html.theme-ready .blog-card, html.theme-ready .ins-card, html.theme-ready .contact-form-card, html.theme-ready .faq-item, html.theme-ready .btn, html.theme-ready input, html.theme-ready textarea, html.theme-ready select { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* --------------------------------------------------------------------- 1. DARK PALETTE — override your CSS custom properties. Components that already use var(--slate)/var(--dark)/var(--offwhite)/ var(--mist)/var(--navy)/var(--gold) adapt automatically. --------------------------------------------------------------------- */ html[data-theme="dark"] { /* Surfaces */ --bg: #0e1525; /* page background */ --surface: #161f33; /* cards / panels */ --surface-2: #1d283f; /* raised panels / inputs */ --offwhite: #131c2e; /* was light section bg */ --mist: #1d2942; /* was light tint */ --cream: #1d2942; --light: #1d283f; --white: #161f33; /* Text */ --dark: #eef2fb; /* headings / dark text */ --ink: #eef2fb; --slate: #a9b4c9; /* body / muted text */ --muted: #8a97b0; /* Accents — kept on-brand but brightened so they pop on dark */ --gold: #ffcf3f; --gold2: #f5b400; --navy: #1b2942; /* Borders */ --border: rgba(168,180,210,.16); color-scheme: dark; } /* --------------------------------------------------------------------- 2. BASE — beat any hard-coded white/black in style.css. !important in an external sheet overrides hard-coded inline styles. --------------------------------------------------------------------- */ html[data-theme="dark"] body { background: #0e1525 !important; color: var(--slate); } /* Header / nav / footer — common wrappers (covers typical class names) */ html[data-theme="dark"] header, html[data-theme="dark"] .site-header, html[data-theme="dark"] .navbar, html[data-theme="dark"] .topbar, html[data-theme="dark"] .header { background: rgba(14,21,37,.92) !important; border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(8px); } html[data-theme="dark"] footer, html[data-theme="dark"] .site-footer, html[data-theme="dark"] .footer { background: #0a0f1c !important; border-top: 1px solid var(--border); } /* Generic links inside nav stay readable */ html[data-theme="dark"] header a, html[data-theme="dark"] .navbar a, html[data-theme="dark"] .footer a { color: var(--slate); } html[data-theme="dark"] header a:hover, html[data-theme="dark"] .navbar a:hover { color: var(--gold); } /* --------------------------------------------------------------------- 3. CARDS & PANELS (class inventory taken from your PHP pages) --------------------------------------------------------------------- */ html[data-theme="dark"] .blog-card, html[data-theme="dark"] .ins-card, html[data-theme="dark"] .contact-form-card, html[data-theme="dark"] .contact-info-card, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .value-item, html[data-theme="dark"] .counter-item, html[data-theme="dark"] .about-float-card, html[data-theme="dark"] .about-badge { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.35); } html[data-theme="dark"] .blog-card h3 a, html[data-theme="dark"] .blog-card h3, html[data-theme="dark"] .ins-card h3, html[data-theme="dark"] .contact-form-card h3, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--dark); } html[data-theme="dark"] .blog-card p, html[data-theme="dark"] .ins-card p, html[data-theme="dark"] .faq-a, html[data-theme="dark"] p { color: var(--slate); } /* Section backgrounds that alternate light grey in your design */ html[data-theme="dark"] .about-bg, html[data-theme="dark"] section.about-bg { background: #111a2b !important; } /* The small coloured icon chips use inline hex (#fbf3dc / #e3ecfa / #fae4e1). External !important wins over inline non-important — neutralise to a subtle tinted surface so they don't glare in dark mode. */ html[data-theme="dark"] .ins-icon, html[data-theme="dark"] .contact-info-card .icon, html[data-theme="dark"] .value-icon { background: var(--mist) !important; } /* --------------------------------------------------------------------- 4. FORM CONTROLS --------------------------------------------------------------------- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--surface-2) !important; color: var(--dark) !important; border-color: var(--border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted); } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(255,207,63,.18) !important; } html[data-theme="dark"] select option { background: #161f33; color: var(--dark); } /* --------------------------------------------------------------------- 5. CHIPS / TABS / PILLS --------------------------------------------------------------------- */ html[data-theme="dark"] .blog-chip, html[data-theme="dark"] .faq-cat, html[data-theme="dark"] .vtab, html[data-theme="dark"] .ins-tag, html[data-theme="dark"] .post-tag, html[data-theme="dark"] .section-tag { background: var(--mist); color: var(--slate); border-color: var(--border); } html[data-theme="dark"] .blog-chip.active, html[data-theme="dark"] .faq-cat.active, html[data-theme="dark"] .vtab.active { background: var(--gold); color: #1a1304; border-color: var(--gold); } /* --------------------------------------------------------------------- 6. EYE-CATCHING TOUCHES (dark only) --------------------------------------------------------------------- */ /* Hero + CTA get a deep gradient with a soft gold glow */ html[data-theme="dark"] .page-hero, html[data-theme="dark"] .cta-section { background: radial-gradient(900px 420px at 12% -10%, rgba(255,207,63,.10), transparent 60%), linear-gradient(135deg, #0c1322 0%, #16223b 55%, #0c1322 100%) !important; border-bottom: 1px solid var(--border); } html[data-theme="dark"] .page-hero h1, html[data-theme="dark"] .cta-section h2 { color: #f4f7ff; } html[data-theme="dark"] .page-hero h1 span, html[data-theme="dark"] .cta-section h2 span, html[data-theme="dark"] .section-title span { color: var(--gold); } html[data-theme="dark"] .breadcrumb-row, html[data-theme="dark"] .breadcrumb-row a, html[data-theme="dark"] .post-meta { color: #b9c4db; } /* Gold buttons get a subtle glow so the accent really pops */ html[data-theme="dark"] .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)) !important; color: #1a1304 !important; box-shadow: 0 8px 24px rgba(255,207,63,.28); } html[data-theme="dark"] .btn-gold:hover { box-shadow: 0 10px 30px rgba(255,207,63,.42); } html[data-theme="dark"] .btn-navy { background: var(--surface-2) !important; color: var(--dark) !important; border: 1px solid var(--border); } html[data-theme="dark"] .btn-outline { border-color: rgba(255,255,255,.30) !important; } /* Numbers / counters keep gold emphasis */ html[data-theme="dark"] .counter-num, html[data-theme="dark"] .counter-num span, html[data-theme="dark"] .about-badge-num { color: var(--gold); } /* Featured / post images: gentle separation from dark bg */ html[data-theme="dark"] .post-feature, html[data-theme="dark"] .blog-card-img { border: 1px solid var(--border); } html[data-theme="dark"] img { filter: brightness(.96); } /* 404 / error page */ html[data-theme="dark"] .error-num { color: var(--gold); } /* --------------------------------------------------------------------- 7. THEME TOGGLE BUTTON (floating, works without editing header.php) --------------------------------------------------------------------- */ #themeToggle { position: fixed; bottom: 22px; left: 22px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(0,0,0,.10); background: #ffffff; color: #1a2336; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .25s ease, box-shadow .25s ease, background .35s ease, color .35s ease; } #themeToggle:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,.24); } #themeToggle:active { transform: scale(.96); } #themeToggle:focus-visible { outline: 3px solid rgba(245,180,0,.45); outline-offset: 2px; } html[data-theme="dark"] #themeToggle { background: #1d283f; color: var(--gold); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.45); } /* Show the right glyph for the current theme */ #themeToggle .sun { display: none; } #themeToggle .moon { display: inline; } html[data-theme="dark"] #themeToggle .sun { display: inline; } html[data-theme="dark"] #themeToggle .moon { display: none; } @media (max-width: 600px) { #themeToggle { width: 46px; height: 46px; font-size: 19px; bottom: 16px; left: 16px; } }