/* ═══════════════════════════════════════════════════════════════════ NarneTech Theme Engine — light / dark, system-aware ───────────────────────────────────────────────────────────────── The LIGHT theme is the existing site design (style.css) untouched. This sheet only adds design tokens, the theme-toggle control and a complete DARK override layer scoped to html[data-theme="dark"], so light mode carries zero regression risk. Default preference is "system"; nt-theme.js resolves it and stamps data-theme="light" / "dark" on before first paint. ═══════════════════════════════════════════════════════════════════ */ :root { /* brand */ --nt-primary: #4154f1; --nt-primary-soft: #7186f9; --nt-navy: #012970; --nt-accent: #2db6fa; /* light surfaces (mirror current design) */ --nt-bg: #ffffff; --nt-bg-soft: #f6f9ff; --nt-surface: #ffffff; --nt-text: #444444; --nt-heading: #012970; --nt-muted: #6c7a99; --nt-border: rgba(1, 41, 112, .10); --nt-shadow: 0 8px 30px rgba(1, 41, 112, .08); --nt-glow: 0 0 0 transparent; } html[data-theme="dark"] { --nt-bg: #0b1020; --nt-bg-soft: #0e1530; --nt-surface: #121a36; --nt-text: #a9b6d6; --nt-heading: #eef2ff; --nt-muted: #8391b5; --nt-border: rgba(148, 163, 240, .14); --nt-shadow: 0 10px 34px rgba(0, 0, 0, .45); --nt-glow: 0 0 26px rgba(65, 84, 241, .28); color-scheme: dark; } /* ── Theme toggle button (header) ─────────────────────────────── */ .nt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--nt-border); background: transparent; color: var(--nt-heading); font-size: 1.05rem; cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s, box-shadow .3s; margin: 0 6px; } .nt-theme-toggle:hover { background: rgba(65, 84, 241, .12); color: var(--nt-primary); transform: rotate(25deg) scale(1.08); box-shadow: var(--nt-glow); } .nt-theme-toggle i { pointer-events: none; line-height: 1; } /* ═══════════════════════════════════════════════════════════════ DARK THEME OVERRIDES (public site / _HomeLayout surface) ═══════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body { background-color: var(--nt-bg); color: var(--nt-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--nt-heading); } html[data-theme="dark"] a { color: var(--nt-primary-soft); } html[data-theme="dark"] a:hover { color: #9fb0ff; } html[data-theme="dark"] p { color: var(--nt-text); } html[data-theme="dark"] .text-muted { color: var(--nt-muted) !important; } html[data-theme="dark"] .text-dark { color: var(--nt-heading) !important; } html[data-theme="dark"] .text-primary { color: var(--nt-primary-soft) !important; } /* ── Header / navigation ──────────────────────────────────────── */ html[data-theme="dark"] .header { background-color: rgba(11, 16, 32, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--nt-border); } html[data-theme="dark"] .header .logo span { color: var(--nt-heading); } html[data-theme="dark"] .top-header, html[data-theme="dark"] .bottomHeader { background-color: transparent; color: var(--nt-text); } html[data-theme="dark"] .top-header a, html[data-theme="dark"] .top-header .phno { color: var(--nt-text); } html[data-theme="dark"] .navbar a, html[data-theme="dark"] .navbar .nav-link { color: #cdd7f5; } html[data-theme="dark"] .navbar a:hover, html[data-theme="dark"] .navbar .nav-link:hover, html[data-theme="dark"] .navbar .active { color: var(--nt-primary-soft); } html[data-theme="dark"] .dropdown-menu { background-color: #101832; border: 1px solid var(--nt-border); box-shadow: var(--nt-shadow); } html[data-theme="dark"] .dropdown-item { color: #cdd7f5; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(65, 84, 241, .18); color: #ffffff; } /* scrolled header keeps the dark glass (style.css forces #fff) */ html[data-theme="dark"] .header.header-scrolled { background: rgba(11, 16, 32, .92); } /* phone number in the top strip: style.css pins it navy with !important */ html[data-theme="dark"] .phno, html[data-theme="dark"] .phno:hover { color: #dfe6ff !important; -webkit-text-stroke: 0; } /* hover / active nav states — mirror style.css selectors so specificity ties break in this (later) sheet's favor, with a brighter dark-friendly accent */ html[data-theme="dark"] .navbar a:hover, html[data-theme="dark"] .navbar .active, html[data-theme="dark"] .navbar .active:focus, html[data-theme="dark"] .navbar li:hover > a { color: #9fb0ff; } /* desktop dropdown panels (style.css .navbar .dropdown ul paints them #fff) */ html[data-theme="dark"] .navbar .dropdown ul { background: #101832; border: 1px solid var(--nt-border); box-shadow: var(--nt-shadow); } html[data-theme="dark"] .navbar .dropdown ul a { color: #cdd7f5; } html[data-theme="dark"] .navbar .dropdown ul a:hover, html[data-theme="dark"] .navbar .dropdown ul .active:hover, html[data-theme="dark"] .navbar .dropdown ul li:hover > a { color: #ffffff; background-color: rgba(65, 84, 241, .18); } html[data-theme="dark"] .mobile-nav-toggle { color: var(--nt-heading); } html[data-theme="dark"] .mobile-nav-toggle.bi-x { color: #ffffff; } html[data-theme="dark"] .navbar-mobile { background: rgba(5, 8, 18, .92); } html[data-theme="dark"] .navbar-mobile > ul { background-color: #0e1530; } html[data-theme="dark"] .navbar-mobile a, html[data-theme="dark"] .navbar-mobile a:focus { color: #cdd7f5; } html[data-theme="dark"] .navbar-mobile a:hover, html[data-theme="dark"] .navbar-mobile .active, html[data-theme="dark"] .navbar-mobile li:hover > a { color: #9fb0ff; } /* mobile dropdown panels: style.css paints them #fff at higher specificity, which left light text on a white panel — repaint dark */ html[data-theme="dark"] .navbar-mobile .dropdown ul { background: #101832; border: 1px solid var(--nt-border); } html[data-theme="dark"] .navbar-mobile .dropdown ul a { color: #cdd7f5; } html[data-theme="dark"] .navbar-mobile .dropdown ul a:hover, html[data-theme="dark"] .navbar-mobile .dropdown ul .active:hover, html[data-theme="dark"] .navbar-mobile .dropdown ul li:hover > a { color: #ffffff; } /* top-strip signup + meeting button */ html[data-theme="dark"] .signup { color: #9fb0ff; border-color: #5a6cf3; } html[data-theme="dark"] .signup:hover { background-color: #4154f1; color: #ffffff !important; } html[data-theme="dark"] .meet { color: #dfe6ff; border-color: rgba(223, 230, 255, .6); background: transparent; } html[data-theme="dark"] .meet:hover { background-color: #4154f1; color: #ffffff; } /* auth dropdown (keeps backend hooks intact, only recolors) */ html[data-theme="dark"] .auth-dd-panel { background-color: #101832 !important; border: 1px solid var(--nt-border); } html[data-theme="dark"] .auth-dd-item { color: #cdd7f5 !important; } html[data-theme="dark"] .auth-dd-item:hover { background-color: rgba(65, 84, 241, .18); } html[data-theme="dark"] .auth-trigger-btn { background: transparent; border-color: var(--nt-border) !important; color: var(--nt-heading); } /* ── Hero ─────────────────────────────────────────────────────── */ html[data-theme="dark"] .hero { background: radial-gradient(1100px 520px at 12% -8%, rgba(65, 84, 241, .22), transparent 60%), radial-gradient(900px 480px at 95% 8%, rgba(45, 182, 250, .14), transparent 55%), var(--nt-bg); } html[data-theme="dark"] .hero h1 { color: #ffffff; } html[data-theme="dark"] .hero h2 { color: #b9c6ea; } /* ── Sections / generic surfaces ──────────────────────────────── */ html[data-theme="dark"] section { background-color: transparent; } html[data-theme="dark"] .section-header h2 { color: var(--nt-primary-soft); } html[data-theme="dark"] .section-header p { color: var(--nt-heading); } html[data-theme="dark"] .values .box, html[data-theme="dark"] .card, html[data-theme="dark"] .counts .count-box, html[data-theme="dark"] .services .service-box { background-color: var(--nt-surface); border-color: var(--nt-border); box-shadow: var(--nt-shadow); color: var(--nt-text); } html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-title, html[data-theme="dark"] .card-text { color: inherit; } html[data-theme="dark"] .card .card-title { color: var(--nt-heading); } html[data-theme="dark"] .counts .count-box span { color: var(--nt-heading); } html[data-theme="dark"] .counts .count-box p { color: var(--nt-muted); } /* portfolio cards (.card3 > .card1) */ html[data-theme="dark"] .card1 { background-color: rgba(255, 255, 255, .035); border: 1px solid var(--nt-border); box-shadow: var(--nt-shadow); } html[data-theme="dark"] .card1 .card-title { color: var(--nt-heading); } html[data-theme="dark"] .card1 .card-text { color: var(--nt-text); } /* portfolio filter pills are fully theme-aware in nt-components.css (token-based), so no dark-specific rules are needed here */ /* team & clients */ html[data-theme="dark"] .team-section { background-color: transparent; } html[data-theme="dark"] .clients .swiper-slide img { background: #ffffff; padding: 10px 14px; border-radius: 12px; } /* ── Forms, modals, accordions ────────────────────────────────── */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0f1730; border-color: var(--nt-border); color: var(--nt-heading); } html[data-theme="dark"] .form-control::placeholder { color: var(--nt-muted); } html[data-theme="dark"] .form-control:focus { background-color: #101a38; border-color: var(--nt-primary); color: var(--nt-heading); box-shadow: 0 0 0 .2rem rgba(65, 84, 241, .25); } html[data-theme="dark"] .modal-content { background-color: var(--nt-surface); color: var(--nt-text); border: 1px solid var(--nt-border); } html[data-theme="dark"] .input-group-text { background-color: #0f1730; border-color: var(--nt-border); color: var(--nt-text); } html[data-theme="dark"] .accordion-item { background-color: var(--nt-surface); border-color: var(--nt-border); color: var(--nt-text); } html[data-theme="dark"] .accordion-button { background-color: var(--nt-surface); color: var(--nt-heading); } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(65, 84, 241, .16); color: var(--nt-primary-soft); } html[data-theme="dark"] .accordion-body { color: var(--nt-text); } html[data-theme="dark"] .table { color: var(--nt-text); border-color: var(--nt-border); } /* ── Footer (quick links preserved, recolored only) ───────────── */ html[data-theme="dark"] .footer { background: linear-gradient(180deg, #0d1428 0%, #0a0f22 100%); border-top: 1px solid var(--nt-border); } html[data-theme="dark"] .footer .footer-top h4 { color: #eef2ff; } html[data-theme="dark"] .footer p, html[data-theme="dark"] .footer li { color: #aab6d6; } html[data-theme="dark"] .footer .footer-top .footer-links ul a { color: #aab6d6; } html[data-theme="dark"] .footer .footer-top .footer-links ul a:hover { color: var(--nt-primary-soft); } html[data-theme="dark"] .footer .footer-top .footer-links ul i { color: var(--nt-primary-soft); } html[data-theme="dark"] .footer .footer-top .social-links a { color: rgba(238, 242, 255, .65); } html[data-theme="dark"] .footer .footer-top .social-links a:hover { color: #ffffff; } html[data-theme="dark"] .footer .copyright, html[data-theme="dark"] .footer .credits { color: #aab6d6; } html[data-theme="dark"] .footer .staff-login { color: #aab6d6; } /* ── Misc widgets ─────────────────────────────────────────────── */ html[data-theme="dark"] .back-to-top { background: var(--nt-primary); } html[data-theme="dark"] .spinner-border.text-primary { color: var(--nt-primary-soft) !important; } html[data-theme="dark"] img { /* soften pure-white glare from photos on dark surfaces */ filter: brightness(.96); } html[data-theme="dark"] .btn-outline-secondary { color: #cdd7f5; border-color: var(--nt-border); }