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

SW hero: subtle binder-stack background video (Adobe Stock 35598738) at 0.45 opacity with a left paper scrim protecting the headline; muted/loop/playsinline + poster + reduced-motion + mobile dimming. ~817KB mp4. Verified locally. Staging/preview only.

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-24 23:09:43 -07:00
parent f122207f0c
commit 61c3bbb421
4 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+4
View File
@@ -134,6 +134,10 @@ a.tel { text-decoration: none; }
.hero { background: var(--paper); position: relative; min-height: min(82vh, 760px); display: flex; align-items: center; padding: 150px 0 96px; }
.hero-wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { margin-bottom: 0.35em; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 1; opacity: 0.45; pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--paper) 40%, rgba(247,244,239,0.5) 68%, rgba(247,244,239,0.06) 100%); }
@media (max-width: 640px) { .hero-video { opacity: 0.22; } .hero::after { background: linear-gradient(180deg, rgba(247,244,239,0.72), rgba(247,244,239,0.42)); } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.lead { font-size: 1.25rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 2.4em; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }