Cleaner captures: normalize every page to minimal header (hamburger UL + person UR, no top tabs); re-render walkthrough

d354efd20d33210cc744ffae28979c0a73da9869 · 2026-07-28 13:25:43 -0700 · Steve Abrams

Files touched

M capture.mjs

Diff

commit d354efd20d33210cc744ffae28979c0a73da9869
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 28 13:25:43 2026 -0700

    Cleaner captures: normalize every page to minimal header (hamburger UL + person UR, no top tabs); re-render walkthrough
---
 capture.mjs | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/capture.mjs b/capture.mjs
index f1680dd..17558f7 100644
--- a/capture.mjs
+++ b/capture.mjs
@@ -59,6 +59,34 @@ async function shoot(role, creds, list, dir) {
       status = resp ? resp.status() : 0;
     } catch (e) { try { await page.waitForTimeout(1500); } catch {} }
     await page.waitForTimeout(1200); // let hero/data settle
+    // Normalize the header for clean captures: kill the old top-tab bars, overlay a single
+    // minimal header — hamburger (upper-left) + RENTV brand + person/sign-in icon (upper-right).
+    await page.addStyleTag({ content: `
+      #cap-header{position:sticky;top:0;z-index:99999;display:flex;align-items:center;justify-content:space-between;
+        height:64px;padding:0 24px;background:#fff;border-bottom:1px solid #e6eaef;box-shadow:0 1px 0 rgba(0,0,0,.02);
+        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
+      #cap-header .cap-brand{font-size:23px;font-weight:800;letter-spacing:.01em;color:#0d1b2a;text-decoration:none;}
+      #cap-header .cap-brand span{color:#c0392b;}
+      #cap-header button{background:none;border:0;cursor:pointer;color:#0d1b2a;display:inline-flex;align-items:center;padding:9px;border-radius:9px;}
+    ` });
+    await page.evaluate(() => {
+      const inDrawer = (el) => el.closest('.drawer,#drawer,aside');
+      // hide every existing top chrome + horizontal tab bar (but never the hamburger drawer contents)
+      document.querySelectorAll('header, nav, .util, .mast, .topnav, .top-tabs, .subnav, .tabs').forEach((el) => {
+        if (!inDrawer(el)) el.style.display = 'none';
+      });
+      if (!document.getElementById('cap-header')) {
+        const bar = document.createElement('div');
+        bar.id = 'cap-header';
+        bar.innerHTML =
+          '<button aria-label="Menu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg></button>'
+          + '<a class="cap-brand" href="/">REN<span>TV</span></a>'
+          + '<button aria-label="Sign in / up"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="3.6"/><path d="M4.5 20a7.5 7.5 0 0 1 15 0" stroke-linecap="round"/></svg></button>';
+        document.body.insertBefore(bar, document.body.firstChild);
+      }
+      window.scrollTo(0, 0);
+    });
+    await page.waitForTimeout(250);
     await page.screenshot({ path: file });
     manifest.push({ i, route, label, role, status, file });
     console.log(`  [${role}] ${pad(i)} ${route} -> ${status} ${label}`);

← 264d1c9 Add Steve cloned-voice narration (ElevenLabs) + re-pace tour · back to Rentv Tour · HeyGen: create Steve digital-twin avatar (photo-based) + AVA ffff638 →