← back to Vinylwallpaper

hero: activate self-contained 2x2 hero-4grid (was commented placeholder)

d06a5bc5b216726bcc5f50070142a2a3efa5daa7 · 2026-06-01 13:33:10 -0700 · Steve

Files touched

• M public/hero-4grid.js
• M public/index.html

Diff

commit d06a5bc5b216726bcc5f50070142a2a3efa5daa7
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 1 13:33:10 2026 -0700

    hero: activate self-contained 2x2 hero-4grid (was commented placeholder)
---
 public/hero-4grid.js | 12 ++++++++++--
 public/index.html    | 14 ++------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/public/hero-4grid.js b/public/hero-4grid.js
index c495e6f..54a9cbb 100644
--- a/public/hero-4grid.js
+++ b/public/hero-4grid.js
@@ -43,9 +43,17 @@
     // Anti-header crop CSS — applied via inline so it ALWAYS wins
     var style = document.createElement('style');
     style.id = 'hero4-crop';
+    // Self-contained: inject the 2×2 LAYOUT too (not just the crop), so the grid
+    // works on any site that has the <script> tag even if its index.html never
+    // shipped .cinema-grid CSS. Hides the single .cinema-bg only once four-square
+    // mode is actually active (set in inject()), so a fetch failure keeps the
+    // static hero. Appended last → wins over any per-site .cinema-grid at equal
+    // specificity; identical values so sites that DO define it are unaffected.
     style.textContent =
-      '.hero4-cell{background-size:cover !important;background-position:center 12% !important;transition:opacity 600ms ease;}' +
-      '.hero4-cell.swap-out{opacity:0;}';
+      '.cinema-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;z-index:0;}' +
+      '.hero4-cell{width:100%;height:100%;background-size:cover !important;background-position:center 12% !important;background-repeat:no-repeat;transition:opacity 600ms ease;}' +
+      '.hero4-cell.swap-out{opacity:0;}' +
+      '[data-hero-mode="four-square"] .cinema-bg{display:none !important;}';
     document.head.appendChild(style);
 
     paint(grid);
diff --git a/public/index.html b/public/index.html
index 3f015c3..746e240 100644
--- a/public/index.html
+++ b/public/index.html
@@ -672,10 +672,6 @@ function openDetails(p) {
     dwmClose('Details');
     dwmOpen('Sample', { sku: safeP.sku, title: safeP.title, image_url: safeP.image_url });
   };
-  m.querySelector('[data-d-bigred]').onclick = () => {
-    dwmClose('Details');
-    try { if (window.BigRed && typeof window.BigRed.open === 'function') window.BigRed.open(); } catch(_){}
-  };
   dwmOpen('Details');
   try { if (typeof gtag === 'function') gtag('event', 'product_details_open', { sku: safeP.sku, pattern: safeP.pattern }); } catch(_){}
 }
@@ -1034,7 +1030,6 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
         <dl class="d-specs" data-d-specs></dl>
         <div class="d-ctas">
           <button class="d-cta primary" type="button" data-d-sample>Order Memo Sample</button>
-          <button class="d-cta ghost" type="button" data-d-bigred>Ask Big Red</button>
         </div>
       </div>
     </div>
@@ -1276,14 +1271,9 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
 })();
 </script>
 
-
-<!-- Big Red customer chat — lower-left, woman-avatar, vendor-redacted retail persona. -->
-<script data-bigred-widget src="https://chat.designerwallcoverings.com/widget.js"
-        data-host="https://chat.designerwallcoverings.com"
-        data-mode="retail"
-        defer onerror="this.remove()"></script>
-
 <script src="/corner-nav.js" defer></script>
 <script src="/sku-redact.js" defer></script>
+<!-- hero4-fix: activate 2x2 hero (self-contained; was commented placeholder) -->
+<script src="/hero-4grid.js" defer></script>
 </body>
 </html>

← d54a830 noopener,noreferrer on sister-site constellation window.open  ·  back to Vinylwallpaper  ·  fleet rebuild: dw-header (hamburgers UL + centered name) + u 5387536 →