chips: image-only by default; hover reveals Get Sample + See in a Room. flip page to black bg + white text.

91b6213eeb16a1fb198b14c0365f46e70c1cd605 · 2026-05-08 08:55:22 -0700 · Steve Abrams
Files touched

M public/index.html
Diff

commit 91b6213eeb16a1fb198b14c0365f46e70c1cd605
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri May 8 08:55:22 2026 -0700

    chips: image-only by default; hover reveals Get Sample + See in a Room. flip page to black bg + white text.
---
 public/index.html | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/public/index.html b/public/index.html
index 115d614..89ed675 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,12 +44,12 @@
 <script src="/zd-loader.js" defer></script>
 <style>
 :root {
-  --bg: #FFF;
-  --paper: #000;
-  --muted: #8B7866;
-  --line: #000;
+  --bg: #000;
+  --paper: #FFF;
+  --muted: #C9B89E;
+  --line: rgba(255,254,250,0.18);
   --accent: #D70000;
-  --bg-soft: #000;
+  --bg-soft: #0a0a0a;
   --cols: 6;
 }
 html[data-theme="dark"] {
@@ -121,13 +121,14 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
 .card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
 .card:hover { transform:scale(1.04); z-index:5 }
 .card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
+/* Chip overlay: hidden by default — image only. Hover reveals two CTAs. */
+.card .overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); opacity:0; transition:opacity 0.25s ease; pointer-events:none }
+.card:hover .overlay { opacity:1; pointer-events:auto }
+.card .pat, .card .ven { display:none }
+.card .actions { display:flex; flex-direction:column; gap:8px; width:min(80%, 220px) }
+.card .sample-btn { width:100%; padding:10px 14px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; text-decoration:none; transition:all 0.2s; box-sizing:border-box }
+.card .sample-btn.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.65) }
+.card .sample-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent) }
 
 @media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
 @media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
@@ -595,13 +596,12 @@ function cardHTML(p) {
   const eager = state.page === 1;
   const handle = p.handle || p.sku || '';
   const dwSampleUrl = 'https://designerwallcoverings.com/products/' + encodeURIComponent(handle) + '#sample';
+  const dwRoomUrl = 'https://designerwallcoverings.com/products/' + encodeURIComponent(handle) + '#room';
   return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
     + '<div class="overlay">'
-    + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
-    + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ').replace(/command54/gi, 'Glitter Walls')) + '</div>'
     + '<div class="actions">'
-    + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'&quot;') + ')">Order Memo Sample (free)</button>'
-    + '<a class="sample-btn" href="' + escAttr(dwSampleUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation()" style="display:inline-block;text-align:center;text-decoration:none;padding:7px 10px;background:transparent;color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid rgba(255,255,255,0.4)">View on DW ↗</a>'
+    + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'&quot;') + ')">Get Sample</button>'
+    + '<a class="sample-btn ghost" href="' + escAttr(dwRoomUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation()">See in a Room</a>'
     + '</div></div>';
 }
← cc1b4a1 rebrand to Glitter Walls — strip all Casa Rossa references ( · back to Glitterwalls · color: chip dots from product tags; new sorts (light→dark, d 1f42bc0 →