ForkTrack

1. COLORS — Use these exact hex tokens: --bg #FFF8EE (warm cream page background), --surface #FFFFFF (cards and panels), --surface-warm #FFF0D6 (tinted section fills and sticker backgrounds), --text #1A1209 (cocoa ink primary text), --text-muted #7A6D5E (secondary text and labels), --primary #EF3E2E (tomato red, action color and logo accent), --primary-deep #C9301F (hover state for primary), --accent #FFC233 (sunny yellow for highlights and sticker badges), --accent-deep #E8A510 (yellow shadow and edge depth), --border #F0E8DC (hairline dividers), --dark #1A1209 (how-it-works and CTA section backgrounds), gradient: linear-gradient(135deg, #FFC233 0%, #EF3E2E 100%) applied to key CTAs and hero highlights. The overall palette mood is: loud street food stall at golden hour — appetizing, fast, and unapologetically cheerful. 2. TYPOGRAPHY — Load "Satoshi" and "Inter" from Google Fonts (exact names as listed on fonts.google.com: family=Satoshi:wght@400;500;700;900 and family=Inter:wght@400;500;600). Satoshi is used for all headings and the logo; Inter for body copy and UI labels. Type scale: H1 76px / weight 900 / line-height 0.97 / letter-spacing -0.03em; H2 48px / weight 900 / line-height 0.95 / letter-spacing -0.025em; H3 20px / weight 700 / line-height 1.3 / letter-spacing 0; H4 18px / weight 700 / line-height 1.3 / letter-spacing 0; Body-L 19px / weight 400 / line-height 1.6 / letter-spacing 0; Body 16px / weight 400 / line-height 1.6 / letter-spacing 0; Eyebrow 12px / weight 700 / line-height 1.4 / letter-spacing 0.08em (uppercase, Inter); Caption 13px / weight 400 / line-height 1.5 / letter-spacing 0. Special treatment: H1 contains an <em> tag on the word "door" rendered in #EF3E2E (non-italic, font-style:normal); H2 sections use <em> on the key craving word in the same red. Big number stats use Satoshi 900 at 64px, letter-spacing -0.03em, white on red. 3. PAGE SECTIONS — Build sections in this exact order: sticky nav → hero (copy left + live tracker card right, two-column grid) → categories/dishes section (eyebrow + H2 + scrollable cuisine chip row + 3-column dish card grid) → how-it-works (dark #1A1209 background, two-column: headline+CTA left, 3 numbered steps right) → stats band (tomato red #EF3E2E background, 3-column: "400+", "28 min", "1.8M") → testimonials (3 cards with star ratings, quotes, avatar initials) → pricing (3 tiers: Standard $0/mo, ForkPass Monthly $9/mo, Business $29/mo; middle card featured with red border and yellow sticker badge) → FAQ accordion (4 questions, centered, max-width 720px) → final CTA (dark #1A1209 background, centered headline with yellow <em>, yellow sticker-style "Order now →" button) → footer (4-column grid). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The live order tracker card in the hero is the single most visually distinctive element. Exact CSS: background: #FFFFFF; border-radius: 20px; border: 2px solid #F0E8DC; box-shadow: 0 20px 60px rgba(26,18,9,0.10); padding: 28px; no backdrop-filter on the card itself. Inside, each step has a circle icon (28×28px, border-radius: 50%) with three states — done: background #EF3E2E, color #fff, content "✓"; active: background #FFC233, color #1A1209, border: 2px solid #1A1209; pending: background #F0E8DC, color #7A6D5E. A vertical connector line between steps: position absolute, left 14px, top 34px, width 2px, background #F0E8DC. The ETA pill in the card header: background #EF3E2E, color #fff, font-size 12px, font-weight 700, padding 4px 10px, border-radius 999px. This element defines the aesthetic because it transforms abstract "food delivery app" into a tangible, trusted real-time experience the user can see. 5. COMPONENT SPECS — Primary button (.btn-red): background #EF3E2E, color #ffffff, padding 10px 20px (nav) or 16px 32px (hero/CTA), border-radius 999px (pill), font-family Satoshi, font-weight 700, font-size 14px (nav) / 16px (hero); hover: filter brightness(0.9) + transform translateY(-1px), transition 0.15s ease. Secondary/outline button (.btn-out): background transparent, color #1A1209, border 2px solid #1A1209, border-radius 999px, padding 14px 28px, font-weight 600, font-size 15px; hover: background #1A1209, color #FFF8EE, transition 0.2s ease. Yellow sticker CTA button (.btn-yellow): background #FFC233, color #1A1209, border 2px solid #1A1209, box-shadow 4px 4px 0 #1A1209, padding 16px 36px, border-radius 999px, font-weight 900; hover: transform translate(-2px,-2px), box-shadow 6px 6px 0 #1A1209. Dish cards: background #FFFFFF, border-radius 16px, border 1px solid #F0E8DC, overflow hidden; hover: box-shadow 0 12px 40px rgba(26,18,9,0.10), transform translateY(-4px), transition 0.2s ease. Pricing cards: border-radius 20px, padding 36px 28px, border 2px solid #F0E8DC; featured: border-color #EF3E2E, box-shadow 0 0 0 4px rgba(239,62,46,0.08). Nav: height 64px, background rgba(255,248,238,0.92), backdrop-filter blur(12px), border-bottom 1px solid #F0E8DC, sticky top 0, z-index 100. 6. COPY VOICE — The audience is hungry city dwellers, office lunch orderers, families, and late-night cravers whose core pain point is cold food, hidden fees, and zero visibility into where their order actually is. Four brand-specific example lines: (1) "Restaurant food tracked to your door" (H1); (2) "30 minutes or we refund the delivery fee" (guarantee sub-line); (3) "Live GPS tracking from the moment the kitchen confirms" (feature copy); (4) "400+ restaurants. Live tracking. 30-minute guarantee. No excuses, no cold food." (CTA body). Five banned generic phrases specific to food delivery: "Delicious food delivered", "Order now and save", "Your favorite meals", "Fresh food fast", "Taste the difference". Every claim must be specific and verifiable — use real numbers (400+, 28 min, 1.8M orders) and concrete scenarios (rider name, km distance, exact timestamps). 7. BACKGROUND ZONES — Five distinct background levels. Zone 1: #FFF8EE warm cream — hero, categories/dishes, testimonials, FAQ (the default page background). Zone 2: #FFFFFF white — cards (dish, testimonial, pricing) and footer. Zone 3: #1A1209 dark cocoa — how-it-works section (padding 120px 0) and final CTA section (padding 160px 0); these bleed edge-to-edge as full-width bands with no max-width constraint on the background. Zone 4: #EF3E2E tomato red — stats band (padding 100px 0), full-width bleed, white text. Zone 5: no CSS gradient background bands beyond the CTA button gradient; the gradient linear-gradient(135deg, #FFC233 0%, #EF3E2E 100%) is used only as button/badge fills, never as a section background. No texture or pattern — surfaces are flat solid colors only. 8. SCROLL ANIMATIONS — All animatable elements carry class "reveal" starting at opacity: 0 and transform: translateY(24px). On intersection (threshold 0.12), add class "in-view": opacity: 1, transform: none. Transition: opacity 0.55s cubic-bezier(0.16,1,0.30,1), transform 0.55s cubic-bezier(0.16,1,0.30,1). Stagger delays via data-delay attribute: data-delay="1" → transition-delay: 0.1s; data-delay="2" → 0.2s; data-delay="3" → 0.3s. Sticker badges (.sticker) use the springy easing cubic-bezier(0.34,1.56,0.64,1) at 450ms for a pop-with-overshoot effect. Dish cards stagger at 100ms per card (data-delay 1/2/3). How-it-works steps stagger 100ms each. Cards bounce-lift on hover: transform translateY(-4px) over 0.2s ease. 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. Hero grid: 2-col (1fr 1fr, gap 64px) desktop → 1-col (tracker drops below copy) tablet/mobile. Dish grid: 3-col desktop → 2-col tablet → 1-col mobile. How-it-works grid: 2-col desktop → 1-col tablet+. Stats grid: 3-col → 1-col at ≤1023px. Testimonials: 3-col → 1-col at ≤1023px. Pricing: 3-col → 1-col at ≤1023px. Footer: 4-col (2fr 1fr 1fr 1fr) → 2-col at ≤1023px → 1-col at ≤767px. H1 size: 76px desktop → 48px mobile (≤767px). H2 (sec-hd): 48px desktop → 36px mobile. CTA H2: 64px desktop → 44px mobile. Nav links (.nl): display:flex on desktop → display:none on mobile (≤767px). Container (.wrap): padding 0 80px desktop, compresses naturally on smaller screens. Both primary buttons go full-width (width:100%) on mobile within the CTA section. 10. CRITICAL CSS — Always include these exact overrides in a second <style> tag placed immediately before </head>: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — 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 first <style> tag holds all component CSS using :root custom properties. The second <style> tag immediately before </head> contains only the two body and .wrap overrides. Do not combine them — the second tag must remain separate and last so it overrides any framework injection. 11. SEMANTIC HTML — Document structure: <header> wrapping <nav> (sticky, height 64px); <main> containing exactly one <section> per named block with id attributes: id="hero", id="categories", id="how-it-works", id="stats", id="testimonials", id="pricing", id="faq", id="cta"; then <footer>. Exactly one <h1> in the hero section. All other section titles use <h2>. Step titles use <div> or <h3> to not break heading hierarchy. Dish and testimonial cards use <article> tags. SEO: <title>ForkTrack — Restaurant Food, Tracked to Your Door</title> (55 chars, under 60 limit). <meta name="description" content="ForkTrack delivers restaurant quality food with live GPS tracking at every step. Order from 400+ restaurants in your city — 30 minutes or we refund the delivery fee."> (155 chars max). og:image: 1200×630px appetizing dish close-up with the ForkTrack live tracker UI overlay. Every <img> must have descriptive alt text naming the dish, restaurant, and context (e.g. alt="Double Smash Cheeseburger from Burger Co., served in a toasted brioche bun"). 12. FOOTER STRUCTURE — Four-column grid using CSS grid-template-columns: 2fr 1fr 1fr 1fr; gap 40px; margin-bottom 48px. Column 1 (brand, 2fr): ForkTrack logo (Satoshi 900, 18px, "Fork" in #1A1209 + "Track" in #EF3E2E) + 14px/color #7A6D5E/line-height 1.65 description paragraph: "Restaurant food, tracked to your door. 400+ partners, live GPS, and a 30-minute delivery guarantee. Available in 12 cities." Column 2 (Order, 1fr): uppercase label h4 "ORDER" (12px/700/letter-spacing 0.08em/color #7A6D5E) + links: Restaurants, Track order, Schedule delivery, ForkPass. Column 3 (Business, 1fr): h4 "BUSINESS" + links: Team orders, Restaurant partner, Become a rider, API. Column 4 (Company, 1fr): h4 "COMPANY" + links: About, Careers, Press, Contact. All link text: 14px, color #7A6D5E, hover color #1A1209, transition 0.2s. Footer bottom (.foot-bot): border-top 1px solid #F0E8DC, padding-top 24px, display flex, justify-content space-between, flex-wrap wrap. Left: "© 2025 ForkTrack Inc. · Fast food, faster tracking." Right: "Privacy · Terms · Rider support". Both in 12px, color #7A6D5E. No social icons, no newsletter input. 13. UNIQUE INTERACTIVE — Two interactive behaviors in this template. FAQ accordion: clicking any .faq-q button toggles class "open" on itself and on the adjacent .faq-a div. When closed, .faq-a has display:none; when open, display:block (no height animation — instant show/hide). The ::after pseudo-element of .faq-q shows "+" (22px, color #7A6D5E) when closed and "−" (color #EF3E2E) when open. Only one FAQ answer is open at a time — clicking a new question does NOT auto-close the previous (simple toggle, no mutual exclusion in the HTML implementation). ARIA: each .faq-q button should have aria-expanded="false" toggled to "true" on open, and the .faq-a div should have id linked via aria-controls. Category chip filter: clicking any .cat-btn removes the "active" class from all sibling buttons and adds it to the clicked one. Active state: background #EF3E2E, color #fff, border-color #EF3E2E; default state: background #FFFFFF, color #1A1209, border 2px solid #F0E8DC. Transition: 0.15s ease on background and color. No content actually filters — the chip row is a visual UI prototype only. — Prompt set generated with Claude Sonnet 4.6 —