Homepage hero section: orange background shows visible seam in Firefox and with Dark Reader #666
Description
The home page hero section shows a visible two-tone seam between the orange letterbox area (above the protest image) and the image itself. This is caused by the CSS background-color and the pre-baked JPEG going through different color pipelines in the browser.
Fixed in #664 by replacing the pre-baked JPEGs with background-removed PNGs and recreating the orange tint using mix-blend-mode: soft-light over the CSS background color, so both regions go through the same rendering pipeline.
Screenshots
The "After" screenshots are from the PR branch.
Dark Reader (Chrome)
| Before | After |
|---|---|
 |
 |
Firefox
| Before | After |
|---|---|
 |
 |
Note: The orange shade looks slightly different between Chrome and Firefox — this is expected, because browsers show colours slightly differently. The fix ensures the letterbox area and image area are consistent within each browser, which is what matters.