| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| @import "tailwindcss"; |
|
|
| @theme { |
| --color-surface: #0a0a0a; |
| --color-surface-dim: #050505; |
| --color-surface-bright: #1a1a1a; |
| --color-surface-container-lowest: #020202; |
| --color-surface-container-low: #0f0f0f; |
| --color-surface-container: #141414; |
| --color-surface-container-high: #1e1e1e; |
| --color-surface-container-highest: #282828; |
| --color-on-surface: #f2f2f2; |
| --color-on-surface-variant: #a3a3a3; |
| --color-outline: #404040; |
| --color-outline-variant: #262626; |
| --color-primary: #ffffff; |
| --color-on-primary: #000000; |
| |
| --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; |
| --font-display: "Space Grotesk", sans-serif; |
| --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; |
|
|
| --spacing-container-max: 1200px; |
| --spacing-section: 120px; |
| } |
|
|
| @layer base { |
| body { |
| @apply bg-surface text-on-surface font-sans antialiased selection:bg-primary/20 selection:text-primary; |
| background-image: radial-gradient(circle at 50% -20%, #1e1e1e 0%, transparent 50%); |
| } |
| } |
|
|
| .grid-background { |
| 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); |
| background-size: 40px 40px; |
| } |
|
|
| @media (hover: hover) and (pointer: fine) { |
| .noise-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 9999; |
| pointer-events: none; |
| opacity: 0.02; |
| background-image: url('https://www.transparenttextures.com/patterns/noise.png'); |
| } |
| } |
|
|
| .bento-card { |
| @apply bg-surface-container-low/40 border border-outline-variant transition-all duration-500 backdrop-blur-sm; |
| } |
|
|
| .bento-card:hover { |
| @apply border-outline/50 bg-surface-container-low/60 shadow-2xl; |
| } |
|
|
|
|
