232 lines
4.7 KiB
CSS
232 lines
4.7 KiB
CSS
/* === PREMIUM VISUAL ENHANCEMENTS === */
|
|
|
|
/* Neon Glow Effects */
|
|
.neon-glow-cyan {
|
|
box-shadow:
|
|
0 0 10px rgba(102, 252, 241, 0.3),
|
|
0 0 20px rgba(102, 252, 241, 0.2),
|
|
0 0 30px rgba(102, 252, 241, 0.1);
|
|
}
|
|
|
|
.neon-glow-magenta {
|
|
box-shadow:
|
|
0 0 10px rgba(255, 0, 255, 0.3),
|
|
0 0 20px rgba(255, 0, 255, 0.2),
|
|
0 0 30px rgba(255, 0, 255, 0.1);
|
|
}
|
|
|
|
/* Premium Gradients */
|
|
.gradient-cyber {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(102, 252, 241, 0.1) 0%,
|
|
rgba(138, 126, 164, 0.1) 100%
|
|
);
|
|
}
|
|
|
|
.gradient-ocean {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(14, 165, 233, 0.1) 0%,
|
|
rgba(6, 182, 212, 0.1) 100%
|
|
);
|
|
}
|
|
|
|
.gradient-forest {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(34, 197, 94, 0.1) 0%,
|
|
rgba(132, 204, 22, 0.1) 100%
|
|
);
|
|
}
|
|
|
|
.gradient-sunset {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(249, 115, 22, 0.1) 0%,
|
|
rgba(168, 85, 247, 0.1) 100%
|
|
);
|
|
}
|
|
|
|
/* Enhanced Borders */
|
|
.border-glow {
|
|
border: 1px solid rgba(102, 252, 241, 0.3);
|
|
box-shadow:
|
|
0 0 10px rgba(102, 252, 241, 0.1),
|
|
inset 0 0 10px rgba(102, 252, 241, 0.05);
|
|
}
|
|
|
|
.light .border-glow {
|
|
border: 1px solid rgba(0, 180, 216, 0.4);
|
|
box-shadow:
|
|
0 0 10px rgba(0, 180, 216, 0.1),
|
|
inset 0 0 10px rgba(0, 180, 216, 0.05);
|
|
}
|
|
|
|
/* Premium Shadows */
|
|
.shadow-premium {
|
|
box-shadow:
|
|
0 10px 40px rgba(0, 0, 0, 0.3),
|
|
0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.light .shadow-premium {
|
|
box-shadow:
|
|
0 10px 40px rgba(0, 0, 0, 0.1),
|
|
0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Depth Effects */
|
|
.depth-1 {
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.1),
|
|
0 1px 2px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.depth-2 {
|
|
box-shadow:
|
|
0 4px 8px rgba(0, 0, 0, 0.15),
|
|
0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.depth-3 {
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.2),
|
|
0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Frosted Glass Variants */
|
|
.glass-strong {
|
|
background: rgba(var(--kodo-void), 0.7);
|
|
backdrop-filter: blur(30px) saturate(200%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.light .glass-strong {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(30px) saturate(200%);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.glass-subtle {
|
|
background: rgba(var(--kodo-void), 0.3);
|
|
backdrop-filter: blur(15px) saturate(150%);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.light .glass-subtle {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(15px) saturate(150%);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Interactive States */
|
|
.interactive {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.interactive:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 12px 24px rgba(0, 0, 0, 0.2),
|
|
0 0 20px rgba(102, 252, 241, 0.1);
|
|
}
|
|
|
|
.interactive:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Text Effects */
|
|
.text-glow {
|
|
text-shadow:
|
|
0 0 10px rgba(102, 252, 241, 0.5),
|
|
0 0 20px rgba(102, 252, 241, 0.3);
|
|
}
|
|
|
|
.text-shadow-soft {
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.light .text-shadow-soft {
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Premium Buttons */
|
|
.btn-premium {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgb(var(--kodo-cyan)),
|
|
rgb(var(--kodo-cyan-dim))
|
|
);
|
|
box-shadow:
|
|
0 4px 12px rgba(var(--kodo-cyan), 0.3),
|
|
0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-premium::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.3),
|
|
transparent
|
|
);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.btn-premium:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-premium:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 6px 16px rgba(var(--kodo-cyan), 0.4),
|
|
0 3px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Card Enhancements */
|
|
.card-premium {
|
|
background: rgba(var(--kodo-graphite), 0.5);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-premium:hover {
|
|
border-color: rgba(102, 252, 241, 0.3);
|
|
box-shadow:
|
|
0 12px 40px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(102, 252, 241, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.light .card-premium {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.light .card-premium:hover {
|
|
border-color: rgba(0, 180, 216, 0.4);
|
|
box-shadow:
|
|
0 12px 40px rgba(0, 0, 0, 0.12),
|
|
0 0 20px rgba(0, 180, 216, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|