/** * Day / Night Mode * Additive stylesheet — does not modify style.css. * Toggling adds/removes the "dark-mode" class on . * Everything below is scoped under html.dark-mode so the * default (day) look of the site is completely unaffected. */ /* --------------------------------------------------------- Toggle Button (visible in both modes) --------------------------------------------------------- */ #themeToggle { position: fixed; top: 90px; right: 15px; z-index: 9999; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: #106eea; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; } #themeToggle:hover { background: #3b8af2; transform: translateY(-2px); } #themeToggle i { font-size: 20px; line-height: 1; transition: opacity 0.25s ease, transform 0.4s ease; } /* Show the sun icon by default (day mode = click to go dark) */ #themeToggle #themeToggleIconMoon { display: none; } html.dark-mode #themeToggle #themeToggleIconSun { display: none; } html.dark-mode #themeToggle #themeToggleIconMoon { display: inline-block; } html.dark-mode #themeToggle { background: #ffc107; color: #1a1a2e; } @media (max-width: 991px) { #themeToggle { top: auto; bottom: 15px; right: 15px; } } /* --------------------------------------------------------- Base --------------------------------------------------------- */ html.dark-mode { background: #0f1420; } html.dark-mode body { background: #0f1420; color: #d7dbe3; } html.dark-mode a { color: #4da3ff; } html.dark-mode a:hover { color: #7fc0ff; } html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: #f1f3f7; } html.dark-mode p, html.dark-mode li, html.dark-mode span { color: #c3c8d3; } /* --------------------------------------------------------- Top Bar & Header --------------------------------------------------------- */ html.dark-mode #topbar { background: #0b0f19; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } html.dark-mode #topbar .contact-info a, html.dark-mode #topbar .contact-info i { color: #c3c8d3; } html.dark-mode #header { background: #131826; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); } html.dark-mode #header.header-scrolled { background: rgba(19, 24, 38, 0.96); } html.dark-mode #header .logo a, html.dark-mode #header .logo a span { color: #f1f3f7; } html.dark-mode .nav-menu a { color: #e6e9ef; } html.dark-mode .nav-menu a:hover, html.dark-mode .nav-menu .active > a, html.dark-mode .nav-menu li:hover > a { color: #4da3ff; } html.dark-mode .nav-menu .drop-down ul { background: #182033; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); } html.dark-mode .nav-menu .drop-down ul a { color: #d7dbe3; } html.dark-mode .nav-menu .drop-down ul a:hover, html.dark-mode .nav-menu .drop-down ul .active > a, html.dark-mode .nav-menu .drop-down ul li:hover > a { color: #4da3ff; } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ html.dark-mode #hero { background: linear-gradient(rgba(6, 10, 20, 0.75), rgba(6, 10, 20, 0.75)), url("../img/hero-bg.jpg") top center; background-size: cover; } html.dark-mode #hero h1, html.dark-mode #hero h1 span, html.dark-mode #hero p { color: #f1f3f7; } /* --------------------------------------------------------- Generic light-background sections --------------------------------------------------------- */ html.dark-mode .section-bg { background: #131826; } html.dark-mode .about, html.dark-mode .about .content h3, html.dark-mode .about .content p, html.dark-mode .about .content ul li { color: #c3c8d3; } html.dark-mode .about .content h3 { color: #f1f3f7; } /* --------------------------------------------------------- Featured / Course Icon Boxes --------------------------------------------------------- */ html.dark-mode .featured-services .icon-box, html.dark-mode .services .icon-box { background: #182033; box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.35); } html.dark-mode .featured-services .title a, html.dark-mode .services .icon-box h4 a { color: #f1f3f7; } html.dark-mode .featured-services .description, html.dark-mode .services .icon-box p { color: #b9bfcb; } /* --------------------------------------------------------- Skills / Progress bars --------------------------------------------------------- */ html.dark-mode .skills .progress-bar-wrap { background: #232b40; } /* --------------------------------------------------------- Counts --------------------------------------------------------- */ html.dark-mode .counts { background: #131826; } html.dark-mode .counts .count-box p { color: #c3c8d3; } /* --------------------------------------------------------- Clients logos strip --------------------------------------------------------- */ html.dark-mode .clients { background: #131826; } html.dark-mode .clients img { opacity: 0.85; filter: brightness(0.95) contrast(1.05); } /* --------------------------------------------------------- Team --------------------------------------------------------- */ html.dark-mode .team .member { background: #182033; } html.dark-mode .team .member .member-info h4 { color: #f1f3f7; } html.dark-mode .team .member .member-info p { color: #b9bfcb; } /* --------------------------------------------------------- Pricing boxes --------------------------------------------------------- */ html.dark-mode .pricing .box { background: #182033; } html.dark-mode .pricing .box h3, html.dark-mode .pricing .box h4 { color: #f1f3f7; } html.dark-mode .pricing .box ul li { color: #c3c8d3; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* --------------------------------------------------------- FAQ --------------------------------------------------------- */ html.dark-mode .faq .faq-list a { color: #f1f3f7; } html.dark-mode .faq .faq-list p { color: #b9bfcb; } /* --------------------------------------------------------- Contact form --------------------------------------------------------- */ html.dark-mode .contact .info-box { background: #182033; } html.dark-mode .contact .info-box h3 { color: #f1f3f7; } html.dark-mode .contact .info-box p { color: #b9bfcb; } html.dark-mode .contact .php-email-form { background: #182033; } html.dark-mode .contact .php-email-form input, html.dark-mode .contact .php-email-form textarea { background: #0f1420; color: #e6e9ef; border-color: #2b3550; } html.dark-mode .contact .php-email-form input::placeholder, html.dark-mode .contact .php-email-form textarea::placeholder { color: #7d8494; } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ html.dark-mode #footer { background: #0b0f19; color: #b9bfcb; } html.dark-mode #footer .footer-top { background: #0b0f19; border-top-color: rgba(255, 255, 255, 0.08); } html.dark-mode #footer .footer-top .footer-contact h3, html.dark-mode #footer .footer-top h4 { color: #f1f3f7; } html.dark-mode #footer .footer-top .footer-contact p, html.dark-mode #footer .footer-top .footer-links ul a { color: #b9bfcb; } html.dark-mode #footer .copyright, html.dark-mode #footer .credits { color: #8a90a0; } html.dark-mode #footer .footer-newsletter { background: #131826; } html.dark-mode #footer .footer-newsletter form input[type="email"] { background: #0f1420; color: #e6e9ef; } /* --------------------------------------------------------- Misc utility text on light backgrounds that stay light-colored --------------------------------------------------------- */ html.dark-mode .text-black { color: #d7dbe3 !important; }