From 198aa9171948af0bea6d58596ad575cb2de67af7 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 3 Jun 2026 17:04:20 +0200 Subject: [PATCH] Color the command palette by section accent; vibrant dividers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Each command section now reads in its own category accent (--spread-accent) across the palette: the kicker, the skill name (big title + active list item), and the divider all take it, while the slash before /impeccable drops to the muted namespace ink. The per-section divider accents are also made vibrant — refine/simplify/harden were muddy kinpaku-pale/-deep/oxide; now create/refine/simplify = kinpaku gold, evaluate/harden = patina verdigris, system = neutral, matching the established category color grouping. Light mode re-applies the accents over the shared eyebrow :is() rule; dark mode picks them up from the base rules. Also includes light-mode readability fixes for the live-demo G-bar (brand mark, active tool chip, control chips, pin-note text/caret) and a specificity fix so the hotel-hero demo text stays light on its photo. Co-Authored-By: Claude Opus 4.8 (1M context) --- site/styles/home-kinpaku.css | 24 ++++++++++++++-- site/styles/home-rebuild.css | 11 +++++-- site/styles/light-mode.css | 56 +++++++++++++++++++++--------------- 3 files changed, 62 insertions(+), 29 deletions(-) diff --git a/site/styles/home-kinpaku.css b/site/styles/home-kinpaku.css index 4bcf9bf33..ea63992db 100644 --- a/site/styles/home-kinpaku.css +++ b/site/styles/home-kinpaku.css @@ -964,13 +964,31 @@ color: var(--ks-lacquer-deep); } +/* Divider accent follows the section's category identity (the same gold/teal + grouping the category labels use) and stays vibrant — no muddy kinpaku-pale/ + -deep or undefined oxide. The brand's decorative accents are exactly two: + kinpaku gold (create/refine/simplify) and patina verdigris (evaluate/harden); + system stays neutral as the meta category. */ .home-kinpaku .magazine-spread[data-category="create"] { --spread-accent: var(--ks-kinpaku); } .home-kinpaku .magazine-spread[data-category="evaluate"] { --spread-accent: var(--ks-patina); } -.home-kinpaku .magazine-spread[data-category="refine"] { --spread-accent: var(--ks-kinpaku-pale); } -.home-kinpaku .magazine-spread[data-category="simplify"] { --spread-accent: var(--ks-kinpaku-deep); } -.home-kinpaku .magazine-spread[data-category="harden"] { --spread-accent: var(--ks-oxide); } +.home-kinpaku .magazine-spread[data-category="refine"] { --spread-accent: var(--ks-kinpaku); } +.home-kinpaku .magazine-spread[data-category="simplify"] { --spread-accent: var(--ks-kinpaku); } +.home-kinpaku .magazine-spread[data-category="harden"] { --spread-accent: var(--ks-patina); } .home-kinpaku .magazine-spread[data-category="system"] { --spread-accent: var(--ks-muted); } +/* In the command palette the section accent (--spread-accent) carries the whole + category identity: the kicker, the skill name (big title + active list item), + and the divider. The slash before /impeccable is demoted to the namespace's + muted ink — it's punctuation, not identity. (Light mode re-applies these accent + colors in light-mode.css to clear that file's :is() eyebrow rule.) */ +.home-kinpaku .magazine-container :is(.spread-command-name, .spread-category-label, .fisheye-item.is-active) { + color: var(--spread-accent); +} + +.home-kinpaku .magazine-container .spread-command-name .spread-slash { + color: var(--color-ash); +} + /* Card-swap to G pattern: the OUTER spread carries the single tinted-plinth surface (flat oklch(0.17 0 0), no border, no shadow). All inner demo surfaces sit transparently on top — no plinth-in-plinth, no nested rings. */ diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css index 21a563bdf..ed214815c 100644 --- a/site/styles/home-rebuild.css +++ b/site/styles/home-rebuild.css @@ -1206,7 +1206,12 @@ gap: 6px; padding: 22px 24px; } -.hotel-hero-eyebrow { +/* The hotel hero text sits on dark teal/gold photos, so it stays light in both + themes. These carry an extra .hotel-hero class purely for specificity: the + global `.home-kinpaku h2`/`p` color rules (0,1,1) otherwise win and, in light + mode, drag the headline to the dark --ks-champagne ink — illegible on the + photo. The slop variant's own dark overrides still win on source order. */ +.hotel-hero .hotel-hero-eyebrow { margin: 0; font-family: var(--h-sans); font-size: 10px; @@ -1214,7 +1219,7 @@ text-transform: uppercase; color: oklch(91% 0.05 85); } -.hotel-hero-title { +.hotel-hero .hotel-hero-title { margin: 0; font-family: var(--h-serif); font-weight: 500; @@ -1223,7 +1228,7 @@ letter-spacing: -0.01em; color: oklch(98% 0.01 85); } -.hotel-hero-sub { +.hotel-hero .hotel-hero-sub { margin: 0; font-family: var(--h-sans); font-size: 12px; diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index 0aa78cce7..c35707010 100644 --- a/site/styles/light-mode.css +++ b/site/styles/light-mode.css @@ -234,24 +234,17 @@ html.light :is( color: var(--ks-kinpaku-ink); } -/* Command palette (magazine spread). The command NAME — big title + active - list item — is the brand gold; on the near-white card (.magazine-container, - not warm paper) pristine kinpaku reads fine, so override the muddier - kinpaku-ink the shared eyebrow rule above assigns. The category kicker is - handled separately below (it takes the section accent, not flat gold). - Scoped under .magazine-container so it only touches the palette and clears - the eyebrow rule's :is() specificity (inflated to 4 classes by its - .fisheye-item.is-active arg). Other eyebrows keep kinpaku-ink for paper. */ +/* Command palette (magazine spread). The kicker, skill name (big title + active + list item) all read in the section accent (--spread-accent) — gold for + create/refine/simplify, verdigris for evaluate/harden, neutral for system — + matching the divider. On the near-white card these read fine. This clears the + muddier kinpaku-ink the shared eyebrow :is() rule above assigns; scoped under + .magazine-container so its specificity ties/beats that rule (and only touches + the palette). Other eyebrows keep kinpaku-ink for paper. Dark mode gets the + same accent colors via home-kinpaku.css. */ html.light .home-kinpaku .magazine-container .spread-command-name, +html.light .home-kinpaku .magazine-container .spread-category-label, html.light .home-kinpaku .magazine-container .fisheye-item.is-active { - color: var(--ks-kinpaku); -} - -/* The category kicker takes the section's own accent (--spread-accent), like - the slash and the divider, so each section reads in its identity color - (gold for create/refine/simplify, verdigris for evaluate/harden, neutral for - system) rather than a flat gold. Dark mode gets the same via home-kinpaku.css. */ -html.light .home-kinpaku .magazine-container .spread-category-label { color: var(--spread-accent); } @@ -1095,6 +1088,13 @@ html.light .hero-live-demo .live-demo-pin-note { background: var(--ks-lacquer-raised); border-color: var(--ks-rule); box-shadow: 0 8px 22px oklch(25% 0.02 95 / 0.10); + /* The base note text is near-white for the dark bar; on the pale bubble it + has to flip to ink or the comment is invisible. */ + color: var(--ks-text); +} + +html.light .hero-live-demo .live-demo-pin-caret { + background: var(--ks-kinpaku-ink); } html.light .hero-live-demo .live-demo-annot-clear { @@ -1257,15 +1257,21 @@ html.light .live-mode-kinpaku .live-demo-ctx { box-shadow: 0 16px 36px -12px oklch(25% 0.02 95 / 0.14); } +/* Standalone brand mark (no wordmark) reads as the header logo does in light + mode — crisp near-black ink, not the muddy mid-gold that --ks-kinpaku-ink + washes to on a pale bar. */ html.light .home-kinpaku .live-demo-gbar-brand, html.light .live-mode-kinpaku .live-demo-gbar-brand { - color: var(--ks-kinpaku-ink); + color: var(--ks-champagne); } +/* Active tool: a solid kinpaku chip with dark ink, matching the gold Go button. + The dark-mode active is a graphite chip + gold text; on a pale bar that chip + reads as a heavy black smudge, so the light analog flips to gold fill. */ html.light .home-kinpaku .live-demo-gbar-btn.is-active, html.light .live-mode-kinpaku .live-demo-gbar-btn.is-active { - background: oklch(22% 0.02 95); - color: var(--ks-kinpaku-pale); + background: var(--ks-kinpaku); + color: oklch(14% 0.018 95); } html.light .home-kinpaku .live-demo-gbar-btn.is-active svg, @@ -1277,8 +1283,8 @@ html.light .live-mode-kinpaku .live-demo-gbar-btn.is-active .live-demo-gbar-btn- html.light .home-kinpaku .live-demo-gbar-chat, html.light .live-mode-kinpaku .live-demo-gbar-chat { - background: oklch(88% 0.014 95); - border-color: var(--ks-rule); + background: oklch(97.5% 0.004 95); + border-color: oklch(25% 0.02 95 / 0.14); } html.light .home-kinpaku .live-demo-gbar-chat.is-expanded, @@ -1291,14 +1297,18 @@ html.light .live-mode-kinpaku .live-demo-gbar-chat-input { color: var(--ks-text); } +/* Control chips (adapt pill, refine input, ×3 count). The old 88%/0.014 fill + was an 11%-darker olive-cast block that read as heavy and unrefined on the + white bar. A barely-there warm off-white recess with a crisp hairline reads + as polished product chrome — the border does the separating, not a gray slab. */ html.light .home-kinpaku .live-demo-ctx-pill, html.light .home-kinpaku .live-demo-ctx-input, html.light .home-kinpaku .live-demo-ctx-count, html.light .live-mode-kinpaku .live-demo-ctx-pill, html.light .live-mode-kinpaku .live-demo-ctx-input, html.light .live-mode-kinpaku .live-demo-ctx-count { - background: oklch(88% 0.014 95); - border-color: var(--ks-rule); + background: oklch(97.5% 0.004 95); + border-color: oklch(25% 0.02 95 / 0.14); color: var(--ks-text); }