[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-259-Bento-Noticias-Curadas":3},"**ROLE & TASK**\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt for **\"Bento Curated News\"** (English rendering of the source theme *\"Bento Notícias Curadas\"*) — a personalized, curated news platform. Design language: **Minimalism & Swiss** — strict grid discipline, generous whitespace, typography-led hierarchy, restrained ornamentation, functional color. Era: 2026+ intelligent news consumption. Keywords: personalized news, content curation, bento grid, organized, informative, clean, intuitive, modern, relevant, engaging.\n\n---\n\n**1. STRICT RULES & ARCHITECTURE**\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden in HTML.\n* All design properties, layout rules, and states are targeted via class\u002FID selectors only.\n* HTML remains semantic and style-agnostic; changing the look must never require markup edits.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n* **Colors (light\u002Fdefault):** `--primary: #001F3F` (navy); `--secondary: #FFDAB9` (soft orange); `--bg-primary: #fefefe`; `--bg-secondary: #F5F5F5`; `--text-primary: #001F3F`; `--text-secondary: #333333`; `--text-success: #1E7C2E` (darkened emerald for AA text contrast — reserve `#2ECC40` for icons\u002Fborders\u002Faccents); `--text-error: #C62828`; `--border-default: rgba(0,31,63,0.12)`; `--border-error: #C62828`; `--border-success: #2ECC40`; plus accent tokens `--accent-emerald: #2ECC40`, `--accent-lavender: #E6E6FA`, `--accent-yellow: #FFD700`, `--accent-orange: #FFDAB9`.\n* **Exception (white):** the source palette lists `#FFFFFF`; per mandatory token rules, render every white background\u002Fsurface as `#fefefe` — never `#ffffff`.\n* **Contrast pairing:** every light token (`#FFDAB9`, `#E6E6FA`, `#FFD700`, `#F5F5F5`, `#fefefe`) pairs only with dark text (`#001F3F`\u002F`#333333`); every navy surface pairs only with light text (`#fefefe`\u002F`#FFDAB9`\u002F`#F5F5F5`). Enforce in both themes.\n* **Shape\u002Felevation:** `--radius-sm: 6px`; `--radius-md: 8px`; `--radius-lg: 16px`; `--shadow-sm: 0 2px 5px rgba(0,0,0,0.03)`; `--shadow-md: 0 10px 28px rgba(0,31,63,0.12)`.\n* **Motion\u002Fspace:** `--spacing-gap: 1.5rem`; `--transition-fast: 0.15s ease-in-out`; `--transition-normal: all 0.3s ease-in-out`; `--ease-standard: ease-in-out`.\n* **Stacking:** `--z-dropdown: 1000`; `--z-modal: 1050`; `--z-toast: 1100`.\n\n**1.3 Mandatory Dark Mode**\n* Define a complete dark token set under both `@media (prefers-color-scheme: dark)` and a class\u002Fattribute override (`.dark` or `[data-theme=\"dark\"]`) — the class override wins.\n* Dark tokens derive from navy: `--bg-primary: #001224`; `--bg-secondary: #00284D` (card surface `#002B4D`); `--text-primary: #F5F5F5`; `--text-secondary: rgba(245,245,245,0.72)`; `--border-default: rgba(245,245,245,0.16)`; shadows deepened; all accents (`#FFDAB9`, `#FFD700`, `#2ECC40`, `#E6E6FA`) verified for AA contrast on navy.\n* Visible toggle in the header with `aria-pressed` and dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"); persist via `localStorage`, falling back to `prefers-color-scheme` on first visit; switching requires zero HTML restructuring.\n* **Exception:** the source specification marks light mode as the primary presentation — light is the default and design-critical target, but the complete, toggleable dark mode remains mandatory.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Flexbox for all linear layouts and component internals; every flex container defaults to `align-items: center` unless a justified exception is stated (e.g., `.input-group` stacks label\u002Finput with `align-items: stretch`).\n* **Justified exception:** the bento tile arrangement itself uses CSS Grid (a bento grid cannot be expressed in flexbox); every card's internals remain flex.\n* Mobile-first: single column ≤640px; rows collapse to columns on small viewports; zero horizontal scroll at any width ≥320px.\n\n**1.5 Styling Approach**\n* Clean custom CSS only (no framework) — the source spec supplies raw CSS values and semantic class names; honor them. Reusable component classes: `.btn`, `.card`, `.input-group`, `.bento-news-card`, `.article-thumbnail`, `.summary-hover`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Roboto (weights 400, 500, 700, 900) via Google Fonts `\u003Clink>` with preconnect; `--font-base: 'Roboto', sans-serif`. Swiss hierarchy: bold, tight-tracked fluid display sizes via `clamp()`, body line-height 1.6–1.7, uppercase letter-spaced eyebrow labels.\n* **Icons:** Google Material Symbols (Outlined) via Google Fonts. Inline SVGs, local icon files, and emoji icons are forbidden.\n\n**1.7 Language**\n* All user-facing copy in English. Translate the Portuguese source theme: the brand renders as \"Bento Curated News\". No non-English strings in UI copy, class names, or file names.\n\n---\n\n**2. PAGE STRUCTURE & SECTION SPECIFICATIONS**\n\n**2.0 Header (sticky)**\n* Logo: Material Symbol `grid_view` + wordmark \"Bento Curated News\"; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle; primary CTA \"Get Started\" (opens signup modal, §3.4).\n* Mobile: hamburger button (`aria-expanded`, `aria-controls`), slide-down panel, `Esc` closes, focus moves into the panel and returns to the trigger on close. Subtle shadow appears after scroll.\n\n**2.1 Hero**\n* Two-column (stacks on mobile). Left: eyebrow (\"PERSONALIZED NEWS CURATION\"), H1 (e.g., \"Your news, arranged like a bento box.\"), subheadline on relevance and curation, primary CTA \"Start Curating — Free\" (opens modal), secondary anchor CTA \"See How It Works\", trust microcopy.\n* Right: product preview — a bento grid of 4–6 `.bento-news-card` tiles of mixed spans (one feature tile, rest standard). Each card: `.article-thumbnail` (image via `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cunique-seed>\u002F…`, `object-fit: cover`, meaningful alt text), category chip with a Material Symbol icon (`science`, `sports_soccer`, `business_center`, `memory`), headline, source + read time, and a `.summary-hover` overlay (§3.2) revealing a 1–2 sentence summary.\n* Cards initially render as `.skeleton` shimmer tiles (≤800ms simulated load), then reveal; skip the skeleton phase under `prefers-reduced-motion`.\n\n**2.2 Features (3 cards)**\n* Section header: eyebrow + H2 + one-line lede. Three `.feature-card` in a responsive row:\n  1. \"Smart Curation\" — icon `auto_awesome` — AI assembles only stories relevant to your interests.\n  2. \"Your Bento, Your Rules\" — icon `grid_view` — drag, resize, and organize category tiles.\n  3. \"Zero-Noise Reading\" — icon `chrome_reader_mode` — ad-free, clutter-free, save-for-later.\n* Each card: icon in a tinted chip (lavender \u002F soft-orange \u002F emerald tints with dark text), title, ≤2-line description. Hover: lift + shadow.\n\n**2.3 How It Works (3 steps)**\n* Numbered badges (01\u002F02\u002F03), icons, titles, descriptions:\n  1. \"Pick your interests\" — icon `tune` — choose categories and trusted sources.\n  2. \"We curate your daily bento\" — icon `auto_stories` — a fresh, relevant grid every morning.\n  3. \"Refine as you read\" — icon `thumb_up` — likes and hides tune future editions.\n* Desktop: three columns joined by a subtle rule; mobile: vertical timeline.\n\n**2.4 Testimonials**\n* Three `.testimonial-card`: 5-star rating (Material Symbol `star`, plus an accessible \"Rated 5 out of 5\" label — never color alone), quote, avatar as an initial circle (navy\u002Forange tints), name + role (realistic, e.g., \"Product Designer · daily reader\"). 3-column → 1-column.\n\n**2.5 Pricing (3 tiers)**\n* Billing toggle: segmented control (Monthly \u002F Yearly) with `aria-pressed`; updates prices via `data-monthly`\u002F`data-yearly` attributes with a CSS transition; yearly shows a \"Save 20%\" chip.\n* Tier 1 \"Reader\" — Free — 1 curated bento\u002Fday, 3 categories, standard layout — outline CTA \"Start Free\".\n* Tier 2 \"Curator\" — $8\u002Fmo ($6\u002Fmo yearly) — \"Most Popular\" badge (yellow `#FFD700` chip, navy text), visually elevated (navy border or navy card with light text), unlimited categories, custom layouts, saved searches, offline reading — primary CTA \"Choose Curator\".\n* Tier 3 \"Newsroom\" — $16\u002Fmo ($13\u002Fmo yearly) — 5 profiles, shared bentos, priority sources, API access — outline CTA.\n* Feature lists use Material Symbol `check`. The highlighted tier must be distinct in both themes.\n\n**2.6 FAQ**\n* 5 questions as an ARIA accordion: `button.accordion-trigger` (`aria-expanded` + `aria-controls`), panel with `role=\"region\"` + `aria-labelledby`; smooth height animation via `grid-template-rows: 0fr → 1fr`; `expand_more` chevron rotates 180°. Questions cover: how curation works, choosing sources, data privacy, changing categories, free plan\u002Fcancellation.\n\n**2.7 Final CTA**\n* Full-bleed navy band (light text, soft-orange accent): H2, supporting line, email capture `.input-group`: visible label, `input type=\"email\"`, submit \"Get Your First Bento\". Full state flow: empty → focus ring → invalid (error border + `error` icon + message, `aria-describedby` + `aria-live`) → loading (button spinner, disabled) → success (button success state + toast \"Check your inbox to confirm.\", `role=\"status\"`, `aria-live=\"polite\"`, `--z-toast`). Simulate submission with a timeout; no backend.\n\n**2.8 Footer**\n* Brand block (logo + one-line description); secondary link columns: Product (Features, Pricing, FAQ, Changelog), Company (About, Careers, Press, Contact), Resources (Blog, Help Center, Community, API), Legal (Privacy, Terms, Cookies). In-page anchors where sections exist; others may use `href=\"#\"`. Bottom bar: © 2026 Bento Curated News, social icons (Material Symbols `public`, `rss_feed`, `mail`).\n\n---\n\n**3. COMPONENT DESIGN SPECIFICATIONS**\n\n**3.1 Buttons**\n* `.btn` base: flex, `align-items`\u002F`justify-content: center`, `gap: 0.5rem`, min 44×44px touch target, radius `--radius-md`, `transition: var(--transition-normal)`. Variants: `.btn-primary` (navy\u002Flight pairing), `.btn-secondary` (outline), `.btn-ghost`, `.btn-danger` (distinct in both themes).\n* **Hover:** brightness\u002Fshadow shift + `cursor: pointer`. **Focus:** visible ring via `outline`\u002F`box-shadow` tokens. **Active:** `transform: scale(0.97)`. **`.is-loading`:** disabled + `pointer-events: none` + rotating `progress_activity` icon spinner with no dimension change. **`[disabled]`:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success\u002FError:** temporary feedback states via `--text-success`\u002F`--text-error`.\n\n**3.2 Cards**\n* `.card` base: `--bg-primary` surface, 1px `--border-default`, radius 8px, `--shadow-sm`; hover `translateY(-2px)` + `--shadow-md`; `:focus-within` border highlight.\n* `.bento-news-card`: extends `.card`; the whole card is a single `\u003Ca>`; `.summary-hover` overlay (navy gradient scrim, light text) fades\u002Fslides in on hover and `:focus-within`; on `pointer: coarse` or `prefers-reduced-motion`, render the summary statically under the headline instead of as an overlay.\n* Define `.skeleton` shimmer keyframes and an `.empty-state` pattern (Material Symbol + guidance text) in the stylesheet.\n\n**3.3 Forms & Inputs**\n* `.input-group`: flex column (justified `align-items: stretch` exception), label + input + `.input-feedback` container. States: empty, focus ring, filled, `.is-valid` (success border + `check_circle`), `.is-invalid` (error border + `error` icon + red message), disabled, read-only. Wire to the Final CTA form and the modal form.\n\n**3.4 Modal**\n* One signup modal (\"Create your bento\": name + email + submit), opened by the header \"Get Started\", hero primary CTA, and pricing CTAs. `role=\"dialog\"`, `aria-modal`, `aria-labelledby`; backdrop overlay; opening\u002Fopen\u002Fclosing animated via CSS; focus trapped inside; `Esc` and overlay click close; focus returns to the trigger; submit shows loading → success (check icon + message) inside the modal; stacked at `--z-modal`.\n\n**3.5 Accordion & Toast**\n* Accordion per §2.6. Toast: fixed region, `role=\"status\"`, `aria-live=\"polite\"`, auto-dismiss ~4s, `--z-toast`, styled for both themes.\n\n---\n\n**4. CORE UX & MICRO-INTERACTION RULES**\n\n* **Responsive by default:** fluid `clamp()` typography, breakpoints ~640\u002F1024px, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `@media (prefers-reduced-motion: reduce)` removes transforms, overlay slide-ins, and shimmer (content renders immediately).\n* **Accessibility:** WCAG AA contrast in both modes; never rely on color alone (pair icons\u002Ftext with every state); semantic HTML5 landmarks and a single-`h1` heading hierarchy; ARIA on all custom widgets (theme toggle, mobile menu, accordion, modal, billing toggle); logical focus order; full keyboard operability; skip-to-content link; `aria-live` regions for form feedback and toasts.\n* **Mandatory visual feedback** on every hover, click, and submission.\n* `.btn-danger` visually distinct in both themes (define even if unused on this page).\n* Optional and restrained (Swiss): subtle section fade-in on scroll only, disabled under reduced motion.\n\n---\n\n**5. DELIVERABLE & OUTPUT FORMAT**\n\n* **Files:** separate `index.html`, `style.css`, `script.js` — complete, no TODOs. Exactly one `\u003Cscript src=\"script.js\" defer>` reference; no other inline scripts. Google Fonts links in `\u003Chead>`.\n* **Naming:** one convention only — lowercase hyphenated semantic classes (`.bento-news-card`, `.article-thumbnail`, `.summary-hover`, `.pricing-card`, `.faq-panel`), state classes prefixed `.is-` (`.is-open`, `.is-loading`, `.is-invalid`). Never mix conventions.\n* **Copy:** all English, realistic and specific to curated news — no lorem ipsum; invent plausible headlines, testimonials, FAQ answers, and feature descriptions where unspecified.\n* **Images:** only seeded `picsum.photos` URLs for `.article-thumbnail`, with meaningful alt text.\n* **Behavior:** theme toggle + persistence, mobile menu, billing toggle, accordion, modal with focus trap, email validation, toast, and skeleton reveal — all functional on the first attempt; no console errors.\n",1791954984099]