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

Hero loop: lighten it for text legibility

Browse Source 
Wash the loop back into the paper so text reads cleanly over it (matters most on
mobile where text overlays the loop): drop the playing opacity to .5 (blends with
the paper bg) and flip the tint overlay from darkening multiply to a light paper
wash (.2). Tunable via those two values.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 21:46:32 -07:00
parent 71219bde63
commit b79f5f6031
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+2 -2
View File
@@ -138,9 +138,9 @@ a.tel { text-decoration: none; }
position: absolute; top: 0; right: 0; bottom: 0; width: 56%; position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
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; background: var(--paper); opacity: .12; mix-blend-mode: multiply; pointer-events: none; } .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; transform: scale(1.7) translateY(-16%); transform-origin: center; }
.hero-video.is-playing { opacity: 1; } .hero-video.is-playing { opacity: .5; }
@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,