Fix homepage hero orange background color mismatch#664
Open
RisingOrange wants to merge 5 commits intoPauseAI:mainfrom
Open
Fix homepage hero orange background color mismatch#664RisingOrange wants to merge 5 commits intoPauseAI:mainfrom
RisingOrange wants to merge 5 commits intoPauseAI:mainfrom
Conversation
👷 Deploy request for pauseai pending review.Visit the deploys page to approve it
|
…mages Replace the pre-faded hero images with background-removed PNGs and recreate the orange tint effect using CSS mix-blend-mode: soft-light over the existing #ff9416 background. This matches the original Figma design (orange background + image group with soft-light blend). Benefits: - Fixes Dark Reader two-tone artifact: both letterbox and image areas now go through the same rendering pipeline - Fixes Firefox color mismatch: no more CSS vs JPEG color profile split - Left/right fade-out recreated with mask-image gradient - isolation: isolate added to hero to contain the blend context
RisingOrange
force-pushed
the
fix/hero-css-blend
branch
from
a7586e1 to
f71b0ca
Compare
This was referenced Feb 21, 2026
Open
Merged
RisingOrange
changed the title
Collaborator
|
Hi, thanks a lot for working on this ! |
The mask-image gradient was applied relative to the img element's box (100vw×100vh with object-fit: contain), not the rendered image content. On ultra-wide viewports the image could be narrower than the element, so the fade happened at viewport edges instead of image edges. - Switch to position:absolute; width:min(100%, calc(max(100vh, var(--hero-min-height)) * var(--hero-img-ar))); height:auto so the element always matches the rendered image dimensions - Center with left:50%/translateX(-50%) for ultra-wide viewports - Update desktop landscape transform to translateX(-50%) scale(0.95) - Add -webkit-mask-image for older Safari/WebKit - Extract image AR into --hero-img-ar (2880/1600) for maintainability
Avoids repeating translateX(-50%) in the desktop media query override by introducing a --hero-scale custom property. Also inlines the 1.8 aspect ratio directly instead of keeping a named --hero-img-ar variable.
Contributor
Author
|
@Pato-desu Good point! Now the fading applies correctly to the image. I also added |
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
2 participants
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.
Closes #666
Summary
Fixes visual artifacts on the home page hero section where the orange background color appeared inconsistent — visible as a two-tone seam in Firefox and when using the Dark Reader extension.
mix-blend-mode: soft-lightover the existingbackground-color: #ff9416— matching the original Figma designmask-imagegradient (previously baked into the JPEG)isolation: isolateto.heroto contain the blend contextDark Reader (Chrome)
Firefox
Test plan