[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-725-LINE-7-TRANSIT":3},"# CODING AGENT BUILD SPECIFICATION — LANDING PAGE: \"LINE 7 — TRANSIT\"\n\n**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.\n\n---\n\n## 0. PROJECT BRIEF & THEME DEFINITION\n\n**0.1 Theme Concept**\n- Build an interactive\u002Fanimated 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.\n- 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**.\n\n**0.2 Page Sections (build all, in this order)**\n1. Sticky Header\u002FNav (theme toggle + mobile menu)\n2. Hero\n3. Features — 3 cards\n4. How It Works — 3 steps\n5. Testimonials\n6. Pricing — 3 tiers\n7. FAQ — accordion\n8. Final CTA — email capture\n9. Footer — secondary links\n\n**0.3 Palette Mapping (bind exactly to the tokens in §1.2)**\n\n*Light mode (default presentation):*\n- `--bg-primary: #efe9dc` · `--bg-secondary: #e4dcc9` · `--text-primary: #26221c` · `--text-secondary: rgba(38, 34, 28, 0.72)`\n- `--primary: #d94f3d` (transit red — brand action color) · `--secondary: #1e9e6a` (line green) · `--accent: #e0a526` (amber — badges\u002Fhighlights)\n- `--text-success \u002F --border-success: #1e9e6a` · `--text-error \u002F --border-error: #d94f3d` · `--border-default: rgba(38, 34, 28, 0.15)`\n\n*Dark mode (mandatory — see §1.3):*\n- `--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)`\n- 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.\n\n**0.4 Typography & Icons**\n- 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`.\n- 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.\n\n**0.5 Signature Visual Effects (mandatory)**\n- **Gradients:** hero backdrop (`#efe9dc → #e4dcc9` with subtle radial red\u002Famber 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.\n- **Keyframe animations:** traveling dashes\u002Fenergy 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`.\n- **Layout technique:** CSS Grid for macro layouts (hero, feature\u002Fpricing\u002Ftestimonial grids, footer columns); Flexbox for all component internals.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- **No Inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** all design properties, layout rules, and states are targeted via class or ID selectors in a dedicated `style.css`.\n- **Minimal HTML Modifications:** markup stays clean, semantic, and style-agnostic — changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store all tokens in `:root` (light) and override under the dark selectors (§1.3).\n- **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.\n- **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.\n- **Light-mode background** is the theme cream `#efe9dc`, never pure white; where a near-white is genuinely required, use `#fefefe`, never `#ffffff`.\n- **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)`.\n- **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Elevation\u002FStacking:** `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100` — all layered components (mobile menu, modal, toasts) must use these to prevent overlap conflicts.\n\n**1.3 Mandatory Dark Mode Support**\n- **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.\n- **Implementation:** define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; the class must take precedence when applied.\n- **Seamless switching:** background and text variables must swap with zero HTML restructuring.\n- **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.\n- **Toggle control:** a visible header button (Material icon `light_mode`\u002F`dark_mode`) with correct `aria-pressed` state and a descriptive `aria-label` (e.g., \"Toggle dark mode\").\n\n**1.4 Flexbox & CSS Grid Layout — Mobile-First Alignment**\n- 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.\n- **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.\n- **No horizontal scrolling** at any viewport width from 320px up. Use fluid sizing (`clamp()`) for headings and section padding.\n\n**1.5 Styling Approach & Framework Default**\n- Use Tailwind CSS, or clean custom CSS driven by Tailwind's `@layer`\u002F`@apply` — either way, every utility must map back to the CSS variables and to generic reusable class names (`.btn`, `.card`, `.input-group`, `.section`, `.container`).\n- Recurring patterns (buttons, cards, inputs, badges, accordion items) must be reusable classes — no one-off utility soup.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load fonts via Google Fonts `\u003Clink>` tags (with `preconnect`); set `--font-base: 'Inter', sans-serif` and `--font-display: 'Space Grotesk', sans-serif`.\n- Load Material Symbols via the Google Fonts stylesheet; render icons via ligature names. **Inline SVGs and local icon files are explicitly forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\nAll states below are styled via CSS classes; JS may only toggle classes\u002FARIA attributes — never write inline styles.\n\n**2.1 Button Requirements** (`.btn` + `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)\n- **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`.\n- **Hover:** visible brightness\u002Fshadow shift, `cursor: pointer`, transition with `var(--transition-fast)`.\n- **Focus:** distinct keyboard focus ring built from CSS variables (`outline`\u002F`box-shadow`), visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading:** disables interaction, prevents double-clicks, and shows a CSS spinner or animated Material icon **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success`\u002F`--text-error`.\n- `.btn--danger` must remain visually distinct in both light and dark themes (fill + border, never color alone).\n\n**2.2 Card Requirements** (`.card` — used by Features, How It Works, Testimonials, Pricing)\n- **Default:** flexible Flexbox\u002FGrid interior, subtle `--border-default` border, `--radius-lg`, `--shadow-sm`, background `--bg-secondary`.\n- **Hover:** `transform: translateY(-2px)` plus elevation shift to `--shadow-md`.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** shimmer keyframe styles for card content that prevent layout jumps.\n- **Empty state:** structured fallback — large Material icon plus clear guidance text — required for the Testimonials area if data is absent.\n\n**2.3 Form & Input Requirements** (`.input-group` — Final CTA email capture)\n- **States:** empty, focused (outline ring), filled, valid (success border + `check_circle` icon), invalid (error border, error text, `error` icon), disabled, read-only.\n- **Structure:** flex container wrapping a real `\u003Clabel>`, the input, an icon slot, and a dedicated error-feedback element with `aria-live=\"polite\"`.\n- Never rely on color alone — invalid states must include an icon and message text.\n\n**2.4 Modal \u002F Popup Requirements** (required: the Hero's secondary CTA \"View fares\" opens a \"Fares at a glance\" modal)\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions\u002Fkeyframes.\n- **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.\n\n**2.5 Landing Page Section Requirements**\n- **Header\u002FNav:** 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.\n- **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.\n- **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.\n- **How It Works (3 steps):** horizontal (desktop) \u002F 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.\n- **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.\n- **Pricing (3 tiers):** responsive grid of 3 `.card`s — \"Single Ride\", \"Monthly Pass\" (featured), \"Annual Pass\". Featured tier: amber \"Most popular\" badge, stronger border\u002F`--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.\n- **FAQ:** accordion of 5–6 transit-themed questions (schedules, fares, accessibility, refunds, bikes). Use `\u003Cdetails>\u002F\u003Csummary>` or a button + region pattern with `aria-expanded`\u002F`aria-controls`; animate open\u002Fclose via CSS (e.g., `grid-template-rows` transition); `expand_more` icon rotates when open; summary carries the visible focus ring.\n- **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.\n- **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\u002Ffocus feedback.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type and spacing, responsive breakpoints, zero horizontal overflow from 320px to ultrawide.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)`\u002F`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.\n- **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\u002Flabels on custom widgets (menu toggle, accordion, dialog, theme toggle); logical DOM\u002Ffocus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for dynamic feedback (form errors, loading, success messages); a skip-to-content link.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive actions:** any `.btn--danger`\u002Fdelete-style action is visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. The HTML includes `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` as the **only** script reference (no other inline `\u003Cscript>` blocks) and zero inline styles. Include `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>`, and meta description.\n- **Naming convention:** BEM (`block__element--modifier`) everywhere — `.btn--primary`, `.card__title`, `.pricing-card--featured`. Never mix conventions.\n- **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.\n- **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.\n",1791954991704]