diff --git a/assets/media/hero-loop.mp4 b/assets/media/hero-loop.mp4 index 52fa8f6..2a8a7a5 100644 Binary files a/assets/media/hero-loop.mp4 and b/assets/media/hero-loop.mp4 differ diff --git a/assets/media/preview-a.mp4 b/assets/media/preview-a.mp4 new file mode 100644 index 0000000..d9f3c98 Binary files /dev/null and b/assets/media/preview-a.mp4 differ diff --git a/assets/media/preview-b.mp4 b/assets/media/preview-b.mp4 new file mode 100644 index 0000000..f00d055 Binary files /dev/null and b/assets/media/preview-b.mp4 differ diff --git a/assets/media/preview-c.mp4 b/assets/media/preview-c.mp4 new file mode 100644 index 0000000..75934df Binary files /dev/null and b/assets/media/preview-c.mp4 differ diff --git a/hero-previews.html b/hero-previews.html new file mode 100644 index 0000000..78fecaf --- /dev/null +++ b/hero-previews.html @@ -0,0 +1,82 @@ + + + + + + +OC hero — video comparison + + + + + + + +
OC hero — video comparison · all at 50% opacity, full-cover · scroll to compare
+ +
+ Current · waves · 1457104053 +
+

The human side of change · for Canadian manufacturers

+

The systems are the easy part.

+

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.

+
Book a conversationSee how we work
+

or call 778‑985‑OPEN (6736)

+
+ +
+ +
+ Option A · 999841648 +
+

The human side of change · for Canadian manufacturers

+

The systems are the easy part.

+

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.

+
Book a conversationSee how we work
+

or call 778‑985‑OPEN (6736)

+
+ +
+ +
+ Option B · 1931396923 +
+

The human side of change · for Canadian manufacturers

+

The systems are the easy part.

+

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.

+
Book a conversationSee how we work
+

or call 778‑985‑OPEN (6736)

+
+ +
+ +
+ Option C · 1899613703 +
+

The human side of change · for Canadian manufacturers

+

The systems are the easy part.

+

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.

+
Book a conversationSee how we work
+

or call 778‑985‑OPEN (6736)

+
+ +
+ + + + diff --git a/index.html b/index.html index 4268807..608731b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Open Communications | The Human Side of Change — for Canadian Manufacturers diff --git a/style.css b/style.css index ba50f5d..408afe7 100644 --- a/style.css +++ b/style.css @@ -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; }