Wavelength

1. COLORS — Use this exact token set: --bg: #FBF3E7 (page background, warm cream canvas); --surface: #FFFCF5 (cards, panels, newsletter and episodes sections); --dark: #1E160A (stats band background and footer-adjacent dark); --text: #1E160A (primary text, warm near-black); --muted: #7A6A52 (secondary text, timestamps, nav links); --orange: #D9622B (burnt-orange brand, play buttons, CTA backgrounds, hover deepens via filter:brightness(0.9)); --teal: #1F8A82 (waveform bars, eyebrow labels, section category tags); --border: #E8DCCB (hairline dividers, card outlines, input strokes); play-button gradient: linear-gradient(90deg, #D9622B, #1F8A82) on the progress fill, and linear-gradient(135deg, #D9622B, #a03800) on cover-art placeholders. The overall palette mood is: analog radio warmth — a crackling vinyl evening in a well-lit kitchen. 2. TYPOGRAPHY — Use "Lora" (Google Fonts, serif, weights 400/500/600, includes italic variants) for all headings and the wordmark; use "Inter" (Google Fonts, sans-serif, weights 400/500/600) for body, labels, buttons, and nav. Type scale: H1 72px / weight 500 / line-height 1.04 / letter-spacing -0.01em; H2 52px / weight 500 / line-height 1.06 / letter-spacing -0.01em; H3 (host name, player title) 20px / weight 600 / line-height 1.3; H4 (footer column heads, show name in card) 16px / weight 600 / line-height 1.3; Body-L (hero desc, section desc) 19px / weight 400 / line-height 1.65; Body 16px / weight 400 / line-height 1.65; Eyebrow/label 12px / weight 600 / letter-spacing 0.10em / UPPERCASE / color --teal or --orange; Caption/timestamp 12px / weight 500 / color --muted. Special treatment: every H1 and H2 section headline contains one <em> word rendered italic in --orange (H1) or --teal (H2), e.g. "one <em>warm home</em>" and "things that <em>matter</em>". The wordmark "Wavelength" is Lora italic 20px / weight 600. 3. PAGE SECTIONS — Build sections strictly in this order: sticky nav → hero (eyebrow + H1 with italic em + 19px desc + dual CTA + mini-player card) → featured shows (4-col grid of 4 show cards with cover art, category eyebrow, title, episode count) → latest episodes (5 numbered rows, each with episode number in Lora italic, show name eyebrow in --orange, episode title, duration + age meta, circular play button) → host spotlight (3-col grid of 3 host cards with blob avatar, host name, show name in --orange, 2-sentence bio) → stats band (dark #1E160A background, 3 stats: "24" / "2.4M" / "0" with labels "Independent shows" / "Monthly listeners" / "Ads. Ever.") → newsletter (centered, italic H2, 17px desc, pill-shaped email form) → footer. The hero uses a 3fr 2fr grid for content vs. player. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The inline mini-player card in the hero is the single most visually distinctive element: background: #FFFCF5; border: 1px solid #E8DCCB; border-radius: 20px; padding: 24px; box-shadow: 0 16px 48px rgba(30,22,10,0.10). Inside it, the waveform strip is 24 vertical bars, each 4px wide, border-radius: 999px, gap: 3px, height 32px container; played bars use background: #D9622B, remaining bars use background: #1F8A82; heights vary 10–28px to simulate a real audio waveform. Below the waveform: a progress track (height 4px, background: #E8DCCB, border-radius: 999px) with a fill div width:38%, background: linear-gradient(90deg,#D9622B,#1F8A82). The circular play button is 48px diameter, background: #D9622B, border-radius: 50%, no border, white play icon at 20px. This element defines the aesthetic because it makes the page feel operational — it is not a screenshot of a product but the product itself, in miniature, warming the hero. 5. COMPONENT SPECS — Primary button (.btn-orange): background: #D9622B; color: #ffffff; padding: 10px 20px (hero CTAs use 14px 28px); border-radius: 999px; font-weight: 600; font-size: 14px (hero variant 16px); hover: filter:brightness(0.9) + transform:translateY(-1px), transition 0.2s. Secondary button (.btn-out): background: transparent; color: #1E160A; border: 1.5px solid #E8DCCB; padding: 9px 18px; border-radius: 999px; font-size: 14px; hover: background: #E8DCCB, transition 0.2s. Show cards: background: #FFFCF5; border: 1px solid #E8DCCB; border-radius: 16px; padding: 16px inside body area; cover art aspect-ratio 1/1, full-width, emoji + gradient background; hover: box-shadow: 0 10px 40px rgba(30,22,10,0.1) + transform:translateY(-4px), transition 0.2s. Episode play button: 44px circle; background: #FBF3E7; border: 1.5px solid #E8DCCB; hover: background: #D9622B + border-color: #D9622B + color: #fff. Nav: height 64px; background: rgba(251,243,231,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid #E8DCCB; position: sticky top:0; z-index:100. 6. COPY VOICE — The audience is curious, time-pressed adults (commuters, lifelong learners) who distrust algorithm-curated media and crave intentional, human-selected audio content. Core pain point: they waste time starting podcasts that are filler, ads, or algorithmically popular but not worth their attention. Exact headline examples from this template: H1 "Handpicked voices, one warm home"; H2 "24 shows across the things that matter"; H2 "Hosts who think before they speak"; newsletter H2 "One letter a week. What's worth listening to." Stats must read "24 / Independent shows", "2.4M / Monthly listeners", "0 / Ads. Ever." Hero note line: "Ad-free listening · 24 shows · New episodes every week." Banned phrases for this brand: "Listen anywhere", "Your favorite podcasts", "Tune in now", "All your shows in one place", "Discover new podcasts". 7. BACKGROUND ZONES — There are three distinct background levels. Zone 1 (cream page): #FBF3E7 — used for the page root, hero, featured shows section, host spotlight section, and footer. Zone 2 (lifted surface): #FFFCF5 — used for the latest episodes section (full-width background), newsletter section (full-width background), show cards, host cards, and the mini-player card. Zone 3 (dark band): #1E160A — used exclusively for the stats section, full viewport width, no container constraint, with text colors cream rgba(251,243,231,0.55) for labels and --orange #D9622B for the large italic numbers. All section dividers use border-top: 1px solid #E8DCCB. No CSS gradients are used as section backgrounds; the only gradients appear on play-button fills, cover-art placeholders (linear-gradient(160deg,...)), and the progress bar fill. No textures or patterns are used — warmth comes from color alone. 8. SCROLL ANIMATIONS — Apply .reveal class (opacity:0; transform:translateY(24px)) to every heading, paragraph, card, and CTA block. On IntersectionObserver callback at threshold 0.12, add class .in-view (opacity:1; transform:none). Transition on .reveal: opacity 0.65s cubic-bezier(0.16,1,0.30,1), transform 0.65s cubic-bezier(0.16,1,0.30,1). Card stagger via data-delay attribute: data-delay="1" adds transition-delay:0.12s, data-delay="2" adds 0.22s, data-delay="3" adds 0.32s. Elements that animate: eyebrow labels, H1, hero description, CTA row, hero note, mini-player card, section eyebrows, H2s, section descriptions, every show card, every episode row, every host card, every stat block. Once in view, unobserve immediately (no re-exit animation). Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop ≥1024px, mobile ≤767px (no explicit tablet tier in the HTML, but grid collapses at 1023px). At ≤1023px: hero collapses to 1 column (grid-template-columns:1fr), mini-player hides (display:none); shows grid goes 2-col (grid-template-columns:repeat(2,1fr)); episode rows drop the episode number column (grid-template-columns:1fr auto, ep-num display:none); hosts and stats grid go 1-col; footer goes 2-col (grid-template-columns:1fr 1fr). At ≤767px: H1 drops to 44px; section H2 drops to 36px; newsletter H2 drops to 34px; nav links hide (display:none), leaving only wordmark + buttons; shows grid stays 2-col (1fr 1fr); footer collapses to 1-col. Container .wrap uses padding:0 80px on desktop, which tightens naturally at smaller viewports. Section padding: 120px 0 desktop, section and hero padding tighten implicitly via the 80px side padding reducing. Buttons do not explicitly go full-width on mobile in this template but hero CTA uses flex-wrap:wrap. 10. CRITICAL CSS — Always include these exact overrides as the last <style> tag before </head>: body { flex-direction: column !important; align-items: stretch !important; } — 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 ensure .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } is in the main stylesheet. The nav inner container uses class .ni with max-width:1140px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:64px — this is separate from .wrap and must not be confused with it. 11. SEMANTIC HTML — Document structure: <header> is not used; instead <nav> sits directly at the top of <body> as a sticky bar. <main> wraps all content sections. Use one <section> per content block with descriptive class names (hero, shows-sec, eps-sec, hosts-sec, stats-sec, news-sec). Show cards and host cards use <article> elements. There is exactly one <h1> in the document, inside the hero section. Footer is a standalone <footer> element. SEO: <title> must be exactly "Wavelength — Handpicked Voices, One Warm Home" (≤60 chars). <meta name="description"> content: "Wavelength is an independent podcast network with 24 shows across business, culture, design, and technology. Curated by humans. Made to stay with you." (≤155 chars). og:image should depict a collage of the four show cover-art gradients. Every emoji-based cover art <div> must have a corresponding aria-label describing the show, e.g. aria-label="The Depth Report show cover". Episode play buttons need aria-label="Play episode: [title]". 12. FOOTER STRUCTURE — The footer uses a 4-column grid: grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px. Column 1 (brand, 2fr): italic Lora wordmark "Wavelength" at 20px / weight 600, followed by a 14px / color:--muted tagline paragraph: "An independent podcast network with 24 shows across business, culture, design, and technology. Curated by humans. Ad-free. Made to stay with you." Column 2 (Listen): uppercase Inter label "LISTEN" at 11px / weight 600 / letter-spacing 0.10em / color:--muted; links: All shows, Latest episodes, Top picks, Transcripts. Column 3 (Connect): header "CONNECT"; links: Newsletter, RSS feeds, Apple Podcasts, Spotify. Column 4 (Network): header "NETWORK"; links: About, Hosts, Pitch a show, Memberships. Footer background: #FBF3E7 (same as page, not dark); border-top: 1px solid #E8DCCB; padding: 64px 0 40px. Bottom bar: border-top: 1px solid #E8DCCB; padding-top: 24px; flex row space-between; left: "© 2025 Wavelength Audio Ltd · 24 shows · No ads" in 12px --muted; right: "Privacy · Terms · RSS" in 12px --muted. No social icons, no newsletter input in footer (newsletter has its own full section above). 13. UNIQUE INTERACTIVE — The episode play buttons (.ep-play) and the hero mini-player (.p-play) are the primary interactions. Each .ep-item row is cursor:pointer and on hover applies background:rgba(30,22,10,0.02) with transition 0.15s. The circular .ep-play button (44px, background:#FBF3E7, border:1.5px solid #E8DCCB) on hover transitions to background:#D9622B + border-color:#D9622B + color:#fff in 0.15s linear. The mini-player .p-play button (48px circle, background:#D9622B) is always in "playing" state visually. The waveform bars require CSS keyframe animation when isPlaying is true: @keyframes wavePulse { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.6)} } applied per-bar with animation-duration:1.2s, animation-iteration-count:infinite, animation-timing-function:ease-in-out, each bar offset by animation-delay (0s to 0.5s spread across 24 bars). Under prefers-reduced-motion, remove all animations from waveform bars so they render as a static visual. Show cards on hover: transform:translateY(-4px) + box-shadow:0 10px 40px rgba(30,22,10,0.1), transition:0.2s ease. ARIA: each .ep-play needs aria-label="Play [episode title]"; the waveform container needs aria-hidden="true" since it is decorative; the email input needs id="email" with a matching <label for="email"> (visually hidden if needed). — Prompt set generated with Claude Sonnet 4.6 —