Spaces:
Running
Running
File size: 2,672 Bytes
7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b 911f32b 7a7972b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | @import "tailwindcss";
/* Theme tokens */
@theme {
--color-background: #030305;
--color-foreground: #E2E8F0;
--color-card: rgba(15, 23, 42, 0.4);
--color-card-border: rgba(255, 255, 255, 0.08);
--color-primary: #00F4FF;
/* Neon Cyan */
--color-secondary: #8B5CF6;
/* Electric Violet */
--color-accent: #FF00E6;
/* Magenta Glow */
--color-muted: #64748B;
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--animate-aurora: aurora 10s infinite linear;
--animate-pulse-glow: pulse-glow 2s infinite ease-in-out;
}
/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
body {
background-color: var(--color-background);
color: var(--color-foreground);
font-family: var(--font-body);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Background Aurora Effect */
.bg-aurora {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
background:
radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(0, 244, 255, 0.1) 0%, transparent 40%),
radial-gradient(ellipse at 50% 50%, rgba(3, 3, 5, 1) 20%, transparent 100%);
filter: blur(80px);
}
/* Grain Overly for Texture */
.bg-grain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.03;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacit='1'/%3E%3C/svg%3E");
}
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Utilities */
.glass {
background: rgba(20, 20, 30, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.text-display {
font-family: var(--font-display);
}
.text-glow {
text-shadow: 0 0 20px rgba(0, 244, 255, 0.5);
}
@keyframes pulse-glow {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
} |