/* ════════════════════════════════════════ LIGHT MODE — overrides all dark tokens Applied when ════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; /* ── Backgrounds (dark navy → clean white/blue-grey) ── */ --color-primary-950: #FFFFFF; --color-primary-900: #F5F7FF; --color-primary-800: #EEF2FF; --color-primary-700: #E0E7FF; --color-primary-600: #C7D2FE; --color-primary-500: #4F46E5; /* ── Neutral scale flipped ── */ --color-neutral-950: #FFFFFF; --color-neutral-900: #F8FAFC; --color-neutral-800: #F1F5F9; --color-neutral-700: #CBD5E1; --color-neutral-500: #64748B; --color-neutral-300: #475569; --color-neutral-100: #1E293B; --color-neutral-050: #0F172A; /* ── Glass ── */ --glass-bg: rgba(255,255,255,0.82); --glass-border: rgba(0,0,0,0.09); --glass-blur: blur(16px); /* ── Gradients ── */ --gradient-hero: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 50%, #EFF6FF 100%); --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95)); --gradient-text: linear-gradient(135deg, #6D28D9 0%, #2563EB 100%); /* ── Softer shadows (no glow, just depth) ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06); --shadow-lg: 0 20px 60px rgba(0,0,0,0.11), 0 8px 24px rgba(0,0,0,0.07); --shadow-glow-blue: 0 0 30px rgba(79,70,229,0.12); --shadow-glow-violet: 0 0 30px rgba(109,40,217,0.12); --shadow-glow-coral: 0 0 30px rgba(240,84,56,0.15); } /* ════════════════════════════ GLOBAL BODY ════════════════════════════ */ [data-theme="light"] body { background: #FFFFFF; color: #1E293B; } /* ════════════════════════════════════════════════════ HEADINGS — force dark on all headings, including those with inline style="color:#fff" ════════════════════════════════════════════════════ */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #0F172A !important; } /* Preserve gradient text — -webkit-text-fill-color overrides color for rendering */ [data-theme="light"] .gradient-text { color: transparent !important; -webkit-text-fill-color: transparent !important; } /* ════════════════════════════ BODY TEXT & PARAGRAPHS ════════════════════════════ */ /* Sections on service/inner pages with dark bg use p tags that inherit white from dark mode — force dark in light mode */ [data-theme="light"] .section p, [data-theme="light"] .page-hero p, [data-theme="light"] .cta-banner p { color: #475569; } [data-theme="light"] .lead { color: #475569; } [data-theme="light"] .text-muted { color: #64748B; } [data-theme="light"] .check-item { color: #475569; } [data-theme="light"] .check-item .icon { color: var(--color-success); } /* Blog card read-more in light mode */ [data-theme="light"] .blog-read-more { color: var(--color-accent-500); } /* ════════════════════════════ NAV ════════════════════════════ */ [data-theme="light"] .site-nav { background: transparent; } [data-theme="light"] .site-nav.scrolled { background: rgba(255,255,255,0.92); border-bottom-color: rgba(0,0,0,0.08); box-shadow: 0 2px 20px rgba(0,0,0,0.07); } [data-theme="light"] .nav-logo { color: #0F172A; } [data-theme="light"] .nav-logo span { color: var(--color-accent-500); } [data-theme="light"] .nav-logo-mark { background: var(--gradient-accent); } [data-theme="light"] .nav-link { color: #475569; } [data-theme="light"] .nav-link:hover { color: #0F172A; background: rgba(0,0,0,0.05); } [data-theme="light"] .nav-link.active { color: var(--color-accent-500); } [data-theme="light"] .nav-dropdown { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.09); } [data-theme="light"] .dropdown-item__title { color: #1E293B; } [data-theme="light"] .dropdown-item__desc { color: #64748B; } [data-theme="light"] .dropdown-item:hover { background: rgba(109,40,217,0.06); } [data-theme="light"] .btn--ghost { color: #1E293B; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .btn--ghost:hover { background: rgba(109,40,217,0.08); border-color: var(--color-accent-500); color: var(--color-accent-500); } [data-theme="light"] .nav-hamburger span { background: #0F172A; } [data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.98); } [data-theme="light"] .mobile-menu .nav-link { color: #1E293B; } /* ════════════════════════════ HERO ════════════════════════════ */ [data-theme="light"] .hero { background: var(--gradient-hero); } [data-theme="light"] .hero-grid-overlay { background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); } [data-theme="light"] .blob--1 { background: #818CF8; opacity: 0.12; } [data-theme="light"] .blob--2 { background: #A78BFA; opacity: 0.1; } [data-theme="light"] .blob--3 { background: #6366F1; opacity: 0.08; } [data-theme="light"] .hero-badge { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.2); color: var(--color-accent-500); } [data-theme="light"] .hero h1 { color: #0F172A; } [data-theme="light"] .hero-sub { color: #475569; } [data-theme="light"] .hero-trust-text { color: #64748B; } /* Dashboard in light mode */ [data-theme="light"] .dashboard-mockup { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 40px rgba(79,70,229,0.08); } [data-theme="light"] .dashboard-title { color: #94A3B8; } [data-theme="light"] .dash-stat { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); } [data-theme="light"] .dash-stat-label { color: #64748B; } [data-theme="light"] .dash-stat-value { color: #0F172A; } [data-theme="light"] .chart-label { color: #64748B; } [data-theme="light"] .channel-name { color: #64748B; } [data-theme="light"] .channel-bar-track { background: rgba(0,0,0,0.06); } [data-theme="light"] .channel-value { color: #475569; } [data-theme="light"] .hero-float-card { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .float-card-label { color: #94A3B8; } [data-theme="light"] .float-card-value { color: #0F172A; } /* ════════════════════════════ SECTIONS ════════════════════════════ */ [data-theme="light"] .section--dark, [data-theme="light"] .section--navy, [data-theme="light"] .services-section, [data-theme="light"] .process-section, [data-theme="light"] .stats-section, [data-theme="light"] .cases-section, [data-theme="light"] .testimonials-section, [data-theme="light"] .blog-section { background: #F8FAFC; border-color: rgba(0,0,0,0.06); } [data-theme="light"] .pain-section { background: #FFFFFF; } [data-theme="light"] .marquee-section { background: #EEF2FF; } [data-theme="light"] .marquee-wrapper::before { background: linear-gradient(90deg, #EEF2FF, transparent); } [data-theme="light"] .marquee-wrapper::after { background: linear-gradient(-90deg, #EEF2FF, transparent); } /* ════════════════════════════ CARDS ════════════════════════════ */ [data-theme="light"] .card, [data-theme="light"] .bento-card, [data-theme="light"] .case-card, [data-theme="light"] .blog-card, [data-theme="light"] .testimonial-card, [data-theme="light"] .pricing-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } [data-theme="light"] .card:hover, [data-theme="light"] .bento-card:hover, [data-theme="light"] .case-card:hover, [data-theme="light"] .blog-card:hover { border-color: rgba(109,40,217,0.3); box-shadow: 0 8px 30px rgba(0,0,0,0.1); } [data-theme="light"] .bento-card--featured { background: linear-gradient(145deg, rgba(238,242,255,0.9), rgba(245,243,255,0.95)); border-color: rgba(109,40,217,0.2); } [data-theme="light"] .bento-card__title { color: #0F172A; } [data-theme="light"] .bento-card__desc { color: #64748B; } [data-theme="light"] .bento-card__icon { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.12); } /* Pain cards */ [data-theme="light"] .pain-card { background: #FFFFFF; border-color: rgba(0,0,0,0.07); box-shadow: 0 1px 8px rgba(0,0,0,0.05); } [data-theme="light"] .pain-card h5 { color: #0F172A; } [data-theme="light"] .pain-card p { color: #64748B; } /* ════════════════════════════ PROCESS STEPS ════════════════════════════ */ [data-theme="light"] .step-number-wrap { background: #FFFFFF; border-color: rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } [data-theme="light"] .process-step h5 { color: #0F172A; } [data-theme="light"] .process-step p { color: #64748B; } [data-theme="light"] .process-steps::before { background: linear-gradient(90deg, transparent, rgba(109,40,217,0.2), rgba(79,70,229,0.2), transparent); } /* ════════════════════════════ STATS ════════════════════════════ */ [data-theme="light"] .stats-grid::before, [data-theme="light"] .stats-grid::after, [data-theme="light"] .stat-divider { background: rgba(0,0,0,0.07); } [data-theme="light"] .stat-label { color: #64748B; } /* ════════════════════════════ CASE STUDIES ════════════════════════════ */ [data-theme="light"] .case-challenge { color: #64748B; } [data-theme="light"] .case-result { color: #475569; } [data-theme="light"] .case-card::before { background: var(--gradient-accent); } [data-theme="light"] .before-block .metric, [data-theme="light"] .after-block .metric { color: #1E293B; } [data-theme="light"] .full-case-card h3, [data-theme="light"] .full-case-card h4, [data-theme="light"] .full-case-card h5 { color: #0F172A !important; } [data-theme="light"] .full-case-card p { color: #475569; } /* ════════════════════════════ TESTIMONIALS ════════════════════════════ */ [data-theme="light"] .testimonial-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .testimonial-text { color: #1E293B; } [data-theme="light"] .quote-mark { color: var(--color-accent-500); opacity: 0.2; } [data-theme="light"] .testimonial-info h6 { color: #0F172A; } [data-theme="light"] .testimonial-info span { color: #64748B; } [data-theme="light"] .t-btn { border-color: rgba(0,0,0,0.1); color: #475569; background: #FFFFFF; } [data-theme="light"] .t-btn:hover { border-color: var(--color-accent-500); color: var(--color-accent-500); } [data-theme="light"] .t-dot { background: #CBD5E1; } [data-theme="light"] .t-dot.active { background: var(--color-accent-500); } /* ════════════════════════════ MARQUEE / TECH STACK ════════════════════════════ */ [data-theme="light"] .marquee-item { color: #94A3B8; } [data-theme="light"] .marquee-item:hover { color: #475569; } /* ════════════════════════════ BLOG CARDS ════════════════════════════ */ [data-theme="light"] .blog-card-img { background: linear-gradient(135deg, #EEF2FF, #E0E7FF); } [data-theme="light"] .blog-card-body { background: #FFFFFF; } [data-theme="light"] .blog-card h5 { color: #0F172A; } [data-theme="light"] .blog-card p { color: #64748B; } [data-theme="light"] .blog-meta span { color: #94A3B8; } /* ════════════════════════════ CTA BANNER ════════════════════════════ */ [data-theme="light"] .cta-banner { background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, rgba(109,40,217,0.08) 100%); border-color: rgba(109,40,217,0.12); } [data-theme="light"] .cta-banner h2 { color: #0F172A; } [data-theme="light"] .cta-banner .lead { color: #475569; } /* ════════════════════════════ FOOTER ════════════════════════════ */ [data-theme="light"] .site-footer { background: #F1F5F9; border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .footer-brand p { color: #64748B; } [data-theme="light"] .footer-link { color: #64748B; } [data-theme="light"] .footer-link:hover { color: #0F172A; } [data-theme="light"] .footer-col h6 { color: #94A3B8; } [data-theme="light"] .footer-newsletter p { color: #64748B; } [data-theme="light"] .footer-bottom p { color: #94A3B8; } [data-theme="light"] .footer-bottom-links a { color: #94A3B8; } [data-theme="light"] .footer-bottom-links a:hover { color: #475569; } [data-theme="light"] .social-icon { background: #FFFFFF; border-color: rgba(0,0,0,0.1); color: #64748B; } [data-theme="light"] .social-icon:hover { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.25); color: var(--color-accent-500); } /* ════════════════════════════ FORMS ════════════════════════════ */ [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea { background: #FFFFFF; border-color: rgba(0,0,0,0.12); color: #0F172A; } [data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus, [data-theme="light"] .form-textarea:focus { border-color: var(--color-accent-500); box-shadow: 0 0 0 3px rgba(109,40,217,0.1); background: #FFFFFF; } [data-theme="light"] .form-label { color: #475569; } [data-theme="light"] .form-input::placeholder, [data-theme="light"] .form-textarea::placeholder { color: #94A3B8; } /* ════════════════════════════ DIVIDERS / MISC ════════════════════════════ */ [data-theme="light"] .divider { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } [data-theme="light"] .glow-line { box-shadow: none; background: var(--gradient-accent); opacity: 0.4; } [data-theme="light"] .accordion-item { border-color: rgba(0,0,0,0.08); } [data-theme="light"] .accordion-trigger { color: #1E293B; } [data-theme="light"] .accordion-trigger:hover { color: #0F172A; } [data-theme="light"] .accordion-body { color: #475569; } [data-theme="light"] .accordion-icon { border-color: rgba(0,0,0,0.1); color: var(--color-accent-500); } /* ════════════════════════════ PAGE HERO (inner pages) ════════════════════════════ */ [data-theme="light"] .page-hero { background: var(--gradient-hero); } [data-theme="light"] .page-hero h1 { color: #0F172A !important; } [data-theme="light"] .page-hero .lead { color: #475569; } [data-theme="light"] .page-hero::before { background: radial-gradient(circle, rgba(109,40,217,0.07) 0%, transparent 70%); } /* ════════════════════════════ SERVICE SUB-PAGES (sections with inline bg styles) ════════════════════════════ */ /* Cards inside service pages that have inline color:#fff on h6 are handled by the blanket h1-h6 rule above. Fix inline paragraph colors that use undefined --color-neutral-400: */ [data-theme="light"] .card p, [data-theme="light"] .bento-card p { color: #64748B; } /* Section-level text blocks with inline style overrides */ [data-theme="light"] [style*="color:var(--color-neutral-300)"], [data-theme="light"] [style*="color: var(--color-neutral-300)"] { color: #475569 !important; } [data-theme="light"] [style*="color:var(--color-neutral-400)"], [data-theme="light"] [style*="color: var(--color-neutral-400)"] { color: #64748B !important; } /* Badge/eyebrow elements stay as accent color */ [data-theme="light"] .eyebrow { color: var(--color-accent-500); } /* Stat labels */ [data-theme="light"] .stat-label { color: #64748B; } /* ════════════════════════════ CONTACT / RESULTS PAGES ════════════════════════════ */ [data-theme="light"] .contact-form-wrap { background: #FFFFFF; border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.07); } [data-theme="light"] .contact-item-icon { background: rgba(109,40,217,0.07); border-color: rgba(109,40,217,0.12); } [data-theme="light"] .contact-item h6 { color: #0F172A; } [data-theme="light"] .contact-item p { color: #64748B; } [data-theme="light"] .filter-btn { border-color: rgba(0,0,0,0.1); color: #475569; background: #FFFFFF; } [data-theme="light"] .filter-btn:hover, [data-theme="light"] .filter-btn.active { background: var(--gradient-accent); color: #FFFFFF; border-color: transparent; } [data-theme="light"] .full-case-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); } /* ════════════════════════════ PRICING PAGE ════════════════════════════ */ [data-theme="light"] .pricing-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .pricing-card--featured { background: linear-gradient(145deg, rgba(238,242,255,0.9), rgba(245,243,255,0.95)); border-color: rgba(109,40,217,0.3); box-shadow: 0 8px 40px rgba(109,40,217,0.12); } [data-theme="light"] .pricing-tier { color: var(--color-accent-500); } [data-theme="light"] .pricing-price { color: #0F172A; } [data-theme="light"] .pricing-desc { color: #64748B; } [data-theme="light"] .pricing-divider { background: rgba(0,0,0,0.07); } [data-theme="light"] .pricing-feature { color: #475569; } [data-theme="light"] .toggle-track { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.12); } [data-theme="light"] .toggle-label { color: #64748B; } [data-theme="light"] .toggle-label.active { color: #0F172A; } [data-theme="light"] #geo-currency-badge { color: #64748B; } /* Currency switcher pill buttons */ [data-theme="light"] #btn-inr, [data-theme="light"] #btn-usd { color: #64748B; } [data-theme="light"] #btn-inr:hover, [data-theme="light"] #btn-usd:hover { color: #0F172A; } /* ════════════════════════════ ABOUT / TEAM ════════════════════════════ */ [data-theme="light"] .team-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .team-card h5 { color: #0F172A; } [data-theme="light"] .team-card .role { color: var(--color-accent-500); } [data-theme="light"] .team-card p { color: #64748B; } /* ════════════════════════════ THEME TOGGLE BUTTON ════════════════════════════ */ .theme-toggle { display: flex; align-items: center; gap: var(--space-2); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 6px 14px; cursor: pointer; font-size: 18px; transition: all var(--duration-normal) var(--ease-out-expo); color: var(--color-neutral-300); line-height: 1; } .theme-toggle:hover { border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.08); transform: scale(1.05); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; } [data-theme="light"] .theme-toggle:hover { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.25); }