# Sticky mobile CTA bar > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A short product page for Sprout, a fictional houseplant starter kit, framed at **390×844** (`mobile-web`). The Lounge draws the phone chrome, so the page leaves **54px** at the top and **34px** at the bottom clear of fixed UI. A sticky bottom bar sits on that 34px inset: expanded it shows a one-line description, the price, and "Add to bag"; after the page scrolls **72px** the description collapses to `max-height: 0` and the bar shortens. Price and button never leave. One family, Sora. Coral `#d4533e` is the only saturated colour; leaf green is reserved for the kicker and icons. ## Reference behaviour 1. Initial state: cool off-white `#f4f5f2`. Top inset 54px, then a 52px sticky nav ("Sprout" + Kit). Hero: 11px uppercase kicker "Houseplant kit · ships Thursday", 32px/600 title "Starter kit for a first windowsill", 15px lede, a 168px CSS seedling illustration, `$48` with "one kit · free post over $40". 2. Sticky CTA bar is `position: fixed; left: 0; right: 0; bottom: 34px` (or `env(safe-area-inset-bottom, 34px)`). Surface white, 1px top hairline, padding 12/20, grid `1fr auto` with the description spanning both columns on row 1. Description: "Starter kit · 12 weeks of seed. Ships Thursday." Price `$48` + "incl. post". Button 48px tall, pill, coral, 14px/600 "Add to bag", min-width 128px. 3. On `scroll`, if `scrollY > 72`, add `.compact` to the bar: padding 10/20, description `max-height: 0; opacity: 0`, hide the "incl. post" small. Price and button stay on one row. If `scrollY ≤ 72`, remove `.compact`. Nav gets `.stuck` (1px bottom border) when `scrollY > 8`. 4. Body padding-bottom is `34px + 92px + 8px` so the last review is not hidden behind the expanded bar. 5. Add to bag writes "Starter kit added · $48" into a toast (`role="status"`) above the bar, shown 2200ms. Toast does not persist. 6. Reduced motion: `scroll-behavior: auto`; bar, description, toast and button transitions become 1ms. Compact still toggles, no lag. 7. Hit targets: nav links 40px-class padding, button 48px, bar remains tappable in compact (button stays 48px). ## Structure ``` 390 × 844 ┌─────────────────────────────┐ │ (54px lounge status) │ │ Sprout Kit │ sticky 52, top: 54 │ HOUSEPLANT KIT · SHIPS… │ │ Starter kit for a first │ h1 32/600 │ windowsill │ │ Soil, a 12-week seed tin… │ │ ┌─────────────────────────┐ │ mock 168, CSS plant │ └─────────────────────────┘ │ │ $48 one kit · free post │ │ IN THE BOX │ │ • 2.4 L living soil │ │ • Seed tin, 12 weeks │ │ • Watering plan │ │ FROM A WINDOWSILL IN PORTO │ │ two review cards │ │─────────────────────────────│ │ Starter kit · 12 weeks of seed. Ships Thursday. │ desc, hides when compact │ $48 [Add to bag]│ always visible │ (34px lounge home) │ bar bottom: 34 └─────────────────────────────┘ ``` - `