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

Inga hero: full-bleed balanced waves (was right-shoved)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 22:42:18 -07:00
parent a26d1cee79
commit fd54788084
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+4 -3
View File
@@ -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); } font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-creds span { position: relative; } .hero-creds span { position: relative; }
.hero-creds span + span::before { content: "·"; position: absolute; left: -.75rem; color: var(--accent); } .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 { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; background: var(--paper); }
.hero-media::after { content: ""; position: absolute; inset: 0; .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; .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
opacity: 0; transition: opacity 1.1s ease; } opacity: 0; transition: opacity 1.1s ease; }
.hero-video.is-playing { opacity: .5; } .hero-video.is-playing { opacity: .48; }
/* ---- symptom list ---- */ /* ---- symptom list ---- */
.checklist { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .85rem; } .checklist { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .85rem; }