LINE 7 — TRANSIT demo
LINE 7 — TRANSIT

A transit-inspired animated interface using grid layouts and keyframe motion to evoke metro signage and route diagrams.
Category: Data & Engineering
Era: 2020s Modern
Prompt: 15.6 KB · 2169 words
# CODING AGENT BUILD SPECIFICATION — LANDING PAGE: "LINE 7 — TRANSIT"

**ROLE & OBJECTIVE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready Landing Page defined below on the first attempt — full HTML, CSS, and JS for every section and every component state. No stubs, no TODOs, no lorem ipsum. Where any habit of yours conflicts with a rule in this document, the rule wins.

---

## 0. PROJECT BRIEF & THEME DEFINITION

**0.1 Theme Concept**
- Build an interactive/animated landing page for **"LINE 7 — TRANSIT"** — a fictional contemporary metro service. The design language is 2020s transit wayfinding: route maps, station dots, departure-board typography, ticket-gate geometry, and a continuous "journey" motif.
- The signature visual device is a **route line**: a gradient line with animated station dots that visually connects sections like stops on a metro line. Build it purely with CSS (gradients, pseudo-elements, keyframes) — **no inline SVGs**.

**0.2 Page Sections (build all, in this order)**
1. Sticky Header/Nav (theme toggle + mobile menu)
2. Hero
3. Features — 3 cards
4. How It Works — 3 steps
5. Testimonials
6. Pricing — 3 tiers
7. FAQ — accordion
8. Final CTA — email capture
9. Footer — secondary links

**0.3 Palette Mapping (bind exactly to the tokens in §1.2)**

*Light mode (default presentation):*
- `--bg-primary: #efe9dc` · `--bg-secondary: #e4dcc9` · `--text-primary: #26221c` · `--text-secondary: rgba(38, 34, 28, 0.72)`
- `--primary: #d94f3d` (transit red — brand action color) · `--secondary: #1e9e6a` (line green) · `--accent: #e0a526` (amber — badges/highlights)
- `--text-success / --border-success: #1e9e6a` · `--text-error / --border-error: #d94f3d` · `--border-default: rgba(38, 34, 28, 0.15)`

*Dark mode (mandatory — see §1.3):*
- `--bg-primary: #1b1813` · `--bg-secondary: #26221c` · `--text-primary: #efe9dc` · `--text-secondary: rgba(239, 233, 220, 0.72)` · `--border-default: rgba(239, 233, 220, 0.16)`
- Accent hues stay recognizable but must be lightened for WCAG AA contrast in dark mode (e.g., `--primary: #ef6a52`, `--secondary: #2fbd85`, `--accent: #eab54a`). Never pair a dark background token with a dark text token (or light with light) in any theme.

**0.4 Typography & Icons**
- Google Fonts: **"Space Grotesk"** (500, 700) as the display face for headings, prices, step numerals, and signage-style labels; **"Inter"** (400, 500, 600) as the body face. Bind via `--font-display` and `--font-base`.
- Icons: **Google Material Symbols (Rounded)** exclusively — e.g., `train`, `route`, `schedule`, `eco`, `payments`, `support_agent`, `arrow_forward`, `dark_mode`, `light_mode`, `menu`, `close`, `check_circle`, `error`, `star`, `expand_more`, `mail`. Inline SVGs and local icon files are forbidden.

**0.5 Signature Visual Effects (mandatory)**
- **Gradients:** hero backdrop (`#efe9dc → #e4dcc9` with subtle radial red/amber glows), gradient text on the hero headline (red → amber), gradient route line (red → amber → green), gradient tiles behind feature icons, and a gradient Final-CTA band. Define all gradients as CSS variables (e.g., `--gradient-brand`, `--gradient-route`, `--gradient-hero`) or reusable classes — never inline.
- **Keyframe animations:** traveling dashes/energy pulse along the route line; a "train" dot traveling the hero route; sequentially pulsing station dots in How It Works; staggered scroll-reveal entrances (fade + translateY) on sections and cards; slow gradient background-position shift on the hero. All animation must degrade to simple opacity fades (or stop entirely) under `prefers-reduced-motion: reduce`.
- **Layout technique:** CSS Grid for macro layouts (hero, feature/pricing/testimonial grids, footer columns); Flexbox for all component internals.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** all design properties, layout rules, and states are targeted via class or ID selectors in a dedicated `style.css`.
- **Minimal HTML Modifications:** markup stays clean, semantic, and style-agnostic — changing the site's look must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
- Store all tokens in `:root` (light) and override under the dark selectors (§1.3).
- **Required color tokens:** `--primary`, `--secondary`, `--accent`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus the gradient tokens from §0.5.
- **Contrast Pairing:** every light background token pairs with a dark text token and every dark background token with a light text token — enforced in both themes.
- **Light-mode background** is the theme cream `#efe9dc`, never pure white; where a near-white is genuinely required, use `#fefefe`, never `#ffffff`.
- **Radius & Shadows:** `--radius-sm: 6px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm: 0 2px 8px rgba(38,34,28,0.08)`, `--shadow-md: 0 10px 28px rgba(38,34,28,0.14)`.
- **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Elevation/Stacking:** `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100` — all layered components (mobile menu, modal, toasts) must use these to prevent overlap conflicts.

