[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-177-Brutalismo-Artistico-Abstrato":3},"# BUILD PROMPT — \"ARTISTIC ABSTRACT BRUTALISM\" LANDING PAGE\n\n**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The page is a portfolio landing page for a fictional experimental digital-art studio (invent a consistent identity — suggested name: **RAWFORM STUDIO** — and write all real English copy around it). Theme: **Artistic Abstract Brutalism** — artistic, experimental, unconventional, post-modern digital art (2026+). Keywords: digital art, experimental, portfolio, abstract, unconventional, raw, bold, artistic, disruptive, unique.\n\n**Visual Direction (translated from source spec):** Concrete and metal textures, rough misaligned typography, aggressively cropped and overlapping images, broken grid layouts, distortion hover micro-interactions, abrupt transition animations, blood red and cobalt blue accents, raw and unconventional feel.\n\n**Sections to build (in order):** Sticky 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 in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic. All brutalist effects (rotation, cropping, distortion, overlap) are achieved purely in CSS.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`, then override under `.dark` \u002F `@media (prefers-color-scheme: dark)`:\n\n* **Colors (Light Mode defaults):** `--primary: #8B0000` (Blood Red), `--secondary: #0047AB` (Cobalt Blue), `--bg-primary: #A9A9A9` (Concrete Gray), `--bg-secondary: #fefefe`, `--text-primary: #000000`, `--text-secondary: #3d3d3d`, `--text-success: #6B8E23` (Moss Green), `--text-error: #8B0000`, `--border-default: #000000`, `--border-error: #8B0000`, `--border-success: #6B8E23`.\n* **Accent tokens:** `--accent-cobalt: #0047AB`, `--accent-ochre: #CC7722`, `--accent-moss: #6B8E23`, `--accent-burnt-orange: #CC5500` — assign one distinct accent per Features card and per Pricing tier.\n* **Exception clause:** The palette's `#FFFFFF` is implemented as `#fefefe` per the token standard; pure `#ffffff` is forbidden.\n* **Contrast Pairing:** Light mode pairs Concrete Gray backgrounds with black text; Dark Mode pairs near-black backgrounds (`--bg-primary: #0a0a0a`, `--bg-secondary: #1c1c1c`) with light text (`--text-primary: #fefefe`, `--text-secondary: #c0c0c0`). This pairing is mandatory in every theme. Blood Red and Cobalt are accent\u002Flarge-display\u002Fborder colors only (they fail 4.5:1 on gray for body text); body copy always uses `--text-primary`\u002F`--text-secondary`. In Dark Mode, brighten blood red (e.g., `#c43a3a`) and cobalt (e.g., `#3a6fd8`) to maintain ≥3:1 for large text.\n* **Borders & Shadows:** `--border-width: 4px` (the brutalist border weight). `--shadow-sm: 4px 4px 0 0 var(--shadow-color)` and `--shadow-md: 8px 8px 0 0 var(--shadow-color)` — hard offset shadows, zero blur, where `--shadow-color: #000000` in Light Mode and `#fefefe` in Dark Mode.\n* **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg` are all defined as `0px` — sharp corners are the brutalist radius; no rounded corners anywhere.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 80ms`, `--transition-normal: 150ms`, `--ease-standard: cubic-bezier(0.7, 0, 0.2, 1)`. Abruptness is achieved through very short durations and sharp easing curves — never through missing transitions.\n* **Elevation\u002FStacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`. Overlapping hero\u002Fcollage elements use a separate low range (1–10) so they never conflict with interactive layers.\n\n**1.3 Mandatory Dark Mode Support (Full Light\u002FDark — required by the theme spec)**\n* **Implementation:** Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`; all colors, borders, and hard-shadow colors must flip via variables only — no HTML restructuring.\n* **Theme Switching:** A visible toggle in the sticky header, built as a real `\u003Cbutton>` with `aria-pressed` and a descriptive `aria-label` (e.g., \"Toggle dark mode\"), using a Google Material Symbol icon that swaps with the state.\n* **Persistence:** Store the choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Apply the stored theme before first paint to prevent flashes.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* **Flexbox Only:** Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities). Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* **Broken Grid via Flexbox:** Achieve the \"broken grid\" with flex-wrap rows whose children carry deliberate `transform: rotate()` (e.g., `rotate(-2deg)` \u002F `rotate(1.5deg)`), `translateY`\u002F`translateX` offsets, negative margins, and `z-index` overlaps — never with CSS Grid.\n* **Mobile-Friendly First:** All offsets, rotations, and overlaps must be reduced or removed at small breakpoints so the layout stacks into a single column. Horizontal scrolling is forbidden at any viewport width; decorative transforms must never push content past the viewport edge.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (Play CDN acceptable) for layout utilities, with all brutalist styling defined in `style.css` via `@layer` \u002F custom classes that map back to the CSS variables.\n* Reusable class vocabulary: `.btn`, `.card`, `.input-group`, plus the brutalist utilities `.broken-grid-item`, `.cropped-image`, `.distort-hover`, `.tilt-left`, `.tilt-right`, `.marquee`, `.texture-concrete`, `.texture-metal`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load Google Fonts via `\u003Clink>`: **Archivo Black** (display headlines), **Space Grotesk** (body), **Space Mono** (labels, numerals, step counters). Bind to `--font-display`, `--font-base`, `--font-mono`.\n* **Exception clause:** The requested system font \"Arial Black\" is replaced by its Google-hosted equivalent **Archivo Black** — Google Fonts are mandatory; do not reference system Arial.\n* **Icons:** Google Material Symbols (outlined variant) only. Raw inline SVGs and local icon files are forbidden.\n* **Misaligned Typography:** Achieve roughness via CSS only — mixed font sizes on one line, rotated spans, negative `letter-spacing`, and hard `text-shadow` offsets (e.g., `4px 4px 0 var(--primary)`).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (` .btn` variants: `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border: var(--border-width) solid var(--border-default)`, `box-shadow: var(--shadow-md)`, sharp corners, heavy display font, uppercase.\n* **Hover:** Snappy \"press\" shift — element `translate(2px, 2px)` while shadow shrinks to `--shadow-sm`; `cursor: pointer`.\n* **Focus:** Distinct from the ubiquitous black borders — `outline: 3px solid var(--accent-cobalt); outline-offset: 2px` (Light) \u002F a bright accent outline in Dark Mode. Never remove focus styles.\n* **Active\u002FPressed:** `transform: scale(0.97)` combined with the shadow collapse.\n* **Loading:** Class-driven state that disables pointer events, prevents double-clicks, and renders an animated CSS spinner or rotating Material Symbol without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, shadow removed.\n* **Success\u002FError:** Temporary feedback states using `--text-success` \u002F `--text-error` with paired icons — never color alone.\n* **Danger:** `.btn-danger` must be visually distinct in both Light and Dark themes.\n\n**2.2 Card Component (`.card`, `.broken-grid-item`)**\n* **Default:** Flexbox layout, `--bg-secondary` surface, 4px solid border, `--shadow-md` hard shadow, sharp corners.\n* **Hover:** `transform: translateY(-2px)` plus a distortion micro-shift via `.distort-hover` (e.g., `skewX(-2deg) rotate(0.5deg)`), shadow grows to a larger offset.\n* **Focus-within:** Border color shifts to `--accent-cobalt` when any child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Shimmer animation (hard-edged gray blocks with a sweeping gradient) defined in CSS to prevent layout jumps.\n* **Empty State:** Fallback layout with a large Material Symbol and clear guidance text.\n\n**2.3 Form & Input Requirements (`.input-group`)**\n* **States:** Empty, Focused (cobalt outline ring), Filled, Valid (moss green border + check Material Symbol), Invalid (blood red border, error text, error Material Symbol), Disabled, Read-only.\n* **Structure:** Flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n* Used in the Final CTA email capture and the modal contact form.\n\n**2.4 Modal \u002F Popup Requirements (Final CTA \"Start a Project\" dialog)**\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated with abrupt, short CSS transitions (`--transition-fast`, sharp easing).\n* **UX Features:** Centered flex container (`align-items: center`), solid black backdrop at 80% opacity, Material Symbol close button, keyboard focus trapping, `role=\"dialog\"`, `aria-modal=\"true\"`, close via `Esc` and overlay click, focus returned to the trigger on close.\n\n**2.5 Toast Requirements**\n* A `.toast` component at `--z-toast` with `aria-live=\"assertive\"` for form success\u002Ferror feedback (e.g., email capture), styled as a hard-bordered black block with white text, auto-dismissing with an abrupt exit animation.\n\n---\n\n## 3. SECTION-BY-SECTION BUILD SPECIFICATIONS\n\n**3.0 Sticky Header\u002FNav:** Full-width bar with 4px black bottom border, studio wordmark in Archivo Black (slightly rotated), anchor links to every section, and the dark mode toggle. Include a visually hidden \"Skip to content\" link as the first focusable element.\n\n**3.1 Hero:** Full-viewport broken-grid collage. Oversized mixed-size rotated display headline, two `.cropped-image` elements (picsum placeholders, `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cwidth>\u002F\u003Cheight>.jpg`) aggressively cropped via `clip-path` and overlapping via negative margins and `z-index`. Concrete\u002Fmetal textures generated purely with CSS gradients (`.texture-concrete`, `.texture-metal`) — no external texture files. One `.btn-primary` (\"View the Work\") and one `.btn-ghost` (\"Commission a Piece\") CTA. Optional full-width `.marquee` ticker strip below the hero with an abrupt looping animation.\n\n**3.2 Features (3 cards):** Three `.card.broken-grid-item` elements deliberately offset (rotations ±1–2deg, staggered `translateY`). Each card: one Material Symbol icon, a title, real copy about the studio's services, and its own accent color (cobalt, ochre, burnt orange). All three carry `.distort-hover`.\n\n**3.3 How It Works (3 steps):** Steps labeled 01 \u002F 02 \u002F 03 in oversized Space Mono numerals, alternating left\u002Fright alignment, connected by raw dashed borders. Each step uses the `.card` base with a title, description, and Material Symbol.\n\n**3.4 Testimonials:** Three staggered, slightly rotated quote cards with oversized `format_quote` Material Symbols, real fictional quotes from artists\u002Fclients with name and role attributions.\n\n**3.5 Pricing (3 tiers):** Three `.card` tiers with distinct names and real copy. The middle tier is highlighted: thicker blood red border, a rotated \"MOST RAW\" badge, slight `scale(1.02)` \u002F `rotate(-1deg)`, and must remain visually distinct in both themes. Each tier lists features with check\u002Fclose Material Symbols and its own `.btn` CTA.\n\n**3.6 FAQ:** Accessible accordion — each item is a `\u003Cbutton>` with `aria-expanded` controlling a panel (`role=\"region\"`), abrupt open\u002Fclose transitions, and a Material Symbol plus-icon that rotates 45deg when open. Fully keyboard operable. Write 5–6 real questions and answers.\n\n**3.7 Final CTA:** High-impact block on a blood red background with white text (verify pairing in both themes), oversized rotated headline, an email capture `.input-group` with a `.btn` (all input states + toast feedback), and a \"Start a Project\" `.btn-secondary` that opens the modal dialog from Section 2.4 containing a mini contact form.\n\n**3.8 Footer with secondary links:** Grouped secondary links (About, Process, Journal, Contact, Privacy, Terms), social links with Material Symbol icons, and copyright. All links must have visible focus states. Hard 4px top border.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, mobile-first breakpoints, zero horizontal overflow at any width — including when broken-grid transforms are active.\n* **Abrupt but Present Transitions:** Every state change transitions with `var(--transition-fast)` or `var(--transition-normal)` using sharp easing; abruptness comes from short durations, never from missing transitions.\n* **Reduced Motion:** Under `prefers-reduced-motion: reduce`, disable all rotations, distortion hovers, marquee scrolling, and shimmer animations; keep color\u002Fstate changes instant but visible.\n* **Accessibility (a11y):** Maintain ≥4.5:1 contrast for body text and ≥3:1 for large display text in both Light and Dark modes. Never rely on color alone — pair every state with text or icon cues. Use semantic HTML5 elements, correct ARIA roles\u002Flabels on the accordion, modal, toggle, and toasts, logical DOM\u002Ffocus order, and full keyboard operability with no mouse-only interactions.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n* **Destructive Actions:** Any destructive\u002Fdangerous styling must be visually distinct in both themes.\n\n---\n\n## 5. 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; no inline styles anywhere.\n* **Naming Convention:** One consistent flat kebab-case utility vocabulary throughout (`.btn`, `.card`, `.broken-grid-item`, `.cropped-image`, `.distort-hover`, `.section-hero`, etc.) — never mix conventions.\n* **Copy:** All user-facing copy written in English, real and specific to the fictional studio identity — no lorem ipsum. Picsum image placeholders are permitted only for portfolio imagery.\n* **Completeness:** Deliver the full landing page — every section, every component state, both themes — functional on the first attempt.\n",1791954982720]