[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-181-Brutalismo-Urbano-Expressivo":3},"# CODING PROMPT — \"EXPRESSIVE URBAN BRUTALISM\" LANDING PAGE (Urban Art & Streetwear Store)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single pass — no stubs, no TODOs, no placeholder copy.\n\n**Product & Voice:** A landing page for an urban art & streetwear store. Theme: **Expressive Urban Brutalism** (source spec: \"Brutalismo Urbano Expressivo\"). Keywords: streetwear, urban art, graffiti, edgy, expressive, raw, bold, authentic, disruptive, unique. Era: 2026+ street culture. **All user-facing copy must be written in English** (the source spec was Portuguese — translate every heading, label, and microcopy into English). Invent a fitting brand name (e.g., \"RAW DISTRICT\", \"CONCRETE CULT\") and write authentic streetwear copy throughout. Lorem ipsum is forbidden.\n\n**Required sections, in order:** sticky header (nav + theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (with newsletter form), Footer with secondary link columns.\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:** Every design property, layout rule, and state must live in `style.css`, targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML must remain semantic and style-agnostic — reskinning the page must only require editing `style.css`.\n* **No Local Assets:** Do not reference local files (e.g., `concrete-texture.jpg`). Recreate the concrete texture purely in CSS (see §3). Photographic street-art imagery must use seeded picsum placeholders (e.g., `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F1200\u002F800`).\n\n### 1.2 CSS Variables & Theme Tokens\nStore all tokens in `:root` (light \"Concrete Day\" theme — the default):\n\n```css\n:root {\n  --primary: #CC5500;        \u002F* burnt orange — main CTA accent *\u002F\n  --secondary: #00BFFF;      \u002F* electric blue — focus rings, borders, accents *\u002F\n  --accent-green: #39FF14;   \u002F* neon green — ONLY on black surfaces *\u002F\n  --accent-purple: #6A0DAD;  \u002F* graphite purple — tertiary accent *\u002F\n  --accent-yellow: #FFD700;   \u002F* mustard — tape labels, highlights *\u002F\n  --bg-primary: #A9A9A9;     \u002F* concrete gray (CSS texture applied) *\u002F\n  --bg-secondary: #000000;   \u002F* black panels *\u002F\n  --bg-surface: #fefefe;     \u002F* near-white cards\u002Fposters — never #ffffff *\u002F\n  --text-primary: #000000;   \u002F* on concrete & white surfaces *\u002F\n  --text-secondary: #2E2E2E; \u002F* muted body copy on light surfaces *\u002F\n  --text-on-dark: #F5F5F5;   \u002F* on black panels *\u002F\n  --text-success: #39FF14;   \u002F* ONLY inside black chips\u002Fbadges *\u002F\n  --success-ink: #0B6B0B;    \u002F* accessible inline success text on light surfaces *\u002F\n  --text-error: #C40000;\n  --border-default: #000000;\n  --border-error: #C40000;\n  --border-success: #0B6B0B;\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; \u002F* brutalist: sharp edges only *\u002F\n  --shadow-sm: 4px 4px 0 0 #000000;\n  --shadow-md: 10px 10px 0 0 var(--primary);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 60ms;\n  --transition-normal: 120ms;\n  --ease-standard: steps(3, jump-none); \u002F* abrupt, non-smooth motion *\u002F\n  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n  --font-display: \"Permanent Marker\", cursive;\n  --font-stencil: \"Saira Stencil One\", \"Archivo\", sans-serif;\n  --font-base: \"Archivo\", sans-serif;\n  --font-mono: \"Space Mono\", monospace;\n}\n```\n\n* **Contrast Pairing (mandatory, every theme):** `--bg-primary`\u002F`--bg-surface` pair ONLY with `--text-primary`\u002F`--text-secondary`; `--bg-secondary` pairs ONLY with `--text-on-dark`\u002F`--accent-green`. `--secondary` (#00BFFF) and `--accent-green` (#39FF14) must never be used as text on concrete\u002Fwhite surfaces — on light surfaces they are restricted to borders, focus rings, and black-chip contents.\n* **White Surfaces:** Use `#fefefe`, never `#ffffff`.\n* **Shadows:** Hard offset shadows only (no blur, no soft elevation) — this replaces conventional elevation.\n* **Radius:** All radius tokens are `0px`; torn-edge `clip-path` shapes (§3) are the only permitted \"shaping.\"\n\n### 1.3 Mandatory Dark Mode — \"Night Concrete\"\n* **Exception clause:** The source style spec marked dark mode as not required; dark mode is a mandatory architectural rule regardless — implement it fully, with the light concrete theme as default.\n* Define a `.dark` class token block AND mirror tokens under `@media (prefers-color-scheme: dark)`: `--bg-primary: #111111; --bg-secondary: #000000; --bg-surface: #1E1E1E; --text-primary: #F5F5F5; --text-secondary: #B5B5B5; --text-on-dark: #F5F5F5; --text-success: #39FF14; --success-ink: #39FF14; --text-error: #FF5C5C; --border-default: #F5F5F5; --border-error: #FF5C5C; --border-success: #39FF14; --shadow-sm: 4px 4px 0 0 #F5F5F5; --shadow-md: 10px 10px 0 0 var(--primary);` Accent colors stay unchanged (they pop on black).\n* **Theme Switching:** Backgrounds\u002Ftext\u002Fborders must flip via variables only — zero HTML restructuring.\n* **Persistence:** Store choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Header must contain a visible toggle button with `aria-pressed` and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), swapping Material Symbols `dark_mode`\u002F`light_mode`.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox (`display: flex`).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly documented in a CSS comment. Sanctioned exceptions: card content stacks and `.input-group` use `align-items: stretch` (equalize heights \u002F align fields); nav bars use `align-items: center`.\n* **Mobile-First:** Rows convert to columns at ~768px (and refine at ~480px). No horizontal scrolling at any viewport (guard the marquee with `overflow: hidden`).\n\n### 1.5 CSS Organization\n* Use clean custom CSS organized in Tailwind-style cascade layers: `@layer tokens, base, layout, components, utilities`. No framework CDNs.\n* All utilities must map back to CSS variables or generic reusable classes: `.btn`, `.card`, `.input-group`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Fonts (Google Fonts `\u003Clink>` in head):** `Permanent Marker` (graffiti\u002Fmarker accents), `Saira Stencil One` (stencil display headings), `Archivo` wght 400–900 (body; use 900 for sub-headlines), `Space Mono` (labels, prices, tags, nav). Bind via `--font-*` tokens. Correct syntax: `\"Permanent Marker\", cursive`.\n* **Icons:** Google Material Symbols (Outlined variable font) only. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT & SECTION SPECIFICATIONS\n\n### 2.1 Button — `.btn` (+ `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`, `.distressed-button`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; `font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;` 3–4px solid `var(--border-default)`; zero radius; hard `--shadow-sm`. Primary variant: `--primary` background with black text (both themes). `.distressed-button` adds a jagged single-corner `clip-path` notch.\n* **Hover:** `translate(-2px, -2px)`, shadow grows to `--shadow-md`, `cursor: pointer`, spray splatter via `.spray-hover` (§3).\n* **Focus-visible:** `outline: 3px dashed var(--secondary); outline-offset: 3px;` — distinct in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97) translate(2px, 2px);` shadow collapses (button pressed \"into the wall\").\n* **Loading (`[aria-busy=\"true\"]`):** Disable pointer events, prevent double-clicks, swap label to a rotating Material Symbol (`progress_activity`) or CSS square spinner; button dimensions must not change.\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` no shadow\u002Fhover shift.\n* **Success\u002FError:** Temporary state classes flip border to `--border-success`\u002F`--border-error` with a status icon; feedback also announced via an `aria-live` region.\n* **Danger:** `.btn--danger` must be visually distinct in both themes (error-red border + error text on light; brighter `--text-error` on dark).\n\n### 2.2 Card — `.card`\n* **Default:** Flexbox layout, `--bg-surface` background, 4px solid `var(--border-default)`, `--shadow-sm` (alternate shadow accent colors via modifiers: orange\u002Fblue\u002Fpurple), zero radius. This theme's borders are intentionally heavy 4–5px — explicit exception to \"subtle borders\" per the brutalist spec.\n* **Hover:** `transform: translateY(-2px)` plus shadow offset growth.\n* **Focus-within:** Border color shifts to `--secondary` when a child link\u002Fbutton is focused.\n* **Loading (Skeleton):** Define `.card--skeleton` with a CSS shimmer sweep (linear-gradient animation) that preserves layout dimensions.\n* **Empty State:** Define `.card--empty` — a Material Symbol in a black square plus short guidance text.\n\n### 2.3 Form & Input — `.input-group` (newsletter in Final CTA)\n* **Structure:** Flex container wrapping `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error\u002Ffeedback container (`aria-live=\"polite\"`).\n* **States (all via CSS):** Empty; Focused (dashed `--secondary` ring); Filled; Valid (`--border-success`, check icon, inline message in `--success-ink` on light \u002F `--text-success` in a black chip); Invalid (`--border-error`, error icon, error text — never color-only: icon + message required); Disabled; Read-only.\n* **Input style:** `--bg-surface`, 3px border, `--font-mono`, zero radius, min-height 44px.\n\n### 2.4 Modal \u002F Overlay — mobile nav menu (and any future popup)\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated with abrupt stepped transitions (`var(--transition-normal) var(--ease-standard)`).\n* **UX:** Backdrop `rgba(0,0,0,0.7)`; panel centered in a flex container (`align-items: center`); `--bg-surface` panel with 5px border and `--shadow-md`; close button = Material Symbol `close` with `aria-label`; `role=\"dialog\"` + `aria-modal=\"true\"`; keyboard focus trapped; closes on `Esc` and backdrop click; focus returns to the trigger.\n\n### 2.5 Page Section Specs\n* **Header (sticky):** Black bar, flex `align-items: center`: brand logotype (stencil), anchor links (FEATURES \u002F HOW IT WORKS \u002F PRICING \u002F FAQ), theme toggle, mobile menu button (Material Symbol `menu`). Include a skip-to-content link.\n* **Hero:** Two-column flex (stacks on mobile). Left: mustard \"tape\" label (`NEW DROP — FW26`, rotated -2deg, mono), giant stencil H1 (e.g., \"WEAR THE WALLS.\" with one word marker-circled via `.graffiti-text`), short raw subcopy, two CTAs (`.btn--primary` \"SHOP THE DROP\", `.btn--secondary` \"SEE THE ART\"), mono stat line. Right: large picsum street-art image with torn-edge `clip-path`, 5px border, `--shadow-md`, duotone tint via `mix-blend-mode`, rotated -1deg, tape caption. CSS spray splatters behind the headline. Below: full-width marquee ticker (black bar, mono uppercase text loop, e.g., \"RAW \u002F\u002F BOLD \u002F\u002F AUTHENTIC \u002F\u002F LIMITED DROPS \u002F\u002F NO RESTOCKS \u002F\u002F\", duplicate content `aria-hidden`).\n* **Features:** Section header pattern: mono index (\"01 \u002F WHAT WE'RE ABOUT\"), stencil H2, marker scribble annotation. Three `.card`s in a flex-wrap row (single column on mobile): \"Limited Drops\" (icon `local_fire_department`), \"Artist-Made\" (icon `brush`), \"Built Raw\" (icon `shield`) — real copy, alternating shadow accents, full card states per §2.2.\n* **How It Works:** Three steps in a flex row with a dashed connector (pseudo-element), stacked on mobile. Each step: oversized stencil numeral (01\u002F02\u002F03) in a black chip with neon-green text, Material Symbol, title, copy. Steps: \"Catch the Drop\" → \"Claim Your Size\" → \"Rep It Everywhere\".\n* **Testimonials:** Three \"wheatpaste poster\" cards: `--bg-surface`, torn-edge `clip-path`, tape corner strips, slight alternating rotation (-1.5deg \u002F 1deg \u002F -0.5deg; straighten + lift on hover). Quote text, 5 filled Material Symbol `star` icons with `aria-label` (\"Rated 5 out of 5\"), mono attribution with name\u002Frole\u002Fcity.\n* **Pricing:** Three membership tiers in a flex row → column: \"LOCAL\" (free), \"CREW\" ($19\u002Fmo, featured), \"KING\" ($49\u002Fmo). Featured tier: `--bg-secondary` background, `--text-on-dark` copy, neon-green price in mono, mustard \"MOST WANTED\" tape label, slightly larger, `--shadow-md`. Feature lists use Material Symbol `check` items. Each tier gets a full-state `.btn` CTA. Mono footnote.\n* **FAQ:** 5–6 real Q&As (drops, returns, sizing, international shipping, artist collabs) as native `\u003Cdetails>`\u002F`\u003Csummary>` accordions: 3px dividers, flex summary with Material Symbol `add` rotating 45° to an × on `[open]`, open state = 6px accent left border + background shift to `--bg-surface`, abrupt (stepped or instant) content reveal, fully keyboard operable.\n* **Final CTA:** Full-bleed black panel with torn top\u002Fbottom edges, corner spray splatters, huge stencil line (\"STOP SCROLLING. START WEARING.\"), and the newsletter `.input-group` + `.btn--primary` \"JOIN THE CREW\". Simulated async submit: Loading → Success (\"YOU'RE ON THE LIST.\") \u002F Error (\"THAT EMAIL LOOKS WRONG — TRY AGAIN.\"), all announced via `aria-live`.\n* **Footer:** Black background, `--text-on-dark`. Flex columns of secondary links: SHOP (New Drops, Memberships, Gift Cards, Archive), SUPPORT (Shipping, Returns, Size Guide, Contact), COMPANY (About, Artist Collabs, Careers, Press), FOLLOW (Instagram, TikTok, YouTube as text links). Brand logotype + one-liner, mono legal\u002Fcopyright line. Link hover: abrupt color flip to `--accent-yellow`. Link to in-page anchors where applicable; `href=\"#\"` is acceptable for external nav items.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES (BRUTALIST SIGNATURES)\n\n* **Concrete Texture (CSS-only):** On `--bg-primary` surfaces, layer pure-CSS texture: base color + multiple low-opacity `radial-gradient` speckles (varied sizes\u002Fpositions, black and white dots) + a fine `repeating-linear-gradient` grain + one or two large soft radial \"stains\". Dark mode re-tints the same layers. No image files.\n* **Spray Hover (`.spray-hover`):** A `::before` pseudo-element containing CSS radial-gradient splatter dots + one blurred blob, `opacity: 0; transform: scale(0.7);` that snaps to full on hover\u002Ffocus within `var(--transition-fast)`. Splatter color driven by a `--spray-color` custom property per component. Animate only `transform`\u002F`opacity`.\n* **Torn \u002F Distressed Edges:** Jagged `clip-path: polygon(...)` (e.g., `polygon(0 4%, 6% 0, 24% 3%, 45% 0, 68% 4%, 88% 1%, 100% 5%, 98% 40%, 100% 70%, 96% 100%, 70% 97%, 45% 100%, 22% 96%, 4% 100%, 2% 60%, 0 30%)`) on the hero artwork, testimonial posters, CTA panel, and `.distressed-button`.\n* **Abrupt Transitions:** All state changes use `transition: var(--transition-fast|normal) var(--ease-standard)` with `steps()` easing — hard snaps, no soft fades.\n* **Reduced Motion:** Under `prefers-reduced-motion: disable the marquee, spray animations, and all keyframes; states must still change visibly (instantly).\n* **Accessibility:** Sufficient contrast in both themes per §1.2 pairing rules; semantic HTML5 landmarks and heading order (h1 → h2 → h3); ARIA roles\u002Flabels on all custom widgets; logical focus order; full keyboard operability; `aria-live` for form feedback; never color-only state communication; `alt` text on all artwork images; 44px minimum touch targets.\n* **Mandatory Visual Feedback:** Every click, hover, and submission must produce a visible state change.\n* **Responsive by Default:** Fluid type\u002Fspacing, no horizontal overflow at any width.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other script tags. Google Fonts + Material Symbols `\u003Clink>` tags in `\u003Chead>`.\n* **Script scope:** theme toggle + `localStorage` persistence, mobile menu overlay (focus trap, Esc, backdrop close), newsletter validation + simulated async submit with `aria-live` feedback. No other JS — FAQ uses native `\u003Cdetails>`.\n* **Naming Convention (single, fixed):** BEM (`block__element--modifier`) for all components, plus exactly three sanctioned global effect utilities: `.graffiti-text`, `.distressed-button`, `.spray-hover`. Never mix in any other convention.\n* **Copy:** Real English streetwear copy everywhere — no lorem ipsum, no unrequested placeholders. Picsum placeholders are permitted only for photographic street-art imagery (with descriptive alt text and fixed seeds).\n* **Quality bar:** The page must be complete and correct on the first attempt — every component state in §2 implemented, both themes verified for contrast and toggle behavior, and full keyboard navigation passing.\n",1791954982736]