/* ============================================================ InternationalCall — Theme system Light (current) + Warm Dark Warm Dark palette inverts the current #faf9f7 warmth. ============================================================ */ /* Tokens — light is default, dark overrides via .dark on */ :root { --bg-page: #faf9f7; --bg-surface: #ffffff; --bg-alt-surface: #faf9f7; --bg-soft: #f3f4f6; /* gray-100 */ --bg-softer: #f9fafb; /* gray-50 */ --bg-inverse: #111827; --text-primary: #111827; /* gray-900 */ --text-strong: #1f2937; /* gray-800 */ --text-muted: #4b5563; /* gray-600 */ --text-subtle: #6b7280; /* gray-500 */ --text-faint: #9ca3af; /* gray-400 */ --text-inverse: #ffffff; --border: #e5e7eb; /* gray-200 */ --border-soft: #f3f4f6; /* gray-100 */ --accent: #7c3aed; /* violet-600 */ --accent-hover: #6d28d9; --accent-soft: #ede9fe; /* violet-100 */ --accent-text: #6d28d9; /* violet-700 on light */ --ring: rgba(124, 58, 237, 0.5); --shadow-card: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10); } html.dark { --bg-page: #1a1714; --bg-surface: #221e1a; --bg-alt-surface: #211d19; --bg-soft: #2a2520; --bg-softer: #1f1b17; --bg-inverse: #f5f0e8; --text-primary: #f5f0e8; --text-strong: #f5f0e8; --text-muted: #d6cfc2; --text-subtle: #a69f90; --text-faint: #7a7367; --text-inverse: #1a1714; --border: #332d27; --border-soft: #2a2520; --accent: #c4b5fd; /* brighter lilac for dark */ --accent-hover: #ddd6fe; --accent-soft: rgba(196, 181, 253, 0.10); --accent-text: #c4b5fd; --ring: rgba(196, 181, 253, 0.55); --shadow-card: 0 1px 3px 0 rgba(0,0,0,.40), 0 1px 2px -1px rgba(0,0,0,.40); } /* ============================================================ Shim: re-style common Tailwind utility classes in dark mode ============================================================ */ html.dark body { background-color: var(--bg-page); color: var(--text-primary); } /* Backgrounds */ html.dark .bg-white { background-color: var(--bg-surface) !important; } html.dark .bg-gray-50 { background-color: var(--bg-page) !important; } html.dark .bg-gray-100 { background-color: var(--bg-soft) !important; } html.dark .bg-gray-200 { background-color: var(--bg-soft) !important; } html.dark .bg-gray-900 { background-color: #0d0b09 !important; } /* dark footer goes a touch darker */ html.dark .bg-gray-800 { background-color: #161310 !important; } /* Hover background variants */ html.dark .hover\:bg-white:hover { background-color: var(--bg-surface) !important; } html.dark .hover\:bg-gray-50:hover { background-color: var(--bg-softer) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--bg-soft) !important; } html.dark .hover\:bg-gray-200:hover { background-color: var(--bg-soft) !important; } /* Text */ html.dark .text-gray-900 { color: var(--text-primary) !important; } html.dark .text-gray-800 { color: var(--text-strong) !important; } html.dark .text-gray-700 { color: var(--text-muted) !important; } html.dark .text-gray-600 { color: var(--text-muted) !important; } html.dark .text-gray-500 { color: var(--text-subtle) !important; } html.dark .text-gray-400 { color: var(--text-faint) !important; } html.dark .text-gray-300 { color: var(--text-faint) !important; } html.dark .text-black { color: var(--text-primary) !important; } /* Borders */ html.dark .border-gray-100 { border-color: var(--border-soft) !important; } html.dark .border-gray-200 { border-color: var(--border) !important; } html.dark .border-gray-300 { border-color: var(--border) !important; } html.dark .border-gray-800 { border-color: #1d1a16 !important; } html.dark .border-gray-900 { border-color: #0d0b09 !important; } html.dark .divide-gray-100 > * + *, html.dark .divide-gray-200 > * + * { border-color: var(--border) !important; } /* Violet accents — brighten the lilac in dark for readability on warm backgrounds */ html.dark .text-violet-600 { color: var(--accent) !important; } html.dark .text-violet-700 { color: var(--accent) !important; } html.dark .text-violet-800 { color: var(--accent) !important; } html.dark .text-violet-900 { color: var(--accent) !important; } html.dark .bg-violet-50 { background-color: var(--accent-soft) !important; } html.dark .bg-violet-100 { background-color: var(--accent-soft) !important; } html.dark .border-violet-100 { border-color: rgba(196, 181, 253, 0.20) !important; } html.dark .border-violet-200 { border-color: rgba(196, 181, 253, 0.30) !important; } html.dark .hover\:bg-violet-50:hover { background-color: var(--accent-soft) !important; } html.dark .hover\:text-violet-600:hover { color: var(--accent) !important; } html.dark .hover\:text-violet-700:hover { color: var(--accent-hover) !important; } html.dark .hover\:border-violet-200:hover { border-color: rgba(196, 181, 253, 0.30) !important; } html.dark .hover\:border-violet-300:hover { border-color: rgba(196, 181, 253, 0.40) !important; } /* Flash message tinted backgrounds — keep semantic color but dim the bg */ html.dark .bg-red-50 { background-color: rgba(220, 38, 38, 0.12) !important; } html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; } html.dark .text-red-800 { color: #fca5a5 !important; } html.dark .text-green-800 { color: #86efac !important; } html.dark .text-blue-800 { color: #93c5fd !important; } /* Soft borders on tinted callouts */ html.dark .border-red-200 { border-color: rgba(220, 38, 38, 0.30) !important; } html.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.30) !important; } html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.30) !important; } html.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.30) !important; } /* Inputs */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="tel"], html.dark input[type="number"], html.dark input[type="search"], html.dark input[type="url"], html.dark input[type="date"], html.dark textarea, html.dark select { background-color: var(--bg-softer) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--text-faint) !important; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { outline-color: var(--accent) !important; } /* Shadows — soften in dark; default Tailwind shadows look harsh on warm dark */ html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.4) !important; } /* Gradients — neutralize the most common ones to violet-tinted dark equivalents. These are the gradients used on the dashboard balance/wrapped cards. They look garish on warm dark, so we swap them to a lilac→fuchsia ramp. NOTE: do NOT cascade a forced text color via `*` — that would clobber any nested card (e.g. the bg-white mockup inside the landing VN promo). The gradient cards that need dark text on the new lilac background should declare it explicitly with `text-[#1a1714]` or similar in the template. */ html.dark .from-violet-500.to-purple-600, html.dark .from-violet-600.to-purple-700, html.dark .from-violet-500.to-violet-700, html.dark .from-violet-600.to-fuchsia-600 { background-image: linear-gradient(to bottom right, #a78bfa, #f472b6) !important; } /* Scrollbar */ html.dark ::-webkit-scrollbar { background-color: var(--bg-page); } html.dark ::-webkit-scrollbar-thumb { background-color: var(--border); } html.dark ::-webkit-scrollbar-thumb:hover { background-color: var(--bg-soft); } /* ============================================================ Theme toggle pill — sun/moon ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--border); background-color: var(--bg-surface); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--text-subtle); transition: background-color 0.15s, color 0.15s; } .theme-toggle-icon.active { background-color: var(--accent-soft); color: var(--accent); } .theme-toggle-icon svg { width: 16px; height: 16px; } /* Logo: the brand mark is green on transparent and reads fine on warm dark. Intentionally NOT inverted — the brand color stays consistent across themes. */ /* Logo tile: a white pill behind the logo so the green brand mark pops on dark backgrounds in BOTH modes. Stays white even when .dark is active — bypasses the bg-white shim by using its own class. */ .logo-tile { background-color: #ffffff; } a.logo-tile:hover, .logo-tile a:hover { background-color: #f3f4f6; } /* The landing page uses bg-[#faf9f7] (warm cream) directly in many section backgrounds. Match it to our dark page bg. Tailwind escapes the bracket chars: bg-[#faf9f7] -> bg-\[\#faf9f7\] */ html.dark .bg-\[\#faf9f7\] { background-color: var(--bg-page) !important; } /* Landing page custom gradients — tone down the bright pastels to fit dark mode */ html.dark .gradient-blob-1 { background: radial-gradient(circle, rgba(196,181,253,0.18), rgba(196,181,253,0) 70%) !important; } html.dark .gradient-blob-2 { background: radial-gradient(circle, rgba(245,158,11,0.15), rgba(245,158,11,0) 70%) !important; } html.dark .stats-gradient { background: linear-gradient(135deg, #2a1f2e 0%, #322432 100%) !important; } /* SEO page bottom CTAs: many SEO pages and the pSEO base template define a `.gradient-cta` (or used inline styles we converted to it) with light violet pastels that go unreadable on warm dark. Provide the canonical light version here and a dark override. */ .gradient-cta { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); } html.dark .gradient-cta { background: linear-gradient(135deg, #2a1f2e 0%, #322432 100%) !important; } /* Tailwind violet/purple light-pastel gradients on SEO CTAs */ html.dark .from-violet-100 { --tw-gradient-from: #2a1f2e var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(42,31,46,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .to-purple-100 { --tw-gradient-to: #322432 var(--tw-gradient-to-position) !important; } html.dark .to-violet-100 { --tw-gradient-to: #322432 var(--tw-gradient-to-position) !important; } html.dark .from-purple-100 { --tw-gradient-from: #322432 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(50,36,50,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } /* Tailwind gradient stops — make from-white / to-*-50 dark-friendly. The dashboard make_call page uses many "bg-gradient-to-br from-white to-violet-50" card backgrounds; on dark they need to read as elevated surfaces. */ html.dark .from-white { --tw-gradient-from: var(--bg-surface) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,30,26,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .to-violet-50 { --tw-gradient-to: rgba(196,181,253,0.10) var(--tw-gradient-to-position) !important; } html.dark .to-emerald-50 { --tw-gradient-to: rgba(16,185,129,0.10) var(--tw-gradient-to-position) !important; } html.dark .to-amber-50 { --tw-gradient-to: rgba(245,158,11,0.10) var(--tw-gradient-to-position) !important; } html.dark .to-gray-50 { --tw-gradient-to: var(--bg-softer) var(--tw-gradient-to-position) !important; } html.dark .to-purple-50 { --tw-gradient-to: rgba(168,85,247,0.10) var(--tw-gradient-to-position) !important; } html.dark .to-white { --tw-gradient-to: var(--bg-surface) var(--tw-gradient-to-position) !important; } html.dark .from-violet-50 { --tw-gradient-from: rgba(196,181,253,0.10) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,30,26,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-emerald-50 { --tw-gradient-from: rgba(16,185,129,0.10) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,30,26,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-amber-50 { --tw-gradient-from: rgba(245,158,11,0.10) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,30,26,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-gray-50 { --tw-gradient-from: var(--bg-softer) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(34,30,26,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } /* Tinted colored borders on cards — soften */ html.dark .border-emerald-100 { border-color: rgba(16,185,129,0.20) !important; } html.dark .border-emerald-200 { border-color: rgba(16,185,129,0.30) !important; } html.dark .border-purple-100 { border-color: rgba(168,85,247,0.20) !important; } html.dark .border-purple-200 { border-color: rgba(168,85,247,0.30) !important; } html.dark .border-blue-100 { border-color: rgba(59,130,246,0.20) !important; } html.dark .border-blue-200 { border-color: rgba(59,130,246,0.30) !important; } /* Tinted background fills (text-colored chips/badges) */ html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; } html.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.16) !important; } html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.12) !important; } html.dark .bg-purple-100 { background-color: rgba(168,85,247,0.16) !important; } html.dark .bg-pink-50 { background-color: rgba(236,72,153,0.12) !important; } html.dark .bg-pink-100 { background-color: rgba(236,72,153,0.16) !important; } html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.12) !important; } html.dark .bg-indigo-100 { background-color: rgba(99,102,241,0.16) !important; } /* Tinted text colors stay legible on warm dark */ html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7 !important; } html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-purple-600, html.dark .text-purple-700 { color: #d8b4fe !important; } html.dark .text-blue-600, html.dark .text-blue-700 { color: #93c5fd !important; } html.dark .text-red-600, html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .text-pink-600 { color: #f9a8d4 !important; } /* Smooth color transitions — but skip first paint to avoid weird flash */ html.theme-ready body, html.theme-ready body * { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }