[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-076-Ancient-Egyptian-Instructional-Scroll":3},"# Build Prompt: \"Ancient Egyptian Instructional Scroll\" Landing Page\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Do not ask clarifying questions — deliver the final code immediately, following every rule below without omission.\n\n---\n\n## Project Brief & Theme Specification\n\n**Theme:** Ancient Egyptian Instructional Scroll — **Type:** Authoritative, Mythological, Timeless. **Era:** Ancient Egypt. **Output category:** Cultural & Heritage. **Keywords:** egyptian, scroll, papyrus, hieroglyphics, gold, stone, pyramid, ancient.\n\n**Visual Direction:** Ancient Egypt landing page, papyrus scroll background, hieroglyphics design, gold and lapis lazuli, flat profile art, historical aesthetic. Required visual effects: flat profile figures, hieroglyphic borders, architectural diagrams, aged papyrus grain, stone-carved aesthetic.\n\n**Color Palette → Token Mapping (Light Mode):**\n\n| Token | Value | Usage |\n|---|---|---|\n| `--bg-primary` | `#DCCB96` | Aged papyrus page background |\n| `--text-primary` | `#2B2118` | Soot-ink body text |\n| `--primary` | `#009DA0` | Faience turquoise — borders, icons, large accents |\n| `--secondary` | `#26619C` | Lapis lazuli — bands, primary buttons, CTA section |\n| `--gold` | `#FFD700` | Ornamental gold — borders, rings, dividers, featured elements |\n| `--carnelian` | `#B31B1B` | Carnelian red — error\u002Fdanger states |\n| `--bg-secondary` | `#E8DBB5` | Lighter papyrus panel (cards, steles) |\n| `--text-secondary` | `#5C4A33` | Faded ink — secondary copy |\n| `--border-default` | `#C4AE7C` | Aged papyrus edge |\n| `--text-success` \u002F `--border-success` | `#1E7A46` | Malachite green — success states |\n| `--text-error` \u002F `--border-error` | `#B31B1B` | Carnelian — error states |\n| `--primary-deep` | `#007679` | Darkened turquoise for accent-colored *text* on papyrus (WCAG AA) |\n\n**Contrast laws:** `#2B2118` on `#DCCB96` for all body copy. Gold `#FFD700` is ornamental only — borders, rings, dividers, large display accents — never small gold text on papyrus; gold text is permitted only on dark lapis\u002Fstone surfaces. Turquoise `#009DA0` is never used for small text on papyrus; use `--primary-deep` instead. Never use pure white; if a near-white is required, use `#fefefe`.\n\n**Signature CSS (implement verbatim, via tokens):** The main scroll wrapper carries `background-color: #DCCB96; color: #2B2118;` and the scroll frame `border-top: 10px solid #FFD700; border-bottom: 10px solid #26619C;` — applied through `var(--gold)` and `var(--secondary)` so dark mode can retune them.\n\n**Typography (Google Fonts only):** Display: `'Cinzel Decorative', cursive` (exact declaration per spec) for hero title, section headings, step numerals, tier names. Subheadings: `'Cinzel'`. Body: `'EB Garamond'`. Decorative hieroglyph strips: `'Noto Sans Egyptian Hieroglyphs'` (aria-hidden, decorative only). Icons: Google Material Symbols. Bind to `--font-display`, `--font-heading`, `--font-base`, `--font-glyphs`.\n\n**Content Direction (real English copy — no lorem ipsum):** Brand the page as an instructional Egyptology offering, e.g., \"The House of Life — Master the Art of Hieroglyphs,\" a masterclass in reading Egyptian hieroglyphs. Tone: authoritative and timeless (\"Decipher the words of the gods\"). Ground copy in authentic concepts: cartouche, stele, uniliteral signs, Per-Ankh. All user-facing copy in English.\n\n**Required sections, in 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**\nAll styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML. All design properties, layout rules, and states are targeted exclusively via class or ID selectors. HTML stays semantic and style-agnostic — retheming the site must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine every token in `:root` (and re-map under the dark theme): all palette tokens from the Brief, plus `--radius-sm: 4px`, `--radius-md: 10px`, `--radius-lg: 20px`, `--shadow-sm: 0 1px 3px rgba(43,33,24,0.15)`, `--shadow-md: 0 6px 18px rgba(43,33,24,0.25)`, `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100`. Every light background token must pair with a dark text token and vice versa — enforce this pairing in every theme, not only the default.\n\n**1.3 Mandatory Dark Mode**\nDefine dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class. Implement a \"torch-lit tomb\" variant: `--bg-primary: #1B150C`, `--bg-secondary: #261D10`, `--text-primary: #EFE3C3`, `--text-secondary: #C7B58E`, gold stays `#FFD700` (luminous), lapis lightens to `#6FA0DC` for text-level use, turquoise brightens to `#2FC0C4`, carnelian brightens to `#E05252` for error text, borders `#3A2F1D`, deeper shadows. Background and text variables must switch seamlessly with zero HTML restructuring. Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit, with a visible toggle control carrying correct `aria-pressed` and `aria-label` state. **Exception clause:** the source style spec listed dark mode as not required; dark mode remains mandatory under this architecture and must ship as the torch-lit tomb variant above.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\nBuild all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment. All flex layouts are mobile-responsive out of the box — rows convert to columns on smaller viewports. Horizontal scrolling is prohibited anywhere on the page. Use fluid `clamp()` typography and spacing.\n\n**1.5 Framework Default & Tailwind CSS Integration**\nUse Tailwind CSS (CDN or build) for layout utilities only (flex, grid, spacing, responsive breakpoints). All thematic and component styling lives in `style.css` as reusable BEM classes (`.btn`, `.card`, `.input-group`) mapped to the CSS variables. Never hardcode hex values in utility classes; never bypass the variable system with inline Tailwind color utilities.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\nLoad via `\u003Clink>` with `preconnect` and `display=swap`: Cinzel Decorative, Cinzel, EB Garamond, Noto Sans Egyptian Hieroglyphs, and Google Material Symbols. Raw inline SVGs, local icon files, and emoji icons are forbidden. All decorative art must be CSS-constructed: pyramid and obelisk silhouettes via `clip-path` polygons, sun discs via radial gradients, hieroglyphic bands and aged papyrus grain via layered `repeating-linear-gradient`\u002F`radial-gradient` textures and pseudo-elements. Hieroglyph strips use Noto Sans Egyptian Hieroglyphs characters with `aria-hidden=\"true\"` and are purely decorative — never carry meaning.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n`.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (lapis background, papyrus-light text), `.btn--gold` (gold background, ink text — hero and final CTA), `.btn--ghost` (transparent, gold border), `.btn--danger` (carnelian background, light text — visually distinct in both themes). Style all states via CSS classes: **Hover** — brightness\u002Fshadow shift with `cursor: pointer`. **Focus** — distinct gold focus ring via `outline`\u002F`box-shadow` using CSS variables for keyboard navigation. **Active** — `transform: scale(0.97)` click feedback. **Loading** (`.is-loading`) — disables interactions, prevents double-clicks, renders a CSS border-spinner or animated Material Symbol without distorting button dimensions. **Disabled** — `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError** (`.is-success` \u002F `.is-error`) — temporary feedback tinted by `--text-success` \u002F `--text-error`, announced to assistive tech.\n\n**2.2 Card Component**\n`.card`: flexible Flexbox layout, `--bg-secondary` surface, `--border-default` border, `--radius-md`, `--shadow-sm`. **Hover** (interactive cards only): `transform: translateY(-2px)` plus `--shadow-md` elevation shift. **Focus-within**: gold border highlight when any child link\u002Fbutton receives focus. **Loading skeleton** (`.card--skeleton`): shimmer animation via a sweeping linear-gradient, with reserved dimensions to prevent layout jumps. **Empty state** (`.card--empty`): structured fallback with a Material Symbol and clear guidance text. Feature cards place their Material Symbol icon inside a gold cartouche ring.\n\n**2.3 Form & Input Requirements**\n`.input-group`: flex column wrapping a `\u003Clabel>`, the input field, and a dedicated error feedback container. Account for all states: empty, focused (gold outline ring), filled, valid (`--border-success` + check Material Symbol), invalid (`--border-error`, red text, error icon, `aria-invalid`, `aria-describedby`), disabled, and read-only. Error messages render inside an `aria-live=\"polite\"` container. If a newsletter signup is included in the footer or final CTA, it must implement this full specification.\n\n**2.4 Modal \u002F Popup Requirements**\nNo modals are required for this page; however, if any overlay is introduced it must cover: opening, open, loading, success\u002Ferror, and closing states — all animated via CSS transitions. Centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, and close via `Esc` or overlay click, layered at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow at any viewport width.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion: reduce` by disabling transforms, shimmer, parallax, and entrance motion.\n- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes. Never rely on color alone to communicate state — pair icons and text with every state color. Semantic HTML5 elements (`header`, `nav`, `main`, `section`, `article`, `footer`), correct ARIA roles\u002Flabels on custom widgets (theme toggle, accordion), logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, toasts, loading states).\n- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n- **Scrolling:** Smooth anchor scrolling (disabled under reduced motion); sticky header with a subtle backdrop.\n\n---\n\n## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATIONS\n\n**4.1 Sticky Header**\nBrand name inside a CSS cartouche (gold-bordered, `--radius-lg` rounded frame). Anchor navigation: Features, Method, Testimonials, Pricing, FAQ. Theme toggle button (Material Symbol `dark_mode`\u002F`light_mode`, `aria-pressed`, `aria-label`, `localStorage` persistence). On mobile, the nav collapses to a vertical layout with no horizontal scrolling.\n\n**4.2 Hero**\nFull-viewport papyrus panel inside the gold\u002Flapis scroll frame. Display title in Cinzel Decorative, supporting subhead in EB Garamond, two CTAs (`.btn--gold` primary + `.btn--ghost` secondary). CSS-drawn backdrop: pyramid silhouettes (clip-path triangles), sun disc (radial gradient), horizon band — all `aria-hidden` with `pointer-events: none`. Hieroglyphic border strips (Noto Sans Egyptian Hieroglyphs, `aria-hidden`) above and below. Gentle fade\u002Frise entrance, disabled under reduced motion.\n\n**4.3 Features (3 Cards)**\nSection heading plus a responsive 3→2→1 card grid. Each card: Material Symbol icon in a gold cartouche ring, Cinzel heading, EB Garamond body. Suggested topics: the uniliteral alphabet, reading real stelae and monuments, guided expert instruction. All card states per 2.2.\n\n**4.4 How It Works (3 Steps)**\nThree numbered \"stone tablet\" steps connected by a gold rule. Numerals in Cinzel Decorative inside gold-ringed discs; each step has a title and short copy. On mobile, steps stack vertically and the connector becomes a vertical gold rule.\n\n**4.5 Testimonials**\nThree quote panels styled as inscribed stelae \u002F papyrus fragments, each with a Material Symbol `format_quote`, quote copy, author name, and title. Responsive flex\u002Fgrid; optional scroll-snap on mobile.\n\n**4.6 Pricing (3 Tiers)**\nThematically named tiers (e.g., Scribe, Priest, Pharaoh). Middle tier uses `.card--featured`: gold border, elevated shadow, and a \"Most Revered\" badge. Each tier shows a price, a feature list with Material Symbol check items, and a CTA — the featured tier receives `.btn--gold`. Responsive stacking on mobile.\n\n**4.7 FAQ**\nAccessible accordion using `\u003Cdetails>`\u002F`\u003Csummary>` (or button + region with `aria-expanded`\u002F`aria-controls`). Material Symbol `expand_more` chevron rotates on open; smooth height transition; fully keyboard operable. Write five to six real questions with real answers about the course.\n\n**4.8 Final CTA**\nFull-width lapis lazuli band (`--secondary`) with papyrus-light text (contrast pairing enforced), gold hieroglyph border strips, a large Cinzel Decorative headline, and one prominent `.btn--gold`. If an email capture is included, implement Section 2.3 with an `aria-live` toast confirming submission.\n\n**4.9 Footer**\nDeep ink\u002Fstone background (invert `--text-primary` as the surface, papyrus-light text). Grouped secondary links (About, Curriculum, Instructors, Contact; legal: Privacy, Terms), Material Symbol social icons with `aria-label`s, a copyright line, and a back-to-top control. Every footer link is keyboard-focusable with a visible focus ring.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. A single deferred entry point (`\u003Cscript src=\"script.js\" defer>`); no inline `\u003Cscript>` blocks, no inline styles anywhere.\n- **Naming Convention:** BEM consistently across the entire deliverable (`.hero__title`, `.card--featured`, `.btn--gold`) — never mix conventions.\n- **script.js Scope:** Theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback, FAQ accordion enhancement (if not native `\u003Cdetails>`), form\u002Ftoast feedback, and optional scroll-reveal — all progressive enhancement, guarded, and reduced-motion aware.\n- **Copy:** Real, on-theme English copy per the Content Direction. No lorem ipsum; no unrequested placeholder content.\n- **First Attempt:** Deliver the complete, final code immediately in a single response.\n",1791954981208]