style(home): clean 80%-to-bottom linear fade on play homepage banner#301
Merged
Conversation
Tim 2026-06-05 (after the marketing publish): > it should fade out to transparent at the bottom so it blends in > nicely and we don't get this kind of line where the first > paragraph is under the heading in the bottom 20% of the banner > image. You just fade that from the 20% point at the bottom down > to the very bottom, gradient fade to transparent. The existing mask had three stops (opaque to 68%, half-opacity at 88%, transparent at 100%) which left a visible threshold band around the lede. Rewritten as a straight linear ramp from 80% opaque to 100% transparent so the player-photo edge dissolves into the page background. Both -webkit- and unprefixed mask-image forms updated together so iOS Safari + every chromium fork picks it up. CSS-only, one rule (.vt-home-hero-bg). Headline-area dark overlay above the mask is unchanged so legibility on the upper 80% is unaffected. Signed-off-by: Tim Thomas <0800tim@gmail.com>
Auto-triage: GREEN — auto-triage clearRisk score: 0/100
No flags raised by the automated scanners. A human reviewer will still take a look. Labels applied: Posted by |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tim 2026-06-05 (post marketing publish): the existing banner mask had three stops (opaque to 68%, half-opacity at 88%, transparent at 100%) which left a visible threshold band where the lede paragraph crossed the player-photo edge. Rewritten as a straight linear ramp from 80% opaque to 100% transparent so the photos dissolve into the page background cleanly.
CSS-only, one rule (
.vt-home-hero-bg). Both-webkit-mask-imageandmask-imageupdated together.