/* ============================================ Neminath Solution - Dark / Light Mode ============================================ */ /* Default: dark mode (uses :root in main.css) */ /* Light mode: override CSS variables when .theme-light is on */ /* Use darker primary (amber) so yellow accent is readable on light backgrounds */ html.theme-light { --body: #f5f6f8; --black: #111827; --white: #1a1a1a; --theme: #ffffff; --theme2: #6b7280; --theme3: #f0f2f5; --title: #0B0B0B; --text2: #4b5563; --border: #e5e7eb; --border-2: #e5e7eb; --border-3: #d1d5db; --border-4: #e5e7eb; --border-5: #d1d5db; --bg-1: #ffffff; --bg-2: #f9fafb; --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08); --box-shadow-2: 0px 4px 25px rgba(0, 0, 0, 0.06); /* Darker primary accent: readable on light mode (replaces bright #EEFB13) */ --yellow: #b45309; --orange: #c2410c; } /* Light mode: sections that use .text-white need dark text for contrast */ html.theme-light .text-white, html.theme-light .text-white a, html.theme-light h1.text-white, html.theme-light h2.text-white, html.theme-light h3.text-white, html.theme-light h4.text-white, html.theme-light h5.text-white, html.theme-light h6.text-white, html.theme-light .single-section-title, html.theme-light .footer-text, html.theme-light .checklist.style2 .text-white, html.theme-light .checklist.style2 .text-white a, html.theme-light .ct-widget-footer .menu a, html.theme-light .copyright, html.theme-light .copyright a { color: #1a1a1a !important; } html.theme-light .footer-section, html.theme-light .bg-theme-color2 { background: #eef0f2 !important; } html.theme-light .ct-header-area.header-sticky, html.theme-light .ct-header-area.ct-transparent-header.header-bg { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); } html.theme-light .ct-header-area a, html.theme-light .ct-header-area .getQuote { color: #1a1a1a !important; } /* Get A Quote and all outline/ghost .ct-btn: dark text in light mode */ html.theme-light .ct-btn, html.theme-light .ct-btn .getQuote, html.theme-light a.ct-btn, html.theme-light a.ct-btn .getQuote, html.theme-light .ct-btn:hover .getQuote { color: #1a1a1a !important; } /* Read more links: dark text in light mode */ html.theme-light .read-more a, html.theme-light li.read-more a, html.theme-light .project-card .read-more a, html.theme-light .project-card.style1 ul li.read-more a, html.theme-light .project-card.style1 ul li.read-more a i, html.theme-light .project-card.style1 ul li.read-more i { color: #1a1a1a !important; } html.theme-light .project-card.style1 ul li.read-more i { background: rgba(0, 0, 0, 0.08) !important; color: #1a1a1a !important; } html.theme-light .theme-toggle-btn { background: rgba(0, 0, 0, 0.08) !important; color: #1a1a1a !important; } /* Elements with primary (yellow) background: use white text in light mode for contrast */ html.theme-light .back-to-top.show, html.theme-light .email-input-container #submitButton, html.theme-light .email-input-container #submitButton:hover { color: #fff !important; } /* .ct-btn.style4 default: light background in light mode → dark text (Our Services, Insights & Updates "Read More") */ html.theme-light .ct-btn.style4 { color: #1a1a1a !important; } html.theme-light .ct-btn.style4 i { color: #1a1a1a !important; } /* .ct-btn.style4 hover: amber background → white text */ html.theme-light .ct-btn.style4:hover, html.theme-light .ct-btn.style4:hover .getQuote { color: #fff !important; } html.theme-light .ct-btn.style4:hover i { color: #fff !important; } html.theme-light .ct-header-area .sub-menu a { color: #1a1a1a !important; } html.theme-light input::placeholder, html.theme-light .main-search-input::placeholder { color: #6b7280 !important; } html.theme-light .offcanvas__info { background: #f9fafb; } html.theme-light .offcanvas__content .text, html.theme-light .offcanvas__contact h4, html.theme-light .offcanvas__contact a, html.theme-light .offcanvas__contact span { color: #1a1a1a !important; } /* Client cards and similar: light mode background */ html.theme-light .client-card { background: rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 0, 0, 0.1) !important; } html.theme-light .client-card span { color: #1a1a1a !important; } /* Breadcrumb / page title (About Us, Blog, Contact Us): keep black overlay, use white text in light mode */ html.theme-light .breadcrumb-wrapper .page-heading h1, html.theme-light .breadcrumb-wrapper .page-heading .breadcrumb-items li, html.theme-light .breadcrumb-wrapper .page-heading .breadcrumb-items li a, html.theme-light .breadcrumb-wrapper .page-heading .breadcrumb-items li i { color: #fff !important; } html.theme-light .breadcrumb-wrapper .page-heading .breadcrumb-items li a:hover { color: #e5e7eb !important; } /* Hero reward icon (white SVG): make dark in light mode so it's visible */ html.theme-light img[src*="rewardIcon.svg"], html.theme-light .fancy-box.style3 .item img[src*="rewardIcon.svg"] { filter: brightness(0); } /* Smooth transition when switching */ html { transition: background-color 0.3s ease, color 0.3s ease; } body { transition: background-color 0.3s ease, color 0.3s ease; }