| @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:wght@100..900&family=Newsreader:ital,wght@0,200..800;1,200..800&display=swap'); |
|
|
| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| :root { |
| --background: 0 0% 0%; |
| --foreground: 0 0% 96%; |
| |
| --card: 0 0% 5%; |
| --card-foreground: 0 0% 96%; |
| |
| --popover: 0 0% 5%; |
| --popover-foreground: 0 0% 96%; |
| |
| --primary: 0 0% 100%; |
| --primary-foreground: 0 0% 0%; |
| |
| --secondary: 0 0% 8%; |
| --secondary-foreground: 0 0% 96%; |
| |
| --muted: 0 0% 10%; |
| --muted-foreground: 0 0% 45%; |
| |
| --accent: 0 0% 10%; |
| --accent-foreground: 0 0% 96%; |
| |
| --destructive: 0 62% 30%; |
| --destructive-foreground: 0 0% 98%; |
|
|
| --border: 0 0% 14%; |
| --input: 0 0% 14%; |
| --ring: 0 0% 60%; |
| |
| --radius: 6px; |
|
|
| --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; |
| --font-serif: 'Newsreader', Georgia, serif; |
| --font-mono: 'Geist Mono', 'SF Mono', 'Menlo', monospace; |
| } |
|
|
| .dark { |
| --background: 0 0% 0%; |
| --foreground: 0 0% 96%; |
| |
| --card: 0 0% 5%; |
| --card-foreground: 0 0% 96%; |
| |
| --popover: 0 0% 5%; |
| --popover-foreground: 0 0% 96%; |
| |
| --primary: 0 0% 100%; |
| --primary-foreground: 0 0% 0%; |
| |
| --secondary: 0 0% 8%; |
| --secondary-foreground: 0 0% 96%; |
| |
| --muted: 0 0% 10%; |
| --muted-foreground: 0 0% 45%; |
| |
| --accent: 0 0% 10%; |
| --accent-foreground: 0 0% 96%; |
| |
| --destructive: 0 62% 30%; |
| --destructive-foreground: 0 0% 98%; |
| |
| --border: 0 0% 14%; |
| --input: 0 0% 14%; |
| --ring: 0 0% 60%; |
| } |
|
|
| @layer base { |
| * { |
| @apply border-border; |
| } |
| body { |
| @apply bg-background text-foreground antialiased font-sans selection:bg-primary selection:text-primary-foreground; |
| } |
| h1, h2, h3, h4, h5, h6 { |
| @apply font-serif tracking-tight; |
| } |
| } |
|
|
| @layer utilities { |
| .font-mono { |
| font-family: var(--font-mono); |
| } |
| .font-serif { |
| font-family: var(--font-serif); |
| } |
| |
| |
| .scanlines { |
| background: linear-gradient( |
| to bottom, |
| rgba(255,255,255,0), |
| rgba(255,255,255,0) 50%, |
| rgba(0,0,0,0.02) 50%, |
| rgba(0,0,0,0.02) |
| ); |
| background-size: 100% 4px; |
| pointer-events: none; |
| } |
|
|
| |
| .noise { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100vw; |
| height: 100vh; |
| pointer-events: none; |
| z-index: 50; |
| opacity: 0.03; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); |
| } |
| |
| |
| @keyframes flicker { |
| 0% { opacity: 0.97; } |
| 5% { opacity: 0.95; } |
| 10% { opacity: 0.9; } |
| 15% { opacity: 0.95; } |
| 20% { opacity: 0.99; } |
| 50% { opacity: 0.95; } |
| 55% { opacity: 0.9; } |
| 60% { opacity: 0.99; } |
| 100% { opacity: 0.97; } |
| } |
| |
| .animate-flicker { |
| animation: flicker 4s infinite; |
| } |
| |
| |
| @keyframes fadeUp { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-up { |
| animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; |
| } |
|
|
| @keyframes orbDrift { |
| 0% { transform: translate(0, 0) scale(1); } |
| 33% { transform: translate(30px, -20px) scale(1.05); } |
| 66% { transform: translate(-20px, 15px) scale(0.95); } |
| 100% { transform: translate(0, 0) scale(1); } |
| } |
|
|
| .orb-drift { |
| animation: orbDrift 20s ease-in-out infinite; |
| } |
|
|
| .orb-drift-delayed { |
| animation: orbDrift 25s ease-in-out infinite; |
| animation-delay: -8s; |
| } |
|
|
| @keyframes orbPulse { |
| 0% { transform: translate(0, 0) scale(1.1); } |
| 25% { transform: translate(15px, -10px) scale(1.18); } |
| 50% { transform: translate(-10px, 8px) scale(1.05); } |
| 75% { transform: translate(8px, -15px) scale(1.15); } |
| 100% { transform: translate(0, 0) scale(1.1); } |
| } |
|
|
| .orb-pulse { |
| animation: orbPulse 4s ease-in-out infinite; |
| } |
|
|
| .orb-pulse-delayed { |
| animation: orbPulse 5s ease-in-out infinite; |
| animation-delay: -2s; |
| } |
|
|
| @keyframes pulseRing { |
| 0%, 100% { opacity: 0.4; transform: scale(1); } |
| 50% { opacity: 0.8; transform: scale(1.08); } |
| } |
|
|
| .pulse-ring { |
| animation: pulseRing 2s ease-in-out infinite; |
| } |
|
|
| .hero-glow { |
| text-shadow: 0 0 30px rgba(52,211,153,0.15), 0 0 60px rgba(52,211,153,0.05); |
| } |
|
|
| @keyframes goPulse { |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } |
| 50% { box-shadow: 0 0 20px 4px rgba(255,255,255,0.15); } |
| } |
|
|
| .go-pulse { |
| animation: goPulse 1.5s ease-in-out infinite; |
| } |
|
|
| .typed-cursor { |
| font-weight: 100; |
| color: rgba(255, 255, 255, 0.7); |
| font-size: inherit; |
| line-height: inherit; |
| } |
|
|
| @keyframes blinkCursor { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
|
|
| .blink-cursor { |
| animation: blinkCursor 1s step-end infinite; |
| } |
|
|
| .metallic-text { |
| background: linear-gradient( |
| 135deg, |
| #e8e8e8 0%, |
| #ffffff 15%, |
| #a0a0a0 30%, |
| #ffffff 50%, |
| #b0b0b0 65%, |
| #ffffff 80%, |
| #c0c0c0 100% |
| ); |
| background-size: 200% 200%; |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: metallicPulse 3s ease-in-out infinite; |
| } |
|
|
| @keyframes metallicPulse { |
| 0% { background-position: 0% 50%; filter: brightness(1); } |
| 25% { background-position: 50% 0%; filter: brightness(1.15); } |
| 50% { background-position: 100% 50%; filter: brightness(1.3); } |
| 75% { background-position: 50% 100%; filter: brightness(1.15); } |
| 100% { background-position: 0% 50%; filter: brightness(1); } |
| } |
|
|
| .page-sparkle { |
| position: absolute; |
| background: white; |
| border-radius: 50%; |
| pointer-events: none; |
| box-shadow: 0 0 6px 2px rgba(255,255,255,0.4); |
| animation: pageSparkle var(--duration, 1.5s) ease-in-out forwards; |
| } |
|
|
| @keyframes pageSparkle { |
| 0% { opacity: 0; transform: scale(0) rotate(0deg); } |
| 30% { opacity: var(--sparkle-opacity, 0.5); transform: scale(1.2) rotate(90deg); } |
| 70% { opacity: var(--sparkle-opacity, 0.5); transform: scale(0.8) rotate(180deg); } |
| 100% { opacity: 0; transform: scale(0) rotate(270deg); } |
| } |
| } |
|
|
