/*-------------------------------------------------------------- # Dark Mode # Activated by [data-bs-theme="dark"] on . # Uses Bootstrap 5.3 dark mode + theme CSS variable overrides. --------------------------------------------------------------*/ [data-bs-theme="dark"] { /* Global colors — based on Bootstrap 5.3 dark defaults */ --background-color: #212529; --default-color: #dee2e6; --heading-color: #f8f9fa; --accent-color: #6c7cff; --surface-color: #2b3035; --contrast-color: #ffffff; /* Nav colors */ --nav-color: #dee2e6; --nav-hover-color: #6c7cff; --nav-mobile-background-color: #212529; --nav-dropdown-background-color: #2b3035; --nav-dropdown-color: #dee2e6; --nav-dropdown-hover-color: #6c7cff; } /* Header on scroll */ [data-bs-theme="dark"] .scrolled .header { box-shadow: 0px 0 18px rgba(0, 0, 0, 0.4); } /* Index page: transparent header → dark on scroll */ [data-bs-theme="dark"] .index-page .header { --background-color: rgba(33, 37, 41, 0); } [data-bs-theme="dark"] .index-page.scrolled .header { --background-color: #212529; } /* Hero background: dark variant SVG */ [data-bs-theme="dark"] .hero { background: url(../img/hero-bg-dark.svg) top center no-repeat; background-size: cover; background-color: var(--background-color); } /* Footer */ [data-bs-theme="dark"] .footer { border-top-color: rgba(255, 255, 255, 0.1); } /* Page title */ [data-bs-theme="dark"] .page-title .heading { border-top-color: rgba(255, 255, 255, 0.1); } /* Cookie banner */ [data-bs-theme="dark"] #cookie-banner { background-color: #2b3035 !important; border-top-color: rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] #cookie-banner h5 { color: var(--heading-color); } [data-bs-theme="dark"] #cookie-banner p { color: var(--default-color) !important; } /* Plan title colors: lighten for dark backgrounds */ [data-bs-theme="dark"] .color-plan-title1 { color: #7ddf20; } /* Pricing cards */ [data-bs-theme="dark"] .pricing .pricing-tem { background-color: var(--surface-color); box-shadow: 0px 0 30px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .pricing .featured { background: var(--accent-color); } /* Pricing buy buttons: more visible on dark background */ [data-bs-theme="dark"] .pricing .btn-buy { border-color: var(--accent-color); color: var(--contrast-color); background: var(--accent-color); } [data-bs-theme="dark"] .pricing .btn-buy:hover { background: color-mix(in srgb, var(--accent-color), #ffffff 15%); color: #ffffff; } /* FAQ items */ [data-bs-theme="dark"] .faq .faq-container .faq-item { border-bottom-color: rgba(255, 255, 255, 0.1); } /* Blog post article card */ [data-bs-theme="dark"] .blog-post-content { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.08); } /* Blog entries: replace glow shadow with subtle border */ [data-bs-theme="dark"] .blog .entries .entry { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.08); } /* Feature boxes */ [data-bs-theme="dark"] .features .feature-box { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .features .feature-box i { background: rgba(108, 124, 255, 0.12); color: var(--accent-color); } [data-bs-theme="dark"] .features .feature-box:hover i { background: var(--accent-color); color: #ffffff; } /* Tables */ [data-bs-theme="dark"] .table { --bs-table-bg: var(--surface-color); --bs-table-color: var(--default-color); --bs-table-border-color: rgba(255, 255, 255, 0.1); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] .table-light { --bs-table-bg: rgba(255, 255, 255, 0.1); --bs-table-color: var(--heading-color); --bs-table-border-color: rgba(255, 255, 255, 0.1); } /* Align Bootstrap text-primary with theme accent color */ [data-bs-theme="dark"] .text-primary { color: var(--accent-color) !important; } /* Improve muted/success text contrast on dark backgrounds */ [data-bs-theme="dark"] .text-muted { color: #9ca3af !important; } [data-bs-theme="dark"] .text-success { color: #6ee7a0 !important; } /* Cards */ [data-bs-theme="dark"] .card { background-color: var(--surface-color); border-color: rgba(255, 255, 255, 0.1); } /* Alerts */ [data-bs-theme="dark"] .alert-light { background-color: rgba(255, 255, 255, 0.05); color: var(--default-color); border-color: rgba(255, 255, 255, 0.1); } /* Form elements */ [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-control { background-color: var(--surface-color); border-color: rgba(255, 255, 255, 0.15); color: var(--default-color); } /* Hero architecture image: swap to dark variant */ [data-bs-theme="dark"] .hero-architecture-img { content: url(../img/hero-img-dark.png); } /* WebAdmin/WebClient: swap to dark variants */ [data-bs-theme="dark"] .dark-swap-webadmin { content: url(../img/webadmin-dark.png); } [data-bs-theme="dark"] .dark-swap-webclient { content: url(../img/webclient-dark.png); } /* Service boxes: replace glow shadow with subtle border */ [data-bs-theme="dark"] .services .service-box { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 3px solid var(--accent-color); } /* Service box hover: subtle tint in dark mode */ [data-bs-theme="dark"] .services .service-box.purple:hover { background: color-mix(in srgb, var(--accent-color), transparent 88%); } /* ISO 27001 logo: swap to dark variant */ [data-bs-theme="dark"] .iso-logo[src*="iso27001.svg"] { content: url(../img/iso27001-dark.svg); } /* Dark mode toggle: show correct icon based on active theme */ .dark-mode-icon-dark { display: none; } [data-bs-theme="dark"] .dark-mode-icon-light { display: none; } [data-bs-theme="dark"] .dark-mode-icon-dark { display: inline; } /* Dark mode toggle button */ .dark-mode-toggle { background: none; border: none; color: var(--nav-color); font-size: 22px; cursor: pointer; padding: 0; line-height: 0; transition: color 0.3s; display: flex; align-items: center; } .dark-mode-toggle:hover { color: var(--nav-hover-color); }