← back to Retrowalls

hero: activate self-contained 2x2 hero-4grid (fleet sweep, local)

1f440031e7dc6c2b4f327f899156c85c5c105b12 · 2026-06-01 13:36:31 -0700 · Steve

Files touched

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

Diff

commit 1f440031e7dc6c2b4f327f899156c85c5c105b12
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 1 13:36:31 2026 -0700

    hero: activate self-contained 2x2 hero-4grid (fleet sweep, local)
---
 public/hero-4grid.js | 12 ++++++++++--
 public/index.html    |  2 ++
 2 files changed, 12 insertions(+), 2 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 80d2335..faa186f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1443,5 +1443,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
 
 <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>

← 92b10d4 Remove Big Red widget — never UX-worked, collided with Help  ·  back to Retrowalls  ·  Revert "Remove Big Red widget — never UX-worked, collided wi b877cdb →