Ancient Egyptian Instructional Scroll demo
Ancient Egyptian Instructional Scroll

A historical aesthetic inspired by ancient Egyptian papyrus scrolls, featuring hieroglyphic motifs, flat profile figures, and a rich gold and lapis lazuli color palette.
Category: Cultural & Heritage
Era: Ancient Egyptian Revival
Prompt: 14.5 KB · 1970 words
# Build Prompt: "Ancient Egyptian Instructional Scroll" Landing Page

**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.

---

## Project Brief & Theme Specification

**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.

**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.

**Color Palette → Token Mapping (Light Mode):**

| Token | Value | Usage |
|---|---|---|
| `--bg-primary` | `#DCCB96` | Aged papyrus page background |
| `--text-primary` | `#2B2118` | Soot-ink body text |
| `--primary` | `#009DA0` | Faience turquoise — borders, icons, large accents |
| `--secondary` | `#26619C` | Lapis lazuli — bands, primary buttons, CTA section |
| `--gold` | `#FFD700` | Ornamental gold — borders, rings, dividers, featured elements |
| `--carnelian` | `#B31B1B` | Carnelian red — error/danger states |
| `--bg-secondary` | `#E8DBB5` | Lighter papyrus panel (cards, steles) |
| `--text-secondary` | `#5C4A33` | Faded ink — secondary copy |
| `--border-default` | `#C4AE7C` | Aged papyrus edge |
| `--text-success` / `--border-success` | `#1E7A46` | Malachite green — success states |
| `--text-error` / `--border-error` | `#B31B1B` | Carnelian — error states |
| `--primary-deep` | `#007679` | Darkened turquoise for accent-colored *text* on papyrus (WCAG AA) |

**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/stone 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`.

**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.

**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`.

**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.

**Required sections, in order:** Sticky header/nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
All 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.

**1.2 CSS Variables & Theme Tokens**
Define 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.

**1.3 Mandatory Dark Mode**
Define 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.

**1.4 Flexbox Layout & Mobile-First Alignment**
Build 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.

**1.5 Framework Default & Tailwind CSS Integration**
Use 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.

**1.6 Typography & Icons (Google Fonts Mandatory)**
Load via `<link>` 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`/`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.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
`.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/shadow shift with `cursor: pointer`. **Focus** — distinct gold focus ring via `outline`/`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/Error** (`.is-success` / `.is-error`) — temporary feedback tinted by `--text-success` / `--text-error`, announced to assistive tech.

**2.2 Card Component**
`.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/button 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.

**2.3 Form & Input Requirements**
`.input-group`: flex column wrapping a `<label>`, 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.

**2.4 Modal / Popup Requirements**
No modals are required for this page; however, if any overlay is introduced it must cover: opening, open, loading, success/error, 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`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow at any viewport width.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion: reduce` by disabling transforms, shimmer, parallax, and entrance motion.
- **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/labels on custom widgets (theme toggle, accordion), logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, toasts, loading states).
- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.
- **Scrolling:** Smooth anchor scrolling (disabled under reduced motion); sticky header with a subtle backdrop.

---

## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATIONS

**4.1 Sticky Header**
Brand 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`/`light_mode`, `aria-pressed`, `aria-label`, `localStorage` persistence). On mobile, the nav collapses to a vertical layout with no horizontal scrolling.

**4.2 Hero**
Full-viewport papyrus panel inside the gold/lapis 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/rise entrance, disabled under reduced motion.

**4.3 Features (3 Cards)**
Section 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.

**4.4 How It Works (3 Steps)**
Three 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.

**4.5 Testimonials**
Three quote panels styled as inscribed stelae / papyrus fragments, each with a Material Symbol `format_quote`, quote copy, author name, and title. Responsive flex/grid; optional scroll-snap on mobile.

**4.6 Pricing (3 Tiers)**
Thematically 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.

**4.7 FAQ**
Accessible accordion using `<details>`/`<summary>` (or button + region with `aria-expanded`/`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.

**4.8 Final CTA**
Full-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.

**4.9 Footer**
Deep ink/stone 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.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. A single deferred entry point (`<script src="script.js" defer>`); no inline `<script>` blocks, no inline styles anywhere.
- **Naming Convention:** BEM consistently across the entire deliverable (`.hero__title`, `.card--featured`, `.btn--gold`) — never mix conventions.
- **script.js Scope:** Theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback, FAQ accordion enhancement (if not native `<details>`), form/toast feedback, and optional scroll-reveal — all progressive enhancement, guarded, and reduced-motion aware.
- **Copy:** Real, on-theme English copy per the Content Direction. No lorem ipsum; no unrequested placeholder content.
- **First Attempt:** Deliver the complete, final code immediately in a single response.