diff --git a/src/app/globals.css b/src/app/globals.css index e46472d..e0ddc97 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,42 +1,37 @@ @import "tailwindcss"; -@import "tw-animate-css"; - -@custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-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-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); @@ -45,96 +40,78 @@ :root { --radius: 0.625rem; - /* light theme (unused by default since we force dark) */ - --background: oklch(0.99 0 0); - --foreground: oklch(0.14 0 0); + --background: oklch(1 0 0); + --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); - --card-foreground: oklch(0.14 0 0); + --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); - --popover-foreground: oklch(0.14 0 0); - --primary: oklch(0.55 0.16 150); /* emerald-ish */ - --primary-foreground: oklch(0.99 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.2 0 0); - --muted: oklch(0.95 0 0); - --muted-foreground: oklch(0.56 0 0); - --accent: oklch(0.9 0.08 150); - --accent-foreground: oklch(0.2 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.21 0.006 285.885); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.9 0 0); - --input: oklch(0.9 0 0); - --ring: oklch(0.7 0 0); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.705 0.015 286.067); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.705 0.015 286.067); } .dark { - --background: oklch(0.16 0 0); - --foreground: oklch(0.97 0 0); - --card: oklch(0.2 0 0); - --card-foreground: oklch(0.98 0 0); - --popover: oklch(0.18 0 0); - --popover-foreground: oklch(0.98 0 0); - --primary: oklch(0.7 0.2 150); /* vibrant emerald */ - --primary-foreground: oklch(0.13 0 0); - --secondary: oklch(0.26 0 0); - --secondary-foreground: oklch(0.98 0 0); - --muted: oklch(0.26 0 0); - --muted-foreground: oklch(0.72 0 0); - --accent: oklch(0.32 0.03 150); - --accent-foreground: oklch(0.98 0 0); + --background: oklch(0.141 0.005 285.823); + --foreground: oklch(0.985 0 0); + --card: oklch(0.21 0.006 285.885); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.21 0.006 285.885); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.92 0.004 286.32); + --primary-foreground: oklch(0.21 0.006 285.885); + --secondary: oklch(0.274 0.006 286.033); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.274 0.006 286.033); + --muted-foreground: oklch(0.705 0.015 286.067); + --accent: oklch(0.274 0.006 286.033); + --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); - --border: color-mix(in oklab, white 12%, transparent); - --input: color-mix(in oklab, white 16%, transparent); - --ring: oklch(0.72 0.15 150); - --chart-1: oklch(0.7 0.2 150); - --chart-2: oklch(0.66 0.18 170); - --chart-3: oklch(0.62 0.14 190); - --chart-4: oklch(0.75 0.22 130); - --chart-5: oklch(0.68 0.2 110); - --sidebar: oklch(0.18 0 0); - --sidebar-foreground: oklch(0.98 0 0); - --sidebar-primary: oklch(0.7 0.2 150); - --sidebar-primary-foreground: oklch(0.12 0 0); - --sidebar-accent: oklch(0.24 0 0); - --sidebar-accent-foreground: oklch(0.98 0 0); - --sidebar-border: color-mix(in oklab, white 10%, transparent); - --sidebar-ring: oklch(0.72 0.15 150); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.552 0.016 285.938); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.21 0.006 285.885); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.274 0.006 286.033); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.552 0.016 285.938); } @layer base { * { - @apply border-border outline-ring/50; + @apply border-border; } body { @apply bg-background text-foreground; - background-image: - radial-gradient(1200px 600px at 80% -20%, color-mix(in oklab, var(--primary) 10%, transparent) 0%, transparent 60%), - radial-gradient(800px 400px at -10% 20%, color-mix(in oklab, var(--primary) 8%, transparent) 0%, transparent 60%); - background-attachment: fixed; } -} - -/* Subtle glow/bloom utilities for accent elements */ -@utility glow { - box-shadow: - 0 0 0.5rem color-mix(in oklab, var(--primary) 55%, transparent), - 0 0 1.25rem color-mix(in oklab, var(--primary) 35%, transparent), - inset 0 0 0.25rem color-mix(in oklab, var(--primary) 25%, transparent); -} - -@utility grain { - background-image: linear-gradient(transparent, transparent), - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); -} +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 28a4201..5bb37ff 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -105,11 +105,11 @@ export default function Home() {