[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-175-Brutalismo-Sonoro-Glitch":3},"# System Prompt for Coding AI: Landing Page — \"Brutalismo Sonoro Glitch\"\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* Keep all styling strictly inside a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden** in HTML.\n* Target all design properties, layout rules, and states via class or ID selectors only.\n* HTML must remain clean, semantic, and agnostic of visual styling — changing the look requires modifying only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root`:\n\n* **Colors:** `--primary: #FF00FF` (magenta), `--secondary: #00FFFF` (cyan), `--bg-primary: #1A1A1A` (dark gray — the base canvas, not pure black; reserve `#000000` for overlays\u002Fbackdrops), `--bg-secondary: #000000`, `--text-primary: #FFFFFF`, `--text-secondary: #32CD32` (lime green), `--text-success: #32CD32`, `--text-error: #FF00FF` (magenta doubles as the disruptive error tone), `--border-default: #00FFFF`, `--border-error: #FF00FF`, `--border-success: #32CD32`, plus accents `--accent-yellow: #FFFF00`, `--accent-purple: #BF00FF`.\n* **Contrast Pairing:** Dark backgrounds (`#000000`, `#1A1A1A`) always pair with light text (`#FFFFFF`, `#FFFF00`); any light surface pairs with `#000000` text. Enforce this in every theme state.\n* **Radius & Shadows:** `--radius-sm: 0`, `--radius-md: 0`, `--radius-lg: 0` (brutalism = sharp corners, zero rounding), `--shadow-sm`, `--shadow-md` (hard offset shadows, e.g., `6px 6px 0 var(--primary)` — no blur).\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 250ms`, `--ease-standard: steps(3, end)` (stepped easing reinforces the glitch aesthetic).\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode is the **default and primary mode** for this theme (`#000000`\u002F`#1A1A1A` backgrounds, `#FFFFFF` text).\n* Still define a light-mode alternative via `@media (prefers-color-scheme: light)` and\u002For a `.light` class: light background must NOT be pure white — use `#fefefe` paired with `#000000` text, keeping magenta\u002Fcyan accents.\n* Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit; include a visible toggle with correct `aria-pressed`\u002F`aria-label` state.\n* Glitch effects must remain legible in both modes (adjust `text-shadow` intensity per mode).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox (`display: flex`).\n* Every flex container defaults to `align-items: center` unless an explicitly justified exception exists (e.g., stacked step lists may use `align-items: stretch`).\n* All layouts must be mobile-responsive out of the box: hero rows, pricing tiers, and feature cards convert to single columns on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (or clean custom CSS via `@layer`\u002F`@apply`) unless another framework is requested. All utilities must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`, `.glitch-image`, `.pixel-font`, `.text-overlay`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load Google Fonts — primary display font **\"Press Start 2P\"** for headings (pixelated, condensed feel), and a condensed secondary such as **\"Archivo Black\"** or **\"Oswald\"** for body copy. Bind to `--font-display` and `--font-base`.\n* **Icons:** Use Google Material Symbols\u002FIcons only. Raw inline SVGs and local icon files are **forbidden**.\n* Apply `text-shadow: 2px 2px var(--primary)` (magenta offset) on key headings for the chromatic aberration effect.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44x44px touch target. Brutalist style: solid `#000000` fill, `2px dashed var(--secondary)` border, hard offset shadow `4px 4px 0 var(--primary)`, uppercase pixel font.\n* **Hover:** Shadow offset grows (`6px 6px 0`) and button translates `-2px, -2px`; background flickers to magenta with cyan text — strong, instant visual feedback.\n* **Focus:** Distinct 3px solid cyan focus ring via `outline` using CSS variables.\n* **Active\u002FPressed:** `transform: scale(0.97)` plus shadow collapse to `0 0 0` (button \"stamps\" into the page).\n* **Loading:** Disables interactions, prevents double-clicks, renders an animated Google Icon spinner (rotating `\"sync\"` symbol) without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error` with a brief glitch flicker animation.\n* **Danger (`.btn-danger`):** Magenta background, white text — visually distinct in both modes.\n\n**2.2 Card Component (Features, Pricing Tiers, Testimonials)**\n* **Default:** Flexbox layout, `--bg-secondary` background, `2px dashed var(--secondary)` or solid `var(--primary)` borders, hard offset shadow, generous padding via `--spacing-gap`.\n* **Hover:** `transform: translateY(-2px)` plus a short glitch shake\u002Fflicker (RGB-split via layered `text-shadow`\u002F`box-shadow` in magenta+cyan) — strong visual feedback per the theme spec.\n* **Focus-within:** Border switches to solid magenta when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** CSS shimmer animation (stepped, harsh flicker rather than smooth fade) to prevent layout jumps.\n* **Empty State:** Structured fallback with a Google Icon and clear guidance text.\n\n**2.3 Form & Input Requirements**\n* **States:** Empty, Focused (cyan outline ring), Filled, Valid (lime green border + check icon), Invalid (magenta border, error text, error icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping label, input, and dedicated error feedback container. Inputs styled brutally: transparent\u002Fblack fill, `2px solid #FFFFFF` borders, pixel font labels.\n* **FAQ section:** If implemented as accordion, use `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-correct custom widget with full keyboard operability and visible focus states.\n\n**2.4 Modal \u002F Popup (if any CTA requires one)**\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions (glitch-slice entrance: clip-path steps, not fades).\n* **UX:** Centered flex container, black backdrop overlay at 90% opacity, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Glitch Effects (theme-critical):** Define `@keyframes glitch-effect` (0.5s infinite alternate) applying layered magenta\u002Fcyan `text-shadow` offsets and small `clip-path`\u002F`transform` jitter to `.glitch` elements. Apply to hero headline, section titles, and hover states. Keep loops short and repetitive per the spec.\n* **Intentional Low-Res Images:** Apply `image-rendering: pixelated` and subtle CSS pixelation (e.g., small background-size scaling) to `.glitch-image` elements — this is a deliberate aesthetic, not a bug.\n* **Text Overlays:** `.text-overlay` class positions condensed uppercase text over images with magenta\u002Fcyan offset shadows; ensure overlay contrast in both modes.\n* **Reduced Motion:** All glitch\u002Fshake\u002Floop animations must be disabled under `@media (prefers-reduced-motion: reduce)` — content remains fully legible without animation.\n* **Accessibility:** Sufficient contrast in both modes. Never rely on color alone to communicate state (pair color with icons\u002Ftext). Semantic HTML5 elements, correct ARIA roles\u002Flabels, logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback.\n* **Responsive by Default:** Fluid sizing, no horizontal overflow. Pixel font sizes must scale down on mobile (use `clamp()`).\n* **Mandatory Visual Feedback:** Every click, hover, or submission triggers a visible state change.\n* **Destructive\u002Fdanger actions:** Visually distinct in both light and dark themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline CSS.\n* **Sections to build:** Hero (glitch headline, festival name, date\u002Flocation, primary CTA), Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers — highlight the middle tier), FAQ (accordion), Final CTA, Footer with secondary links.\n* **Copy:** All user-facing copy in **English** — edgy, raw, underground festival voice (e.g., \"SIGNAL \u002F\u002F OVERDRIVE\", \"NO MAINSTREAM. NO MERCY.\"). No lorem ipsum; write real copy for every section.\n* **Naming Convention:** One consistent convention (BEM or the fixed utility set: `.btn`, `.card`, `.glitch-image`, `.pixel-font`, `.text-overlay`) across the entire deliverable — never mix.\n* **No Unrequested Placeholders:** Every section ships complete with real content, working theme toggle, and all specified states.\n",1791954982704]