Home Entrance Spec: Happy Mobile Life on shevegas.com
Date: 2026-10-26
Summary: Spec for the transit entrance on the home page.
Home entrance spec: Happy Mobile Life on shevegas.com (2026-10-26)
For Sites. Preview only, Mike approves before anything ships. Patch: home-entrance.patch (diff vs a crew working folder src/pages/index.astro; checkout untouched). Apply: git apply a crew working folder. Mock:mock.html, phone shothome-entrance-phone.png` (390x844, frame at 3.2s).
Placement
- Markup goes right after
</header>(line 106, closing the<header class="hero" id="top">with /hero-jump.mp4), before<section class="find" id="find">(line 108). The hero is not touched. - CSS is appended inside the existing
<style>block, just before</style>(line 86). - Optional: none of the hero CTAs change. A builder may add
#happy-mobile-lifeto nav later if Mike wants.
Layout (390px)
Full-bleed black band (.hml, max-width:none overrides the site's section width), 4px #FFD400 top rule, centered stack, no boxes:
1. CONCEPT SITE outline pill: 13px/800, #FFD400 1px border, 999px radius.
2. Smiley SVG 168px (220px desktop), #FFD400 on black, pops in.
3. "HAPPY MOBILE LIFE": h2 900 weight, clamp(52px,15vw,120px)/.92, -.03em, uppercase, #FFD400.
4. "Riding is free. Just get on.": 22px/700 white, max 16ch, balanced.
5. Four route lines drawing left to right, edge to edge: Vegas Red #C42E2A, smiley #FFD400, sign blue #1F78C8 (the site's existing --blue), gold #E4B94C. 8px strokes, 64px tall.
6. One tap target: a 64px #FFD400 pill, "Ride Happy Mobile Life", black 20px/900, max 360px wide, links to /transit/live/.
7. Quiet text link "The Story: how we designed it", 17px white, gold underline, links to /transit/story/.
Padding is 56px 22px 64px (96px 40px 104px at 900px and up).
Motion (CSS only, no libraries, no images)
- Smiley
hmlPop: .7s cubic-bezier(.34,1.56,.64,1), delay .1s, scale .2 at -25° to 1.15 at 6° to 1. - Lines
hmlDraw: stroke-dashoffset 420 to 0 over 2.4s ease-out, staggered .25s. - Button
hmlPulse: a soft yellow ring (0 to 18px, fading) every 2.6s, starting after the lines finish. prefers-reduced-motion: reduceturns all animation off, shows the lines fully drawn and keeps the smiley static. Weight: about 2 KB of inline SVG and CSS.
Copy and sources (no new facts, nothing invented)
- "CONCEPT SITE": public/transit/live/index.html banner ("CONCEPT SITE: a preview of how the service could work").
- "Happy Mobile Life": the product name, used across public/transit/live/*.
- "Riding is free. Just get on.": public/transit/live/index.html (the .free banner).
- "The Story: how we designed it": public/transit/live/index.html (Get around list).
- "Ride Happy Mobile Life": the CTA wording from the brief (product name plus a verb, no claim).
- NOTE: "Fare-free for everybody. Always." does not exist verbatim in the transit pages. The closest lines are "Fare-free everywhere, always" (public/transit/live/county/index.html) and "Fare-free for everybody, always, from day one" (in the story pages). I didn't use it; swap one in only if Mike wants it.