MCC promo v3: DTD fix — hub screenshots as intentional app-windows, zoom-cropped to read on phone (9:16+4:5+1:1)

eacbee8692e56ece878931f1f237412a03e18be9 · 2026-08-12 16:06:25 -0700 · Steve

Files touched

M videos/mcc-streamline-promo/index.html

Diff

commit eacbee8692e56ece878931f1f237412a03e18be9
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 12 16:06:25 2026 -0700

    MCC promo v3: DTD fix — hub screenshots as intentional app-windows, zoom-cropped to read on phone (9:16+4:5+1:1)
---
 videos/mcc-streamline-promo/index.html | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/videos/mcc-streamline-promo/index.html b/videos/mcc-streamline-promo/index.html
index 4567ecf..ad530bf 100644
--- a/videos/mcc-streamline-promo/index.html
+++ b/videos/mcc-streamline-promo/index.html
@@ -37,6 +37,19 @@
         border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(20,17,15,.45);
         will-change:transform,opacity; }
       .card img { width:100%; display:block; }
+      /* app-window frame — makes the landscape UI an INTENTIONAL window (title bar +
+         dots) and zoom-crops it so it reads on a phone, not a letterboxed thumbnail */
+      .winfr { width:980px; border-radius:20px; overflow:hidden; background:#fff;
+        border:1px solid var(--line); box-shadow:0 46px 104px -34px rgba(20,17,15,.5);
+        will-change:transform,opacity; }
+      .winbar { height:46px; background:linear-gradient(#fbf9f5,#f1ece2); border-bottom:1px solid var(--line);
+        display:flex; align-items:center; gap:11px; padding:0 20px; }
+      .winbar .wd { width:14px; height:14px; border-radius:50%; }
+      .winbar .wd:nth-child(1){ background:#cf8a68; }
+      .winbar .wd:nth-child(2){ background:var(--gold-soft); }
+      .winbar .wd:nth-child(3){ background:#9fae93; }
+      .winbody { width:100%; aspect-ratio:4/3; overflow:hidden; background:#fff; }
+      .winbody img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
 
       .kicker { font-size:26px; letter-spacing:.34em; text-transform:uppercase; color:#6f4030; font-weight:600; }
       .display { font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--ink); line-height:.98; }
@@ -93,19 +106,19 @@
       <!-- BEAT 3 — Compose -->
       <div id="b3" class="clip stage" data-start="5.1" data-duration="3.5" data-track-index="1">
         <div class="beatlbl"><div class="k">Smart hub · 1</div><div class="t"><i>Compose</i></div></div>
-        <div class="card" id="b3c" style="width:840px"><img src="assets/img/compose-m.png" alt=""></div>
+        <div class="winfr" id="b3c"><div class="winbar"><span class="wd"></span><span class="wd"></span><span class="wd"></span></div><div class="winbody"><img src="assets/img/compose-m.png" alt=""></div></div>
       </div>
 
       <!-- BEAT 4 — Calendar -->
       <div id="b4" class="clip stage" data-start="8.4" data-duration="2.3" data-track-index="3">
         <div class="beatlbl"><div class="k">Smart hub · 2</div><div class="t"><i>Calendar</i></div></div>
-        <div class="card" id="b4c"><img src="assets/img/calendar.png" alt=""></div>
+        <div class="winfr" id="b4c"><div class="winbar"><span class="wd"></span><span class="wd"></span><span class="wd"></span></div><div class="winbody"><img src="assets/img/calendar.png" alt=""></div></div>
       </div>
 
       <!-- BEAT 5 — Insights -->
       <div id="b5" class="clip stage" data-start="10.5" data-duration="3.1" data-track-index="1">
         <div class="beatlbl"><div class="k">Smart hub · 3</div><div class="t">8 tools, <i>one Insights tab</i></div></div>
-        <div class="card" id="b5c"><img src="assets/img/insights.png" alt=""></div>
+        <div class="winfr" id="b5c"><div class="winbar"><span class="wd"></span><span class="wd"></span><span class="wd"></span></div><div class="winbody"><img src="assets/img/insights.png" alt=""></div></div>
       </div>
 
       <!-- BEAT 6 — outro -->

← 517468b Stage MCC streamline promo social DRAFTS (TikTok/IG/FB) — ca · back to Marketing Command Center · Easy Post buttons: shared stage-a-draft component + Quick Po f8591dc →