This commit is contained in:
Zeeshaun
2026-05-06 16:00:13 +00:00
parent 4d098a9ec9
commit 2ed854389c
3 changed files with 51 additions and 31 deletions
+25 -6
View File
@@ -3,6 +3,28 @@
@tailwind utilities;
@layer base {
:root {
--background: 1 0 0;
--foreground: 0.145 0 0;
--card: 1 0 0;
--card-foreground: 0.145 0 0;
--popover: 1 0 0;
--popover-foreground: 0.145 0 0;
--primary: 0.205 0 0;
--primary-foreground: 0.985 0 0;
--secondary: 0.97 0 0;
--secondary-foreground: 0.205 0 0;
--muted: 0.97 0 0;
--muted-foreground: 0.556 0 0;
--accent: 0.97 0 0;
--accent-foreground: 0.205 0 0;
--destructive: 0.577 0.245 27.325;
--destructive-foreground: 0.985 0 0;
--border: 0.922 0 0;
--input: 0.922 0 0;
--ring: 0.708 0 0;
}
:root {
color-scheme: light;
}
@@ -17,10 +39,7 @@
body {
@apply min-h-screen bg-background font-sans text-foreground antialiased;
background-image:
radial-gradient(circle at top left, rgba(15, 92, 77, 0.16), transparent 28%),
radial-gradient(circle at top right, rgba(207, 111, 46, 0.18), transparent 24%),
linear-gradient(180deg, #fcfaf5 0%, #f7f1e5 50%, #f2e7d4 100%);
background-image: radial-gradient(circle at top, rgba(0, 0, 0, 0.035), transparent 32%);
}
a {
@@ -30,7 +49,7 @@
@layer components {
.app-surface {
@apply rounded-3xl border border-white/70 bg-card/85 shadow-panel backdrop-blur;
@apply rounded-3xl border bg-card shadow-panel;
}
.field-label {
@@ -38,6 +57,6 @@
}
.field-select {
@apply flex h-11 w-full rounded-2xl border border-input bg-white/90 px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
@apply flex h-11 w-full rounded-2xl border border-input bg-background px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
}
}
+7 -6
View File
@@ -27,16 +27,17 @@ export function AppShell({
return (
<div className="container py-4 md:py-8">
<header className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,rgba(8,35,47,0.98)_0%,rgba(14,87,72,0.96)_52%,rgba(203,105,48,0.92)_100%)] p-6 text-white shadow-glow md:p-10">
<div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-20" />
<header className="relative overflow-hidden rounded-[2rem] border bg-primary p-6 text-primary-foreground shadow-glow md:p-10">
<div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-[0.08]" />
<div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/10 to-transparent" />
<div className="relative flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
<div className="max-w-3xl">
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-medium text-white/90 backdrop-blur">
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80">
<Trophy className="h-4 w-4" />
Little League Coach Console
</div>
<h1 className="font-display text-4xl font-semibold leading-none tracking-tight md:text-6xl">{title}</h1>
<p className="mt-4 max-w-2xl text-base text-white/80 md:text-lg">{subtitle}</p>
<p className="mt-4 max-w-2xl text-base text-white/70 md:text-lg">{subtitle}</p>
</div>
{actions ? <div className="relative flex items-start">{actions}</div> : null}
</div>
@@ -53,8 +54,8 @@ export function AppShell({
className={cn(
"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition",
active
? "bg-white text-foreground shadow-panel"
: "text-muted-foreground hover:bg-white/80 hover:text-foreground"
? "bg-primary text-primary-foreground shadow-panel"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
<Icon className="h-4 w-4" />
+19 -19
View File
@@ -12,34 +12,34 @@ const config: Config = {
},
extend: {
colors: {
border: "hsl(32 22% 86%)",
input: "hsl(32 22% 86%)",
ring: "hsl(157 63% 27%)",
background: "hsl(42 43% 96%)",
foreground: "hsl(205 32% 12%)",
border: "oklch(var(--border))",
input: "oklch(var(--input))",
ring: "oklch(var(--ring))",
background: "oklch(var(--background))",
foreground: "oklch(var(--foreground))",
primary: {
DEFAULT: "hsl(157 63% 27%)",
foreground: "hsl(48 100% 98%)"
DEFAULT: "oklch(var(--primary))",
foreground: "oklch(var(--primary-foreground))"
},
secondary: {
DEFAULT: "hsl(25 69% 54%)",
foreground: "hsl(48 100% 98%)"
DEFAULT: "oklch(var(--secondary))",
foreground: "oklch(var(--secondary-foreground))"
},
muted: {
DEFAULT: "hsl(36 28% 92%)",
foreground: "hsl(211 15% 42%)"
DEFAULT: "oklch(var(--muted))",
foreground: "oklch(var(--muted-foreground))"
},
accent: {
DEFAULT: "hsl(194 52% 18%)",
foreground: "hsl(48 100% 98%)"
DEFAULT: "oklch(var(--accent))",
foreground: "oklch(var(--accent-foreground))"
},
card: {
DEFAULT: "hsl(48 100% 99%)",
foreground: "hsl(205 32% 12%)"
DEFAULT: "oklch(var(--card))",
foreground: "oklch(var(--card-foreground))"
},
destructive: {
DEFAULT: "hsl(6 72% 54%)",
foreground: "hsl(48 100% 98%)"
DEFAULT: "oklch(var(--destructive))",
foreground: "oklch(var(--destructive-foreground))"
}
},
borderRadius: {
@@ -48,8 +48,8 @@ const config: Config = {
"3xl": "2rem"
},
boxShadow: {
glow: "0 24px 80px rgba(13, 52, 63, 0.15)",
panel: "0 10px 30px rgba(23, 34, 45, 0.08)"
glow: "0 24px 80px rgba(0, 0, 0, 0.18)",
panel: "0 8px 24px rgba(0, 0, 0, 0.06)"
},
fontFamily: {
sans: ['"Inter"', '"Segoe UI"', "sans-serif"],