/* ════════════════════════════════════════════════════════════════ css/theme.css Light / Dark mode CSS variables + toggle button styles. Dark mode = existing default (no change). Light mode applied via: Author: Pradeep Rathi ──────────────────────────────────────────────────────────────── */ /* ── Light-mode overrides ── */ html.light-mode { --bg: #f5f5f0; --bg-alt: #efefea; --bg-card: #ffffff; --bg-mid: #e8e8e3; --bg-hi: #ededed; --border: #eee; --border-lt: #dcdcdc; --fg: rgba(0,0,0,0.65); --fg-sub: rgba(0,0,0,0.65); --fg-muted: rgba(0,0,0,0.42); --fg-dim: rgba(0,0,0,0.22); /* About/Services/etc page tokens — light overrides */ --about-bg: #f5f5f0; --about-bg-2: #eeeeea; --about-bg-card: #ffffff; --about-bg-card-2: #f0f0eb; --about-border: rgba(0,0,0,0.08); --about-border-hover: rgba(255,107,26,0.35); --about-text: #444450; --about-text-dim: #888890; --about-white: #111111; --our-services-bg : #f5f5f0; --our-services-bg-2 : #eeeeea; --our-services-bg-card : #ffffff; --our-services-bg-card-2 : #f0f0eb; --our-services-border : rgba(0,0,0,0.08); --our-services-border-hover: rgba(255,107,26,0.35); --our-services-white : #111111; --our-services-text : #444450; --our-services-text-dim : #888890; } /* ── Body background & color reset for light mode ── */ html.light-mode body { background: var(--bg); color: var(--fg); } html.light-mode h1, html.light-mode h2, html.light-mode h3, html.light-mode h4, html.light-mode h5, html.light-mode h6 { color: var(--fg); } /* ── Header light mode ── */ html.light-mode .site-header { background: white; } html.light-mode .nav-pill { /* background: rgba(0,0,0,0.05); */ border-color: var(--border-lt); } /* html.light-mode .nav-pill a { color: var(--fg); } */ html.light-mode .nav-toplink { color: var(--fg); } /* ── Dropdown light mode ── */ html.light-mode .dropdown-menu { background: rgba(255,255,255,0.98); border-color: var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.12); } html.light-mode .dropdown-col a { color: var(--fg-sub); } html.light-mode .dropdown-col a:hover { color: var(--fg); background: rgba(255,106,26,0.07); } /* ── Footer light mode ── */ html.light-mode footer { background: var(--bg-card) !important; border-top-color: var(--border); } html.light-mode footer h3 { color: var(--fg) !important; } html.light-mode .footer-link, html.light-mode .contact-footer .contact-info { color: var(--fg-sub); } /* ── Marquee / logo strip ── */ html.light-mode .logo-marquee { background: white !important; border-color: rgba(0,0,0,.15); } html.light-mode .img-logo { filter: brightness(0); opacity: 0.55; } html.light-mode .img-logo:hover { opacity: 0.85 !important; } /* ── Cards & borders ── */ html.light-mode .blog-card, html.light-mode .focus-main-card, html.light-mode .focus-card, html.light-mode .reviews-wrapper, html.light-mode .faq-box, html.light-mode .stat-circle, html.light-mode .contact-detail, html.light-mode .contact-social, html.light-mode .contact-map, html.light-mode .contact-form-card, html.light-mode .about-values__card, html.light-mode .about-team__card, html.light-mode .about-faq__item, html.light-mode .our-services-grid__card, html.light-mode .our-services-packages__card, html.light-mode .our-services-testimonials__card, html.light-mode .our-services-faq__item, html.light-mode .bd-sidebar__card, html.light-mode .blog-card, html.light-mode .bd-post-card { background: var(--bg-card); border-color: var(--border); } html.light-mode { .service-in, .small-banner-in { background: #f9f9f9; } .wrap-services, .tools-tech, .our-portfolio { background: white; padding: 75px 0; } .we-work-for { background: #f5f5f0; .wrap-group, .group { border-color: #ddd; background: white; } } .faqs { color: #ff8c47; } .our-office .border-t { border-color: #ddd; } .bg-\[\#161616\], .bg-common { background: white; } } /* ── FAQ box bg extension ── */ html.light-mode .faq-box::before, html.light-mode .reviews-wrapper::before { background: var(--bg-card); } /* ── About bg sections ── */ html.light-mode .about-intro, html.light-mode .about-gallery, html.light-mode .about-founder, html.light-mode .about-brands, html.light-mode .about-cta, html.light-mode .our-services-grid, html.light-mode .our-services-packages, html.light-mode .our-services-testimonials, html.light-mode .our-services-cta { background: var(--about-bg-2); } html.light-mode .about-values, html.light-mode .about-process, html.light-mode .about-team, html.light-mode .about-faq, html.light-mode .our-services-how, html.light-mode .our-services-tools, html.light-mode .our-services-faq { background: var(--about-bg); } /* ── Hero video fade in light mode ── */ html.light-mode .hero-video-fade { background: linear-gradient(to bottom, transparent 0%, rgba(245,245,240,0.3) 55%, #f5f5f0 100%); } html.light-mode .hero::after { background: radial-gradient(ellipse at center, rgba(255,106,26,0.12) 0%, transparent 70%); } /* ── Stat circles ── */ html.light-mode .stat-circle { background: rgba(255,255,255,0.9); } /* ── Teams slider ── */ html.light-mode .teams-slider, html.light-mode .left-who-are { border-color: var(--border); } html.light-mode .team-stat.active { background: var(--bg-card); } /* ── Section labels & text ── */ html.light-mode .service-num { color: var(--fg-muted); } html.light-mode .service-title { color: var(--fg); } html.light-mode .service-desc { color: var(--fg-muted); } html.light-mode .service-row { border-color: var(--border); background-color: white; padding: 2rem; border-radius: 16px; } /* ── Contact form inputs light ── */ html.light-mode .contact-form__input, html.light-mode .contact-form__textarea, html.light-mode .contact-form__select { background: transparent; border-color: rgba(0,0,0,0.18); color: var(--fg); } html.light-mode .contact-form__input::placeholder, html.light-mode .contact-form__textarea::placeholder { color: var(--fg-muted); } /* ── FAQ question buttons ── */ html.light-mode .faq-question, html.light-mode .about-faq__question, html.light-mode .our-services-faq__question { color: var(--fg); } html.light-mode .about-faq__answer-inner, html.light-mode .our-services-faq__answer-inner { background: var(--bg-card); } /* ── Blog card images ── */ html.light-mode .blog-card-img img { filter: brightness(0.95); } html.light-mode .blog-card-img img:hover { filter: brightness(1); } /* ── Tag pills ── */ html.light-mode .tag-pill { background: transparent; color: rgba(0,0,0,0.5); } html.light-mode .bd-tag { background: var(--bg-card); border-color: var(--border); color: var(--fg-sub); } /* ── Form section (lead gen) ── */ html.light-mode .form-card { background: var(--bg-card); border-color: var(--border); } html.light-mode .field input, html.light-mode .field select, html.light-mode .field textarea { background: transparent; border-color: var(--border-lt); color: var(--fg); } html.light-mode .services-box { background: transparent; border-color: var(--border-lt); } html.light-mode .chip { background: var(--bg-hi); border-color: var(--border-lt); color: var(--fg-sub); } /* ── Review cards ── */ html.light-mode .review-text { color: rgba(0,0,0,0.65); } html.light-mode .review-nav { border-color: var(--border-lt); color: var(--fg); } html.light-mode .dot { background: rgba(0,0,0,0.18); } /* ── Focus cards ── */ html.light-mode .focus-desc { color: var(--fg-sub); } /* ── Newsletter card (orange bg — stays same in both modes) ── */ /* no override needed */ /* ════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ──────────────────────────────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-lt); background: rgba(255,255,255,0.06); color: var(--fg-sub); cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; margin-left: 0.6rem; backdrop-filter: blur(8px); order: 4; } .theme-toggle:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,106,26,0.1); box-shadow: 0 0 14px rgba(255,106,26,0.25); } .theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s ease; } /* Sun icon shown in dark mode (click to switch to light) */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } /* Moon icon shown in light mode (click to switch back to dark) */ html.light-mode .theme-toggle .icon-sun { display: none; } html.light-mode .theme-toggle .icon-moon { display: block; } html.light-mode .theme-toggle { background: rgba(0,0,0,0.05); border-color: var(--border-lt); color: var(--fg-sub); } .light-mode { .bg-\[\#0d0d0d\] {background-color: transparent;} .orb-1 {background: radial-gradient(circle, rgba(255, 255, 255, 0.38) 0%, transparent 70%);} .orb-2 {background: radial-gradient(circle, rgba(255, 255, 255, 0.54) 0%, transparent 70%)} .teams-slider {background-color: white;} .hero-services {padding-top: 0;} .text-white\/55, .text-white\/70, .blog-body p:not(.blog-meta), footer .text-white\/35, .contact-form__label {color: var(--fg-sub) !important;} footer { div.absolute {color: black; opacity: .035;} div.border-t { border-color: #ddd; p {color: var(--fg-sub);} } } #contact { .bg-\[\#161616\] {background-color: transparent;} .text-white\/60 {color: var(--fg-sub);} .max-w-\[1280px\] {padding-top: 0;} .bg-white\/10 {background-color: rgb(0 0 0 / 0.1);} .heading-contact {margin: 0;} } .field-group-label, .field label, .our-services-tools__item {color: rgba(0,0,0,.75); font-weight: 400;} .resource-card {background: #fff !important;} .ip-hero__badge, .about-hero__badge {background: white;} } /* ════════════════════════════════════════════════════════════════ INNER PAGE LIGHT MODE FIXES (Task 5) All cards, backgrounds and elements that stay dark in light mode ──────────────────────────────────────────────────────────────── */ /* Inner page hero backgrounds */ html.light-mode .ip-hero, html.light-mode .ip-split-hero { background: var(--bg); } /* Why-choose cards */ html.light-mode .ip-why { background: var(--bg); } html.light-mode .ip-why__card { background: var(--bg-card); border-color: var(--border); } html.light-mode .ip-why__card:hover { border-color: rgba(255,107,26,0.35); } /* Lead form card */ html.light-mode .ip-lead-card { background: var(--bg-card); border-color: var(--border); } html.light-mode .ip-lead-card__heading { color: var(--fg); } html.light-mode .ip-lead-card__sub { color: var(--fg-muted); } /* Ticker strip */ html.light-mode .ip-ticker { background: var(--bg-alt) !important; border-color: var(--border); } html.light-mode .ip-ticker__item { color: var(--fg-muted); } /* FAQ section */ html.light-mode .ip-faq { background: var(--bg); } html.light-mode .faq-item { border-color: var(--border); } html.light-mode .faq-question { color: var(--fg); background: transparent; } html.light-mode .faq-icon { background: var(--bg-mid); border-color: var(--border-lt); color: var(--fg-sub); } html.light-mode .faq-answer p { color: var(--fg-sub); } /* Content tags / ip-tag */ html.light-mode .ip-tag { background: var(--bg-card); border-color: var(--border); color: var(--fg); } /* Sidebar cards on inner pages */ html.light-mode .ip-sidebar > * { background: var(--bg-card); border-color: var(--border); } html.light-mode .ip-sidebar__cta-title { color: var(--fg); } html.light-mode .ip-sidebar__cta-text { color: var(--fg-sub); } html.light-mode .ip-related__link { color: var(--fg-sub); } /* CTA section */ html.light-mode .our-services-cta { background: var(--bg-alt); } /* Tools/Resource card grids on index pages (ip-why__card used as links) */ html.light-mode a.ip-why__card { background: var(--bg-card); border-color: var(--border); color: var(--fg); } html.light-mode a.ip-why__card:hover { border-color: rgba(255,107,26,0.35); } html.light-mode a.ip-why__card .ip-why__card-title { color: var(--fg); } /* orb blobs — reduce opacity in light mode so they don't look garish */ html.light-mode .orb-1 { opacity: 0.35; } html.light-mode .orb-2 { opacity: 0.25; } html.light-mode .ip-hero__blob--1, html.light-mode .ip-split-hero__blob--1 { opacity: 0.3; } html.light-mode .ip-hero__blob--2, html.light-mode .ip-split-hero__blob--2 { opacity: 0.2; } /* bd-prose text */ html.light-mode .bd-prose p { color: var(--fg-sub); } html.light-mode .bd-prose h2, html.light-mode .bd-prose h3 { color: var(--fg); } html.light-mode .bd-prose strong { color: var(--fg); } html.light-mode .bd-pullquote { background: var(--bg-card); border-color: var(--orange); } html.light-mode .bd-callout { background: rgba(255,107,26,0.06); border-color: rgba(255,107,26,0.18); } /* Location / Industry cards */ html.light-mode .proj-card, html.light-mode .ip-locations-grid .ip-why__card { background: var(--bg-card); border-color: var(--border); } /* Services page overview cards */ html.light-mode .our-services-grid__card { background: var(--bg-card); border-color: var(--border); } html.light-mode .our-services-how { background: var(--bg); } html.light-mode .our-services-tools { background: var(--bg); } html.light-mode .our-services-tools__item { background: var(--bg-card); border-color: var(--border); color: var(--fg-sub); } html.light-mode .our-services-results-bar { border-color: var(--border); } html.light-mode .our-services-results-bar__label { color: var(--fg-muted); } /* Newsletter card in light mode */ html.light-mode .newsletter-card { background: var(--orange); } html.light-mode .newsletter-card input { background: rgba(0,0,0,0.12); color: #fff; } html.light-mode .newsletter-card p, html.light-mode .newsletter-card h3 { color: #fff !important; } /* Footer — goes white in light mode (see rule near top of file) */ html.light-mode footer .footer-link:hover { color: var(--orange) !important; } /* Contact form inside lead card */ html.light-mode .ip-lead-card .contact-form__input, html.light-mode .ip-lead-card .contact-form__textarea { background: transparent; border-color: var(--border-lt); color: var(--fg); } html.light-mode .ip-lead-card .contact-form__label { color: var(--fg); } html.light-mode .ip-lead-card .contact-form__input::placeholder, html.light-mode .ip-lead-card .contact-form__textarea::placeholder { color: var(--fg-muted); } /* ip-split-hero text */ html.light-mode .ip-split-hero__title { color: var(--fg); } html.light-mode .ip-split-hero__text { color: var(--fg-sub); } html.light-mode .ip-split-hero__point { color: var(--fg); } html.light-mode .ip-hero__title { color: var(--fg); } html.light-mode .ip-hero__sub { color: var(--fg-sub); } html.light-mode .ip-why__title { color: var(--fg); } html.light-mode .ip-why__text { color: var(--fg-sub); } html.light-mode .ip-why__card-title { color: var(--fg); } html.light-mode .ip-crumb a { color: var(--fg-muted); } /* Locations destination cards / city cards / related grid */ html.light-mode .ip-dest-card, html.light-mode .ip-city-card, html.light-mode .ip-related-grid .ip-related__link { background: var(--bg-card); border-color: var(--border); } html.light-mode .ip-dest-card:hover, html.light-mode .ip-city-card:hover { border-color: rgba(255,107,26,0.35); } html.light-mode .ip-dest-card__name, html.light-mode .ip-city-card__name, html.light-mode .ip-section-head__title { color: var(--fg); } html.light-mode .ip-dest-card__region, html.light-mode .ip-city-card__tag, html.light-mode .ip-section-head__text { color: var(--fg-sub); } html.light-mode .ip-dest-card__foot { color: var(--fg-sub); border-top-color: var(--border); } html.light-mode .ip-dest-card:hover .ip-dest-card__foot { color: var(--fg); }