YOLO R8 — /age-themes mobile layout. Added @media (max-width:640px) tier that scales down headers, padding, TOC pills, age-pills, theme-card min-heights, diff-chip + apca-chip font sizes, and lets rationale min-height collapse to 0. Verified clean stack at 390×844 via Playwright full-page screenshot.

1cd8af9a6e7016f2bea2e0e292aaab53c1326b35 · 2026-05-12 00:59:48 -0700 · Steve Abrams
Files touched

M YOLO_BACKLOG.md
M server.js
Diff

commit 1cd8af9a6e7016f2bea2e0e292aaab53c1326b35
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 12 00:59:48 2026 -0700

    YOLO R8 — /age-themes mobile layout. Added @media (max-width:640px) tier that scales down headers, padding, TOC pills, age-pills, theme-card min-heights, diff-chip + apca-chip font sizes, and lets rationale min-height collapse to 0. Verified clean stack at 390×844 via Playwright full-page screenshot.
---
 YOLO_BACKLOG.md |  5 +++--
 server.js       | 31 +++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/YOLO_BACKLOG.md b/YOLO_BACKLOG.md
index 7df4232..d015464 100644
--- a/YOLO_BACKLOG.md
+++ b/YOLO_BACKLOG.md
@@ -36,7 +36,7 @@ User ask verbatim: "show final patterns and 1 room setting on https://wallco.ai/
 
 - [x] **R6 · /moodboard search box** — 2026-05-12 01:10 · added `#mb-search` input to the filters bar (pre-pills) with placeholder "search labels + reasons…". Pure client-side filter walks `.mb-card` nodes, matches case-insensitive against `.mb-title` + `.mb-reason` + parent design title. Sections with zero matches auto-collapse via `.mb-hidden`. Empty-state ("No pins match X") appears when query yields zero results. Persists last query in localStorage (key `wallco-mb-search`) and re-applies on load. Stacks with the existing type filter (?type=design|color|material).
 - [x] **R7 · why-chip prominence** — 2026-05-12 01:06 · why-chip restyled per debate-team verdict (curator's reasoning, not noise). Bigger (padding 6→8/9→12, font 11→12px+500 weight), full gold border (was 1px #3a3631), gold accent left-bar 3px, subtle gold-tinted bg. Floating "CURATOR" label tag above the chip identifies provenance. Hover state: bg deepens + "tap to open chat →" hint floats bottom-right. Verified live.
-- [ ] **R8 · `/age-themes` mobile layout** — at <640px viewport, the 3-column current/best/rationale grid stacks awkwardly. Test at 390×844, fix grid-template-columns + font-size scaling.
+- [x] **R8 · /age-themes mobile layout** — 2026-05-12 01:14 · added @media (max-width:640px) tier (sits below existing 900px tier). Scales down: header padding 22→14px, h1 24→18px, nav stacks full-width, credits 11→10.5px, main padding 30→18px, TOC pills 11→10px, band-row margin 36→24px, age-pill 11→10px, diff-chip 11→10px, theme-card min-height 200→170px, theme-panel padding 18→14px, meta wraps full-width right-aligned, rationale min-height drops to 0 (no enforced height on mobile). Verified at 390×844 via Playwright full-page screenshot — bands stack cleanly current→best→rationale top-to-bottom, all 8 bands legible.
 - [x] **R9 · AI-language scrub** — 2026-05-12 00:42 · 9 public-facing leaks scrubbed in server.js: schema.org names + meta descriptions on /, /designs, /design/:id, /murals, /samples + shopify tagList. Replaced with "wallco.ai original" / "hand-curated through our proprietary design system" / "never repeated". Admin /age-themes banner kept "AI-generated starting point" per validation-loop honesty rule (admin-only audience). Front-page + /designs meta verified clean live.
 
 ### Cross-project refinement
@@ -74,4 +74,5 @@ TICK · TIMESTAMP · ITEM · STATUS · COMMIT
 - T12 · 2026-05-12 00:58 · R2 ΔE closeness bands · done · 4 bands · 4 surfaces in API · chips on both wallco + tsd · 12 new unit tests · 8c653d7 + ef39b82 + 035592b
 - T13 · 2026-05-12 01:02 · R5 source-design SW row · done · new "Design's dominant color" block above palette · stored hex vs extracted distinction explicit · c93962a
 - T14 · 2026-05-12 01:06 · R7 why-chip prominence · done · bigger font, gold left-accent, CURATOR provenance label, hover hint · f5c8666
-- T15 · 2026-05-12 01:10 · R6 moodboard search · done · pure client-side filter, localStorage persist, empty-state UX, stacks with type filter
+- T15 · 2026-05-12 01:10 · R6 moodboard search · done · pure client-side filter, localStorage persist, empty-state UX, stacks with type filter · 550be17
+- T16 · 2026-05-12 01:14 · R8 /age-themes mobile layout · done · @media 640px tier, verified at 390×844 via Playwright
diff --git a/server.js b/server.js
index 94f644a..1d9cf4b 100644
--- a/server.js
+++ b/server.js
@@ -3950,6 +3950,37 @@ app.get('/age-themes', (req, res) => {
   .rationale-swap strong { font-weight:700; }
   .theme-rationale p { margin:0; color:#bba; font-size:12px; line-height:1.5; }
   @media (max-width: 900px) { .band-compare { grid-template-columns: 1fr; } }
+  @media (max-width: 640px) {
+    header.top { padding:14px 18px; gap:10px; }
+    header.top h1 { font-size:18px; }
+    header.top .tag { font-size:10px; }
+    header.top nav { width:100%; margin-left:0; display:flex; gap:14px; }
+    header.top nav a { margin-left:0; }
+    header.top .credits { font-size:10.5px; line-height:1.45; }
+    header.top .credits code { font-size:9.5px; }
+    main { padding: 18px 16px 40px; }
+    .toc { padding:10px 12px; gap:5px; }
+    .toc a { font-size:10px; padding:3px 8px; }
+    .band-row { margin-bottom:24px; padding-bottom:18px; scroll-margin-top:78px; }
+    .band-header h2 { font-size:16px; gap:9px; }
+    .age-pill { font-size:10px; padding:2px 8px; }
+    .band-mood { font-size:11px; }
+    .band-anchor { font-size:10px; }
+    .diff-bar { padding:6px 10px; gap:5px; flex-wrap:wrap; }
+    .diff-chip { font-size:10px; padding:2px 6px; }
+    .diff-count { font-size:9px; width:100%; margin:0 0 4px; }
+    .theme-card { min-height:170px; }
+    .theme-panel { padding:14px 16px; min-height:120px; }
+    .theme-spec { padding:5px 8px; gap:4px; }
+    .theme-spec .hex { width:12px; height:12px; }
+    .theme-spec .meta { font-size:8.5px; width:100%; margin-left:0; text-align:right; }
+    .theme-apca { padding:4px 8px; gap:4px; }
+    .theme-apca .lc { font-size:8.5px; padding:1px 5px; }
+    .theme-rationale { padding:12px 14px; min-height:0; }
+    .rationale-swap { font-size:12px; }
+    .theme-rationale p { font-size:11px; }
+    .theme-label { font-size:9px; }
+  }
 </style>
 <header class="top">
   <h1>Best themes for every age</h1>
← 92ab522 YOLO R6 — text search box on /moodboard. Matches case-insens · back to Wallco Ai · YOLO R8 — /age-themes mobile layout. Added viewport meta tag 97bd4e5 →