/* Base Variables & Overrides */
:root {
color-scheme: dark;
}
body {
font-family: 'Inter', sans-serif;
background-color: #09090B;
color: #F4F4F5;
}
h1, h2, h3, h4, h5, h6, .font-display {
font-family: 'Syne', sans-serif;
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #09090B;
}
::-webkit-scrollbar-thumb {
background: #27272A;
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: #3F3F46;
}
/* Utilities */
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
}
.glass-panel {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.bg-grid {
background-size: 32px 32px;
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);
}
/* Animations */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float-delayed {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.animate-float-delayed { animation: float-delayed 6s ease-in-out infinite 2s; }
@keyframes float-delayed-more {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.animate-float-delayed-more { animation: float-delayed-more 6s ease-in-out infinite 4s; }
@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); }
}
.animate-blob { animation: blob 10s infinite alternate; }
.animation-delay-2000 { animation-delay: 2s; }
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
animation: marquee 30s linear infinite;
width: max-content;
}
/* Custom Form Elements */
.custom-checkbox input:checked + div {
background-color: #6366F1;
border-color: #6366F1;
}
.custom-checkbox input:checked + div iconify-icon {
opacity: 1;
transform: scale(1);
}