Yourz fb32b9a5c5 fix(website): prevent HeroSection fade from bleeding into CloudBannerSection on /download (#11974) ...

*PR Created by the Glary-Bot Agent*

---

## Summary

The left side of `CloudBannerSection` on `/download` showed an
unintended fade-out: the bottom-left of the banner appeared darker than
the rest of the bar.

## Root cause

`product/local/HeroSection.vue` renders an SVG illustration whose
container has `lg:z-1` and whose SVG element has `overflow-visible`. The
SVG contains a left-edge fade `<rect x="300" y="150" width="250"
height="900" fill="url(#localHeroFadeLeft)" />` that paints outside the
SVG's `viewBox` (`400 200 550 800`) — including upward into the area
occupied by the preceding `CloudBannerSection`.

Because `CloudBannerSection` had `position: static` and `z-auto`, the
positively-stacked illustration painted over the banner's bottom-left,
producing the visible darkening.

## Fix

Establish a stacking context on `CloudBannerSection` (`relative z-20`)
so it always renders above the hero illustration's overflow on every
page that includes the banner (download, api, cloud/enterprise, and
zh-CN equivalents).

This is a minimal, isolated change to the shared component — no logic or
markup structure changes.

## Verification

- Reproduced visually at `lg` breakpoint and confirmed the fade is gone
after the fix.
- Verified `/download`, `/api`, `/cloud/enterprise`, and
`/zh-CN/download` render correctly.
- `pnpm typecheck` and `pnpm typecheck:website` pass (run automatically
by pre-commit hook).
- `oxfmt`, `oxlint`, `eslint`, `stylelint` all pass.

### Before
![Before — left side of CloudBannerSection darkens with a
fade](.glary/screenshots/before-download-top.png)

### After
![After — banner background is uniform across full
width](.glary/screenshots/after-download-fix.png)

## Follow-up

Consider adding a Playwright visual regression test for the banner/hero
seam on `/download` to catch future stacking regressions (called out by
review).

## Screenshots

![Before — CloudBannerSection on /download shows a darker fade on the
bottom-left of the
banner](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/5e82c32678dd22a4a48d5fa9d8b531f033d1f4ad6e0e286657e985266efd672c/pr-images/1777994095943-59c4d522-597b-49ff-a494-6a4bb52d76a0.png)

![After — CloudBannerSection on /download has uniform background across
its full width with no left-side
fade](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/5e82c32678dd22a4a48d5fa9d8b531f033d1f4ad6e0e286657e985266efd672c/pr-images/1777994096270-03017b24-b01f-49b9-8fa4-0a297c57253e.png)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11974-fix-website-prevent-HeroSection-fade-from-bleeding-into-CloudBannerSection-on-downloa-3576d73d3650813d8924fb54d5f78cee)
by [Unito](https://www.unito.io)

Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

2026-05-05 18:06:10 +00:00

..

desktop-ui

refactor: replace unsafe as Error assertions with type guards (#11845)

2026-05-04 11:40:28 -07:00

website

fix(website): prevent HeroSection fade from bleeding into CloudBannerSection on /download (#11974)

2026-05-05 18:06:10 +00:00