Rework color palette to sun yellow, forest green, nut brown

Client requested a sunflower-themed palette: forest green stays for
links/nav, nut brown for the secondary reorder button, and a new sun
yellow becomes the primary CTA color (with dark ink text for contrast).
Neutrals and status pills retuned to match, with a darker companion
palette for prefers-color-scheme: dark.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-29 09:59:23 -04:00
parent f576bf0672
commit ab1dbdeed9
+32 -28
View File
@@ -1,35 +1,39 @@
:root {
--paper: #EDE7DA;
--paper-raised: #F5F0E5;
--ink: #2A241D;
--ink-soft: #5C5647;
--sage: #4E5C40;
--sage-soft: #6D7A5C;
--clay: #9C5A3C;
--line: #D6CCB8;
--ok: #4C7A52;
--ok-bg: #E3ECDE;
--low: #A97423;
--low-bg: #F1E6CD;
--out: #A24A3E;
--out-bg: #F0DFD8;
--paper: #F1EAD9;
--paper-raised: #F8F2E5;
--ink: #2B2015;
--ink-soft: #5E5040;
--sage: #2F5D34;
--sage-soft: #4F7A46;
--clay: #7A4A28;
--sun: #E7A62E;
--sun-ink: #2E2008;
--line: #DDCFB0;
--ok: #2F5D34;
--ok-bg: #E0EAD9;
--low: #B4790C;
--low-bg: #F6E8C4;
--out: #9C4530;
--out-bg: #F0DED2;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #1D1B16;
--paper-raised: #26241D;
--ink: #ECE5D6;
--ink-soft: #B7AF9C;
--sage: #93AC7E;
--sage-soft: #7C9169;
--clay: #D08F65;
--line: #3B3728;
--paper: #1B160E;
--paper-raised: #241E14;
--ink: #ECE2CB;
--ink-soft: #B7A88A;
--sage: #7EAE6C;
--sage-soft: #669157;
--clay: #A8672E;
--sun: #D9A73A;
--sun-ink: #241905;
--line: #3A2E1B;
--ok: #8FBB8C;
--ok-bg: #263626;
--low: #D9A94B;
--ok-bg: #253524;
--low: #E0B23E;
--low-bg: #3A3020;
--out: #D98C7E;
--out: #D98567;
--out-bg: #3A2620;
}
}
@@ -116,8 +120,8 @@ main {
.hero .cta {
display: inline-block;
background: var(--sage);
color: #fff;
background: var(--sun);
color: var(--sun-ink);
padding: 0.7rem 1.4rem;
border-radius: 4px;
text-decoration: none;
@@ -177,7 +181,7 @@ main {
font-size: 0.9rem;
font-weight: 600;
}
.buy-btn.enabled { background: var(--sage); color: #fff; }
.buy-btn.enabled { background: var(--sun); color: var(--sun-ink); }
.buy-btn.disabled { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); cursor: default; pointer-events: none; }
.low-note { font-size: 0.8rem; color: var(--low); margin: 0; }