**1.3 Mandatory Dark Mode Support**
- **Exception clause:** the style source flags this theme as light-first, so light mode is the default first-visit presentation — however, full dark mode is still mandatory and must never be skipped.
- **Implementation:** define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; the class must take precedence when applied.
- **Seamless switching:** background and text variables must swap with zero HTML restructuring.
- **Persistence:** store the user's choice in `localStorage`; first visit falls back to `prefers-color-scheme`. Applying the stored theme must be the very first action executed in `script.js` to avoid a flash of the wrong theme.
- **Toggle control:** a visible header button (Material icon `light_mode`/`dark_mode`) with correct `aria-pressed` state and a descriptive `aria-label` (e.g., "Toggle dark mode").

**1.4 Flexbox & CSS Grid Layout — Mobile-First Alignment**
- Build layout with Flexbox for component internals and CSS Grid for macro layouts. **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
- **Mobile-first:** base styles target small viewports; enhance upward with `min-width` media queries (or Tailwind responsive prefixes). Grids use `repeat(auto-fit, minmax(...))` or explicit responsive tracks; multi-column rows collapse to single columns on small screens.
- **No horizontal scrolling** at any viewport width from 320px up. Use fluid sizing (`clamp()`) for headings and section padding.

**1.5 Styling Approach & Framework Default**
- Use Tailwind CSS, or clean custom CSS driven by Tailwind's `@layer`/`@apply` — either way, every utility must map back to the CSS variables and to generic reusable class names (`.btn`, `.card`, `.input-group`, `.section`, `.container`).
- Recurring patterns (buttons, cards, inputs, badges, accordion items) must be reusable classes — no one-off utility soup.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load fonts via Google Fonts `<link>` tags (with `preconnect`); set `--font-base: 'Inter', sans-serif` and `--font-display: 'Space Grotesk', sans-serif`.
- Load Material Symbols via the Google Fonts stylesheet; render icons via ligature names. **Inline SVGs and local icon files are explicitly forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

All states below are styled via CSS classes; JS may only toggle classes/ARIA attributes — never write inline styles.

