Mystical Western demo
Mystical Western

A retro western aesthetic combining classic cowboy desert imagery with cosmic and spiritual elements, evoking vintage festival posters and indie apparel branding.
Category: Retro & Pop
Era: 1970s Retro
Prompt: 13.6 KB · 1866 words
# SYSTEM PROMPT — "MYSTICAL WESTERN" LANDING PAGE (COMPLETE FIRST-ATTEMPT BUILD)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page described below on the first attempt. Every rule in this document is mandatory unless explicitly marked otherwise.

**Objective:** Produce a single-page marketing site themed **Mystical Western** — a modern indie western fusion (retro & pop mood) blending cowboy desert aesthetics with cosmic, spiritual, celestial symbolism: moonlight, stars, tarot, boho-western. Required sections, in order: **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
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic HTML5 and agnostic of visual styling; a full re-theme must be achievable by editing `style.css` only.

### 1.2 CSS Variables & Theme Tokens
Store every visual token in `:root` (and theme classes) — no hard-coded hex values inside component rules:

* **Brand palette (bind exactly):** `--primary: #C2A878` (Desert Tan), `--secondary: #191970` (Midnight Blue), `--accent: #E97451` (Burnt Sienna), `--gold: #FFD700` (Starlight Gold), `--cactus: #5F7A4A` (Cactus Green), `--silver: #C4C4D4` (Moonstone Silver), `--purple: #7B6B8A` (Dusty Purple), `--warm-black: #1A1A2E` (Warm Black).
* **Semantic tokens:** `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa, in every theme. Dark theme ("Midnight Desert") = Warm Black / Midnight Blue backgrounds with Desert Tan / Starlight Gold / Moonstone Silver text. Light theme ("Desert Daylight") = sandy parchment backgrounds with Warm Black / Midnight Blue text.
* **Light Mode Background:** Never `#ffffff`. Use desert parchment tones (e.g., `#F5EBD8`-family tans); where a near-white is unavoidable, use `#fefefe`.
* **Shape & Depth:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (tarot cards are sharp-cornered — keep radii minimal per the theme's `border-radius: 2px` signature); `--shadow-sm`, `--shadow-md`, plus `--glow-gold: 0 0 30px rgba(255,215,0,0.15)` and `--glow-text: 0 0 10px rgba(255,215,0,0.3)` for moonlight effects.
* **Motion & Spacing:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts between layered components.

### 1.3 Mandatory Dark Mode Support
* Dark mode is the canonical mood of this theme; light mode is its counterpart. **Both must be fully defined.**
* **Implementation:** Provide dark mode tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector; switching themes must never require HTML restructuring.
* **Persistence:** Store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit.
* **Toggle:** A visible header control styled as a `.btn`, using a Google Material Symbol (`dark_mode` / `light_mode`), with correct `aria-pressed` and `aria-label` ("Toggle dark mode").
* Starfields, gradients, and glows must be token-driven so both themes remain legible and contrast-safe.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with **Flexbox** (`display: flex` / Tailwind flex utilities).
* **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an explicitly justified exception is documented in a CSS comment.
* **Mobile-Friendly First:** Rows convert to columns on smaller viewports; no horizontal scrolling at any breakpoint; all touch targets ≥ 44x44px.

### 1.5 Framework Default & Tailwind CSS Integration
* Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`). All utility classes must map back to the CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.section`, `.tarot-frame`). Do not introduce any other framework.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load via Google Fonts `<link>`: **'Rye'** (western slab display) and **'Cinzel'** (mystical serif). Bind `--font-display: 'Rye', serif` for hero/section headlines and `--font-base: 'Cinzel', serif` for body and supporting text. No other font sources.
* **Icons:** Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.
* **Exception clause (celestial decorations):** The source style spec requests "celestial symbol SVG decorations (moons, stars)." The Material-Symbols-only rule is retained: render all moons, stars, constellations, and celestial ornaments exclusively with Material Symbols glyphs (e.g., `dark_mode`, `star`, `auto_awesome`, `nights_stay`, `brightness_3`) and pure-CSS shapes (pseudo-elements, gradients, `border-radius` crescents). Inline SVG markup remains prohibited.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements
Style every state via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`):
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44x44px. Tarot signature: `border: 2px solid var(--gold); border-radius: var(--radius-sm);` primary fill Desert Tan with Midnight Blue text (contrast-paired); secondary/ghost fill transparent with gold border and gold text.
* **Hover:** Moonlight glow — intensify `box-shadow` toward `var(--glow-gold)` plus a brightness shift; `cursor: pointer`.
* **Focus:** Distinct gold focus ring via `outline` / `box-shadow` using CSS variables for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** Disables interactions, prevents double-clicks, renders a CSS spinner or animated Material Symbol without distorting button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error`.
* **Danger:** `.btn--danger` (Burnt Sienna based) must be visually distinct in both light and dark themes.

### 2.2 Card Component Requirements
Apply the tarot-card aesthetic to Feature cards, Pricing tiers, Testimonial cards, and FAQ items (`.card`, `.card--tarot`):
* **Default:** Flexible Flexbox layout, `background: var(--bg-secondary)`, `border: 2px solid var(--gold)`, `border-radius: var(--radius-sm)`, `box-shadow: var(--glow-gold)`; optional inner frame via pseudo-element double border and corner Material Symbol ornaments.
* **Hover (interactive cards):** `transform: translateY(-2px)` plus intensified moonlight glow.
* **Focus-within:** Gold border brightens when a child link/button receives focus.
* **Loading (Skeleton):** CSS shimmer animation with stable dimensions — no layout jumps.
* **Empty State:** Structured fallback layout featuring a Material Symbol icon and clear guidance text.

