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

Hero: revert zoom (full-cover/full-res), keep 50% opacity; navy theme-color; add video comparison page

Browse Source 
- Revert the scale/translate zoom that softened the loop and pulled it off the
  edges; back to full-cover (full res). Re-encoded current loop at 1080p (2.4MB).
- Keep the 50% opacity lightening. Mobile loop back to centered (left:50%).
- theme-color -> navy (#0f1729) so the mobile address-bar UI is dark blue, not amber.
- Add hero-previews.html: 4 hero options (current + A/B/C) at 50%, full-cover, noindex,
  for side-by-side comparison. Preview videos are temporary.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 21:55:11 -07:00
parent b79f5f6031
commit 5c6cbde329
7 changed files with 85 additions and 3 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
@@ -0,0 +1,82 @@
<!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>
index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f5f2ec">
<meta name="theme-color" content="#0f1729">
<title>Open Communications | The Human Side of Change — for Canadian Manufacturers</title>
<meta name="description" content="The systems are the easy part. Open Communications helps the people in your shop trust the change, share what they know, and lead through it — so the work actually sticks. The human side of ShopWisdom.">
<link rel="preconnect" href="https://fonts.googleapis.com">
style.css
+2 -2
View File
@@ -139,7 +139,7 @@ a.tel { text-decoration: none; }
z-index: 1; pointer-events: none; background: var(--paper);
}
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .2; pointer-events: none; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; transform: scale(1.7) translateY(-16%); transform-origin: center; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; }
.hero-video.is-playing { opacity: .5; }
@media (max-width: 760px) {
.hero { min-height: 88vh; padding: 120px 0 56px; display: block; }
@@ -147,7 +147,7 @@ a.tel { text-decoration: none; }
faded from the top so the headline reads over paper and the ambient shows lower. Tint ::after still applies. */
.hero-media { left: 0; width: 100%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
.hero-video { position: absolute; top: 50%; left: 34%; width: 100vh; height: 100vw; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
.hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
}
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }