/* ================================================================ NPAV 2026 — Dark "AI-native" Homepage Theme ---------------------------------------------------------------- Re-skins the home page to the dark navy look of the redesign reference (resources/views/home/npav-redesign.html): dark surfaces, Space Grotesk / Inter / JetBrains Mono type, subtle grid + glow. Uses the reference's full colour scheme — cyan (#00e5ff) primary + blue (#2f6fed) gradient on primary buttons, green (#1fd9a6) success ticks, and krypton purple (#9b7bff) as a tertiary accent. SCOPE: every rule is nested under `body.npav-dark`, which is emitted ONLY by pages/home.blade.php (@section('body_class', ...)). No other page is affected. Loaded AFTER npav-2026-home.css so the dark skin wins by source order + the extra body-class specificity. NO CONTENT IS REMOVED — this is a colour/skin layer only. FULL REVERT: delete this file, remove its in layouts/header.blade.php, and remove the @section('body_class') line in pages/home.blade.php. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================== */ /* 0. PALETTE + BASE */ /* ============================================================== */ body.npav-dark { /* surfaces */ --d-bg: #070b14; --d-bg-soft: #0a1020; --d-surface: #0f1830; --d-surface-2: #141f3d; --d-tint: #0c1426; /* faint off-surface for alt rows */ /* lines */ --d-border: rgba(255, 255, 255, 0.09); --d-border-soft: rgba(255, 255, 255, 0.06); --d-border-bright: rgba(0, 229, 255, 0.40); /* text */ --d-text: #eaf1fb; --d-text-dim: #c3cee0; /* M3: slightly-dimmed nav text (was hardcoded #c3cee0) */ --d-muted: #8c9bb8; --d-muted-2: #7a8aa6; /* M1: raised from #5d6b88 (3.29:1, failed AA) to #7a8aa6 (5.04:1 on surface, passes AA); still dimmer than --d-muted so hierarchy is preserved */ /* accent palette — full npav-redesign.html scheme */ --d-accent: #00e5ff; /* cyan — primary accent */ --d-blue: #2f6fed; /* blue — gradient partner / deep fills */ --d-green: #1fd9a6; /* green — success ticks */ --d-krypton: #9b7bff; /* krypton purple — tertiary accent */ --d-accent-deep: #2f6fed; /* solid "deep" fills -> blue */ --d-accent-soft: rgba(0, 229, 255, 0.12); --d-accent-glow: rgba(0, 229, 255, 0.22); /* primary button gradient (cyan -> brighter blue so the dark #04101f label stays legible across the whole button) */ --d-grad: linear-gradient(135deg, #00e5ff, #2b93e2); background-color: var(--d-bg); font-family: 'Inter', var(--npav-font-body, sans-serif); -webkit-font-smoothing: antialiased; } /* Scope the light text colour to the page content only. Setting it on would cascade into third-party widgets injected at body level (e.g. the joyz.ai chatbot bubble) and make their dark-on-light text unreadable. Chrome (top-bar/navbar/footer) is coloured explicitly. */ body.npav-dark .content-all { background-color: var(--d-bg); color: var(--d-text); } /* SAFETY: the light default text colour above is inherited by white overlay widgets (cart modal, feedback popup, select2 / toastr / nice-select dropdowns) that keep their own white background -> light-on-white would be invisible. Reset those back to default dark ink. */ body.npav-dark .modal, body.npav-dark .modal-content, body.npav-dark .modal-body, body.npav-dark .toast, body.npav-dark .select2-container, body.npav-dark .select2-dropdown, body.npav-dark .nice-select, body.npav-dark .nice-select .list, body.npav-dark .popover { color: #212529; } /* toastr toasts have their own coloured backgrounds (success/error/info) and need WHITE text — don't apply the dark-on-white reset to them. */ body.npav-dark #toast-container > div, body.npav-dark .toast-success, body.npav-dark .toast-error, body.npav-dark .toast-info, body.npav-dark .toast-warning { color: #fff !important; } /* …and keep muted text inside those white overlays readable (the global .text-muted override below would otherwise force it light-on-white). */ body.npav-dark .modal .text-muted, body.npav-dark .modal-content .text-muted, body.npav-dark .select2-dropdown .text-muted, body.npav-dark .nice-select .text-muted { color: #6c757d !important; } /* Display type for headings (kept subtle: 500/600, no 700+ banners) */ body.npav-dark h1, body.npav-dark h2, body.npav-dark h3, body.npav-dark h4, body.npav-dark h5, body.npav-dark .section-title, body.npav-dark .awards-title, body.npav-dark .ms-main-title, body.npav-dark .sa-hub-title, body.npav-dark .us-headline { font-family: 'Space Grotesk', var(--npav-font-body, sans-serif); color: var(--d-text); letter-spacing: -0.01em; } body.npav-dark .price-tag, body.npav-dark .price-value, body.npav-dark .us-counter, body.npav-dark .ms-counter-val { font-family: 'JetBrains Mono', monospace; } /* Generic body text inside the dark sections */ body.npav-dark .section-title + p, body.npav-dark .lead, body.npav-dark .section-subtitle, body.npav-dark .sa-subtitle, body.npav-dark .rl-subtitle, body.npav-dark .protect-subtitle, body.npav-dark .site-subtitle, body.npav-dark .ms-subtitle, body.npav-dark .us-sub { color: var(--d-muted); } /* ============================================================== */ /* 0b. GLOBAL CONTENT ALIGNMENT — single grid */ /* Every content .container-fluid matches the header's */ /* .container-custom-wide (1600px / 1.5rem gutters, 1700px */ /* >1800px) so all sections start on the navbar/footer edge. */ /* Chrome (navbar/top-bar/footer) already use container-custom- */ /* wide; modals/offcanvas keep their own width (excluded). */ /* This replaces the legacy per-page 2%/6%/8% insets. */ /* ============================================================== */ body.npav-dark .container-fluid { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } @media (min-width: 1800px) { body.npav-dark .container-fluid { max-width: 1700px !important; } } /* keep overlays full-width inside their own panel */ body.npav-dark .modal .container-fluid, body.npav-dark .offcanvas .container-fluid, body.npav-dark .swal-modal .container-fluid { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================== */ /* 1. TOP BAR — dark band */ /* ============================================================== */ body.npav-dark .top-bar { background-color: var(--d-bg); /* match the page/navbar so the top-bar is a seamless part of the header — no lighter band whose edges read as lines. */ color: var(--d-muted); /* core.css has a second `.top-bar { border-bottom:1px solid #e6e8eb }` rule (light-grey line between top-bar and navbar). Null it so the only header divider is the single line under the navbar. */ border-bottom: 0 !important; } body.npav-dark .top-bar a, body.npav-dark .top-bar .contact-group, body.npav-dark .top-bar .contact-group .contact-info { color: var(--d-muted); } body.npav-dark .top-bar .contact-info:hover, body.npav-dark .top-bar .contact-info:hover i { color: var(--d-accent); } body.npav-dark .top-bar .contact-group .contact-info span[aria-hidden="true"], body.npav-dark .top-bar .contact-info i { color: var(--d-accent); } body.npav-dark .top-bar .contact-group .separator { color: rgba(255, 255, 255, 0.18); } /* Social icons — dark outline chips (same style as the footer, sized down for the slim top bar; overrides base #fff square + navy glyph). */ body.npav-dark .top-bar .social-icons a { width: 28px; height: 28px; background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--d-border); border-radius: 50%; color: var(--d-muted) !important; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; } body.npav-dark .top-bar .social-icons a i { color: var(--d-muted) !important; } body.npav-dark .top-bar .social-icons a:hover { background-color: var(--d-accent-soft) !important; border-color: var(--d-accent); color: var(--d-accent) !important; } body.npav-dark .top-bar .social-icons a:hover i { color: var(--d-accent) !important; } /* ============================================================== */ /* 2. NAVBAR — dark glass, green active underline */ /* ============================================================== */ body.npav-dark .navbar { background-color: rgba(7, 11, 20, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--d-border); } body.npav-dark .navbar .nav-link { color: var(--d-muted) !important; } body.npav-dark .navbar .navbar-nav > .nav-item > .nav-link:hover, body.npav-dark .navbar .navbar-nav > .nav-item > .nav-link.active { color: var(--d-accent) !important; box-shadow: inset 0 -2px 0 var(--d-accent); } body.npav-dark .navbar .navbar-toggler { border-color: var(--d-border); } body.npav-dark .navbar .navbar-toggler-icon { filter: invert(1) brightness(1.4); } body.npav-dark .navbar .top-search .search-icon-btn i, body.npav-dark .navbar .cart-icon i, body.npav-dark .navbar .right-cta-block a i { color: var(--d-text-dim); } /* Brand logo — the SVG carries a part-width light plate that reads as a half-chip on dark + a low-contrast "AV" wordmark. Sit it on a clean white rounded chip so the full mark is legible and looks intentional. */ body.npav-dark .navbar-brand img { background: #ffffff; padding: 6px 12px; border-radius: 10px; } /* --- Buy Now button: clean text-only pill (hide the bag icon) --- */ body.npav-dark .navbar .right-cta-block .btn-npav-green { display: inline-flex; align-items: center; justify-content: center; } body.npav-dark .navbar .right-cta-block .btn-npav-green i { display: none !important; } /* --- Top-bar social icons: even spacing, centred, consistent glyph size --- */ body.npav-dark .top-bar .social-icons { display: inline-flex; align-items: center; gap: 8px; } body.npav-dark .top-bar .social-icons a { margin-right: 0; /* base sets margin-right:6px; use the flex gap */ } body.npav-dark .top-bar .social-icons a i { font-size: 13px; line-height: 1; } /* --- Search: solid dark field + focus ring + dark results dropdown --- */ body.npav-dark .navbar .search-form input, body.npav-dark .navbar #searchInput { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; border-radius: 999px; } body.npav-dark .navbar .search-form input:focus, body.npav-dark .navbar #searchInput:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; outline: none; } body.npav-dark .search-results-dropdown { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7) !important; } body.npav-dark .search-results-dropdown h6 { color: var(--d-muted-2); } body.npav-dark .search-results-dropdown .search-item-link { color: var(--d-text); } body.npav-dark .search-results-dropdown .search-item-link:hover { background: var(--d-surface-2); color: var(--d-accent); } /* Mobile: the search overlay turns fixed with a white bar by default */ @media (max-width: 768px) { body.npav-dark .top-search { background: var(--d-bg-soft) !important; } } body.npav-dark .navbar .top-search .search-icon-btn:hover i, body.npav-dark .navbar .cart-icon:hover i, body.npav-dark .navbar .right-cta-block a:hover i { color: var(--d-accent); } body.npav-dark .navbar .search-form input, body.npav-dark .navbar #searchInput { background-color: var(--d-surface); border-color: var(--d-border); color: var(--d-text); } body.npav-dark .navbar .search-results-dropdown { background-color: var(--d-surface); border: 1px solid var(--d-border); color: var(--d-text); } /* Mega menu — clean dark panel (reference look): dark rail + plain text links, no light sidebar, no white boxes. */ body.npav-dark .mega-menu-qh { background: var(--d-surface) !important; border: 1px solid var(--d-border); border-top: 3px solid var(--d-accent); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); } body.npav-dark .mega-menu-inner { background: transparent; } /* Left rail — dark (was light #f5f6f8) */ body.npav-dark .mega-left { background: var(--d-bg-soft) !important; border-right: 1px solid var(--d-border) !important; } body.npav-dark .mega-tabs .tab-item { color: var(--d-muted); border-left-color: transparent; } body.npav-dark .mega-tabs .tab-item:hover, body.npav-dark .mega-tabs .tab-item.active { color: var(--d-accent) !important; background: var(--d-surface) !important; border-left-color: var(--d-accent) !important; } /* Right panel — plain text links instead of white boxes */ body.npav-dark .mega-right { background: transparent; } body.npav-dark .mega-tab-content a { background: transparent !important; border: 1px solid transparent !important; color: var(--d-muted) !important; box-shadow: none !important; } body.npav-dark .mega-tab-content a:hover { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-accent) !important; transform: none !important; box-shadow: none !important; } /* Editions Compare CTA -> gradient button (matches Buy Now) */ body.npav-dark .mega-tab-content .compare-link { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark .mega-tab-content .compare-link:hover { background: var(--d-grad) !important; filter: brightness(1.08); color: #04101f !important; } /* NEW tags */ body.npav-dark .new-tag { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; } body.npav-dark .mega-tab-content a:hover .new-tag { background: var(--d-accent) !important; color: #04101f !important; } /* --- ALL-PRODUCTS layout: every category visible at once, no tabs --- */ /* (CSS-only; the tab rail is just hidden and all panels are forced open, so the JS tab logic + other pages are untouched.) */ body.npav-dark .mega-left { display: none !important; } body.npav-dark .mega-menu-qh { width: 1040px; } body.npav-dark .mega-menu-inner { min-height: 0; } /* Right panel — fixed 4-column grid (grid can't overlap; CSS multicol overlaps tall blocks like Business Security in Chromium). */ body.npav-dark .mega-right { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 30px; align-items: start; padding: 26px 32px; width: 100%; } /* Each category = one grid cell */ body.npav-dark .mega-tab-content { display: block !important; margin: 0; } /* Category header (mono uppercase) via ::before — reference column style */ body.npav-dark .mega-tab-content::before { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted-2); margin: 0 0 10px; } body.npav-dark #home-security::before { content: "For Home"; } body.npav-dark #business-security::before { content: "Business Security"; } body.npav-dark #business-products::before { content: "Business Products"; } body.npav-dark #backup-products::before { content: "Backup & Utilities"; } body.npav-dark #iot-gadgets::before { content: "IoT Gadgets"; } body.npav-dark #mobile-products::before { content: "Mobile Products"; } body.npav-dark #pc-booster::before { content: "PC Booster"; } /* Links stacked as a plain list */ body.npav-dark .mega-tab-content a { display: block !important; width: 100%; padding: 7px 0 !important; margin: 0 !important; border: none !important; background: transparent !important; color: var(--d-muted) !important; font-size: 15px; transition: color 0.15s ease, padding-left 0.15s ease; } body.npav-dark .mega-tab-content a:hover { color: var(--d-accent) !important; background: transparent !important; padding-left: 4px !important; } /* Editions Compare -> simple cyan text link (not a button) in the column */ body.npav-dark .mega-tab-content .compare-link { background: transparent !important; color: var(--d-accent) !important; justify-content: flex-start; text-transform: none; font-weight: 500; margin-top: 6px !important; padding: 6px 0 !important; } body.npav-dark .mega-tab-content .compare-link:hover { filter: none; padding-left: 4px !important; } /* Navbar dropdowns (Dealers / Help etc.) */ body.npav-dark .navbar .dropdown-menu { background-color: var(--d-surface); border: 1px solid var(--d-border); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); } body.npav-dark .navbar .dropdown-item { color: var(--d-muted); } body.npav-dark .navbar .dropdown-item:hover { background-color: var(--d-surface-2); color: var(--d-accent); } body.npav-dark .navbar .dropdown-header, body.npav-dark .navbar .head-of-link { color: var(--d-text); } body.npav-dark .navbar .dropdown-divider { border-color: var(--d-border); } /* Top-level nav links — a touch brighter than body muted for legibility */ body.npav-dark .navbar .navbar-nav > .nav-item > .nav-link { color: var(--d-text-dim) !important; } /* dropdown caret follows the link colour */ body.npav-dark .navbar .dropdown-toggle::after { color: currentColor; } /* Search field placeholder + caret */ body.npav-dark .navbar #searchInput::placeholder { color: var(--d-muted-2); } body.npav-dark .navbar #searchInput { caret-color: var(--d-accent); } /* Renewal (ghost) button in the right CTA block — themed for dark */ body.npav-dark .navbar .right-cta-block .btn-npav-outline { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark .navbar .right-cta-block .btn-npav-outline:hover { border-color: var(--d-accent) !important; color: var(--d-accent) !important; } /* Mobile: expanded menu becomes a solid dark panel (not see-through) */ @media (max-width: 991px) { body.npav-dark .navbar .navbar-collapse { background: var(--d-bg-soft); border: 1px solid var(--d-border); border-radius: 12px; margin-top: 10px; padding: 14px 16px; } body.npav-dark .navbar .navbar-nav > .nav-item > .nav-link { box-shadow: none; } } /* ============================================================== */ /* 3. SECTION SURFACES — flip every light section root to dark */ /* ============================================================== */ body.npav-dark .content-section.gray-bg, body.npav-dark .content-section, body.npav-dark .faq-section, body.npav-dark .other-sites-section, body.npav-dark .protect-section, body.npav-dark .testimonial-section, body.npav-dark .awards-section { background-color: var(--d-bg); } body.npav-dark .ms-wrapper, body.npav-dark .partner-feedback-section, body.npav-dark .pricing-plans-section, body.npav-dark .users-secured { background-color: var(--d-bg-soft); } /* Why Net Protector — animated radar (the reference hero visual, ported) */ body.npav-dark .content-section { position: relative; background-color: var(--d-bg); overflow: hidden; } body.npav-dark .content-section .container-custom-wide { position: relative; z-index: 1; } body.npav-dark .why-radar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 560px; height: 560px; max-width: 80vw; display: flex; align-items: center; justify-content: center; z-index: 0; /* full-section backdrop, behind the cards (container is z-index:1) */ opacity: 0.4; pointer-events: none; } body.npav-dark .why-radar .ring { position: absolute; border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 50%; } body.npav-dark .why-radar .ring.r1 { width: 100%; height: 100%; } body.npav-dark .why-radar .ring.r2 { width: 74%; height: 74%; } body.npav-dark .why-radar .ring.r3 { width: 48%; height: 48%; } body.npav-dark .why-radar .sweep { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 229, 255, 0.35), transparent 28%); animation: whyRadarSpin 4.5s linear infinite; } body.npav-dark .why-radar .core { width: 23%; height: 23%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #00e5ff, #2b93e2 70%); box-shadow: 0 0 60px 6px rgba(0, 229, 255, 0.45); display: flex; align-items: center; justify-content: center; color: #04101f; z-index: 3; } body.npav-dark .why-radar .core svg { width: 42%; height: 42%; } body.npav-dark .why-radar .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #1fd9a6; box-shadow: 0 0 0 4px rgba(31, 217, 166, 0.18); } @keyframes whyRadarSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body.npav-dark .why-radar .sweep { animation: none; } } @media (max-width: 1199px) { /* hide the radar so the cards stay uncluttered on smaller screens */ body.npav-dark .why-radar { display: none; } } /* Sections that carried a faint grid / warm tint -> dark + green grid */ body.npav-dark .security-arch-section, body.npav-dark .ransomware-layers-section { background-color: var(--d-bg-soft); background-image: linear-gradient(to right, rgba(31, 217, 166, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 217, 166, 0.05) 1px, transparent 1px); background-size: 30px 30px; } /* Product/tabs section — was a warm cream bg + orange orbit rings */ body.npav-dark .tabs-section { background-color: var(--d-bg); } body.npav-dark .tabs-section::before { border-color: rgba(31, 217, 166, 0.22); background: radial-gradient(circle, rgba(31, 217, 166, 0.10) 0%, rgba(31, 217, 166, 0.03) 42%, transparent 68%); } body.npav-dark .tabs-section::after { border-color: rgba(31, 217, 166, 0.16); } /* ============================================================== */ /* 4. CARDS / SURFACES — white -> dark surface, hairline borders */ /* ============================================================== */ body.npav-dark .feature-card, body.npav-dark .product-card, body.npav-dark .plan-card, body.npav-dark .testimonial-card, body.npav-dark .award-badge, body.npav-dark .ms-stat-card, body.npav-dark .sa-pillar, body.npav-dark .sa-hub, body.npav-dark .rl-card, body.npav-dark .rl-trust, body.npav-dark .protect-card, body.npav-dark .other-sites-section .site-card, body.npav-dark .us-band, body.npav-dark .us-substat, body.npav-dark .help-cta-section .help-cta, body.npav-dark .help-cta-section .help-channel, body.npav-dark .faq-section .accordion-item { background-color: var(--d-surface) !important; background-image: none !important; border-color: var(--d-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); color: var(--d-text); } /* C2: recommended-products carousel card. core.css sets `#productCarousel .product-card { background:#fff }` (1 ID) which out-specifies the generic `body.npav-dark .product-card` group above, so it stayed white on dark pages. This higher-specificity override restores the dark surface. Light theme (no body.npav-dark) is unaffected. */ body.npav-dark #productCarousel .product-card { background-color: var(--d-surface) !important; border-color: var(--d-border) !important; color: var(--d-text); } /* Hover states -> brighten border + green glow (no light bg returns) */ body.npav-dark .content-section .feature-card:hover, body.npav-dark .tabs-section .product-card:hover, body.npav-dark .pricing-plans-section .plan-card:hover, body.npav-dark .testimonial-section .testimonial-card:hover, body.npav-dark .awards-section .award-badge:hover, body.npav-dark .ms-wrapper .ms-stat-card:hover, body.npav-dark .security-arch-section .sa-pillar:hover, body.npav-dark .ransomware-layers-section .rl-card:hover, body.npav-dark .protect-section .protect-card:hover, body.npav-dark .other-sites-section .site-card:hover, body.npav-dark .users-secured .us-substat:hover, body.npav-dark .help-cta-section .help-channel:hover { background-color: var(--d-surface-2) !important; border-color: var(--d-border-bright) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--d-accent-glow); } /* Why-NPAV card had a green top-accent inset on hover — keep it */ body.npav-dark .content-section .feature-card:hover { box-shadow: inset 0 3px 0 0 var(--d-accent), 0 10px 30px rgba(0, 0, 0, 0.5); } /* Keep text light on hover (light theme reset it to dark ink) */ body.npav-dark .content-section .feature-card:hover h3 { color: var(--d-text); } body.npav-dark .content-section .feature-card:hover p { color: var(--d-muted); } /* Recommended plan — green-tinted dark surface + emphasis border */ body.npav-dark .pricing-plans-section .plan-card.recommended { background-color: var(--d-surface-2) !important; border: 2px solid var(--d-accent) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--d-accent-glow); } /* Product image panel — was warm cream */ body.npav-dark .tabs-section .card-img-top-wrapper { background-color: var(--d-surface-2); } body.npav-dark .tabs-section .card-img-top-wrapper::before { border-color: rgba(31, 217, 166, 0.22); background: radial-gradient(circle, rgba(31, 217, 166, 0.10) 0%, transparent 66%); } body.npav-dark .tabs-section .card-img-top-wrapper::after { border-color: rgba(31, 217, 166, 0.16); } /* Inner dividers inside cards */ body.npav-dark .sa-hub-top, body.npav-dark .sa-hub-foot, body.npav-dark .help-cta-section .help-channels, body.npav-dark .help-cta-section .help-trust { border-color: var(--d-border); } body.npav-dark hr, body.npav-dark .faq-section .faq-tabs { border-color: var(--d-border); } /* ============================================================== */ /* 5. TEXT TONES inside cards/sections */ /* ============================================================== */ body.npav-dark .feature-card h3, body.npav-dark .product-card .card-title, body.npav-dark .plan-title, body.npav-dark .sa-pillar-text h4, body.npav-dark .rl-card-title, body.npav-dark .protect-title, body.npav-dark .site-name, body.npav-dark .us-substat-num, body.npav-dark .rl-caption-title, body.npav-dark .help-channel-value, body.npav-dark .testimonial-card .client-name, body.npav-dark .award-badge .award-label, body.npav-dark .ms-card-label { color: var(--d-text) !important; } body.npav-dark .feature-card p, body.npav-dark .product-card .card-text, body.npav-dark .sa-pillar-text p, body.npav-dark .rl-card-desc, body.npav-dark .protect-desc, body.npav-dark .site-desc, body.npav-dark .us-substat-lbl, body.npav-dark .sa-hub-desc, body.npav-dark .help-channel-label, body.npav-dark .testimonial-card blockquote, body.npav-dark .pricing-plans-section .plan-features .check-item, body.npav-dark .price-duration, body.npav-dark .product-info-text, body.npav-dark .mrp-tag { color: var(--d-muted) !important; } /* Muted labels / captions */ body.npav-dark .sa-hub-label, body.npav-dark .rl-caption-eyebrow, body.npav-dark .help-trust-item { color: var(--d-muted-2); } body.npav-dark .help-trust-item { color: var(--d-muted); } /* Awards certification run-on line + subtitle */ body.npav-dark .awards-section .awards-cert-line { color: var(--d-muted); } body.npav-dark .awards-section .awards-subtitle { color: var(--d-muted); } /* ============================================================== */ /* 6. ACCENTS — links, icons, eyebrows, prices, counters */ /* ============================================================== */ /* H6: core.css overrides .secondary-link:hover (L9193) and a.down-link:hover (L9433) to orange #FF9800, which leaks on dark pages that have no page-scoped override. Align the hover with the dark content-link colour (--d-green) site-wide. */ body.npav-dark .secondary-link:hover, body.npav-dark a.down-link:hover { color: var(--d-green) !important; } /* Eyebrow pills */ body.npav-dark .npav-eyebrow, body.npav-dark .sa-eyebrow, body.npav-dark .rl-eyebrow, body.npav-dark .users-secured .us-eyebrow, body.npav-dark .help-cta-section .help-cta-eyebrow, body.npav-dark .sa-hub-badge { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; font-family: 'JetBrains Mono', monospace; } /* Icon tiles -> dark surface w/ emerald glyph (hover/active still fill green) */ /* Why-section icon tiles now hold inline SVGs — centre + size them (they inherit the cyan accent via currentColor) */ body.npav-dark .content-section .feature-icon-wrapper { display: flex; align-items: center; justify-content: center; } body.npav-dark .content-section .feature-card svg { width: 26px; height: 26px; } body.npav-dark .feature-icon-wrapper, body.npav-dark .protect-section .protect-icon, body.npav-dark .users-secured .us-substat-icon, body.npav-dark .ransomware-layers-section .rl-card-icon, body.npav-dark .security-arch-section .sa-pillar-num, body.npav-dark .security-arch-section .sa-hub-icon, body.npav-dark .help-cta-section .help-channel-icon { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; } body.npav-dark .security-arch-section .sa-pillar:hover .sa-pillar-num, body.npav-dark .security-arch-section .sa-pillar.active .sa-pillar-num, body.npav-dark .security-arch-section .sa-hub-icon.is-active, body.npav-dark .protect-section .protect-card:hover .protect-icon, body.npav-dark .ransomware-layers-section .rl-card:hover .rl-card-icon { background: var(--d-accent) !important; color: #04101f !important; } /* Prices -> emerald (anchor element on dark) */ body.npav-dark .tabs-section .product-card .price-tag, body.npav-dark .tabs-section .product-card .price-tag .currency-symbol, body.npav-dark .pricing-plans-section .price-value, body.npav-dark .ms-counter-val, body.npav-dark .users-secured .us-counter { color: var(--d-accent) !important; } /* Text links / "more" / visit / check icons */ body.npav-dark .kcard a.more, body.npav-dark .other-sites-section .site-visit, body.npav-dark .protect-section .protect-link, body.npav-dark .rl-card-layer, body.npav-dark .pricing-plans-section .plan-features .check-item i, body.npav-dark .rl-trust-item .bx, body.npav-dark .help-trust-item .bx, body.npav-dark .testimonial-section .testimonial-verified { color: var(--d-accent) !important; } body.npav-dark .protect-section .protect-link .bx, body.npav-dark .other-sites-section .site-visit .bx { color: var(--d-accent) !important; background: transparent !important; } /* --- "What to protect" decision cards: Recommended product + CTA button --- */ /* 4-up on desktop (was 3) */ body.npav-dark .protect-section .protect-grid { grid-template-columns: repeat(4, 1fr); max-width: 1200px; } /* desc fills space so the Recommended block + CTA align across all cards */ body.npav-dark .protect-section .protect-desc { flex: 1 1 auto; margin-bottom: 16px; } /* "Recommended" + product name, separated by a hairline */ body.npav-dark .protect-section .protect-rec { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--d-border); } body.npav-dark .protect-section .protect-rec-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted-2); } body.npav-dark .protect-section .protect-rec-product { font-size: 1.0625rem; font-weight: 600; color: var(--d-accent); } /* CTA — outlined pill that fills on card hover (the whole card is the link) */ body.npav-dark .protect-section .protect-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid var(--d-border-bright); border-radius: 8px; color: var(--d-accent); font-size: 0.9rem; font-weight: 500; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } body.npav-dark .protect-section .protect-cta .bx { color: inherit; background: transparent; transition: transform 180ms ease; } body.npav-dark .protect-section .protect-card:hover .protect-cta, body.npav-dark .protect-section .protect-card:focus-visible .protect-cta { background: var(--d-accent); border-color: var(--d-accent); color: #04101f; } body.npav-dark .protect-section .protect-card:hover .protect-cta .bx { transform: translateX(3px); } @media (max-width: 991px) { body.npav-dark .protect-section .protect-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; } } @media (max-width: 575px) { body.npav-dark .protect-section .protect-grid { grid-template-columns: 1fr; } } /* Success ticks / verified badge -> green (the reference's success hue) */ body.npav-dark .ransomware-layers-section .rl-trust-item .bx, body.npav-dark .help-cta-section .help-trust-item .bx, body.npav-dark .testimonial-section .testimonial-verified { color: var(--d-green) !important; } /* Disabled feature rows in pricing */ body.npav-dark .pricing-plans-section .plan-features .check-item.disabled { color: var(--d-muted-2) !important; } body.npav-dark .pricing-plans-section .plan-features .check-item.disabled i { color: var(--d-muted-2) !important; } /* Site icon tiles + logos legibility on dark */ body.npav-dark .other-sites-section .site-icon { background-color: var(--d-surface-2); border-color: var(--d-border); } /* Award certification logos — third-party badges are designed for light backgrounds and arrive with mismatched internal boxes. Give each a uniform white tile so they read consistently on the dark cards. */ body.npav-dark .awards-section .award-badge img { background: #ffffff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* ============================================================== */ /* 7. BUTTONS — keep brand green fill; outline -> emerald on dark */ /* ============================================================== */ body.npav-dark .btn-npav-green { background: var(--d-grad) !important; border: none !important; color: #04101f !important; font-weight: 600; box-shadow: 0 8px 22px -6px var(--d-accent-glow); } body.npav-dark .btn-npav-green:hover { background: var(--d-grad) !important; filter: brightness(1.08); border: none !important; color: #04101f !important; box-shadow: 0 10px 28px -6px var(--d-accent-glow); } /* Product-card Buy Now carries a higher-specificity green !important from the modernization layer — override it to the gradient too. */ body.npav-dark .tabs-section .product-card .btn-npav-green { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } body.npav-dark .tabs-section .product-card .btn-npav-green:hover { background: var(--d-grad) !important; filter: brightness(1.08); color: #04101f !important; } body.npav-dark .btn-npav-outline { background-color: transparent !important; border-color: var(--d-accent) !important; color: var(--d-accent) !important; } body.npav-dark .btn-npav-outline:hover { background-color: var(--d-accent) !important; color: #04101f !important; } /* Pricing comparison pill + arrow */ body.npav-dark .pricing-plans-section .pricing-compare-link { border-color: var(--d-accent); color: var(--d-accent); } body.npav-dark .pricing-plans-section .pricing-compare-link i { color: var(--d-accent) !important; background: transparent !important; } body.npav-dark .pricing-plans-section .pricing-compare-link:hover { background-color: var(--d-accent); color: #04101f; } body.npav-dark .pricing-plans-section .pricing-compare-link:hover i { color: #04101f !important; } /* ============================================================== */ /* 7b. PRICING — conversion polish (final decision area) */ /* Stronger plan differentiation, clearer upgrade stacking, */ /* and decisive emphasis on the recommended plan. Solid */ /* surfaces only — no gradients / glass / neon. */ /* ============================================================== */ /* Tier eyebrow — Essential / Advanced / Premium */ body.npav-dark .pricing-plans-section .plan-tier { display: inline-block; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted-2); } body.npav-dark .pricing-plans-section .plan-card.recommended .plan-tier { color: var(--d-accent); } /* Price row — value + duration + MRP + save on one baseline */ body.npav-dark .pricing-plans-section .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 8px; } body.npav-dark .pricing-plans-section .price-mrp { font-size: 0.95rem; color: var(--d-muted-2); text-decoration: line-through; } body.npav-dark .pricing-plans-section .price-save { align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--d-green); background: rgba(31, 217, 166, 0.14); padding: 2px 9px; border-radius: 999px; } /* Per-month framing under the annual price — value communication */ body.npav-dark .pricing-plans-section .plan-permonth { margin: 8px 0 0; font-size: 0.85rem; color: var(--d-muted-2); } /* "Best for:" audience line */ body.npav-dark .pricing-plans-section .plan-bestfor { margin: 12px 0 0; font-size: 0.9rem; color: var(--d-text); } body.npav-dark .pricing-plans-section .plan-bestfor .bf-label { color: var(--d-muted); font-weight: 500; margin-right: 4px; } /* Compare-editions — quiet text link (not a button) so focus stays on Buy Now */ body.npav-dark .pricing-plans-section .pricing-compare-wrap { margin-top: 28px; } body.npav-dark .pricing-plans-section .pricing-compare-note { color: var(--d-muted-2); font-size: 0.9rem; margin-right: 8px; } body.npav-dark .pricing-plans-section .pricing-compare-textlink { color: var(--d-accent); font-size: 0.9rem; font-weight: 500; text-decoration: none; } body.npav-dark .pricing-plans-section .pricing-compare-textlink:hover { text-decoration: underline; } /* "Everything in " — the upgrade-stacking anchor. Visually distinct so users instantly see what each tier adds. */ body.npav-dark .pricing-plans-section .check-item.carryover { background: var(--d-accent-soft); border: 1px solid var(--d-border-bright); border-radius: 8px; padding: 11px 14px; margin-bottom: 10px; min-height: 0; font-weight: 500; color: var(--d-text) !important; } body.npav-dark .pricing-plans-section .check-item.carryover i { color: var(--d-accent) !important; } /* Included vs not-included — green ticks (reference uses green for plan checks), so the gap (reason to upgrade) reads clearly against cyan. */ body.npav-dark .pricing-plans-section .check-item i.bx-check { color: var(--d-green) !important; } body.npav-dark .pricing-plans-section .check-item.disabled { color: var(--d-muted-2) !important; opacity: 1; } body.npav-dark .pricing-plans-section .check-item.disabled i.bx-x { color: var(--d-muted-2) !important; } /* Trust strip chips above the cards */ body.npav-dark .pricing-plans-section .trust-item { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--d-border); color: var(--d-muted); } /* ---- Recommended plan: decisive emphasis ---- */ /* Solid darker surface + 2px accent frame + accent top bar (no glow ring) */ body.npav-dark .pricing-plans-section .plan-card.recommended { background-color: var(--d-surface-2) !important; border: 2px solid var(--d-accent) !important; border-top: 4px solid var(--d-accent) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important; } body.npav-dark .pricing-plans-section .plan-card.recommended .plan-title { color: var(--d-accent); } body.npav-dark .pricing-plans-section .plan-card.recommended .price-value { color: var(--d-accent) !important; } /* "Most Popular" badge — centred, prominent, solid accent */ body.npav-dark .pricing-plans-section .plan-card.recommended .ribbon { left: 50%; right: auto; top: -14px; transform: translateX(-50%); background-color: var(--d-accent) !important; color: #04101f !important; font-weight: 600; letter-spacing: 0.03em; padding: 6px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); white-space: nowrap; } /* Lift + scale the recommended card on desktop so the eye lands on it */ @media (min-width: 992px) { body.npav-dark .pricing-plans-section .plan-card.recommended { transform: translateY(-10px); z-index: 2; } body.npav-dark .pricing-plans-section .plan-card.recommended:hover { transform: translateY(-14px); } } /* Recommended Buy Now = the dominant action (brighter, slightly larger) */ body.npav-dark .pricing-plans-section .plan-card.recommended .btn-npav-green { background: var(--d-grad) !important; border: none !important; color: #04101f !important; font-weight: 600; box-shadow: 0 8px 22px -4px var(--d-accent-glow); } body.npav-dark .pricing-plans-section .plan-card.recommended .btn-npav-green:hover { background: var(--d-grad) !important; filter: brightness(1.08); } /* Save badge stays amber (deal colour reads well on dark too) */ body.npav-dark .tabs-section .product-card .save-tag { background-color: #f59e0b; color: #1a1208; } /* Bootstrap .text-muted uses !important -> readable muted on dark (covers the products subtitle + pricing-plans subtitle). */ body.npav-dark .text-muted { color: var(--d-muted) !important; } /* Product toggle — the pill container was a light #f7f3f3 capsule */ body.npav-dark .tabs-section .nav-pills { background-color: var(--d-surface); border: 1px solid var(--d-border); } /* Inactive toggle buttons — muted text + dark hairline border */ body.npav-dark .tabs-section .nav-pills .nav-link { color: var(--d-muted) !important; border-color: var(--d-border) !important; } body.npav-dark .tabs-section .nav-pills .nav-link:hover { color: var(--d-text) !important; border-color: var(--d-border-bright) !important; } body.npav-dark .tabs-section .nav-pills .nav-link.active { background-color: var(--d-accent-deep) !important; border-color: var(--d-accent-deep) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } /* ============================================================== */ /* 8. FAQ — reference layout: free-standing pill tabs + a single */ /* full-width column of hairline-divider rows with a "+" toggle */ /* (replaces the boxed 2-column accordion cards). */ /* ============================================================== */ /* Tabs — standalone rounded pills, no bordered container */ body.npav-dark .faq-section .faq-tabs { border: none; padding: 0; gap: 10px; display: flex; flex-wrap: wrap; justify-content: center; } body.npav-dark .faq-section .faq-tabs .nav-item { margin: 0; } body.npav-dark .faq-section .faq-tabs .nav-link { color: var(--d-muted); background-color: transparent; border: 1px solid var(--d-border); border-radius: 999px; padding: 8px 20px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; } body.npav-dark .faq-section .faq-tabs .nav-link:hover { color: var(--d-text); border-color: var(--d-border-bright); background-color: transparent; } body.npav-dark .faq-section .faq-tabs .nav-link.active { background-color: var(--d-accent); border-color: var(--d-accent); color: #04101f; } /* Collapse the two card columns into one full-width list */ body.npav-dark .faq-section .tab-pane > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } /* Constrain the list to a readable measure, centred under the heading */ body.npav-dark .faq-section .faq-accordion-column { max-width: 880px; margin: 0 auto; } /* Rows — no card box, just a hairline divider between questions */ body.npav-dark .faq-section .faq-accordion-column .accordion-item { background: transparent !important; background-image: none !important; border: none !important; border-bottom: 1px solid var(--d-border) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } body.npav-dark .faq-section .faq-accordion-column .accordion-item:hover { box-shadow: none !important; border-bottom-color: var(--d-border-bright) !important; } /* Question button */ body.npav-dark .faq-section .accordion-button { background: transparent !important; color: var(--d-text) !important; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 500; padding: 20px 6px; } body.npav-dark .faq-section .accordion-button:not(.collapsed) { color: var(--d-accent) !important; background: transparent !important; border-bottom: none; } /* "+" toggle that rotates into "×" when open (was the circle SVG icon) */ body.npav-dark .faq-section .accordion-button::after { content: "+"; background-image: none !important; width: auto; height: auto; margin-left: auto; font-size: 1.6rem; line-height: 1; font-weight: 400; color: var(--d-accent); filter: none; transform: none; transition: transform 0.25s ease; } body.npav-dark .faq-section .accordion-button:not(.collapsed)::after { content: "+"; background-image: none !important; transform: rotate(45deg); filter: none; color: var(--d-accent); } /* Answer — plain text under the row, no card fill */ body.npav-dark .faq-section .accordion-body { background: transparent !important; color: var(--d-muted) !important; padding: 0 6px 22px; } body.npav-dark .faq-section .accordion-body a { color: var(--d-accent); } /* ============================================================== */ /* 8b. EXPERT GUIDANCE — reference CTA band */ /* Prominent rounded band, subtle emerald/blue wash + accent */ /* border; lead text left, ghost + filled pills beside it. */ /* ============================================================== */ body.npav-dark .help-cta-section .help-cta { max-width: 1180px; background: var(--d-surface) !important; border: 1px solid var(--d-border-bright) !important; border-radius: 24px; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7); padding: 52px 48px; } /* Lead block left, actions right (stack on small screens) */ body.npav-dark .help-cta-section .help-cta-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; text-align: left; } body.npav-dark .help-cta-section .help-cta-lead { flex: 1 1 460px; min-width: 280px; } body.npav-dark .help-cta-section .help-cta-eyebrow { margin-bottom: 14px; } body.npav-dark .help-cta-section .help-cta-sub { margin-left: 0; margin-right: 0; max-width: 560px; } /* Actions — pill buttons; lined up with the heading (not floating mid-block) */ body.npav-dark .help-cta-section .help-cta-btns { margin-top: 38px; flex: 0 0 auto; justify-content: flex-start; } body.npav-dark .help-cta-section .help-cta-btns .btn { border-radius: 999px; } body.npav-dark .help-cta-section .help-cta-btns .btn-npav-green { background: var(--d-grad) !important; border: none !important; color: #04101f !important; box-shadow: 0 8px 22px -4px var(--d-accent-glow); } body.npav-dark .help-cta-section .help-cta-btns .btn-npav-green:hover { background: var(--d-grad) !important; filter: brightness(1.08); } body.npav-dark .help-cta-section .help-cta-btns .btn-npav-outline { background-color: rgba(255, 255, 255, 0.04) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark .help-cta-section .help-cta-btns .btn-npav-outline:hover { border-color: var(--d-accent) !important; color: var(--d-accent) !important; background-color: rgba(255, 255, 255, 0.04) !important; } @media (max-width: 767px) { body.npav-dark .help-cta-section .help-cta { padding: 32px 22px; } body.npav-dark .help-cta-section .help-cta-main { text-align: left; } body.npav-dark .help-cta-section .help-cta-btns { margin-top: 4px; } body.npav-dark .help-cta-section .help-cta-btns .btn { width: auto; } } /* ============================================================== */ /* 9. RANSOMWARE / ARCH visuals — recolour rings & dividers */ /* ============================================================== */ body.npav-dark .ransomware-layers-section .rl-ring { border-color: var(--d-border); background: rgba(255, 255, 255, 0.02); } body.npav-dark .ransomware-layers-section .rl-ring.lit { border-color: var(--d-accent); background: var(--d-accent-soft); box-shadow: 0 0 0 4px var(--d-accent-glow); } body.npav-dark .ransomware-layers-section .rl-core { background: var(--d-accent-deep); color: #fff; box-shadow: 0 8px 22px var(--d-accent-glow); } body.npav-dark .security-arch-section .sa-hub-dot { background: var(--d-accent); } /* Ransomware trust strip — labels were dark gray (#374151) on the dark card */ body.npav-dark .ransomware-layers-section .rl-trust-item { color: var(--d-text); } body.npav-dark .ransomware-layers-section .rl-trust-item .bx { color: var(--d-accent); } /* ============================================================== */ /* 10. STATISTICS icon holders — keep tasteful variety on dark */ /* ============================================================== */ /* Stat tiles use the full reference palette: green / cyan / blue / krypton. Tinted holder + saturated glyph keeps contrast on dark (white-on-bright would wash out). */ body.npav-dark .ms-wrapper .ms-bg-green { background: rgba(31, 217, 166, 0.14) !important; } body.npav-dark .ms-wrapper .ms-bg-orange { background: rgba(0, 229, 255, 0.12) !important; } body.npav-dark .ms-wrapper .ms-bg-blue { background: rgba(47, 111, 237, 0.16) !important; } body.npav-dark .ms-wrapper .ms-bg-red { background: rgba(155, 123, 255, 0.16) !important; } body.npav-dark .ms-wrapper .ms-bg-green i { color: var(--d-green) !important; } body.npav-dark .ms-wrapper .ms-bg-orange i { color: var(--d-accent) !important; } body.npav-dark .ms-wrapper .ms-bg-blue i { color: var(--d-blue) !important; } body.npav-dark .ms-wrapper .ms-bg-red i { color: var(--d-krypton) !important; } body.npav-dark .ms-wrapper .ms-divider { background: var(--d-accent) !important; } body.npav-dark .ms-wrapper .ms-counter-val::after, body.npav-dark .users-secured .us-counter::after, body.npav-dark .users-secured .us-substat-plus { color: var(--d-accent) !important; } /* ============================================================== */ /* 11. FOOTER — drop the footer.png image, use the dark navy */ /* palette with a faint top hairline + green glow seam. */ /* ============================================================== */ body.npav-dark footer { background-image: none !important; background-color: var(--d-bg-soft); border-top: 1px solid var(--d-border); box-shadow: inset 0 1px 0 var(--d-accent-glow); color: var(--d-text); } /* Subtle radial glow seam at the top of the footer (matches hero/awards) */ body.npav-dark footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 720px; max-width: 90%; height: 1px; background: linear-gradient(90deg, transparent, var(--d-accent-glow), transparent); pointer-events: none; } body.npav-dark footer .footer-top h5 { color: var(--d-text); } body.npav-dark footer .footer-brand-info { color: var(--d-muted); } /* Footer logo — clean white chip (matches navbar) so the dark wordmark reads */ body.npav-dark footer .npav-logo { background: #ffffff; padding: 8px 12px; border-radius: 10px; } body.npav-dark footer .footer-link-list .nav-link { color: var(--d-muted); } body.npav-dark footer .footer-link-list .nav-link:hover { color: var(--d-accent); } body.npav-dark footer hr { border-color: var(--d-border); opacity: 1; } body.npav-dark footer .footer-copyright, body.npav-dark footer .footer-copyright a { color: var(--d-muted); } body.npav-dark footer .footer-copyright a:hover { color: var(--d-accent); } /* Social icons — base CSS makes them white squares with navy glyphs (#fff bg + #0b2a55 !important). Restyle as dark outline chips. */ body.npav-dark footer .social-icons a { width: 38px; height: 38px; background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--d-border); border-radius: 50%; color: var(--d-muted) !important; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; } body.npav-dark footer .social-icons a i { color: var(--d-muted) !important; } body.npav-dark footer .social-icons a:hover { background-color: var(--d-accent-soft) !important; border-color: var(--d-accent); color: var(--d-accent) !important; } body.npav-dark footer .social-icons a:hover i { color: var(--d-accent) !important; } /* CTA cards — dark surface tiles */ body.npav-dark footer .footer-cta-left, body.npav-dark footer .footer-cta-right { background: var(--d-surface) !important; border: 1px solid var(--d-border); } body.npav-dark footer .footer-cta-card:hover { border-color: var(--d-border-bright); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--d-accent-glow); } body.npav-dark footer .footer-cta-card p, body.npav-dark footer .footer-cta-card .cta-arrow { color: var(--d-text) !important; } body.npav-dark footer .footer-cta-card p:not(.fw-bold) { color: var(--d-muted) !important; } body.npav-dark footer .footer-cta-card .cta-arrow { color: var(--d-accent) !important; } /* ============================================================== */ /* 12. MISC — particles glow tweak, scrollbar accents, reveal */ /* ============================================================== */ body.npav-dark #scrollTopBtn { background-color: var(--d-accent-deep); color: #fff; } /* Testimonials — drop the reviews.png blur overlay; use a dark navy field with a faint emerald glow so the cards read on the dark theme. */ body.npav-dark .testimonial-section { background-color: var(--d-bg); } body.npav-dark .testimonial-section .section-background-blur { background-image: radial-gradient(680px 420px at 85% 12%, var(--d-accent-soft), transparent 60%), radial-gradient(560px 420px at 8% 88%, rgba(47, 111, 237, 0.10), transparent 60%) !important; opacity: 1; filter: none; } /* Header centered to match the centered eyebrow */ body.npav-dark .testimonial-section .section-title, body.npav-dark .testimonial-section .section-subtitle { text-align: center; } body.npav-dark .testimonial-section .section-subtitle { max-width: 720px; margin-left: auto; margin-right: auto; } /* The carousel column was sized (col-xl-8) to leave room for the old reviews.png on the right. With the image gone, let it span full width and centre so the section isn't lopsided. */ body.npav-dark .testimonial-section .testimonial-inner-row { justify-content: center; } body.npav-dark .testimonial-section .testimonial-inner-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Carousel arrows on testimonials — dark surface + emerald chevron */ body.npav-dark .testimonial-section .owl-nav button.owl-prev, body.npav-dark .testimonial-section .owl-nav button.owl-next { background: var(--d-surface) !important; border-color: var(--d-border); color: var(--d-accent); } body.npav-dark .testimonial-section .owl-nav button.owl-prev:hover, body.npav-dark .testimonial-section .owl-nav button.owl-next:hover { background: var(--d-accent) !important; border-color: var(--d-accent); color: #04101f; } /* Testimonial avatar initial */ body.npav-dark .testimonial-section .testimonial-avatar { background-color: var(--d-accent-soft); color: var(--d-accent); } /* ============================================================== */ /* 13. PRODUCT PAGE — dark theme (scoped to body.npav-dark-product) */ /* Shared chrome / buttons / Users-Secured come from body.npav- */ /* dark; this block themes the product-only components so the */ /* buy flow matches the homepage. */ /* ============================================================== */ /* Hero / main section — was a green gradient wash */ body.npav-dark-product .product-main-section { background: var(--d-bg) !important; } body.npav-dark-product .product-main-section h1, body.npav-dark-product h6 { color: var(--d-text); } /* Product image tile */ body.npav-dark-product .pd-product-image-container { background: var(--d-surface); border: 1px solid var(--d-border); padding: 18px; } body.npav-dark-product .pd-powered-by { color: var(--d-muted); } body.npav-dark-product .pd-powered-by .fw-bold { color: var(--d-text); } /* Validity / Users / Edition selects + any inputs */ body.npav-dark-product select.pd-select, body.npav-dark-product .form-select, body.npav-dark-product .form-control { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-product select.pd-select:focus, body.npav-dark-product .form-control:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-product .form-select option, body.npav-dark-product select.pd-select option { background-color: var(--d-surface); color: var(--d-text); } body.npav-dark-product label { color: var(--d-muted); } /* Pricing */ body.npav-dark-product .pd-price-text { color: var(--d-accent); } body.npav-dark-product .pd-billing-info .billing-label { color: var(--d-muted); } body.npav-dark-product .pd-billing-info .billing-value { color: var(--d-text); } body.npav-dark-product .pd-billing-info small { color: var(--d-muted-2); } /* Buy Now (+ npcloud / trackmee variants) -> cyan/blue gradient */ body.npav-dark-product .pd-buy-now-btn, body.npav-dark-product button.npcloud, body.npav-dark-product button.trackmee { background: var(--d-grad) !important; color: #04101f !important; border: none !important; box-shadow: 0 8px 22px -6px var(--d-accent-glow) !important; } body.npav-dark-product .pd-buy-now-btn:hover, body.npav-dark-product button.npcloud:hover, body.npav-dark-product button.trackmee:hover { background: var(--d-grad) !important; filter: brightness(1.08); color: #04101f !important; transform: none !important; } /* Secondary links (demo / datasheet / video / know more / compare) + reviews */ body.npav-dark-product .secondary-link { color: var(--d-accent); } body.npav-dark-product .secondary-link:hover { color: var(--d-green); } body.npav-dark-product .pd-review-link { color: var(--d-accent); } body.npav-dark-product .pd-review-stars i { color: #f5b301; } /* Features section */ body.npav-dark-product .pd-features-section { background-image: none !important; background-color: var(--d-bg-soft) !important; } body.npav-dark-product .pd-features-section .section-title { color: var(--d-text); } body.npav-dark-product .security-features { color: var(--d-muted); } /* Feature cards (markup carries .bg-light + .pd-feature-card) */ body.npav-dark-product .pd-feature-card { background-color: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } body.npav-dark-product .pd-feature-card:hover { background-color: var(--d-surface-2) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--d-accent-glow); } body.npav-dark-product .pd-feature-card h4 { color: var(--d-text); } body.npav-dark-product .pd-feature-card:hover h4 { color: var(--d-accent); } body.npav-dark-product .pd-feature-card p, body.npav-dark-product .pd-feature-card:hover p { color: var(--d-muted) !important; } body.npav-dark-product .read-more-link { color: var(--d-accent); } /* Windows / Android option toggle */ body.npav-dark-product .option-btn { border: 1px solid var(--d-border); color: var(--d-muted); background: transparent; } body.npav-dark-product .option-btn.active { background: var(--d-accent-deep); border-color: var(--d-accent-deep); color: #fff; } /* Light "island" cards inside product content (downloads box, DPDP benefits, product-discover) -> dark surfaces. Scoped to content areas so modals/popups (which keep their own light styling + the shared overlay reset) are untouched. */ body.npav-dark-product .product-main-section .bg-white, body.npav-dark-product .product-main-section .bg-light, body.npav-dark-product .product-discover .bg-white, body.npav-dark-product .product-discover .bg-light, body.npav-dark-product .benefitsall .benefit { background-color: var(--d-surface) !important; } body.npav-dark-product .product-main-section .border, body.npav-dark-product .product-discover .border, body.npav-dark-product .benefitsall .benefit { border-color: var(--d-border) !important; } body.npav-dark-product .product-main-section .text-dark { color: var(--d-text) !important; } /* Recommended products / "Discover" carousel */ body.npav-dark-product .product-discover .section-title, body.npav-dark-product .recommanded-product .section-title { color: var(--d-text); } body.npav-dark-product .product-discover .home-title-sub, body.npav-dark-product .recommanded-product .home-title-sub { color: var(--d-muted); } body.npav-dark-product .product-discover .product-card { background-color: var(--d-surface) !important; border-color: var(--d-border) !important; } /* card internals: light image panel + dark-on-dark price were unreadable */ body.npav-dark-product .product-discover .card-img-top-wrapper { background-color: var(--d-surface-2) !important; } body.npav-dark-product .product-discover .card-body { background-color: transparent !important; } body.npav-dark-product .product-discover .card-title, body.npav-dark-product .product-discover .card-title a { color: var(--d-text) !important; } body.npav-dark-product .product-discover .card-text { color: var(--d-muted) !important; } body.npav-dark-product .product-discover .price-tag, body.npav-dark-product .product-discover .price-tag .currency-symbol { color: var(--d-accent) !important; } body.npav-dark-product .product-discover .mrp-tag, body.npav-dark-product .product-discover .product-info-text { color: var(--d-muted-2) !important; } body.npav-dark-product .product-discover .save-tag { background-color: #f59e0b !important; color: #1a1208 !important; } body.npav-dark-product .product-discover .know-more-link { color: var(--d-accent) !important; } body.npav-dark-product .product-discover .know-more-link:hover { color: var(--d-green) !important; } /* ============================================================== */ /* 14. DOWNLOADS PAGE — dark theme (body.npav-dark-downloads) */ /* Shared chrome + FAQ come from body.npav-dark; this themes */ /* the download cards, links, headings & compatibility row. */ /* ============================================================== */ /* Section containers were #fcfcfc */ body.npav-dark-downloads .downloads, body.npav-dark-downloads section.downloads .container-fluid, body.npav-dark-downloads .downloads .container-fluid { background-color: transparent !important; } body.npav-dark-downloads .downloads { background-color: var(--d-bg) !important; } /* ---- Unified content grid (Download page = reference template) ---- Match the header's .container-custom-wide (max-width 1600px / 1.5rem gutters, 1700px >1800px) so every section starts on the same left edge as the navbar logo. Applied to the heading banner, product-card section and compatibility. */ body.npav-dark-downloads section.downloads .container-fluid, body.npav-dark-downloads .downloads .row.compatible { max-width: 1600px; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } @media (min-width: 1800px) { body.npav-dark-downloads section.downloads .container-fluid, body.npav-dark-downloads .downloads .row.compatible { max-width: 1700px; } } /* equal card heights within each row — cols are flex so the card fills the (Bootstrap-stretched) column height. */ body.npav-dark-downloads .downloads .divmedownload, body.npav-dark-downloads .downloads .compatible .divme { display: flex; } body.npav-dark-downloads .downloads .divemedown, body.npav-dark-downloads .downloads .compdiv { width: 100%; height: 100%; } /* Green header banners (used on downloads/help/etc.) -> dark, white text stays. A hairline border-bottom separates the page heading from the main content. */ body.npav-dark .container-fluid.fluidclsechelp2, body.npav-dark .container-fluid.fluidclsechelp, body.npav-dark .container-fluid.fluidclsechelpwa2, body.npav-dark .container-fluid.fluidclsecaboutus, body.npav-dark .container-fluid.fluidclsecengineer { background: transparent !important; color: var(--d-text) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.16); /* stronger than --d-border (0.09) so the divider is clearly visible on the near-black bg */ padding-bottom: 16px; margin-bottom: 20px; } body.npav-dark .fluidclsechelp2 h2, body.npav-dark .fluidclsechelp2 p, body.npav-dark .fluidclsechelp h2, body.npav-dark .fluidclsechelp p, body.npav-dark .pagebuilder-column.fastupd h3 { color: var(--d-text) !important; } /* Section headings */ body.npav-dark-downloads .heading, body.npav-dark-downloads .heading span, body.npav-dark-downloads .purple-text { color: var(--d-text) !important; } body.npav-dark-downloads .heading i { color: var(--d-accent) !important; } /* Warning notice — clean, readable amber callout on dark (shared: downloads + updates) */ body.npav-dark .updatenp-alert { background-color: rgba(245, 158, 11, 0.10) !important; border: 1px solid rgba(245, 158, 11, 0.30) !important; border-left: 3px solid #f59e0b !important; border-radius: 10px; color: #f7dca6 !important; } body.npav-dark .updatenp-alert p { color: #f7dca6 !important; margin-bottom: 0; } /* Download cards */ body.npav-dark-downloads .divemedown, body.npav-dark-downloads .help-pg-div { background-color: var(--d-surface); border: 1px solid var(--d-border) !important; border-radius: 12px; } body.npav-dark-downloads .divemedown:hover { border-color: var(--d-border-bright) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } body.npav-dark-downloads .help-pg-div h5 { color: var(--d-text); } body.npav-dark-downloads .help-pg-div p { color: var(--d-muted) !important; } body.npav-dark-downloads .help-pg-div b, body.npav-dark-downloads .help-pg-div strong { color: var(--d-text); } /* Download links */ body.npav-dark-downloads a.down-link { color: var(--d-accent) !important; } body.npav-dark-downloads a.down-link:hover { color: var(--d-green) !important; } /* Dividers */ body.npav-dark-downloads .downhr, body.npav-dark-downloads hr { border-color: var(--d-border) !important; opacity: 1; } /* OS compatibility row — wrapper was a light #e9ecef band */ body.npav-dark-downloads .row.compatible { background-color: transparent !important; color: var(--d-text) !important; } body.npav-dark-downloads .compdiv { background-color: var(--d-surface); border: 1px solid var(--d-border) !important; border-radius: 12px; } body.npav-dark-downloads .comptext { color: var(--d-text); } body.npav-dark-downloads .editions { color: var(--d-muted); } body.npav-dark-downloads .compdiv p, body.npav-dark-downloads .compdiv span { color: var(--d-muted); } body.npav-dark-downloads .hrclscmpitible { border-color: var(--d-border) !important; } /* ============================================================== */ /* 15. UPDATES PAGE — dark theme (body.npav-dark-updates) */ /* Green banner + alert come from shared rules; this themes the */ /* content area, white panels and the update tables. */ /* ============================================================== */ /* Content area + instruction list */ body.npav-dark-updates .updcont { background-color: transparent !important; } body.npav-dark-updates .updatenp ol, body.npav-dark-updates .updatenp ol li, body.npav-dark-updates .pagebuilder-column-li li, body.npav-dark-updates .off-upd-method li { color: var(--d-text); } body.npav-dark-updates .pagebuilder-column-li strong, body.npav-dark-updates .off-upd-method strong { color: var(--d-text) !important; } /* White panels -> dark surface cards */ body.npav-dark-updates .samerow { background-color: var(--d-surface) !important; border: 1px solid var(--d-border); } body.npav-dark-updates .pagebuilder-column h2, body.npav-dark-updates .row.samerow h2 { color: var(--d-text) !important; } /* Tables */ body.npav-dark-updates .table { --bs-table-bg: transparent; --bs-table-color: var(--d-text); --bs-table-border-color: var(--d-border); color: var(--d-text); } body.npav-dark-updates .table th, body.npav-dark-updates .table td, body.npav-dark-updates .table-bordered th, body.npav-dark-updates .table-bordered td { border-color: var(--d-border) !important; color: var(--d-text); } body.npav-dark-updates thead.cart-header { background-color: var(--d-surface-2) !important; } body.npav-dark-updates thead.cart-header, body.npav-dark-updates thead.cart-header tr th { color: var(--d-text) !important; } body.npav-dark-updates .prod-title, body.npav-dark-updates .prod-title span, body.npav-dark-updates .table strong { color: var(--d-text); } body.npav-dark-updates h5.prod-title.padd-top-20 a { color: var(--d-accent) !important; } body.npav-dark-updates h5.prod-title.padd-top-20 a:hover { color: var(--d-green) !important; } body.npav-dark-updates small { color: var(--d-muted); } body.npav-dark-updates .updcont hr, body.npav-dark-updates .pagebuilder-column-line hr { border-color: var(--d-border) !important; opacity: 1; } /* ============================================================== */ /* 16. HELP PAGE — dark theme (body.npav-dark-help) */ /* Green banner + Expert-Guidance band come from shared rules; */ /* this themes the help cards and the support-links grid. */ /* ============================================================== */ /* Help cards */ body.npav-dark-help .boxhelp { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } body.npav-dark-help .boxhelp:hover { border-bottom: 4px solid var(--d-accent) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } body.npav-dark-help .boxhelp h3, body.npav-dark-help .boxhelp .single-team .content h3 { color: var(--d-text) !important; } body.npav-dark-help .boxhelp .single-team .content { background-color: transparent !important; } body.npav-dark-help .boxhelp .single-team .image .social li p { color: var(--d-muted) !important; } body.npav-dark-help .boxhelp .single-team .image .social li a, body.npav-dark-help .boxhelp .single-team .image .social li span { color: var(--d-accent) !important; } /* Support links grid (shared: help + contact pages) */ body.npav-dark .support-link .section-title h2 { color: var(--d-text) !important; } body.npav-dark .row.form-padds.support-implinks a { background-color: var(--d-surface) !important; border: 1px solid var(--d-border); color: var(--d-text) !important; border-radius: 10px; } body.npav-dark .row.form-padds.support-implinks a:hover { background: var(--d-surface-2) !important; border-color: var(--d-border-bright); color: var(--d-accent) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); } body.npav-dark .support-implinks a .bx { color: var(--d-accent); } /* WhatsApp-only help list (/wa) — white .helpwadiv wrapper + green-header */ /* .helpwacol cards. Wrapper goes transparent; cards become dark surfaces; */ /* green headers become subtle dark bands; WhatsApp icons keep brand green. */ body.npav-dark-help .helpwadiv { background-color: transparent !important; box-shadow: none !important; } body.npav-dark-help .helpwacol { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; } body.npav-dark-help .helpwacol:hover { border-color: var(--d-border-bright) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } body.npav-dark-help .helpwacol h3 { background: var(--d-surface-2) !important; border-bottom: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-help .helpwacol p { color: var(--d-muted) !important; } body.npav-dark-help .helpwacol a, body.npav-dark-help .helpwacol .divnum p a { color: var(--d-accent) !important; } body.npav-dark-help .helpwacol .divnum span.float-right, body.npav-dark-help .helpwacol .text-right.float-right { color: var(--d-muted) !important; } /* keep the WhatsApp glyph its recognisable brand green */ body.npav-dark-help .helpwacol i { color: #25d366 !important; } /* --- Help Center redesign (hero / popular tasks / resources / escalation) --- */ /* page backdrop — subtle cyan spotlight behind the hero, fading to page bg */ body.npav-dark-help .helpsec { background: radial-gradient(120% 60% at 50% 0%, rgba(0, 229, 255, 0.06), transparent 55%), var(--d-bg); } body.npav-dark-help .hc-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--d-accent); background: var(--d-accent-soft); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; } body.npav-dark-help .hc-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 18px; } body.npav-dark-help .hc-hero-actions .btn i { vertical-align: middle; margin-right: 6px; } body.npav-dark-help .hc-hero-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 0; margin: 0; } body.npav-dark-help .hc-hero-tags li { color: var(--d-muted); font-weight: 500; } body.npav-dark-help .hc-hero-tags li i { color: var(--d-green); margin-right: 4px; vertical-align: middle; } body.npav-dark-help .hc-section { margin-top: 48px; } /* width handled by the global 1600px grid */ /* section headings reuse .section-title (base colour is a dark navy -> invisible on dark); force light text, centred, weight 500. */ body.npav-dark-help .hc-section .section-title { text-align: center; margin-bottom: 24px; } body.npav-dark-help .hc-section .section-title h2 { color: var(--d-text) !important; font-weight: 500; } /* Additional Support cards — the legacy boxhelp uses an absolute-positioned .social (top:75%) + negative-margin .content that overlap at this width. Neutralise it into a clean centred stack: icon -> title -> desc -> link. */ body.npav-dark-help .hc-section .boxhelp { padding: 28px 16px; position: relative; } /* core .watshide adds 11%/13% padding (~50–58px on a wide card) = the empty space; the .boxhelp padding above is the card's breathing room instead. */ body.npav-dark-help .hc-section .boxhelp .watshide { padding: 0 !important; display: block; text-decoration: none; } body.npav-dark-help .hc-section .boxhelp .single-team { margin-bottom: 0; } body.npav-dark-help .hc-section .boxhelp .single-team .image { display: flex; flex-direction: column; align-items: center; } body.npav-dark-help .hc-section .boxhelp .imgwats { order: 1; width: 56px; height: 56px; object-fit: contain; padding-bottom: 0; margin-bottom: 14px; } body.npav-dark-help .hc-section .boxhelp .single-team .content { order: 2; position: static; margin: 0; padding: 0; } body.npav-dark-help .hc-section .boxhelp .single-team .image .social { order: 3; position: static; top: auto; margin-top: 8px; } /* single-link cards wrap the whole .single-team in an (see blade), so the entire card is natively clickable. Show the pointer only where a link exists: the wrapped cards (.watshide is the ) get it over the whole card; the Sales card (two links, .watshide is a div) shows it only on its real links. */ body.npav-dark-help .hc-section .boxhelp:hover { cursor: default !important; } body.npav-dark-help .hc-section .boxhelp a { cursor: pointer; } /* inner CTA text is now a (was an ) — keep the cyan link look */ body.npav-dark-help .hc-section .boxhelp .boxhelp-cta { color: var(--d-accent); font-size: 14px; display: inline-block; padding-top: 2%; } /* Support Resources — grouped knowledge cards */ body.npav-dark-help .hc-res-grid { margin: 0; } body.npav-dark-help .hc-res-card { background-color: var(--d-surface); border: 1px solid var(--d-border); border-radius: 12px; padding: 22px 24px; height: 100%; } body.npav-dark-help .hc-res-card h3 { font-size: 1rem; font-weight: 500; color: var(--d-text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--d-border); } body.npav-dark-help .hc-res-card ul { list-style: none; padding: 0; margin: 0; } body.npav-dark-help .hc-res-card li { margin-bottom: 8px; } body.npav-dark-help .hc-res-card li:last-child { margin-bottom: 0; } body.npav-dark-help .hc-res-card a { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--d-muted) !important; padding: 8px 10px; border-radius: 8px; transition: background 160ms ease, color 160ms ease; } body.npav-dark-help .hc-res-card a:hover { background: var(--d-surface-2); color: var(--d-accent) !important; } body.npav-dark-help .hc-res-card a i { color: var(--d-accent); } /* Still Need Assistance — escalation card */ body.npav-dark-help .hc-still { background: linear-gradient(180deg, var(--d-surface), var(--d-surface-2)); border: 1px solid var(--d-border); border-radius: 16px; padding: 40px 28px; text-align: center; margin-bottom: 64px; /* clear the footer */ } body.npav-dark-help .hc-still h2 { color: var(--d-text); font-weight: 500; margin-bottom: 10px; } body.npav-dark-help .hc-still p { color: var(--d-muted); max-width: 640px; margin: 0 auto 22px; } body.npav-dark-help .hc-still-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } @media (max-width: 575px) { body.npav-dark-help .hc-hero-actions .btn, body.npav-dark-help .hc-still-actions .btn { width: 100%; } } /* ============================================================== */ /* 17. CAREERS PAGE — dark theme (body.npav-dark-careers) */ /* ============================================================== */ /* "Join our team" banner — green gradient lives on .careerdiv (the row) */ body.npav-dark-careers .fluidclseccareer, body.npav-dark-careers .careerdiv { background: transparent !important; background-image: none !important; } /* divider between the intro banner (header) and the main content */ body.npav-dark-careers .fluidclseccareer { border-bottom: 1px solid var(--d-border); padding-bottom: 2.5rem; margin-bottom: 1rem; } body.npav-dark-careers h2.section-title2, body.npav-dark-careers .careerdiv, body.npav-dark-careers .careerdiv p, body.npav-dark-careers .careerdiv strong { color: var(--d-text) !important; } /* Banner CTA -> gradient */ body.npav-dark-careers a.btn.btn-sm.bannerbtn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-careers a.btn.btn-sm.bannerbtn i { color: #04101f !important; } body.npav-dark-careers a.btn.btn-sm.bannerbtn:hover { background: var(--d-grad) !important; filter: brightness(1.08); } /* "Our Values" */ body.npav-dark-careers .fluidclseccareer2 { background-color: transparent !important; } body.npav-dark-careers .fluidclseccareer2 .section-title h2 { color: var(--d-text) !important; } body.npav-dark-careers h6.titlecrl { color: var(--d-text) !important; } body.npav-dark-careers p.paracrl { color: var(--d-muted) !important; } /* "Open Positions" */ body.npav-dark-careers .container-fluid.openposition h3, body.npav-dark-careers .container-fluid.openposition h5 { color: var(--d-text) !important; } body.npav-dark-careers .jobdesc { border-bottom-color: var(--d-border) !important; } body.npav-dark-careers span.jobtitle { color: var(--d-text); } body.npav-dark-careers span.jobexperience { color: var(--d-muted); } body.npav-dark-careers p.jobtype { color: var(--d-accent) !important; } body.npav-dark-careers p.jobdescip { color: var(--d-muted) !important; } body.npav-dark-careers span.jddesc { color: var(--d-accent) !important; } body.npav-dark-careers span.jddesc:hover { color: var(--d-green) !important; } /* Apply button -> gradient */ body.npav-dark-careers .applybtn { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } body.npav-dark-careers button.btn.btn-sm.applybtn:hover { background: var(--d-grad) !important; filter: brightness(1.08); border: none !important; color: #04101f !important; } /* --- Career modals (#applyJobModal, #jobdescModal) -> dark --- */ /* override the shared light-overlay reset for these two modals only */ body.npav-dark-careers .modal-content { background-color: var(--d-surface) !important; color: var(--d-text) !important; border: 1px solid var(--d-border); } body.npav-dark-careers .modal-header { border-bottom-color: var(--d-border) !important; } body.npav-dark-careers .modal .modal-header h3 { color: var(--d-text); } body.npav-dark-careers .modal .modal-header p { color: var(--d-muted); } body.npav-dark-careers .modal h4 { color: var(--d-accent); } body.npav-dark-careers .modal label, body.npav-dark-careers .modal .required, body.npav-dark-careers .modal li, body.npav-dark-careers .modal ul, body.npav-dark-careers .modal .career-footer-notes strong, body.npav-dark-careers .modal .text-muted { color: var(--d-muted) !important; } body.npav-dark-careers .modal label span { color: var(--d-muted-2); } /* Form fields */ body.npav-dark-careers .modal .form-control, body.npav-dark-careers .modal select, body.npav-dark-careers .modal textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-careers .modal .form-control::placeholder, body.npav-dark-careers .modal textarea::placeholder { color: var(--d-muted-2); } body.npav-dark-careers .modal .form-control:focus, body.npav-dark-careers .modal select:focus, body.npav-dark-careers .modal textarea:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-careers .modal select option { background-color: var(--d-surface); color: var(--d-text); } body.npav-dark-careers .modal input[type="file"]::file-selector-button { background-color: var(--d-surface-2); color: var(--d-text); border: 1px solid var(--d-border); border-radius: 6px; } /* Qualification box */ body.npav-dark-careers .modal .qualification-fieldset { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; } /* select2 boxes */ body.npav-dark-careers .modal .select2-container--default .select2-selection { background-color: var(--d-bg-soft) !important; border-color: var(--d-border) !important; } body.npav-dark-careers .modal .select2-selection__rendered, body.npav-dark-careers .modal .select2-selection__placeholder { color: var(--d-text) !important; } /* Buttons */ body.npav-dark-careers .modal .applybtn, body.npav-dark-careers .modal #btnadd, body.npav-dark-careers .modal .button-full { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-careers .modal .button-delete { background-color: #dc2626 !important; color: #fff !important; border: none !important; } body.npav-dark-careers .modal .btn-close { filter: invert(1) brightness(1.7); } /* ============================================================== */ /* 18. CONTACT PAGE — dark theme (body.npav-dark-contact) */ /* Green banner + support links come from shared rules. */ /* ============================================================== */ body.npav-dark-contact .contactus, body.npav-dark-contact section.contactus.ptb-100 .container-fluid { background-color: transparent !important; } body.npav-dark-contact section.contactus.ptb-100 { background-color: var(--d-bg) !important; } /* Branch Offices row uses px-lg-4 (1.5rem) while the Head Office card sits in px-5 (3rem) -> branch cards run wider. Match the inset so they align. */ /* Contact office rows are .row (not .container-fluid) so the global rule doesn't reach them — align them to the same 1600px grid. */ body.npav-dark-contact .office-row, body.npav-dark-contact section.contactus.ptb-100 > .row.justify-content-center { max-width: 1600px; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } @media (min-width: 1800px) { body.npav-dark-contact .office-row, body.npav-dark-contact section.contactus.ptb-100 > .row.justify-content-center { max-width: 1700px; } } /* head-office col had px-5 -> reset to default gutter so it lines up */ body.npav-dark-contact section.contactus.ptb-100 > .row.justify-content-center > .col-lg-12 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } body.npav-dark-contact .contactus p { color: var(--d-muted) !important; } /* Head office + branch office cards */ body.npav-dark-contact .head-office-card, body.npav-dark-contact .head-office-contact, body.npav-dark-contact .office-card { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-contact .head-office-card h4, body.npav-dark-contact .office-card h4, body.npav-dark-contact .office-section-title h3 { color: var(--d-text) !important; } body.npav-dark-contact .office-address-item span, body.npav-dark-contact .office-body p { color: var(--d-muted) !important; } /* Icon tiles -> cyan-tint (were light squares) */ body.npav-dark-contact .office-icon, body.npav-dark-contact .office-address-item i, body.npav-dark-contact .head-office-contact a i { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; } body.npav-dark-contact .office-icon i { color: var(--d-accent) !important; } body.npav-dark-contact .head-office-badge { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; } body.npav-dark-contact .head-office-contact a, body.npav-dark-contact .office-body a { color: var(--d-text) !important; } body.npav-dark-contact .head-office-contact a:hover, body.npav-dark-contact .office-body a:hover { color: var(--d-accent) !important; } body.npav-dark-contact .head-office-contact a i, body.npav-dark-contact .office-body a i { color: var(--d-accent); } /* Contact form card */ body.npav-dark-contact section.contactus .card, body.npav-dark-contact .form-container { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } body.npav-dark-contact section.contactus .card:hover { transform: none !important; } body.npav-dark-contact form.form-container label, body.npav-dark-contact .form-container .required { color: var(--d-muted) !important; } body.npav-dark-contact .form-container .form-control, body.npav-dark-contact .form-container textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-contact .form-container .form-control::placeholder, body.npav-dark-contact .form-container textarea::placeholder { color: var(--d-muted-2); } body.npav-dark-contact .form-container .form-control:focus, body.npav-dark-contact .form-container textarea:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } /* Send message button -> gradient */ body.npav-dark-contact .home-contact-btn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-contact .home-contact-btn:hover { background: var(--d-grad) !important; filter: brightness(1.08); color: #04101f !important; } /* ============================================================== */ /* 19. ABOUT US PAGE — dark theme (body.npav-dark-about) */ /* Awards section comes from the shared .awards-section rules. */ /* ============================================================== */ /* "About Us" banner — drop the aboutus-bg.png image */ body.npav-dark-about section.aboutus.ptb-100 .fluidclsecaboutus, body.npav-dark-about .fluidclsecaboutus { background: transparent !important; background-image: none !important; } body.npav-dark-about h2.section-title2, body.npav-dark-about .sub-heading, body.npav-dark-about .aboutusdiv { color: var(--d-text) !important; } body.npav-dark-about .aboutusdiv p { color: var(--d-muted) !important; } /* "Our Expertise" */ body.npav-dark-about .container-fluid.expertise { background-color: transparent !important; } body.npav-dark-about .expertise .section-title h2 { color: var(--d-text) !important; } body.npav-dark-about .clsbgabout { background-color: var(--d-surface) !important; border: 1px solid var(--d-border); } body.npav-dark-about .clsaboutcontent h6 { color: var(--d-text) !important; } /* "Our Journey" */ body.npav-dark-about .container-fluid.fluidclsecaboutus2 { background-color: transparent !important; } body.npav-dark-about .fluidclsecaboutus2 .section-title h2 { color: var(--d-text) !important; } /* ============================================================== */ /* 20. BUY NOW PAGE — dark theme (body.npav-dark-buynow) */ /* NB: buynow.css loads AFTER this file (via @yield customstyle)*/ /* so these overrides use !important to win. */ /* ============================================================== */ /* Category tabs — inactive = subtle dark chips */ /* chip-style tabs: drop Bootstrap's nav-tabs underline (it showed as a line segment in the gap between chips) */ body.npav-dark-buynow .bunow-tab .nav-tabs { border-bottom: none !important; } /* buynow.css wraps each tab

in its own gray border + top-only radius (border:1px #74747430; radius:10px 10px 0 0), which rendered as a double outline around the chip. Remove it — the inner .nav-link chip is the tab. */ body.npav-dark-buynow .tab.bunow-tab li.nav-item { border: none !important; border-radius: 10px !important; background: transparent !important; } /* inactive tabs = filled dark chips (not empty outlines) with cyan icon */ body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link { color: var(--d-text) !important; background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 10px; margin-right: 8px; margin-bottom: 0 !important; font-weight: 500; padding: 12px 18px; } body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link i { color: var(--d-accent) !important; } body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link.active { background: var(--d-grad) !important; color: #04101f !important; border-color: transparent !important; border-radius: 10px; font-weight: 500; box-shadow: none !important; } body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link.active i { color: #04101f !important; } body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link:not(.active):hover { color: var(--d-text) !important; background: var(--d-surface-2) !important; border-color: var(--d-border-bright) !important; } /* keep the active tab's dark label on hover (gradient bg) */ body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link.active:hover, body.npav-dark-buynow .bunow-tab .nav-tabs .nav-link.active:hover i { color: #04101f !important; } /* Product cards */ body.npav-dark-buynow .bunow-tab-wrap .product-card { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-buynow .bunow-tab-wrap .product-title { color: var(--d-text) !important; } body.npav-dark-buynow .prod-type { color: var(--d-muted) !important; } body.npav-dark-buynow .product-price, body.npav-dark-buynow .product-price.pd-price-text { color: var(--d-accent) !important; } body.npav-dark-buynow label.sellabel { color: var(--d-muted) !important; } body.npav-dark-buynow .bunow-tab-wrap .form-control, body.npav-dark-buynow .bunow-tab-wrap select { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-buynow .bunow-tab-wrap select option { background-color: var(--d-surface); color: var(--d-text); } /* Buy Now -> gradient; Product Details -> accent outline */ body.npav-dark-buynow .product-action-button.buy-now, body.npav-dark-buynow .bunow-tab-wrap .product-action-button.buy-now { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-buynow .product-action-button.buy-now:hover, body.npav-dark-buynow .bunow-tab-wrap .product-action-button.buy-now:hover { background: var(--d-grad) !important; filter: brightness(1.08); color: #04101f !important; } body.npav-dark-buynow .product-action-button.buy-now a { color: #04101f !important; } body.npav-dark-buynow .product-details-link { color: var(--d-accent) !important; border: 1px solid var(--d-border-bright) !important; background: transparent !important; } body.npav-dark-buynow .product-details-link:hover { background: var(--d-accent) !important; color: #04101f !important; } /* Payment / support link tiles */ body.npav-dark-buynow .row.form-padds.buysupport-implinks a { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; border-radius: 10px; } body.npav-dark-buynow .row.form-padds.buysupport-implinks a:hover { background: var(--d-surface-2) !important; border-color: var(--d-border-bright) !important; color: var(--d-accent) !important; } body.npav-dark-buynow .buysupport-implinks a .bx { color: var(--d-accent) !important; } /* All buynow containers were a light #fcfcfc band */ body.npav-dark-buynow section.buynow .container-fluid { background-color: transparent !important; } /* Instructions block — the two white panels */ body.npav-dark-buynow .buynwbtm1, body.npav-dark-buynow .buynwbtm, body.npav-dark-buynow section.buynow .buyinst .buynwbtm1, body.npav-dark-buynow section.buynow .buyinst .buynwbtm { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } body.npav-dark-buynow .buynwbtm1 li, body.npav-dark-buynow .buynwbtm li, body.npav-dark-buynow .buyinst ul li, body.npav-dark-buynow .buyinst ol li { color: var(--d-muted) !important; } body.npav-dark-buynow .buyinst b, body.npav-dark-buynow .buyinst strong, body.npav-dark-buynow .buynwbtm h4 { color: var(--d-text) !important; } body.npav-dark-buynow .buyinst a { color: var(--d-accent) !important; } /* Purchase support section */ body.npav-dark-buynow .buynow-support-section .section-title h2 { color: var(--d-text) !important; } body.npav-dark-buynow .support-timing { color: var(--d-muted) !important; } body.npav-dark-buynow .support-timing .bx { color: var(--d-accent) !important; } body.npav-dark-buynow .support-card { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-buynow .support-card a { color: var(--d-text) !important; } body.npav-dark-buynow .support-card a:hover { color: var(--d-accent) !important; } body.npav-dark-buynow .support-icon { color: #25d366 !important; } /* ============================================================== */ /* 21. RENEWAL PAGE — dark theme (body.npav-dark-renewal) */ /* renewal.css loads after this file, so use !important. */ /* ============================================================== */ body.npav-dark-renewal .renewal-section { background: transparent !important; } /* Promo strip */ body.npav-dark-renewal .nr-strip { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-renewal .nr-strip-msg { color: var(--d-text) !important; } body.npav-dark-renewal .nr-strip-badge { background: var(--d-green) !important; color: #04101f !important; } body.npav-dark-renewal .nr-trust-item { color: var(--d-muted) !important; } body.npav-dark-renewal .nr-trust-item i { color: var(--d-accent) !important; } /* Verify-key card */ body.npav-dark-renewal .nr-card, body.npav-dark-renewal .nr-card-body { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-renewal .nr-card-title { color: var(--d-text) !important; } body.npav-dark-renewal .nr-card-sub { color: var(--d-muted) !important; } body.npav-dark-renewal .nr-icon-badge { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; } body.npav-dark-renewal .nr-label { color: var(--d-muted) !important; } body.npav-dark-renewal .nr-input, body.npav-dark-renewal .nr-input-group { background: var(--d-bg-soft) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-renewal .nr-input::placeholder { color: var(--d-muted-2) !important; } body.npav-dark-renewal .nr-input:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-renewal .nr-input-icon { color: var(--d-accent) !important; } body.npav-dark-renewal .nr-hint { color: var(--d-muted) !important; } body.npav-dark-renewal .nr-hint strong { color: var(--d-text) !important; } body.npav-dark-renewal .nr-hint i { color: var(--d-accent) !important; } /* Verify button -> gradient */ body.npav-dark-renewal .nr-btn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-renewal .nr-btn:hover { filter: brightness(1.08); } /* Footer links + support pills */ body.npav-dark-renewal .nr-findkey, body.npav-dark-renewal .keysfind { color: var(--d-accent) !important; } body.npav-dark-renewal .nr-support-label { color: var(--d-muted) !important; } body.npav-dark-renewal .nr-pill { background: var(--d-surface-2) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-renewal .nr-pill:hover { border-color: var(--d-accent) !important; color: var(--d-accent) !important; } body.npav-dark-renewal .nr-sep { color: var(--d-border-bright) !important; } /* Help row */ body.npav-dark-renewal .nr-help { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-renewal .nr-help-item { color: var(--d-muted) !important; } body.npav-dark-renewal .nr-help-item i { color: var(--d-accent) !important; } body.npav-dark-renewal .nr-help-item a { color: var(--d-accent) !important; } body.npav-dark-renewal .nr-help-div { background: var(--d-border) !important; } body.npav-dark-renewal .nr-carousel-wrap { border-radius: 14px; overflow: hidden; } /* ============================================================== */ /* 22. RESPONSIVE — tablet/mobile fixes for the dark-theme layout */ /* ============================================================== */ @media (max-width: 991.98px) { /* Mega menu: the desktop 1040px width + 4-col grid would overflow inside the collapsed mobile nav — stack it full-width instead. */ body.npav-dark .mega-menu-qh { width: 100% !important; } body.npav-dark .mega-menu-inner { display: block !important; } body.npav-dark .mega-right { display: block !important; padding: 14px 18px !important; width: 100% !important; } body.npav-dark .mega-tab-content { margin-bottom: 18px; } /* Expert Guidance + product hero stack cleanly */ body.npav-dark .help-cta-section .help-cta { padding: 28px 20px !important; } } @media (max-width: 767.98px) { /* Pricing: drop the recommended-card lift so it doesn't clip when stacked */ body.npav-dark .pricing-plans-section .plan-card.recommended { transform: none !important; } /* Trust strips / pill rows wrap centred */ body.npav-dark .pricing-plans-section .trust-strip, body.npav-dark .nr-trust-row { justify-content: center; } /* Section side padding eases on phones */ body.npav-dark-downloads .downloads .container-fluid, body.npav-dark-updates .updcont, body.npav-dark-contact section.contactus.ptb-100 .container-fluid { padding-left: 4%; padding-right: 4%; } } /* ============================================================== */ /* 23. CHECKOUT / CART — dark theme (body.npav-dark-checkout) */ /* Completes the buy funnel so it stays consistent with the */ /* dark product/buynow pages. */ /* ============================================================== */ body.npav-dark-checkout .checkout, body.npav-dark-checkout .checkoutformdiv { background: transparent !important; } /* Form panel (left) + cart card. The cart wrapper is .clscheckoutform-2 (transparent) and the white card inside it is .orderdiv. */ body.npav-dark-checkout .clscheckoutform { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-checkout .clscheckoutform-2 { background: transparent !important; } body.npav-dark-checkout .orderdiv { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } /* Inputs / selects / textareas */ body.npav-dark-checkout .custom-input, body.npav-dark-checkout .form-control, body.npav-dark-checkout .form-select, body.npav-dark-checkout select, body.npav-dark-checkout textarea, body.npav-dark-checkout .inputtext { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-checkout .form-control::placeholder, body.npav-dark-checkout .custom-input::placeholder, body.npav-dark-checkout textarea::placeholder { color: var(--d-muted) !important; opacity: 1 !important; } /* Custom .nice-select / select2 dropdowns -> dark on checkout (overrides the shared light-overlay reset). */ body.npav-dark-checkout .nice-select, body.npav-dark-checkout .nice-select .list, body.npav-dark-checkout .nice-select.open .list, body.npav-dark-checkout .select2-dropdown, body.npav-dark-checkout .select2-container--default .select2-results__option { background-color: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } body.npav-dark-checkout .nice-select .option:hover, body.npav-dark-checkout .nice-select .option.focus, body.npav-dark-checkout .nice-select .option.selected.focus, body.npav-dark-checkout .select2-container--default .select2-results__option--highlighted { background-color: var(--d-surface-2) !important; color: var(--d-accent) !important; } /* selected value shown in the closed control (was dark-on-dark / invisible) */ body.npav-dark-checkout .nice-select .current, body.npav-dark-checkout .clscheckoutform select, body.npav-dark-checkout select.form-control { color: var(--d-text) !important; } body.npav-dark-checkout .nice-select .option.selected { color: var(--d-text) !important; } /* User-count stepper */ body.npav-dark-checkout .input-counter { background: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; border-radius: 10px; display: inline-flex !important; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; } body.npav-dark-checkout .input-counter input, body.npav-dark-checkout .input-counter .inputtext { margin: 0 !important; flex: 0 0 auto; background: transparent !important; color: var(--d-text) !important; border: none !important; text-align: center !important; padding: 0 6px !important; } body.npav-dark-checkout .input-counter .minus-btn, body.npav-dark-checkout .input-counter .plus-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; cursor: pointer; background: var(--d-surface) !important; color: var(--d-accent) !important; border: 1px solid var(--d-border) !important; border-radius: 6px; } /* .selectedlabel is a light field (#fcfcfc + #ccc) used for variant selects */ body.npav-dark-checkout .selectedlabel { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } /* …but #validitylbl wraps the stepper — keep it transparent so the .input-counter box (themed above) is the only visible field (id beats class) */ body.npav-dark-checkout #validitylbl { background-color: transparent !important; border: none !important; } /* Inputs had padding:1% 0% -> placeholder/text flush to the left edge. Give them real inner padding + rounded corners so the box reads right. */ body.npav-dark-checkout .clscheckoutform .custom-input, body.npav-dark-checkout .clscheckoutform input:not([type="checkbox"]):not([type="radio"]), body.npav-dark-checkout .clscheckoutform select, body.npav-dark-checkout .clscheckoutform textarea { padding: 10px 14px !important; border-radius: 8px !important; } /* nice-select dropdown list: full width, capped height with scroll, comfortable option rows */ body.npav-dark-checkout .nice-select .list { width: 100% !important; max-height: 220px; overflow-y: auto; } body.npav-dark-checkout .nice-select .option { line-height: 2.2; min-height: 38px; padding-left: 14px; padding-right: 14px; } body.npav-dark-checkout .form-control:focus, body.npav-dark-checkout select:focus, body.npav-dark-checkout textarea:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-checkout select option { background: var(--d-surface); color: var(--d-text); } /* Labels / headings / terms */ body.npav-dark-checkout label, body.npav-dark-checkout .control-label, body.npav-dark-checkout .sellabel, body.npav-dark-checkout .agreeterm p, body.npav-dark-checkout .subtotallabel { color: var(--d-muted) !important; } body.npav-dark-checkout .ordersummery h6 { color: var(--d-text) !important; } body.npav-dark-checkout .agreeterm a { color: var(--d-accent) !important; } /* cart label icons carried color:#212529 (invisible on dark) */ body.npav-dark-checkout form#customer_details_form label i, body.npav-dark-checkout .sellabel i { color: var(--d-accent) !important; } /* select2 boxes (Country / State) */ body.npav-dark-checkout .select2-container--default .select2-selection--single, body.npav-dark-checkout .select2-selection { background-color: var(--d-bg-soft) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-checkout .select2-selection__rendered { color: var(--d-text) !important; } /* core L6603 sets `#customer_details_form … .select2-selection__rendered { color:#0e0129 }` (1 id + 3 classes) which out-specifies the rule above, leaving the selected Country/State value near-black on the dark box. Match that specificity. */ body.npav-dark-checkout #customer_details_form .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--d-text) !important; } body.npav-dark-checkout .select2-selection__placeholder { color: var(--d-muted-2) !important; } body.npav-dark-checkout .select2-selection__arrow b { border-top-color: var(--d-muted) !important; } /* Notices */ body.npav-dark-checkout .alert-light { background: var(--d-surface-2) !important; color: var(--d-muted) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-checkout .alert-warning, body.npav-dark-checkout #importantNote { background: rgba(245, 158, 11, 0.10) !important; border: 1px solid rgba(245, 158, 11, 0.30) !important; color: #f7dca6 !important; } /* Payment gateway options */ body.npav-dark-checkout .gateway-option { background: var(--d-surface-2) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-checkout .gateway-option label, body.npav-dark-checkout .payment-label strong { color: var(--d-text) !important; } body.npav-dark-checkout .payment-methods input[type="radio"]:checked + label { color: var(--d-text) !important; } body.npav-dark-checkout .payment-label .badge, body.npav-dark-checkout .gateway-option .badge { background: var(--d-accent-soft) !important; color: var(--d-accent) !important; } /* Primary action + support */ body.npav-dark-checkout .checkoutntn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-checkout .checkoutntn:hover { filter: brightness(1.08); } body.npav-dark-checkout .checkout-secure, body.npav-dark-checkout .support-heading { color: var(--d-muted) !important; } body.npav-dark-checkout .checkout-secure .bx { color: var(--d-accent) !important; } body.npav-dark-checkout .support-btn { background: var(--d-surface-2) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-checkout .support-btn:hover { border-color: var(--d-accent) !important; color: var(--d-accent) !important; } body.npav-dark-checkout .support-btn.whatsapp-btn .bx { color: #25d366 !important; } /* Cart items */ body.npav-dark-checkout .product-card-checkout { background: var(--d-surface-2) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-checkout .product-title-checkout { color: var(--d-text) !important; } body.npav-dark-checkout .product-price-checkout { color: var(--d-accent) !important; } body.npav-dark-checkout .extra_validity { color: var(--d-muted) !important; } /* the glyphs carry their own green color:#008f4f !important -> recolour to cyan */ body.npav-dark-checkout .input-counter .minus-btn i, body.npav-dark-checkout .input-counter .plus-btn i { color: var(--d-accent) !important; } body.npav-dark-checkout .input-counter .minus-btn i:hover, body.npav-dark-checkout .input-counter .plus-btn i:hover { color: var(--d-green) !important; } body.npav-dark-checkout .delete-cart-item-main { color: #ef6b6b !important; } /* Coupon + totals */ body.npav-dark-checkout .addcouponcheckout { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-checkout #applied-coupon { background: var(--d-accent-soft) !important; color: var(--d-text) !important; border-radius: 8px; } body.npav-dark-checkout #coupon-message { color: var(--d-muted) !important; } body.npav-dark-checkout .totallabel, body.npav-dark-checkout .totalamount { color: var(--d-text) !important; } body.npav-dark-checkout .totalamount { color: var(--d-accent) !important; } body.npav-dark-checkout .dicountlabel, body.npav-dark-checkout .dicountamount { color: var(--d-muted) !important; } body.npav-dark-checkout .hrdotted, body.npav-dark-checkout .hrdotted1, body.npav-dark-checkout .checkout hr { border-color: var(--d-border) !important; } body.npav-dark-checkout .subtotallabel img { filter: brightness(0.95); } /* "If you have any query…" footer */ body.npav-dark-checkout .feeltoconnect h6 { color: var(--d-text) !important; } body.npav-dark-checkout .linkshelpsact a, body.npav-dark-checkout .linkshelpsact2 a { color: var(--d-accent) !important; } body.npav-dark-checkout .coloropen { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 12px; } body.npav-dark-checkout .coloropen p { color: var(--d-muted) !important; } body.npav-dark-checkout .bgrightbord { border-right: 1px solid var(--d-border) !important; } /* ============================================================== */ /* 24. CART MINI-MODAL (#cartModal) — dark, site-wide */ /* Overrides the shared light-overlay reset for this modal. */ /* ============================================================== */ body.npav-dark #cartModal .modal-content { background: var(--d-surface) !important; color: var(--d-text) !important; border: 1px solid var(--d-border) !important; } body.npav-dark #cartModal .modal-header, body.npav-dark #cartModal .modal-header.bg-light { background: var(--d-surface-2) !important; border-bottom: 1px solid var(--d-border) !important; } body.npav-dark #cartModal .modal-title, body.npav-dark #cartModal .fw-semibold, body.npav-dark #cartModal .fw-bold, body.npav-dark #cartModal #cart-subtotal { color: var(--d-text) !important; } body.npav-dark #cartModal .text-muted { color: var(--d-muted) !important; } body.npav-dark #cartModal .modal-title .bx { color: var(--d-accent) !important; } body.npav-dark #cartModal .btn-close { filter: invert(1) brightness(1.7); } /* server-rendered item rows */ body.npav-dark #cartModal .cart-items-list .border-bottom, body.npav-dark #cartModal .cart-items-list [class*="border"], body.npav-dark #cartModal .cart-items-list hr { border-color: var(--d-border) !important; } body.npav-dark #cartModal .cart-items-list .product-price-checkout, body.npav-dark #cartModal .cart-items-list .price { color: var(--d-accent) !important; } /* product title carried its own dark colour -> force light */ body.npav-dark #cartModal .cart-items-list h4, body.npav-dark #cartModal .cart-items-list h5, body.npav-dark #cartModal .cart-items-list h6, body.npav-dark #cartModal .cart-items-list a, body.npav-dark #cartModal .cart-items-list strong, body.npav-dark #cartModal .cart-items-list b, body.npav-dark #cartModal .cart-items-list .product-title-checkout, body.npav-dark #cartModal .cart-items-list .cart-product-title { color: var(--d-text) !important; } /* delete button — clean subtle red icon chip */ body.npav-dark #cartModal .delete-cart-item { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(220, 38, 38, 0.12) !important; border: 1px solid rgba(220, 38, 38, 0.32) !important; border-radius: 8px !important; color: #f87171 !important; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } body.npav-dark #cartModal .delete-cart-item:hover { background: rgba(220, 38, 38, 0.22) !important; border-color: rgba(220, 38, 38, 0.5) !important; } body.npav-dark #cartModal .delete-cart-item i, body.npav-dark #cartModal .bx-trash { color: #f87171 !important; } body.npav-dark #cartModal .spinner-border { color: var(--d-accent) !important; } /* checkout button -> gradient */ body.npav-dark #cartModal .checkoutntn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark #cartModal .checkoutntn:hover { filter: brightness(1.08); } /* ============================================================== */ /* 24b. HELPDESK MODAL (#npavHelpdeskModal) — WhatsApp info popup */ /* shown on /help & /wa. Overlay-safety keeps modals light by */ /* default; this one is themed dark to match the page. */ /* ============================================================== */ body.npav-dark #npavHelpdeskModal .modal-content { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark #npavHelpdeskModal .modal-header, body.npav-dark #npavHelpdeskModal .modal-footer { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; } body.npav-dark #npavHelpdeskModal .modal-title { color: var(--d-text) !important; } body.npav-dark #npavHelpdeskModal .modal-title .bx { color: #25d366 !important; } body.npav-dark #npavHelpdeskModal .modal-body, body.npav-dark #npavHelpdeskModal .modal-body li, body.npav-dark #npavHelpdeskModal .modal-body u, body.npav-dark #npavHelpdeskModal .modal-body b { color: var(--d-text) !important; } body.npav-dark #npavHelpdeskModal .modal-body h6, body.npav-dark #npavHelpdeskModal .modal-footer h6 { color: var(--d-green) !important; } body.npav-dark #npavHelpdeskModal .btn-close { filter: invert(1) brightness(1.7); } /* "Get Your License Key" modal (#buynow-sendlicenceModal) — fully dark themed (header was a light-theme green gradient; body/inputs/button were white/green). */ body.npav-dark #buynow-sendlicenceModal .sendkey-modal-content { border: 1px solid var(--d-border); } /* header: light-theme green gradient -> dark band + cyan icon */ body.npav-dark #buynow-sendlicenceModal .sendkey-modal-header { background: var(--d-surface-2) !important; border-bottom: 1px solid var(--d-border); } body.npav-dark #buynow-sendlicenceModal .sendkey-icon-box { background: var(--d-accent-soft) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-icon-box i { color: var(--d-accent) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-modal-header h3 { color: var(--d-text) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-modal-header p { color: var(--d-muted) !important; } /* submit button: green gradient -> dark-theme cyan->blue gradient */ body.npav-dark #buynow-sendlicenceModal .sendkey-submit-btn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-submit-btn i { color: #04101f !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-modal-body { background: var(--d-surface) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-form-group label { color: var(--d-text); } body.npav-dark #buynow-sendlicenceModal .sendkey-input-group { background: var(--d-bg-soft) !important; border-color: var(--d-border) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-input-icon { background: var(--d-surface-2); border-right-color: var(--d-border); } body.npav-dark #buynow-sendlicenceModal .sendkey-input-icon i { color: var(--d-accent); } body.npav-dark #buynow-sendlicenceModal .sendkey-input-group input { background: transparent !important; color: var(--d-text) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-input-group input::placeholder { color: var(--d-muted-2); } body.npav-dark #buynow-sendlicenceModal .sendkey-input-group:focus-within { border-color: var(--d-accent) !important; box-shadow: 0 0 0 3px var(--d-accent-soft) !important; } body.npav-dark #buynow-sendlicenceModal .sendkey-note { color: var(--d-muted) !important; } /* "Special Price Drop" on-load promo modal (#buynow-onloadModal) — was white. The promo art (festival.png) keeps its own colours; theme the chrome dark. */ body.npav-dark #buynow-onloadModal .modal-content { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark #buynow-onloadModal .modal-header, body.npav-dark #buynow-onloadModal .modal-footer { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; } body.npav-dark #buynow-onloadModal .modal-body { background-color: var(--d-surface) !important; } body.npav-dark #buynow-onloadModal .modal-title { color: var(--d-text) !important; } body.npav-dark #buynow-onloadModal .modal-title .bx { color: var(--d-accent) !important; } body.npav-dark #buynow-onloadModal .btn-close { filter: invert(1) brightness(1.7); } body.npav-dark #buynow-onloadModal .small-text { color: var(--d-muted) !important; } /* "Buy 1 Year / Buy 3 Years" offer buttons: light-theme green -> dark gradient */ body.npav-dark #buynow-onloadModal .button.buy-now.offer { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } /* ============================================================== */ /* 26b. FEEDBACK OFFCANVAS (#feedbackSidebar) — slide-in form, */ /* shown site-wide; default Bootstrap offcanvas is white. */ /* ============================================================== */ body.npav-dark #feedbackSidebar { background-color: var(--d-surface) !important; color: var(--d-text) !important; border-left: 1px solid var(--d-border); } body.npav-dark #feedbackSidebar .offcanvas-header { border-bottom: 1px solid var(--d-border); } body.npav-dark #feedbackSidebar h3, body.npav-dark #feedbackSidebar .form-label, body.npav-dark #feedbackSidebar label { color: var(--d-text) !important; } body.npav-dark #feedbackSidebar h3 .bx { color: var(--d-accent); } body.npav-dark #feedbackSidebar .form-control, body.npav-dark #feedbackSidebar .form-select { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark #feedbackSidebar .form-control::placeholder { color: var(--d-muted-2) !important; } /* light chevron so the native select arrow stays visible on dark */ body.npav-dark #feedbackSidebar .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23eaf1fb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important; } body.npav-dark #feedbackSidebar .form-select option { background-color: var(--d-surface); color: var(--d-text); } body.npav-dark #feedbackSidebar .form-control:focus, body.npav-dark #feedbackSidebar .form-select:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark #feedbackSidebar .btn-close { filter: invert(1) brightness(1.7); } body.npav-dark #feedbackSidebar .btn-success { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } /* ============================================================== */ /* 26c. PRODUCT-DETAIL MODALS — Demo Request + Reviews -> dark */ /* (Bootstrap modals; default light. Scoped to body.npav-dark */ /* so they theme on both software & hardware detail pages.) */ /* ============================================================== */ body.npav-dark .demo-request-modal .modal-content, body.npav-dark #reviewsModal .modal-content { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark .demo-request-modal .modal-header, body.npav-dark #reviewsModal .modal-header { border-bottom: 1px solid var(--d-border) !important; } body.npav-dark .demo-request-modal .modal-title, body.npav-dark #reviewsModal .modal-title, body.npav-dark .demo-request-modal .form-label, body.npav-dark .demo-request-modal label, body.npav-dark #reviewsModal label, body.npav-dark #reviewsModal .product-review-form h3 { color: var(--d-text) !important; } body.npav-dark .demo-request-modal .modal-title .bx, body.npav-dark #reviewsModal .modal-title .bx { color: var(--d-accent) !important; } body.npav-dark .demo-request-modal .form-control, body.npav-dark #reviewsModal .form-control { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark .demo-request-modal .form-control::placeholder, body.npav-dark #reviewsModal .form-control::placeholder { color: var(--d-muted-2) !important; } body.npav-dark .demo-request-modal .form-control:focus, body.npav-dark #reviewsModal .form-control:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark .demo-request-modal .btn-close, body.npav-dark #reviewsModal .btn-close { filter: invert(1) brightness(1.7); } body.npav-dark .demo-request-modal .btn-success, body.npav-dark #reviewsModal .btn-primary { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } body.npav-dark #reviewsModal hr { border-color: var(--d-border) !important; } body.npav-dark #reviewsModal .reviews-comment-fetch { color: var(--d-text); } /* ============================================================== */ /* 26d. SWEETALERT (swal-*) — dark, site-wide */ /* ============================================================== */ body.npav-dark .swal-modal { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark .swal-title { color: var(--d-text) !important; } body.npav-dark .swal-text { color: var(--d-muted) !important; } body.npav-dark .swal-footer { background: transparent !important; } body.npav-dark .swal-content__input, body.npav-dark .swal-content__textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark .swal-button--confirm { background: var(--d-grad) !important; color: #04101f !important; } body.npav-dark .swal-button--confirm:hover { filter: brightness(1.08); } body.npav-dark .swal-button--cancel { background-color: var(--d-surface-2) !important; color: var(--d-text) !important; } /* ============================================================== */ /* 26e. VALIDATION / ERROR TEXT — base #dc3545 is too dark on the */ /* dark surfaces (~3:1); brighten to ~5.2:1 for legibility. */ /* ============================================================== */ body.npav-dark .error, body.npav-dark .error-message, body.npav-dark label.error, body.npav-dark .invalid-feedback, body.npav-dark .text-danger, body.npav-dark .required::after { color: #ff6b6b !important; } /* ============================================================== */ /* 27. LEGAL / CONTENT PAGES (body.npav-dark-legal) */ /* Privacy Policy, Terms of Use, Refund Policy — text pages */ /* with a .bg-white content card + green banner (shared). */ /* ============================================================== */ body.npav-dark-legal .updatenp, body.npav-dark-legal .downloads, body.npav-dark-legal .Shipping-Policy, body.npav-dark-legal main { background-color: transparent !important; } body.npav-dark-legal .downloads .container-fluid { background-color: transparent !important; } /* white content card -> dark surface */ body.npav-dark-legal .container .bg-white, body.npav-dark-legal div.np-privacy, body.npav-dark-legal .bg-white, body.npav-dark-legal .np-privacy { background-color: var(--d-surface) !important; background-image: none !important; border-color: var(--d-border) !important; } body.npav-dark-legal .bg-white.border-top, body.npav-dark-legal .np-privacy.border-top { border-top-color: var(--d-accent) !important; } /* text — SCOPED to the content card so navbar/footer/banner are untouched */ body.npav-dark-legal .bg-white h2, body.npav-dark-legal .bg-white h3, body.npav-dark-legal .bg-white h4, body.npav-dark-legal .bg-white h5, body.npav-dark-legal .np-privacy h2, body.npav-dark-legal .np-privacy h3, body.npav-dark-legal .np-privacy h4, body.npav-dark-legal .np-privacy h5 { color: var(--d-text) !important; } body.npav-dark-legal .bg-white p, body.npav-dark-legal .bg-white li, body.npav-dark-legal .bg-white td, body.npav-dark-legal .np-privacy p, body.npav-dark-legal .np-privacy li, body.npav-dark-legal .np-privacy td { color: var(--d-muted) !important; } body.npav-dark-legal .bg-white b, body.npav-dark-legal .bg-white strong, body.npav-dark-legal .np-privacy b, body.npav-dark-legal .np-privacy strong { color: var(--d-text) !important; } body.npav-dark-legal .bg-white a, body.npav-dark-legal .np-privacy a { color: var(--d-accent) !important; } body.npav-dark-legal .bg-white hr, body.npav-dark-legal .np-privacy hr { border-color: var(--d-border) !important; } /* "Effective Date" info alert */ body.npav-dark-legal .bg-white .alert-info, body.npav-dark-legal .np-privacy .alert-info { background-color: var(--d-accent-soft) !important; border: 1px solid var(--d-border-bright) !important; color: var(--d-text) !important; } /* data tables inside the card (e.g. parental policy collect/disclose grid) */ body.npav-dark-legal .bg-white table, body.npav-dark-legal .np-privacy table { color: var(--d-muted) !important; background-color: transparent !important; --bs-table-bg: transparent; --bs-table-color: var(--d-muted); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--d-muted); --bs-table-border-color: var(--d-border); } body.npav-dark-legal .bg-white thead th, body.npav-dark-legal .np-privacy thead th { background-color: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } body.npav-dark-legal .bg-white td, body.npav-dark-legal .bg-white th, body.npav-dark-legal .np-privacy td, body.npav-dark-legal .np-privacy th { border-color: var(--d-border) !important; } body.npav-dark-legal .bg-white tbody tr:nth-child(even), body.npav-dark-legal .np-privacy tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03) !important; } /* ============================================================== */ /* 28. FOOTER-LINKED PAGES — media / support / feedback / sitemap */ /* (banner + help-support-link + home-contact come from shared)*/ /* ============================================================== */ /* Media — video gallery */ body.npav-dark-media .video-gallery-area .sub-title-font { color: var(--d-muted) !important; } body.npav-dark-media .video-box { background: var(--d-surface) !important; border: 1px solid var(--d-border); border-radius: 12px; overflow: hidden; } /* Support Directory — section was a light #fcfcfc band */ body.npav-dark-support section.contactus.ptb-100 { background-color: var(--d-bg) !important; padding-top: 40px !important; /* trim ptb-100's ~100px top padding */ } body.npav-dark-support section.contactus.ptb-100 .container-fluid, body.npav-dark-support .contactus .container { background-color: transparent !important; } /* contact-number cards */ body.npav-dark-support .contactus .card, body.npav-dark-support .help_animation .card { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-support .card p, body.npav-dark-support .card a { color: var(--d-text) !important; } body.npav-dark-support .card a:hover { color: var(--d-accent) !important; } body.npav-dark-support .contacthr { border-color: var(--d-border) !important; opacity: 1; } /* tighten the large empty band between the heading and the cards: core sets .help_animation { margin-top:50px }. Remove it on this page. */ body.npav-dark-support .help_animation { margin-top: 0 !important; } /* reduce the heavy left/right gutters: cards sit in nested .container-fluid (core padding 8%+8% compounds to ~16%/side) inside a ~1140px .container. */ /* width handled by the global 1600px grid; keep the inner .container full so the cards fill that grid */ body.npav-dark-support .contactus .container { max-width: 100%; } /* Feedback — section + regform card + form */ body.npav-dark-feedback section.engineer-registration.ptb-100, body.npav-dark-feedback .engineer-registration { background-color: transparent !important; } body.npav-dark-feedback .regform { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: none !important; } body.npav-dark-feedback .form-label, body.npav-dark-feedback label { color: var(--d-muted) !important; } body.npav-dark-feedback .form-control, body.npav-dark-feedback .form-select, body.npav-dark-feedback textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-feedback .form-control::placeholder, body.npav-dark-feedback textarea::placeholder { color: var(--d-muted-2) !important; } body.npav-dark-feedback .form-control:focus, body.npav-dark-feedback .form-select:focus, body.npav-dark-feedback textarea:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-feedback .form-select option { background: var(--d-surface); color: var(--d-text); } body.npav-dark-feedback .btn-success { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } /* Engineer Registration — single-step form */ body.npav-dark-engineer section.engineer-registration.ptb-100, body.npav-dark-engineer .engineer-registration { background-color: transparent !important; } body.npav-dark-engineer .regform { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: none !important; } body.npav-dark-engineer label { color: var(--d-muted) !important; } body.npav-dark-engineer .form-control, body.npav-dark-engineer select, body.npav-dark-engineer textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-engineer .form-control::placeholder { color: var(--d-muted-2) !important; } body.npav-dark-engineer .form-control:focus, body.npav-dark-engineer select:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-engineer select option { background: var(--d-surface); color: var(--d-text); } /* state / district select2 */ body.npav-dark-engineer .select2-container--default .select2-selection--single, body.npav-dark-engineer .select2-selection { background-color: var(--d-bg-soft) !important; border-color: var(--d-border) !important; } /* full select2 path INCL. the #engineerRegistration id — base CSS sets the rendered text to #0e0129 !important via that id, so we must match it. */ body.npav-dark-engineer form#engineerRegistration .select2-container--default .select2-selection--single .select2-selection__rendered, body.npav-dark-engineer .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--d-text) !important; } body.npav-dark-engineer form#engineerRegistration .select2-container--default .select2-selection--single .select2-selection__placeholder, body.npav-dark-engineer .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--d-muted) !important; } body.npav-dark-engineer .select2-selection__arrow b { border-top-color: var(--d-muted) !important; } /* dropdown panel (opened) -> dark */ body.npav-dark-engineer .select2-container .select2-dropdown, body.npav-dark-engineer .select2-dropdown { background-color: var(--d-surface) !important; border-color: var(--d-border) !important; } body.npav-dark-engineer .select2-dropdown .select2-results__option { color: var(--d-text) !important; } body.npav-dark-engineer .select2-dropdown .select2-results__option--highlighted { background-color: var(--d-accent-deep) !important; color: #fff !important; } body.npav-dark-engineer .select2-dropdown .select2-search__field { background-color: var(--d-bg-soft) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } /* Register / Submit button -> gradient (covers loginsupportcall .contact-submit too) */ body.npav-dark-engineer .btn-submit, body.npav-dark-engineer .contact-submit, body.npav-dark-engineer .button.button-full { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } body.npav-dark-engineer .btn-submit:hover, body.npav-dark-engineer .contact-submit:hover { filter: brightness(1.08); } /* Sitemap — link columns */ body.npav-dark-sitemap .linkallsection h4, body.npav-dark-sitemap .sitemapsection h6 { color: var(--d-text) !important; } body.npav-dark-sitemap .linkallsection hr { border-color: var(--d-border) !important; opacity: 1; } body.npav-dark-sitemap .sitemapsection li { color: var(--d-muted) !important; } body.npav-dark-sitemap .sitemapsection a { color: var(--d-muted) !important; } body.npav-dark-sitemap .sitemapsection a:hover { color: var(--d-accent) !important; } /* ============================================================== */ /* 29. PAYMENT PAGES (body.npav-dark-pay) */ /* Bank Details, GPay QR, International Payment — share the */ /* green banner + .regform card. */ /* ============================================================== */ body.npav-dark-pay .updatenp { background-color: transparent !important; } body.npav-dark-pay .regform { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: none !important; } /* Bank / QR content */ body.npav-dark-pay .hdfcbankdetails, body.npav-dark-pay .hdfcbankdetails p { color: var(--d-muted) !important; } body.npav-dark-pay .hdfcbankdetails b { color: var(--d-text) !important; } body.npav-dark-pay .hdfcbankdetails a { color: var(--d-accent) !important; } body.npav-dark-pay .copybankdetailsbtn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } /* International form */ body.npav-dark-pay label { color: var(--d-muted) !important; } body.npav-dark-pay .form-control, body.npav-dark-pay select, body.npav-dark-pay textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-pay .form-control::placeholder { color: var(--d-muted-2) !important; } body.npav-dark-pay .form-control:focus, body.npav-dark-pay select:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } body.npav-dark-pay select option { background: var(--d-surface); color: var(--d-text); } /* select2 (Currency / Country / Product) — base sets white bg + dark text via the #customer_details_form_intpay id, so match that id to win. */ body.npav-dark-pay form#customer_details_form_intpay .select2-container--default .select2-selection--single, body.npav-dark-pay .select2-container--default .select2-selection--single { background-color: var(--d-bg-soft) !important; border-color: var(--d-border) !important; } body.npav-dark-pay form#customer_details_form_intpay .select2-container--default .select2-selection--single .select2-selection__rendered, body.npav-dark-pay .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--d-text) !important; } body.npav-dark-pay .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--d-muted) !important; } body.npav-dark-pay .select2-selection__arrow b { border-top-color: var(--d-muted) !important; } body.npav-dark-pay .select2-dropdown { background-color: var(--d-surface) !important; border-color: var(--d-border) !important; } body.npav-dark-pay .select2-dropdown .select2-results__option { color: var(--d-text) !important; } body.npav-dark-pay .select2-dropdown .select2-results__option--highlighted { background-color: var(--d-accent-deep) !important; color: #fff !important; } /* buttons */ body.npav-dark-pay .btn-success, body.npav-dark-pay #submit_btn { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } body.npav-dark-pay .btn-light { background-color: var(--d-surface-2) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } /* instructions */ body.npav-dark-pay .instructions-div h4 { color: var(--d-text) !important; } body.npav-dark-pay .instructions-div li, body.npav-dark-pay .instructions-div ol { color: var(--d-muted) !important; } body.npav-dark-pay .instructions-div strong { color: var(--d-text) !important; } /* ============================================================== */ /* 30. ACHIEVEMENTS GALLERY (body.npav-dark-achievements) */ /* ============================================================== */ body.npav-dark-achievements .updatenp { background-color: transparent !important; } body.npav-dark-achievements .achievements-area .sub-title-font { color: var(--d-muted) !important; } body.npav-dark-achievements .achievement-card { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } body.npav-dark-achievements .achievement-card .content h2 { color: var(--d-text) !important; } body.npav-dark-achievements .achievement-card p { color: var(--d-muted) !important; } /* certificate images sit on a clean white tile (they're light-bg logos) */ body.npav-dark-achievements .achievement-card img { background: #ffffff; border-radius: 8px; } /* android-downloads page reuses §14 (downloads) — just the copy icon + link span */ body.npav-dark-downloads .down-link-copy .bx-copy-alt { color: var(--d-muted) !important; } body.npav-dark-downloads .down-link-copy .bx-copy-alt:hover { color: var(--d-accent) !important; } body.npav-dark-downloads .androiddownlink { color: var(--d-accent) !important; } /* ============================================================== */ /* 31. GENERIC CONTENT / FORM PAGES (body.npav-dark-content) */ /* lostkey, license-info, antiransomware, rescue-disk, */ /* key2state, welcome-free-trial, help-wa, etc. Banner + */ /* help-support-link come from shared rules. */ /* ============================================================== */ /* section backgrounds (light #fcfcfc bands) */ body.npav-dark-content .downloads, body.npav-dark-content .nopage, body.npav-dark-content .helpsec, body.npav-dark-content .updatenp, body.npav-dark-content .thankyou, body.npav-dark-content .thankyoudiv, body.npav-dark-content .media-news-section { background-color: transparent !important; } /* sparse form pages (lostkey / license-info / rescue-disk) — trim the large ptb-100 bottom band so there isn't a big blank gap before the footer. */ body.npav-dark-content section.downloads.ptb-100 { padding-bottom: 48px !important; } /* error_occured (checkout) result page — .thankyoudiv was #fcfcfc, plus the support links + "Take Me Home" CTA. */ body.npav-dark-content .err_msg, body.npav-dark-content .error-details, body.npav-dark-content .error-details.text-secondary { color: var(--d-text) !important; } body.npav-dark-content .feeltoconnect { background-color: transparent !important; } body.npav-dark-content .feeltoconnect h6 { color: var(--d-text) !important; } body.npav-dark-content .linkshelpsact a, body.npav-dark-content .linkshelpsact2 a { color: var(--d-accent) !important; } body.npav-dark-content .coloropen { color: var(--d-muted) !important; } body.npav-dark-content .coloropen .bgrightbord { border-color: var(--d-border) !important; } body.npav-dark-content a.take_me_bck_btn, body.npav-dark-content .take_me_bck_btn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-content .take_me_bck_btn:hover { filter: brightness(1.08); background: var(--d-grad) !important; } /* payment-success / payment-cancel result pages (.thankyou / .paymentcancel) */ body.npav-dark-content .paymentcancel, body.npav-dark-content .paymentcanceldiv, body.npav-dark-content .failedorder, body.npav-dark-content .main-page { background-color: transparent !important; } body.npav-dark-content .thankyou a:not(.btn):not(.button), body.npav-dark-content .paymentcancel a:not(.btn):not(.button), body.npav-dark-content .thankdownlink a { color: var(--d-accent) !important; } body.npav-dark-content .orderdetail, body.npav-dark-content .key_length, body.npav-dark-content .table-order-info td { color: var(--d-text) !important; } body.npav-dark-content .orderdetaillabel, body.npav-dark-content .table-order-info th { color: var(--d-muted) !important; } body.npav-dark-content .orderdetaillabel i, body.npav-dark-content .thankdownlink a i { color: var(--d-accent) !important; } body.npav-dark-content .buynwbtm li, body.npav-dark-content .buynwbtm1 li, body.npav-dark-content .buynwbtm1 b { color: var(--d-text) !important; } body.npav-dark-content .coloropen, body.npav-dark-content .coloropen p { color: var(--d-muted) !important; } body.npav-dark-content .coloropen .bgrightbord { border-right: 1px solid var(--d-border) !important; } body.npav-dark-content .downloads .container-fluid, body.npav-dark-content .nopage .container-fluid, body.npav-dark-content .updatenp .container-fluid { background-color: transparent !important; } /* .trackmeefooter help grid (.boxhelp cards) — shared on key2state, */ /* trackmee-success, region-mismatch pages. Base is white w/ #000 text. */ body.npav-dark-content .boxhelp, body.npav-dark-content .nopage .boxhelp { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } body.npav-dark-content .boxhelp:hover { border-bottom: 4px solid var(--d-accent) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important; } body.npav-dark-content .boxhelp h3, body.npav-dark-content .boxhelp .single-team .content h3 { color: var(--d-text) !important; } body.npav-dark-content .boxhelp .single-team .content { background-color: transparent !important; } body.npav-dark-content .boxhelp .single-team .image .social li p { color: var(--d-muted) !important; } body.npav-dark-content .boxhelp .single-team .image .social li a, body.npav-dark-content .boxhelp .single-team .image .social li span { color: var(--d-accent) !important; } /* cards / form panels -> dark surface */ body.npav-dark-content .card, body.npav-dark-content .bg-white, body.npav-dark-content .regform, body.npav-dark-content .lostkey_div, body.npav-dark-content .renewal_div, body.npav-dark-content .nr-card, body.npav-dark-content .nr-card-body { background-color: var(--d-surface) !important; border: 1px solid var(--d-border) !important; box-shadow: none !important; } /* license-info / lostkey form card uses a plain div (not .row) so the */ /* base padding rules miss it — give it comfortable internal spacing. */ body.npav-dark-content .lostkey_div.renewal_div { padding: 2.25rem 2.5rem !important; border-radius: 14px; /* a comfortable centred form panel (full-width left big empty sides). */ max-width: 760px; margin-left: auto; margin-right: auto; } /* the inner form column is col-md-10 (centred, ~83%) which left the fields narrow inside the card — make the form + its fields fill the card width. */ /* core sets `.keylost { width:50%; margin:0 auto }` so the form filled only half the card (narrow, off-centre fields). Make it fill the card. */ body.npav-dark-content .lostkey_div.renewal_div .keylost { width: 100% !important; } body.npav-dark-content .lostkey_div.renewal_div #tab1, body.npav-dark-content .lostkey_div.renewal_div form .col-md-10, body.npav-dark-content .lostkey_div.renewal_div form .col-lg-10 { flex: 0 0 100% !important; max-width: 100% !important; } body.npav-dark-content .lostkey_div.renewal_div .form-control { width: 100% !important; } body.npav-dark-content .lostkey_div.renewal_div .capdiv { padding: 0; } body.npav-dark-content .lostkey_div.renewal_div .button.button-full { margin-top: 0.25rem; } /* rescue-disk note callout — base sets a light #e7f3fe bg; drop it, */ /* keep the blue accent bar, readable text on dark. */ body.npav-dark-content .rescue-disk .notification { background-color: transparent !important; border-left: 4px solid var(--d-accent) !important; color: var(--d-text) !important; } /* headings (global lights h1-h5; cover h4/h6 explicitly here) */ body.npav-dark-content .downloads h2, body.npav-dark-content .downloads h3, body.npav-dark-content .downloads h4, body.npav-dark-content .downloads h5, body.npav-dark-content .downloads h6, body.npav-dark-content .nopage h2, body.npav-dark-content .nopage h3, body.npav-dark-content .nopage h4, body.npav-dark-content .nopage h5, body.npav-dark-content .card h4, body.npav-dark-content .bg-white h4 { color: var(--d-text) !important; } /* form fields */ body.npav-dark-content label { color: var(--d-muted) !important; } body.npav-dark-content .form-control, body.npav-dark-content select, body.npav-dark-content textarea { background-color: var(--d-bg-soft) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; } body.npav-dark-content .form-control::placeholder { color: var(--d-muted-2) !important; } body.npav-dark-content .form-control:focus, body.npav-dark-content select:focus, body.npav-dark-content textarea:focus { border-color: var(--d-accent) !important; box-shadow: 0 0 0 2px var(--d-accent-soft) !important; } /* tables (e.g. license details) */ body.npav-dark-content .table { color: var(--d-text) !important; --bs-table-bg: transparent; --bs-table-color: var(--d-text); } body.npav-dark-content .table th { color: var(--d-text) !important; background-color: var(--d-surface-2) !important; } body.npav-dark-content .table td { color: var(--d-muted) !important; } body.npav-dark-content .table, body.npav-dark-content .table th, body.npav-dark-content .table td { border-color: var(--d-border) !important; } /* content links (scoped to page sections so navbar/footer are untouched) */ body.npav-dark-content .downloads a:not(.btn):not(.button), body.npav-dark-content .nopage a:not(.btn):not(.button), body.npav-dark-content .helpsec a:not(.btn):not(.button), body.npav-dark-content .updatenp a:not(.btn):not(.button), body.npav-dark-content .card a, body.npav-dark-content .bg-white a { color: var(--d-accent) !important; } /* action buttons -> gradient */ body.npav-dark-content .button, body.npav-dark-content .button-full, body.npav-dark-content .primary-btn, body.npav-dark-content .renew-btn, body.npav-dark-content .nr-btn, body.npav-dark-content .btn-primary, body.npav-dark-content .btn-success { background: var(--d-grad) !important; border: none !important; color: #04101f !important; } body.npav-dark-content .button:hover, body.npav-dark-content .primary-btn:hover, body.npav-dark-content .btn-success:hover { filter: brightness(1.08); } /* down-link / dividers reused on some content pages */ body.npav-dark-content a.down-link { color: var(--d-accent) !important; } body.npav-dark-content hr, body.npav-dark-content .downhr { border-color: var(--d-border) !important; opacity: 1; } /* warning / info alerts */ body.npav-dark-content .alert-warning, body.npav-dark-content .custom-alert-updatenp { background-color: rgba(245, 158, 11, 0.10) !important; border: 1px solid rgba(245, 158, 11, 0.30) !important; color: #f7dca6 !important; } /* ============================================================== */ /* 25. EDITION COMPARE (body.npav-dark-editioncompare) */ /* Keeps the branded per-edition column colours; darkens the */ /* banner, body rows, text and borders. (edition-compare.css */ /* loads after this file, so use !important.) */ /* ============================================================== */ /* Banner */ body.npav-dark-editioncompare .fluidclsec { background: transparent !important; } body.npav-dark-editioncompare h2.section-title2, body.npav-dark-editioncompare .editiondiv, body.npav-dark-editioncompare .editiondiv p { color: var(--d-text) !important; } body.npav-dark-editioncompare a.btn.btn-sm.bannerbtn { background: var(--d-grad) !important; color: #04101f !important; border: none !important; } body.npav-dark-editioncompare a.btn.btn-sm.bannerbtn i { color: #04101f !important; } body.npav-dark-editioncompare .editincom .section-title h2 { color: var(--d-text) !important; } /* Table shell + striped rows */ body.npav-dark-editioncompare #editionTable, body.npav-dark-editioncompare .editincom .table { color: var(--d-text) !important; background: transparent !important; } body.npav-dark-editioncompare .table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03) !important; } body.npav-dark-editioncompare .table tbody tr:nth-child(odd) { background-color: transparent !important; } /* Feature text — bold names white (heading), descriptions readable muted */ body.npav-dark-editioncompare td.feature-name-cell, body.npav-dark-editioncompare .features-row .feature-name-cell { color: var(--d-muted) !important; } body.npav-dark-editioncompare td.feature-name-cell b, body.npav-dark-editioncompare tr.features-row b { color: var(--d-green) !important; } /* MRP / Best Buy rows — label cells were on a light strip; darken the non-branded cells so the labels read (the coloured price cells keep theirs) */ body.npav-dark-editioncompare .mrp-row td, body.npav-dark-editioncompare .bestbuy-row > td.text-left, body.npav-dark-editioncompare .mrp-row th, body.npav-dark-editioncompare .bestbuy-row > th { background-color: var(--d-bg) !important; } body.npav-dark-editioncompare .mrp-row td, body.npav-dark-editioncompare .mrp-row td s { color: var(--d-muted) !important; } body.npav-dark-editioncompare .mrp-row td strong, body.npav-dark-editioncompare .bestbuy-row > td.text-left strong { color: var(--d-text) !important; } /* Borders */ body.npav-dark-editioncompare .border-column, body.npav-dark-editioncompare .right-border, body.npav-dark-editioncompare .e-zplu-sec { border-color: var(--d-border) !important; } body.npav-dark-editioncompare .first-column-th { background: transparent !important; } /* Sticky header clone */ body.npav-dark-editioncompare .fixed-header { background-color: var(--d-surface) !important; } /* Support check stays green (success) */ body.npav-dark-editioncompare .txt-l i { color: var(--d-green) !important; }