mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero: adopt Option C (dotted particle wave) as the loop; remove comparison gear

Browse Source 
Point hero-loop.mp4 at Option C (AdobeStock_1899613703, 1080p, ~2MB). Existing
treatment already fills the bg (object-fit cover) and rotates 90deg CW on mobile,
both at 50% opacity. Remove hero-previews.html + the spare preview-a/b/c clips.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 21:59:26 -07:00
parent 5c6cbde329
commit 6fd9eaa50f
5 changed files with 0 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/media/hero-loop.mp4
BIN
View File
Binary file not shown.
assets/media/preview-a.mp4
BIN
View File
Binary file not shown.
assets/media/preview-b.mp4
BIN
View File
Binary file not shown.
assets/media/preview-c.mp4
BIN
View File
Binary file not shown.
hero-previews.html
-82
View File
@@ -1,82 +0,0 @@
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>OC hero — video comparison</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap">
<link rel="stylesheet" href="style.css">
<style>
.pv-bar { position: sticky; top: 0; z-index: 200; background: #0f1729; color: #f7f4ef; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; padding: 10px 24px; text-align: center; }
.pv-label { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 60; background: #0f1729; color: #f7f4ef; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; white-space: nowrap; }
.hero + .hero { border-top: 1px solid rgba(15,23,41,0.08); }
</style>
</head>
<body>
<div class="pv-bar">OC hero — video comparison · all at 50% opacity, full-cover · scroll to compare</div>
<section class="hero" data-bg="light">
<span class="pv-label">Current · waves · 1457104053</span>
<div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">The human side of change · for Canadian manufacturers</p>
<h1>The systems are the <em>easy part.</em></h1>
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
<div class="actions"><a class="btn" href="#">Book a conversation</a><a class="btn link" href="#">See how we work</a></div>
<p class="call">or call 778&#8209;985&#8209;OPEN (6736)</p>
</div></div>
<div class="hero-media" aria-hidden="true"><video class="hero-video pv-vid" loop muted playsinline style="opacity:.5"><source src="assets/media/hero-loop.mp4" type="video/mp4"></video></div>
</section>
<section class="hero" data-bg="light">
<span class="pv-label">Option A · 999841648</span>
<div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">The human side of change · for Canadian manufacturers</p>
<h1>The systems are the <em>easy part.</em></h1>
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
<div class="actions"><a class="btn" href="#">Book a conversation</a><a class="btn link" href="#">See how we work</a></div>
<p class="call">or call 778&#8209;985&#8209;OPEN (6736)</p>
</div></div>
<div class="hero-media" aria-hidden="true"><video class="hero-video pv-vid" loop muted playsinline style="opacity:.5"><source src="assets/media/preview-a.mp4" type="video/mp4"></video></div>
</section>
<section class="hero" data-bg="light">
<span class="pv-label">Option B · 1931396923</span>
<div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">The human side of change · for Canadian manufacturers</p>
<h1>The systems are the <em>easy part.</em></h1>
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
<div class="actions"><a class="btn" href="#">Book a conversation</a><a class="btn link" href="#">See how we work</a></div>
<p class="call">or call 778&#8209;985&#8209;OPEN (6736)</p>
</div></div>
<div class="hero-media" aria-hidden="true"><video class="hero-video pv-vid" loop muted playsinline style="opacity:.5"><source src="assets/media/preview-b.mp4" type="video/mp4"></video></div>
</section>
<section class="hero" data-bg="light">
<span class="pv-label">Option C · 1899613703</span>
<div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">The human side of change · for Canadian manufacturers</p>
<h1>The systems are the <em>easy part.</em></h1>
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
<div class="actions"><a class="btn" href="#">Book a conversation</a><a class="btn link" href="#">See how we work</a></div>
<p class="call">or call 778&#8209;985&#8209;OPEN (6736)</p>
</div></div>
<div class="hero-media" aria-hidden="true"><video class="hero-video pv-vid" loop muted playsinline style="opacity:.5"><source src="assets/media/preview-c.mp4" type="video/mp4"></video></div>
</section>
<script>
(function () {
var vids = [].slice.call(document.querySelectorAll('.pv-vid'));
function play(v) { var p = v.play(); if (p && p.catch) p.catch(function(){}); }
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (es) {
es.forEach(function (e) { if (e.isIntersecting) play(e.target); else e.target.pause(); });
}, { threshold: 0.25 });
vids.forEach(function (v) { io.observe(v); });
} else { vids.forEach(play); }
})();
</script>
</body>
</html>