Skip to content

fix: homepage hero orange background color mismatch#664

Merged
Pato-desu merged 7 commits intoPauseAI:mainfrom
RisingOrange:fix/hero-css-blend
Mar 4, 2026
Merged

fix: homepage hero orange background color mismatch#664
Pato-desu merged 7 commits intoPauseAI:mainfrom
RisingOrange:fix/hero-css-blend

Conversation

@RisingOrange
Copy link
Contributor

@RisingOrange RisingOrange commented Feb 21, 2026 •
edited
Loading

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.

  • Replaces the pre-faded hero JPEGs with background-removed PNGs and recreates the orange tint using mix-blend-mode: soft-light over the existing background-color: #ff9416 — matching the original Figma design
  • Fixes the Dark Reader two-tone artifact: both the letterbox area and the image area now go through the same rendering pipeline
  • Fixes the Firefox color mismatch between CSS background color and JPEG image color profiles
  • Left/right fade-out on desktop recreated with mask-image gradient (previously baked into the JPEG)
  • On mobile, uses a bottom-to-top fade instead of lateral fade
  • Adds isolation: isolate to .hero to contain the blend context

Dark Reader (Chrome)

Before After
Before - Dark Reader After - Dark Reader

Firefox

Before After
Before - Firefox After - Firefox

Note: The orange shade looks slightly different between Chrome and Firefox screenshots — this is expected. Browsers apply different color management to CSS colors vs. image pixels, so the exact rendered hue varies. The fix ensures the letterbox area and the image area are consistent within each browser, which is what matters.

Mobile (bottom fade)

hero-mobile-iPhone-14

Test plan

  • Visually compare hero on Chrome and Firefox — orange should look consistent across letterbox and image areas
  • Test with Dark Reader enabled — no visible two-tone seam
  • Check mobile layout — bottom fade on image, no lateral fading
  • Check desktop at various viewport sizes/aspect ratios — lateral fade still present

@netlify
Copy link

netlify bot commented Feb 21, 2026 •
edited
Loading

✅ Deploy Preview for pauseai ready!

Name Link
🔨 Latest commit 3b3223d
🔍 Latest deploy log https://app.netlify.com/projects/pauseai/deploys/69a8a24d9bfa130008924c3d
😎 Deploy Preview https://deploy-preview-664--pauseai.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 83 (🟢 up 11 from production)
Accessibility: 90 (no change from production)
Best Practices: 92 (no change from production)
SEO: 99 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@RisingOrange
Fix hero orange seam: use CSS soft-light blend instead of pre-baked i…
dce3d9f 
…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
Remove pre-baked faded hero images, replaced by CSS soft-light blend
f71b0ca
@RisingOrange RisingOrange marked this pull request as draft February 21, 2026 20:06
@RisingOrange RisingOrange marked this pull request as ready for review February 21, 2026 20:43
This was referenced Feb 21, 2026
Closed
Merged
@RisingOrange RisingOrange changed the title Fix hero orange seam: use CSS soft-light blend instead of pre-baked images Fix homepage hero orange background color mismatch Feb 21, 2026
@Pato-desu
Copy link
Collaborator

Pato-desu commented Feb 23, 2026 •
edited
Loading

Hi, thanks a lot for working on this !
Can you make the images faded like they are in the live version? I used paint.net.
It's fine if you can't, I can probably do it this week.
I see there's fading logic that applies in the borders of the viewport, but they should be in the borders of the images themselves

@RisingOrange
Fix hero mask-image fading at image borders
c5e4f3a 
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
@RisingOrange
Merge origin/main into fix/hero-css-blend
f6d271f
@RisingOrange
Simplify hero image transform using --hero-scale variable
ff4eec8 
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.
@RisingOrange
Copy link
Contributor Author

RisingOrange commented Feb 23, 2026

@Pato-desu Good point! Now the fading applies correctly to the image.

I also added -webkit-mask-image for compatibility with older Safari/WebKit

@RisingOrange RisingOrange changed the title Fix homepage hero orange background color mismatch fix: homepage hero orange background color mismatch Feb 28, 2026
@Pato-desu
Copy link
Collaborator

Pato-desu commented Mar 4, 2026 •
edited
Loading

Sorry for responding so late, I assumed Nils was checking on all these PRs for some reason.
The only nitpick I have now is that I don't think the lateral fading is necessary on mobile. Instead, there was a fading on the bottom of the image on mobile. I think that would look better.

@RisingOrange
Copy link
Contributor Author

RisingOrange commented Mar 4, 2026 •
edited
Loading

@Pato-desu

The only nitpick I have now is that I don't think the lateral fading is necessary on mobile. Instead, there was a fading on the bottom of the image on mobile. I think that would look better.

Good idea! Added it: Use bottom fade on mobile hero image instead of lateral fade

@Pato-desu
Copy link
Collaborator

Pato-desu commented Mar 4, 2026

Perfect!

@Pato-desu Pato-desu merged commit 50cd099 into PauseAI:main Mar 4, 2026
5 checks passed
@RisingOrange RisingOrange deleted the fix/hero-css-blend branch March 4, 2026 21:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Homepage hero section: orange background shows visible seam in Firefox or with Dark Reader

2 participants

@RisingOrange @Pato-desu