From ed1920255ece4c7eb3c876463cf39bf1c9ede1c8 Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Mon, 22 Jun 2026 20:51:58 -0700 Subject: [PATCH] Mobile hero: overlay the loop as background, not a stacked strip Was position:relative on mobile, so it pushed down below the text. Make it the full-bleed hero background (inherits absolute inset), rotated 90deg CW and sized 100vh x 100vw so it covers after rotation, with a top->down mask so the headline reads over paper and the ambient shows lower. Co-Authored-By: Claude Opus 4.8 --- style.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index 8449bbe..bb2578b 100644 --- a/style.css +++ b/style.css @@ -144,11 +144,12 @@ a.tel { text-decoration: none; } .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; } .hero-video.is-playing { opacity: 1; } @media (max-width: 760px) { - .hero { min-height: 0; padding: 132px 0 64px; display: block; } - .hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 240px; margin-top: 1.6rem; overflow: hidden; - -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); } - /* Loop rotated 90deg CW, sized so it fills the landscape strip after rotation (tint ::after still applies) */ - .hero-video { position: absolute; top: 50%; left: 50%; width: 240px; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); } + .hero { min-height: 88vh; padding: 120px 0 56px; display: block; } + /* 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. */ + .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%); } + .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; }