**2.1 Button Requirements** (`.btn` + `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target 44×44px; display face for labels; primary variant uses the red→amber `--gradient-brand`.
- **Hover:** visible brightness/shadow shift, `cursor: pointer`, transition with `var(--transition-fast)`.
- **Focus:** distinct keyboard focus ring built from CSS variables (`outline`/`box-shadow`), visible in both themes.
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading:** disables interaction, prevents double-clicks, and shows a CSS spinner or animated Material icon **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback styles driven by `--text-success`/`--text-error`.
- `.btn--danger` must remain visually distinct in both light and dark themes (fill + border, never color alone).

**2.2 Card Requirements** (`.card` — used by Features, How It Works, Testimonials, Pricing)
- **Default:** flexible Flexbox/Grid interior, subtle `--border-default` border, `--radius-lg`, `--shadow-sm`, background `--bg-secondary`.
- **Hover:** `transform: translateY(-2px)` plus elevation shift to `--shadow-md`.
- **Focus-within:** card border highlights when a child link/button receives focus.
- **Loading (skeleton):** shimmer keyframe styles for card content that prevent layout jumps.
- **Empty state:** structured fallback — large Material icon plus clear guidance text — required for the Testimonials area if data is absent.

**2.3 Form & Input Requirements** (`.input-group` — Final CTA email capture)
- **States:** empty, focused (outline ring), filled, valid (success border + `check_circle` icon), invalid (error border, error text, `error` icon), disabled, read-only.
- **Structure:** flex container wrapping a real `<label>`, the input, an icon slot, and a dedicated error-feedback element with `aria-live="polite"`.
- Never rely on color alone — invalid states must include an icon and message text.

**2.4 Modal / Popup Requirements** (required: the Hero's secondary CTA "View fares" opens a "Fares at a glance" modal)
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions/keyframes.
- **UX features:** centered flex container (`align-items: center`), dimmed backdrop overlay, Material icon (`close`) button, keyboard focus trap, close via `Esc` and overlay click, correct `role="dialog"`, `aria-modal="true"`, and an accessible title.

**2.5 Landing Page Section Requirements**
- **Header/Nav:** sticky; wordmark "LINE 7 — TRANSIT" with a `train` icon; anchor links (Features, How It Works, Pricing, FAQ); theme toggle (§1.3); mobile `menu` icon button opening an animated slide-down panel (`aria-expanded`, `aria-controls`, keyboard operable, closes on `Esc` and link selection, uses `--z-dropdown`). JS toggles a scrolled state class that adds `--shadow-sm` elevation.
- **Hero:** two-column grid collapsing to one column on mobile. Left: signage-style eyebrow ("LINE 7 — NOW BOARDING"), gradient headline, supporting copy, primary CTA "Plan your journey" (anchors to Final CTA), secondary CTA "View fares" (opens §2.4 modal), and stat chips (stations served, on-time rate, rider rating). Right: CSS-built animated route line with a traveling train dot and pulsing station dots. Bouncing `expand_more` scroll indicator linking to the next section. Scroll-reveal entrance.
- **Features (3 cards):** grid `repeat(auto-fit, minmax(260px, 1fr))`; each card = gradient icon tile + title + copy (suggested: real-time departures `schedule`, one-tap transfers `route`, green energy `eco`); staggered scroll-reveal; `.card` states per §2.2.
- **How It Works (3 steps):** horizontal (desktop) / vertical (mobile) journey — 01 Plan, 02 Tap in, 03 Arrive — numbered station cards connected by the animated gradient route line; station dots pulse in sequence; steps reveal on scroll with staggered delays.
- **Testimonials:** 3 quote cards in a responsive grid; each has a gradient initials avatar (pure CSS circle, no images), a 5-star rating via `star` icons, quote, name, role; skeleton and empty states defined per §2.2.
- **Pricing (3 tiers):** responsive grid of 3 `.card`s — "Single Ride", "Monthly Pass" (featured), "Annual Pass". Featured tier: amber "Most popular" badge, stronger border/`--shadow-md`, desktop emphasis; display-face prices; feature lists with `check_circle` icons; featured CTA is `.btn--primary`, others `.btn--ghost`. CTA clicks must demonstrate loading → success feedback.
- **FAQ:** accordion of 5–6 transit-themed questions (schedules, fares, accessibility, refunds, bikes). Use `<details>/<summary>` or a button + region pattern with `aria-expanded`/`aria-controls`; animate open/close via CSS (e.g., `grid-template-rows` transition); `expand_more` icon rotates when open; summary carries the visible focus ring.
- **Final CTA:** full-bleed `--gradient-brand` band with readable paired text; headline, one-line copy, and the `.input-group` email form (§2.3). On submit: validate (invalid shows icon + message in the `aria-live` error container), button enters loading state, then a success message ("You're on board — check your inbox") renders in the live region.
- **Footer:** deep-ink background (`#26221c` in light mode, correctly flipped in dark mode) with cream text; brand + one-liner, secondary link columns (Company, Support, Legal), Material-icon social links with `aria-label`s, dynamic copyright year, and a back-to-top control. All links show hover/focus feedback.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type and spacing, responsive breakpoints, zero horizontal overflow from 320px to ultrawide.
- **Smooth animations:** every state change transitions with `var(--transition-normal)`/`var(--transition-fast)`; all keyframes (route-line travel, pulses, shimmer, reveals) respect `prefers-reduced-motion: reduce` by disabling movement and keeping at most simple opacity fades.
- **Accessibility (a11y):** WCAG AA contrast in light AND dark modes; state is never communicated by color alone (pair icons + text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); correct ARIA roles/labels on custom widgets (menu toggle, accordion, dialog, theme toggle); logical DOM/focus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for dynamic feedback (form errors, loading, success messages); a skip-to-content link.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Destructive actions:** any `.btn--danger`/delete-style action is visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. The HTML includes `<script src="script.js" defer></script>` as the **only** script reference (no other inline `<script>` blocks) and zero inline styles. Include `lang="en"`, viewport meta, descriptive `<title>`, and meta description.
- **Naming convention:** BEM (`block__element--modifier`) everywhere — `.btn--primary`, `.card__title`, `.pricing-card--featured`. Never mix conventions.
- **Copy:** all user-facing copy in **English**, original and on-theme (transit tone: "Now boarding", "Next stop: a better commute", station-flavored microcopy). Lorem ipsum is prohibited; every section ships with realistic complete copy, names, prices, and FAQ questions.
- **Completeness:** deliver the full landing page — all nine sections, every component state from §2.1–2.4, both themes, and all JS behaviors (theme persistence, mobile menu, accordion, scroll reveals via IntersectionObserver, modal, form validation, header scroll state) — fully working on the first attempt.