/* * Centle India — Theme Variables * Light/dark color overrides. Works with Tailwind CDN darkMode:'class'. * Include AFTER tailwind CDN script on every page. */ /* Light mode overrides — applied when does NOT have class="dark" */ html.light body, html:not(.dark) body { --tw-bg-opacity: 1; } html.light, html:not(.dark) { /* Override Tailwind's custom colors for light mode */ --color-surface: #FFFFFF; --color-on-surface: #1A1A1A; --color-surface-container: #F5F5F5; --color-surface-container-high: #EEEEEE; --color-outline-variant: #C4B8A8; --color-primary: #E88A00; } html.dark { --color-surface: #0E0E0E; --color-on-surface: #E5E2E1; --color-surface-container: #131313; --color-surface-container-high: #1A1A1A; --color-outline-variant: #544434; --color-primary: #FF9F1C; } /* Map CSS vars to actual backgrounds/colors for elements using hardcoded Tailwind classes */ html.light .bg-surface, html:not(.dark) .bg-surface { background-color: var(--color-surface) !important; } html.light .bg-surface-container, html:not(.dark) .bg-surface-container { background-color: var(--color-surface-container) !important; } html.light .bg-surface-container-high, html:not(.dark) .bg-surface-container-high { background-color: var(--color-surface-container-high) !important; } html.light .text-on-surface, html:not(.dark) .text-on-surface { color: var(--color-on-surface) !important; } html.light .text-primary, html:not(.dark) .text-primary { color: var(--color-primary) !important; } html.light .bg-primary, html:not(.dark) .bg-primary { background-color: var(--color-primary) !important; } html.light .border-primary, html:not(.dark) .border-primary { border-color: var(--color-primary) !important; } html.light .border-outline-variant, html:not(.dark) .border-outline-variant { border-color: var(--color-outline-variant) !important; } /* Text colors with opacity variants */ html.light .text-white, html:not(.dark) .text-white { color: #1A1A1A !important; } html.light .text-on-surface\/60, html:not(.dark) .text-on-surface\/60 { color: rgba(26, 26, 26, 0.6) !important; } html.light .text-on-surface\/50, html:not(.dark) .text-on-surface\/50 { color: rgba(26, 26, 26, 0.5) !important; } html.light .text-on-surface\/40, html:not(.dark) .text-on-surface\/40 { color: rgba(26, 26, 26, 0.4) !important; } html.light .text-on-surface\/30, html:not(.dark) .text-on-surface\/30 { color: rgba(26, 26, 26, 0.3) !important; } /* Background opacity variants */ html.light .bg-surface\/80, html:not(.dark) .bg-surface\/80 { background-color: rgba(255, 255, 255, 0.8) !important; } html.light .bg-surface\/90, html:not(.dark) .bg-surface\/90 { background-color: rgba(255, 255, 255, 0.9) !important; } /* Border opacity variants */ html.light .border-outline-variant\/10, html:not(.dark) .border-outline-variant\/10 { border-color: rgba(196, 184, 168, 0.1) !important; } html.light .border-outline-variant\/20, html:not(.dark) .border-outline-variant\/20 { border-color: rgba(196, 184, 168, 0.2) !important; } html.light .border-outline-variant\/30, html:not(.dark) .border-outline-variant\/30 { border-color: rgba(196, 184, 168, 0.3) !important; } html.light .border-outline-variant\/40, html:not(.dark) .border-outline-variant\/40 { border-color: rgba(196, 184, 168, 0.4) !important; } /* Primary opacity variants */ html.light .bg-primary\/5, html:not(.dark) .bg-primary\/5 { background-color: rgba(232, 138, 0, 0.05) !important; } html.light .bg-primary\/10, html:not(.dark) .bg-primary\/10 { background-color: rgba(232, 138, 0, 0.1) !important; } html.light .border-primary\/20, html:not(.dark) .border-primary\/20 { border-color: rgba(232, 138, 0, 0.2) !important; } /* Nav blur in light mode */ html.light nav.bg-surface\/80, html:not(.dark) nav.bg-surface\/80 { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px); } /* ════════════════════════════════════════════════════════════════ LIGHT THEME — literal hex / utility overrides for reader comfort The pages use hardcoded brand hex classes (text-[#E5E2E1], bg-[#0E0E0E], text-white, etc). In light mode we flip dark surfaces → soft warm white and light text → near-black, keeping the amber accent for contrast. ════════════════════════════════════════════════════════════════ */ html:not(.dark) { --ink: #1c1a17; /* primary body text — warm near-black */ --ink-soft: #45413b; /* secondary text */ --ink-mute: #6b665e; /* muted/labels */ --paper: #fbfaf7; /* page background — warm off-white, easy on eyes */ --paper-2: #f3f1ec; /* raised container */ --paper-3: #e9e6df; /* higher container */ --line: #ddd8cf; /* hairline borders */ } /* Page + dark surface backgrounds → light paper */ html:not(.dark) body { background-color: var(--paper) !important; color: var(--ink) !important; } html:not(.dark) .bg-background, html:not(.dark) .bg-\[\#0E0E0E\], html:not(.dark) .bg-\[\#0e0e0e\], html:not(.dark) .bg-\[\#131313\], html:not(.dark) .bg-\[\#1C1B1B\], html:not(.dark) .bg-\[\#1c1b1b\], html:not(.dark) .bg-surface-container-lowest, html:not(.dark) .bg-surface-dim { background-color: var(--paper) !important; } html:not(.dark) .bg-surface, html:not(.dark) .bg-surface-container, html:not(.dark) .bg-surface-container-low, html:not(.dark) .bg-surface-container-low\/30 { background-color: var(--paper-2) !important; } html:not(.dark) .bg-surface-container-high, html:not(.dark) .bg-surface-container-highest, html:not(.dark) .bg-surface-variant { background-color: var(--paper-3) !important; } /* Translucent dark nav/overlays → translucent light */ html:not(.dark) .bg-\[\#0E0E0E\]\/60, html:not(.dark) .bg-\[\#0E0E0E\]\/40, html:not(.dark) nav.bg-\[\#0E0E0E\]\/60, html:not(.dark) .bg-background\/60, html:not(.dark) .bg-background\/40 { background-color: rgba(251,250,247,0.85) !important; backdrop-filter: blur(20px); } /* Light brand text → ink */ html:not(.dark) .text-white, html:not(.dark) .text-on-background, html:not(.dark) .text-on-surface, html:not(.dark) .text-\[\#E5E2E1\], html:not(.dark) .text-\[\#e5e2e1\] { color: var(--ink) !important; } html:not(.dark) .text-white\/90, html:not(.dark) .text-white\/80, html:not(.dark) .text-white\/70, html:not(.dark) .text-\[\#E5E2E1\]\/70 { color: var(--ink-soft) !important; } /* Form fields stay legible in light mode (placeholders are dark-grey, not white) */ html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: var(--ink-mute) !important; opacity: 0.8; } html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select { color: var(--ink) !important; } html:not(.dark) .text-\[\#E5E2E1\]\/60, html:not(.dark) .text-\[\#e5e2e1\]\/60, html:not(.dark) .text-white\/60, html:not(.dark) .text-on-surface-variant, html:not(.dark) .text-on-surface-variant\/70, html:not(.dark) .text-\[\#b4b5b5\], html:not(.dark) .text-\[\#B4B5B5\] { color: var(--ink-soft) !important; } html:not(.dark) .text-\[\#E5E2E1\]\/50, html:not(.dark) .text-\[\#e5e2e1\]\/50, html:not(.dark) .text-\[\#E5E2E1\]\/40, html:not(.dark) .text-\[\#E5E2E1\]\/30, html:not(.dark) .text-white\/50, html:not(.dark) .text-white\/40, html:not(.dark) .text-on-surface-variant\/60, html:not(.dark) .text-on-surface-variant\/50, html:not(.dark) .text-on-surface\/70, html:not(.dark) .text-on-surface\/60, html:not(.dark) .text-on-surface\/50, html:not(.dark) .text-on-surface\/40, html:not(.dark) .text-\[\#b4b5b5\]\/40, html:not(.dark) .text-\[\#B4B5B5\]\/40 { color: var(--ink-mute) !important; } /* Borders */ html:not(.dark) .border-\[\#544434\]\/15, html:not(.dark) .border-\[\#544434\]\/10, html:not(.dark) .border-outline-variant\/10, html:not(.dark) .border-outline-variant\/15, html:not(.dark) .border-outline-variant\/20, html:not(.dark) .border-outline-variant\/30 { border-color: var(--line) !important; } /* Amber accent — slightly deepened for AA contrast on white */ html:not(.dark) .text-\[\#FF9F1C\], html:not(.dark) .text-primary, html:not(.dark) .text-primary-container { color: #C46A00 !important; } html:not(.dark) .bg-\[\#FF9F1C\], html:not(.dark) .bg-primary, html:not(.dark) .bg-primary-container { background-color: #E88A00 !important; } html:not(.dark) .border-\[\#FF9F1C\], html:not(.dark) .border-primary-container { border-color: #E88A00 !important; } /* Keep success/whatsapp greens readable, leave as-is; ensure CTA dark text */ html:not(.dark) .text-\[\#2c1700\] { color: #2c1700 !important; } /* ════════════════════════════════════════════════════════════════ CONTRAST FIXES — AA-compliant amber on light backgrounds #C46A00 on #FBF AF7 passes WCAG AA (4.54:1) for normal text. For small/muted text we use #A85A00 (5.6:1) to pass more comfortably. ════════════════════════════════════════════════════════════════ */ html:not(.dark) .text-primary\/80, html:not(.dark) .text-\[\#FF9F1C\]\/80 { color: #A85A00 !important; } html:not(.dark) .text-primary\/60, html:not(.dark) .text-\[\#FF9F1C\]\/60 { color: #A85A00 !important; } /* Ensure amber on white CTAs stay readable */ html:not(.dark) .bg-primary .text-black, html:not(.dark) .bg-\[\#FF9F1C\] .text-black { color: #1a1200 !important; } /* Muted text floors — never go below ink-mute on paper */ html:not(.dark) .text-on-surface\/30 { color: var(--ink-mute) !important; } html:not(.dark) .text-on-surface\/20 { color: var(--ink-mute) !important; } html:not(.dark) .opacity-40 { opacity: 0.7 !important; } /* stop text going invisible in light */ /* ════════════════════════════════════════════════════════════════ MISSING UTILITY OVERRIDES (cards, glass, blobs, gradients) ════════════════════════════════════════════════════════════════ */ /* Card / raised surface — used on all venture pages and homepage */ html:not(.dark) .bg-surface-container-high { background-color: var(--paper-3) !important; } html:not(.dark) .bg-\[\#1A1A1A\], html:not(.dark) .bg-\[\#1a1a1a\], html:not(.dark) .bg-\[\#2a2a2a\], html:not(.dark) .bg-\[\#2A2A2A\] { background-color: var(--paper-2) !important; } /* Glass effect in light mode */ html:not(.dark) .glass { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(196, 184, 168, 0.3) !important; } /* Surface container lowest (used for modal/overlay bg) */ html:not(.dark) .bg-surface-container-lowest { background-color: var(--paper) !important; } /* ════════════════════════════════════════════════════════════════ SUMMERSAAS LIGHT MODE SummerSaaS uses hardcoded slate/amber/emerald Tailwind classes. In light mode we just ensure it keeps its own palette (it's already light-designed) — just fix the inherited text-white rules that theme-vars.css globally overrides. ════════════════════════════════════════════════════════════════ */ html:not(.dark) .summer-bg { background: linear-gradient(135deg, #fff7ed 0%, #fff 100%) !important; } html:not(.dark) .text-brand-dark, html:not(.dark) .text-slate-800, html:not(.dark) .text-slate-700 { color: #0f172a !important; } html:not(.dark) .text-slate-600, html:not(.dark) .text-slate-500 { color: #475569 !important; } html:not(.dark) .text-slate-400 { color: #94a3b8 !important; } /* ════════════════════════════════════════════════════════════════ ADDITIONAL BORDER / BG OPACITY VARIANTS ════════════════════════════════════════════════════════════════ */ html:not(.dark) .border-outline-variant\/5 { border-color: rgba(196, 184, 168, 0.15) !important; } html:not(.dark) .border-outline-variant\/50 { border-color: rgba(196, 184, 168, 0.5) !important; } html:not(.dark) .border-primary\/10 { border-color: rgba(232, 138, 0, 0.15) !important; } html:not(.dark) .border-primary\/30 { border-color: rgba(232, 138, 0, 0.35) !important; } html:not(.dark) .border-primary\/40 { border-color: rgba(232, 138, 0, 0.45) !important; } html:not(.dark) .bg-primary\/15 { background-color: rgba(232, 138, 0, 0.12) !important; } html:not(.dark) .bg-primary\/20 { background-color: rgba(232, 138, 0, 0.18) !important; } html:not(.dark) .bg-primary\/30 { background-color: rgba(232, 138, 0, 0.25) !important; } /* Text glow looks bad on white — suppress it */ html:not(.dark) .text-glow { text-shadow: none !important; } /* Remove heavy dark blob/glow backgrounds in light mode */ html:not(.dark) .monolith-glow { background: radial-gradient(circle at 50% 50%, rgba(232,138,0,0.04) 0%, transparent 70%) !important; } /* ════════════════════════════════════════════════════════════════ MISSING HEX OVERRIDES — venture page dark cards / sections Covers bg-[#1c1c1c], bg-[#2a2a2a], bg-[#202020], bg-[#0E0E0E] used for service cards on Vriddhi, Skill Tank, and others. ════════════════════════════════════════════════════════════════ */ html:not(.dark) .bg-\[\#1c1c1c\], html:not(.dark) .bg-\[\#1C1C1C\], html:not(.dark) .bg-\[\#202020\], html:not(.dark) .bg-\[\#2a2a2a\], html:not(.dark) .bg-\[\#2A2A2A\], html:not(.dark) .bg-\[\#1a1a1a\], html:not(.dark) .bg-\[\#1A1A1A\], html:not(.dark) .bg-\[\#1C1B1B\], html:not(.dark) .bg-\[\#1c1b1b\] { background-color: var(--paper-2) !important; } html:not(.dark) .hover\:bg-\[\#202020\]:hover { background-color: var(--paper-3) !important; } /* Dark section backgrounds used for full-width sections */ html:not(.dark) .bg-\[\#0E0E0E\], html:not(.dark) .bg-\[\#0e0e0e\], html:not(.dark) .bg-\[\#131313\] { background-color: var(--paper) !important; } /* from-background / to-[#1C1B1B] dark gradients in Skill Tank CTA → light gradient */ html:not(.dark) .from-background { --tw-gradient-from: var(--paper) !important; } html:not(.dark) .to-\[\#1C1B1B\], html:not(.dark) .to-\[\#1c1b1b\] { --tw-gradient-to: var(--paper-2) !important; } /* on-surface-variant: used as muted text on dark pages */ html:not(.dark) .text-on-surface-variant, html:not(.dark) .text-on-background { color: var(--ink-soft) !important; } html:not(.dark) .text-on-surface-variant\/70, html:not(.dark) .text-on-surface-variant\/60, html:not(.dark) .text-on-surface-variant\/50 { color: var(--ink-mute) !important; } /* primary-container / on-primary-fixed (Skill Tank uses these for CTA button) */ html:not(.dark) .bg-primary-container { background-color: #E88A00 !important; } html:not(.dark) .text-primary-container { color: #C46A00 !important; } html:not(.dark) .text-on-primary-fixed { color: #1a1200 !important; } html:not(.dark) .shadow-primary-container\/30 { box-shadow: none !important; } /* surface-variant used for ghost buttons */ html:not(.dark) .bg-surface-variant\/20, html:not(.dark) .bg-surface-variant\/40 { background-color: rgba(228,222,210,0.5) !important; } html:not(.dark) .hover\:bg-surface-variant\/40:hover { background-color: rgba(214,207,194,0.7) !important; } /* Vriddhi hero stat card (#1c1c1c hardcoded) */ html:not(.dark) [style*="background:#1c1c1c"], html:not(.dark) [style*="background: #1c1c1c"] { background: var(--paper-2) !important; } /* ════════════════════════════════════════════════════════════════ TESTIMONIAL CARDS — make sure they're visible in light mode bg-surface-container-high/50 renders as near-invisible on paper bg. Force a proper card background with a visible border. ════════════════════════════════════════════════════════════════ */ html:not(.dark) .bg-surface-container-high\/50 { background-color: var(--paper-2) !important; border-color: var(--line) !important; } html:not(.dark) .hover\:bg-surface-container-high:hover { background-color: var(--paper-3) !important; } /* ════════════════════════════════════════════════════════════════ MATERIAL SYMBOLS — force filled stars (FILL=1) globally in light mode The font uses font-variation-settings to switch outline→fill. ════════════════════════════════════════════════════════════════ */ html:not(.dark) .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ════════════════════════════════════════════════════════════════ BLOG ROLL CARDS — ensure they render on light backgrounds blog-roll.js generates cards with dark hardcoded classes ════════════════════════════════════════════════════════════════ */ html:not(.dark) #centle-blog-roll a, html:not(.dark) .blog-roll-card { background-color: var(--paper-2) !important; color: var(--ink) !important; } html:not(.dark) #centle-blog-roll .text-white, html:not(.dark) #centle-blog-roll h3, html:not(.dark) #centle-blog-roll h4 { color: var(--ink) !important; } html:not(.dark) #centle-blog-roll p, html:not(.dark) #centle-blog-roll .text-on-surface\/60 { color: var(--ink-soft) !important; } /* ════════════════════════════════════════════════════════════════ SMOOTH TRANSITIONS (theme switching) Background-color transitions are limited to top-level containers only — applying them to every nested div/span caused overlapping crossfades that rendered as a jarring full-page gray "dim flash" while toggling. ════════════════════════════════════════════════════════════════ */ body, nav, section, article { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } div, a, p, h1, h2, h3, h4, h5, h6, span { transition: color 0.15s ease, border-color 0.15s ease; }