154 lines
3.2 KiB
CSS
154 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--foreground: 255 255 255;
|
|
--background: 8 10 24;
|
|
--accent: 139 92 246;
|
|
--soft: 226 232 240;
|
|
--glow: 148 163 184;
|
|
--font-body: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
|
|
--font-heading: var(--font-heading, 'Dela Gothic One', system-ui, sans-serif);
|
|
--font-data: var(--font-data, 'JetBrains Mono', monospace);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
color: rgb(var(--foreground));
|
|
background: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.25), transparent 50%),
|
|
radial-gradient(circle at 80% 10%, rgba(239, 68, 68, 0.25), transparent 60%),
|
|
rgb(var(--background));
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.font-heading {
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
.font-data {
|
|
font-family: var(--font-data);
|
|
}
|
|
|
|
.hero-prism {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.hero-prism::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -60px auto auto -40px;
|
|
width: 320px;
|
|
height: 320px;
|
|
border-radius: 999px;
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 70%);
|
|
filter: blur(30px);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.module-card {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 28px;
|
|
padding: 1.5rem;
|
|
backdrop-filter: blur(14px);
|
|
box-shadow: 0 25px 40px rgba(2, 6, 23, 0.7);
|
|
transition: transform 0.4s ease, border-color 0.4s ease;
|
|
}
|
|
|
|
.module-card:hover {
|
|
border-color: rgba(139, 92, 246, 0.7);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.floating-ring {
|
|
position: absolute;
|
|
width: 420px;
|
|
height: 420px;
|
|
border-radius: 999px;
|
|
background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
|
|
filter: blur(30px);
|
|
opacity: 0.35;
|
|
top: -120px;
|
|
right: 20%;
|
|
animation: orbitRing 10s ease-in-out infinite;
|
|
}
|
|
|
|
.floating-ring--secondary {
|
|
width: 320px;
|
|
height: 320px;
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 65%);
|
|
top: 200px;
|
|
left: 10%;
|
|
animation-duration: 12s;
|
|
}
|
|
|
|
.shimmer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shimmer::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
|
|
animation: shimmer 1.6s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-110%);
|
|
}
|
|
100% {
|
|
transform: translateX(110%);
|
|
}
|
|
}
|
|
|
|
.skeleton {
|
|
height: 20px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skeleton::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
|
|
animation: shimmer 1.4s infinite;
|
|
}
|
|
|
|
.svg-prism {
|
|
width: 90px;
|
|
height: 90px;
|
|
filter: drop-shadow(0 15px 40px rgba(234, 179, 8, 0.35));
|
|
animation: rotatePrism 14s linear infinite;
|
|
}
|
|
|
|
@keyframes rotatePrism {
|
|
from {
|
|
transform: rotateY(0deg) rotateZ(0deg);
|
|
}
|
|
to {
|
|
transform: rotateY(360deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes orbitRing {
|
|
0% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 0.35;
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) scale(1.05);
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 0.35;
|
|
}
|
|
}
|