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

Mobile hero: raise the loop much higher behind the text

Browse Source 
Move the top-down fade start from 52% to 18% so the ambient reads behind the
headline (desktop-like presence) instead of tucked at the bottom.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 20:57:03 -07:00
parent ed1920255e
commit 29d2ab6ce0
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+1 -1
View File
@@ -148,7 +148,7 @@ a.tel { text-decoration: none; }
/* Loop OVERLAID as the hero background (not stacked below): full-bleed, rotated 90deg CW, /* Loop OVERLAID as the hero background (not stacked below): full-bleed, rotated 90deg CW,
faded from the top so the headline reads over paper and the ambient shows lower. Tint ::after still applies. */ 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%; .hero-media { left: 0; width: 100%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 52%); mask-image: linear-gradient(to bottom, transparent 0, #000 52%); } -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: 50%; 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); }
} }