From fd54788084247492f4481662bbe5eb8926022696 Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Mon, 22 Jun 2026 22:42:18 -0700 Subject: [PATCH] Inga hero: full-bleed balanced waves (was right-shoved) The left->right paper fade hid the left side of the wave band and made it look right-justified under the left-aligned headline. The wave band naturally spans full width in the lower half, so go full-bleed with only a gentle top/bottom paper fade: headline clean up top, waves flowing balanced across the bottom. Co-Authored-By: Claude Opus 4.8 --- style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 3486c20..e11ddd9 100644 --- a/style.css +++ b/style.css @@ -112,13 +112,14 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; } font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .hero-creds span { position: relative; } .hero-creds span + span::before { content: "·"; position: absolute; left: -.75rem; color: var(--accent); } -/* ambient hero loop (thin-line wave flow) — paper-blended on the left so text stays clean */ +/* ambient hero loop (thin-line wave flow) — full-bleed, balanced; the wave band sits + in the lower half so the headline stays clean. Gentle top/bottom paper fade only. */ .hero-media { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; background: var(--paper); } .hero-media::after { content: ""; position: absolute; inset: 0; - background: linear-gradient(100deg, var(--paper) 24%, rgba(246,245,242,.55) 46%, rgba(246,245,242,0) 72%); } + background: linear-gradient(to bottom, rgba(246,245,242,.35) 0%, rgba(246,245,242,0) 22%, rgba(246,245,242,0) 78%, var(--paper) 100%); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1.1s ease; } -.hero-video.is-playing { opacity: .5; } +.hero-video.is-playing { opacity: .48; } /* ---- symptom list ---- */ .checklist { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .85rem; }