236 lines
6.4 KiB
CSS
236 lines
6.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 217.2 91.2% 59.8%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 224.3 76.3% 48%;
|
|
--radius: 0.5rem;
|
|
--bg-color: hsl(var(--background));
|
|
--text-primary: hsl(var(--foreground));
|
|
--text-secondary: hsl(var(--muted-foreground));
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
background-color: var(--bg-color);
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground font-sans antialiased selection:bg-primary/30 selection:text-white;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.glass {
|
|
@apply bg-white/5 backdrop-blur-md border border-white/10 shadow-xl;
|
|
}
|
|
|
|
.glass-card {
|
|
@apply bg-surface/50 backdrop-blur-lg border border-white/5 rounded-2xl hover:border-white/10 transition-colors duration-300;
|
|
}
|
|
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400;
|
|
}
|
|
|
|
.text-shimmer {
|
|
background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 25%, #22d3ee 50%, #a78bfa 75%, #60a5fa 100%);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: text-shimmer-move 4s linear infinite;
|
|
}
|
|
|
|
.bg-grid-pattern {
|
|
background-image:
|
|
linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
}
|
|
|
|
.glow-effect::before {
|
|
content: '';
|
|
@apply absolute inset-0 -z-10 bg-primary/20 blur-2xl rounded-full opacity-0 transition-opacity duration-300;
|
|
}
|
|
.glow-effect:hover::before { @apply opacity-100; }
|
|
|
|
.text-glow {
|
|
text-shadow:
|
|
0 0 20px rgba(99, 130, 246, 0.5),
|
|
0 0 60px rgba(99, 130, 246, 0.25),
|
|
0 0 100px rgba(99, 130, 246, 0.1);
|
|
}
|
|
|
|
.pulse-ring { position: relative; }
|
|
.pulse-ring::after {
|
|
content: '';
|
|
@apply absolute inset-0 rounded-full;
|
|
border: 1px solid rgba(99, 130, 246, 0.5);
|
|
animation: pulse-expand 2s ease-out infinite;
|
|
}
|
|
|
|
/* ── Premium Glassmorphism ── */
|
|
.glass-premium {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
box-shadow:
|
|
0 8px 32px 0 rgba(0,0,0,0.45),
|
|
inset 0 1px 0 rgba(255,255,255,0.10),
|
|
inset 0 -1px 0 rgba(0,0,0,0.20);
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.glass-premium:hover {
|
|
border-color: rgba(255,255,255,0.14);
|
|
box-shadow:
|
|
0 16px 48px 0 rgba(0,0,0,0.5),
|
|
inset 0 1px 0 rgba(255,255,255,0.15),
|
|
inset 0 -1px 0 rgba(0,0,0,0.20),
|
|
0 0 0 1px rgba(99,130,246,0.12);
|
|
}
|
|
|
|
/* Light refraction lines (top & left edge highlight) */
|
|
.glass-refract {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.glass-refract::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 35%, rgba(255,255,255,0.12) 70%, transparent 100%);
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.glass-refract::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; bottom: 0; left: 0;
|
|
width: 1px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Spotlight radial glow above element */
|
|
.spotlight {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
.spotlight::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -80px;
|
|
background: radial-gradient(circle at 50% -10%, rgba(99,130,246,0.18) 0%, transparent 55%);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* Shine sweep on hover */
|
|
.glass-shine {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.glass-shine::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%; left: -75%;
|
|
width: 50%; height: 200%;
|
|
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 100%);
|
|
transform: skewX(-20deg);
|
|
transition: left 0.65s ease;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
.glass-shine:hover::after { left: 125%; }
|
|
|
|
/* Section ambient orb helper */
|
|
.ambient-glow {
|
|
position: relative;
|
|
}
|
|
.ambient-glow::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -200px; left: -150px;
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/* ── Keyframes ── */
|
|
|
|
@keyframes text-shimmer-move {
|
|
0% { background-position: 0% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
|
|
@keyframes shimmer-sweep {
|
|
0% { transform: translateX(-100%) skewX(-12deg); }
|
|
100% { transform: translateX(200%) skewX(-12deg); }
|
|
}
|
|
|
|
@keyframes pulse-expand {
|
|
0% { transform: scale(1); opacity: 0.7; }
|
|
100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
|
|
@keyframes blob {
|
|
0% { transform: translate(0px, 0px) scale(1); }
|
|
33% { transform: translate(30px, -50px) scale(1.1); }
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
100% { transform: translate(0px, 0px) scale(1); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
0% { opacity: 0; transform: translateY(20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
@keyframes scan-line {
|
|
0% { top: -2px; opacity: 0.8; }
|
|
80% { opacity: 0.6; }
|
|
100% { top: 100%; opacity: 0; }
|
|
}
|