类型：Site模板 · 收录：2026-10-26 23:38:50 · 源码：会员可见
# Prompt: zeno global business-banking hero ("Blossom Mist")
Build a single-file, one-screen **landing hero for a fictional global business bank, zeno**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is soft, airy and pastel: a blurred pink ambient backdrop, a tall rounded photo panel in the centre of a glass skyscraper rising out of mist above cherry blossoms at a pink dawn, and a big pale geometric zeno mark over the tower. A centred headline sits on the left and a short pitch with a dark CTA on the right.
## Scale
- **Reference:** an 886×523 frame. Every value is in reference pixels × `--u = min(100vw/886, 100dvh/523)`.
- **Wide screens:** height-driven.
- **Tall screens:** the panel absorbs the extra height, so there is never empty space at the top or bottom.
## Type and colour
- **Font:** **Figtree** (variable 300–900).
- **Colours:**
- page `#FBEFF2`
- ink `#0A1624`; soft rose for headline lines 3–4 `#C98794`
- body text `#272D35`, nav links `#6F8094`
- dark buttons `#08182B`
- logo and accent rose `#B3505F` / `#E57A8C`
- panel fog `rgb(249,228,234)`
## Background
- **Ambient:** a full-bleed, softly blurred pink ambient image: rosy glows top and bottom, white in the middle band.
## Header
- **Logo:** the rose angular "z" glyph and the "zeno" wordmark (Figtree 500).
- **Nav:** centred grey links "Features · Solution · Pricing · Contact".
- **Buttons:** right side, "Login" white and "Sign in" dark navy, both small rectangles.
- **Phone:** a burger menu.
## Layout
- **Left:** a centred headline at about 31u, in four lines: "Your company / operates globally." in ink, then "Your bank / should too." in soft rose.
- **Centre panel:** a tall rounded rectangle about 135u wide that runs from below the nav to the bottom edge.
- **Photo:** cover-fit. A slender glass skyscraper with a thin spire rises from soft mist, with pastel lilac mountains behind, pink cherry blossom branches in the lower corners and a pink-to-lilac dawn sky.
- **Mark:** the zeno mark (an angular "z": two diagonal ribbons plus a rounded bottom bar) in white at 86% opacity, in the middle of the panel.
- **Tower in front of the mark:** a duplicate of the same tower as a background-removed cut-out (transparent PNG, the exact same framing and size as the photo) is stacked above the mark, so the layers are photo → mark → tower cut-out. The cut-out is pixel-aligned with the tower in the photo, so it reads as one building rising in front of the mark. Its base fades out into the mist just below the mark.
- **Fog:** the panel fades into the fog colour at the bottom.
- **Badge:** a small frosted white badge near the bottom: "Backed by:" plus a rose four-point star and "Northstar Labs".
- **Right:** "Local IBANs, international / payments, corporate cards. 0% / FX Markup." centred, then a dark "Sign up →" button below.
## Motion
- **Entrance:** CSS keyframes, gated by `entrance-ready`, about 2.2s.
- The logo, nav and buttons fade down.
- The panel rises and unclips over 1.46s.
- The headline lines rise in turn.
- The pitch and CTA follow, then the badge pops in last.
- **Hover:** the CTA lifts.
- **Reduced motion:** no entrance.
## Responsive
- **Phone:** the headline comes first, then the pitch and CTA, then the panel, full width. The badge scales with the panel's container.
## Acceptance check (1440×960)
- The pink blurred ambient fills the page, with the tall blossom-and-mist tower panel centred and the white zeno mark sitting behind the tower, which rises in front of it.
- The headline is on the left and the pitch with "Sign up" is on the right.
- **Content:** no real brands or backers.