[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-426-Persian-Miniature":3},"# Landing Page Build Prompt — \"Persian Miniature\" Theme\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt using only the specification below. Do not ask clarifying questions; make reasonable, on-theme decisions where unspecified.\n\n## 1. PROJECT OVERVIEW\n\n- **Deliverable:** A single-page Landing Page themed **Persian Miniature** (13th–17th century Persianate manuscript painting tradition: Timurid\u002FSafavid miniature, Shahnameh\u002FBehzad court-scene aesthetics).\n- **Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Visual identity:** Dense, intricate detail across flattened, multi-perspective compositions; jewel-toned mineral pigments (lapis blue, vermillion, gold leaf); ornamental floral (islimi) borders framing every panel; fine, precise linework; subtle shadow and blur effects.\n- **All user-facing copy must be written in English.** Write real, thematic copy (no lorem ipsum) — e.g., a fictional product\u002Fbrand with a Persianate manuscript aesthetic (such as a digital art\u002Fstorytelling platform). Name the brand yourself; keep it evocative and consistent.\n\n## 2. ARCHITECTURE RULES (MANDATORY)\n\n**2.1 CSS-First, Zero Inline CSS**\n- Deliver three separate files: `index.html`, `style.css`, `script.js`. No `style=\"...\"` attributes anywhere in the HTML. No inline `\u003Cscript>` blocks beyond one deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference.\n- All styling via class\u002FID selectors in `style.css`. HTML stays semantic and clean.\n\n**2.2 Design Tokens (use exactly these, from the reference spec)**\nStore all tokens in `:root`:\n- Colors: `--color-bg: #f6ecd2`, `--color-surface: #fbf5e4`, `--color-surface-2: #ecdcb0`, `--color-text: #2a1a3d`, `--color-text-muted: #5c4a70`, `--color-primary: #1c398e`, `--color-accent: #a61b29`, `--color-gold-leaf: #c9972c`, `--color-turquoise: #2f7d6b`.\n- Radius: `--radius-sm: 4px`, `--radius-md: 10px`, `--radius-lg: 20px`, `--radius-pill: 999px`.\n- Shadows: `--shadow-gilt-frame: 0 0 0 3px #c9972c, 0 4px 14px rgba(42,26,61,0.25)`, `--shadow-panel: 0 2px 10px rgba(42,26,61,0.18)`.\n- Fonts: `--font-sans: 'Cormorant Garamond', 'Scheherazade New', serif`, `--font-display: 'Scheherazade New', 'Cormorant Garamond', serif`.\n- Text scale: `--text-xs` through `--text-5xl` per the reference spec.\n- Spacing: `--space-1` through `--space-24` per the reference spec.\n- Ease: `--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1)`; transitions `--transition-fast: .15s`, `--transition-normal: .25s`.\n- Signature effects: `--islimi-border: repeating-linear-gradient(90deg, #c9972c 0 3px, transparent 3px 14px)` and `--lapis-vermillion-wash: linear-gradient(135deg, rgba(28,57,142,0.08), rgba(166,27,41,0.08))`.\n- Elevation: `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n\n**2.3 Mandatory Dark Mode**\n- The source spec does not declare modes — you must therefore define and validate both light and dark before publishing.\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`. Dark palette suggestion (keep jewel-toned, manuscript-night mood): bg `#1a1028`, surface `#241a38`, surface-2 `#2f2247`, text `#f6ecd2`, text-muted `#c4b2d6`; keep primary `#4a6fd4` (lightened lapis for contrast), accent `#d44553`, gold-leaf `#d9ab3f`, turquoise `#4fa38d`. Every light background token must pair with a dark text token and vice versa — verify contrast in both modes.\n- Provide a visible theme toggle in the nav (Google Material Icons sun\u002Fmoon icon) with `aria-pressed` and `aria-label`. Persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Switching must not require HTML restructuring.\n\n**2.4 Flexbox & Mobile-First**\n- Build all layouts with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: multi-column rows (features, pricing, steps) collapse to single column on small viewports. No horizontal scrolling at any breakpoint.\n\n**2.5 Typography & Icons (Google only)**\n- Load **Google Fonts** via `\u003Clink>`: Cormorant Garamond and Scheherazade New. Bind to `--font-sans` \u002F `--font-display`.\n- Icons: **Google Material Symbols** only. No inline SVGs, no local icon files, no emoji as icons.\n\n**2.6 Naming Convention**\n- Use the BEM convention from the reference spec (`.btn`, `.btn--primary`, `.card`, `.input`, `.badge`, `.nav`) consistently across the entire deliverable. Never mix conventions.\n\n## 3. SECTION & COMPONENT REQUIREMENTS\n\n**3.1 Base Components (implement per the reference spec)**\n- `.nav`: flex, gold bottom border plus islimi `::after` rule; contains brand name, nav links, theme toggle, and a `.btn--primary`.\n- `.btn` \u002F `.btn--primary` \u002F `.btn--danger`: all states — default (flex, centered, gap, min 44×44px touch target), hover (gilt-frame shadow), focus-visible (gold outline ring), active (`transform: scale(0.97)`), loading (spinner via CSS animation, dimensions preserved, double-click prevented), disabled (`opacity: .45`, `cursor: not-allowed`), and success\u002Ferror feedback states using turquoise\u002Fvermillion tokens.\n- `.card`: surface background, islimi top rule via `::before`, panel shadow; hover lift (`translateY(-2px)` + shadow shift) when interactive; `:focus-within` gold border highlight; skeleton shimmer class for loading.\n- `.input`: empty, focused (gilt-frame ring), filled, valid (turquoise border + check icon), invalid (vermillion border, error text, error icon), disabled, read-only. Wrap in a flex `.input-group` with label, field, and dedicated error container.\n- `.badge`: turquoise pill with gold border, per spec.\n\n**3.2 Sections**\n- **Hero:** Full-width panel framed by an islimi ornamental border (CSS gradients only — no images required; if you use imagery, use only decorative CSS-drawn motifs). Display font headline, subcopy, primary + secondary CTA buttons, and a badge. Apply the lapis-vermillion wash. Include a subtle blurred-glow decorative layer behind the headline.\n- **Features:** 3 `.card`s in a responsive flex row (column on mobile), each with a Material Symbol icon in a gold-framed medallion, title, and copy.\n- **How It Works:** 3 numbered steps with gold numeral medallions, connected visually by an islimi dashed rule; vertical stack on mobile.\n- **Testimonials:** 3 quote cards with attribution; use the `.card` pattern with turquoise accents.\n- **Pricing:** 3 tier cards; middle tier visually elevated (gilt-frame shadow, badge \"Most Illuminated\"). Each card: tier name, price, feature list with Material Symbol check icons, and a `.btn`. Destructive\u002Fdowngrade actions, if any, use `.btn--danger` styling distinct in both themes.\n- **FAQ:** Use native `\u003Cdetails>\u002F\u003Csummary>` (or accessible custom accordion with `aria-expanded`, keyboard operable) styled with gold borders and a rotating Material Symbol chevron.\n- **Final CTA:** Full-width framed panel, display-font headline, email `.input-group` with valid\u002Finvalid state handling and a `.btn--primary` that shows a loading → success state on submit; feedback announced via an `aria-live=\"polite\"` region.\n- **Footer:** Secondary links in flex columns, brand mark, copyright, social links (Material Symbols icons), collapsing gracefully on mobile.\n\n## 4. UX, A11Y & INTERACTION RULES\n\n- Smooth CSS transitions (`var(--transition-normal)`) on all state changes; respect `prefers-reduced-motion: reduce` by disabling animations.\n- Sufficient text contrast in **both light and dark modes**; never rely on color alone to communicate state (pair color with icons\u002Ftext).\n- Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), logical focus order, full keyboard operability, ARIA labels on the toggle and custom widgets, `aria-live` regions for form\u002Ftoast feedback.\n- Every click, hover, and submission triggers visible feedback. No dead links — footer\u002Fnav links may use `href=\"#section-id\"` anchors to real sections.\n- No horizontal overflow at any viewport width.\n\n## 5. DELIVERABLE\n\n- Exactly three files: `index.html`, `style.css`, `script.js` (script handles only: theme toggle + persistence, FAQ accordion behavior if custom, CTA form validation\u002Floading\u002Fsuccess demo, and smooth-scroll nav). No other JS.\n- All copy in English, real and thematic. No lorem ipsum.\n- Validate the final page in both light and dark mode before considering it complete.\n\n**Exception clause:** The reference spec's token names (`--color-*`, `.btn--primary` BEM) take precedence over generic token names; map any generic requirement (e.g., `--primary`, `--text-success`) onto the spec's tokens rather than duplicating them.\n",1791954986821]