[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-348-Syne-Typography":3},"# CODING-AI PROMPT — LANDING PAGE: \"SYNE TYPOGRAPHY\"\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The theme is **\"Syne Typography\"** — a Typography-Driven, Modern Experimental design in the voice of an art center \u002F experimental type foundry. Per the source specification, the page ships in **full dark mode only** (Light ✗ \u002F Dark ✓).\n\n**Objective:** Deliver `index.html`, `style.css`, and `script.js` implementing: sticky Header\u002Fnav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, and Footer with secondary links. All user-facing copy must be written in **English**.\n\n---\n\n## 1. THEME DIRECTION & DESIGN TOKENS\n\n**1.1 Art Direction**\n- Category: Typography-Driven. The entire design is built from type scale, weight, whitespace, hairline rules, and oversized numerals — **no photography, no illustrations, no gradients**. Graphic accents must be CSS-only (hairlines, index labels, outlined ghost text, numerals).\n- Voice: confident, editorial, experimental — art-center\u002Fgallery tone.\n- **All text on the page is strictly left-aligned** (headlines, cards, pricing, testimonials, footer). Never center-align text content.\n- Hero visual: 2D isolated typography on a solid background — white Syne text on solid `#0B2B43`, tight tracking, 90% leading, left-aligned, the text block centered within the viewport, occupying roughly 50–60% of the hero scale.\n\n**1.2 Color Tokens (define on `:root`)**\n- `--primary: #FFFFFF` (foreground \u002F CTA surface color); `--secondary: #0B2B43` (deep navy canvas)\n- `--bg-primary: #0B2B43`; `--bg-secondary: #123A5A` (elevated navy surface)\n- `--text-primary: #FFFFFF`; `--text-secondary: rgba(255, 255, 255, 0.72)`\n- `--text-success: #4ADE80`; `--text-error: #FF7A7A`; `--border-success: rgba(74, 222, 128, 0.5)`; `--border-error: rgba(255, 122, 122, 0.5)`; `--border-default: rgba(255, 255, 255, 0.16)`\n- **Contrast pairing (mandatory):** every dark navy surface pairs with white\u002Flight text; every near-white surface (primary buttons, featured pricing tier) pairs with `#0B2B43` text. Never violate this pairing.\n- **Near-white surfaces:** where a white surface is required, use `#fefefe`, never `#ffffff`. Pure `#FFFFFF` is permitted for text only.\n\n**1.3 Typography Signature (mandatory)**\n- Load **Syne** from Google Fonts (weights 400;500;600;700;800) via `\u003Clink>`. Bind `--font-base: 'Syne', sans-serif` and use Syne for **all** text on the page.\n- Canonical display treatment — apply to every display heading (H1–H2) and oversized numeral:\n```css\nfont-family: 'Syne', sans-serif;\ncolor: var(--text-primary);\nfont-weight: 700;\nletter-spacing: -0.04em;\nline-height: 0.9;\n```\n- Body copy: weight 400–500, `line-height: 1.6`, `letter-spacing: normal`, color `var(--text-secondary)` — readable leading is required for paragraphs; the 0.9 leading is reserved for display type.\n- Micro-labels (eyebrows, index labels, nav items, button labels, attributions): uppercase, weight 600, `letter-spacing: 0.1em`, `--text-micro` sizing.\n- Fluid type scale via `clamp()`: `--text-display: clamp(3.25rem, 9vw, 8rem)`, `--text-h2: clamp(2.25rem, 5vw, 4.25rem)`, `--text-h3: clamp(1.5rem, 3vw, 2.25rem)`, `--text-body: clamp(1rem, 1.1vw, 1.125rem)`, `--text-small: 0.875rem`, `--text-micro: 0.75rem`.\n\n**1.4 Layout Tokens**\n- `--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px` (sharp, graphic corners)\n- `--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45)`\n- `--spacing-gap: clamp(1.25rem, 3vw, 2rem)`\n- `--transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`\n- `--z-dropdown: 100; --z-modal: 200; --z-toast: 300`\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** any `style=\"...\"` attribute in HTML.\n- Target everything via class or ID selectors. HTML stays semantic and styling-agnostic — changing the look must never require markup edits.\n\n**2.2 CSS Variables Only**\n- Every color, radius, shadow, spacing, transition, and z-index value must be consumed as `var(--...)`. No hard-coded values inside component rules (the `:root` token definitions themselves excepted).\n\n**2.3 Mandatory Dark Mode — Dark-Only Exception**\n- Dark mode is the default and **only** theme: define all dark token values directly on `:root`.\n- **Explicit exception:** per the Syne Typography specification (Light ✗ \u002F Dark ✓ Full), do **not** build a light theme, a `.dark` class, a `prefers-color-scheme` light variant, or a theme toggle; the toggle\u002F`localStorage` persistence requirement is waived. Keep the architecture fully variable-driven so a light theme could be added later via CSS alone.\n\n**2.4 Flexbox Layout & Mobile-First**\n- Build every layout structure with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified. Documented exceptions: card\u002Fpricing grids may use `align-items: stretch` for equal-height columns.\n- Mobile-first: multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column on small viewports via `flex-wrap` and media queries. **No horizontal scrolling at any width.**\n\n**2.5 Framework Default & Tailwind Integration**\n- Default to Tailwind CSS (CDN or build) with all custom component classes defined in `style.css` via `@layer` \u002F `@apply`, every utility mapped back to the CSS variables. If no framework build is available, deliver clean hand-authored CSS organized in the same layered structure (tokens → base → components → utilities).\n- Define generic reusable classes — `.btn`, `.card`, `.input-group`, `.section`, `.container` — and reuse them; never restyle per-instance.\n- The Tailwind CDN `\u003Cscript src>` (if used) is permitted in addition to the single deferred `script.js` entry point.\n\n**2.6 Typography & Icons (Google-only)**\n- Text: Google Fonts **Syne** via `\u003Clink>` (see 1.3). Icons: **Google Material Symbols (Outlined)** via the official `\u003Clink>`, rendered with the `\u003Cspan class=\"material-symbols-outlined\">` pattern.\n- **Forbidden:** raw inline SVGs, local icon files, emoji used as icons, and icon libraries from any other source.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons** — all states via CSS classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (near-white `#fefefe` surface, `#0B2B43` text) and `.btn--ghost` (transparent, 1px `var(--border-default)` border, white text). Labels in uppercase micro-label style.\n- **Hover:** visible shift (brightness change and\u002For `--shadow-sm`), `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring using `outline` with `var(--primary)` and offset — keyboard navigation must be obvious.\n- **Active:** `transform: scale(0.97)` click feedback.\n- **Loading:** `.btn--loading` disables interaction (pointer-events + `aria-busy`), renders a spinning Material Symbol (`progress`) or CSS spinner, and must not change button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n- **Danger:** `.btn-danger` must be visually distinct in the dark theme (error-red border and text).\n\n**3.2 Cards** (Features, Testimonials, Pricing tiers):\n- **Default:** flexible flex-column layout, `--bg-secondary` or transparent with 1px `var(--border-default)`, `--radius-md`, generous padding, `transition: var(--transition-normal)`.\n- **Hover:** `transform: translateY(-2px)` plus shadow\u002Fborder shift on interactive cards; static cards get a border-color shift only.\n- **Focus-within:** border highlights toward `var(--primary)` when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define `.card--skeleton` with a shimmer keyframe animation that preserves final dimensions — no layout jump.\n- **Empty state:** structured fallback with a Material Symbol icon and clear guidance text.\n\n**3.3 Forms & Inputs** (conditional — apply to any text input the design includes, e.g., an email capture; do not add forms beyond what the design calls for):\n- **States:** empty, focused (outline ring via variables), filled, valid (success border + check icon), invalid (error border, `--text-error` message, error icon), disabled, read-only.\n- **Structure:** flex-column `.input-group` wrapping `\u003Clabel>`, the field, and a dedicated error container wired to `aria-live=\"polite\"` and `aria-describedby`.\n\n**3.4 Modal \u002F Popup** (conditional — the FAQ must NOT use a modal):\n- The FAQ is an inline accordion. If any modal is introduced elsewhere, it must implement: opening \u002F open \u002F loading \u002F success \u002F closing states animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material Symbol close button; keyboard focus trap; close via `Esc` and overlay click; correct `role=\"dialog\"`, `aria-modal`, and focus restoration on close.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, no horizontal overflow, media-query breakpoints.\n- **Smooth animations:** every state change transitions with `transition: var(--transition-normal)`; fully respect `prefers-reduced-motion: reduce` (disable transforms, spins, shimmer, and smooth scrolling).\n- **Accessibility:** maintain WCAG-AA contrast in the dark theme (verify every token pair, including `--text-secondary` on navy). Never communicate state by color alone — pair color with icon or text. Use semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`), correct ARIA roles\u002Flabels on custom widgets (accordion buttons with `aria-expanded` + `aria-controls`), logical DOM\u002Ffocus order, full keyboard operability, a skip-to-content link, and `aria-live` regions for dynamic feedback.\n- **Mandatory visual feedback:** every hover, click, and submission produces a visible state change (nav underline offsets, button states, card lifts, accordion motion).\n- **Anchors & nav:** smooth-scroll to section anchors; the sticky header must not trap focus.\n\n---\n\n## 5. PAGE BUILD SPECIFICATION\n\nBuild in order, with real English copy in the art-center voice. Invent one coherent fictional brand (e.g., an experimental type foundry or design studio) and write all headlines, body copy, testimonial names\u002Froles, pricing tiers, and FAQ entries for it. **No lorem ipsum anywhere.**\n\n1. **Header (sticky):** wordmark in Syne 800; anchor nav links (Features, How It Works, Testimonials, Pricing, FAQ); one `.btn--primary` CTA; accessible mobile menu (Material Symbol `menu` button with `aria-expanded`\u002F`aria-controls`, flex-column panel, closes on `Esc` and link click).\n2. **Hero:** full-viewport solid `var(--bg-primary)`; isolated typographic composition — uppercase eyebrow, display headline at `--text-display` with the canonical treatment (Syne 700, `-0.04em`, `0.9` line-height, strictly left-aligned), one supporting line in `--text-secondary`, and two CTAs (`.btn--primary` + `.btn--ghost`). The text block is centered in the viewport and spans ~50–60% of its scale. Optional CSS-only graphic accent (hairline rule or oversized outlined numeral).\n3. **Features (3 cards):** section header with index label (\"01 — Features\" micro-label style) + H2; three `.card` components in a flex row (wrapping to a single column on mobile), each with a Material Symbol icon, H3, and copy; hover border\u002Felevation shift.\n4. **How It Works (3 steps):** three steps marked by oversized Syne numerals (01 \u002F 02 \u002F 03) used as graphic elements, hairline rules between steps, left-aligned H3 + copy; flex row → column.\n5. **Testimonials:** three quote blocks — large quote text in Syne 500–600, attribution in micro-label style (name + role), hairline separators; flex row → column.\n6. **Pricing (3 tiers):** three `.card` tiers; the middle tier is `.card--featured` — inverted (near-white `#fefefe` surface, `#0B2B43` text, \"Most popular\" micro-label) with the `.btn--primary`; outer tiers use ghost buttons. Each tier: name, large Syne price, feature list with Material Symbol `check` icons, CTA. Equal-height columns (`align-items: stretch` — the documented exception).\n7. **FAQ:** 5–6 accordion items; each header is a `\u003Cbutton aria-expanded>` with a rotating Material Symbol `expand_more` and an animated panel (CSS `grid-template-rows` or `max-height` transition, reduced-motion safe). No modal.\n8. **Final CTA:** full-width isolated typographic statement mirroring the hero treatment (display headline + `.btn--primary`).\n9. **Footer:** top hairline border; wordmark; 2–3 columns of secondary links (e.g., Product, Company, Legal) with hover\u002Ffocus states; small print and copyright. Link targets may use `href=\"#\"` where no destination exists — this is the only permitted placeholder.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cstyle>` blocks; no inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`) — plus the permitted Tailwind CDN script if used.\n- **Naming:** one consistent **BEM** convention across the entire deliverable (`.card`, `.card__title`, `.card--featured`, `.btn--primary`, `.faq__item`, `.faq__panel`…). Never mix conventions.\n- **Copy:** all user-facing copy in **English**, original and on-brand. No lorem-ipsum submissions; placeholders only where content was genuinely unspecified.\n- **Completeness:** ship the full page on the first attempt with every component state (hover, focus, active, loading, disabled, skeleton, empty) defined in CSS, even where not all are triggered on load.\n",1791954985272]