Wander

1. COLORS — Set the page background to #FBFAF6 (soft sand-white), card and panel surfaces to #FFFFFF, tinted section fills to #D6EDF9 (sky-light), primary text to #1A1A18 (near-black slate), muted/secondary text to #6B6B66, the sky-blue action color to #2BA6E0 (hover state #1E86BA), the coral sunset accent to #FF7A59, sand badge fills to #F3E3C7, hairline borders to #E8E5DF, and the hero-to-CTA gradient to linear-gradient(135deg, #2BA6E0 0%, #FF7A59 100%). The overall palette mood is: golden-hour coastline — sun-bleached sand, open sky, and a warm coral burn at the horizon. 2. TYPOGRAPHY — Load Space Grotesk (weights 400, 500, 600, 700) and Inter (weights 400, 500) from Google Fonts. Type scale: H1 72px / weight 700 / line-height 1.03 / letter-spacing -0.03em; H2 52px / weight 700 / line-height 1.06 / letter-spacing -0.025em; H3 44px / weight 700 / line-height 1.1 / letter-spacing -0.025em; H4 22px / weight 600 / line-height 1.3 / letter-spacing 0; Body-L 19px / weight 400 / line-height 1.65 / letter-spacing 0; Body 17px / weight 400 / line-height 1.65; Eyebrow 12px / weight 600 / letter-spacing 0.10em / uppercase / color #6B6B66; Caption 13px / weight 400 / line-height 1.5. Apply Space Grotesk to all headings, nav logo, and buttons; use Inter for body paragraphs and muted labels. Italicize one keyword in each H1/H2 using <em> styled to color #2BA6E0 (sky) or #FF7A59 (coral) with font-style: normal — never real italic. Large step numbers in the How-it-works section use Space Grotesk 56px weight 700 color #D6EDF9. 3. PAGE SECTIONS — Build these sections in exact order: sticky nav → hero (eyebrow + H1 with em highlight + subline + two CTAs + rotated destination card stack on the right) → destinations grid (eyebrow + H2 + subline + 4-column photographic city cards: Kyoto/Japan, Porto/Portugal, Medellín/Colombia, Fès/Morocco) → how-it-works (eyebrow + H2 + 3-column numbered steps: 01 Tell us how you travel, 02 We build the itinerary, 03 Adjust and book) → local intelligence showcase (alternating 2-col layout with copy + bullet list on left, large rounded image/visual on right, eyebrow "Local intelligence") → stats band (3 large white numbers on solid #2BA6E0 background: 380K trips, 340 cities, 4.8★ rating) → traveler testimonials (eyebrow + H2 + 3 cards each with italic quote, avatar initial circle, name, and trip context tag) → CTA band (full-bleed sky→coral gradient, eyebrow in white-70, H2 white 56px, subline, two buttons) → footer (4-column grid). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The rotated destination card stack in the hero is the single most visually distinctive element. Three absolute-positioned cards fan out at -3deg, +2deg, and -1deg rotation; each is 200–220px wide, 260–300px tall, border-radius: 24px, overflow: hidden, box-shadow: 0 20px 60px rgba(26,26,24,0.15). Each card contains a full-bleed gradient background representing the destination color palette and a frosted-glass label pill at the bottom: background rgba(251,250,246,0.9), backdrop-filter: blur(8px), border-radius: 999px, padding: 6px 14px, font-size: 12px, font-weight: 600. The container div is position: relative, height: 420px, hidden on tablet and mobile (display: none at ≤1023px). This element defines the aesthetic because it turns destination photography into a physical, tactile object — it makes "planning a trip" feel like shuffling postcards on a desk. 5. COMPONENT SPECS — Primary button (coral): background #FF7A59, color #FFFFFF, font-family Space Grotesk, font-size 15–16px, font-weight 600, padding 14px top/bottom × 28–32px sides, border-radius 999px, border none; hover: filter brightness(0.9) + transform translateY(-1px), transition 0.2s. Secondary button (outline): background transparent, color #1A1A18, border 1.5px solid #E8E5DF, padding 14px × 28px, border-radius 999px; hover: background #E8E5DF, transition 0.2s. Nav CTA (sky pill): background #2BA6E0, color #fff, font-size 14px, font-weight 600, padding 10px × 20px, border-radius 999px; hover: filter brightness(0.9) + translateY(-1px). Cards: border-radius 20–24px, overflow hidden, border 1px solid #E8E5DF (testimonial cards only), box-shadow 0 8px 32px rgba(26,26,24,0.08) on hover. Nav: height 64px, position sticky top 0, z-index 100; starts at background rgba(251,250,246,0.92) with backdrop-filter blur(12px) and border-bottom 1px solid #E8E5DF — these styles are applied from load, not only on scroll. 6. COPY VOICE — This brand speaks to Millennial and Gen-Z explorers whose core pain point is travel planning that feels generic, algorithmic, and disconnected from real local life. Use these 4 exact example lines: H1 "Trips planned the way you'd plan them yourself"; subline "Wander builds itineraries with the specificity of a local and the flexibility of a solo traveller. No cookie-cutter tours, no group minimums, no itinerary that looks like everyone else's."; CTA eyebrow "Free to plan · Instant itinerary"; stats band label "Cities with local networks". Ban these 5 generic travel phrases entirely: "Adventure awaits", "Explore the world", "Your journey starts here", "Discover amazing destinations", "Travel smarter". Write with earned specificity — name actual cities, give actual durations, reference real details (6am temple visits, Google Maps coordinates for obscure restaurants). Testimonials must name a trip type and duration. 7. BACKGROUND ZONES — There are 4 distinct background zones. Zone 1: #FBFAF6 sand-white — used by hero, destinations grid, showcase, testimonials, and footer. Zone 2: #FFFFFF pure white — used by the how-it-works section (also has 1px solid #E8E5DF borders top and bottom). Zone 3: #2BA6E0 solid sky-blue — used by the stats band, full bleed edge-to-edge, padding 100px 0, no border. Zone 4: linear-gradient(135deg, #2BA6E0 0%, #FF7A59 100%) — used by the final CTA section, full bleed edge-to-edge, padding 160px 0. No textures or patterns are used; color and photography carry all visual weight. The hero photo representations use deep destination-specific CSS gradients (e.g. linear-gradient(160deg,#0e4a6b,#052030) for Kyoto blues). 8. SCROLL ANIMATIONS — Duration 550ms, easing cubic-bezier(0.16, 1, 0.3, 1). All elements with class .reveal start at opacity: 0 and transform: translateY(24px); when the IntersectionObserver fires at threshold 0.12 they transition to opacity: 1 and transform: none using the same 550ms cubic-bezier. Stagger destination cards via data-delay attributes: data-delay="1" adds transition-delay 0.1s, data-delay="2" adds 0.2s, data-delay="3" adds 0.3s. Testimonial cards stagger with the same data-delay pattern. On hover, destination grid items lift with transform: translateY(-6px), transition 0.3s cubic-bezier(0.16,1,0.3,1). Testimonial cards gain box-shadow 0 8px 32px rgba(26,26,24,0.08) on hover, transition 0.2s. 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): hero grid collapses to 1-col (destination card stack hidden with display:none), destination grid goes 4-col → 2-col, how-it-works goes 3-col → 1-col, showcase inner goes 2-col → 1-col (reversed layout reset), stats grid goes 3-col → 1-col, testimonials go 3-col → 1-col, footer goes 4-col → 2-col grid. At mobile (max-width:767px): H1 72px → 44px, H2 52px → 36px, CTA section H2 56px → 38px, destination grid stays 2-col, footer collapses to 1-col, nav links (.nl) hidden (display:none), .wrap padding collapses from 80px to 24px sides. Buttons remain pill-shaped but go full-width when stacked inside a flex-wrap hero-cta container. 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. Also set in :root the CSS variables --bg:#FBFAF6, --surface:#FFFFFF, --sky:#2BA6E0, --sky-light:#D6EDF9, --coral:#FF7A59, --text:#1A1A18, --muted:#6B6B66, --border:#E8E5DF, --font-h:'Space Grotesk',sans-serif, --font-b:'Inter',sans-serif. Apply box-sizing: border-box to *, *::before, *::after and reset margin/padding to 0. Set html { scroll-behavior: smooth } and body { -webkit-font-smoothing: antialiased }. 11. SEMANTIC HTML — Document structure: <header> contains <nav> with .ni inner wrapper (max-width 1160px). <main> contains one <section> per block with descriptive IDs: #hero, #destinations, #how-it-works, #local-intelligence, #stats, #testimonials, #cta. Destination and testimonial items use <article> tags. Footer is <footer>. Exactly one <h1> lives in the hero. Heading hierarchy is strictly h1 → h2 → div (for eyebrow, not a heading level). SEO: <title> format "Wander — Trips Planned the Way You'd Plan Them Yourself" (57 chars). <meta name="description" content="Wander builds itineraries with the specificity of a local and the flexibility of a solo traveller. No cookie-cutter tours. No group minimums." (142 chars). og:image should be 1200×630px featuring a warm sunset travel photo with the search bar overlay. Every <img> and every decorative background used as content must have descriptive alt text naming the city and country (e.g. alt="Kyoto temple rooftops at dawn, Japan"). 12. FOOTER STRUCTURE — The footer uses a 4-column CSS grid with column widths 2fr 1fr 1fr 1fr and 40px gap, margin-bottom 56px before the bottom bar. Column 1 (brand, 2fr): Wander logo in Space Grotesk 20px weight 700 color #2BA6E0, followed by a 14px muted tagline paragraph (max 2 lines). Columns 2–4 (1fr each): section headers in 11px / weight 600 / letter-spacing 0.10em / uppercase / color #6B6B66; link lists with items 15px color #6B6B66 hover #1A1A18, transition 0.2s, margin-bottom 10px between items. Column 2 "Discover": Destinations, City guides, Trip types, Editors' picks. Column 3 "Plan": How it works, Pricing, For groups, Gift a trip. Column 4 "Company": About, Local contributors, Blog, Careers. Bottom bar: border-top 1px solid #E8E5DF, padding-top 28px, flex row space-between; left: "© 2025 Wander Travel Inc. · 380,000 trips planned and counting." right: "Privacy · Terms · Cookie settings" — both in 12px color #6B6B66. No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The destinations grid cards (#destinations .dest-item) use a pure CSS hover lift: transform: translateY(-6px) with transition: transform 0.3s cubic-bezier(0.16,1,0.3,1). Each card has a pseudo-element ::after overlay: position absolute, inset 0, background linear-gradient(transparent 50%, rgba(26,26,24,0.65)) that reveals the city/country label (.dest-info) at the bottom — this overlay is always present (not toggled on hover). The label text (.dest-country 11px uppercase, .dest-city 20px Space Grotesk bold) sits at position relative z-index 1 above the overlay. There is no accordion or tabs in this template. Testimonial cards (.t-card) have hover state: box-shadow 0 8px 32px rgba(26,26,24,0.08), transition 0.2s ease. Every interactive element (cards, buttons, nav links) must have a visible :focus-visible ring — outline: 2px solid #2BA6E0, outline-offset: 3px — for keyboard accessibility. No ARIA roles are needed beyond the semantic HTML structure (nav, main, footer, article). — Prompt set generated with Claude Sonnet 4.6 —