1549 lines
61 KiB
CSS
1549 lines
61 KiB
CSS
/* ===== LUMINOUS THEME — Deep Glass / HarmonyOS-style ===== */
|
|
|
|
/* ── Animations ─────────────────────────────────────────── */
|
|
|
|
@keyframes ring-spin-cw {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes ring-spin-ccw {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(-360deg); }
|
|
}
|
|
|
|
@keyframes ring-spin-cw-fast {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes aurora-wave {
|
|
0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
|
|
10% { opacity: 0.05; }
|
|
50% { opacity: 0.08; }
|
|
90% { opacity: 0.05; }
|
|
100% { transform: translateX(200%) skewX(-15deg); opacity: 0; }
|
|
}
|
|
|
|
@keyframes particle-float {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
20% { transform: translateY(-10px) translateX(5px); }
|
|
40% { transform: translateY(-3px) translateX(-6px); }
|
|
60% { transform: translateY(-14px) translateX(3px); }
|
|
80% { transform: translateY(-5px) translateX(-2px); }
|
|
}
|
|
|
|
@keyframes particle-float-2 {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
25% { transform: translateY(6px) translateX(-8px); }
|
|
50% { transform: translateY(-4px) translateX(4px); }
|
|
75% { transform: translateY(10px) translateX(-2px); }
|
|
}
|
|
|
|
@keyframes glass-shine {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 300% center; }
|
|
}
|
|
|
|
/* ── CSS Variables ─────────────────────────────────────── */
|
|
|
|
.dark.theme-luminous {
|
|
--background: 220 32% 7%;
|
|
--foreground: 210 30% 94%;
|
|
--card: 218 30% 8%;
|
|
--card-foreground: 210 30% 94%;
|
|
--popover: 218 30% 8%;
|
|
--popover-foreground: 210 30% 94%;
|
|
--primary: 210 75% 55%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 185 70% 45%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 218 18% 12%;
|
|
--muted-foreground: 218 12% 55%;
|
|
--accent: 35 80% 55%;
|
|
--accent-foreground: 0 0% 0%;
|
|
--destructive: 0 75% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 218 20% 16%;
|
|
--input: 218 18% 14%;
|
|
--ring: 210 75% 55%;
|
|
--radius: 0.75rem;
|
|
--sidebar: 220 32% 7%;
|
|
--sidebar-foreground: 210 30% 94%;
|
|
--sidebar-primary: 210 75% 55%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 218 30% 12%;
|
|
--sidebar-accent-foreground: 210 30% 94%;
|
|
--sidebar-border: 218 20% 12%;
|
|
--sidebar-ring: 210 75% 55%;
|
|
}
|
|
|
|
.light.theme-luminous {
|
|
--background: 205 38% 86%;
|
|
--foreground: 210 30% 15%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 210 30% 15%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 210 30% 15%;
|
|
--primary: 210 65% 48%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 185 65% 38%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 205 20% 90%;
|
|
--muted-foreground: 210 12% 48%;
|
|
--accent: 35 75% 50%;
|
|
--accent-foreground: 0 0% 0%;
|
|
--destructive: 0 75% 45%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 210 18% 78%;
|
|
--input: 210 15% 84%;
|
|
--ring: 210 65% 48%;
|
|
--radius: 0.75rem;
|
|
--sidebar: 0 0% 100%;
|
|
--sidebar-foreground: 210 30% 15%;
|
|
--sidebar-primary: 210 65% 48%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 205 18% 90%;
|
|
--sidebar-accent-foreground: 210 30% 15%;
|
|
--sidebar-border: 210 18% 78%;
|
|
--sidebar-ring: 210 65% 48%;
|
|
}
|
|
|
|
/* ═══ DARK MODE — COSMIC BACKGROUND ══════════════════════ */
|
|
|
|
.dark.theme-luminous body {
|
|
position: relative;
|
|
background: hsl(220, 32%, 7%);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.dark.theme-luminous body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -8;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(ellipse 70% 50% at 45% 40%, hsla(210, 65%, 35%, 0.06) 0%, transparent 55%),
|
|
radial-gradient(ellipse 50% 40% at 72% 25%, hsla(185, 75%, 40%, 0.04) 0%, transparent 50%),
|
|
radial-gradient(ellipse 40% 35% at 18% 72%, hsla(35, 80%, 45%, 0.02) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 50% at 80% 68%, hsla(220, 60%, 20%, 0.06) 0%, transparent 50%),
|
|
radial-gradient(ellipse 35% 40% at 8% 12%, hsla(200, 70%, 40%, 0.035) 0%, transparent 45%),
|
|
radial-gradient(ellipse 30% 40% at 88% 42%, hsla(230, 40%, 25%, 0.03) 0%, transparent 45%),
|
|
radial-gradient(ellipse 100% 80% at 50% 50%, hsla(220, 50%, 10%, 0.25) 0%, transparent 70%);
|
|
}
|
|
|
|
.dark.theme-luminous body::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -7;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 50%; left: 50%;
|
|
width: 820px; height: 820px;
|
|
margin: -410px 0 0 -410px;
|
|
border-radius: 50%;
|
|
border: 1px solid hsla(210, 60%, 55%, 0.04);
|
|
outline: 1px solid hsla(185, 65%, 50%, 0.025);
|
|
outline-offset: 40px;
|
|
box-shadow:
|
|
0 0 0 90px hsla(210, 55%, 50%, 0.018),
|
|
0 0 0 150px hsla(185, 60%, 50%, 0.012),
|
|
0 0 0 210px hsla(35, 70%, 50%, 0.007),
|
|
0 0 0 280px hsla(210, 50%, 50%, 0.01),
|
|
0 0 0 360px hsla(185, 55%, 50%, 0.005),
|
|
0 0 0 430px hsla(210, 45%, 50%, 0.008),
|
|
0 0 50px hsla(210, 60%, 55%, 0.02);
|
|
background:
|
|
conic-gradient(
|
|
from 45deg,
|
|
transparent 0deg, hsla(210, 60%, 60%, 0.012) 0deg, hsla(210, 60%, 60%, 0.012) 1deg, transparent 1deg,
|
|
transparent 44deg, hsla(210, 60%, 60%, 0.008) 44deg, hsla(210, 60%, 60%, 0.008) 45deg, transparent 45deg,
|
|
transparent 89deg, hsla(185, 65%, 55%, 0.01) 89deg, hsla(185, 65%, 55%, 0.01) 90deg, transparent 90deg,
|
|
transparent 134deg, hsla(185, 65%, 55%, 0.007) 134deg, hsla(185, 65%, 55%, 0.007) 135deg, transparent 135deg,
|
|
transparent 179deg, hsla(35, 70%, 50%, 0.007) 179deg, hsla(35, 70%, 50%, 0.007) 180deg, transparent 180deg,
|
|
transparent 224deg, hsla(210, 60%, 60%, 0.007) 224deg, hsla(210, 60%, 60%, 0.007) 225deg, transparent 225deg,
|
|
transparent 269deg, hsla(185, 65%, 50%, 0.007) 269deg, hsla(185, 65%, 50%, 0.007) 270deg, transparent 270deg,
|
|
transparent 314deg, hsla(35, 70%, 50%, 0.005) 314deg, hsla(35, 70%, 50%, 0.005) 315deg, transparent 315deg
|
|
),
|
|
repeating-radial-gradient(
|
|
circle at 50% 50%,
|
|
transparent 0px,
|
|
transparent 30px, hsla(210, 50%, 55%, 0.012) 30px, hsla(210, 50%, 55%, 0.012) 31px, transparent 31px,
|
|
transparent 70px, hsla(210, 50%, 55%, 0.01) 70px, hsla(210, 50%, 55%, 0.01) 71px, transparent 71px,
|
|
transparent 120px, hsla(185, 55%, 50%, 0.01) 120px, hsla(185, 55%, 50%, 0.01) 121px, transparent 121px,
|
|
transparent 150px, hsla(210, 50%, 50%, 0.008) 150px, hsla(210, 50%, 50%, 0.008) 151px, transparent 151px,
|
|
transparent 210px, hsla(35, 65%, 50%, 0.007) 210px, hsla(35, 65%, 50%, 0.007) 211px, transparent 211px,
|
|
transparent 260px, hsla(210, 50%, 50%, 0.008) 260px, hsla(210, 50%, 50%, 0.008) 261px, transparent 261px,
|
|
transparent 320px, hsla(185, 55%, 50%, 0.006) 320px, hsla(185, 55%, 50%, 0.006) 321px, transparent 321px,
|
|
transparent 370px, hsla(210, 45%, 50%, 0.007) 370px, hsla(210, 45%, 50%, 0.007) 371px, transparent 371px,
|
|
transparent 430px, hsla(35, 60%, 50%, 0.005) 430px, hsla(35, 60%, 50%, 0.005) 431px, transparent 431px
|
|
);
|
|
animation: ring-spin-ccw 240s linear infinite;
|
|
}
|
|
|
|
.dark.theme-luminous .min-h-screen.bg-background {
|
|
position: relative;
|
|
}
|
|
|
|
.dark.theme-luminous .min-h-screen.bg-background::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -6;
|
|
pointer-events: none;
|
|
inset: 0;
|
|
background:
|
|
repeating-linear-gradient(0deg,
|
|
transparent, transparent 48px,
|
|
hsla(210, 15%, 50%, 0.008) 48px, hsla(210, 15%, 50%, 0.008) 49px,
|
|
transparent 49px, transparent 100px
|
|
),
|
|
repeating-linear-gradient(90deg,
|
|
transparent, transparent 48px,
|
|
hsla(210, 15%, 50%, 0.006) 48px, hsla(210, 15%, 50%, 0.006) 49px,
|
|
transparent 49px, transparent 100px
|
|
),
|
|
repeating-linear-gradient(45deg,
|
|
transparent, transparent 70px,
|
|
hsla(185, 15%, 50%, 0.004) 70px, hsla(185, 15%, 50%, 0.004) 71px,
|
|
transparent 71px, transparent 140px
|
|
),
|
|
repeating-linear-gradient(-45deg,
|
|
transparent, transparent 70px,
|
|
hsla(185, 15%, 50%, 0.003) 70px, hsla(185, 15%, 50%, 0.003) 71px,
|
|
transparent 71px, transparent 140px
|
|
),
|
|
radial-gradient(1px 1px at 4% 8%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 12% 22%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 20% 5%, hsla(210, 30%, 60%, 0.03), transparent),
|
|
radial-gradient(1px 1px at 28% 18%, hsla(185, 30%, 55%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 36% 10%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 44% 25%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 52% 8%, hsla(185, 30%, 55%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 60% 20%, hsla(210, 30%, 60%, 0.03), transparent),
|
|
radial-gradient(1px 1px at 68% 12%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 76% 28%, hsla(35, 30%, 55%, 0.015), transparent),
|
|
radial-gradient(1px 1px at 84% 6%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 92% 16%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 8% 38%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 16% 48%, hsla(185, 30%, 55%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 24% 32%, hsla(210, 30%, 60%, 0.03), transparent),
|
|
radial-gradient(1px 1px at 32% 55%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 40% 42%, hsla(185, 30%, 55%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 48% 35%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 56% 50%, hsla(35, 30%, 55%, 0.015), transparent),
|
|
radial-gradient(1px 1px at 64% 38%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 72% 48%, hsla(185, 30%, 55%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 80% 30%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 88% 45%, hsla(210, 30%, 60%, 0.03), transparent),
|
|
radial-gradient(1px 1px at 96% 36%, hsla(185, 30%, 55%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 6% 65%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 14% 78%, hsla(35, 30%, 55%, 0.015), transparent),
|
|
radial-gradient(1px 1px at 22% 62%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 30% 72%, hsla(185, 30%, 55%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 38% 58%, hsla(210, 30%, 60%, 0.03), transparent),
|
|
radial-gradient(1px 1px at 46% 68%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 54% 82%, hsla(185, 30%, 55%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 62% 60%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 70% 75%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 78% 55%, hsla(35, 30%, 55%, 0.015), transparent),
|
|
radial-gradient(1px 1px at 86% 70%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 94% 62%, hsla(185, 30%, 55%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 10% 90%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 26% 88%, hsla(210, 30%, 60%, 0.025), transparent),
|
|
radial-gradient(1px 1px at 42% 95%, hsla(185, 30%, 55%, 0.02), transparent),
|
|
radial-gradient(1px 1px at 58% 85%, hsla(210, 30%, 60%, 0.03), transparent),
|
|
radial-gradient(1px 1px at 74% 92%, hsla(35, 30%, 55%, 0.015), transparent),
|
|
radial-gradient(1px 1px at 90% 80%, hsla(210, 30%, 60%, 0.02), transparent),
|
|
radial-gradient(ellipse 35% 22% at 28% 28%, hsla(210, 70%, 50%, 0.02) 0%, transparent 55%),
|
|
radial-gradient(ellipse 30% 25% at 68% 52%, hsla(185, 70%, 45%, 0.015) 0%, transparent 50%),
|
|
radial-gradient(ellipse 20% 30% at 48% 72%, hsla(35, 70%, 50%, 0.012) 0%, transparent 50%),
|
|
radial-gradient(ellipse 25% 20% at 15% 55%, hsla(200, 60%, 45%, 0.015) 0%, transparent 45%),
|
|
radial-gradient(ellipse 20% 18% at 85% 20%, hsla(210, 60%, 50%, 0.015) 0%, transparent 45%);
|
|
}
|
|
|
|
.dark.theme-luminous .min-h-screen.bg-background::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -5;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 50%; left: 50%;
|
|
width: 920px; height: 920px;
|
|
margin: -460px 0 0 -460px;
|
|
border-radius: 50%;
|
|
border: 1px solid hsla(210, 60%, 55%, 0.035);
|
|
box-shadow:
|
|
0 0 50px hsla(210, 60%, 55%, 0.012),
|
|
0 0 0 1px hsla(210, 60%, 55%, 0.012);
|
|
background:
|
|
radial-gradient(circle at 50% 0%, hsla(210, 70%, 55%, 0.015) 0%, transparent 30%);
|
|
animation: ring-spin-cw 150s linear infinite;
|
|
}
|
|
|
|
.dark.theme-luminous .min-h-screen > .flex.h-full { position: relative; z-index: 0; }
|
|
|
|
.dark.theme-luminous .min-h-screen > .flex.h-full::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -4;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 50%; left: 50%;
|
|
width: 480px; height: 480px;
|
|
margin: -240px 0 0 -240px;
|
|
border-radius: 50%;
|
|
border: 1px solid hsla(185, 65%, 50%, 0.03);
|
|
box-shadow: 0 0 25px hsla(185, 65%, 50%, 0.008);
|
|
background:
|
|
radial-gradient(circle at 50% 50%, hsla(185, 70%, 50%, 0.012) 0%, transparent 40%);
|
|
animation: ring-spin-ccw 110s linear infinite;
|
|
}
|
|
|
|
.dark.theme-luminous header + main::before,
|
|
.dark.theme-luminous nav + main::before {
|
|
content: "" !important;
|
|
position: fixed !important;
|
|
z-index: -3 !important;
|
|
pointer-events: none !important;
|
|
top: 50% !important; left: 50% !important;
|
|
width: 260px !important; height: 260px !important;
|
|
margin: -130px 0 0 -130px !important;
|
|
border-radius: 50% !important;
|
|
border: 1px solid hsla(35, 70%, 55%, 0.025) !important;
|
|
box-shadow: 0 0 15px hsla(35, 70%, 55%, 0.006) !important;
|
|
background: transparent !important;
|
|
animation: ring-spin-cw-fast 60s linear infinite !important;
|
|
}
|
|
|
|
.dark.theme-luminous .min-h-screen > .flex.h-full::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
top: 20%; left: 0;
|
|
width: 120%; height: 2px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
hsla(210, 70%, 55%, 0.025) 12%,
|
|
hsla(185, 70%, 50%, 0.035) 28%,
|
|
hsla(210, 75%, 55%, 0.025) 42%,
|
|
hsla(35, 80%, 55%, 0.015) 52%,
|
|
hsla(210, 70%, 55%, 0.025) 68%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(28px);
|
|
animation: aurora-wave 35s ease-in-out infinite;
|
|
}
|
|
|
|
.dark.theme-luminous header + *::before,
|
|
.dark.theme-luminous nav + *::before,
|
|
.dark.theme-luminous .fixed + main::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
top: 50%; left: 0;
|
|
width: 120%; height: 3px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
hsla(185, 70%, 45%, 0.02) 18%,
|
|
hsla(210, 70%, 50%, 0.03) 38%,
|
|
hsla(185, 75%, 55%, 0.025) 58%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(32px);
|
|
animation: aurora-wave 45s ease-in-out infinite 12s;
|
|
}
|
|
|
|
.dark.theme-luminous .min-h-screen > .flex > .flex-1::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
top: 75%; left: 0;
|
|
width: 120%; height: 2px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
hsla(210, 60%, 50%, 0.015) 25%,
|
|
hsla(35, 70%, 50%, 0.02) 50%,
|
|
transparent 75%
|
|
);
|
|
filter: blur(25px);
|
|
animation: aurora-wave 55s ease-in-out infinite 20s;
|
|
}
|
|
|
|
.dark.theme-luminous .fixed.inset-0.z-\[-1\] {
|
|
display: block !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dark.theme-luminous .fixed.inset-0.z-\[-1\]::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 0; left: 0;
|
|
width: 1.5px; height: 1.5px;
|
|
border-radius: 50%;
|
|
background: hsla(210, 70%, 80%, 0.2);
|
|
box-shadow:
|
|
50px 120px 0 0 hsla(210, 80%, 75%, 0.18),
|
|
180px 60px 0 0 hsla(210, 80%, 70%, 0.15),
|
|
320px 200px 0 1px hsla(210, 80%, 80%, 0.1),
|
|
480px 80px 0 0 hsla(210, 70%, 75%, 0.2),
|
|
620px 250px 0 0 hsla(210, 80%, 70%, 0.12),
|
|
780px 140px 0 2px hsla(210, 70%, 80%, 0.08),
|
|
920px 50px 0 0 hsla(210, 80%, 75%, 0.15),
|
|
1100px 300px 0 0 hsla(210, 70%, 70%, 0.1),
|
|
100px 400px 0 1px hsla(185, 80%, 75%, 0.15),
|
|
250px 550px 0 0 hsla(185, 80%, 70%, 0.18),
|
|
400px 700px 0 0 hsla(185, 70%, 80%, 0.1),
|
|
550px 450px 0 2px hsla(185, 80%, 75%, 0.08),
|
|
700px 600px 0 0 hsla(185, 80%, 70%, 0.15),
|
|
850px 800px 0 0 hsla(185, 70%, 75%, 0.12),
|
|
1050px 500px 0 1px hsla(185, 80%, 80%, 0.06),
|
|
1200px 650px 0 0 hsla(185, 70%, 70%, 0.14),
|
|
150px 900px 0 0 hsla(35, 80%, 75%, 0.12),
|
|
450px 1050px 0 1px hsla(35, 90%, 80%, 0.06),
|
|
750px 950px 0 0 hsla(35, 80%, 70%, 0.1),
|
|
1000px 1100px 0 0 hsla(35, 80%, 75%, 0.08),
|
|
60px 1300px 0 1px hsla(200, 80%, 75%, 0.1),
|
|
300px 1450px 0 0 hsla(210, 70%, 70%, 0.14),
|
|
500px 1250px 0 0 hsla(185, 75%, 75%, 0.12),
|
|
650px 1500px 0 2px hsla(210, 80%, 80%, 0.05),
|
|
850px 1350px 0 0 hsla(185, 80%, 70%, 0.15),
|
|
1050px 1600px 0 0 hsla(210, 70%, 75%, 0.1),
|
|
200px 1800px 0 0 hsla(210, 80%, 80%, 0.08),
|
|
400px 1950px 0 1px hsla(210, 70%, 70%, 0.12),
|
|
600px 1750px 0 0 hsla(210, 80%, 75%, 0.1),
|
|
800px 2000px 0 0 hsla(185, 70%, 75%, 0.08),
|
|
1100px 1850px 0 1px hsla(210, 80%, 80%, 0.06);
|
|
animation: particle-float 18s ease-in-out infinite;
|
|
}
|
|
|
|
.dark.theme-luminous .fixed.inset-0.z-\[-1\]::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 0; left: 0;
|
|
width: 1.5px; height: 1.5px;
|
|
border-radius: 50%;
|
|
background: hsla(185, 80%, 75%, 0.12);
|
|
box-shadow:
|
|
120px 220px 0 0 hsla(210, 70%, 80%, 0.05),
|
|
280px 380px 0 0 hsla(185, 70%, 75%, 0.06),
|
|
450px 150px 0 0 hsla(210, 80%, 85%, 0.04),
|
|
600px 500px 0 0 hsla(35, 70%, 75%, 0.05),
|
|
820px 350px 0 0 hsla(210, 70%, 80%, 0.06),
|
|
950px 600px 0 0 hsla(185, 75%, 80%, 0.04),
|
|
200px 750px 0 0 hsla(210, 80%, 85%, 0.05),
|
|
500px 900px 0 0 hsla(35, 70%, 80%, 0.04),
|
|
720px 1100px 0 0 hsla(210, 70%, 75%, 0.06),
|
|
920px 850px 0 0 hsla(185, 80%, 80%, 0.04),
|
|
150px 1400px 0 0 hsla(210, 70%, 80%, 0.05),
|
|
380px 1600px 0 0 hsla(185, 70%, 75%, 0.06),
|
|
680px 1400px 0 0 hsla(210, 80%, 85%, 0.04),
|
|
950px 1700px 0 0 hsla(35, 70%, 75%, 0.04),
|
|
250px 1900px 0 0 hsla(210, 70%, 80%, 0.06),
|
|
550px 2100px 0 0 hsla(185, 75%, 80%, 0.04),
|
|
320px 240px 0 0 hsla(210, 70%, 80%, 0.04),
|
|
640px 420px 0 0 hsla(185, 70%, 75%, 0.05),
|
|
160px 580px 0 0 hsla(210, 80%, 85%, 0.03),
|
|
780px 720px 0 0 hsla(35, 70%, 75%, 0.03);
|
|
animation: particle-float-2 26s ease-in-out infinite;
|
|
}
|
|
|
|
/* ═══ LIGHT MODE — HARMONYOS BACKGROUND ══════════════════ */
|
|
|
|
.light.theme-luminous body {
|
|
position: relative;
|
|
background: hsl(205, 38%, 86%);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.light.theme-luminous body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -8;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(ellipse 70% 50% at 45% 40%, hsla(210, 60%, 78%, 0.08) 0%, transparent 55%),
|
|
radial-gradient(ellipse 50% 40% at 72% 25%, hsla(185, 55%, 75%, 0.06) 0%, transparent 50%),
|
|
radial-gradient(ellipse 40% 35% at 18% 72%, hsla(35, 60%, 82%, 0.04) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 50% at 80% 68%, hsla(220, 40%, 82%, 0.06) 0%, transparent 50%),
|
|
radial-gradient(ellipse 35% 40% at 8% 12%, hsla(200, 60%, 82%, 0.05) 0%, transparent 45%),
|
|
radial-gradient(ellipse 30% 40% at 88% 42%, hsla(30, 45%, 80%, 0.04) 0%, transparent 45%),
|
|
radial-gradient(ellipse 100% 80% at 50% 50%, hsla(205, 30%, 92%, 0.5) 0%, transparent 70%);
|
|
}
|
|
|
|
.light.theme-luminous body::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -7;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 50%; left: 50%;
|
|
width: 820px; height: 820px;
|
|
margin: -410px 0 0 -410px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.06);
|
|
outline: 1.5px solid hsla(0, 0%, 100%, 0.04);
|
|
outline-offset: 40px;
|
|
box-shadow:
|
|
0 0 0 90px hsla(0, 0%, 100%, 0.035),
|
|
0 0 0 150px hsla(0, 0%, 100%, 0.025),
|
|
0 0 0 210px hsla(35, 50%, 70%, 0.012),
|
|
0 0 0 280px hsla(0, 0%, 100%, 0.02),
|
|
0 0 0 360px hsla(185, 30%, 60%, 0.01),
|
|
0 0 0 430px hsla(0, 0%, 100%, 0.015),
|
|
0 0 50px hsla(0, 0%, 100%, 0.03);
|
|
background:
|
|
conic-gradient(
|
|
from 45deg,
|
|
transparent 0deg, hsla(0, 0%, 100%, 0.025) 0deg, hsla(0, 0%, 100%, 0.025) 1deg, transparent 1deg,
|
|
transparent 44deg, hsla(0, 0%, 100%, 0.018) 44deg, hsla(0, 0%, 100%, 0.018) 45deg, transparent 45deg,
|
|
transparent 89deg, hsla(185, 40%, 70%, 0.02) 89deg, hsla(185, 40%, 70%, 0.02) 90deg, transparent 90deg,
|
|
transparent 134deg, hsla(185, 35%, 65%, 0.015) 134deg, hsla(185, 35%, 65%, 0.015) 135deg, transparent 135deg,
|
|
transparent 179deg, hsla(35, 40%, 75%, 0.015) 179deg, hsla(35, 40%, 75%, 0.015) 180deg, transparent 180deg,
|
|
transparent 224deg, hsla(0, 0%, 100%, 0.015) 224deg, hsla(0, 0%, 100%, 0.015) 225deg, transparent 225deg,
|
|
transparent 269deg, hsla(185, 35%, 65%, 0.015) 269deg, hsla(185, 35%, 65%, 0.015) 270deg, transparent 270deg,
|
|
transparent 314deg, hsla(35, 35%, 70%, 0.012) 314deg, hsla(35, 35%, 70%, 0.012) 315deg, transparent 315deg
|
|
),
|
|
repeating-radial-gradient(
|
|
circle at 50% 50%,
|
|
transparent 0px,
|
|
transparent 30px, hsla(0, 0%, 100%, 0.025) 30px, hsla(0, 0%, 100%, 0.025) 31px, transparent 31px,
|
|
transparent 70px, hsla(0, 0%, 100%, 0.02) 70px, hsla(0, 0%, 100%, 0.02) 71px, transparent 71px,
|
|
transparent 120px, hsla(185, 40%, 72%, 0.02) 120px, hsla(185, 40%, 72%, 0.02) 121px, transparent 121px,
|
|
transparent 150px, hsla(0, 0%, 100%, 0.018) 150px, hsla(0, 0%, 100%, 0.018) 151px, transparent 151px,
|
|
transparent 210px, hsla(35, 40%, 72%, 0.015) 210px, hsla(35, 40%, 72%, 0.015) 211px, transparent 211px,
|
|
transparent 260px, hsla(0, 0%, 100%, 0.018) 260px, hsla(0, 0%, 100%, 0.018) 261px, transparent 261px,
|
|
transparent 320px, hsla(185, 35%, 65%, 0.015) 320px, hsla(185, 35%, 65%, 0.015) 321px, transparent 321px,
|
|
transparent 370px, hsla(0, 0%, 100%, 0.015) 370px, hsla(0, 0%, 100%, 0.015) 371px, transparent 371px,
|
|
transparent 430px, hsla(35, 35%, 70%, 0.012) 430px, hsla(35, 35%, 70%, 0.012) 431px, transparent 431px
|
|
);
|
|
animation: ring-spin-ccw 240s linear infinite;
|
|
}
|
|
|
|
.light.theme-luminous .min-h-screen.bg-background::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -6;
|
|
pointer-events: none;
|
|
inset: 0;
|
|
background:
|
|
repeating-linear-gradient(0deg,
|
|
transparent, transparent 48px,
|
|
hsla(0, 0%, 100%, 0.018) 48px, hsla(0, 0%, 100%, 0.018) 49px,
|
|
transparent 49px, transparent 100px
|
|
),
|
|
repeating-linear-gradient(90deg,
|
|
transparent, transparent 48px,
|
|
hsla(0, 0%, 100%, 0.014) 48px, hsla(0, 0%, 100%, 0.014) 49px,
|
|
transparent 49px, transparent 100px
|
|
),
|
|
repeating-linear-gradient(45deg,
|
|
transparent, transparent 70px,
|
|
hsla(185, 30%, 70%, 0.01) 70px, hsla(185, 30%, 70%, 0.01) 71px,
|
|
transparent 71px, transparent 140px
|
|
),
|
|
repeating-linear-gradient(-45deg,
|
|
transparent, transparent 70px,
|
|
hsla(185, 25%, 65%, 0.008) 70px, hsla(185, 25%, 65%, 0.008) 71px,
|
|
transparent 71px, transparent 140px
|
|
),
|
|
radial-gradient(1.5px 1.5px at 4% 8%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 12% 22%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 20% 5%, hsla(0, 0%, 100%, 0.08), transparent),
|
|
radial-gradient(1.5px 1.5px at 28% 18%, hsla(185, 30%, 75%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 36% 10%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 44% 25%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 52% 8%, hsla(185, 30%, 75%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 60% 20%, hsla(0, 0%, 100%, 0.08), transparent),
|
|
radial-gradient(1.5px 1.5px at 68% 12%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 76% 28%, hsla(35, 30%, 80%, 0.05), transparent),
|
|
radial-gradient(1.5px 1.5px at 84% 6%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 92% 16%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 8% 38%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 16% 48%, hsla(185, 30%, 75%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 24% 32%, hsla(0, 0%, 100%, 0.08), transparent),
|
|
radial-gradient(1.5px 1.5px at 32% 55%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 40% 42%, hsla(185, 30%, 75%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 48% 35%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 56% 50%, hsla(35, 30%, 80%, 0.05), transparent),
|
|
radial-gradient(1.5px 1.5px at 64% 38%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 72% 48%, hsla(185, 30%, 75%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 80% 30%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 88% 45%, hsla(0, 0%, 100%, 0.08), transparent),
|
|
radial-gradient(1.5px 1.5px at 96% 36%, hsla(185, 30%, 75%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 6% 65%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 14% 78%, hsla(35, 30%, 80%, 0.05), transparent),
|
|
radial-gradient(1.5px 1.5px at 22% 62%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 30% 72%, hsla(185, 30%, 75%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 38% 58%, hsla(0, 0%, 100%, 0.08), transparent),
|
|
radial-gradient(1.5px 1.5px at 46% 68%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 54% 82%, hsla(185, 30%, 75%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 62% 60%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 70% 75%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 78% 55%, hsla(35, 30%, 80%, 0.05), transparent),
|
|
radial-gradient(1.5px 1.5px at 86% 70%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 94% 62%, hsla(185, 30%, 75%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 10% 90%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 26% 88%, hsla(0, 0%, 100%, 0.07), transparent),
|
|
radial-gradient(1.5px 1.5px at 42% 95%, hsla(185, 30%, 75%, 0.06), transparent),
|
|
radial-gradient(1.5px 1.5px at 58% 85%, hsla(0, 0%, 100%, 0.08), transparent),
|
|
radial-gradient(1.5px 1.5px at 74% 92%, hsla(35, 30%, 80%, 0.05), transparent),
|
|
radial-gradient(1.5px 1.5px at 90% 80%, hsla(0, 0%, 100%, 0.06), transparent),
|
|
radial-gradient(ellipse 35% 22% at 28% 28%, hsla(210, 55%, 78%, 0.04) 0%, transparent 55%),
|
|
radial-gradient(ellipse 30% 25% at 68% 52%, hsla(185, 50%, 72%, 0.03) 0%, transparent 50%),
|
|
radial-gradient(ellipse 20% 30% at 48% 72%, hsla(35, 50%, 80%, 0.025) 0%, transparent 50%),
|
|
radial-gradient(ellipse 25% 20% at 15% 55%, hsla(200, 50%, 78%, 0.025) 0%, transparent 45%),
|
|
radial-gradient(ellipse 20% 18% at 85% 20%, hsla(210, 50%, 78%, 0.025) 0%, transparent 45%);
|
|
}
|
|
|
|
.light.theme-luminous .min-h-screen.bg-background {
|
|
position: relative;
|
|
}
|
|
|
|
.light.theme-luminous .min-h-screen.bg-background::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -5;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 50%; left: 50%;
|
|
width: 920px; height: 920px;
|
|
margin: -460px 0 0 -460px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.04);
|
|
box-shadow:
|
|
0 0 60px hsla(0, 0%, 100%, 0.025),
|
|
0 0 0 1px hsla(0, 0%, 100%, 0.02);
|
|
background:
|
|
radial-gradient(circle at 50% 0%, hsla(210, 55%, 80%, 0.025) 0%, transparent 30%);
|
|
animation: ring-spin-cw 150s linear infinite;
|
|
}
|
|
|
|
.light.theme-luminous .min-h-screen > .flex.h-full::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -4;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 50%; left: 50%;
|
|
width: 480px; height: 480px;
|
|
margin: -240px 0 0 -240px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.05);
|
|
box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.02);
|
|
background:
|
|
radial-gradient(circle at 50% 50%, hsla(185, 45%, 72%, 0.02) 0%, transparent 40%);
|
|
animation: ring-spin-ccw 110s linear infinite;
|
|
}
|
|
|
|
.light.theme-luminous header + main::before,
|
|
.light.theme-luminous nav + main::before {
|
|
content: "" !important;
|
|
position: fixed !important;
|
|
z-index: -3 !important;
|
|
pointer-events: none !important;
|
|
top: 50% !important; left: 50% !important;
|
|
width: 260px !important; height: 260px !important;
|
|
margin: -130px 0 0 -130px !important;
|
|
border-radius: 50% !important;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.04) !important;
|
|
box-shadow: 0 0 20px hsla(0, 0%, 100%, 0.015) !important;
|
|
background: transparent !important;
|
|
animation: ring-spin-cw-fast 60s linear infinite !important;
|
|
}
|
|
|
|
.light.theme-luminous .min-h-screen > .flex.h-full::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
top: 20%; left: 0;
|
|
width: 120%; height: 3px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
hsla(210, 60%, 85%, 0.04) 12%,
|
|
hsla(185, 55%, 80%, 0.06) 28%,
|
|
hsla(210, 60%, 85%, 0.04) 42%,
|
|
hsla(35, 55%, 82%, 0.03) 52%,
|
|
hsla(210, 60%, 85%, 0.04) 68%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(28px);
|
|
animation: aurora-wave 30s ease-in-out infinite;
|
|
}
|
|
|
|
.light.theme-luminous header + *::before,
|
|
.light.theme-luminous nav + *::before,
|
|
.light.theme-luminous .fixed + main::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
top: 50%; left: 0;
|
|
width: 120%; height: 3px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
hsla(185, 50%, 75%, 0.035) 18%,
|
|
hsla(210, 60%, 85%, 0.05) 38%,
|
|
hsla(185, 55%, 78%, 0.04) 58%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(30px);
|
|
animation: aurora-wave 40s ease-in-out infinite 12s;
|
|
}
|
|
|
|
.light.theme-luminous .min-h-screen > .flex > .flex-1::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
top: 75%; left: 0;
|
|
width: 120%; height: 2px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
hsla(210, 55%, 80%, 0.025) 25%,
|
|
hsla(35, 50%, 80%, 0.035) 50%,
|
|
transparent 75%
|
|
);
|
|
filter: blur(25px);
|
|
animation: aurora-wave 50s ease-in-out infinite 20s;
|
|
}
|
|
|
|
.light.theme-luminous .fixed.inset-0.z-\[-1\] {
|
|
display: block !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.light.theme-luminous .fixed.inset-0.z-\[-1\]::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 0; left: 0;
|
|
width: 1.5px; height: 1.5px;
|
|
border-radius: 50%;
|
|
background: hsla(0, 0%, 100%, 0.15);
|
|
box-shadow:
|
|
50px 120px 0 0 hsla(0, 0%, 100%, 0.12),
|
|
180px 60px 0 0 hsla(0, 0%, 100%, 0.1),
|
|
320px 200px 0 1px hsla(0, 0%, 100%, 0.07),
|
|
480px 80px 0 0 hsla(0, 0%, 100%, 0.15),
|
|
620px 250px 0 0 hsla(0, 0%, 100%, 0.1),
|
|
780px 140px 0 2px hsla(0, 0%, 100%, 0.06),
|
|
920px 50px 0 0 hsla(0, 0%, 100%, 0.12),
|
|
1100px 300px 0 0 hsla(0, 0%, 100%, 0.08),
|
|
100px 400px 0 1px hsla(185, 40%, 78%, 0.12),
|
|
250px 550px 0 0 hsla(185, 35%, 75%, 0.12),
|
|
400px 700px 0 0 hsla(185, 30%, 70%, 0.07),
|
|
550px 450px 0 2px hsla(185, 35%, 72%, 0.06),
|
|
700px 600px 0 0 hsla(185, 40%, 78%, 0.12),
|
|
850px 800px 0 0 hsla(185, 35%, 75%, 0.1),
|
|
1050px 500px 0 1px hsla(185, 30%, 70%, 0.05),
|
|
1200px 650px 0 0 hsla(185, 35%, 72%, 0.1),
|
|
150px 900px 0 0 hsla(35, 35%, 80%, 0.1),
|
|
450px 1050px 0 1px hsla(35, 30%, 75%, 0.05),
|
|
750px 950px 0 0 hsla(35, 35%, 80%, 0.08),
|
|
1000px 1100px 0 0 hsla(35, 30%, 75%, 0.07),
|
|
60px 1300px 0 1px hsla(200, 40%, 78%, 0.08),
|
|
300px 1450px 0 0 hsla(0, 0%, 100%, 0.1),
|
|
500px 1250px 0 0 hsla(185, 35%, 75%, 0.08),
|
|
650px 1500px 0 2px hsla(0, 0%, 100%, 0.05),
|
|
850px 1350px 0 0 hsla(185, 35%, 75%, 0.12),
|
|
1050px 1600px 0 0 hsla(0, 0%, 100%, 0.08),
|
|
200px 1800px 0 0 hsla(0, 0%, 100%, 0.07),
|
|
400px 1950px 0 1px hsla(0, 0%, 100%, 0.1),
|
|
600px 1750px 0 0 hsla(0, 0%, 100%, 0.08),
|
|
800px 2000px 0 0 hsla(185, 35%, 75%, 0.07),
|
|
1100px 1850px 0 1px hsla(0, 0%, 100%, 0.06);
|
|
animation: particle-float 18s ease-in-out infinite;
|
|
}
|
|
|
|
.light.theme-luminous .fixed.inset-0.z-\[-1\]::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
top: 0; left: 0;
|
|
width: 1.5px; height: 1.5px;
|
|
border-radius: 50%;
|
|
background: hsla(0, 0%, 100%, 0.1);
|
|
box-shadow:
|
|
120px 220px 0 0 hsla(0, 0%, 100%, 0.05),
|
|
280px 380px 0 0 hsla(185, 35%, 75%, 0.06),
|
|
450px 150px 0 0 hsla(0, 0%, 100%, 0.04),
|
|
600px 500px 0 0 hsla(35, 30%, 75%, 0.05),
|
|
820px 350px 0 0 hsla(0, 0%, 100%, 0.06),
|
|
950px 600px 0 0 hsla(185, 35%, 75%, 0.04),
|
|
200px 750px 0 0 hsla(0, 0%, 100%, 0.05),
|
|
500px 900px 0 0 hsla(35, 30%, 75%, 0.04),
|
|
720px 1100px 0 0 hsla(0, 0%, 100%, 0.06),
|
|
920px 850px 0 0 hsla(185, 35%, 75%, 0.04),
|
|
150px 1400px 0 0 hsla(0, 0%, 100%, 0.05),
|
|
380px 1600px 0 0 hsla(185, 35%, 75%, 0.06),
|
|
680px 1400px 0 0 hsla(0, 0%, 100%, 0.04),
|
|
950px 1700px 0 0 hsla(35, 30%, 75%, 0.04),
|
|
250px 1900px 0 0 hsla(0, 0%, 100%, 0.06),
|
|
550px 2100px 0 0 hsla(185, 35%, 75%, 0.04),
|
|
320px 240px 0 0 hsla(0, 0%, 100%, 0.04),
|
|
640px 420px 0 0 hsla(185, 35%, 75%, 0.05),
|
|
160px 580px 0 0 hsla(0, 0%, 100%, 0.03),
|
|
780px 720px 0 0 hsla(35, 30%, 75%, 0.03);
|
|
animation: particle-float-2 26s ease-in-out infinite;
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════
|
|
══ DEEP GLASS 2.0 — Glass Morphism ══
|
|
════════════════════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .bg-card,
|
|
.dark.theme-luminous .bg-popover {
|
|
background: hsla(218, 30%, 8%, 0.04) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
-webkit-backdrop-filter: blur(12px) !important;
|
|
position: relative !important;
|
|
border: 1.5px solid hsla(210, 55%, 70%, 0.05) !important;
|
|
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 60%, 65%, 0.025),
|
|
0 2px 0 0 hsla(220, 40%, 2%, 0.35),
|
|
0 8px 28px hsla(220, 45%, 2%, 0.3),
|
|
inset 0 1.5px 0 hsla(210, 60%, 80%, 0.1),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.2),
|
|
inset 1.5px 0 0 hsla(210, 60%, 80%, 0.035),
|
|
inset -1.5px 0 0 hsla(220, 50%, 0%, 0.12) !important;
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-card::before,
|
|
.dark.theme-luminous .bg-popover::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
border-radius: inherit !important;
|
|
pointer-events: none !important;
|
|
z-index: 0 !important;
|
|
box-shadow:
|
|
inset 0 2px 1px -1px hsla(210, 80%, 75%, 0.05),
|
|
inset -2px 0 1px -1px hsla(185, 75%, 65%, 0.025),
|
|
inset 0 -2px 1px -1px hsla(35, 80%, 75%, 0.025),
|
|
inset 2px 0 1px -1px hsla(210, 80%, 75%, 0.025) !important;
|
|
background: linear-gradient(115deg,
|
|
transparent 0%,
|
|
transparent 25%,
|
|
hsla(210, 80%, 85%, 0.035) 30%,
|
|
hsla(185, 70%, 75%, 0.015) 35%,
|
|
transparent 40%,
|
|
transparent 60%,
|
|
hsla(210, 80%, 85%, 0.02) 65%,
|
|
hsla(35, 80%, 80%, 0.012) 70%,
|
|
transparent 75%,
|
|
transparent 100%
|
|
) !important;
|
|
background-size: 300% 100% !important;
|
|
background-position: 100% center !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-card:hover::before,
|
|
.dark.theme-luminous .bg-popover:hover::before {
|
|
animation: glass-shine 2s ease-out forwards !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-card > *,
|
|
.dark.theme-luminous .bg-popover > * {
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-card:hover,
|
|
.dark.theme-luminous .bg-popover:hover {
|
|
border-color: hsla(210, 75%, 55%, 0.08) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 75%, 55%, 0.035),
|
|
0 4px 0 0 hsla(220, 40%, 2%, 0.35),
|
|
0 12px 36px hsla(220, 45%, 2%, 0.35),
|
|
inset 0 1.5px 0 hsla(210, 60%, 80%, 0.12),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.2),
|
|
inset 1.5px 0 0 hsla(210, 60%, 80%, 0.04),
|
|
inset -1.5px 0 0 hsla(220, 50%, 0%, 0.12),
|
|
0 0 20px hsla(210, 75%, 55%, 0.035) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card,
|
|
.light.theme-luminous .bg-popover {
|
|
background: hsla(0, 0%, 100%, 0.06) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
-webkit-backdrop-filter: blur(12px) !important;
|
|
position: relative !important;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.3) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(0, 0%, 100%, 0.45),
|
|
0 2px 0 0 hsla(210, 15%, 70%, 0.06),
|
|
0 8px 32px hsla(210, 20%, 55%, 0.035),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.55),
|
|
inset 0 -1.5px 0 hsla(210, 20%, 45%, 0.04),
|
|
inset 1.5px 0 0 hsla(0, 0%, 100%, 0.15),
|
|
inset -1.5px 0 0 hsla(210, 15%, 55%, 0.03) !important;
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card::before,
|
|
.light.theme-luminous .bg-popover::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
border-radius: inherit !important;
|
|
pointer-events: none !important;
|
|
z-index: 0 !important;
|
|
box-shadow:
|
|
inset 0 2px 1px -1px hsla(0, 0%, 100%, 0.3),
|
|
inset -2px 0 1px -1px hsla(210, 30%, 80%, 0.06),
|
|
inset 0 -2px 1px -1px hsla(35, 20%, 65%, 0.04),
|
|
inset 2px 0 1px -1px hsla(210, 30%, 80%, 0.06) !important;
|
|
background: linear-gradient(115deg,
|
|
transparent 0%,
|
|
transparent 25%,
|
|
hsla(0, 0%, 100%, 0.18) 30%,
|
|
hsla(185, 30%, 85%, 0.08) 35%,
|
|
transparent 42%,
|
|
transparent 60%,
|
|
hsla(0, 0%, 100%, 0.1) 65%,
|
|
hsla(35, 30%, 85%, 0.06) 70%,
|
|
transparent 78%,
|
|
transparent 100%
|
|
) !important;
|
|
background-size: 300% 100% !important;
|
|
background-position: 100% center !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card:hover::before,
|
|
.light.theme-luminous .bg-popover:hover::before {
|
|
animation: glass-shine 2s ease-out forwards !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card > *,
|
|
.light.theme-luminous .bg-popover > * {
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card:hover,
|
|
.light.theme-luminous .bg-popover:hover {
|
|
border-color: hsla(210, 65%, 48%, 0.08) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 65%, 48%, 0.035),
|
|
0 12px 40px hsla(210, 20%, 55%, 0.04),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.55),
|
|
inset 0 -1.5px 0 hsla(210, 20%, 45%, 0.04) !important;
|
|
}
|
|
|
|
/* ═══ SIDEBAR ════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .bg-sidebar {
|
|
background: hsla(220, 32%, 7%, 0.05) !important;
|
|
backdrop-filter: blur(14px) !important;
|
|
-webkit-backdrop-filter: blur(14px) !important;
|
|
position: relative !important;
|
|
border-right: 1.5px solid hsla(210, 40%, 55%, 0.035) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 40%, 60%, 0.012),
|
|
0 2px 0 0 hsla(220, 40%, 2%, 0.3),
|
|
inset 0 1.5px 0 hsla(210, 50%, 70%, 0.05),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.12),
|
|
inset 1.5px 0 0 hsla(210, 50%, 70%, 0.025),
|
|
4px 0 20px hsla(220, 45%, 2%, 0.08) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-sidebar::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
pointer-events: none !important;
|
|
z-index: 0 !important;
|
|
background: linear-gradient(180deg,
|
|
hsla(210, 50%, 70%, 0.025) 0%,
|
|
transparent 30%,
|
|
transparent 70%,
|
|
hsla(220, 30%, 0%, 0.035) 100%
|
|
) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-sidebar > * { position: relative !important; z-index: 1 !important; }
|
|
|
|
.dark.theme-luminous aside .flex.items-center.gap-2.rounded-md.px-3.py-2.text-sm { transition: all 0.2s ease !important; }
|
|
|
|
.dark.theme-luminous aside .flex.items-center.gap-2.rounded-md.px-3.py-2.text-sm:hover {
|
|
background: hsla(210, 65%, 50%, 0.04) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
border: 1px solid hsla(210, 75%, 55%, 0.05) !important;
|
|
margin: -1px !important;
|
|
}
|
|
|
|
.dark.theme-luminous aside .bg-primary\/10.text-primary {
|
|
background: hsla(210, 75%, 55%, 0.04) !important;
|
|
backdrop-filter: blur(6px) !important;
|
|
position: relative !important;
|
|
border: 1px solid hsla(210, 75%, 55%, 0.06) !important;
|
|
box-shadow:
|
|
0 0 12px hsla(210, 75%, 55%, 0.04),
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.15),
|
|
inset 0 1px 0 hsla(210, 60%, 80%, 0.06),
|
|
inset 0 -1px 0 hsla(210, 50%, 30%, 0.06) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-sidebar {
|
|
background: hsla(0, 0%, 100%, 0.04) !important;
|
|
backdrop-filter: blur(14px) !important;
|
|
-webkit-backdrop-filter: blur(14px) !important;
|
|
border-right: 1.5px solid hsla(0, 0%, 100%, 0.15) !important;
|
|
box-shadow:
|
|
0 2px 0 0 hsla(210, 15%, 70%, 0.04),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25),
|
|
inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.025) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-sidebar::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
pointer-events: none !important;
|
|
z-index: 0 !important;
|
|
background: linear-gradient(180deg,
|
|
hsla(0, 0%, 100%, 0.12) 0%,
|
|
transparent 50%,
|
|
hsla(210, 10%, 55%, 0.025) 100%
|
|
) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-sidebar > * { position: relative !important; z-index: 1 !important; }
|
|
.light.theme-luminous aside .flex.items-center.gap-2.rounded-md.px-3.py-2.text-sm:hover { background: hsla(210, 65%, 48%, 0.035) !important; }
|
|
|
|
.light.theme-luminous aside .bg-primary\/10.text-primary {
|
|
background: hsla(210, 65%, 48%, 0.04) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
border: 1px solid hsla(210, 65%, 48%, 0.06) !important;
|
|
}
|
|
|
|
/* ═══ HEADERS ════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous header,
|
|
.dark.theme-luminous nav,
|
|
.dark.theme-luminous header.bg-card\/80 {
|
|
background: hsla(218, 30%, 6%, 0.04) !important;
|
|
backdrop-filter: blur(14px) !important;
|
|
-webkit-backdrop-filter: blur(14px) !important;
|
|
position: relative !important;
|
|
border-bottom: 1.5px solid hsla(210, 40%, 55%, 0.028) !important;
|
|
box-shadow:
|
|
0 2px 0 0 hsla(220, 40%, 2%, 0.2),
|
|
inset 0 1.5px 0 hsla(210, 50%, 70%, 0.04),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.08),
|
|
0 4px 16px hsla(220, 45%, 2%, 0.08) !important;
|
|
}
|
|
|
|
.dark.theme-luminous header::before,
|
|
.dark.theme-luminous nav::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
pointer-events: none !important;
|
|
z-index: 0 !important;
|
|
background: linear-gradient(180deg,
|
|
hsla(210, 50%, 70%, 0.025) 0%,
|
|
transparent 50%,
|
|
hsla(220, 30%, 0%, 0.03) 100%
|
|
) !important;
|
|
}
|
|
|
|
.dark.theme-luminous header > *, .dark.theme-luminous nav > * { position: relative !important; z-index: 1 !important; }
|
|
|
|
.light.theme-luminous header,
|
|
.light.theme-luminous nav,
|
|
.light.theme-luminous header.bg-card\/80 {
|
|
background: hsla(0, 0%, 100%, 0.035) !important;
|
|
backdrop-filter: blur(14px) !important;
|
|
-webkit-backdrop-filter: blur(14px) !important;
|
|
position: relative !important;
|
|
border-bottom: 1.5px solid hsla(0, 0%, 100%, 0.12) !important;
|
|
box-shadow:
|
|
0 2px 0 0 hsla(210, 15%, 70%, 0.04),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25),
|
|
inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.02) !important;
|
|
}
|
|
|
|
.light.theme-luminous header::before,
|
|
.light.theme-luminous nav::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
pointer-events: none !important;
|
|
z-index: 0 !important;
|
|
background: linear-gradient(180deg,
|
|
hsla(0, 0%, 100%, 0.1) 0%,
|
|
transparent 50%,
|
|
hsla(210, 10%, 55%, 0.02) 100%
|
|
) !important;
|
|
}
|
|
|
|
.light.theme-luminous header > *, .light.theme-luminous nav > * { position: relative !important; z-index: 1 !important; }
|
|
|
|
/* ═══ NESTED GLASS ═══════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .bg-card .bg-card,
|
|
.dark.theme-luminous .bg-popover .bg-card,
|
|
.dark.theme-luminous .bg-card .bg-popover {
|
|
background: hsla(218, 25%, 11%, 0.06) !important;
|
|
backdrop-filter: blur(6px) !important;
|
|
-webkit-backdrop-filter: blur(6px) !important;
|
|
border: 1px solid hsla(210, 40%, 60%, 0.035) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 40%, 60%, 0.012),
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.15),
|
|
inset 0 1px 0 hsla(210, 50%, 70%, 0.05),
|
|
inset 0 -1px 0 hsla(220, 50%, 0%, 0.12) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card .bg-card,
|
|
.light.theme-luminous .bg-popover .bg-card,
|
|
.light.theme-luminous .bg-card .bg-popover {
|
|
background: hsla(0, 0%, 100%, 0.1) !important;
|
|
backdrop-filter: blur(6px) !important;
|
|
-webkit-backdrop-filter: blur(6px) !important;
|
|
border: 1px solid hsla(0, 0%, 100%, 0.2) !important;
|
|
box-shadow:
|
|
0 1px 0 0 hsla(210, 15%, 70%, 0.04),
|
|
inset 0 1px 0 hsla(0, 0%, 100%, 0.25) !important;
|
|
}
|
|
|
|
/* ═══ BUTTONS ════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .bg-primary {
|
|
background: linear-gradient(145deg, hsl(210, 75%, 46%), hsl(210, 75%, 56%)) !important;
|
|
position: relative !important;
|
|
border: none !important;
|
|
box-shadow:
|
|
0 4px 20px hsla(210, 75%, 55%, 0.18),
|
|
0 2px 0 0 hsla(220, 40%, 2%, 0.3),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.18),
|
|
inset 0 -1.5px 0 hsla(210, 50%, 28%, 0.3),
|
|
inset 1.5px 0 0 hsla(0, 0%, 100%, 0.06),
|
|
inset -1.5px 0 0 hsla(210, 50%, 28%, 0.12) !important;
|
|
transition: all 0.25s ease !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-primary:hover {
|
|
background: linear-gradient(145deg, hsl(210, 75%, 50%), hsl(210, 75%, 60%)) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow:
|
|
0 6px 28px hsla(210, 75%, 55%, 0.3),
|
|
0 2px 0 0 hsla(220, 40%, 2%, 0.3),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.18),
|
|
inset 0 -1.5px 0 hsla(210, 50%, 28%, 0.3),
|
|
inset 1.5px 0 0 hsla(0, 0%, 100%, 0.06),
|
|
inset -1.5px 0 0 hsla(210, 50%, 28%, 0.12) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-primary:active {
|
|
transform: translateY(0) !important;
|
|
box-shadow:
|
|
0 2px 10px hsla(210, 75%, 55%, 0.12),
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.15),
|
|
inset 0 1.5px 0 hsla(210, 50%, 28%, 0.12),
|
|
inset 0 -1.5px 0 hsla(0, 0%, 100%, 0.04) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-primary {
|
|
background: linear-gradient(145deg, hsl(210, 65%, 42%), hsl(210, 65%, 50%)) !important;
|
|
position: relative !important;
|
|
border: none !important;
|
|
box-shadow:
|
|
0 4px 16px hsla(210, 65%, 48%, 0.12),
|
|
0 2px 0 0 hsla(215, 20%, 65%, 0.06),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
|
|
inset 0 -1.5px 0 hsla(210, 50%, 30%, 0.18) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-primary:hover {
|
|
transform: translateY(-2px) !important;
|
|
box-shadow:
|
|
0 6px 24px hsla(210, 65%, 48%, 0.22),
|
|
0 2px 0 0 hsla(215, 20%, 65%, 0.06),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
|
|
inset 0 -1.5px 0 hsla(210, 50%, 30%, 0.18) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-primary:active {
|
|
transform: translateY(0) !important;
|
|
box-shadow:
|
|
0 2px 10px hsla(210, 65%, 48%, 0.1),
|
|
inset 0 1.5px 0 hsla(210, 50%, 30%, 0.1) !important;
|
|
}
|
|
|
|
/* ═══ BADGES ═════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .bg-secondary {
|
|
background: hsla(185, 70%, 45%, 0.04) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
border: 1px solid hsla(185, 70%, 45%, 0.06) !important;
|
|
color: hsl(185, 70%, 58%) !important;
|
|
box-shadow:
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.12),
|
|
inset 0 1px 0 hsla(185, 60%, 80%, 0.06),
|
|
inset 0 -1px 0 hsla(185, 50%, 20%, 0.06) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-accent {
|
|
background: hsla(35, 80%, 55%, 0.04) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
border: 1px solid hsla(35, 80%, 55%, 0.06) !important;
|
|
color: hsl(35, 80%, 62%) !important;
|
|
box-shadow:
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.12),
|
|
inset 0 1px 0 hsla(35, 70%, 80%, 0.06),
|
|
inset 0 -1px 0 hsla(35, 60%, 20%, 0.06) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .bg-destructive {
|
|
background: hsla(0, 75%, 50%, 0.04) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
border: 1px solid hsla(0, 75%, 50%, 0.06) !important;
|
|
color: hsl(0, 75%, 62%) !important;
|
|
box-shadow:
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.12),
|
|
inset 0 1px 0 hsla(0, 60%, 80%, 0.06),
|
|
inset 0 -1px 0 hsla(0, 60%, 20%, 0.06) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-secondary {
|
|
background: hsla(185, 65%, 38%, 0.03) !important;
|
|
border: 1px solid hsla(185, 65%, 38%, 0.06) !important;
|
|
color: hsl(185, 65%, 42%) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-accent {
|
|
background: hsla(35, 75%, 50%, 0.03) !important;
|
|
border: 1px solid hsla(35, 75%, 50%, 0.06) !important;
|
|
color: hsl(35, 75%, 48%) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-destructive {
|
|
background: hsla(0, 75%, 45%, 0.03) !important;
|
|
border: 1px solid hsla(0, 75%, 45%, 0.06) !important;
|
|
color: hsl(0, 75%, 50%) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-secondary,
|
|
.light.theme-luminous .bg-accent,
|
|
.light.theme-luminous .bg-destructive {
|
|
box-shadow:
|
|
0 1px 0 0 hsla(210, 15%, 70%, 0.05),
|
|
inset 0 1px 0 hsla(0, 0%, 100%, 0.25),
|
|
inset 0 -1px 0 hsla(210, 15%, 50%, 0.03) !important;
|
|
}
|
|
|
|
/* ═══ INPUTS ═════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous input,
|
|
.dark.theme-luminous textarea,
|
|
.dark.theme-luminous select {
|
|
background: hsla(218, 18%, 12%, 0.04) !important;
|
|
backdrop-filter: blur(6px) !important;
|
|
-webkit-backdrop-filter: blur(6px) !important;
|
|
border: 1.5px solid hsla(210, 30%, 50%, 0.035) !important;
|
|
transition: all 0.25s ease !important;
|
|
box-shadow:
|
|
inset 0 1.5px 0 hsla(210, 40%, 60%, 0.025),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.06),
|
|
0 1px 0 0 hsla(220, 40%, 2%, 0.12) !important;
|
|
}
|
|
|
|
.dark.theme-luminous input:focus,
|
|
.dark.theme-luminous textarea:focus,
|
|
.dark.theme-luminous select:focus {
|
|
background: hsla(218, 18%, 14%, 0.06) !important;
|
|
border-color: hsla(210, 75%, 55%, 0.1) !important;
|
|
box-shadow:
|
|
0 0 0 3px hsla(210, 75%, 55%, 0.035),
|
|
0 4px 12px hsla(220, 45%, 2%, 0.12),
|
|
inset 0 1.5px 0 hsla(210, 40%, 60%, 0.025),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.06) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.light.theme-luminous input,
|
|
.light.theme-luminous textarea,
|
|
.light.theme-luminous select {
|
|
background: hsla(0, 0%, 100%, 0.08) !important;
|
|
backdrop-filter: blur(6px) !important;
|
|
-webkit-backdrop-filter: blur(6px) !important;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.15) !important;
|
|
transition: all 0.25s ease !important;
|
|
box-shadow:
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
|
|
inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.025) !important;
|
|
}
|
|
|
|
.light.theme-luminous input:focus,
|
|
.light.theme-luminous textarea:focus,
|
|
.light.theme-luminous select:focus {
|
|
background: hsla(0, 0%, 100%, 0.15) !important;
|
|
border-color: hsla(210, 65%, 48%, 0.1) !important;
|
|
box-shadow:
|
|
0 0 0 3px hsla(210, 65%, 48%, 0.035),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.2),
|
|
inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.025) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* ═══ MISC ════════════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .bg-muted {
|
|
background: hsla(218, 18%, 12%, 0.04) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
border: 1px solid hsla(210, 20%, 40%, 0.025) !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-muted {
|
|
background: hsla(0, 0%, 100%, 0.06) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .border-border { border-color: hsla(210, 30%, 50%, 0.035) !important; }
|
|
.light.theme-luminous .border-border { border-color: hsla(210, 18%, 78%, 0.05) !important; }
|
|
.dark.theme-luminous .bg-background { background: transparent !important; }
|
|
.light.theme-luminous .bg-background { background: transparent !important; }
|
|
|
|
.dark.theme-luminous ::selection { background: hsla(210, 75%, 55%, 0.15); color: hsl(0, 0%, 100%); }
|
|
.light.theme-luminous ::selection { background: hsla(210, 65%, 48%, 0.08); color: hsl(0, 0%, 0%); }
|
|
|
|
.dark.theme-luminous input::placeholder,
|
|
.dark.theme-luminous textarea::placeholder { color: hsl(218, 10%, 42%); }
|
|
|
|
.light.theme-luminous input::placeholder,
|
|
.light.theme-luminous textarea::placeholder { color: hsl(210, 12%, 55%); }
|
|
|
|
/* ═══ HEADINGS / TEXT ═══════════════════════════════════ */
|
|
|
|
.dark.theme-luminous .text-glow {
|
|
text-shadow: 0 0 12px hsl(210, 75%, 55%), 0 0 30px hsla(210, 75%, 55%, 0.3), 0 0 60px hsla(210, 75%, 55%, 0.12);
|
|
}
|
|
|
|
.dark.theme-luminous h1,
|
|
.dark.theme-luminous h2,
|
|
.dark.theme-luminous h3,
|
|
.dark.theme-luminous .page-header-title {
|
|
background: linear-gradient(135deg, hsl(210, 75%, 62%), hsl(185, 70%, 50%));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.dark.theme-luminous .stat-card-value { color: hsl(210, 70%, 62%); }
|
|
|
|
.dark.theme-luminous .growth-word,
|
|
.light.theme-luminous .growth-word {
|
|
-webkit-text-fill-color: #1BB0CE !important;
|
|
color: #1BB0CE !important;
|
|
background: none !important;
|
|
}
|
|
|
|
.dark.theme-luminous a { color: hsl(210, 70%, 62%); transition: color 0.2s ease, text-shadow 0.2s ease; }
|
|
.dark.theme-luminous a:hover { color: hsl(35, 80%, 60%); text-shadow: 0 0 8px hsla(35, 80%, 55%, 0.2); }
|
|
|
|
.dark.theme-luminous blockquote {
|
|
border-left: 3px solid hsla(210, 75%, 55%, 0.3);
|
|
background: hsla(210, 50%, 30%, 0.03);
|
|
backdrop-filter: blur(6px);
|
|
color: hsl(210, 15%, 68%);
|
|
}
|
|
|
|
.dark.theme-luminous code {
|
|
color: hsl(185, 70%, 58%);
|
|
background: hsla(218, 20%, 12%, 0.35);
|
|
border: 1px solid hsla(218, 20%, 22%, 0.08);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.dark.theme-luminous pre {
|
|
background: hsla(218, 20%, 7%, 0.35);
|
|
border: 1px solid hsla(218, 20%, 20%, 0.06);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.dark.theme-luminous hr { border-color: hsla(218, 20%, 20%, 0.15); }
|
|
.dark.theme-luminous table th { color: hsl(210, 70%, 62%); }
|
|
.dark.theme-luminous table td { border-color: hsla(218, 20%, 20%, 0.08); }
|
|
.dark.theme-luminous .badge { color: hsl(210, 70%, 62%); }
|
|
|
|
.light.theme-luminous h1,
|
|
.light.theme-luminous h2,
|
|
.light.theme-luminous h3,
|
|
.light.theme-luminous .page-header-title,
|
|
.light.theme-luminous .stat-card-value { color: hsl(210, 65%, 48%); }
|
|
|
|
/* ── Misc card gradient bars ── */
|
|
.dark.theme-luminous .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(210, 75%, 55%), hsl(210, 75%, 72%), hsl(210, 75%, 55%)) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .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(185, 70%, 45%), hsl(185, 70%, 62%), hsl(185, 70%, 45%)) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 { background: hsla(210, 75%, 55%, 0.06) !important; }
|
|
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 { background: hsla(185, 70%, 45%, 0.06) !important; }
|
|
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg { color: hsl(210, 75%, 55%) !important; }
|
|
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg { color: hsl(185, 70%, 45%) !important; }
|
|
.dark.theme-luminous .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(210, 75%, 55%, 0.18), transparent) !important; }
|
|
.dark.theme-luminous .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(185, 70%, 45%, 0.18), transparent) !important; }
|
|
.dark.theme-luminous .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r { background: linear-gradient(to right, hsl(210, 75%, 55%), hsl(185, 70%, 45%)) !important; }
|
|
|
|
.light.theme-luminous .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(210, 65%, 48%), hsl(210, 65%, 62%), hsl(210, 65%, 48%)) !important;
|
|
}
|
|
|
|
.light.theme-luminous .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(185, 65%, 38%), hsl(185, 65%, 54%), hsl(185, 65%, 38%)) !important;
|
|
}
|
|
|
|
/* ═══ DROPDOWN / MENU ════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous [data-radix-popper-content-wrapper] > div,
|
|
.dark.theme-luminous [role="listbox"],
|
|
.dark.theme-luminous [role="menu"] {
|
|
background: hsla(218, 30%, 10%, 0.08) !important;
|
|
backdrop-filter: blur(14px) !important;
|
|
-webkit-backdrop-filter: blur(14px) !important;
|
|
border: 1.5px solid hsla(210, 40%, 55%, 0.05) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 40%, 60%, 0.015),
|
|
0 4px 0 0 hsla(220, 40%, 2%, 0.2),
|
|
0 8px 36px hsla(220, 45%, 2%, 0.3),
|
|
inset 0 1.5px 0 hsla(210, 50%, 70%, 0.05),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.12) !important;
|
|
}
|
|
|
|
.dark.theme-luminous [data-radix-popper-content-wrapper] > div > *,
|
|
.dark.theme-luminous [role="listbox"] > *,
|
|
.dark.theme-luminous [role="menu"] > * { position: relative !important; z-index: 1 !important; }
|
|
|
|
.dark.theme-luminous [role="menuitem"],
|
|
.dark.theme-luminous [role="option"] { transition: all 0.15s ease !important; }
|
|
|
|
.dark.theme-luminous [role="menuitem"]:hover,
|
|
.dark.theme-luminous [role="option"]:hover {
|
|
background: hsla(210, 65%, 50%, 0.035) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
}
|
|
|
|
/* ═══ SCROLLBAR ══════════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous ::-webkit-scrollbar-track {
|
|
background: hsla(218, 20%, 8%, 0.08) !important;
|
|
border: 1px solid hsla(210, 30%, 40%, 0.015) !important;
|
|
}
|
|
|
|
.dark.theme-luminous ::-webkit-scrollbar-thumb {
|
|
background: hsla(210, 50%, 50%, 0.08) !important;
|
|
border-radius: 8px !important;
|
|
border: 2px solid transparent !important;
|
|
background-clip: content-box !important;
|
|
}
|
|
|
|
.dark.theme-luminous ::-webkit-scrollbar-thumb:hover {
|
|
background: hsla(210, 50%, 55%, 0.14) !important;
|
|
background-clip: content-box !important;
|
|
}
|
|
|
|
.light.theme-luminous ::-webkit-scrollbar-track { background: hsla(210, 15%, 78%, 0.06) !important; }
|
|
.light.theme-luminous ::-webkit-scrollbar-thumb {
|
|
background: hsla(0, 0%, 100%, 0.15) !important;
|
|
border-radius: 8px !important;
|
|
border: 2px solid transparent !important;
|
|
background-clip: content-box !important;
|
|
}
|
|
|
|
/* ═══ DIALOG / MODAL ════════════════════════════════════ */
|
|
|
|
.dark.theme-luminous [role="dialog"] > div {
|
|
background: hsla(218, 30%, 8%, 0.06) !important;
|
|
backdrop-filter: blur(16px) !important;
|
|
-webkit-backdrop-filter: blur(16px) !important;
|
|
border: 1.5px solid hsla(210, 50%, 65%, 0.06) !important;
|
|
box-shadow:
|
|
0 0 0 1px hsla(210, 50%, 65%, 0.025),
|
|
0 8px 0 0 hsla(220, 40%, 2%, 0.25),
|
|
0 16px 55px hsla(220, 45%, 2%, 0.35),
|
|
inset 0 1.5px 0 hsla(210, 60%, 80%, 0.06),
|
|
inset 0 -1.5px 0 hsla(220, 50%, 0%, 0.15) !important;
|
|
}
|
|
|
|
.light.theme-luminous [role="dialog"] > div {
|
|
background: hsla(0, 0%, 100%, 0.07) !important;
|
|
backdrop-filter: blur(16px) !important;
|
|
-webkit-backdrop-filter: blur(16px) !important;
|
|
border: 1.5px solid hsla(0, 0%, 100%, 0.25) !important;
|
|
box-shadow:
|
|
0 8px 0 0 hsla(210, 15%, 70%, 0.05),
|
|
0 16px 60px hsla(210, 20%, 55%, 0.035),
|
|
inset 0 1.5px 0 hsla(0, 0%, 100%, 0.35),
|
|
inset 0 -1.5px 0 hsla(210, 15%, 50%, 0.03) !important;
|
|
}
|
|
|
|
.dark.theme-luminous .fixed.inset-0.bg-black\/80 {
|
|
background: hsla(220, 32%, 3%, 0.35) !important;
|
|
backdrop-filter: blur(3px) !important;
|
|
-webkit-backdrop-filter: blur(3px) !important;
|
|
}
|
|
|
|
/* ═══ ACCESSIBILITY — Reduced Motion ═════════════════════ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dark.theme-luminous body::after,
|
|
.dark.theme-luminous .min-h-screen.bg-background::after,
|
|
.dark.theme-luminous .min-h-screen > .flex.h-full::before,
|
|
.dark.theme-luminous header + main::before,
|
|
.dark.theme-luminous nav + main::before,
|
|
.dark.theme-luminous .min-h-screen > .flex.h-full::after,
|
|
.dark.theme-luminous header + *::before,
|
|
.dark.theme-luminous nav + *::before,
|
|
.dark.theme-luminous .fixed + main::before,
|
|
.dark.theme-luminous .min-h-screen > .flex > .flex-1::before,
|
|
.dark.theme-luminous .fixed.inset-0.z-\[-1\]::before,
|
|
.dark.theme-luminous .fixed.inset-0.z-\[-1\]::after,
|
|
.light.theme-luminous body::after,
|
|
.light.theme-luminous .min-h-screen.bg-background::after,
|
|
.light.theme-luminous .min-h-screen > .flex.h-full::before,
|
|
.light.theme-luminous header + main::before,
|
|
.light.theme-luminous nav + main::before,
|
|
.light.theme-luminous .min-h-screen > .flex.h-full::after,
|
|
.light.theme-luminous header + *::before,
|
|
.light.theme-luminous nav + *::before,
|
|
.light.theme-luminous .fixed + main::before,
|
|
.light.theme-luminous .min-h-screen > .flex > .flex-1::before,
|
|
.light.theme-luminous .fixed.inset-0.z-\[-1\]::before,
|
|
.light.theme-luminous .fixed.inset-0.z-\[-1\]::after {
|
|
animation: none !important;
|
|
}
|
|
|
|
.light.theme-luminous .bg-card:hover::before,
|
|
.light.theme-luminous .bg-popover:hover::before,
|
|
.dark.theme-luminous .bg-card:hover::before,
|
|
.dark.theme-luminous .bg-popover:hover::before {
|
|
animation: none !important;
|
|
}
|
|
}
|