/* ========================================================================= DataDBA — Light Theme Override Layer (theme.css) ------------------------------------------------------------------------- ARCHITECTURE • Dark is the untouched BASE. The site's existing dark utility classes are never rewritten — this file only ADDS a scoped override layer that is active exclusively under :root[data-theme="light"]. • Tailwind's Play CDN emits utilities WITHOUT !important, so every rule here (which IS !important) wins regardless of source order. • This honors the rule "only colors may change": no layout, spacing, structure, content, or behavior is touched — purely a tonal inversion of the same indigo / rose / emerald-on-slate palette, lightened. • Selector escaping: "/" -> "\/" , ":" -> "\:" ========================================================================= */ /* Match native form controls / scrollbars to the active theme */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ========================================================================= 1. SLATE — SURFACES (dark backgrounds invert to light) ========================================================================= */ :root[data-theme="light"] .bg-slate-950 { background-color:#f8fafc !important; } :root[data-theme="light"] .bg-slate-950\/90 { background-color:rgba(248,250,252,.90) !important; } :root[data-theme="light"] .bg-slate-950\/95 { background-color:#ffffff !important; } :root[data-theme="light"] .bg-slate-900 { background-color:#ffffff !important; } :root[data-theme="light"] .bg-slate-900\/90 { background-color:#f8fafc !important; } :root[data-theme="light"] .bg-slate-900\/80 { background-color:rgba(255,255,255,.80) !important; } :root[data-theme="light"] .bg-slate-900\/70 { background-color:rgba(255,255,255,.70) !important; } :root[data-theme="light"] .bg-slate-900\/60 { background-color:rgba(255,255,255,.60) !important; } :root[data-theme="light"] .bg-slate-900\/50 { background-color:rgba(255,255,255,.50) !important; } :root[data-theme="light"] .bg-slate-800 { background-color:#f1f5f9 !important; } :root[data-theme="light"] .bg-slate-700 { background-color:#e2e8f0 !important; } :root[data-theme="light"] .bg-slate-700\/80 { background-color:rgba(226,232,240,.80) !important; } /* SLATE — TEXT (light text darkens for legibility on light surfaces). text-slate-500 / 600 and card-only text-slate-900 are intentionally left as-is: they are already legible dark-grays on light. */ :root[data-theme="light"] .text-white { color:#0f172a !important; } :root[data-theme="light"] .text-slate-100 { color:#0f172a !important; } :root[data-theme="light"] .text-slate-200 { color:#1e293b !important; } :root[data-theme="light"] .text-slate-300 { color:#334155 !important; } :root[data-theme="light"] .text-slate-400 { color:#475569 !important; } :root[data-theme="light"] .placeholder-slate-500::placeholder { color:#94a3b8 !important; } :root[data-theme="light"] .placeholder-slate-600::placeholder { color:#94a3b8 !important; } /* SLATE — BORDERS */ :root[data-theme="light"] .border-slate-800 { border-color:#e2e8f0 !important; } :root[data-theme="light"] .border-slate-800\/90 { border-color:#cbd5e1 !important; } :root[data-theme="light"] .border-slate-800\/80 { border-color:#cbd5e1 !important; } :root[data-theme="light"] .border-slate-800\/60 { border-color:#e2e8f0 !important; } :root[data-theme="light"] .border-slate-900 { border-color:#e2e8f0 !important; } :root[data-theme="light"] .border-slate-700 { border-color:#cbd5e1 !important; } :root[data-theme="light"] .border-slate-700\/80 { border-color:#94a3b8 !important; } /* SLATE — STATEFUL (own compiled selectors: .hover\:x:hover) */ :root[data-theme="light"] .hover\:text-white:hover { color:#0f172a !important; } :root[data-theme="light"] .hover\:text-slate-300:hover { color:#334155 !important; } :root[data-theme="light"] .hover\:bg-slate-800:hover { background-color:#f1f5f9 !important; } :root[data-theme="light"] .hover\:bg-slate-700:hover { background-color:#e2e8f0 !important; } :root[data-theme="light"] .hover\:border-slate-500:hover{ border-color:#64748b !important; } :root[data-theme="light"] .hover\:border-slate-700:hover{ border-color:#94a3b8 !important; } /* ========================================================================= 2. INDIGO ========================================================================= */ /* Text */ :root[data-theme="light"] .text-indigo-400 { color:#4f46e5 !important; } :root[data-theme="light"] .text-indigo-500 { color:#4f46e5 !important; } :root[data-theme="light"] .text-indigo-300 { color:#4338ca !important; } :root[data-theme="light"] .text-indigo-200 { color:#4338ca !important; } /* card override below keeps light on dark chip */ /* Tint backgrounds */ :root[data-theme="light"] .bg-indigo-950 { background-color:#eef2ff !important; } :root[data-theme="light"] .bg-indigo-950\/80 { background-color:rgba(238,242,255,.80) !important; } :root[data-theme="light"] .bg-indigo-950\/70 { background-color:rgba(238,242,255,.70) !important; } :root[data-theme="light"] .bg-indigo-950\/50 { background-color:rgba(238,242,255,.50) !important; } :root[data-theme="light"] .bg-indigo-900 { background-color:#e0e7ff !important; } :root[data-theme="light"] .bg-indigo-900\/90 { background-color:rgba(224,231,255,.90) !important; } :root[data-theme="light"] .bg-indigo-600\/15 { background-color:rgba(79,70,229,.10) !important; } :root[data-theme="light"] .bg-indigo-600\/10 { background-color:rgba(79,70,229,.06) !important; } /* Borders */ :root[data-theme="light"] .border-indigo-800 { border-color:#c7d2fe !important; } :root[data-theme="light"] .border-indigo-800\/80 { border-color:rgba(199,210,254,.80) !important; } :root[data-theme="light"] .border-indigo-800\/60 { border-color:rgba(199,210,254,.60) !important; } :root[data-theme="light"] .border-indigo-700 { border-color:#c7d2fe !important; } :root[data-theme="light"] .border-indigo-700\/60 { border-color:rgba(199,210,254,.60) !important; } :root[data-theme="light"] .border-indigo-700\/50 { border-color:#a5b4fc !important; } :root[data-theme="light"] .border-indigo-600 { border-color:#a5b4fc !important; } :root[data-theme="light"] .border-indigo-600\/80 { border-color:rgba(165,180,252,.80) !important; } :root[data-theme="light"] .border-indigo-500\/80 { border-color:rgba(165,180,252,.80) !important; } :root[data-theme="light"] .border-indigo-900\/80 { border-color:rgba(224,231,255,.80) !important; } :root[data-theme="light"] .border-indigo-900\/60 { border-color:rgba(224,231,255,.60) !important; } :root[data-theme="light"] .border-indigo-900\/50 { border-color:rgba(224,231,255,.50) !important; } :root[data-theme="light"] .border-indigo-900\/40 { border-color:rgba(224,231,255,.40) !important; } /* Stateful */ :root[data-theme="light"] .hover\:border-indigo-800:hover { border-color:#c7d2fe !important; } :root[data-theme="light"] .hover\:border-indigo-700:hover { border-color:#a5b4fc !important; } :root[data-theme="light"] .hover\:border-indigo-700\/80:hover { border-color:rgba(165,180,252,.80) !important; } :root[data-theme="light"] .group:hover .group-hover\:bg-indigo-600\/25 { background-color:rgba(79,70,229,.14) !important; } /* ========================================================================= 3. ROSE ========================================================================= */ /* Text (card-only text-rose-600 / hover:text-rose-700 left untouched) */ :root[data-theme="light"] .text-rose-400 { color:#e11d48 !important; } :root[data-theme="light"] .text-rose-300 { color:#be123c !important; } /* Tint backgrounds (saturated bg-rose-600 / 500 fills left untouched) */ :root[data-theme="light"] .bg-rose-950 { background-color:#fff1f2 !important; } :root[data-theme="light"] .bg-rose-950\/80 { background-color:rgba(255,241,242,.80) !important; } :root[data-theme="light"] .bg-rose-950\/40 { background-color:rgba(255,241,242,.40) !important; } :root[data-theme="light"] .bg-rose-900\/60 { background-color:rgba(255,228,230,.60) !important; } :root[data-theme="light"] .bg-rose-600\/10 { background-color:rgba(225,29,72,.06) !important; } /* Borders */ :root[data-theme="light"] .border-rose-900 { border-color:#fecdd3 !important; } :root[data-theme="light"] .border-rose-800 { border-color:#fecdd3 !important; } :root[data-theme="light"] .border-rose-800\/80 { border-color:rgba(254,205,211,.80) !important; } :root[data-theme="light"] .border-rose-600\/70 { border-color:rgba(253,164,175,.70) !important; } /* Stateful */ :root[data-theme="light"] .hover\:text-rose-400:hover { color:#e11d48 !important; } :root[data-theme="light"] .group:hover .group-hover\:text-rose-400 { color:#e11d48 !important; } :root[data-theme="light"] .hover\:border-rose-700\/80:hover { border-color:rgba(253,164,175,.80) !important; } :root[data-theme="light"] .group:hover .group-hover\:bg-rose-600\/25 { background-color:rgba(225,29,72,.12) !important; } /* ========================================================================= 4. EMERALD ========================================================================= */ :root[data-theme="light"] .text-emerald-400 { color:#059669 !important; } :root[data-theme="light"] .text-emerald-300 { color:#047857 !important; } :root[data-theme="light"] .text-emerald-200 { color:#047857 !important; } :root[data-theme="light"] .bg-emerald-950 { background-color:#ecfdf5 !important; } :root[data-theme="light"] .border-emerald-800 { border-color:#a7f3d0 !important; } :root[data-theme="light"] .border-emerald-500\/40 { border-color:rgba(110,231,183,.40) !important; } :root[data-theme="light"] .border-emerald-700\/50 { border-color:rgba(110,231,183,.50) !important; } /* ========================================================================= 5. GRADIENTS (recolor "dark island" gradient backgrounds) Tailwind composes gradients from --tw-gradient-* custom properties, but overriding those vars proved unreliable under the Play CDN. Instead we override the composed `background-image` DIRECTLY on each dark gradient's full class combo (higher specificity + !important always wins, independent of Tailwind's var plumbing). Direction is preserved verbatim — every dark gradient on the site is `to bottom` — and only the color stops are lightened (same slate/indigo tones, inverted). The logo gradient (from-indigo-600 …) and the low-alpha decorative glow are left saturated. ========================================================================= */ /* Contact section (Index): from-slate-950 via-indigo-950/40 to-slate-950 */ :root[data-theme="light"] .from-slate-950.via-indigo-950\/40.to-slate-950 { background-image:linear-gradient(to bottom,#f8fafc,rgba(238,242,255,.40),#f8fafc) !important; } /* Hero overlay: from-indigo-950/50 via-slate-950/90 to-slate-950 */ :root[data-theme="light"] .from-indigo-950\/50.via-slate-950\/90.to-slate-950 { background-image:linear-gradient(to bottom,rgba(238,242,255,.50),rgba(248,250,252,.90),#f8fafc) !important; } /* SLA "Gold" card: from-indigo-950 via-slate-900 to-slate-900 */ :root[data-theme="light"] .from-indigo-950.via-slate-900.to-slate-900 { background-image:linear-gradient(to bottom,#eef2ff,#ffffff,#ffffff) !important; } /* SLA "Platinum" + two others (x3): from-slate-900 to-slate-950 */ :root[data-theme="light"] .from-slate-900.to-slate-950 { background-image:linear-gradient(to bottom,#ffffff,#f8fafc) !important; } /* ========================================================================= 6. COLORED SHADOWS (polish — recolor only the shadow tint) The geometry stays; only --tw-shadow-color is swapped to a light-friendly rgba. ========================================================================= */ :root[data-theme="light"] .shadow-rose-950\/60 { --tw-shadow-color:rgba(225,29,72,.28) !important; } :root[data-theme="light"] .shadow-rose-950\/80 { --tw-shadow-color:rgba(225,29,72,.30) !important; } :root[data-theme="light"] .shadow-indigo-950\/60 { --tw-shadow-color:rgba(79,70,229,.25) !important; } :root[data-theme="light"] .shadow-slate-950\/70 { --tw-shadow-color:rgba(15,23,42,.14) !important; } :root[data-theme="light"] .hover\:shadow-rose-900\/40:hover { --tw-shadow-color:rgba(225,29,72,.28) !important; } :root[data-theme="light"] .hover\:shadow-indigo-900\/40:hover { --tw-shadow-color:rgba(79,70,229,.25) !important; } :root[data-theme="light"] .hover\:shadow-indigo-950\/40:hover { --tw-shadow-color:rgba(79,70,229,.25) !important; } /* ========================================================================= 7. COMPOUND EXCEPTIONS (higher specificity wins the !important tie) ========================================================================= */ /* Saturated color fills keep WHITE label text (global text-white was darkened). */ :root[data-theme="light"] .bg-rose-600.text-white, :root[data-theme="light"] .bg-indigo-600.text-white, :root[data-theme="light"] .bg-indigo-800.text-white, :root[data-theme="light"] .bg-emerald-600.text-white { color:#ffffff !important; } /* Active engine-filter / selected pill: bg-indigo-900 is globally inverted to a light tint, so re-assert a dark indigo chip with white text where it carries a label. */ :root[data-theme="light"] .bg-indigo-900.text-white { background-color:#312e81 !important; color:#ffffff !important; } /* service-card-luxury cards are ALREADY light (#F8FAFC = the new page ground), so promote them to pure white to lift off the page, and cover :hover. Their internal dark indigo icon chip is preserved (mirrors the existing design). */ :root[data-theme="light"] .service-card-luxury, :root[data-theme="light"] .service-card-luxury:hover { background:#ffffff !important; border-color:#e2e8f0 !important; box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 24px -12px rgba(15,23,42,.10) !important; } :root[data-theme="light"] .service-card-luxury .bg-indigo-900 { background-color:#312e81 !important; } :root[data-theme="light"] .service-card-luxury .text-indigo-200 { color:#c7d2fe !important; } /* ========================================================================= 8. CUSTOM COLOR-BEARING CLASSES (defined in per-page inline