| 1 | @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap"); |
| 2 | @import "tailwindcss"; |
| 3 | |
| 4 | @custom-variant dark (&:where(.dark, .dark *)); |
| 5 | |
| 6 | @theme { |
| 7 | --font-family-display: "Manrope", sans-serif; |
| 8 | --font-family-sans: "Open Sans", sans-serif; |
| 9 | |
| 10 | --radius: 0.5rem; |
| 11 | --radius-lg: 0.75rem; |
| 12 | --radius-xl: 1rem; |
| 13 | |
| 14 | --color-background: var(--background); |
| 15 | --color-foreground: var(--foreground); |
| 16 | --color-card: var(--card); |
| 17 | --color-card-foreground: var(--card-foreground); |
| 18 | --color-popover: var(--popover); |
| 19 | --color-popover-foreground: var(--popover-foreground); |
| 20 | --color-primary: var(--primary); |
| 21 | --color-primary-foreground: var(--primary-foreground); |
| 22 | --color-secondary: var(--secondary); |
| 23 | --color-secondary-foreground: var(--secondary-foreground); |
| 24 | --color-muted: var(--muted); |
| 25 | --color-muted-foreground: var(--muted-foreground); |
| 26 | --color-accent: var(--accent); |
| 27 | --color-accent-foreground: var(--accent-foreground); |
| 28 | --color-destructive: var(--destructive); |
| 29 | --color-destructive-foreground: var(--destructive-foreground); |
| 30 | --color-border: var(--border); |
| 31 | --color-input: var(--input); |
| 32 | --color-ring: var(--ring); |
| 33 | --color-green-status: var(--green-status); |
| 34 | --color-text-muted: var(--text-muted); |
| 35 | } |
| 36 | |
| 37 | @layer base { |
| 38 | :root { |
| 39 | --background: oklch(97% 0.005 250); |
| 40 | --foreground: oklch(25% 0.02 250); |
| 41 | --card: oklch(100% 0 0); |
| 42 | --card-foreground: oklch(25% 0.02 250); |
| 43 | --popover: oklch(100% 0 0); |
| 44 | --popover-foreground: oklch(25% 0.02 250); |
| 45 | --primary: oklch(60% 0.11 195); |
| 46 | --primary-foreground: oklch(100% 0 0); |
| 47 | --secondary: oklch(92% 0.01 250); |
| 48 | --secondary-foreground: oklch(45% 0.02 250); |
| 49 | --muted: oklch(95% 0.005 250); |
| 50 | --muted-foreground: oklch(55% 0.03 250); |
| 51 | --accent: oklch(92% 0.01 250); |
| 52 | --accent-foreground: oklch(25% 0.02 250); |
| 53 | --destructive: oklch(55% 0.2 25); |
| 54 | --destructive-foreground: oklch(100% 0 0); |
| 55 | --border: oklch(90% 0.01 250); |
| 56 | --input: oklch(95% 0.005 250); |
| 57 | --ring: oklch(60% 0.11 195); |
| 58 | |
| 59 | --green-status: oklch(55% 0.16 150); |
| 60 | --text-muted: oklch(55% 0.03 250); |
| 61 | |
| 62 | --hero-grid-dot: oklch(60% 0.11 195 / 0.14); |
| 63 | --hero-terminal-bg: |
| 64 | linear-gradient(180deg, oklch(19% 0.005 250 / 0.98), oklch(15% 0.006 250 / 0.98)); |
| 65 | --hero-terminal-border: oklch(60% 0.11 195 / 0.22); |
| 66 | --hero-terminal-foreground: oklch(98% 0.01 0); |
| 67 | --hero-terminal-accent: var(--primary); |
| 68 | --hero-terminal-shadow: oklch(15% 0 0 / 0.12); |
| 69 | } |
| 70 | |
| 71 | .dark { |
| 72 | --background: oklch(15% 0 0); |
| 73 | --foreground: oklch(98% 0.01 0); |
| 74 | --card: oklch(20% 0 0); |
| 75 | --card-foreground: oklch(98% 0.01 0); |
| 76 | --popover: oklch(20% 0 0); |
| 77 | --popover-foreground: oklch(98% 0.01 0); |
| 78 | --primary: oklch(78% 0.1 195); |
| 79 | --primary-foreground: oklch(10% 0 0); |
| 80 | --secondary: oklch(25% 0.02 195); |
| 81 | --secondary-foreground: oklch(98% 0.01 0); |
| 82 | --muted: oklch(25% 0.01 0); |
| 83 | --muted-foreground: oklch(65% 0.02 0); |
| 84 | --accent: oklch(25% 0.03 195); |
| 85 | --accent-foreground: oklch(98% 0.01 0); |
| 86 | --destructive: oklch(62% 0.22 25); |
| 87 | --destructive-foreground: oklch(98% 0 0); |
| 88 | --border: oklch(100% 0 0 / 0.1); |
| 89 | --input: oklch(22% 0.01 0); |
| 90 | --ring: oklch(78% 0.1 195); |
| 91 | |
| 92 | --green-status: oklch(75% 0.16 150); |
| 93 | --text-muted: oklch(65% 0.02 0); |
| 94 | |
| 95 | --hero-grid-dot: oklch(78% 0.1 195 / 0.18); |
| 96 | --hero-terminal-bg: |
| 97 | linear-gradient(180deg, oklch(18% 0 0 / 0.9), oklch(12% 0.01 250 / 0.94)); |
| 98 | --hero-terminal-border: oklch(78% 0.1 195 / 0.28); |
| 99 | --hero-terminal-foreground: oklch(98% 0.01 0); |
| 100 | --hero-terminal-accent: var(--primary); |
| 101 | --hero-terminal-shadow: oklch(0% 0 0 / 0.28); |
| 102 | } |
| 103 | |
| 104 | * { |
| 105 | border-color: var(--border); |
| 106 | } |
| 107 | |
| 108 | html { |
| 109 | background-color: var(--background); |
| 110 | color-scheme: light; |
| 111 | } |
| 112 | |
| 113 | @media (prefers-reduced-motion: no-preference) { |
| 114 | html { |
| 115 | scroll-behavior: smooth; |
| 116 | } |
| 117 | } |
| 118 | |
| 119 | body { |
| 120 | min-height: 100vh; |
| 121 | background: |
| 122 | radial-gradient(circle at top center, oklch(75% 0.14 195 / 0.16), transparent 36%), |
| 123 | radial-gradient(circle at 12% 18%, oklch(60% 0.2 35 / 0.08), transparent 22%), |
| 124 | linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(97% 0.005 250) 54%, oklch(95% 0.005 250) 100%); |
| 125 | color: var(--foreground); |
| 126 | font-family: var(--font-family-sans); |
| 127 | } |
| 128 | |
| 129 | input, |
| 130 | textarea, |
| 131 | select { |
| 132 | font-family: var(--font-family-sans); |
| 133 | } |
| 134 | |
| 135 | .dark { |
| 136 | color-scheme: dark; |
| 137 | } |
| 138 | |
| 139 | .dark body { |
| 140 | background: |
| 141 | radial-gradient(circle at top center, oklch(80% 0.14 195 / 0.16), transparent 32%), |
| 142 | radial-gradient(circle at 82% 10%, oklch(55% 0.25 350 / 0.12), transparent 20%), |
| 143 | linear-gradient(180deg, oklch(16% 0 0) 0%, oklch(13% 0.01 250) 54%, oklch(11% 0.01 250) 100%); |
| 144 | } |
| 145 | |
| 146 | h1, |
| 147 | h2, |
| 148 | h3, |
| 149 | h4, |
| 150 | h5, |
| 151 | h6 { |
| 152 | font-family: var(--font-family-display); |
| 153 | letter-spacing: 0; |
| 154 | } |
| 155 | |
| 156 | button { |
| 157 | font-family: var(--font-family-display); |
| 158 | } |
| 159 | |
| 160 | a { |
| 161 | color: inherit; |
| 162 | } |
| 163 | } |