ID: anna-marta-sauce-product-hero Category: Food & Beverage / Sauce Product Page / Rotating Multi-Variant Hero Type: hero Layout Mode: fullscreen-hero Create a single-file HTML+CSS+vanilla-JS hero section with the following exact specifications: ## Tech Stack * Deliverable filename: `anna-marta-product-hero.html`. * Plain HTML + CSS + vanilla JS. No frameworks, no build step. * Fonts — literal copy-pasteable block: ```html ``` `Inter` (400/500/700) is the body/UI typeface — nav links, description copy, tag labels, nutrition-card labels/values, "1 pc" label, "To cart" label. `Poppins` (800/900, only 900 actually used) is the logo wordmark only ("AM"). * Global reset — literal CSS: ```css * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } body { display: flex; align-items: center; justify-content: center; font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } button { border: none; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } a { cursor: pointer; } .abs { position: absolute; } ``` ## Canvas & Scaling **This page uses the documented fixed-canvas exception, not the default edge-anchored approach.** State this explicitly at the top of the build: the design is a single dense composition — dozens of individually cropped/positioned decorative elements (rotated swirl line-art with per-item x/y/rotation, percentage-cropped jar photography whose crop values are hand-tuned per image, nutrition cards, tag icons) whose relative geometry would break under simple edge-anchoring. So it uses a fixed 1420×805 design canvas scaled uniformly to fit the viewport. ```css html, body { background: #d8575a; } #viewport { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #d8575a; overflow: hidden; transition: background-color 1.2s ease; } #stage { position: relative; width: 1420px; height: 805px; background: #ffffff; overflow: hidden; transform-origin: center center; flex-shrink: 0; --accent: #4f1c1c; } #stage img { display: block; max-width: none; } ``` ```js var stage = document.getElementById('stage'); var viewportEl = document.getElementById('viewport'); function fitStage() { var sx = window.innerWidth / 1420; var sy = window.innerHeight / 805; var scale = Math.min(sx, sy); // "contain" — never crops the design stage.style.transform = 'scale(' + scale + ')'; } window.addEventListener('resize', fitStage); fitStage(); ``` `Math.min` (contain) is mandatory, not `Math.max` (cover). Do NOT switch this to `Math.max`/cover — on any viewport aspect ratio narrower or wider than 1420:805 that crops real artwork (most visibly the top of the hero jar's lid/bow) instead of leaving a margin. Because contain-fit leaves a margin outside `#stage` on off-ratio viewports, that margin is not a neutral bar: `#viewport`'s `background-color` is set in JS to the active slide's own `pageBg` value (see Design Tokens) on load and on every slide change, with a 1.2s CSS transition, so the margin always blends with the current slide's palette instead of reading as an empty letterbox. ## Design Tokens ```css :root { /* no global :root tokens — theming lives on #stage, see below */ } #stage { --accent: #4f1c1c; } /* overwritten per slide via JS, see Interactive Behavior */ ``` `--accent` is the single theming hook for every fixed (non-rotating) control — the quantity stepper buttons, the "To cart" button's hover background, and its icon-circle fills all read `var(--accent)` rather than a hardcoded color. Fragile coupling: any new themed control must reference `var(--accent)` — a hardcoded color on a themed element will not retint when the slide changes. Per-slide theme values (`themeColor` drives `--accent`, `pageBg` drives the viewport margin color): | Slide | themeColor | pageBg | |---|---|---| | Curry | `#4f1c1c` | `#d8575a` | | Pesto | `#1c4f1e` | `#8ac5a4` | | Tartar | `#4f2d1c` | `#e6cebf` | Media asset tokens — every image URL used on the page, centralized in one object. All URLs below are already-migrated permanent hosts (promptsites.net), never Figma URLs: ```js const MEDIA = { iconSearch: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/607d3ac4-518b-439d-897a-9a1dd90553e7.png', iconCartTop: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/d4b35a4d-6ca6-4226-806e-46144f049f9d.png', navChevron: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/7421d06f-2b14-43d3-8f76-8532009914a4.png', navArrow: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/831a606b-a4b4-47dc-9657-d933bf929987.png', bgCurry: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/ede6ae3f-688b-4394-987f-366396759928.jpg', jarCurry: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/3fca8276-240f-47c6-8c20-1babbef2faa6.webp', tagCurrySpicy: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/fedb3090-9983-438d-83be-7626edc94381.png', tagCurryGlutenFree: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/d273090f-6916-49ea-9a05-a0a736a44c5b.png', tagCurryVegan: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/a6f55213-f27c-4e12-88b9-93d70dbb89ec.png', bgPesto: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/120609c4-184d-46c6-9924-b65a6c700148.jpg', jarPesto: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/5a8e5e4c-0ebe-4eac-ab43-55780f080910.webp', tagPestoGlutenFree: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/acb92e8a-df8b-434c-9f40-ef971956afb1.png', tagPestoVegan: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/629150ff-9ce7-45f6-b1ad-fae330b05fc3.png', bgTartar: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/7a871bf4-b00f-41b2-bcb7-2ef18ffd6c53.jpg', jarTartar: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/25b0c57f-2fff-4372-8314-fa92c3af5505.webp', tagTartarGlutenFree: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/466672b0-b9ea-4ec3-950c-4dfa0815d8b5.png', tagTartarSeafood: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/b8bb187b-34de-48c2-874e-6d0f3704bbfb.png', tagTartarCreamy: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/a540b0a7-f1fb-477d-bbe5-f27af7490438.png', swirl0: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/7e64dc09-13f4-4528-a51a-8b3127be345d.png', swirl1: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/e2d4af47-aed3-45eb-9808-9046f12b985b.png', swirl2: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/e8ee4219-68c1-4943-a7d7-f7da85150bed.png', swirl3: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/9e90c82d-daef-4a21-b8f2-ceb5c726b16c.png', swirl4: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/bae97cf0-c088-4de4-a6df-7dfe1ac5eacc.png', swirl5: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/e1331679-4da5-41b5-a46f-705c9698ef25.png', swirl6: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/98a7c25b-b1bf-4db7-94af-5a2a604908b6.png', rightAccentSwirl: 'https://api.promptsites.net/s3/promptsites/previews/f1b32048-477d-4473-9270-fcaea851ddc1/983b9892-0cf5-42b6-b3a8-cc0bc707ff25.png' }; ``` The original vector icon/decoration sources were `.svg`; the media host used for this build (promptsites.net) rejects `SVG` uploads (magic-byte type check), so every icon/decoration was rasterized to PNG before hosting. `MEDIA` therefore points at PNG rasters for `iconSearch`, `iconCartTop`, `navChevron`, `navArrow`, all `tag*` icons and all `swirl*`/`rightAccentSwirl` entries — this is intentional, not a placeholder. State plainly: copy text (titles, descriptions, tag labels, nutrition labels/values, nav links, button label) is NOT tokenized — it stays literal at its point of use in the per-slide data below. ## Elements Elements 1–7 are the **static chrome** — always present, never re-rendered, retinted only via `var(--accent)`. Elements 8 is the **rotating content template** — its markup is generated per-slide from data by `renderSlide()` (see Interactive Behavior) and swapped inside two crossfading layers. **1. `#logo`** — text **"AM"**. ```css #logo { left: 65px; top: 50px; width: 53px; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 40px; line-height: 0.96; letter-spacing: -0.4px; color: #fff; white-space: nowrap; z-index: 5; } ``` **2. `

Curry craze