[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-277-Bossa-Nova-Lounge":3},"# SYSTEM PROMPT — \"BOSSA NOVA LOUNGE\" LANDING PAGE (Cultural & Heritage)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-ready landing page on the first attempt — no clarifying questions, no partial output, no unfilled placeholders.\n\n**Project:** A single-page marketing site for **Bossa Nova Lounge** — a Cultural & Heritage experience celebrating the Bossa Nova Era (1958–1970), reimagined. Mood: elegant, musical, warm, sophisticated, mid-century modern, Rio de Janeiro Copacabana sunset.\n\n**Required sections (in order):** 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**\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors defined in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — retheming the site must require editing only the CSS file.\n\n### **1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light) and override in dark mode (see 1.3). Required tokens:\n\n* **Colors:**\n  * `--primary: #D4A574` (Warm Gold — brand accent, buttons, highlights)\n  * `--secondary: #E8735A` (Coral Sunset — secondary accent)\n  * `--bg-primary: #FFF8E7` (Soft Cream — light-mode page background; never `#ffffff`; use `#fefefe` if a near-white is required)\n  * `--bg-secondary: #FAEED9` (warm cream tint — cards, raised surfaces)\n  * `--text-primary: #3C2415` (Coffee Brown)\n  * `--text-secondary: #6B5442` (muted warm brown)\n  * `--text-success: #5A6A2E` (Olive Green darkened for AA contrast on cream)\n  * `--text-error: #B5432E` (Coral Sunset darkened for AA contrast on cream)\n  * `--border-default: rgba(60, 36, 21, 0.15)`, `--border-error`, `--border-success`\n* **Supporting palette roles:** Night Blue `#1B2838` (dark surfaces, gradient origin), Ocean Blue `#2E6B8A` (gradient mid-tone, links), Antique Rose `#C9A0A0` (soft accents, avatar tints), Olive Green `#6B7B3A` (success borders\u002Ficons).\n* **Signature gradient token:** `--gradient-sunset: linear-gradient(135deg, #1B2838, #2E6B8A, #D4A574)` — used for the Hero and Final CTA backgrounds.\n* **Contrast Pairing:** every light background token must pair with a dark text token and vice versa — Soft Cream ↔ Coffee Brown; Night Blue ↔ Soft Cream. Enforce this pairing in both themes.\n* **Radius & Shadows:** `--radius-sm: 8px`, `--radius-md: 18px`, `--radius-lg: 28px` (organic curves), `--radius-pill: 999px` (buttons), `--shadow-sm: 0 4px 16px rgba(27,40,56,0.15)`, `--shadow-md: 0 8px 32px rgba(27,40,56,0.3)`.\n* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation\u002FStacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n* **Typography tokens:** `--font-heading: 'Cormorant Garamond', 'Playfair Display', serif`; `--font-base: 'Lato', sans-serif`.\n\n### **1.3 Mandatory Dark Mode Support (Full)**\n* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`: `--bg-primary: #1B2838` (Night Blue), `--bg-secondary: #16222F`, `--text-primary: #FFF8E7`, `--text-secondary: #C4BBA4`, `--primary: #DDB27E` (brightened gold), `--text-error: #F08A6E`, `--text-success: #A8BC7A`, `--border-default: rgba(255,248,231,0.15)`, adjusted shadows.\n* Theme switching must work purely through CSS variables — no HTML restructuring.\n* Persist the user's choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. Apply the saved theme at the very top of `script.js` to minimize flash of incorrect theme.\n* Include a visible toggle in the header using Google Material Symbols (`dark_mode` \u002F `light_mode`) with correct `aria-pressed` and `aria-label` (\"Toggle dark mode\").\n\n### **1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* Mobile-first: rows (nav, feature grid, pricing grid, footer columns) collapse to columns on small viewports; no horizontal scrolling at any width; fluid `clamp()` typography; `max-width` containers (~1200px).\n\n### **1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (or clean custom CSS driven by `@layer` \u002F `@apply`). All utilities must map back to the CSS variables above or to generic reusable classes (`.btn`, `.card`, `.input-group`, `.section`, `.container`).\n\n### **1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>`: **Cormorant Garamond** (400, 500, 600, 700 + italics) for headings and **Lato** (300, 400, 700) for body; bind to `--font-heading` \u002F `--font-base`.\n* Headings use `letter-spacing: 0.1em` and fluid serif sizing.\n* Icons: Google Material Symbols only — use the **Outlined** variant with `font-variation-settings: 'FILL' 0, 'wght' 300` for the thin, delicate line aesthetic. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### **2.1 Button Component Requirements**\nStyle all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`):\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, pill radius, Lato 700.\n* **Variants:** Primary = Warm Gold background with Coffee Brown text; Secondary = transparent with Warm Gold border and gold text (Soft Cream text on dark surfaces); Danger = visually distinct in both themes.\n* **Hover:** brightness\u002Felevation shift with `cursor: pointer`.\n* **Focus:** distinct ring via `box-shadow` using `--primary` for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `.is-loading` disables interaction, prevents double-clicks, and renders a CSS spinner or animated Google Icon without changing button dimensions; set `aria-busy=\"true\"`.\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 Card Component Requirements**\nApplies to Features, Testimonials, and Pricing cards:\n* **Default:** flexible Flexbox layout, `--bg-secondary` surface (or glass over gradients), `--border-default`, `--radius-lg`, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` plus shadow shift to `--shadow-md`.\n* **Focus-within:** Warm Gold border highlight when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** structured fallback with a Google Icon and clear guidance text.\n\n### **2.3 Form & Input Requirements**\nUsed for the Final CTA newsletter capture:\n* **Structure:** flex container (`.input-group`) wrapping a `\u003Clabel>`, the input field, and a dedicated error-feedback element; link them with `for`\u002F`id` and `aria-describedby`.\n* **States:** Empty, Focused (Warm Gold outline ring), Filled, Valid (Olive Green border + `check_circle` icon), Invalid (error border, `--text-error` message, `error` icon, `aria-invalid=\"true\"`), Disabled, Read-only.\n* Feedback renders in an `aria-live=\"polite\"` region; never rely on color alone — pair color with icons and text.\n\n### **2.4 Accordion \u002F Modal Requirements**\n* **FAQ accordion:** each question is a `\u003Cbutton>` with `aria-expanded` and `aria-controls`; panels use `role=\"region\"`; an `expand_more` Google Icon rotates 180° on toggle; animate open\u002Fclose height via CSS transitions; fully keyboard operable.\n* **Any modal\u002Fpopup** (e.g., an optional \"Preview the Sound\" dialog in the Hero): centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay click; Opening, Open, Loading, Success\u002FError, and Closing states all animated via CSS transitions; respect `--z-modal`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable floating notes, spins, and smooth scrolling; reduce transitions to essentials).\n* **Signature micro-animation:** decorative musical notes (`music_note` \u002F `music_note_2` Material Symbols, `aria-hidden=\"true\"`) drift gently — `animation: float 6s ease-in-out infinite` with staggered `animation-delay` values — in the Hero and Final CTA.\n* **Accessibility (a11y):** AA contrast in both Light and Dark modes; never communicate state by color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `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\u002Fdistinct actions:** `.btn--danger` and any destructive action must be visually distinct in both themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n* **Naming Convention:** BEM (`block__element--modifier`) consistently across HTML, CSS, and JS — never mix conventions.\n* **No Unrequested Placeholders:** write real, polished English copy for every heading, label, testimonial, and FAQ answer. Lorem ipsum is forbidden. Footer links without target pages may use `href=\"#\"` but must still carry full hover\u002Ffocus styles.\n* **Self-contained visuals:** all decorative artwork (vinyl records, waves, textures) must be CSS-drawn (gradients, pseudo-elements, `border-radius`) — no external image dependencies. Testimonial avatars are circular initial tokens tinted with Antique Rose \u002F Olive \u002F Warm Gold.\n\n## 5. THEME DESIGN DIRECTION — \"BOSSA NOVA LOUNGE\"\n\n### **5.1 Mood & Concept**\nElegant, musical, warm, sophisticated. The Bossa Nova Era (1958–1970) reimagined: mid-century modern lines, Rio de Janeiro Copacabana sunsets, smooth acoustic vinyl warmth.\n\n### **5.2 Visual Rhythm (Sheet-Music Layouts)**\nAlternate section backgrounds (cream ↔ night blue) like measures on a musical score; use generous whitespace and consistent vertical rhythm for \"visual breathing\"; optionally group content with thin \"staff line\" dividers (`--border-default`).\n\n### **5.3 Curved Organic Elements (Sound Waves)**\nSection transitions use curved, wave-like dividers built from CSS pseudo-elements and `border-radius` — no images. Circular motifs throughout: `border-radius: 50%` for the vinyl record, avatars, and step-number badges.\n\n### **5.4 Warm Sunset Gradients & Glass**\nHero and Final CTA use `--gradient-sunset` (135deg, Night Blue → Ocean Blue → Warm Gold) with `#FFF8E7` text. The nav bar and cards over gradients use glass effects: `backdrop-filter: blur(10px)` with translucent token-based backgrounds.\n\n### **5.5 Textures & Decorations**\n* **Vinyl texture:** concentric-groove effect via layered `repeating-radial-gradient` on the Hero's circular vinyl motif; slow, subtle rotation on hover (paused under reduced motion).\n* **Wood texture:** very subtle `repeating-linear-gradient` at low opacity on select surfaces (e.g., the featured pricing card).\n* **Floating notes:** 3–5 low-opacity musical notes drifting in Hero\u002FFinal CTA (see Section 3).\n* **Signature elevation:** `0 8px 32px rgba(27,40,56,0.3)`.\n\n## 6. PAGE SECTION REQUIREMENTS\n\n### **6.0 Header \u002F Navigation**\nSticky, glass (`backdrop-filter: blur(10px)`); wordmark logo with a `music_note` icon; anchor links to all sections; theme toggle (per 1.3); primary CTA \"Join the Lounge\"; mobile hamburger (`menu` icon) opening an accessible dropdown with `aria-expanded`, closing on `Esc` and link click.\n\n### **6.1 Hero**\nFull-viewport `--gradient-sunset` background; floating notes; CSS-drawn vinyl motif; eyebrow label (e.g., \"Est. Rio de Janeiro · 1958\"); H1 and subcopy in `#FFF8E7`; two CTAs — primary \"Start Listening\" and secondary outline \"Our Story\"; curved wave divider flowing into the next section.\n\n### **6.2 Features — 3 Cards**\nSection heading + intro; three `.card`s, each with a thin-line Material Symbol icon (`library_music`, `history_edu`, `graphic_eq`), serif title, and copy. Suggested Cultural & Heritage angles: curated classic recordings from the era, artist heritage stories of the 1958–1970 greats, vinyl-warm remastered sound.\n\n### **6.3 How It Works — 3 Steps**\nThree steps with circular numbered badges (`border-radius: 50%`, Warm Gold) connected by a subtle wave\u002Fstaff line; vertical stack on mobile; each step includes an icon, title, and short copy.\n\n### **6.4 Testimonials**\nThree cards: circular initial-token avatars (Antique Rose \u002F Olive \u002F Warm Gold tints), italic serif quote, star rating (`star` icons with an `aria-label` such as \"Rated 5 out of 5\"), name plus role\u002Fcity. Hover lift per 2.2.\n\n### **6.5 Pricing — 3 Tiers**\n\"Listener\" (free), \"Aficionado\" (featured — scaled up, Warm Gold border, \"Most Popular\" badge, wood-texture accent), \"Collector\" (premium). Each tier includes a price, a feature list with `check_circle` icons, and a CTA. Featured CTA uses `.btn--primary`; others use `.btn--secondary`. The grid collapses to a single column on mobile with the featured card first.\n\n### **6.6 FAQ**\n5–6 questions implementing the accessible accordion from 2.4 (e.g., what the lounge offers, subscription details, cancellation, supported devices, audio quality). Smooth height animation, chevron rotation, `aria-expanded` maintained.\n\n### **6.7 Final CTA**\nFull-width sunset-gradient band with floating notes; headline + short copy; newsletter email form per 2.3 (label, input, submit \"Join the Lounge\") with inline validation, loading, and success states announced via `aria-live`.\n\n### **6.8 Footer**\nNight Blue surface in both themes with Soft Cream text; brand + tagline; secondary link columns (About, Press, Contact, Privacy, Terms — `href=\"#\"` allowed per Section 4); social icons (Material Symbols); copyright line with dynamic year; back-to-top link. All links styled with hover\u002Ffocus states.\n\n## 7. CONTENT & COPY RULES\n\n* **Language:** write ALL user-facing copy in English. Portuguese cultural terms (\"bossa nova,\" \"saudade,\" song\u002Fartist references) may appear as flavor where naturally supported by English context.\n* **Tone:** warm, sophisticated, evocative — sunset strolls along Copacabana, vinyl crackle, smooth acoustic guitar. Cultural & Heritage register: celebrate the era's legacy, its artists, and its sound.\n* **Completeness:** every heading, button, testimonial, FAQ answer, and footer label must be final, polished copy — the full page must be delivered complete on the first attempt.\n",1791954984191]