root/chadebebe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): switch to Mars-inspired palette and atmospheric haze (no planet disk)

Browse Source
This commit is contained in:
belisards
2026-05-03 15:49:30 -03:00
parent e38473e88d
commit 282e475562
2 changed files with 86 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
app/globals.css
View File

@@ -2,46 +2,51 @@
@variant dark (.dark &); @variant dark (.dark &);
/* Mars palette — warm rust, terracotta, dusty sand, deep crater shadows */
:root { :root {
--background: #fbf7ff; --background: #fff5ee; /* warm sand mist */
--foreground: #2c2740; --foreground: #3a1f15;
--ink: #2c2740; --ink: #3a1f15; /* deep crater */
--ink-soft: #5a527a; --ink-soft: #6b3a26; /* baked clay */
--muted: #8a83a8; --muted: #a07560;
--card: #ffffff; --card: #ffffff;
--card-soft: #f6f1ff; --card-soft: #fdebdc; /* dust film */
--border: #ece5fa; --border: #f3d8c3;
--accent: #8a7be3; --accent: #c1502c; /* mars-rust */
--accent-soft: #efeafd; --accent-soft: #fde0d0;
--success: #7fb89c; --success: #7a8c4d; /* olive — softer than green on warm bg */
--success-soft: #eaf6ef; --success-soft: #f0eedb;
--success-border: #c9e3d4; --success-border: #d6d4a4;
--success-ink: #305a45; --success-ink: #4f5a30;
--halo-1: rgba(255, 213, 232, 0.55); /* soft pink */ --halo-1: rgba(231, 111, 65, 0.45); /* burnt orange */
--halo-2: rgba(204, 224, 255, 0.55); /* baby blue */ --halo-2: rgba(255, 188, 138, 0.50); /* peach dust */
--halo-3: rgba(232, 218, 255, 0.55); /* lavender */ --halo-3: rgba(196, 76, 39, 0.32); /* deep rust */
--planet-core: #c1502c;
--planet-rim: #8a2f15;
color-scheme: light; color-scheme: light;
} }
:root[data-theme="dark"], :root[data-theme="dark"],
.dark { .dark {
--background: #0f0c1f; --background: #1a0c08; /* night side of Mars */
--foreground: #e9e4f6; --foreground: #f4e2d4;
--ink: #ece8fa; --ink: #f4e2d4;
--ink-soft: #b9b1d6; --ink-soft: #d6b39d;
--muted: #8a83a8; --muted: #a48068;
--card: #1a1530; --card: #2a140d;
--card-soft: #221c3d; --card-soft: #341a12;
--border: #2c2548; --border: #4a261a;
--accent: #b1a3ff; --accent: #e26d3d; /* glowing rust */
--accent-soft: #2a2350; --accent-soft: #3d1a10;
--success: #7fb89c; --success: #b3c275;
--success-soft: #1d2e26; --success-soft: #2a2615;
--success-border: #2f4d3d; --success-border: #4a4528;
--success-ink: #b9e0c9; --success-ink: #d8de9c;
--halo-1: rgba(120, 70, 130, 0.35); --halo-1: rgba(231, 111, 65, 0.30);
--halo-2: rgba(60, 90, 160, 0.35); --halo-2: rgba(196, 76, 39, 0.30);
--halo-3: rgba(80, 60, 150, 0.35); --halo-3: rgba(120, 40, 25, 0.40);
--planet-core: #d65a30;
--planet-rim: #6e2412;
color-scheme: dark; color-scheme: dark;
} }
@@ -59,31 +64,54 @@ body {
transition: background-color 0.3s ease, color 0.3s ease; 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 { .bg-cosmic {
background-color: var(--background); background-color: var(--background);
background-image: background-image:
radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%), 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 88% 14%, var(--halo-2) 0%, transparent 44%),
radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%), radial-gradient(circle at 50% 92%, var(--halo-3) 0%, transparent 50%),
radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.7) 50%, transparent 51%), 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,255,255,0.6) 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,255,255,0.6) 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,255,255,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,255,255,0.6) 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; background-attachment: fixed;
} }
.dark .bg-cosmic { .dark .bg-cosmic {
background-image: background-image:
radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%), 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 88% 14%, var(--halo-2) 0%, transparent 44%),
radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%), radial-gradient(circle at 50% 92%, var(--halo-3) 0%, transparent 50%),
radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 50%, transparent 51%), 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,255,255,0.75) 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,255,255,0.7) 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,255,255,0.8) 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,255,255,0.7) 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 { .bg-card {
@@ -95,11 +123,15 @@ body {
} }
.shadow-soft { .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 { .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 */ /* Form elements */

13
components/header.tsx
View File

@@ -26,21 +26,16 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth =
)} )}
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Subtle floating planet glyph */} {/* Distant atmospheric haze */}
<div <div
aria-hidden aria-hidden
className="pointer-events-none absolute -top-12 -right-10 w-56 h-56 rounded-full opacity-60 blur-2xl" className="pointer-events-none absolute -top-16 -right-12 w-80 h-80 rounded-full opacity-50 blur-3xl"
style={{ style={{ background: 'radial-gradient(circle, var(--halo-1), transparent 65%)' }}
background:
'radial-gradient(circle at 30% 30%, var(--halo-1), transparent 60%), radial-gradient(circle at 70% 70%, var(--halo-2), transparent 60%)',
}}
/> />
<div <div
aria-hidden aria-hidden
className="pointer-events-none absolute -bottom-16 -left-10 w-72 h-72 rounded-full opacity-50 blur-3xl" className="pointer-events-none absolute -bottom-16 -left-10 w-72 h-72 rounded-full opacity-50 blur-3xl"
style={{ style={{ background: 'radial-gradient(circle, var(--halo-3), transparent 60%)' }}
background: 'radial-gradient(circle, var(--halo-3), transparent 60%)',
}}
/> />
<div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 sm:px-6 lg:px-8`}> <div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 sm:px-6 lg:px-8`}>