/* CamsCue "Velvet Signal" dark-first theme override. The cloned templates were authored with light-mode Tailwind utilities (zinc/white + brand accents). Rather than rewrite every template, we remap the utilities the templates actually use to the dark Velvet Signal tokens. Body-scoped selectors give these rules higher specificity than the single-class Tailwind utilities (incl. their responsive variants), so they win regardless of source order. */ html, body { background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); } /* The element itself carries the cloned light-theme utility classes (class="bg-zinc-50 text-zinc-900"). A class selector beats the element rule above, so without these the body stayed near-white (#fafafa) and every background-less section showed through as a white band. Target body + its own classes directly. */ body.bg-zinc-50 { background-color: var(--color-bg) !important; } body.text-zinc-900 { color: var(--color-fg) !important; } /* Editorial serif headlines everywhere (core of the Velvet Signal voice). */ h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.01em; } h1 { font-weight: 600; } .font-numeral, .tabular-nums { font-family: var(--font-numeral); } /* ---- Frosted header + opacity-modifier white surfaces ---- The sticky header uses bg-white/90 + backdrop-blur (an opacity modifier, a different utility class than plain bg-white), so it needs its own rule or the nav renders white. */ body header { background-color: rgba(18, 8, 26, 0.82) !important; border-color: var(--color-border) !important; } body [class*="bg-white/"] { background-color: rgba(27, 15, 36, 0.86) !important; } /* ---- Surfaces ---- (marked !important so no compiled tailwind utility, layer, or inline gradient stop can leak the original light theme through) */ body .bg-white { background-color: var(--color-surface) !important; } body .bg-zinc-50 { background-color: #140a1c !important; } body .bg-zinc-100 { background-color: var(--color-surface-2) !important; } body .bg-zinc-200 { background-color: #2f1d3b !important; } body .bg-zinc-300 { background-color: #3a2447 !important; } body .hover\:bg-white:hover, body .hover\:bg-zinc-50:hover { background-color: var(--color-surface-2) !important; } body .hover\:bg-zinc-100:hover { background-color: #2f1d3b !important; } /* Light coral tint backgrounds -> dark coral tint */ body .bg-brand-50 { background-color: var(--color-primary-bg) !important; } body .bg-brand-100 { background-color: #3a1526 !important; } /* Opacity-modifier zinc surfaces (e.g. sticky filter bars use bg-zinc-50/95, a separate class from bg-zinc-50) - remap so they don't render as a near-white band. */ body [class*="bg-zinc-50/"] { background-color: rgba(20, 10, 28, 0.95) !important; } body [class*="bg-zinc-100/"] { background-color: rgba(27, 15, 36, 0.92) !important; } body [class*="bg-zinc-200/"] { background-color: rgba(47, 29, 59, 0.90) !important; } /* Amber "notice / 18+ / highlight" boxes -> dark warm gold tint (Velvet gold #E7B65C). Kept as a class remap so the cloned amber utility classes render dark everywhere. */ body .bg-amber-50, body [class*="bg-amber-50/"] { background-color: #221a0f !important; } body .bg-amber-100 { background-color: #2c2213 !important; } body .border-amber-200, body .border-amber-300 { border-color: rgba(231, 182, 92, 0.32) !important; } body .text-amber-900, body .text-amber-800, body .text-amber-700 { color: #ecd39a !important; } body .text-amber-600, body .text-amber-500 { color: #e7b65c !important; } /* Semantic pros/cons pills: keep green=pro / red=con but dark-tinted so they don't render as light bands on the dark theme. Bright icon colors (text-emerald-500 / text-red-500) already read fine on dark and are left alone; only the light fills + dark-on-light text are remapped. */ body .bg-emerald-50, body .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.12) !important; } body .bg-red-50, body .bg-red-100 { background-color: rgba(244, 63, 94, 0.12) !important; } body .text-emerald-900, body .text-emerald-800, body .text-emerald-700 { color: #8ff0c8 !important; } body .text-red-900, body .text-red-800, body .text-red-700 { color: #ff9fb0 !important; } body .border-emerald-200 { border-color: rgba(16, 185, 129, 0.32) !important; } body .border-red-200 { border-color: rgba(244, 63, 94, 0.32) !important; } /* ---- Text ---- */ body .text-zinc-900 { color: var(--color-fg); } body .text-zinc-800 { color: #ecdff0; } body .text-zinc-700 { color: #d9c8e0; } body .text-zinc-600 { color: var(--color-muted); } body .text-zinc-500 { color: var(--color-muted); } body .text-zinc-400 { color: var(--color-muted-2); } body .text-zinc-300 { color: #6f5c78; } body .text-white { color: var(--color-fg); } /* brand text stays the coral accent (do not override text-brand-*) */ /* ---- Borders ---- */ body .border-zinc-100 { border-color: var(--color-border-light); } body .border-zinc-200 { border-color: var(--color-border); } body .border-zinc-300 { border-color: #3f2a4a; } body .border-zinc-400 { border-color: #4a3357; } body .divide-zinc-100 > * + *, body .divide-zinc-200 > * + * { border-color: var(--color-border); } /* ---- Ring / focus ---- */ body .ring-zinc-200 { --tw-ring-color: var(--color-border); } /* ---- Elevation: glow, not gray drop-shadow ---- */ body .shadow-sm, body .shadow, body .shadow-md { box-shadow: var(--shadow-card); } body .shadow-lg, body .shadow-xl { box-shadow: var(--shadow-card-hover); } /* Rounder corners across cards for the "lounge softness" personality */ body .rounded-lg { border-radius: var(--radius-lg); } body .rounded-xl { border-radius: var(--radius-xl); } body .rounded-2xl { border-radius: var(--radius-xl); } /* ---- Hover-state variants ---- Tailwind emits hover utilities as their own classes (.hover\:text-zinc-900:hover), distinct from the base utility. Without these, hovering a nav link flipped the text to dark zinc-900 on the dark surface (invisible) - the "broken hovers". Remap every hover variant the templates use to readable dark-theme colors. */ body .hover\:text-zinc-900:hover, body .hover\:text-zinc-800:hover, body .hover\:text-zinc-700:hover, body .hover\:text-zinc-600:hover { color: var(--color-fg) !important; } body .hover\:text-white:hover { color: #fff !important; } /* Nav + dropdown surfaces on hover */ body .hover\:bg-zinc-50:hover, body .hover\:bg-white:hover { background-color: var(--color-surface-2) !important; } body .hover\:bg-zinc-100:hover { background-color: #2f1d3b !important; } body .hover\:bg-zinc-200:hover { background-color: #3a2447 !important; } body .hover\:border-zinc-300:hover { border-color: #3f2a4a !important; } body .hover\:border-zinc-400:hover { border-color: #4a3357 !important; } /* Coral-tinted hover items (dropdown links): coral-on-coral was unreadable. Light coral text on the dark coral tint reads clearly. */ body .hover\:bg-brand-50:hover { background-color: var(--color-primary-bg) !important; } body .hover\:bg-brand-100:hover { background-color: #3a1526 !important; } body .hover\:text-brand-700:hover, body .hover\:text-brand-600:hover { color: #ff9ab4 !important; } /* ---- Recolor light Tailwind gradient stops -> dark (hero + decorative bands) ---- */ body [class*="from-brand-"] { --tw-gradient-from: var(--color-primary-bg); } body [class*="from-zinc-"], body [class*="from-white"], body [class*="from-amber-"] { --tw-gradient-from: var(--color-bg); } body [class*="via-brand-"] { --tw-gradient-via: #2a0f1c; } body [class*="to-white"], body [class*="to-zinc-"] { --tw-gradient-to: var(--color-surface); } body [class*="to-brand-"] { --tw-gradient-to: var(--color-primary-bg); }