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
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; }