[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-279-Egyptian-Ancient-Revival":3},"# System Prompt: Egyptian \u002F Ancient Revival Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in a single attempt. Do not ask clarifying questions — generate the final code immediately.\n\n**Landing Page Theme:** Egyptian \u002F Ancient Revival (1820s & 1920s Egyptomania revivals — museum branding, monumental, symmetric, ancient)\n**Output Category:** Cultural & Heritage\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\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live in a dedicated `style.css` file. **Forbidden:** any `style=\"...\"` attribute in HTML.\n* All design properties, layout rules, and states must be targeted via class or ID selectors only.\n* HTML must remain clean, semantic, and style-agnostic — changing the look requires editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nUse the provided design tokens as the foundation, but **rename\u002Fextend them to the mandatory token set** and keep both sets working via aliasing where needed:\n\n* **Colors:** `--primary` (lapis blue `#1b3f6b`), `--secondary` (terracotta `#a3441f`), `--bg-primary` (`#efe2c0`), `--bg-secondary` (`#f7ecd3`), `--text-primary` (`#241a0e`), `--text-secondary` (`#5a4527`), `--text-success`, `--text-error`, `--border-default` (`#b8860b`), `--border-error`, `--border-success`, `--accent` (gold `#b8860b`).\n* **Contrast Pairing:** Every light background token must pair with dark text, every dark background with light text — in **both** light and dark themes.\n* **Light Mode Background:** Never pure white; the papyrus cream `#efe2c0` is the base. Use `#fefefe` only if a near-white is genuinely required.\n* **Radius\u002FShadow:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 6px`, `--shadow-sm`, `--shadow-md` (use the provided values).\n* **Spacing\u002FTransitions:** `--spacing-gap`, `--transition-fast: .15s`, `--transition-normal: .3s`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n* **Signature tokens (mandatory):** `--key-pattern` (repeating gold key-pattern gradient) and `--banded-border: 4px solid var(--accent)` — apply the key-pattern stripe along the nav base and the top edge of every card, exactly as defined in the reference CSS.\n\n**1.3 Mandatory Dark Mode**\n* Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`.\n* Dark palette guidance: deep lapis night backgrounds (e.g., `#0e1a2b` \u002F `#14243a`), papyrus-cream text (`#f7ecd3`), gold accents preserved, terracotta brightened for contrast.\n* Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button in the nav with correct `aria-pressed` and `aria-label` states, using a Google Material Symbols icon (e.g., `dark_mode` \u002F `light_mode`).\n* Validate contrast in both modes before finishing — the source spec explicitly requires light and dark validation.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless a justified exception exists (e.g., stacked step content).\n* Mobile-first: card grids, pricing tiers, and testimonial rows collapse to single-column on small viewports. No horizontal scrolling at any breakpoint.\n* Honor the theme's **monumental symmetry**: sections are centered, symmetrically composed, with generous vertical rhythm (`--space-24` between sections).\n\n**1.5 Framework**\n* Use Tailwind CSS via CDN **or** clean custom CSS with `@layer`\u002F`@apply` — but all component styling must resolve to reusable class names (`.btn`, `.card`, `.input-group`, `.badge`) driven by CSS variables. Do not mix utility soup with component classes inconsistently; pick one convention (BEM, as in the reference CSS: `.btn--primary`) and apply it everywhere.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Fonts:** Load Google Fonts — use **Cinzel** for display\u002Fheadings (bold slab 'Egyptian' monumental feel) and a readable serif\u002Fsans pairing for body (e.g., **Cinzel** + **Lora**). Bind to `--font-display` and `--font-base`. Do not rely on 'Trajan Pro' (not on Google Fonts); keep it only as a fallback in the stack.\n* **Icons:** Google Material Symbols only. **Forbidden:** raw inline SVGs, local icon files, emoji as icons.\n* Use hieroglyph-inspired decorative characters (e.g., 𓂀 𓆣 𓋹 𓇳) **only** as CSS `content` decoration on pseudo-elements, never as functional icons.\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n**2.1 Buttons** — All states via CSS classes:\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px. Variants: `.btn` (papyrus default), `.btn--primary` (lapis with gold border), `.btn--danger` (terracotta, visually distinct in both themes).\n* Hover: brightness\u002Fshadow shift, `cursor: pointer`. Focus: distinct gold\u002Flapis focus ring via `outline`\u002F`box-shadow`. Active: `transform: scale(0.97)`.\n* Loading: disables interaction, renders an animated CSS spinner or rotating Google 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\n**2.2 Cards** (Features, Pricing, Testimonials):\n* Default: flexbox layout, `--bg-secondary` surface, `1px solid var(--border-default)` border, `--shadow-md`, key-pattern stripe on top edge via `.card::before`.\n* Hover: `transform: translateY(-2px)` + shadow shift. Focus-within: gold border highlight when a child link\u002Fbutton is focused.\n* Loading: shimmer skeleton animation defined in CSS (no layout jump).\n* Empty state: Google Icon + guidance text fallback structure.\n\n**2.3 Forms & Inputs** (Newsletter signup in Final CTA \u002F Footer):\n* States: empty, focused (gold ring), filled, valid (success border + Material check icon), invalid (error border, error text, error icon), disabled, read-only.\n* Structure: flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n**2.4 FAQ Accordion** (use `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom widget):\n* Animated open\u002Fclose via CSS transitions; visible focus states; full keyboard operability; chevron Material icon rotating on open.\n\n**2.5 Modal** (only if a pricing tier needs a \"Choose plan\" confirmation):\n* States: opening, open, loading, success\u002Ferror, closing — all CSS-animated. Centered flex container, backdrop overlay, Material icon close button, focus trapping, `Esc` and overlay-click close, `role=\"dialog\"` + `aria-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow, breakpoints for card grids (3-col → 2-col → 1-col).\n* **Smooth animations:** `transition: var(--transition-normal)` on state changes; respect `prefers-reduced-motion: reduce` by disabling transforms and animations.\n* **Accessibility:** WCAG-sufficient contrast in light and dark modes; never rely on color alone for state; semantic HTML5 (`\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `\u003Carticle>`); logical focus order; full keyboard operability; `aria-live` regions for form feedback and toasts.\n* **Mandatory visual feedback** on every click, hover, and submission.\n* **Theme character:** monumental symmetry, hieroglyph\u002Fpapyrus motifs, lotus and scarab decorative accents (via CSS pseudo-elements and Material icons), gold-on-papyrus and lapis-blue banding, bold slab Egyptian display type. All user-facing copy in **English**, written in a museum\u002Fheritage brand voice (e.g., \"Walk among the pharaohs\", \"Unearth the collection\").\n\n---\n\n## 4. DELIVERABLES\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate files. No inline `\u003Cscript>` blocks beyond one deferred entry-point reference. No inline CSS.\n* **Naming:** one consistent BEM convention across the entire deliverable.\n* **Content:** write real, themed English copy for all sections (hero headline, 3 feature cards, 3 steps, 3 testimonials, 3 pricing tiers, 5–6 FAQs, final CTA, footer secondary links). No lorem ipsum.\n* **script.js scope:** theme toggle with localStorage persistence, FAQ accordion behavior (if not native `\u003Cdetails>`), newsletter form validation\u002Ffeedback, and modal logic if used — nothing more.\n* **Section requirements:** Hero with monumental Cinzel headline, subheadline, and primary CTA; Features as 3 symmetric cards with Material icons; How It Works as 3 numbered steps with a connecting gold line; Testimonials as 3 cards with names\u002Froles; Pricing as 3 tiers with the middle tier visually elevated (gold border + badge); FAQ; Final CTA with newsletter input; Footer with secondary links, key-pattern top border, and copyright.\n",1791954984199]