JCBSComputer
1317 lines
50 KiB
CSS
1317 lines
50 KiB
CSS
/* ============================================================================
|
|
Cyberpunk Theme � Dark retro-futuristic synthwave/cyberpunk aesthetic
|
|
Scoped under .dark.theme-cyberpunk and .light.theme-cyberpunk
|
|
============================================================================ */
|
|
|
|
.dark.theme-cyberpunk {
|
|
--background: 240 18% 4%;
|
|
--foreground: 210 40% 93%;
|
|
--card: 240 15% 7%;
|
|
--card-foreground: 210 40% 93%;
|
|
--popover: 240 15% 7%;
|
|
--popover-foreground: 210 40% 93%;
|
|
--primary: 330 100% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 180 100% 50%;
|
|
--secondary-foreground: 0 0% 0%;
|
|
--muted: 240 12% 12%;
|
|
--muted-foreground: 240 8% 55%;
|
|
--accent: 260 80% 60%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 84% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--success: 110 100% 50%;
|
|
--success-foreground: 0 0% 0%;
|
|
--warning: 30 100% 55%;
|
|
--warning-foreground: 0 0% 0%;
|
|
--border: 270 30% 15%;
|
|
--input: 240 12% 12%;
|
|
--ring: 330 100% 50%;
|
|
--radius: 0.5rem;
|
|
--sidebar: 240 15% 3%;
|
|
--sidebar-foreground: 210 40% 93%;
|
|
--sidebar-primary: 330 100% 50%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 240 10% 10%;
|
|
--sidebar-accent-foreground: 210 40% 93%;
|
|
--sidebar-border: 270 25% 12%;
|
|
--sidebar-ring: 330 100% 50%;
|
|
}
|
|
.light.theme-cyberpunk {
|
|
--background: 0 0% 98%;
|
|
--foreground: 240 10% 15%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 15%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 15%;
|
|
--primary: 330 100% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 180 100% 50%;
|
|
--secondary-foreground: 0 0% 0%;
|
|
--muted: 240 5% 94%;
|
|
--muted-foreground: 240 4% 48%;
|
|
--accent: 260 80% 60%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 84% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--success: 110 100% 50%;
|
|
--success-foreground: 0 0% 0%;
|
|
--warning: 30 100% 55%;
|
|
--warning-foreground: 0 0% 0%;
|
|
--border: 270 10% 88%;
|
|
--input: 240 5% 92%;
|
|
--ring: 330 100% 50%;
|
|
--radius: 0.5rem;
|
|
--sidebar: 0 0% 100%;
|
|
--sidebar-foreground: 240 10% 15%;
|
|
--sidebar-primary: 330 100% 50%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 240 5% 94%;
|
|
--sidebar-accent-foreground: 240 10% 15%;
|
|
--sidebar-border: 270 10% 88%;
|
|
--sidebar-ring: 330 100% 50%;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Cyberpunk Cityscape Background � High-tech digital grid with fixed parallax
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background: url("https://images.unsplash.com/photo-1558009624-d1449e45e8b6?w=1920&q=80") no-repeat center center fixed;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
}
|
|
|
|
.light.theme-cyberpunk body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background: hsl(0, 0%, 98%);
|
|
}
|
|
|
|
@keyframes cyberpunk-bg {
|
|
0% { background-position: 0% 0%; }
|
|
25% { background-position: 5% 3%; }
|
|
50% { background-position: 8% 6%; }
|
|
75% { background-position: 3% 3%; }
|
|
100% { background-position: 0% 0%; }
|
|
}
|
|
/* ============================================================================
|
|
App Shell � Make the background transparent so body::before shows through
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\],
|
|
.light.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] {
|
|
background: transparent !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\],
|
|
.light.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] {
|
|
background: transparent !important;
|
|
}
|
|
.light.theme-cyberpunk .min-h-screen {
|
|
background: hsl(0, 0%, 98%) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Top Navigation & Header Bar
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk header.sticky {
|
|
background: hsl(240, 15%, 3%) !important;
|
|
border-bottom-color: hsl(270, 25%, 10%) !important;
|
|
}
|
|
.dark.theme-cyberpunk header .text-primary.font-bold.tracking-wide {
|
|
color: hsl(330, 100%, 55%) !important;
|
|
text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
|
|
}
|
|
.dark.theme-cyberpunk header button:hover {
|
|
background: hsla(330, 100%, 50%, 0.1) !important;
|
|
color: hsl(330, 100%, 60%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:bg-\[\#1E1E1E\] {
|
|
background: hsl(240, 12%, 9%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:border-\[\#222222\] {
|
|
border-color: hsl(270, 20%, 12%) !important;
|
|
}
|
|
.dark.theme-cyberpunk input::placeholder {
|
|
color: hsl(240, 8%, 40%) !important;
|
|
font-size: 0.8rem;
|
|
}
|
|
.dark.theme-cyberpunk .rounded-full.bg-primary.text-\[10px\] {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 6px rgba(255, 0, 127, 0.6);
|
|
}
|
|
.dark.theme-cyberpunk header .w-\[6px\] {
|
|
background: linear-gradient(180deg, hsl(330, 100%, 50%), hsl(180, 100%, 50%), hsl(260, 80%, 60%)) !important;
|
|
}
|
|
.dark.theme-cyberpunk header .w-\[6px\] > div {
|
|
background: none !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Page Header � Dashboard title
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\],
|
|
.light.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] {
|
|
border-left-color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:border-\[\#FF1111\],
|
|
.light.theme-cyberpunk .dark\:border-\[\#FF1111\] {
|
|
border-left-color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:text-white.text-2xl.font-bold {
|
|
color: hsl(0, 0%, 97%) !important;
|
|
text-shadow: 0 0 6px rgba(255, 0, 127, 0.15);
|
|
}
|
|
.light.theme-cyberpunk .text-2xl.font-bold {
|
|
color: hsl(220, 20%, 12%) !important;
|
|
font-weight: 800 !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\],
|
|
.light.theme-cyberpunk .text-\[\#AAAAAA\] {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Section Subtitles � "Pipeline Overview" / "Analytics"
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest,
|
|
.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest {
|
|
color: hsl(240, 8%, 38%) !important;
|
|
letter-spacing: 0.18em;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Left Navigation Sidebar
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk aside.border-r {
|
|
border-right-color: hsl(270, 25%, 10%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside .bg-sidebar {
|
|
background: hsl(240, 15%, 3%) !important;
|
|
}
|
|
|
|
/* Active nav item � neon-pink pill */
|
|
.dark.theme-cyberpunk aside a.bg-sidebar-primary {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
color: hsl(0, 0%, 100%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.3), 0 0 20px rgba(255, 0, 127, 0.1);
|
|
border-radius: 9999px !important;
|
|
}
|
|
.dark.theme-cyberpunk aside a.bg-sidebar-primary svg {
|
|
color: hsl(0, 0%, 100%) !important;
|
|
}
|
|
|
|
/* Active nav item collapsed */
|
|
.dark.theme-cyberpunk aside a.relative.h-10.w-10.bg-sidebar-primary {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
/* Inactive nav items */
|
|
.dark.theme-cyberpunk aside a.text-sidebar-foreground\/60 {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside a.text-sidebar-foreground\/60:hover {
|
|
background: hsla(330, 100%, 50%, 0.08) !important;
|
|
color: hsl(0, 0%, 90%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside a.hover\:text-sidebar-accent-foreground:hover {
|
|
color: hsl(0, 0%, 95%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside a svg.h-5 {
|
|
color: hsl(240, 8%, 50%);
|
|
}
|
|
|
|
/* Sidebar borders */
|
|
.dark.theme-cyberpunk aside .border-b,
|
|
.dark.theme-cyberpunk aside .border-t {
|
|
border-color: hsl(270, 25%, 10%) !important;
|
|
}
|
|
|
|
/* User profile avatar */
|
|
.dark.theme-cyberpunk aside [class*="AvatarFallback"] {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
color: hsl(0, 0%, 100%) !important;
|
|
box-shadow: 0 0 6px rgba(255, 0, 127, 0.3);
|
|
}
|
|
.dark.theme-cyberpunk aside .text-xs.text-sidebar-foreground\/60 {
|
|
color: hsl(240, 8%, 45%) !important;
|
|
}
|
|
|
|
/* Unread badge � neon pink */
|
|
.dark.theme-cyberpunk aside .bg-red-500 {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside .shadow-\[0_0_10px_\#ef4444\] {
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside .shadow-\[0_0_8px_\#ef4444\] {
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.5) !important;
|
|
}
|
|
|
|
/* System monitor values */
|
|
.dark.theme-cyberpunk aside .text-\[var\(--theme-primary\, #3b91f7\)\] {
|
|
color: hsl(180, 100%, 55%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside .text-red-400 {
|
|
color: hsl(330, 100%, 55%) !important;
|
|
}
|
|
/* ============================================================================
|
|
Stat Cards � Glass panels with neon-pink accents
|
|
============================================================================ */
|
|
|
|
/* Pipeline Overview metric cards � semi-transparent glass + neon-pink glow border */
|
|
.dark.theme-cyberpunk .group.h-full > .rounded-xl.border,
|
|
.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
|
|
background: rgba(20, 20, 25, 0.75) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border: 2px solid hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 0 1px hsla(330, 100%, 50%, 0.4),
|
|
0 0 15px rgba(255, 0, 127, 0.2),
|
|
0 0 40px rgba(255, 0, 127, 0.1),
|
|
0 -2px 8px rgba(255, 0, 127, 0.15),
|
|
0 4px 24px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
.dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border,
|
|
.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
|
|
border-color: hsl(330, 100%, 55%) !important;
|
|
box-shadow: 0 0 0 2px hsla(330, 100%, 50%, 0.5),
|
|
0 0 20px rgba(255, 0, 127, 0.3),
|
|
0 0 50px rgba(255, 0, 127, 0.15),
|
|
0 -4px 12px rgba(255, 0, 127, 0.25),
|
|
0 8px 32px rgba(0, 0, 0, 0.6) !important;
|
|
}
|
|
|
|
/* Neon-pink top border strip on every card */
|
|
.dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm,
|
|
.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3), 0 0 16px rgba(255, 0, 127, 0.1) !important;
|
|
}
|
|
|
|
/* Stat value � bright white with subtle glow */
|
|
.dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight,
|
|
.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
|
|
color: hsl(0, 0%, 97%) !important;
|
|
text-shadow: 0 0 8px rgba(255, 0, 127, 0.1);
|
|
}
|
|
|
|
/* Stat title � muted */
|
|
.dark.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
|
|
/* Stat description */
|
|
.dark.theme-cyberpunk .text-xs.text-\[\#8A9078\] {
|
|
color: hsl(240, 8%, 42%) !important;
|
|
}
|
|
|
|
/* Trend indicators � green up, red down */
|
|
.dark.theme-cyberpunk .text-emerald-500 {
|
|
color: hsl(110, 100%, 50%) !important;
|
|
text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
|
|
}
|
|
.dark.theme-cyberpunk .text-rose-500 {
|
|
color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
|
|
/* Icon containers � replace red/blue bg with dark glass */
|
|
.dark.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
|
|
background: hsla(330, 100%, 50%, 0.08) !important;
|
|
box-shadow: 0 0 6px rgba(255, 0, 127, 0.05);
|
|
}
|
|
.dark.theme-cyberpunk .flex.h-12.w-12.items-center svg.h-6 {
|
|
color: hsl(330, 100%, 55%) !important;
|
|
}
|
|
|
|
/* Sparkline SVG � cyan glow */
|
|
.dark.theme-cyberpunk svg.opacity-60 path {
|
|
stroke: hsl(180, 100%, 55%) !important;
|
|
stroke-width: 2;
|
|
filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
|
|
}
|
|
|
|
/* Progress bar background */
|
|
.dark.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
|
|
background: hsl(240, 12%, 14%) !important;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Progress bar fill � pink to cyan gradient */
|
|
.dark.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
|
|
box-shadow: 0 0 6px rgba(255, 0, 127, 0.3);
|
|
}
|
|
|
|
/* Bottom glow bar on cards */
|
|
.dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1,
|
|
.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.25), transparent) !important;
|
|
}
|
|
|
|
/* Stat card alternating patterns � override spidey red/blue with pink/cyan */
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
|
|
background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
|
|
background: hsla(330, 100%, 50%, 0.12) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
|
|
background: hsla(180, 100%, 50%, 0.1) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
|
|
color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
|
|
color: hsl(180, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
|
|
}
|
|
/* ============================================================================
|
|
Charts � Lead Status Donut & Leads Per Month Bar
|
|
============================================================================ */
|
|
|
|
/* Donut chart � card glass */
|
|
.dark.theme-cyberpunk .h-full .rounded-xl.border:has(svg) {
|
|
background: hsla(240, 15%, 7%, 0.65) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
border-color: hsla(270, 30%, 20%, 0.35) !important;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(330, 100%, 50%, 0.06);
|
|
}
|
|
|
|
/* Donut center text */
|
|
.dark.theme-cyberpunk svg text[font-size="28"] {
|
|
fill: hsl(0, 0%, 97%) !important;
|
|
font-weight: 700;
|
|
}
|
|
.dark.theme-cyberpunk svg text[font-size="12"] {
|
|
fill: hsl(240, 8%, 50%) !important;
|
|
}
|
|
|
|
/* Donut legend items � glass background with neon border */
|
|
.dark.theme-cyberpunk .grid.w-full.grid-cols-2.gap-2 > div {
|
|
background: hsla(240, 15%, 8%, 0.6) !important;
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid hsla(270, 30%, 18%, 0.3) !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.w-full.grid-cols-2.gap-2 > div:hover {
|
|
border-color: hsla(330, 100%, 50%, 0.15) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.05);
|
|
}
|
|
|
|
/* Legend name */
|
|
.dark.theme-cyberpunk .text-xs.font-medium {
|
|
color: hsl(210, 40%, 85%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .mt-0\.5.text-\[11px\] {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .text-xs.font-semibold:last-child {
|
|
color: hsl(210, 40%, 80%) !important;
|
|
}
|
|
|
|
/* Bar chart � card glass */
|
|
.dark.theme-cyberpunk .h-full > .rounded-xl.border:has(.overflow-visible) {
|
|
background: hsla(240, 15%, 7%, 0.65) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
border-color: hsla(270, 30%, 20%, 0.35) !important;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(330, 100%, 50%, 0.06);
|
|
}
|
|
|
|
/* Bar chart subtitle */
|
|
.dark.theme-cyberpunk .mt-1.text-sm.text-muted-foreground {
|
|
color: hsl(240, 8%, 55%) !important;
|
|
}
|
|
|
|
/* Bar chart legend labels */
|
|
.dark.theme-cyberpunk .text-xs.text-muted-foreground {
|
|
color: hsl(240, 8%, 55%) !important;
|
|
}
|
|
|
|
/* Year selector */
|
|
.dark.theme-cyberpunk .rounded-lg.border.px-2.py-1 {
|
|
background: hsla(240, 12%, 10%, 0.6) !important;
|
|
border-color: hsl(270, 25%, 15%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .min-w-\[50px\].text-center.text-sm.font-semibold {
|
|
color: hsl(0, 0%, 90%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .rounded-lg.border button:hover {
|
|
background: hsla(330, 100%, 50%, 0.1) !important;
|
|
color: hsl(330, 100%, 55%) !important;
|
|
}
|
|
|
|
/* Bar chart grid lines */
|
|
.dark.theme-cyberpunk svg line[stroke="#d1d5db"],
|
|
.dark.theme-cyberpunk svg line[stroke="#e5e7eb"] {
|
|
stroke: hsla(270, 25%, 20%, 0.3) !important;
|
|
}
|
|
|
|
/* Bar chart x-axis labels */
|
|
.dark.theme-cyberpunk svg text[fill="#6b7280"],
|
|
.dark.theme-cyberpunk svg text[fill="#9ca3af"] {
|
|
fill: hsl(240, 8%, 45%) !important;
|
|
}
|
|
.dark.theme-cyberpunk svg text[fill="#374151"],
|
|
.dark.theme-cyberpunk svg text[fill="#4b5563"] {
|
|
fill: hsl(210, 40%, 75%) !important;
|
|
}
|
|
|
|
/* New Leads bars — intense neon-pink with intense glow */
|
|
.dark.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
|
|
fill: hsl(330, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
|
|
rx: 4;
|
|
}
|
|
|
|
/* Closed bars — bright neon cyan with glow */
|
|
.dark.theme-cyberpunk svg rect[fill*="closedGrad"] {
|
|
fill: hsl(186, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
|
|
rx: 4;
|
|
}
|
|
|
|
/* Bar chart legend swatch — New Lead (intense neon pink #FF1493) */
|
|
.dark.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
|
|
border: 1px solid hsl(330, 100%, 60%) !important;
|
|
}
|
|
|
|
/* Bar chart legend swatch — Closed (bright neon cyan #00F0FF) */
|
|
.dark.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
|
|
background: hsl(186, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
|
|
border: 1px solid hsl(186, 100%, 55%) !important;
|
|
}
|
|
|
|
/* Bar chart legend label — New Lead (neon pink text) */
|
|
.dark.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
|
|
color: hsl(330, 100%, 65%) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Bar chart legend label — Closed (neon cyan text) */
|
|
.dark.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
|
|
color: hsl(186, 100%, 60%) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Hover tooltip */
|
|
.dark.theme-cyberpunk .min-w-\[150px\].rounded-xl.border.p-3 {
|
|
background: hsla(240, 15%, 8%, 0.95) !important;
|
|
border-color: hsl(270, 30%, 20%) !important;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px hsla(330, 100%, 50%, 0.1);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.dark.theme-cyberpunk .mb-1\.5.text-xs.font-semibold {
|
|
color: hsl(0, 0%, 90%) !important;
|
|
}
|
|
/* ============================================================================
|
|
Data Tables � Alternating obsidian rows, glowing status badges
|
|
============================================================================ */
|
|
|
|
/* Card wrapper */
|
|
.dark.theme-cyberpunk .rounded-xl.border:has(table) {
|
|
background: hsla(240, 15%, 7%, 0.65) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
border-color: hsla(270, 30%, 20%, 0.35) !important;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Table header */
|
|
.dark.theme-cyberpunk table thead tr {
|
|
border-bottom-color: hsl(270, 25%, 14%) !important;
|
|
}
|
|
.dark.theme-cyberpunk table thead th {
|
|
color: hsl(240, 8%, 45%) !important;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* Table body rows � alternating ultra-dark obsidian */
|
|
.dark.theme-cyberpunk table tbody tr {
|
|
border-bottom-color: hsla(270, 25%, 12%, 0.4) !important;
|
|
}
|
|
.dark.theme-cyberpunk table tbody tr:nth-child(even) {
|
|
background: hsla(240, 15%, 5%, 0.3) !important;
|
|
}
|
|
.dark.theme-cyberpunk table tbody tr:nth-child(odd) {
|
|
background: hsla(240, 12%, 4%, 0.2) !important;
|
|
}
|
|
.dark.theme-cyberpunk table tbody tr:hover {
|
|
background: hsla(330, 100%, 50%, 0.04) !important;
|
|
}
|
|
|
|
/* Company name link */
|
|
.dark.theme-cyberpunk table tbody td a.font-medium {
|
|
color: hsl(210, 40%, 85%) !important;
|
|
}
|
|
.dark.theme-cyberpunk table tbody td a.font-medium:hover {
|
|
color: hsl(330, 100%, 60%) !important;
|
|
text-shadow: 0 0 6px rgba(255, 0, 127, 0.2);
|
|
}
|
|
|
|
/* Contact text */
|
|
.dark.theme-cyberpunk table tbody td.text-muted-foreground {
|
|
color: hsl(240, 8%, 48%) !important;
|
|
}
|
|
|
|
/* Status Badges � rounded pills with glowing text */
|
|
.dark.theme-cyberpunk .bg-blue-500\/10 {
|
|
background: hsla(180, 100%, 50%, 0.1) !important;
|
|
border-color: hsla(180, 100%, 50%, 0.2) !important;
|
|
color: hsl(180, 100%, 60%) !important;
|
|
text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
.dark.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
|
|
color: hsl(180, 100%, 60%) !important;
|
|
text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
|
|
}
|
|
|
|
.dark.theme-cyberpunk .bg-amber-500\/10 {
|
|
background: hsla(30, 100%, 55%, 0.1) !important;
|
|
border-color: hsla(30, 100%, 55%, 0.2) !important;
|
|
color: hsl(30, 100%, 60%) !important;
|
|
text-shadow: 0 0 6px rgba(255, 165, 0, 0.4);
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
.dark.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
|
|
color: hsl(30, 100%, 60%) !important;
|
|
text-shadow: 0 0 6px rgba(255, 165, 0, 0.4);
|
|
}
|
|
|
|
.dark.theme-cyberpunk .bg-purple-500\/10 {
|
|
background: hsla(260, 80%, 60%, 0.1) !important;
|
|
border-color: hsla(260, 80%, 60%, 0.2) !important;
|
|
color: hsl(260, 80%, 65%) !important;
|
|
text-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
.dark.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
|
|
color: hsl(260, 80%, 65%) !important;
|
|
text-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
|
|
}
|
|
|
|
.dark.theme-cyberpunk .bg-emerald-500\/10 {
|
|
background: hsla(110, 100%, 50%, 0.1) !important;
|
|
border-color: hsla(110, 100%, 50%, 0.2) !important;
|
|
color: hsl(110, 100%, 55%) !important;
|
|
text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
.dark.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
|
|
color: hsl(110, 100%, 55%) !important;
|
|
text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
|
|
}
|
|
|
|
.dark.theme-cyberpunk .bg-zinc-500\/10 {
|
|
background: hsla(240, 8%, 50%, 0.08) !important;
|
|
border-color: hsla(240, 8%, 50%, 0.15) !important;
|
|
color: hsl(240, 8%, 50%) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
.dark.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
|
|
/* Status dot inside badge */
|
|
.dark.theme-cyberpunk .mr-1\.5.h-1\.5.w-1\.5.rounded-full {
|
|
box-shadow: 0 0 4px currentColor;
|
|
}
|
|
|
|
/* "View all" link */
|
|
.dark.theme-cyberpunk .text-primary.hover\:underline {
|
|
color: hsl(330, 100%, 55%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .text-primary.hover\:underline:hover {
|
|
text-shadow: 0 0 6px rgba(255, 0, 127, 0.2);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Other Components
|
|
============================================================================ */
|
|
|
|
/* Badge component (generic) */
|
|
.dark.theme-cyberpunk .inline-flex.items-center.border.rounded-full {
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
/* DataTable pagination */
|
|
.dark.theme-cyberpunk .flex.items-center.justify-between.px-2 .text-sm.text-muted-foreground {
|
|
color: hsl(240, 8%, 45%) !important;
|
|
}
|
|
|
|
/* Page size selector */
|
|
.dark.theme-cyberpunk .h-8.w-\[70px\] {
|
|
border-color: hsl(270, 25%, 15%) !important;
|
|
background: hsla(240, 12%, 10%, 0.6) !important;
|
|
}
|
|
|
|
/* Nav buttons (pagination) */
|
|
.dark.theme-cyberpunk .h-8.w-8.p-0,
|
|
.dark.theme-cyberpunk .h-8.w-8 {
|
|
border-color: hsl(270, 25%, 15%) !important;
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .h-8.w-8:hover {
|
|
background: hsla(330, 100%, 50%, 0.1) !important;
|
|
color: hsl(330, 100%, 55%) !important;
|
|
border-color: hsla(330, 100%, 50%, 0.2) !important;
|
|
}
|
|
|
|
/* Loading skeleton */
|
|
.dark.theme-cyberpunk .h-4.animate-pulse.rounded.bg-muted {
|
|
background: hsl(240, 12%, 14%) !important;
|
|
}
|
|
|
|
/* Toast notifications */
|
|
.dark.theme-cyberpunk [data-sonner-toaster] {
|
|
--normal-bg: hsl(240, 15%, 7%);
|
|
--normal-border: hsl(270, 30%, 15%);
|
|
--normal-text: hsl(210, 40%, 93%);
|
|
}
|
|
|
|
/* Focus ring */
|
|
.dark.theme-cyberpunk button:focus-visible {
|
|
box-shadow: 0 0 0 2px hsl(330, 100%, 50%), 0 0 8px rgba(255, 0, 127, 0.4);
|
|
}
|
|
|
|
/* Spidey watermark (DAILY BUGLE) */
|
|
.dark.theme-cyberpunk .absolute.top-12.right-4 {
|
|
display: none !important;
|
|
}
|
|
/* ============================================================================
|
|
Donut Chart — Lead Status Segment Colors (Cyberpunk Neon Overhaul)
|
|
============================================================================ */
|
|
|
|
/* Arc path 1 — Open → Neon Purple/Magenta (#BD00FF) */
|
|
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
|
|
fill: hsl(285, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
|
|
}
|
|
|
|
/* Arc path 2 — Contacted → Bright Cyberpunk Cyan (#00E5FF) */
|
|
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
|
|
fill: hsl(186, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
|
|
}
|
|
|
|
/* Arc path 3 — Pending → Electric Neon Yellow/Orange (#FFD700) */
|
|
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
|
|
fill: hsl(51, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
|
|
}
|
|
|
|
/* Arc path 4 — Closed → Glowing Lime Green (#39FF14) */
|
|
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
|
|
fill: hsl(110, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
|
|
}
|
|
|
|
/* Arc path 5 — Ignored → Deep Neon Crimson (#FF0055) */
|
|
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
|
|
fill: hsl(340, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
|
|
}
|
|
|
|
/* Legend dot 1 — Open (Neon Purple) */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
|
|
background: hsl(285, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
|
|
}
|
|
|
|
/* Legend dot 2 — Contacted (Bright Cyan) */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
|
|
background: hsl(186, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
|
|
}
|
|
|
|
/* Legend dot 3 — Pending (Electric Yellow/Orange) */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
|
|
background: hsl(51, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
|
|
}
|
|
|
|
/* Legend dot 4 — Closed (Lime Green) */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
|
|
background: hsl(110, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
|
|
}
|
|
|
|
/* Legend dot 5 — Ignored (Deep Neon Crimson) */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
|
|
background: hsl(340, 100%, 50%) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
|
|
}
|
|
|
|
/* Legend container hover border — match segment color */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1):hover {
|
|
border-color: hsla(285, 100%, 50%, 0.35) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2):hover {
|
|
border-color: hsla(186, 100%, 50%, 0.35) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3):hover {
|
|
border-color: hsla(51, 100%, 50%, 0.35) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4):hover {
|
|
border-color: hsla(110, 100%, 50%, 0.35) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5):hover {
|
|
border-color: hsla(340, 100%, 50%, 0.35) !important;
|
|
}
|
|
|
|
/* Highlight text colors on hover */
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1):hover .text-xs.font-semibold {
|
|
color: hsl(285, 100%, 55%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2):hover .text-xs.font-semibold {
|
|
color: hsl(186, 100%, 55%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3):hover .text-xs.font-semibold {
|
|
color: hsl(51, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4):hover .text-xs.font-semibold {
|
|
color: hsl(110, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5):hover .text-xs.font-semibold {
|
|
color: hsl(340, 100%, 55%) !important;
|
|
}
|
|
/* ============================================================================
|
|
Sidebar — Toggle, icons, monitor, facebook
|
|
============================================================================ */
|
|
|
|
/* Sidebar toggle button hover state */
|
|
.dark.theme-cyberpunk aside button:hover svg {
|
|
color: hsl(330, 100%, 55%) !important;
|
|
filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.3));
|
|
}
|
|
|
|
/* Bottom-left sidebar icon/badge catch-all — any SVG icon near user area gets neon pink */
|
|
.dark.theme-cyberpunk aside .border-t + div svg,
|
|
.dark.theme-cyberpunk aside .border-t ~ div svg {
|
|
color: hsl(330, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.2));
|
|
}
|
|
|
|
/* System monitor values — neon cyan */
|
|
.dark.theme-cyberpunk aside .text-\[var\(--theme-primary\, #3b91f7\)\] {
|
|
color: hsl(180, 100%, 55%) !important;
|
|
}
|
|
|
|
/* Force any Facebook icon / blue circular button in sidebar to neon pink */
|
|
.dark.theme-cyberpunk aside button:has(.lucide-facebook),
|
|
.dark.theme-cyberpunk aside [class*="facebook"] {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
border-color: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside button:has(.lucide-facebook) svg,
|
|
.dark.theme-cyberpunk aside [class*="facebook"] svg {
|
|
color: hsl(0, 0%, 100%) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
1. METRIC CARDS — Balanced Glowing Pink Highlights (Top & Bottom)
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
|
|
.dark.theme-cyberpunk [class*="bg-card"],
|
|
.dark.theme-cyberpunk .rounded-xl.border.bg-card,
|
|
.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
|
|
.light.theme-cyberpunk [class*="bg-card"],
|
|
.light.theme-cyberpunk .rounded-xl.border.bg-card {
|
|
border-top: 2px solid hsl(330, 100%, 50%) !important;
|
|
border-bottom: 2px solid hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 4px 20px rgba(255, 0, 127, 0.15) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
2. TOP RIGHT NAV + SIDEBAR + TABLE — All Avatar Fallbacks → Neon Pink
|
|
Targets: .bg-muted span that is a direct child of the Avatar root
|
|
(Avatar root always has shrink-0 + overflow-hidden classes)
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk [class*="shrink-0"][class*="overflow-hidden"] > .bg-muted {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
3. BOTTOM LEFT SIDEBAR — Lightning / Zap Icons
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk aside [class*="lucide-zap"],
|
|
.dark.theme-cyberpunk aside svg[class*="text-blue"],
|
|
.dark.theme-cyberpunk aside [class*="lightning"] {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
color: #ffffff !important;
|
|
fill: #ffffff !important;
|
|
box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
4. STATUS BADGES — Neon Cyberpunk Pills (Recent Leads Table)
|
|
============================================================================ */
|
|
|
|
/* Open → Bright Cyan */
|
|
.dark.theme-cyberpunk [class*="bg-blue-500/10"] {
|
|
background: hsla(186, 100%, 50%, 0.12) !important;
|
|
color: hsl(186, 100%, 55%) !important;
|
|
border-color: hsla(186, 100%, 50%, 0.25) !important;
|
|
box-shadow: 0 0 6px rgba(0, 229, 255, 0.15) !important;
|
|
}
|
|
|
|
/* Contacted → Cyberpunk Purple/Magenta */
|
|
.dark.theme-cyberpunk [class*="bg-amber-500/10"] {
|
|
background: hsla(285, 100%, 50%, 0.12) !important;
|
|
color: hsl(285, 100%, 55%) !important;
|
|
border-color: hsla(285, 100%, 50%, 0.25) !important;
|
|
box-shadow: 0 0 6px rgba(189, 0, 255, 0.15) !important;
|
|
}
|
|
|
|
/* Pending → Cyberpunk Orange/Yellow */
|
|
.dark.theme-cyberpunk [class*="bg-purple-500/10"] {
|
|
background: hsla(40, 100%, 55%, 0.12) !important;
|
|
color: hsl(40, 100%, 55%) !important;
|
|
border-color: hsla(40, 100%, 55%, 0.25) !important;
|
|
box-shadow: 0 0 6px rgba(255, 170, 0, 0.15) !important;
|
|
}
|
|
|
|
/* Closed → Cyberpunk Crimson/Deep Red */
|
|
.dark.theme-cyberpunk [class*="bg-emerald-500/10"] {
|
|
background: hsla(350, 75%, 45%, 0.12) !important;
|
|
color: hsl(350, 75%, 50%) !important;
|
|
border-color: hsla(350, 75%, 45%, 0.25) !important;
|
|
box-shadow: 0 0 6px rgba(200, 30, 60, 0.15) !important;
|
|
}
|
|
|
|
/* Ignored — subtle muted grey */
|
|
.dark.theme-cyberpunk [class*="bg-zinc-500/10"] {
|
|
background: hsla(0, 0%, 40%, 0.08) !important;
|
|
color: hsl(0, 0%, 50%) !important;
|
|
border-color: hsla(0, 0%, 40%, 0.15) !important;
|
|
}
|
|
|
|
/* Status dot — matches badge color (LeadStatusBadge component) */
|
|
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
|
|
background: hsl(186, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
|
|
background: hsl(285, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
|
|
background: hsl(40, 100%, 55%) !important;
|
|
}
|
|
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
|
|
background: hsl(350, 75%, 45%) !important;
|
|
}
|
|
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
|
|
background: hsl(0, 0%, 40%) !important;
|
|
}
|
|
|
|
/* (Covered by section 2 — universal [data-radix-avatar-fallback] rule) */
|
|
|
|
/* ============================================================================
|
|
6. SECTION HEADERS — "Pipeline Overview" & "Analytics" → High Contrast
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
|
|
color: hsl(210, 20%, 88%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest.uppercase {
|
|
color: hsl(210, 20%, 88%) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
|
|
color: hsl(220, 15%, 20%) !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.18em;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Pipeline Color Bars — Cyberpunk neon pink/cyan
|
|
============================================================================ */
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
|
|
background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
|
|
background: hsla(330, 100%, 50%, 0.12) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
|
|
background: hsla(180, 100%, 50%, 0.1) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
|
|
color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
|
|
color: hsl(180, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
|
|
}
|
|
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
|
|
}
|
|
|
|
.dark.theme-cyberpunk .growth-word,
|
|
.light.theme-cyberpunk .growth-word {
|
|
-webkit-text-fill-color: #1BB0CE !important;
|
|
color: #1BB0CE !important;
|
|
background: none !important;
|
|
}
|
|
|
|
/* Progress bar background track — light theme */
|
|
.light.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
|
|
background: hsl(240, 5%, 90%) !important;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
/* Progress bar fill — red/faded-red → neon pink */
|
|
.light.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
|
|
box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
/* Progress bar fill — blue → neon cyan */
|
|
.light.theme-cyberpunk .h-full.rounded-full {
|
|
background: hsl(180, 100%, 50%) !important;
|
|
}
|
|
/* Percentage text above progress bars — dark slate */
|
|
.light.theme-cyberpunk .text-sm.font-semibold {
|
|
color: hsl(220, 15%, 20%) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LIGHT THEME — Metric Card Icons & Indicator Lines Override
|
|
============================================================================ */
|
|
.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
|
|
.light.theme-cyberpunk [class*="bg-card"],
|
|
.light.theme-cyberpunk .rounded-xl.border.bg-card {
|
|
border-top: 2px solid hsl(330, 100%, 50%) !important;
|
|
border-bottom: 2px solid hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 4px 20px rgba(255, 0, 127, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
|
|
background: hsl(0, 0%, 100%) !important;
|
|
}
|
|
.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
|
|
background: hsl(0, 0%, 100%) !important;
|
|
border: 2px solid hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(255, 0, 127, 0.1) !important;
|
|
}
|
|
.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
|
|
border-color: hsl(330, 100%, 55%) !important;
|
|
box-shadow: 0 4px 24px rgba(255, 0, 127, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.2) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
|
|
color: hsl(240, 10%, 15%) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
|
|
color: hsl(240, 4%, 48%) !important;
|
|
}
|
|
.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
|
|
background: hsla(330, 100%, 50%, 0.08) !important;
|
|
}
|
|
.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl svg.h-6 {
|
|
color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.2), transparent) !important;
|
|
}
|
|
|
|
/* Pipeline accent lines — odd cards neon pink */
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
|
|
}
|
|
/* Pipeline accent lines — even cards neon cyan */
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
|
|
background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
|
|
box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
|
|
}
|
|
/* Icon containers — odd neon pink, even neon cyan */
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
|
|
background: hsla(330, 100%, 50%, 0.12) !important;
|
|
}
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
|
|
background: hsla(180, 100%, 50%, 0.1) !important;
|
|
}
|
|
/* Icon SVG colors — odd neon pink, even neon cyan */
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
|
|
color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
|
|
color: hsl(180, 100%, 50%) !important;
|
|
}
|
|
/* Bottom glow bars — odd neon pink, even neon cyan */
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
|
|
}
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
|
|
background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
|
|
}
|
|
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
|
|
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LIGHT THEME — Donut Chart Segment Colors (mirrors dark mode)
|
|
============================================================================ */
|
|
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
|
|
fill: hsl(285, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
|
|
}
|
|
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
|
|
fill: hsl(186, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
|
|
}
|
|
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
|
|
fill: hsl(51, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
|
|
}
|
|
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
|
|
fill: hsl(110, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
|
|
}
|
|
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
|
|
fill: hsl(340, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
|
|
}
|
|
|
|
/* Legend dots — match dark mode colors */
|
|
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
|
|
background: hsl(285, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
|
|
}
|
|
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
|
|
background: hsl(186, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
|
|
}
|
|
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
|
|
background: hsl(51, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
|
|
}
|
|
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
|
|
background: hsl(110, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
|
|
}
|
|
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
|
|
background: hsl(340, 100%, 50%) !important;
|
|
box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LIGHT THEME — Bar Chart (mirrors dark mode)
|
|
============================================================================ */
|
|
.light.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
|
|
fill: hsl(330, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
|
|
rx: 4;
|
|
}
|
|
.light.theme-cyberpunk svg rect[fill*="closedGrad"] {
|
|
fill: hsl(186, 100%, 50%) !important;
|
|
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
|
|
rx: 4;
|
|
}
|
|
.light.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
|
|
border: 1px solid hsl(330, 100%, 60%) !important;
|
|
}
|
|
.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
|
|
background: hsl(186, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
|
|
border: 1px solid hsl(186, 100%, 55%) !important;
|
|
}
|
|
.light.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
|
|
color: hsl(330, 100%, 65%) !important;
|
|
font-weight: 600;
|
|
}
|
|
.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
|
|
color: hsl(186, 100%, 60%) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LIGHT THEME — Status Badges (mirrors dark mode neon pills)
|
|
============================================================================ */
|
|
.light.theme-cyberpunk [class*="bg-blue-500/10"] {
|
|
background: hsla(186, 100%, 50%, 0.12) !important;
|
|
color: hsl(186, 100%, 40%) !important;
|
|
border-color: hsla(186, 100%, 50%, 0.25) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
.light.theme-cyberpunk [class*="bg-amber-500/10"] {
|
|
background: hsla(285, 100%, 50%, 0.12) !important;
|
|
color: hsl(285, 100%, 45%) !important;
|
|
border-color: hsla(285, 100%, 50%, 0.25) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
.light.theme-cyberpunk [class*="bg-purple-500/10"] {
|
|
background: hsla(40, 100%, 55%, 0.12) !important;
|
|
color: hsl(40, 90%, 40%) !important;
|
|
border-color: hsla(40, 100%, 55%, 0.25) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
.light.theme-cyberpunk [class*="bg-emerald-500/10"] {
|
|
background: hsla(350, 75%, 45%, 0.12) !important;
|
|
color: hsl(350, 75%, 40%) !important;
|
|
border-color: hsla(350, 75%, 45%, 0.25) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
.light.theme-cyberpunk [class*="bg-zinc-500/10"] {
|
|
background: hsla(0, 0%, 40%, 0.08) !important;
|
|
color: hsl(0, 0%, 40%) !important;
|
|
border-color: hsla(0, 0%, 40%, 0.15) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
.light.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
|
|
color: hsl(186, 100%, 40%) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
|
|
color: hsl(285, 100%, 45%) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
|
|
color: hsl(40, 90%, 40%) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
|
|
color: hsl(350, 75%, 40%) !important;
|
|
}
|
|
.light.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
|
|
color: hsl(0, 0%, 40%) !important;
|
|
}
|
|
|
|
/* Status dots — light theme */
|
|
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
|
|
background: hsl(186, 100%, 50%) !important;
|
|
}
|
|
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
|
|
background: hsl(285, 100%, 50%) !important;
|
|
}
|
|
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
|
|
background: hsl(40, 100%, 55%) !important;
|
|
}
|
|
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
|
|
background: hsl(350, 75%, 45%) !important;
|
|
}
|
|
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
|
|
background: hsl(0, 0%, 40%) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Client Portal Overrides — Cyberpunk background for portal pages
|
|
============================================================================ */
|
|
|
|
/* Make the outer portal container transparent so body::before background shows */
|
|
.dark.theme-cyberpunk .min-h-screen.bg-background {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Portal sidebar — dark glass */
|
|
.dark.theme-cyberpunk aside.bg-card.border-r.border-border {
|
|
background: hsl(240, 15%, 3%) !important;
|
|
border-right-color: hsl(270, 25%, 10%) !important;
|
|
}
|
|
|
|
/* Portal sidebar nav items — muted text */
|
|
.dark.theme-cyberpunk aside .text-muted-foreground {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside button:hover {
|
|
background: hsla(330, 100%, 50%, 0.08) !important;
|
|
color: hsl(0, 0%, 90%) !important;
|
|
}
|
|
|
|
/* Portal sidebar active nav item — neon pink pill */
|
|
.dark.theme-cyberpunk aside .bg-primary\/10.text-primary {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
color: hsl(0, 0%, 100%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.3), 0 0 20px rgba(255, 0, 127, 0.1);
|
|
border-color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
.dark.theme-cyberpunk aside .bg-primary\/10.text-primary svg {
|
|
color: hsl(0, 0%, 100%) !important;
|
|
}
|
|
|
|
/* Portal header — dark glass */
|
|
.dark.theme-cyberpunk header.bg-card\/80 {
|
|
background: hsl(240, 15%, 3%) !important;
|
|
border-bottom-color: hsl(270, 25%, 10%) !important;
|
|
}
|
|
|
|
/* Portal card backgrounds — semi-transparent glass */
|
|
.dark.theme-cyberpunk .bg-card {
|
|
background: hsla(240, 15%, 7%, 0.65) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border-color: hsla(270, 30%, 20%, 0.35) !important;
|
|
}
|
|
|
|
/* Portal borders */
|
|
.dark.theme-cyberpunk .border-border {
|
|
border-color: hsl(270, 25%, 12%) !important;
|
|
}
|
|
|
|
/* Portal input fields */
|
|
.dark.theme-cyberpunk .bg-muted {
|
|
background: hsl(240, 12%, 9%) !important;
|
|
}
|
|
.dark.theme-cyberpunk .border-border:focus {
|
|
border-color: hsl(330, 100%, 50%) !important;
|
|
}
|
|
|
|
/* Portal primary buttons */
|
|
.dark.theme-cyberpunk .bg-primary {
|
|
background: hsl(330, 100%, 50%) !important;
|
|
box-shadow: 0 0 10px rgba(255, 0, 127, 0.2);
|
|
}
|
|
.dark.theme-cyberpunk .bg-primary:hover {
|
|
background: hsl(330, 100%, 55%) !important;
|
|
box-shadow: 0 0 15px rgba(255, 0, 127, 0.4);
|
|
}
|
|
|
|
/* Portal primary text highlights */
|
|
.dark.theme-cyberpunk .text-primary {
|
|
color: hsl(330, 100%, 55%) !important;
|
|
}
|
|
|
|
/* Portal muted text */
|
|
.dark.theme-cyberpunk .text-muted-foreground {
|
|
color: hsl(240, 8%, 50%) !important;
|
|
}
|