homepage hero: room slides render at FULL SCALE — hero-slide.is-room uses background-size:contain (was 'cover' which cropped 1024² rooms on wide hero strip → soft+lost context); frame backing uses per-design dominant_hex (--hero-frame) so letterbox reads as intentional framing. Steve directive 'must be at full scale so it is clean and clear'

48ecb0c8581640a865a90c5fa64c20809a1ea622 · 2026-05-28 11:13:47 -0700 · Steve Abrams

Files touched

M data/cactus-decisions.jsonl
M public/css/site.css
M server.js

Diff

commit 48ecb0c8581640a865a90c5fa64c20809a1ea622
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu May 28 11:13:47 2026 -0700

    homepage hero: room slides render at FULL SCALE — hero-slide.is-room uses background-size:contain (was 'cover' which cropped 1024² rooms on wide hero strip → soft+lost context); frame backing uses per-design dominant_hex (--hero-frame) so letterbox reads as intentional framing. Steve directive 'must be at full scale so it is clean and clear'
---
 data/cactus-decisions.jsonl | 36 ++++++++++++++++++++++++++++++++++++
 public/css/site.css         |  9 +++++++++
 server.js                   |  9 ++++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/data/cactus-decisions.jsonl b/data/cactus-decisions.jsonl
index c30fdf6..ff1adbe 100644
--- a/data/cactus-decisions.jsonl
+++ b/data/cactus-decisions.jsonl
@@ -3896,3 +3896,39 @@
 {"ts":"2026-05-28T16:41:24.548Z","id":17278,"action":"bad"}
 {"ts":"2026-05-28T16:41:27.589Z","id":20171,"action":"bad"}
 {"ts":"2026-05-28T17:49:14.597Z","id":54048,"action":"live"}
+{"ts":"2026-05-28T18:13:02.337Z","id":41229,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.407Z","id":41228,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.485Z","id":40916,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.549Z","id":41227,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.630Z","id":41220,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.720Z","id":40891,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.847Z","id":40915,"action":"bad"}
+{"ts":"2026-05-28T18:13:02.973Z","id":41226,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.098Z","id":41210,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.222Z","id":40890,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.347Z","id":40848,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.469Z","id":41030,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.601Z","id":40843,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.736Z","id":40842,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.872Z","id":40807,"action":"bad"}
+{"ts":"2026-05-28T18:13:03.999Z","id":40844,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.114Z","id":40933,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.222Z","id":41189,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.331Z","id":40889,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.470Z","id":40780,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.585Z","id":41125,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.680Z","id":40866,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.769Z","id":40805,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.868Z","id":40779,"action":"bad"}
+{"ts":"2026-05-28T18:13:04.978Z","id":41098,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.102Z","id":40861,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.224Z","id":40778,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.346Z","id":40703,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.475Z","id":40669,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.603Z","id":40668,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.735Z","id":40664,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.848Z","id":40655,"action":"bad"}
+{"ts":"2026-05-28T18:13:05.938Z","id":40654,"action":"bad"}
+{"ts":"2026-05-28T18:13:06.020Z","id":40702,"action":"bad"}
+{"ts":"2026-05-28T18:13:06.108Z","id":40633,"action":"bad"}
+{"ts":"2026-05-28T18:13:06.215Z","id":40626,"action":"bad"}
diff --git a/public/css/site.css b/public/css/site.css
index edc79f6..40d90e9 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -225,6 +225,15 @@ main { padding-top: 73px; }
   transition: opacity 1.2s ease;
 }
 .hero-slide.active { opacity: 1; }
+/* Room slides — the source PNG is 1024² (square scene); on a wide hero strip
+   'cover' crops out top/bottom and softens the room. 'contain' shows the whole
+   render at full scale (Steve 2026-05-28: "must be at full scale so it is
+   clean and clear"). --hero-frame is set per-slide from the design's
+   dominant_hex so the letterbox reads as intentional framing, not a gap. */
+.hero-slide.is-room {
+  background-size: contain;
+  background-color: var(--hero-frame, #1a1612);
+}
 
 .hero-controls {
   position: absolute;
diff --git a/server.js b/server.js
index 5f463f0..e2d7ab8 100644
--- a/server.js
+++ b/server.js
@@ -4794,7 +4794,14 @@ app.get('/', (req, res) => {
   });
 
   const heroSlides = heroes.slice(0, 6).map((d, i) =>
-    `<div class="hero-slide ${i===0?'active':''}" data-idx="${i}" style="background-image:url('${heroImageUrl(d)}');--card-bg:url('${heroImageUrl(d)}')" aria-label="${d.title}"></div>`
+    // is-room tag → CSS switches background-size from 'cover' (crops square→wide) to
+    // 'contain' so the full 1024² room renders at native scale, clean+clear. Frame
+    // backing uses the design's dominant hex so the letterbox looks intentional.
+    (function() {
+      const _isRoom = Array.isArray(d.room_mockups) && d.room_mockups.length > 0;
+      const _frame = (d.dominant_hex || '#1a1612').replace(/[^#0-9a-f]/gi, '');
+      return `<div class="hero-slide${i===0?' active':''}${_isRoom?' is-room':''}" data-idx="${i}" style="background-image:url('${heroImageUrl(d)}');--card-bg:url('${heroImageUrl(d)}');--hero-frame:${_frame}" aria-label="${d.title}"></div>`;
+    })()
   ).join('\n');
 
   // Top categories by count — used to render the home random-rail chip strip.

← fa813e7 homepage cards: 'second position' room-setting inset chip — · back to Wallco Ai · cactus-curator: mural categories don't hide web_viewer from a6405c4 →