shared/render.js: universal hover-preview — stamp --card-bg on card-img inline style + ::after pseudo-element shows 3×3 tile-repeat of the same image on :hover (reveals the seamless pattern structure). One edit applies to all 44 sister sites in dw-domain-fleet/sites/ on next restart. prefers-reduced-motion guarded.

aa83057baaf48f4b0ca5dc0d139cd3bd616602c6 · 2026-05-28 10:54:51 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M shared/render.js

Diff

commit aa83057baaf48f4b0ca5dc0d139cd3bd616602c6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu May 28 10:54:51 2026 -0700

    shared/render.js: universal hover-preview — stamp --card-bg on card-img inline style + ::after pseudo-element shows 3×3 tile-repeat of the same image on :hover (reveals the seamless pattern structure). One edit applies to all 44 sister sites in dw-domain-fleet/sites/ on next restart. prefers-reduced-motion guarded.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 shared/render.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/shared/render.js b/shared/render.js
index 85e2e24..7883aad 100644
--- a/shared/render.js
+++ b/shared/render.js
@@ -115,7 +115,10 @@ html[data-theme=dark] .theme-toggle .icon-moon{display:inline-block}
   cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
 .card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.13)}
 .card-link{display:flex;flex-direction:column;height:100%;color:inherit}
-.card-img{aspect-ratio:1/1.04;background:#eee center/cover no-repeat}
+.card-img{aspect-ratio:1/1.04;background:#eee center/cover no-repeat;position:relative;overflow:hidden}
+.card-img::after{content:"";position:absolute;inset:0;background-image:var(--card-bg,none);background-repeat:repeat;background-size:33.33% 33.33%;background-position:center;opacity:0;transition:opacity 360ms ease;pointer-events:none}
+.card:hover .card-img::after,.card-link:focus-visible .card-img::after{opacity:1}
+@media (prefers-reduced-motion: reduce){.card-img::after{transition:none}}
 .card-body{padding:13px 14px 16px}
 .card-title{font-family:var(--serif);font-size:16px;line-height:1.25;min-height:40px}
 .card-meta{font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:6px;
@@ -252,7 +255,7 @@ function card(p) {
     data-img="${esc(p.image_url)}" data-tags="${esc((p.tags||[]).slice(0,12).join(', '))}"
     data-price="${esc(p.price)}">
   <a class="card-link" href="${esc(href)}" aria-label="${esc(t)}">
-    <div class="card-img" style="background-image:url('${esc(p.image_url)}')"></div>
+    <div class="card-img" style="background-image:url('${esc(p.image_url)}');--card-bg:url('${esc(p.image_url)}')"></div>
     <div class="card-body">
       <div class="card-title">${esc(t)}</div>
       <div class="card-meta"><span class="dot" style="background:${hx}"></span>

← 1e6fa79 catalog: hydrate sort dropdown + density slider from localSt · back to Dw Domain Fleet · shared/render.js: reconcile prod drift — pull equalize toolb af735a7 →