[object Object]

← back to Norma Sdcc Pitch

add: browser-playable explainer video banner at top of pitch viewer — Steve's cloned voice, HTML5 <video>, served from /explainer.mp4 (17 MB)

51ce96845bcbb0e29f94011e339c5c2eaf8cd979 · 2026-05-20 09:29:32 -0700 · SteveStudio2

Files touched

Diff

commit 51ce96845bcbb0e29f94011e339c5c2eaf8cd979
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 20 09:29:32 2026 -0700

    add: browser-playable explainer video banner at top of pitch viewer — Steve's cloned voice, HTML5 <video>, served from /explainer.mp4 (17 MB)
---
 public/explainer.mp4 | Bin 0 -> 17294395 bytes
 public/index.html    |  15 +++++++++++++++
 public/styles.css    |  35 +++++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/public/explainer.mp4 b/public/explainer.mp4
new file mode 100644
index 0000000..23634a6
Binary files /dev/null and b/public/explainer.mp4 differ
diff --git a/public/index.html b/public/index.html
index b7e18d0..01460f3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,6 +41,21 @@
   <div class="topbar-progress"><div id="progress-bar"></div></div>
 </header>
 
+<!-- ───────────────────────────── video explainer ───────────────────────────── -->
+<section class="video-banner">
+  <div class="video-banner-inner">
+    <div class="video-meta">
+      <span class="video-kicker">▶ Three-minute explainer</span>
+      <h2>Watch the walkthrough first.</h2>
+      <p>Steve narrates the entire proposal — every section, every priority, every agent — in his own (cloned) voice. 2:54.</p>
+    </div>
+    <video controls preload="metadata" poster="" class="video-player" id="explainer-video">
+      <source src="/explainer.mp4" type="video/mp4">
+      Your browser does not support the video tag. <a href="/explainer.mp4">Download the MP4 (16 MB)</a>.
+    </video>
+  </div>
+</section>
+
 <!-- ───────────────────────────── hero ───────────────────────────── -->
 <section class="hero">
   <div class="hero-inner">
diff --git a/public/styles.css b/public/styles.css
index 5469b82..806c2d9 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -96,6 +96,41 @@ code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .85em; bac
   transition: width .4s ease;
 }
 
+/* ────── video banner ────── */
+.video-banner {
+  background: linear-gradient(135deg, #0d2e4d 0%, #1b4d7a 100%);
+  padding: 56px 32px;
+  border-bottom: 4px solid var(--sdcc-amber);
+}
+.video-banner-inner {
+  max-width: 1180px; margin: 0 auto;
+  display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center;
+}
+@media (max-width: 900px) {
+  .video-banner-inner { grid-template-columns: 1fr; gap: 24px; }
+}
+.video-meta { color: #fff; }
+.video-kicker {
+  display: inline-block;
+  background: var(--sdcc-amber); color: #0d2e4d;
+  padding: 5px 14px; border-radius: 999px;
+  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
+  margin-bottom: 16px;
+}
+.video-meta h2 {
+  font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 38px);
+  margin: 0 0 12px; color: #fff; letter-spacing: -.5px; line-height: 1.1;
+}
+.video-meta p {
+  margin: 0; font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.55;
+}
+.video-player {
+  width: 100%; max-width: 720px; height: auto;
+  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
+  border: 2px solid rgba(245,158,11,.4);
+  background: #000;
+}
+
 /* ────── hero ────── */
 .hero {
   background:

← 76506bb fix: demo mode short-circuit — when NORMA_BASE=demo, /api/ru  ·  back to Norma Sdcc Pitch  ·  add: section 11 Token Vault — 6 categories (AI / Email / Adv 948a924 →