[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-634-OpenCode-Terminal-Mono":3},"# BUILD PROMPT — \"OpenCode Terminal Mono\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-quality landing page in a single first attempt. Do not ask questions — ship the full build.\n\n**Product context:** A marketing landing page for **opencode**, an open-source, terminal-native AI coding agent (2024–2026 open-source AI coding era). The design language is **OpenCode Terminal Mono**: monospace-only typography, warm dark surfaces, Apple HIG semantic colors, sharp 4px corners, underlined links, a single button variant, and a terminal window as the hero's primary visual.\n\n**Sections (in this order):** sticky header\u002Fnav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden in the HTML.**\n- Every visual property, layout rule, and state is applied via class\u002FID selectors only.\n- HTML stays semantic and style-agnostic: retheming the page must require editing `style.css` only, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root` (light) and override under `.dark` and `@media (prefers-color-scheme: dark)`. Every light background token pairs with a dark text token and vice versa — in both modes:\n\n| Token | Light mode | Dark mode |\n|---|---|---|\n| `--bg-primary` | `#fdfcfc` | `#201d1d` |\n| `--bg-secondary` (elevated: cards, panels) | `#f4f2f1` | `#2a2626` |\n| `--bg-inverted` (button fill) | `#201d1d` | `#fdfcfc` |\n| `--text-primary` | `#201d1d` | `#fdfcfc` |\n| `--text-secondary` | `#6d6a6a` | `#9a9898` |\n| `--text-inverted` | `#fdfcfc` | `#201d1d` |\n| `--link` (small link text, AA-safe) | `#0066cc` | `#409cff` |\n| `--text-success` | `#1e8e3e` | `#30d158` |\n| `--text-error` | `#d70015` | `#ff3b30` |\n| `--text-warning` | `#b25000` | `#ff9f0a` |\n| `--border-default` | `rgba(15,0,0,0.12)` | `rgba(253,252,252,0.14)` |\n| `--border-error` \u002F `--border-success` | match mode-scoped error\u002Fsuccess values | match mode-scoped error\u002Fsuccess values |\n\n- `--primary: #007aff` — reserved for accents, focus rings, large text, and UI chrome. Pure `#007aff` is only ~4:1 on both surfaces, so **never** use it for small body-link text; small links use `--link`.\n- The spec gray `#9a9898` fails AA on light backgrounds — use it only in dark mode; the light mode uses the darkened warm gray above.\n- `--radius-sm`, `--radius-md`, `--radius-lg`: **all `4px`**. Hard rule: no border-radius exceeds 4px anywhere; pill shapes are forbidden.\n- `--shadow-sm: 0 1px 2px rgba(15,0,0,0.10)`; `--shadow-md: 0 6px 16px rgba(15,0,0,0.16)`. Elevation is expressed primarily through `--bg-secondary` + hairline borders, not shadows (flat terminal aesthetic).\n- `--spacing-gap: 1rem`; `--spacing-section: clamp(4rem, 10vw, 7rem)`; `--transition-fast: 120ms`; `--transition-normal: 200ms`; `--ease-standard: cubic-bezier(0.2, 0, 0, 1)` (snappy, terminal-like).\n- `--z-nav: 50`; `--z-dropdown: 100`; `--z-modal: 200`; `--z-toast: 300`.\n- `--font-base: 'Berkeley Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace` — the generic fallback must be `monospace`; `sans-serif`\u002F`serif` must never appear in any font stack.\n\n### 1.3 Mandatory Dark Mode Support\n- Dark is the theme's signature mode; both modes are fully first-class. Implement dark tokens under both `.dark` and `@media (prefers-color-scheme: dark)` (the class wins when both apply).\n- First visit follows `prefers-color-scheme`; an explicit toggle choice persists in `localStorage`; switching re-renders instantly with zero HTML restructuring. Set `color-scheme` per mode.\n- Toggle: a visible icon button in the header using Material Symbols (`dark_mode` \u002F `light_mode`) with correct `aria-pressed` and `aria-label` (\"Toggle dark mode\"); the icon swaps with the theme.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Flexbox for all single-axis structures (header bar, hero row, CTA rows, footer bars, terminal title bar). **Every flex container defaults to `align-items: center`** unless an exception is justified in a CSS comment (justified exceptions here: card content columns and terminal output lines use `flex-start`\u002F`stretch` for top-aligned text).\n- CSS grid only for equal-column card collections (features, steps, testimonials, pricing): `repeat(3, 1fr)` at ≥1024px, collapsing to one column below — never horizontal scrolling.\n- Mobile-first: base styles are single-column; container max-width ~1080px with 1–1.25rem side padding; nothing may overflow horizontally at 320px.\n\n### 1.5 Framework — Clean Custom CSS in `@layer`\n- No Tailwind, no framework CDN. Write clean custom CSS organized into native cascade layers mirroring Tailwind's architecture: `@layer tokens, base, components, utilities`. All component styling is class-driven; keep the utilities layer minimal (`.container`, `.visually-hidden`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load Google Fonts `IBM Plex Mono` (weights 400, 500, 700) via `\u003Clink>`; bind to `--font-base`.\n- **Exception clause (Berkeley Mono):** Berkeley Mono is a commercial typeface unavailable on Google Fonts. Keep `'Berkeley Mono'` first in `--font-base` so a licensed, self-hosted `@font-face` copy is honored if present, with Google Fonts' IBM Plex Mono as the drop-in monospace substitute. Never load Berkeley Mono from a third-party CDN.\n- **Weights & rhythm:** headings 700; body\u002Flabels\u002Fbuttons 500; long-form paragraph text 400; `line-height: 1.5` everywhere. Type scale: h1 `clamp(2rem, 5vw, 3.25rem)`; h2 `clamp(1.5rem, 3vw, 2rem)`; h3 `1.125rem`; body `1rem`. Monospace only — no letter-spacing tricks.\n- **Icons:** Google Material Symbols (Outlined) via Google Fonts link. Raw inline SVGs and local icon files are forbidden. **Exception clause (favicon only):** a data-URI SVG favicon shaped as a `>` glyph is the sole permitted inline SVG.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button — Single Variant `.btn`\n- Exactly **one** button variant exists on this page. No outline\u002Fghost\u002Fsecondary variants.\n- Default: `display:flex; align-items:center; justify-content:center; gap:0.5rem;` padding `4px 20px` (theme-mandated tight padding), weight 500, radius 4px, background `--bg-inverted`, color `--text-inverted` — dark fill in light mode, warm-white fill in dark mode; the inversion preserves the \"dark button\" identity and contrast in both themes.\n- Touch target: the visual box is ~32px tall; meet the 44px minimum by extending the hit area with an absolutely-positioned `::after { inset: -6px }` overlay — do not inflate the visual padding.\n- Hover: brightness shift + `cursor: pointer`. Focus-visible: `outline: 2px solid var(--primary); outline-offset: 2px`. Active: `transform: scale(0.97)`.\n- `.btn--loading`: `pointer-events: none`, blocks double-clicks, renders a CSS border spinner (currentColor, fixed 1em box) that never changes button dimensions.\n- `[disabled]`: opacity 0.5, grayscale, `cursor: not-allowed`.\n- `.btn--success` \u002F `.btn--error`: temporary feedback tinted by `--text-success` \u002F `--text-error`, always paired with a Material Symbol (`check_circle` \u002F `error`) — never color alone.\n- No destructive actions exist on this page; do not invent any.\n\n### 2.2 Card\n- Default: flex column, `--bg-secondary`, 1px `--border-default`, radius 4px, generous padding, gap via `--spacing-gap`.\n- Hover: `translateY(-2px)` + border brightens toward `--primary` at low alpha + `--shadow-md`.\n- Focus-within: border-color `--primary` (cards containing links\u002Fbuttons).\n- Define `.card--skeleton` (shimmer, no layout jump) and `.card--empty` (Material Symbol + guidance text) patterns in CSS even if unused on this static page.\n\n### 2.3 Form & Input (only if you add an email capture to the Final CTA — optional)\n- If included: flex column wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error container. States: empty, focused (2px `--primary` ring), filled, valid (`--border-success` + check icon), invalid (`--border-error` + `--text-error` message + error icon), disabled, read-only. All dynamic feedback announced via `aria-live`. If no form is added, omit entirely — do not add forms elsewhere.\n\n### 2.4 Modal \u002F Popup — Not Applicable\n- This page requires no modals or popups. **Do not add any.** The FAQ uses accessible native accordions (5.7); dynamic feedback uses inline states + `aria-live`, not dialogs.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n- Responsive by default; zero horizontal overflow from 320px up.\n- Every state change transitions with `transition: var(--transition-normal) var(--ease-standard)`; all animations (cursor blink, typing, shimmer, menu slide) are neutralized under `prefers-reduced-motion`.\n- **a11y:** WCAG AA contrast in both modes using the mode-scoped tokens exactly as defined in 1.2; never communicate state by color alone; semantic landmarks (`header`\u002F`main`\u002F`section`\u002F`footer`, `aria-labelledby` per section); logical heading order h1→h2→h3; a skip-to-content link; full keyboard operability (nav menu, FAQ, copy button); visible focus on every interactive element; `aria-live` regions for dynamic feedback.\n- **Links:** underlined by default in every state (`text-decoration: underline; text-underline-offset: 3px`); hover shifts color to `--link` and thickens the underline to 2px. No link is styled as a button and no button is styled as a link.\n- Every click\u002Fhover produces visible feedback; style `::selection` with `--primary`.\n- Anchor navigation uses `scroll-margin-top` for the sticky header; smooth scrolling disabled under reduced motion.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n- Exactly three files: `index.html`, `style.css`, `script.js`. Opening `index.html` runs the page with no build step.\n- `\u003Chtml lang=\"en\">`, viewport meta, `\u003Ctitle>`, and meta description are required.\n- Scripts: one `\u003Cscript src=\"script.js\" defer>` reference. **Exception clause:** a ≤6-line inline `\u003Chead>` bootstrap is permitted solely to apply the stored\u002F`prefers-color-scheme` theme class before first paint (FOUC prevention). No other inline JS.\n- `script.js` scope: theme toggle + persistence, mobile menu, clipboard copy + `aria-live` feedback, optional single-open FAQ behavior, optional IntersectionObserver reveals (reduced-motion aware). Nothing else.\n- Naming: **BEM only** (`.site-header`, `.terminal__dot`, `.pricing-card--featured`, `.btn--loading`). Never mix conventions.\n- Copy: all user-facing copy in **English** (the source style spec is Portuguese — direct all copy to English). No lorem ipsum; write real, plausible content per Section 6. No emoji anywhere.\n- No unrequested components: no modals, carousels, chat widgets, cookie banners, or analytics.\n\n## 5. PAGE BUILD SPECIFICATION — SECTION BY SECTION\n\n### 5.1 Header (sticky)\n- Solid `--bg-primary`, 1px bottom border, ~64px, flex row `justify-between`, `align-items: center`. Flat — no blur, no shadow.\n- Left: text logo `❯ opencode` (700; the `❯` in `--text-success`), linking to `#top`.\n- Nav (`aria-label=\"Primary\"`): Features, How it works, Pricing, FAQ — underlined anchors.\n- Right cluster: theme toggle (1.3), GitHub text link, `.btn` \"Get started\".\n- Mobile \u003C768px: links hide behind a Material Symbol `menu` button toggling a full-width dropdown panel (`--z-dropdown`, stacked links). Esc closes; outside click closes; `aria-expanded` + `aria-controls`; focus moves into the panel on open and returns to the button on close.\n\n### 5.2 Hero — Terminal as Primary Visual\n- Desktop: two columns (copy | terminal), stacking copy-first on mobile.\n- Copy: eyebrow line in `--text-secondary` (e.g., `open source · MIT · v1.0`); h1 (700), e.g., \"The AI coding agent that lives in your terminal.\"; sub-paragraph (400, `--text-secondary`); CTA row: `.btn` \"Get started\" + underlined text link \"Read the docs\".\n- `.terminal` window: bg `#201d1d`, 1px `--border-default`, radius 4px, `--shadow-md` — **it stays warm-dark in both themes** (terminals are dark; scope fixed colors inside `.terminal`).\n  - Title bar: flex, `align-items: center`; three 10px dots in `#ff3b30` \u002F `#ff9f0a` \u002F `#30d158`; centered title `~\u002Fproject — opencode` in `--text-secondary`; hairline bottom border.\n  - Body: monospace session lines — `$` prompt in `--text-success`, commands in `--text-primary`, flags in `#409cff`, a green `✓ tests passed` line, an orange warning line, a red error demo line; the final line ends with a block cursor `▌` blinking via a `steps(1)` CSS animation (static under reduced motion). Optional CSS typing animation on the first command, also disabled under reduced motion.\n  - Wrap in `\u003Cfigure>` with an aria-label (\"Terminal session demo\"); content remains real text.\n\n### 5.3 Features — 3 Cards\n- Section h2 pattern: prefix with a comment-style `#` glyph in `--text-secondary` (e.g., `# features`) — apply this prefix consistently to all section h2s.\n- Grid 3→1. Each `.card`: Material Symbol in `--primary` inside a 4px bordered chip (suggested: `keyboard`, `hub`, `lock`), h3 (700), description (400, `--text-secondary`), and a one-line inline code chip (bg `--bg-primary`, radius 4px).\n- Suggested angles: keyboard-first TUI; bring-your-own models\u002Fkeys; local-first privacy.\n\n### 5.4 How It Works — 3 Steps\n- `\u003Col>` semantics rendered as a 3→1 grid. Each step: index `01 \u002F 02 \u002F 03` (700, `--primary`), command-style h3 (e.g., `$ install`, `$ connect`, `$ ship`), description (400).\n- Desktop connector: hairline + `>` glyph between steps; on mobile, steps stack with a left hairline timeline.\n\n### 5.5 Testimonials\n- 3→1 grid of quote cards. Each: `>` glyph in `--text-success` prefixing the quote (400), attribution row with name (500), `@handle` and role in `--text-secondary`. Attribution is plain text — do not fabricate external profile URLs.\n\n### 5.6 Pricing — 3 Tiers\n- 3→1 grid: **Free** ($0 — the open-source core), **Pro** ($20\u002Fmo, highlighted), **Team** ($40\u002Fuser\u002Fmo).\n- Each `.pricing-card`: tier name (700), price line (700, monospace), short description, feature list with Material Symbol `check` in `--text-success`, and one `.btn` CTA (\"Download\", \"Start Pro\", \"Contact sales\") — the identical variant everywhere.\n- Featured tier: 1px `--primary` border + a \"recommended\" chip (border `--primary`, text `--link`, radius 4px). No alternate button style for the featured tier.\n\n### 5.7 FAQ\n- 5–6 native `\u003Cdetails>\u002F\u003Csummary>` accordions separated by hairlines. Summary: flex row, 500 weight, Material Symbol `expand_more` rotating 180° when open, hover color shift, focus-visible ring. Body: 400, `--text-secondary`. No JS required; if you add single-open behavior, keep native semantics intact.\n- Suggested topics: install requirements, supported models\u002Fproviders, data privacy, license, self-hosting, what's free.\n\n### 5.8 Final CTA\n- Full-width band on `--bg-secondary` with hairline borders. h2 (700) + one-line sub + `.btn` \"Get started\".\n- Install command bar: bordered, radius-4px row: `$ npm install -g opencode-ai` + copy button (Material Symbol `content_copy`). On copy: button enters success feedback (icon → `check`, `--text-success`) and an `aria-live=\"polite\"` region announces \"Copied to clipboard\"; revert after ~2s. Keyboard operable.\n\n### 5.9 Footer\n- Link groups (grid → stacked): Product (Features, Pricing, Changelog), Resources (Docs, GitHub, Discord), Company (Blog, Contact, License). Links underlined, `--text-secondary`, hover `--link`.\n- Bottom bar: flex, space-between — `© 2025 opencode · MIT License` and secondary links (Privacy, Terms, Status).\n- Internal sections use real in-page anchors; external destinations use plausible top-level URLs (e.g., `https:\u002F\u002Fgithub.com`, `https:\u002F\u002Fdiscord.com`) with `rel=\"noreferrer\"` — never invent deep paths.\n\n## 6. COPY & CONTENT RULES\n- All user-facing copy in English. Voice: terse, technical, code-first, confident — 2024–2026 open-source developer tone; lowercase branding (\"opencode\") is welcome; zero marketing fluff, zero emoji.\n- Write real, plausible content for every section (testimonials, pricing, and FAQ included). No lorem ipsum, no \"TODO\", no stub headings.\n",1791954990319]