sunfloweracres/sunfloweracres-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Will Estes
2026-07-29 09:59:23 -04:00
parent f576bf0672
commit ab1dbdeed9
1 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+32 -28
View File
@@ -1,35 +1,39 @@
:root { :root {
--paper: #EDE7DA; --paper: #F1EAD9;
--paper-raised: #F5F0E5; --paper-raised: #F8F2E5;
--ink: #2A241D; --ink: #2B2015;
--ink-soft: #5C5647; --ink-soft: #5E5040;
--sage: #4E5C40; --sage: #2F5D34;
--sage-soft: #6D7A5C; --sage-soft: #4F7A46;
--clay: #9C5A3C; --clay: #7A4A28;
--line: #D6CCB8; --sun: #E7A62E;
--ok: #4C7A52; --sun-ink: #2E2008;
--ok-bg: #E3ECDE; --line: #DDCFB0;
--low: #A97423; --ok: #2F5D34;
--low-bg: #F1E6CD; --ok-bg: #E0EAD9;
--out: #A24A3E; --low: #B4790C;
--out-bg: #F0DFD8; --low-bg: #F6E8C4;
--out: #9C4530;
--out-bg: #F0DED2;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--paper: #1D1B16; --paper: #1B160E;
--paper-raised: #26241D; --paper-raised: #241E14;
--ink: #ECE5D6; --ink: #ECE2CB;
--ink-soft: #B7AF9C; --ink-soft: #B7A88A;
--sage: #93AC7E; --sage: #7EAE6C;
--sage-soft: #7C9169; --sage-soft: #669157;
--clay: #D08F65; --clay: #A8672E;
--line: #3B3728; --sun: #D9A73A;
--sun-ink: #241905;
--line: #3A2E1B;
--ok: #8FBB8C; --ok: #8FBB8C;
--ok-bg: #263626; --ok-bg: #253524;
--low: #D9A94B; --low: #E0B23E;
--low-bg: #3A3020; --low-bg: #3A3020;
--out: #D98C7E; --out: #D98567;
--out-bg: #3A2620; --out-bg: #3A2620;
} }
} }
@@ -116,8 +120,8 @@ main {
.hero .cta { .hero .cta {
display: inline-block; display: inline-block;
background: var(--sage); background: var(--sun);
color: #fff; color: var(--sun-ink);
padding: 0.7rem 1.4rem; padding: 0.7rem 1.4rem;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
@@ -177,7 +181,7 @@ main {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; 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; } .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; } .low-note { font-size: 0.8rem; color: var(--low); margin: 0; }