wallco.ai · card-room-badge — dynamic room count ("4 rooms") replaces "IN A ROOM"

05812f4363d0cd5810842e4021133e3dd0fb7b77 · 2026-05-12 03:53:08 -0700 · SteveStudio2

Visitors land on /designs and now see "4 rooms" on each has-room card
instead of generic "IN A ROOM" — markets the depth of the preview before
the click (each has-room design carries bedroom + hotel_lobby + living_room
+ office, surfaced via the 3-pill toggle on /design/:id).

Moved badge from ::after pseudo-element to a real <span class="card-room-badge">
so the text can be data-driven. Single-room copy falls back to "In a room",
zero-room cards skip the badge entirely. Hover still fades it out so the
room image owns the frame.

Wired in 3 places: home featured rail, /designs catalog, /murals.
Reversible: 1 CSS rule + 6-line per-card change.

Files touched

M public/css/site.css
M server.js

Diff

commit 05812f4363d0cd5810842e4021133e3dd0fb7b77
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 03:53:08 2026 -0700

    wallco.ai · card-room-badge — dynamic room count ("4 rooms") replaces "IN A ROOM"
    
    Visitors land on /designs and now see "4 rooms" on each has-room card
    instead of generic "IN A ROOM" — markets the depth of the preview before
    the click (each has-room design carries bedroom + hotel_lobby + living_room
    + office, surfaced via the 3-pill toggle on /design/:id).
    
    Moved badge from ::after pseudo-element to a real <span class="card-room-badge">
    so the text can be data-driven. Single-room copy falls back to "In a room",
    zero-room cards skip the badge entirely. Hover still fades it out so the
    room image owns the frame.
    
    Wired in 3 places: home featured rail, /designs catalog, /murals.
    Reversible: 1 CSS rule + 6-line per-card change.
---
 public/css/site.css |  9 ++++++---
 server.js           | 12 +++++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/public/css/site.css b/public/css/site.css
index 6b8252e..85a9787 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -275,8 +275,7 @@ main { padding-top: 73px; }
 }
 .design-card.has-room:hover .card-room,
 .design-card.has-room:focus-visible .card-room { opacity: 1; }
-.design-card.has-room::after {
-  content: 'IN A ROOM';
+.card-room-badge {
   position: absolute;
   top: 8px; left: 8px;
   padding: 3px 7px;
@@ -288,8 +287,12 @@ main { padding-top: 73px; }
   pointer-events: none;
   z-index: 1;
   opacity: 0.9;
+  transition: opacity 240ms ease;
+  text-transform: uppercase;
+  font-family: var(--sans);
 }
-.design-card.has-room:hover::after { opacity: 0; }
+.design-card.has-room:hover .card-room-badge,
+.design-card.has-room:focus-visible .card-room-badge { opacity: 0; }
 @media (prefers-reduced-motion: reduce) {
   .card-room { transition: none; }
 }
diff --git a/server.js b/server.js
index 13fa4cf..a99d38a 100644
--- a/server.js
+++ b/server.js
@@ -723,8 +723,10 @@ app.get('/', (req, res) => {
                   : (d.room_mockups || []).includes('bedroom')     ? 'bedroom'
                   : (d.room_mockups || []).includes('office')      ? 'office'
                   : (d.room_mockups || [])[0];
+    const roomCount = (d.room_mockups || []).length;
+    const badgeText = roomCount > 1 ? `${roomCount} rooms` : (roomCount === 1 ? 'In a room' : '');
     const roomOverlay = roomKey
-      ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true">`
+      ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true"><span class="card-room-badge">${badgeText}</span>`
       : '';
     return `
     <a href="/design/${d.id}" class="design-card${roomKey ? ' has-room' : ''}">
@@ -894,8 +896,10 @@ app.get('/designs', (req, res) => {
                     : (d.room_mockups || []).includes('bedroom')     ? 'bedroom'
                     : (d.room_mockups || []).includes('office')      ? 'office'
                     : (d.room_mockups || [])[0];
+      const roomCount = (d.room_mockups || []).length;
+      const badgeText = roomCount > 1 ? `${roomCount} rooms` : (roomCount === 1 ? 'In a room' : '');
       const roomOverlay = roomKey
-        ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true">`
+        ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true"><span class="card-room-badge">${badgeText}</span>`
         : '';
       return `
     <a href="/design/${d.id}" class="design-card${roomKey ? ' has-room' : ''}">
@@ -3721,8 +3725,10 @@ app.get('/murals', (req, res) => {
                   : (d.room_mockups || []).includes('bedroom')     ? 'bedroom'
                   : (d.room_mockups || []).includes('office')      ? 'office'
                   : (d.room_mockups || [])[0];
+    const roomCount = (d.room_mockups || []).length;
+    const badgeText = roomCount > 1 ? `${roomCount} rooms` : (roomCount === 1 ? 'In a room' : '');
     const roomOverlay = roomKey
-      ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true">`
+      ? `<img class="card-room" src="/designs/room/design_${d.id}_${roomKey}.png" loading="lazy" alt="" aria-hidden="true"><span class="card-room-badge">${badgeText}</span>`
       : '';
     return `
     <a href="/design/${d.id}" class="design-card${roomKey ? ' has-room' : ''}">

← 47d55d2 wallco.ai · sortDesigns — boost has-room designs to top of e · back to Wallco Ai · wallco.ai · /sitemap.xml + /robots.txt — 233 URLs, saturatio 3d1b6bd →