File size: 3,777 Bytes
677b1c7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | @import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-display: "Space Grotesk", system-ui, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-surface: var(--surface);
--color-surface-2: var(--surface-2);
--color-brand: var(--brand);
--color-brand-glow: var(--brand-glow);
}
:root {
--radius: 0.875rem;
/* Calm, light palette — soft cream background, slate ink, muted blue accent */
--background: oklch(0.985 0.005 95);
--foreground: oklch(0.22 0.02 260);
--surface: oklch(0.97 0.008 95);
--surface-2: oklch(0.94 0.01 95);
--card: oklch(1 0 0);
--card-foreground: oklch(0.22 0.02 260);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.22 0.02 260);
--primary: oklch(0.48 0.12 250);
--primary-foreground: oklch(0.99 0.005 250);
--brand: oklch(0.48 0.12 250);
--brand-glow: oklch(0.58 0.13 245);
--secondary: oklch(0.94 0.01 95);
--secondary-foreground: oklch(0.22 0.02 260);
--muted: oklch(0.94 0.01 95);
--muted-foreground: oklch(0.48 0.02 260);
--accent: oklch(0.92 0.03 245);
--accent-foreground: oklch(0.32 0.06 250);
--destructive: oklch(0.6 0.2 25);
--destructive-foreground: oklch(0.99 0.005 250);
--border: oklch(0.88 0.01 260 / 70%);
--input: oklch(0.9 0.01 260);
--ring: oklch(0.58 0.13 245);
}
@layer base {
* { border-color: var(--color-border); }
html, body {
background-color: var(--color-background);
color: var(--color-foreground);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }
}
@layer utilities {
.bg-grid {
background-image:
linear-gradient(to right, oklch(0.7 0.02 260 / 0.18) 1px, transparent 1px),
linear-gradient(to bottom, oklch(0.7 0.02 260 / 0.18) 1px, transparent 1px);
background-size: 56px 56px;
}
.bg-radial-glow {
background:
radial-gradient(60% 60% at 80% 10%, oklch(0.85 0.06 245 / 0.55), transparent 60%),
radial-gradient(50% 50% at 5% 95%, oklch(0.88 0.05 200 / 0.45), transparent 60%);
}
.text-brand { color: var(--brand); }
.border-soft { border-color: oklch(0.22 0.02 260 / 0.1); }
.card-soft {
background: var(--card);
border: 1px solid oklch(0.22 0.02 260 / 0.08);
border-radius: var(--radius-2xl);
box-shadow: 0 1px 2px oklch(0.22 0.02 260 / 0.04), 0 8px 24px -12px oklch(0.22 0.02 260 / 0.08);
}
.eyebrow {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand);
}
}
|