Ember

1. COLORS — Use exactly these CSS custom properties: --bg:#F6EEE3 (page background, warm cream canvas), --bg-deep:#2B1B12 (espresso dark for story band, final CTA, and footer-on-dark variants), --surface:#FBF6EE (cards, craft-pillar section, subscription section — slightly lifted cream), --text:#2B1B12 (primary espresso ink), --text-invert:#F6EEE3 (text on dark sections), --text-muted:#7A6753 (cocoa secondary text, nav links, captions, metadata), --primary:#3E2A1E (brand brown, dark surfaces), --accent:#C45A2C (burnt-orange — all CTAs, active icon states, ember highlights, open-FAQ minus sign, leading quote mark), --accent-soft:#E8C9A8 (crema tint for pillar numbers, avatar backgrounds, chips), --border:#E3D5C2 (1px hairline dividers, card borders, section separators). Palette mood: roasted warmth pressed into creamy handmade paper. 2. TYPOGRAPHY — Load "Fraunces" (ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500) and "Inter" (wght@400;500;600) from Google Fonts. Type scale: H1 80px / weight 500 / line-height 1.0 / letter-spacing -0.01em (Fraunces); H2 52px / weight 500 / line-height 1.08 / letter-spacing -0.01em (Fraunces); H3 34px / weight 500 / line-height 1.15 / letter-spacing 0 (Fraunces); H4 23px / weight 500 / line-height 1.3 / letter-spacing 0 (Fraunces); Body-L 20px / weight 400 / line-height 1.65 / letter-spacing 0 (Inter); Body 17px / weight 400 / line-height 1.65 / letter-spacing 0 (Inter); Eyebrow 13px / weight 600 / letter-spacing 0.12em / UPPERCASE (Inter); Caption 13px / weight 400 / line-height 1.5 / letter-spacing 0.02em (Inter). Special treatments: in the hero H1 and final CTA H2, wrap the italicized accent word in an <em> tag styled font-style:italic;color:#C45A2C. Pillar numbers (01, 02, 03) use Fraunces 48px weight 500 color #E8C9A8. All origin/roast metadata and product origin labels use Inter 11–13px uppercase weight 600 letter-spacing 0.10–0.12em color #7A6753. 3. PAGE SECTIONS — Build in this exact order: sticky nav → hero (editorial split) → origin strip → craft pillars → product showcase → story band → metrics row → testimonials → subscription tiers → FAQ accordion → final CTA band → footer. Nav: serif wordmark left, 4 center links (Our Beans, Subscribe, Story, Wholesale), cart + burnt-orange "Shop beans" pill right. Hero: eyebrow label + 80px Fraunces H1 with italic accent word + 19px muted subline + primary CTA + secondary outline CTA + small fine-print line; right column: 4/5 aspect-ratio image with floating badge (24px Fraunces stat + uppercase label). Origin strip: 4 horizontal cells separated by 1px --border hairlines, each showing region name in Fraunces 22px + roast/tasting meta in uppercase 12px. Craft pillars: section H2 + 3 numbered pillar cards (number, H3, body). Product showcase: section H2 + 3 product cards each with 1:1 square image, origin eyebrow, Fraunces name, roast/tasting notes, price, "Add to cart" ghost link. Story band: dark espresso section with 3/4 image left + serif copy right (2 paragraphs + CTA). Metrics: 3 large-number stat blocks (14 origins, 48h delivery, 100% direct trade). Testimonials: section H2 + 3 quote cards each with italic serif quote, leading burnt-orange quotation mark, initial avatar, name, role. Subscription tiers: section H2 + 3-column grid (Single Origin, Explorer featured, Wholesale); middle tier has no extra border highlight in the HTML — it uses --bg background vs --surface on the others to distinguish it. FAQ: section H2 + 5 accordion rows max-width 720px. Final CTA: espresso-dark band, crema-tinted eyebrow, Fraunces H2 with italic accent in burnt-orange, muted subline, two CTA buttons side-by-side. Footer: 4-column grid (brand col spanning 2fr + Shop + Learn + Company) then fine-print row. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The floating hero badge is the single most distinctive element: a small tile anchored position:absolute; bottom:-16px; right:-16px with background:#F6EEE3; border:1px solid #E3D5C2; border-radius:12px; padding:16px 20px; box-shadow:0 10px 30px rgba(43,27,18,0.12). Inside it, a Fraunces 24px weight-500 burnt-orange number (e.g. "14") sits above an uppercase Inter 11px muted label "Single origins". No backdrop-filter blur is used on the badge itself — its warmth comes purely from the cream background contrasting against the hero image's dark gradient (linear-gradient(160deg,#C45A2C 0%,#7A4020 60%,#3E2A1E 100%)). This badge defines the aesthetic because it introduces a paper-collage layering tension: a tactile paper note pinned over a photographic gradient, immediately communicating handcraft without motion. 5. COMPONENT SPECS — Primary button (.btn-full, .btn-accent): background:#C45A2C; color:#ffffff; padding:14px 28px (nav variant 10px 20px); border-radius:999px; font-weight:600; font-size:15px; border:none; hover: filter:brightness(0.9) + transform:translateY(-1px); transition:filter 0.2s, transform 0.15s. Secondary outline button (.btn-out): background:transparent; color:#2B1B12; border:1.5px solid #2B1B12; padding:14px 28px; border-radius:999px; font-size:15px; font-weight:500; hover: background:#2B1B12; color:#F6EEE3; transition:background 0.2s, color 0.2s. Inverted outline (CTA section): border-color:rgba(246,238,227,0.3); color:#F6EEE3; same hover logic. Product cards: border-radius:4px (editorial, near-zero); border:1px solid #E3D5C2; background:#FBF6EE; no default box-shadow; hover: box-shadow:0 10px 30px rgba(43,27,18,0.12); image zoom: transform:scale(1.03), transition:0.4s cubic-bezier(0.16,1,0.3,1). Testimonial and origin cards also use 4px radius for an editorial flatness. Nav: height:64px; background:rgba(246,238,227,0.92) with backdrop-filter:blur(12px); border-bottom:1px solid #E3D5C2; position:sticky; top:0; z-index:100 — scrolls into blur immediately, never toggles class. 6. COPY VOICE — Four example headlines: "Slow down. This was made by hand." / "Roasted the morning we pack your order." / "We started Ember in a 400 sq ft space with one roaster." / "Your first bag of honest coffee awaits." Use sensory tasting language throughout (e.g. "Jasmine, wild blueberry, bright citrus"; "Brown sugar, fuji apple, smooth cocoa"; "Bittersweet chocolate, toasted almond, earthy"). Five banned phrases specific to this industry: "Premium quality beans", "The best coffee you've ever tasted", "Ethically sourced" (used without data), "Shop now" as a standalone CTA, "Freshly roasted coffee delivered". Audience: home brewers, independent café owners, and considered gift-buyers who read sourcing labels; their core pain point is that mass-market coffee was roasted weeks ago and has no traceability, making provenance claims feel hollow. 7. BACKGROUND ZONES — Three distinct background levels. Zone 1 (cream page): #F6EEE3 — used for hero section, metrics section, product grid section, FAQ section, and footer. Zone 2 (lifted cream surface): #FBF6EE — used for craft pillars section and subscription tiers section; also all product cards, testimonial cards, and subscription cards. Zone 3 (espresso dark): #2B1B12 — used for story band and final CTA band; both bleed full viewport width with no max-width container constraint on the background itself. No gradient band spans a full section; the hero image placeholder uses an inline gradient (linear-gradient(160deg,#C45A2C 0%,#7A4020 60%,#3E2A1E 100%)) and the story image placeholder uses linear-gradient(160deg,#5a3020,#2b1b12), but these are contained within their image boxes. Hairline 1px #E3D5C2 borders run between zones (top+bottom on origins strip, top of craft section, top of metrics, top of subscription section, top of footer). A subtle paper-grain texture overlay is implied on the cream zones — apply via a semi-transparent PNG or CSS noise filter at low opacity (5–8%) over --bg. 8. SCROLL ANIMATIONS — Every element with class "reveal" starts at opacity:0; transform:translateY(24px) and transitions to opacity:1; transform:none on intersection. Duration: 550ms. Cubic-bezier: cubic-bezier(0.16, 1, 0.3, 1) (spring-like deceleration). IntersectionObserver threshold: 0.12 — trigger when 12% of the element is visible. Stagger delays via data-delay attribute: data-delay="1" → transition-delay:0.1s; data-delay="2" → 0.2s; data-delay="3" → 0.3s. Within each section row (pillars, product cards, testimonial cards), each subsequent card gets +1 data-delay. Serif headlines (H1, section H2s) animate as single blocks, not per-character, in this implementation. Product card image zoom (scale 1.03) uses transition:transform 0.4s cubic-bezier(0.16,1,0.3,1) on hover — separate from the scroll reveal. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. Container padding: 0 80px desktop, collapses to 0 28px on smaller screens. Grid collapse: hero editorial split (1fr 1fr) → single column at ≤1023px (hide the hero visual column entirely); craft pillars (repeat(3,1fr)) → 1-col at ≤1023px; product grid (repeat(3,1fr)) → repeat(2,1fr) at ≤1023px → 1fr at ≤767px; story inner (1fr 1fr) → 1-col at ≤1023px (hide story image); metrics (repeat(3,1fr)) → 1-col at ≤1023px; testimonials (repeat(3,1fr)) → 1-col at ≤1023px; subscription (repeat(3,1fr)) → 1-col at ≤1023px; footer (2fr 1fr 1fr 1fr) → 1fr 1fr at ≤1023px → 1fr at ≤767px; origin list flexes column on ≤1023px with border-bottom replacing border-right. H1: 80px desktop → 58px tablet → 48px mobile. H2: 52px → 38px → 36px. Nav links (.nl): hidden (display:none) at ≤767px. Hero CTA buttons: flex-direction:column; align-items:stretch at ≤767px (full-width stack). Metrics large number (.m-num): 64px → 48px at ≤767px. 10. CRITICAL CSS — Always include two <style> blocks before </head>. The main style block contains all design tokens and component styles as described. A second minimal block must always appear last, immediately before </head>: <style>body { flex-direction: column !important; align-items: stretch !important; }</style> — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. The .wrap utility class must be defined as: .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } with max-width:1160px on .ni (nav inner), .sec-hd, and all inner content divs — never on .wrap itself, so section backgrounds can bleed full-width while content stays centered. Section wrappers that need full-bleed background (origins strip, metrics, footer bottom) use <div class="wrap" style="padding:0"> to remove horizontal padding from the content row while keeping the outer section at 100% width. 11. SEMANTIC HTML — Document: <header> contains only <nav> with inner .ni div. <main> contains one <section> per page block with descriptive id attributes (no id on hero, but id="origins", id="craft", id="products", etc. if needed for nav anchors). Product items use <article class="product-card"> and testimonials use <article class="testi-card"> — these are standalone content units. Exactly one <h1> lives in the hero section. All subsequent section headings are <h2>; pillar and product headings are <h3>. <footer> is a direct child of <body>, outside <main>. SEO: <title> must be ≤60 chars — use format "Ember — Single-Origin Coffee Roasted to Order". <meta name="description"> max 155 chars: "Ember is a small-batch roastery sourcing single-origin beans from Ethiopia, Colombia, and Guatemala — roasted to order and shipped within 48 hours." OG image: 1200×630px warm pour-over photo with Fraunces headline overlay; og:image, og:title, og:description, og:type="website" all required. Every <img> gets a descriptive alt such as alt="Close-up of Yirgacheffe natural coffee beans spread on a drying bed, Ethiopia" — never alt="" or alt="coffee". 12. FOOTER STRUCTURE — Four-column grid: column 1 is 2fr (brand column): Fraunces 22px wordmark + 14px Inter muted paragraph describing the roastery (location, founding year, mission in 2 sentences). Columns 2–4 are each 1fr with an uppercase Inter 11px weight-600 letter-spacing 0.12em section label (Shop / Learn / Company) and 4 anchor links per column at 14px color #7A6753 hover:#2B1B12. Shop links: All coffees, Subscribe, Gift cards, Wholesale. Learn links: Brewing guides, Origin stories, Roasting notes, Blog. Company links: Our story, Sourcing, Sustainability, Contact. Below the grid (margin-top 64px), a hairline 1px #E3D5C2 border-top + 32px padding-top fine-print row in flex justify-content:space-between: left side "© 2025 Ember Coffee Roastery, LLC · Portland, OR" at 12px muted; right side "Roasted to order · Shipped within 48 hours · Compostable packaging" at 12px muted. No newsletter input or social icons in the reference HTML footer. Footer background is #F6EEE3 (cream), not espresso dark. 13. UNIQUE INTERACTIVE — The FAQ section implements a simple open/close accordion with 5 questions. Each row is a .faq-item with border-bottom:1px solid #E3D5C2. The trigger is a full-width <button class="faq-q"> styled with font-family Fraunces, 18px, weight 500, color #2B1B12, background:none, padding:24px 0, display:flex, justify-content:space-between, align-items:center. A CSS ::after pseudo-element shows "+" (22px, color #7A6753) in the closed state and "−" (color #C45A2C) when the button has class "open". The answer panel is a sibling <div class="faq-a"> with font-size:16px, color:#7A6753, line-height:1.7, padding-bottom:24px, display:none by default and display:block when class "open" is added. Click behavior: toggling — clicking an open item closes it; clicking a closed item opens it without closing other items (no accordion exclusivity in this implementation). Transition: none on the open/close (display toggle, no height animation). For accessibility, add aria-expanded="false/true" on each button, aria-controls pointing to the answer panel id, and role="region" + aria-labelledby on each answer panel. The faq-list container has max-width:720px and margin:64px auto 0 to keep it editorially narrow and centered. — Prompt set generated with Claude Sonnet 4.6 —