97 lines
2.4 KiB
CSS
97 lines
2.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background: #0a0914;
|
|
color: #f1f5f9;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Animated gradient background */
|
|
.bg-fibe {
|
|
background: linear-gradient(135deg, #0f0c29 0%, #1a1540 30%, #302b63 60%, #24243e 100%);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 15s ease infinite;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* Grid overlay */
|
|
.grid-overlay {
|
|
background-image:
|
|
linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
}
|
|
|
|
/* Glassmorphism */
|
|
.glass {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.09);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255,255,255,0.07);
|
|
border: 1px solid rgba(167,139,250,0.2);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
}
|
|
|
|
/* Glow effects */
|
|
.glow-purple {
|
|
box-shadow: 0 0 60px rgba(167,139,250,0.15), 0 0 120px rgba(167,139,250,0.06);
|
|
}
|
|
|
|
.text-glow {
|
|
text-shadow: 0 0 40px rgba(167,139,250,0.4);
|
|
}
|
|
|
|
/* Accent */
|
|
.accent { color: #a78bfa; }
|
|
.accent-bg { background: #a78bfa; }
|
|
|
|
/* Gradient text */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #60a5fa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Subtle radial glows */
|
|
.glow-orb-1 {
|
|
position: absolute;
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
.glow-orb-2 {
|
|
position: absolute;
|
|
width: 400px; height: 400px;
|
|
background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #0f0c29; }
|
|
::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); }
|