114 lines
2.4 KiB
CSS
114 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #050505;
|
|
--foreground: #ededed;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--color-emerald-400: #34d399;
|
|
--color-emerald-500: #10b981;
|
|
--color-emerald-600: #059669;
|
|
--color-emerald-900: #064e3b;
|
|
--color-emerald-950: #022c22;
|
|
--color-zinc-400: #a1a1aa;
|
|
--color-zinc-500: #71717a;
|
|
--color-zinc-600: #52525b;
|
|
--color-zinc-700: #3f3f46;
|
|
--color-zinc-800: #27272a;
|
|
--color-zinc-900: #18181b;
|
|
--color-zinc-950: #09090b;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
/* Glow effects */
|
|
.glow-green {
|
|
box-shadow: 0 0 60px rgba(16, 185, 129, 0.15), 0 0 120px rgba(16, 185, 129, 0.05);
|
|
}
|
|
|
|
.glow-green-sm {
|
|
box-shadow: 0 0 30px rgba(16, 185, 129, 0.1);
|
|
}
|
|
|
|
/* Grid background pattern */
|
|
.bg-grid {
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
}
|
|
|
|
/* Gradient text */
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Animated terminal cursor */
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
.cursor-blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
/* Fade-in on scroll (CSS-only progressive enhancement) */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out both;
|
|
}
|
|
|
|
/* Staggered delays */
|
|
.delay-100 { animation-delay: 0.1s; }
|
|
.delay-200 { animation-delay: 0.2s; }
|
|
.delay-300 { animation-delay: 0.3s; }
|
|
.delay-400 { animation-delay: 0.4s; }
|
|
.delay-500 { animation-delay: 0.5s; }
|
|
.delay-600 { animation-delay: 0.6s; }
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #27272a;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3f3f46;
|
|
}
|
|
|
|
/* Code block scrollbar */
|
|
pre::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
|
|
/* Smooth scroll */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|