/* Dark Mode Overrides for Grabyinsur Template Applied when has class "dark-mode" */ /* ============================== CSS Variables ============================== */ body.dark-mode { --dm-bg-primary: #0d0d1a; --dm-bg-secondary: #13132a; --dm-bg-card: #1a1a2e; --dm-bg-light: #1e1e35; --dm-bg-hover: #252540; --dm-text: #c8cee0; --dm-heading: #7ab4ff; --dm-muted: #8a93ad; --dm-border: #2a2a45; --dm-teal: #3AC19B; --dm-cyan: #c8dae6; --dm-navy: #304157; } /* ============================== Base ============================== */ body.dark-mode { background-color: var(--dm-bg-primary); color: var(--dm-text); } body.dark-mode a { color: var(--dm-heading); } body.dark-mode a:hover, body.dark-mode a:focus { color: var(--dm-teal); } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .main-title { color: var(--dm-heading); } body.dark-mode p { color: var(--dm-text); } body.dark-mode .sub-title { color: var(--dm-teal); } body.dark-mode .line-after::after, body.dark-mode .line-before::before { background-color: var(--dm-border); } body.dark-mode hr { border-color: var(--dm-border); } /* ============================== Preloader ============================== */ body.dark-mode #preload { background-color: var(--dm-bg-primary); } /* ============================== Header ============================== */ body.dark-mode #header, body.dark-mode .sticky-area-wrap.fixed-hide { background-color: var(--dm-bg-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } body.dark-mode .sub-header { background-color: #0a2a20; } body.dark-mode .sub-header .info .gmail, body.dark-mode .sub-header .info .hotline { color: var(--dm-text); } body.dark-mode .sub-header .info .hotline a, body.dark-mode .sub-header .address, body.dark-mode .sub-header .icon::before { color: var(--dm-teal); } body.dark-mode #menu-primary-menu > li > a { color: var(--dm-heading); } body.dark-mode #mainnav ul.sub-menu { background: var(--dm-bg-card); border-top-color: var(--dm-teal); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } body.dark-mode .mainnav ul.sub-menu li a { color: var(--dm-text); } body.dark-mode .mainnav ul.sub-menu li.current-item a, body.dark-mode .mainnav ul.sub-menu li:hover a { color: var(--dm-cyan); } body.dark-mode .header-ct-right .header-btn .widget-button { background-color: var(--dm-navy); color: var(--dm-cyan); } /* ============================== Mobile Header & Canvas Nav ============================== */ body.dark-mode .header-mobile .inner-header { background: var(--dm-bg-card); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); } body.dark-mode #header-mobile .header-wrap .btn-menu span, body.dark-mode #header-mobile .header-wrap .btn-menu::before, body.dark-mode #header-mobile .header-wrap .btn-menu::after { background-color: var(--dm-heading); } body.dark-mode .canvas-nav-wrap .inner-canvas-nav { background-color: var(--dm-bg-card); } body.dark-mode #mainnav_canvas > ul > li, body.dark-mode .header-mobile .inner-canvas-nav .logo { border-color: var(--dm-border); } body.dark-mode #mainnav_canvas ul li a { color: var(--dm-text); } /* ============================== Sections ============================== */ body.dark-mode section { background-color: var(--dm-bg-primary); } /* ============================== Buttons ============================== */ body.dark-mode .widget-button, body.dark-mode .tf-btn, body.dark-mode button[type="submit"], body.dark-mode input[type="submit"] { background-color: var(--dm-navy); color: var(--dm-cyan); } body.dark-mode .widget-button:hover, body.dark-mode .tf-btn:hover { background-color: var(--dm-teal); color: var(--dm-bg-primary); } /* ============================== Forms ============================== */ body.dark-mode select, body.dark-mode textarea, body.dark-mode input[type="text"], body.dark-mode input[type="password"], body.dark-mode input[type="datetime"], body.dark-mode input[type="datetime-local"], body.dark-mode input[type="date"], body.dark-mode input[type="month"], body.dark-mode input[type="time"], body.dark-mode input[type="week"], body.dark-mode input[type="number"], body.dark-mode input[type="email"], body.dark-mode input[type="url"], body.dark-mode input[type="search"], body.dark-mode input[type="tel"], body.dark-mode input[type="color"] { background-color: var(--dm-bg-light); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .nice-select { background-color: var(--dm-bg-light); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .nice-select .list { background-color: var(--dm-bg-card); } body.dark-mode .nice-select .option:hover, body.dark-mode .nice-select .option.selected { background-color: var(--dm-bg-hover); color: var(--dm-heading); } /* ============================== Cards & Widgets ============================== */ body.dark-mode .widget-service-item, body.dark-mode .widget-choose-item, body.dark-mode .blog-item, body.dark-mode .blog-post, body.dark-mode .our-team-item .content, body.dark-mode .widget-our-team-item .info, body.dark-mode .testimonial-item, body.dark-mode .widget-testimonials-item, body.dark-mode .pricing-item, body.dark-mode .pricing-table-item, body.dark-mode .faq-item, body.dark-mode .widget-faq-item, body.dark-mode .accordion-item, body.dark-mode .job-item, body.dark-mode .widget-tips-item, body.dark-mode .sidebar, body.dark-mode .widget-sidebar, body.dark-mode .widget-blog-sidebar, body.dark-mode .widget-get-quote, body.dark-mode .widget-request-quote, body.dark-mode .comment-respond { background-color: var(--dm-bg-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } body.dark-mode .widget-service-item .icon span::after { background-color: var(--dm-bg-card); } /* ============================== Widget Text Colors ============================== */ body.dark-mode .widget-service-item .text a, body.dark-mode .widget-choose-us-item .title a, body.dark-mode .widget-counter-item .number, body.dark-mode .blog-title a, body.dark-mode .blog-item-content h3 a, body.dark-mode .widget-blog-update-item h3 a, body.dark-mode .our-team-item .content h3 a, body.dark-mode .widget-our-team-item .name, body.dark-mode .testimonials-item .author .name, body.dark-mode .widget-testimonials-item .name, body.dark-mode .pricing-item .title, body.dark-mode .pricing-item .price, body.dark-mode .widget-about-us ul li, body.dark-mode .widget-about-us .phone .phone-number, body.dark-mode .contact-info-item h4 { color: var(--dm-heading); } body.dark-mode .widget-service-item p, body.dark-mode .widget-choose-us-item p, body.dark-mode .widget-counter-item p, body.dark-mode .widget-about-us p, body.dark-mode .widget-about-us .phone, body.dark-mode .blog-item-content p, body.dark-mode .widget-blog-update-item p, body.dark-mode .blog-meta a, body.dark-mode .blog-meta span, body.dark-mode .testimonials-item .content p, body.dark-mode .widget-testimonials-item p, body.dark-mode .our-team-item .content p, body.dark-mode .widget-our-team-item .position, body.dark-mode .pricing-item ul li, body.dark-mode .contact-info-item p, body.dark-mode .contact-info-item a, body.dark-mode .eror-404-wrap p { color: var(--dm-text); } body.dark-mode .blog-item-content .category a, body.dark-mode .blog-meta a, body.dark-mode .blog-meta span { color: var(--dm-muted); } /* ============================== About Us Widget ============================== */ body.dark-mode .widget-about-us ul { border-bottom-color: var(--dm-border); } /* ============================== Accordion / FAQ ============================== */ body.dark-mode .accordion-button { background-color: var(--dm-bg-card); color: var(--dm-heading); } body.dark-mode .accordion-button:not(.collapsed) { background-color: var(--dm-bg-light); color: var(--dm-teal); box-shadow: none; } body.dark-mode .accordion-body { background-color: var(--dm-bg-card); color: var(--dm-text); } /* ============================== Pricing ============================== */ body.dark-mode .pricing-item, body.dark-mode .pricing-table-item { border-color: var(--dm-border); } body.dark-mode .pricing-item ul li { border-bottom-color: var(--dm-border); } /* ============================== Pagination ============================== */ body.dark-mode .widget-blog-pagination .flat-pagination, body.dark-mode .widget-blog-pagination .flat-pagination li a { color: var(--dm-muted); } body.dark-mode .widget-blog-pagination .next a, body.dark-mode .widget-blog-pagination .flat-pagination li:hover a, body.dark-mode .widget-blog-pagination .flat-pagination li.active a, body.dark-mode .widget-blog-pagination .last a { color: var(--dm-teal); } /* ============================== Swiper Navigation ============================== */ body.dark-mode .swiper-button-next, body.dark-mode .swiper-button-prev { background-color: var(--dm-bg-card); color: var(--dm-heading); } body.dark-mode .swiper-button-next:hover, body.dark-mode .swiper-button-prev:hover { background-color: var(--dm-teal); color: var(--dm-bg-primary); } body.dark-mode .swiper-pagination-bullet { background-color: var(--dm-muted); } body.dark-mode .swiper-pagination-bullet-active { background-color: var(--dm-teal); } /* ============================== Hero / Page Titles ============================== */ body.dark-mode .page-title-home1 h1 { color: var(--dm-heading); } body.dark-mode .page-title-home1 p, body.dark-mode .page-title-home1 .text { color: var(--dm-text); } body.dark-mode .page-title { background-color: #021060; } /* ============================== Footer (already dark — minor deepening) ============================== */ body.dark-mode #footer { background-color: #020e45; } body.dark-mode .footer-bottom { background-color: #010b38; } /* ============================== GoTop Button ============================== */ body.dark-mode .go-top { background-color: var(--dm-teal); } body.dark-mode .go-top span { color: var(--dm-bg-primary); } body.dark-mode .go-top:hover { background-color: var(--dm-cyan); } /* ============================== WhatsApp Button ============================== */ #whatsapp-btn { position: fixed; bottom: 110px; right: 15px; z-index: 9999; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } #whatsapp-btn img { width: 50px; height: 50px; } #whatsapp-btn:hover { transform: scale(1.1); } /* ============================== Dark Mode Toggle Button ============================== */ #dark-mode-toggle { position: fixed; bottom: 170px; right: 15px; z-index: 9999; width: 50px; height: 50px; border-radius: 50%; background-color: #304157; color: #c8dae6; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); will-change: transform; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } #dark-mode-toggle:hover { background-color: #3AC19B; color: #fff; transform: scale(1.1); } body.dark-mode #dark-mode-toggle { background-color: #c8dae6; color: #304157; } body.dark-mode #dark-mode-toggle:hover { background-color: #3AC19B; color: #fff; } /* ============================== Transition: only on elements that change in dark mode ============================== */ body, #header, .sticky-area-wrap, .sub-header, .header-mobile .inner-header, .canvas-nav-wrap .inner-canvas-nav, #mainnav ul.sub-menu, #footer, .footer-bottom, .go-top, .widget-service-item, .widget-choose-item, .blog-item, .blog-post, .our-team-item .content, .testimonial-item, .widget-testimonials-item, .pricing-item, .pricing-table-item, .accordion-item, .accordion-button, .accordion-body, .sidebar, .widget-get-quote, .widget-request-quote, .comment-respond, .nice-select, input, select, textarea { transition: background-color 0.3s ease, color 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease; }