### 2.3 Form & Input Requirements
Used by the Final CTA email capture (and any form):
* **States:** Empty, Focused (gold outline ring), Filled, Valid (success border + check icon), Invalid (error border, red text, error icon), Disabled, Read-only — all via CSS classes.
* **Structure:** Flex container wrapping a `<label>`, the input field, and a dedicated error feedback container.
* Errors and confirmations must be announced via an `aria-live="polite"` region; never rely on color alone.

### 2.4 Modal / Popup Requirements
If any popup is implemented (e.g., pricing detail, expanded testimonial):
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX Features:** Centered flex overlay (`align-items: center`), translucent Midnight Blue backdrop, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `role="dialog"` + `aria-modal="true"`.
* The FAQ section must instead use the accessible accordion pattern (see 5.6), not modals.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing and standard breakpoints with zero horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; every animation must be disabled or reduced under `prefers-reduced-motion: reduce`.
* **Theme Signature Effects (CSS-driven; animate only `transform`/`opacity` where possible):**
  * **Starfield background:** Layered CSS particles (multi-layer `box-shadow` star fields on pseudo-elements, or layered radial-gradients) with slow drift and twinkle keyframes behind the Hero and as a subtle site-wide backdrop; must pause under reduced motion.
  * **Desert gradient horizon:** Hero sky rendered as a token-driven `linear-gradient(to bottom, #1A1A2E, #191970, #C2A878)` transitioning night sky into desert sand; provide a daylight variant for light mode.
  * **Tarot-card framing:** Sections and cards framed with `border: 2px solid var(--gold)`, `border-radius: 2px`, double-border pseudo-elements, and celestial corner glyphs.
  * **Moonlight glow:** Hover glow `box-shadow: 0 0 30px rgba(255,215,0,0.15)`; display headings carry `text-shadow: 0 0 10px rgba(255,215,0,0.3)` — both via tokens.
  * **Subtle parallax:** Celestial decorative elements (moon, stars, constellations) shift gently on scroll (CSS scroll-driven animation or minimal `requestAnimationFrame` JS); disabled under reduced motion; must never trap scrolling or degrade performance.
* **Accessibility (a11y):** Sufficient contrast in Light and Dark modes; never rely on color alone to communicate state; semantic HTML5 elements; correct ARIA roles/labels on custom widgets (accordion, toggle, modal); logical DOM/focus order; full keyboard operability; `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` / delete-style actions visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline CSS. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer></script>`).
* **Naming Convention:** BEM (`block__element--modifier`) across the entire deliverable — never mix conventions.
* **Copy:** Author all user-facing copy in English, in the mystical western voice (e.g., "Where the Desert Meets the Stars", "Saddle Up Under the Moon"). No lorem ipsum; placeholders only where content is genuinely unspecified.
* **Completeness:** Deliver the full, working page — all sections, all states, both themes — on the first attempt.

---

## 5. PAGE STRUCTURE & SECTION REQUIREMENTS

### 5.0 Header / Nav (sticky)
Slim fixed header hosting the brand wordmark in Rye, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), and the dark-mode toggle (per 1.3). Stacks cleanly on mobile; uses `--z-dropdown`-level stacking above page content.

### 5.1 Hero
Full-viewport section: desert gradient horizon background, animated starfield, a large CSS crescent moon, and Material Symbol stars/constellations with subtle parallax. Rye display headline with `--glow-text`, Cinzel subheadline, and two CTAs (`.btn--primary` + `.btn--ghost`). Scroll cue at the bottom. All above-the-fold content must remain readable over the gradient (contrast-paired).

### 5.2 Features — 3 Cards
Section heading plus 3 `.card--tarot` cards in a responsive Flexbox row (column on mobile): each with a Material Symbol icon inside a gold-bordered medallion, a Rye card title, and a Cinzel description. Hover: lift + moonlight glow.

### 5.3 How It Works — 3 Steps
Three numbered steps (01 / 02 / 03) connected by a celestial dotted line (pure CSS): each step has a Material Symbol icon, a Rye step title, and a Cinzel description. Flexbox row on desktop, column on mobile; connector hidden or vertical on mobile.

### 5.4 Testimonials
3 testimonial `.card--tarot` cards: oversized decorative quote glyph, quote text in Cinzel italic, author identity built from CSS initials inside a gold-bordered circle (no external images), plus name and role. Moonstone Silver accents; hover glow.

### 5.5 Pricing — 3 Tiers
Three `.card--tarot` pricing tiers (e.g., "Drifter", "Rider", "Moon Chaser"). Middle tier highlighted: "Most Popular" badge, brighter gold border, `translateY(-4px)` elevation, intensified glow. Each tier: Rye tier name, price, feature list with Material Symbol `check_circle` icons, and a `.btn` CTA. Row → column on mobile with the popular tier first.

### 5.6 FAQ
Accessible accordion of 5–6 items: `<button aria-expanded="false">` question plus answer region; CSS-animated open/close; rotating `expand_more` Material Symbol chevron; gold focus rings; Cinzel answers. Fully keyboard operable; no modals here.

### 5.7 Final CTA
Centered `.card--tarot` panel over a starfield backdrop: Rye headline, short Cinzel supporting line, and the email signup form per 2.3 (label + input + error container + submit). Submit demonstrates Loading → Success states with an `aria-live` confirmation; success message uses `--text-success`.

### 5.8 Footer
Multi-column footer (stacked on mobile): brand wordmark + one-line tagline, secondary link groups (About, Journey, Support, Legal — anchor/`#` links), social icon links using Material Symbols, and a copyright line. Subtle gold top border; background token-paired for both themes.