| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| @layer base { |
| :root { |
| --background: 260 87% 3%; |
| --foreground: 40 6% 95%; |
| --primary: 121 95% 76%; |
| --primary-foreground: 0 0% 5%; |
| --secondary: 240 4% 16%; |
| --border: 240 4% 20%; |
| --hero-heading: 40 10% 96%; |
| --hero-sub: 40 6% 82%; |
| --card: 240 6% 9%; |
| --muted: 240 4% 16%; |
| --muted-foreground: 240 5% 65%; |
| --radius: 0.75rem; |
| } |
|
|
| * { |
| border-color: hsl(var(--border)); |
| } |
|
|
| body { |
| background-color: hsl(var(--background)); |
| color: hsl(var(--foreground)); |
| font-family: 'Geist Sans', 'Inter', system-ui, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: hsl(var(--muted)); |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: hsl(var(--muted-foreground)); |
| } |
| } |
|
|
| @layer utilities { |
| .liquid-glass { |
| background: rgba(255, 255, 255, 0.01); |
| background-blend-mode: luminosity; |
| backdrop-filter: blur(4px); |
| -webkit-backdrop-filter: blur(4px); |
| border: none; |
| box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .liquid-glass::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: inherit; |
| padding: 1.4px; |
| background: linear-gradient( |
| 180deg, |
| rgba(255, 255, 255, 0.45) 0%, |
| rgba(255, 255, 255, 0.15) 20%, |
| rgba(255, 255, 255, 0) 40%, |
| rgba(255, 255, 255, 0) 60%, |
| rgba(255, 255, 255, 0.15) 80%, |
| rgba(255, 255, 255, 0.45) 100% |
| ); |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| -webkit-mask-composite: xor; |
| mask-composite: exclude; |
| pointer-events: none; |
| } |
|
|
| .text-gradient-primary { |
| background: linear-gradient(to right, hsl(var(--primary)), hsl(121 80% 60%)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| } |
|
|
| |
| .xterm { |
| padding: 8px; |
| } |
| .xterm-viewport::-webkit-scrollbar { |
| width: 8px; |
| } |
| .xterm-viewport::-webkit-scrollbar-thumb { |
| background: hsl(var(--muted)); |
| border-radius: 4px; |
| } |
|
|
