PawPal

1. COLORS — Set these exact CSS custom properties on :root: --bg:#FFFBF4 (warm cream page background), --surface:#FFFFFF (cards and panels), --surface-soft:#EAF7F5 (tinted teal section bands), --text:#2E2A26 (primary text, deep warm-ink), --text-muted:#7E756B (secondary descriptive text), --primary:#14B8A6 (brand teal for icons, links, tag labels), --accent:#FF6F61 (coral — all primary action buttons and highlighted elements), --accent-soft:#FFE3DE (coral wash behind badges), --yellow:#FFC94D (stars, paw motifs, step-number badges), --border:#F3EADD (1px hairline dividers and card strokes), --dark:#2E2A26 (footer background). The gradient for the hero blob is linear-gradient(160deg,#ffd9b0,#FF6F61) and for the final CTA panel is linear-gradient(160deg,#FF6F61,#ff8a7d). The overall palette mood: sun-warmed terracotta and ocean-glass trust. 2. TYPOGRAPHY — Load two Google Fonts: "Quicksand" (weights 500,600,700) and "Inter" (weights 400,500,600) via a single link tag. H1: Quicksand 700, 72px, line-height 1.02, letter-spacing -0.02em. H2 section headings: Quicksand 700, 50px (42px in design system), line-height 1.05, letter-spacing -0.02em. H3: Quicksand 700, 22px, line-height 1.25, letter-spacing 0. H4: Quicksand 600, 20px, line-height 1.35, letter-spacing 0. Body-L: Inter 400, 19px, line-height 1.6, letter-spacing 0. Body: Inter 400, 16px, line-height 1.65, letter-spacing 0. Eyebrow labels: Quicksand 700, 13px, line-height 1.4, letter-spacing 0.06em, UPPERCASE — rendered as pill bubbles with white background and --border border. Caption/fine print: Inter 400, 12–13px. Every H2 must include one word or phrase wrapped in <em> styled color:var(--accent); font-style:normal to produce a coral highlight word. Logo text: Quicksand 700, 22px, color --accent. 3. PAGE SECTIONS — Build sections in this exact order: sticky nav → hero (two-column grid: text left, blob visual right) → trust band (solid teal #14B8A6 background, 4 trust items inline) → services grid (4-card grid: Dog Walking, Pet Sitting, Grooming, Cat Care, each with emoji + h3 + body + teal price) → how it works (3-step cards with colored circles and yellow step-badge) → sitter showcase (3 profile cards with avatar gradient, name, star rating, bio, teal pill tags) → testimonials (3 quote cards on --bg with yellow stars, quote text, pet-emoji avatar) → pricing (3 plans: Pay as you go / PawPal Plus / Multi-pet, middle card has coral border + "Most popular" yellow badge) → FAQ accordion (4 questions, rounded items, coral +/- toggle) → final CTA panel (coral gradient box 36px radius, paw watermarks, white button) → footer (4-column grid on #2E2A26 dark background). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The floating info cards ("Walk in progress" and "5-star visit!") positioned over the hero blob are the single most visually distinctive element. Each card uses: background:#FFFFFF, border-radius:18px, padding:14px 18px, box-shadow:0 14px 40px rgba(46,42,38,0.14), border:2px solid #F3EADD, display:flex with align-items:center, gap:12px. The first card (.fc-1) is positioned absolute at top:16px, right:-20px; the second (.fc-2) at bottom:24px, left:-24px. The hero blob itself is width:380px, height:380px, border-radius:42% 58% 60% 40% / 50% 45% 55% 50%, background:linear-gradient(160deg,#ffd9b0,#FF6F61), font-size:120px centered emoji. Three floating paw emojis (font-size:28px, opacity:0.6) are scattered at corners. These floating cards define the aesthetic because they communicate live product activity — the app is working right now, pets are being cared for — making trust feel tangible rather than abstract. 5. COMPONENT SPECS — Primary button (.btn-coral): background:#FF6F61, color:#fff, font-family:Quicksand, font-size:14px, font-weight:700, padding:11px 22px, border-radius:999px, border:none, box-shadow:0 6px 0 #e0584b; hover: transform:translateY(2px), box-shadow:0 4px 0 #e0584b, transition:transform 0.12s, box-shadow 0.12s. Hero-size primary button: font-size:16px, padding:15px 30px. Secondary outline button (.btn-out): background:#fff, color:#2E2A26, border:2px solid #F3EADD, padding:13px 26px, border-radius:999px, font-weight:700; hover: border-color:#FF6F61. Teal button (.btn-teal): background:#14B8A6, box-shadow:0 6px 0 #0e9485; hover: translateY(2px). Cards: border-radius:24px, padding:32px 24px (services) or 28px (testimonials), border:2px solid #F3EADD, background:#fff, transition:transform 0.2s box-shadow 0.2s; hover: translateY(-6px), box-shadow:0 16px 40px rgba(46,42,38,0.1). Nav: height:66px, background:rgba(255,251,244,0.92), backdrop-filter:blur(12px), border-bottom:1px solid #F3EADD, position:sticky top:0 z-index:100; max-width inner container 1160px. 6. COPY VOICE — The audience is millennial and Gen-Z urban pet owners who feel guilty leaving their pets and distrust generic pet-care apps. Their core pain point: "I don't know if my pet is truly safe and happy while I'm at work." Four example headlines/sublines specific to this brand: (a) H1 "Pet care, booked in taps" with "taps" in coral; (b) H2 "Real people who love your pet like their own"; (c) H2 "Three taps to a happy pet"; (d) subline "Walks, sitting, and grooming from vetted, genuinely loving sitters near you. Background-checked, insured, and matched to your pet's personality." Five banned generic phrases: "Everything you need in one place", "Trusted by thousands", "Get started today", "Meet our team", "Your satisfaction guaranteed". Keep tone warm and specific — name the dog breed, name the sitter, quote real feelings. Never use clinical language like "service delivery" or "caregiving solution". 7. BACKGROUND ZONES — There are four distinct background levels. Zone 1 (--bg #FFFBF4, warm cream): hero, services grid, sitter showcase, pricing, FAQ, CTA section — this is the default page canvas. Zone 2 (--surface #FFFFFF, pure white): card interiors, how-it-works section (full section background), testimonials section (full section background), FAQ section (full section background). Zone 3 (--primary #14B8A6, solid teal): trust band — full bleed edge-to-edge, padding:32px 0, white text #fff. Zone 4 (--dark #2E2A26, deep warm-ink): footer — full bleed, padding:64px 0 40px. The CTA panel is NOT full bleed — it is a contained box max-width:760px centered within the --bg cream section, using gradient linear-gradient(160deg,#FF6F61,#ff8a7d), border-radius:36px, padding:72px 48px. No external textures or SVG patterns — paw motif is achieved with emoji characters at opacity:0.15 as pseudo-decoration inside the CTA box. 8. SCROLL ANIMATIONS — Every element with class .reveal starts at opacity:0 and transform:translateY(24px). On intersection (threshold 0.12) the class .in-view is added, transitioning to opacity:1, transform:none. Transition: opacity 0.55s cubic-bezier(0.34,1.56,0.64,1), transform 0.55s cubic-bezier(0.34,1.56,0.64,1). Stagger via data-delay attributes: data-delay="1" adds transition-delay:0.1s, data-delay="2" adds 0.2s, data-delay="3" adds 0.3s. Elements that animate: eyebrow bubbles, h1, hero description, hero CTA buttons, hero bubbles bar, hero visual, trust items (staggered 1–3), section eyebrow bubbles, h2 headings, all cards in each grid (staggered by column index), FAQ items. Use IntersectionObserver — unobserve after first trigger. 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. At tablet (max-width:1023px): H1 scales to 54px; hero collapses to single column (hero visual hidden with display:none); services grid 4-col → 2-col (grid-template-columns:1fr 1fr); how-it-works 3-col → 1-col; sitter-grid, testimonials-grid, pricing-grid all → 1-col; footer grid → 2-col. At mobile (max-width:767px): H1 → 42px; H2 section headings → 34px; nav links list hidden (display:none — hamburger not required, just hide); services grid → 1-col; trust band gaps reduce to 20px; CTA box heading → 32px, padding reduces to 48px 24px; footer grid → 1-col. Body text stays 16px at all breakpoints. All CTA buttons remain pill-shaped; on mobile the hero CTA row wraps (flex-wrap:wrap) making buttons full-width on very narrow screens. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: 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. Additionally include in the main stylesheet: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } and html { scroll-behavior: smooth; } and body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; }. The .wrap container must be applied inside every section and the nav inner element (.ni), setting max-width:1160px, margin:0 auto, and the 80px horizontal padding on desktop. 11. SEMANTIC HTML — Document structure: one <header> element wrapping <nav> with .ni inner container. <main> contains exactly these <section> elements in order: section.hero, section.trust, section.serv-sec, section.how-sec, section.sitter-sec, section.testi-sec, section.price-sec, section.faq-sec, section.cta-sec. Use <article> for each service card, sitter card, testimonial card, and pricing card. End with <footer> containing the 4-column grid and bottom bar. Exactly one <h1> in the entire document (in the hero, text "Pet care, booked in taps"). H2 headings appear in each major section. H3 appears inside cards (service name, how-it-works step title, sitter name row). SEO: <title>PawPal — On-Demand Pet Care, Booked in Taps</title> (49 chars), <meta name="description" content="PawPal connects you with vetted, loving sitters for walks, sitting, and grooming — booked in a few taps. Background-checked, insured, and 5-star rated."> (155 chars max), og:image should depict a happy golden retriever on warm cream background at 1200×630px. Every pet emoji avatar used as an img placeholder must have descriptive alt text (e.g., alt="Biscuit the Border Collie, Portland"). 12. FOOTER STRUCTURE — The footer uses background:#2E2A26 (--dark), color:#FFFBF4, padding:64px 0 40px. Inner grid is 4 columns (grid-template-columns:2fr 1fr 1fr 1fr, gap:40px). Column 1 (brand, 2fr): logo "🐾 PawPal" in Quicksand 700 22px coral #FF6F61, followed by 14px body text in rgba(255,251,244,0.5) describing the brand in one sentence. Columns 2–4 (1fr each): column headers in Quicksand 700, 13px, letter-spacing:0.04em, UPPERCASE, color rgba(255,251,244,0.4), margin-bottom:16px. Column 2 "Services": Dog walking, Pet sitting, Grooming, Cat care. Column 3 "PawPal": How it works, Become a sitter, Pricing, Safety. Column 4 "Help": Support, Trust & safety, Contact, App. Link color: rgba(255,251,244,0.7), font-size:14px, hover color:#FF6F61. Bottom bar: border-top:1px solid rgba(255,251,244,0.12), padding-top:24px, display:flex, justify-content:space-between, flex-wrap:wrap. Left: "© 2025 PawPal Inc. · Pets are family." Right: "Privacy · Terms · Safety". Both in 12px rgba(255,251,244,0.35). No social icons or newsletter input in this template. 13. UNIQUE INTERACTIVE — The FAQ accordion uses 4 items, each a .faq-item div containing a <button class="faq-q"> and a <div class="faq-a">. Default state: .faq-a has display:none (answer hidden). The .faq-q button uses ::after pseudo-element content:'+', font-size:22px, color:#FF6F61 (coral), positioned via flex justify-content:space-between. When clicked, JavaScript toggles classes: btn.classList.toggle('open') and the sibling answer div a.classList.toggle('open'). When .faq-q has class open, ::after content changes to '−'. When .faq-a has class open, display switches to block. There is no close-others behavior — multiple items can be open simultaneously. The .faq-item container: background:#FFFBF4, border:2px solid #F3EADD, border-radius:18px, margin-bottom:14px, overflow:hidden. The question button padding:20px 24px, Quicksand 700, 17px, color:#2E2A26. The answer padding:0 24px 20px, Inter 400, 15px, color:#7E756B, line-height:1.7. ARIA: add aria-expanded="false/true" on each button toggled in JS, and aria-controls pointing to the answer div id. No transition animation on the answer reveal — it snaps open/closed via display property. — Prompt set generated with Claude Sonnet 4.6 —