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

Hero: full-bleed waves like the Inga treatment; drop left-edge blend; more transparent

Browse Source 
Mike: no left-edge blend on OC, match the Inga (full-bleed, balanced) version, and
make the loops more transparent. Desktop waves go full-bleed with the gentle top/
bottom paper fade (no horizontal fade), opacity .5 -> .35. Mobile C .5 -> .4.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 22:47:26 -07:00
parent 2c61b75a77
commit 6e50927537
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+4 -4
View File
@@ -135,12 +135,12 @@ a.tel { text-decoration: none; }
.hero-wrap { position: relative; z-index: 2; width: 100%; } .hero-wrap { position: relative; z-index: 2; width: 100%; }
.hero-col { max-width: 600px; } .hero-col { max-width: 600px; }
.hero-media { .hero-media {
position: absolute; top: 0; right: 0; bottom: 0; width: 56%; position: absolute; inset: 0;
z-index: 1; pointer-events: none; background: var(--paper); z-index: 1; pointer-events: none; background: var(--paper);
} }
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--paper) 0%, rgba(247,244,239,0) 30%); } .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(247,244,239,.35) 0%, rgba(247,244,239,0) 22%, rgba(247,244,239,0) 78%, var(--paper) 100%); }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; } .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; }
.hero-video.is-playing { opacity: .5; } .hero-video.is-playing { opacity: .35; }
@media (max-width: 760px) { @media (max-width: 760px) {
.hero { min-height: 88vh; padding: 120px 0 56px; display: block; } .hero { min-height: 88vh; padding: 120px 0 56px; display: block; }
/* 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,
@@ -149,7 +149,7 @@ a.tel { text-decoration: none; }
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); } -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
.hero-media::after { background: rgba(247,244,239,.2); } /* flat lightening wash on mobile (no desktop left-fade) */ .hero-media::after { background: rgba(247,244,239,.2); } /* flat lightening wash on mobile (no desktop left-fade) */
.hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: normal; } .hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: normal; }
.hero-video.is-playing { opacity: .5; } .hero-video.is-playing { opacity: .4; }
} }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }