diff --git a/app/globals.css b/app/globals.css index 69ef233..7cf421c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,46 +2,51 @@ @variant dark (.dark &); +/* Mars palette — warm rust, terracotta, dusty sand, deep crater shadows */ :root { - --background: #fbf7ff; - --foreground: #2c2740; - --ink: #2c2740; - --ink-soft: #5a527a; - --muted: #8a83a8; + --background: #fff5ee; /* warm sand mist */ + --foreground: #3a1f15; + --ink: #3a1f15; /* deep crater */ + --ink-soft: #6b3a26; /* baked clay */ + --muted: #a07560; --card: #ffffff; - --card-soft: #f6f1ff; - --border: #ece5fa; - --accent: #8a7be3; - --accent-soft: #efeafd; - --success: #7fb89c; - --success-soft: #eaf6ef; - --success-border: #c9e3d4; - --success-ink: #305a45; - --halo-1: rgba(255, 213, 232, 0.55); /* soft pink */ - --halo-2: rgba(204, 224, 255, 0.55); /* baby blue */ - --halo-3: rgba(232, 218, 255, 0.55); /* lavender */ + --card-soft: #fdebdc; /* dust film */ + --border: #f3d8c3; + --accent: #c1502c; /* mars-rust */ + --accent-soft: #fde0d0; + --success: #7a8c4d; /* olive — softer than green on warm bg */ + --success-soft: #f0eedb; + --success-border: #d6d4a4; + --success-ink: #4f5a30; + --halo-1: rgba(231, 111, 65, 0.45); /* burnt orange */ + --halo-2: rgba(255, 188, 138, 0.50); /* peach dust */ + --halo-3: rgba(196, 76, 39, 0.32); /* deep rust */ + --planet-core: #c1502c; + --planet-rim: #8a2f15; color-scheme: light; } :root[data-theme="dark"], .dark { - --background: #0f0c1f; - --foreground: #e9e4f6; - --ink: #ece8fa; - --ink-soft: #b9b1d6; - --muted: #8a83a8; - --card: #1a1530; - --card-soft: #221c3d; - --border: #2c2548; - --accent: #b1a3ff; - --accent-soft: #2a2350; - --success: #7fb89c; - --success-soft: #1d2e26; - --success-border: #2f4d3d; - --success-ink: #b9e0c9; - --halo-1: rgba(120, 70, 130, 0.35); - --halo-2: rgba(60, 90, 160, 0.35); - --halo-3: rgba(80, 60, 150, 0.35); + --background: #1a0c08; /* night side of Mars */ + --foreground: #f4e2d4; + --ink: #f4e2d4; + --ink-soft: #d6b39d; + --muted: #a48068; + --card: #2a140d; + --card-soft: #341a12; + --border: #4a261a; + --accent: #e26d3d; /* glowing rust */ + --accent-soft: #3d1a10; + --success: #b3c275; + --success-soft: #2a2615; + --success-border: #4a4528; + --success-ink: #d8de9c; + --halo-1: rgba(231, 111, 65, 0.30); + --halo-2: rgba(196, 76, 39, 0.30); + --halo-3: rgba(120, 40, 25, 0.40); + --planet-core: #d65a30; + --planet-rim: #6e2412; color-scheme: dark; } @@ -59,31 +64,54 @@ body { transition: background-color 0.3s ease, color 0.3s ease; } -/* Cosmic-newborn background: soft radial halos + pinpoint stars */ +/* + * Mars-scape background: + * - warm dusty gradient base + * - distant orange/peach halos (atmospheric haze) + * - sparse pinpoint stars (deep space) + */ .bg-cosmic { background-color: var(--background); background-image: radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%), - radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%), - radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%), - radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.7) 50%, transparent 51%), - radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.6) 50%, transparent 51%), - radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 50%, transparent 51%), - radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.7) 50%, transparent 51%), - radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.6) 50%, transparent 51%); + radial-gradient(circle at 88% 14%, var(--halo-2) 0%, transparent 44%), + radial-gradient(circle at 50% 92%, var(--halo-3) 0%, transparent 50%), + radial-gradient(1px 1px at 22% 30%, rgba(255, 235, 215, 0.8) 50%, transparent 51%), + radial-gradient(1px 1px at 70% 22%, rgba(255, 235, 215, 0.7) 50%, transparent 51%), + radial-gradient(1px 1px at 40% 70%, rgba(255, 235, 215, 0.7) 50%, transparent 51%), + radial-gradient(1px 1px at 82% 60%, rgba(255, 235, 215, 0.8) 50%, transparent 51%), + radial-gradient(1px 1px at 18% 82%, rgba(255, 235, 215, 0.7) 50%, transparent 51%), + linear-gradient(180deg, var(--background) 0%, color-mix(in oklab, var(--background), var(--halo-2) 18%) 100%); background-attachment: fixed; } .dark .bg-cosmic { background-image: radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%), - radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%), - radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%), - radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 50%, transparent 51%), - radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.75) 50%, transparent 51%), - radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 51%), - radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.8) 50%, transparent 51%), - radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.7) 50%, transparent 51%); + radial-gradient(circle at 88% 14%, var(--halo-2) 0%, transparent 44%), + radial-gradient(circle at 50% 92%, var(--halo-3) 0%, transparent 50%), + radial-gradient(1px 1px at 22% 30%, rgba(255, 220, 200, 0.85) 50%, transparent 51%), + radial-gradient(1px 1px at 70% 22%, rgba(255, 220, 200, 0.75) 50%, transparent 51%), + radial-gradient(1px 1px at 40% 70%, rgba(255, 220, 200, 0.75) 50%, transparent 51%), + radial-gradient(1px 1px at 82% 60%, rgba(255, 220, 200, 0.85) 50%, transparent 51%), + radial-gradient(1px 1px at 18% 82%, rgba(255, 220, 200, 0.75) 50%, transparent 51%), + linear-gradient(180deg, var(--background) 0%, #0a0604 100%); +} + +/* + * Mars-disk glyph: a soft layered radial gradient that reads as a planet. + * Used as a decorative ::before in the header. + */ +.mars-disk { + position: absolute; + border-radius: 9999px; + background: + radial-gradient(circle at 35% 32%, color-mix(in oklab, var(--planet-core), white 25%) 0%, var(--planet-core) 38%, var(--planet-rim) 78%, transparent 100%), + radial-gradient(circle at 70% 70%, rgba(0,0,0,0.18), transparent 60%); + box-shadow: + 0 0 60px 10px color-mix(in oklab, var(--planet-core), transparent 70%), + inset -8px -8px 30px color-mix(in oklab, var(--planet-rim), transparent 50%); + opacity: 0.85; } .bg-card { @@ -95,11 +123,15 @@ body { } .shadow-soft { - box-shadow: 0 6px 20px -10px rgba(138, 123, 227, 0.25), 0 2px 6px -2px rgba(44, 39, 64, 0.06); + box-shadow: + 0 6px 22px -10px color-mix(in oklab, var(--accent), transparent 70%), + 0 2px 6px -2px rgba(58, 31, 21, 0.10); } .shadow-lifted { - box-shadow: 0 18px 40px -18px rgba(138, 123, 227, 0.35), 0 6px 14px -6px rgba(44, 39, 64, 0.08); + box-shadow: + 0 22px 44px -22px color-mix(in oklab, var(--accent), transparent 55%), + 0 8px 16px -8px rgba(58, 31, 21, 0.12); } /* Form elements */ diff --git a/components/header.tsx b/components/header.tsx index a4e2dcb..c8d6137 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -26,21 +26,16 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth = )}