[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-689-Astryx-Matcha":3},"# SYSTEM PROMPT — CODING TASK: BUILD THE \"ASTRYX MATCHA\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page in a single first attempt — full HTML, full CSS, and full JS delivered together, with no truncation and no TODOs.\n\n**Objective:** Build the **\"Astryx Matcha\"** landing page — an earthy, organic matcha-wellness brand site with vibrant green accents over warm neutral surfaces. All user-facing copy must be written in **English**, in a calm, fresh, confident wellness-brand voice. No lorem ipsum.\n\n---\n\n## 0. THEME SPECIFICATION — \"ASTRYX MATCHA\"\n\n* **Style Name:** Astryx Matcha\n* **Style Type:** Earthy green palette with system-first typography and warm neutral surfaces\n* **Keywords:** matcha, green, earthy, nature, figtree, wellness, organic, fresh, vibrant, astryx\n* **Design Era:** 2026 Meta — generous whitespace, fluid `clamp()` typography, soft elevation, 12px+ rounded organic surfaces, restrained but confident green accents\n* **Themes:** Full Light mode **and** Full Dark mode — both mandatory and fully styled\n* **Visual Direction:** matcha-green earthy UI, nature\u002Fwellness interface, green accent over warm neutral, organic fresh design, health-app aesthetic, sustainable-dashboard cleanliness\n* **Palette:** Primary Green `#0D8626`, Bright Green `#0B991F`, Light Green `#24BB5E`; secondary = earthy warm neutrals, cream surfaces, muted olive tones\n* **Motion Language:** Transitions use `cubic-bezier(0.24, 1, 0.4, 1)` — fast 175ms (hover\u002Fpress feedback), medium 410ms (surfaces, disclosures, theme change). Vibrant greens act as **accents over warm neutral backgrounds** — never as low-contrast long-form text.\n* **Signature CSS (must be honored via tokens):** `font-family: 'Figtree', sans-serif;` · `border-radius: 12px` · 410ms transitions with `cubic-bezier(0.24, 1, 0.4, 1)` · `--accent: #0D8626` · light background `#F8F5F0` · base text `#1A1A1A`\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* All styling must live exclusively in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.** No `\u003Cstyle>` blocks.\n* Target all design properties, layout rules, and states via **class or ID selectors only**.\n* HTML must remain clean, semantic, and styling-agnostic — changing the site's look must require editing only the CSS file, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` (light) and `.dark` (dark). Required light-mode tokens:\n\n```css\n:root {\n  --accent: #0D8626;            \u002F* alias of --primary *\u002F\n  --primary: #0D8626;\n  --primary-bright: #0B991F;\n  --primary-light: #24BB5E;\n  --secondary: #6E7C59;         \u002F* muted olive *\u002F\n  --on-primary: #FEFEFE;        \u002F* text paired ON primary surfaces *\u002F\n  --bg-primary: #F8F5F0;        \u002F* warm cream page background — never #ffffff *\u002F\n  --bg-secondary: #FEFEFE;      \u002F* card surfaces *\u002F\n  --bg-alt: #F1EDE3;           \u002F* alternating section band *\u002F\n  --bg-tint: rgba(13, 134, 38, 0.08); \u002F* green wash for chips\u002Fbadges *\u002F\n  --text-primary: #1A1A1A;\n  --text-secondary: #55524A;    \u002F* warm gray *\u002F\n  --text-success: #0B991F;\n  --text-error: #B3261E;\n  --border-default: #E3DDCE;\n  --border-error: #B3261E;\n  --border-success: #0D8626;\n  --focus-ring: rgba(13, 134, 38, 0.45);\n  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;\n  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);\n  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.10);\n  --spacing-gap: 1rem;\n  --transition-fast: 175ms;\n  --transition-normal: 410ms;\n  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);\n  --z-dropdown: 100; --z-modal: 400; --z-toast: 600;\n  --font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;\n  --header-height: 64px;\n}\n```\n\nRequired dark-mode overrides under `:root.dark` (or `.dark` applied to `\u003Chtml>`):\n\n```css\n--accent: #24BB5E; --primary: #24BB5E; --primary-light: #4AD57C;\n--secondary: #9AA47E;\n--on-primary: #0F130D;          \u002F* dark text on green — pairing FLIPS in dark mode *\u002F\n--bg-primary: #131711; --bg-secondary: #1C2117; --bg-alt: #171C14;\n--bg-tint: rgba(36, 187, 94, 0.12);\n--text-primary: #F2EFE6; --text-secondary: #B7B3A4;\n--text-success: #24BB5E; --text-error: #FFB4AB;\n--border-default: #2B3123; --border-error: #FFB4AB; --border-success: #24BB5E;\n--focus-ring: rgba(36, 187, 94, 0.50);\n\u002F* shadows: deepen\u002Fsoften for dark surfaces *\u002F\n```\n\n* **Contrast pairing is mandatory in every theme:** light background token ↔ dark text token; dark background token ↔ light text token. Text on primary-green surfaces uses `--on-primary` (light in Light mode, dark in Dark mode). Verify ≥ 4.5:1 for body text and ≥ 3:1 for large text\u002FUI components in **both** themes.\n* Green tokens are reserved for **accents**: buttons, icons, badges, numerals, borders, highlights — not for long body copy on cream.\n\n### 1.3 Mandatory Dark Mode Support\n* Dark tokens must live under a `.dark` class on the `\u003Chtml>` element; theme switching must swap variables seamlessly with **no HTML restructuring** (apply a `transition: background-color var(--transition-normal) var(--ease-standard)` cross-fade on `body` and major surfaces).\n* **Persistence:** `script.js` reads `localStorage` (e.g., key `astryx-theme`) on load; on first visit fall back to `matchMedia('(prefers-color-scheme: dark)')`.\n* **Visible toggle control** in the header: Material Symbols `light_mode` \u002F `dark_mode` icon button with correct `aria-pressed` state and dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox**.\n* Every flex container **must default to `align-items: center`** unless there is a documented exception (e.g., text-left card bodies may use `align-items: flex-start`, with a CSS comment justifying it).\n* Mobile-first: all flex rows must convert to columns on small viewports; **zero horizontal scrolling** at any width from 320px up.\n\n### 1.5 CSS Approach\n* Use clean, hand-written custom CSS driven entirely by the tokens above (no framework CDN needed for this static build). If Tailwind is used instead, every utility must map 1:1 back to these CSS variables. Reusable generic classes required: `.btn`, `.card`, `.input`, `.container`, `.section`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Figtree** (weights 400;500;600;700;800) from Google Fonts via `\u003Clink>` with `preconnect`; bind to `--font-base` (the system-ui fallback stack delivers the system-first feel).\n* **Type scale (fluid):** `h1` `clamp(2.5rem, 5.5vw + 1rem, 4.25rem)` weight 800, line-height 1.05, letter-spacing −0.02em; `h2` `clamp(1.875rem, 3vw + 0.5rem, 2.75rem)` weight 700; `h3` 1.25–1.5rem weight 600; body 1–1.125rem line-height 1.6; meta\u002Fsmall 0.875rem.\n* **Icons:** Use **Google Material Symbols (Rounded)** loaded from Google Fonts. Suggested valid names: `eco`, `spa`, `bolt`, `energy_savings_leaf`, `schedule`, `timer`, `verified`, `check`, `check_circle`, `star`, `expand_more`, `menu`, `close`, `arrow_forward`, `mail`, `error`, `progress`, `light_mode`, `dark_mode`, `workspace_premium`, `local_shipping`. **Raw inline SVGs and local icon files are explicitly forbidden.** Decorative icons get `aria-hidden=\"true\"`; icons conveying meaning need adjacent text or an accessible name.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--outline`)\nAll states via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**, `border-radius: var(--radius-md)`, weight 600. Primary = `--primary` bg + `--on-primary` text; outline = transparent bg + `--border-default` + `--text-primary`.\n* **Hover:** brightness or shadow shift, `cursor: pointer`, `transition: var(--transition-fast) var(--ease-standard)`.\n* **Focus:** distinct `:focus-visible` ring via `--focus-ring` (`box-shadow: 0 0 0 3px var(--focus-ring)`) — never remove focus indication.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** disables pointer events, prevents double-clicks, renders a CSS spinner (border-based circle) or animated `progress` Material icon **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback states driven by `--text-success` \u002F `--text-error` plus matching border tokens — demonstrated on the Final CTA submit flow.\n\n### 2.2 Card Component (`.card`)\nUsed by Features, Testimonials, Pricing, and How-It-Works steps:\n* **Default:** flex column layout, `--bg-secondary` surface, 1px `--border-default`, `border-radius: var(--radius-lg)`, `--shadow-sm`.\n* **Hover (interactive cards only):** elevation shift plus `transform: translateY(-2px)`.\n* **Focus-within:** border color transitions to `--primary` when a child link\u002Fbutton receives focus.\n* **Skeleton:** define a reusable `.skeleton` shimmer animation utility class in CSS (not required in markup — no async loading in this build).\n* **Empty state:** not required (static content), but do not invent fake loading content.\n\n### 2.3 Form & Input Component (Final CTA email capture)\n* **Structure:** flex container wrapping `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error\u002Fsuccess feedback element.\n* **States (all via classes):** empty; focused (outline ring using `--focus-ring`); filled; **valid** `.is-valid` (success border + trailing `check` icon); **invalid** `.is-invalid` (error border, error icon, error text in `--text-error`); disabled; read-only. Input min-height 44px, `--bg-secondary` surface, `--radius-md`.\n* **A11y:** error message linked via `aria-describedby`; feedback container has `aria-live=\"polite\"`; **never rely on color alone** — always pair color with an icon and text.\n* **JS behavior:** validate a simple email pattern on submit → invalid shows `.is-invalid` + message; valid triggers the button's loading → success cycle (Section 2.1), announced via the live region.\n\n### 2.4 FAQ Accordion (interactive disclosure — no modals required in this build)\n* **Pattern:** `\u003Ch3>` wrapping a `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\">`; panel `\u003Cdiv id=\"faq-panel-N\">`. Minimum 44px trigger height; native Enter\u002FSpace key operation.\n* **Animation:** CSS-only smooth open\u002Fclose using the `display: grid; grid-template-rows: 0fr → 1fr` technique, transitioned with `var(--transition-normal) var(--ease-standard)`.\n* **Feedback:** `expand_more` icon rotates 180° when open; JS toggles and re-asserts `aria-expanded`. Choose either single-open or multi-open behavior and implement it consistently and accessibly.\n* Do not add modals, popups, or any other unrequested overlay components.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` sizing, breakpoints around 640px\u002F960px, no horizontal overflow, hamburger nav below 768px.\n* **Smooth motion:** every state change transitions with `var(--transition-fast)` (hover\u002Fpress) or `var(--transition-normal)` (surfaces, accordion, theme cross-fade), always with `var(--ease-standard)`. Transition explicit properties (`color, background-color, border-color, box-shadow, transform`) rather than `all`. Fully respect `prefers-reduced-motion: reduce` — disable transforms, reveals, and smooth scrolling.\n* **Accessibility (a11y):** AA contrast in both themes; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); exactly one `h1` (Hero) and one `h2` per section; logical DOM\u002Ffocus order; full keyboard operability for nav menu, theme toggle, accordion, and form; visible focus everywhere; `aria-live` regions for form feedback and CTA success. Never communicate state by color alone.\n* **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.\n* **Destructive actions:** none exist in this build; no `.btn--danger` usage is required.\n* **Scroll behavior:** `scroll-behavior: smooth` plus `scroll-padding-top: var(--header-height)` on `html`, wrapped in `@media (prefers-reduced-motion: no-preference)`; all nav links are in-page anchors.\n* **Scroll reveal (optional):** IntersectionObserver adds an `.is-visible` class — subtle 12–16px translate + opacity fade, once per element. **Content must be fully visible without JS** (progressive enhancement only).\n\n---\n\n## 4. REQUIRED PAGE STRUCTURE — SECTION-BY-SECTION SPEC\n\nWrite original, polished English copy throughout (copy angles below are directional; produce real finished copy in that spirit). Reuse one consistent section-header pattern: small green-tinted eyebrow chip + `h2` + one supporting sentence.\n\n### 4.0 Sticky Header\n* Wordmark \"Astryx Matcha\" + `eco` icon; anchor nav: Features, How It Works, Testimonials, Pricing, FAQ; theme toggle (per 1.3); compact \"Get Started\" primary button → `#pricing`.\n* Mobile: hamburger button (`aria-expanded`, `aria-controls`) toggling a flex-column panel; closes on `Esc` and on link click. Solid `--bg-primary` bar + bottom border; optional backdrop blur.\n\n### 4.1 Hero\n* Two-column flex on desktop (copy left, visual right), stacked and centered on mobile.\n* Eyebrow chip (green tint bg, e.g., \"2026 First Harvest — Now Available\"); fluid `h1` promising calm, steady energy; 1–2 sentence subhead; two CTAs — primary \"Start Your Ritual\" → `#pricing`, outline \"See How It Works\" → `#how-it-works`.\n* Social proof row: 5× `star` icons (`aria-hidden`) + short trust line, with an `aria-label` such as \"Rated 4.9 out of 5\".\n* Visual: a **pure-CSS composition** — layered rounded panel with a green gradient wash and floating mini stat-chips using Material icons (e.g., \"80mg natural caffeine\", \"L-theanine rich\"); soft shadows. Do **not** add placeholder images.\n\n### 4.2 Features — 3 Cards (`#features`)\n* Exactly 3 cards, flex row → column on mobile; each: icon in a green-tint circle, `h3` title, 2–3 sentence body, \"Learn more\" link (focus-within highlight per 2.2).\n* Angles: (1) clean, steady energy without the crash; (2) ceremonial-grade, organic single-origin sourcing; (3) a 90-second ritual made simple.\n\n### 4.3 How It Works — 3 Steps (`#how-it-works`)\n* Row on desktop with Material `arrow_forward` separators (hidden on mobile); column on mobile.\n* Each step: numbered green badge (01\u002F02\u002F03) + optional icon + `h3` + short copy. Angles: choose your blend → whisk in 90 seconds → enjoy calm focus all day.\n\n### 4.4 Testimonials (`#testimonials`)\n* 3 cards, flex row → column; each: `figure > blockquote` (1–2 sentences), 5-star row with accessible rating label, avatar circle (initials on olive\u002Fgreen tint), `figcaption` name + role. Real-sounding personas (e.g., yoga instructor, startup founder, nutritionist).\n\n### 4.5 Pricing — 3 Tiers (`#pricing`)\n* 3 tiers: Starter \u002F **Ritual (featured)** \u002F Connoisseur. Featured tier gets a \"Most Popular\" chip and a distinct green treatment (e.g., primary border + tinted background, or inverted green surface with `--on-primary` text) that passes AA contrast in **both** themes and is slightly elevated.\n* Each card: tier name, price + \"\u002Fmonth\", short blurb, feature list with `check` icons, CTA (primary on featured, outline elsewhere). Add a small \"billed monthly, cancel anytime\" note.\n\n### 4.6 FAQ (`#faq`)\n* 5–6 items per spec 2.4, covering: sourcing\u002Fquality, caffeine vs. coffee, preparation time\u002Fequipment, taste profile, shipping, and the guarantee\u002Frefund policy.\n\n### 4.7 Final CTA (`#cta`)\n* Full-width band with a theme-aware green surface (tinted or bold primary with paired `--on-primary` text); `h2` + one supporting sentence + email capture form per 2.3.\n* Submit flow demonstrates the full button lifecycle: loading (spinner, interactions blocked) → success state with check icon, e.g., \"Welcome to the ritual — check your inbox.\", announced via `aria-live`.\n* Form layout: input grows + fixed button in a row on desktop; stacked column on mobile.\n\n### 4.8 Footer — Secondary Links (`#footer`)\n* Top row: brand block (wordmark + tagline + `eco` icon) plus three link columns: **Product** (Features, Pricing, FAQ — real in-page anchors), **Company** (About, Journal, Contact), **Support** (Help Center, Shipping, Privacy, Terms).\n* For destinations that do not exist in this single-page build, `href=\"#\"` placeholders are acceptable (content was genuinely unspecified) — but any section that exists must use its real anchor.\n* Bottom bar: \"© 2026 Astryx Matcha. All rights reserved.\" + small legal links. All footer links receive `:focus-visible` styling; none trigger JS.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. Only one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline scripts, no inline styles, no `\u003Cstyle>` blocks.\n* **Naming convention:** BEM throughout (`block__element--modifier`), e.g., `.hero__title`, `.btn--primary`, `.features__grid`, `.pricing-card--featured`, `.faq__trigger`. Never mix conventions.\n* **JS scope:** theme toggle + `localStorage` persistence, mobile menu, accordion, email form validation + loading\u002Fsuccess feedback, optional scroll reveal. No libraries, no build step — the page must work by opening `index.html` directly.\n* **External assets:** Google Fonts only (Figtree + Material Symbols Rounded). No other CDNs, no local icon files, no inline SVGs.\n* **Completeness:** deliver the entire page on the first attempt — all 8 sections plus header and footer, all component states, both themes, fully functional. No truncated files.\n* **Self-check before finishing:** zero `style=` attributes; both themes toggle and persist; no horizontal scroll at 320px; every hover\u002Fclick\u002Fsubmit shows visible feedback; a keyboard-only pass works end to end; Material icon names are valid; AA contrast holds in Light and Dark modes.\n",1791954991181]