Pages Medium
Podcast — Landing Business
A dark, audio-first landing page for a business and startup interview show — featuring a glowing play hero with an animated waveform, notable-guest logo wall, episode cards with hover states, a scannable key-takeaways grid, and a working newsletter plus one-tap subscribe flow across every major podcast platform.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0c0c10;
--surface: #15151c;
--surface-2: #1d1d27;
--violet: #8b5cf6;
--violet-d: #7c3aed;
--cyan: #22d3ee;
--pink: #f472b6;
--ink: #f4f4f8;
--muted: #9a9aab;
--line: rgba(255, 255, 255, 0.10);
--line-2: rgba(255, 255, 255, 0.18);
--white: #fff;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--grad: linear-gradient(90deg, var(--violet), var(--cyan));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Inter", system-ui, -apple-system, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(600px 400px at 12% -5%, rgba(139, 92, 246, 0.18), transparent 60%),
radial-gradient(700px 460px at 100% 8%, rgba(34, 211, 238, 0.12), transparent 60%);
z-index: 0;
}
.wrap { width: min(1120px, 92vw); margin-inline: auto; position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
.skip {
position: absolute; left: -999px; top: 0;
background: var(--violet); color: #fff; padding: 10px 16px;
border-radius: 0 0 var(--r-sm) 0; z-index: 100;
}
.skip:focus { left: 0; }
/* buttons */
.btn {
font: inherit; font-weight: 600; cursor: pointer;
border: 1px solid transparent; border-radius: 999px;
padding: 12px 22px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-primary {
background: var(--grad); color: #0c0c10; font-weight: 700;
box-shadow: 0 8px 26px rgba(139, 92, 246, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(139, 92, 246, 0.5); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--violet); background: rgba(139, 92, 246, 0.1); }
/* header */
.site {
position: sticky; top: 0; z-index: 40;
backdrop-filter: blur(12px);
background: rgba(12, 12, 16, 0.72);
border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.brand-mark span {
width: 4px; border-radius: 2px; background: var(--grad);
animation: bar 1.1s ease-in-out infinite;
}
.brand-mark span:nth-child(1) { height: 40%; animation-delay: 0s; }
.brand-mark span:nth-child(2) { height: 100%; animation-delay: .15s; }
.brand-mark span:nth-child(3) { height: 60%; animation-delay: .3s; }
.brand-mark span:nth-child(4) { height: 85%; animation-delay: .45s; }
@keyframes bar { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.brand-name { font-size: 1.05rem; }
.links { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; color: var(--muted); font-weight: 500; }
.links a { transition: color .18s; }
.links a:hover { color: var(--ink); }
/* hero */
.hero {
display: grid; grid-template-columns: 1.35fr .9fr; gap: 48px;
align-items: center; padding: 70px 0 60px;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: .8rem; font-weight: 600; color: var(--cyan);
text-transform: uppercase; letter-spacing: .08em;
border: 1px solid var(--line-2); border-radius: 999px;
padding: 6px 14px; background: rgba(34, 211, 238, 0.06);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.eyebrow-inline { color: var(--violet); background: rgba(139, 92, 246, 0.08); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; margin: 20px 0 16px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 52ch; margin: 0 0 28px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.play-hero {
position: relative; flex: none;
width: 74px; height: 74px; border-radius: 50%;
border: none; cursor: pointer; color: #0c0c10;
background: var(--grad);
display: grid; place-items: center;
box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.12), 0 14px 40px rgba(139, 92, 246, 0.5);
transition: transform .18s ease;
}
.play-hero:hover { transform: scale(1.06); }
.play-hero:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.play-glow {
position: absolute; inset: -6px; border-radius: 50%;
background: var(--grad); opacity: .5; filter: blur(14px); z-index: -1;
animation: glow 2.4s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.15); opacity: .65; } }
.play-hero svg { width: 30px; height: 30px; fill: currentColor; }
.play-hero .ic-pause { display: none; }
.play-hero[aria-pressed="true"] .ic-play { display: none; }
.play-hero[aria-pressed="true"] .ic-pause { display: block; }
.hero-nowplaying { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-label { font-size: .78rem; color: var(--cyan); font-weight: 600; letter-spacing: .04em; }
.hero-nowplaying strong { font-size: 1.02rem; }
.wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 6px; }
.wave i {
width: 3px; height: 40%; border-radius: 2px; background: var(--grad);
opacity: .55; transform-origin: center;
}
.wave.playing i { animation: wv .9s ease-in-out infinite; opacity: 1; }
.wave i:nth-child(3n) { animation-delay: .1s; }
.wave i:nth-child(3n+1) { animation-delay: .25s; }
.wave i:nth-child(4n) { animation-delay: .4s; }
@keyframes wv { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.subs { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
color: var(--ink); background: var(--surface-2);
border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px;
transition: border-color .18s, transform .15s, background .18s;
}
.chip svg { width: 16px; height: 16px; fill: none; stroke: var(--violet); stroke-width: 2; }
.chip:hover { border-color: var(--violet); transform: translateY(-2px); background: var(--surface); }
.chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.chip-sm { padding: 6px 12px; font-size: .8rem; }
/* hero stats */
.hero-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 22px;
}
.stat { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.stat-num { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em;
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.stat-rating { grid-column: 1 / -1; display: flex; flex-direction: column; }
.stars { color: #fbbf24; letter-spacing: 2px; margin-top: 4px; font-size: .95rem; }
/* guest logos */
.guests { padding: 30px 0 10px; text-align: center; }
.section-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; margin-bottom: 22px; }
.logo-wall {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.logo-wall li {
padding: 18px 8px; border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--surface); color: var(--muted); font-weight: 700; font-size: 1.02rem;
letter-spacing: -0.01em; transition: color .2s, border-color .2s, background .2s;
}
.logo-wall li:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
/* sections */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; margin-top: 12px; }
.episodes, .takeaways { padding: 56px 0; }
.ep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ep-card {
display: grid; grid-template-columns: 118px 1fr; gap: 0; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
transition: transform .2s ease, border-color .2s, box-shadow .2s;
outline: none;
}
.ep-card:hover, .ep-card:focus-visible {
transform: translateY(-4px); border-color: var(--line-2);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.ep-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ep-thumb {
position: relative; display: grid; place-items: center;
background: linear-gradient(140deg, var(--g1), var(--g2));
}
.ep-num { position: absolute; top: 10px; left: 12px; font-weight: 800; font-size: .78rem; color: rgba(255,255,255,.85); }
.ep-play {
width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(12, 12, 16, 0.55); color: #fff; display: grid; place-items: center;
backdrop-filter: blur(4px); transition: transform .15s, background .2s;
}
.ep-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
.ep-play:hover { transform: scale(1.12); background: rgba(12, 12, 16, 0.78); }
.ep-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ep-body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.ep-meta { display: flex; align-items: center; gap: 10px; }
.badge {
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--violet); background: rgba(139, 92, 246, 0.14);
border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 999px; padding: 3px 10px;
}
.dur { font-size: .78rem; color: var(--muted); }
.ep-body h3 { font-size: 1.08rem; font-weight: 700; }
.ep-body p { margin: 0; color: var(--muted); font-size: .92rem; }
.ep-guest { font-size: .8rem; color: var(--cyan); font-weight: 600; margin-top: auto; }
/* takeaways */
.take-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.take {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 22px; position: relative; transition: border-color .2s, transform .2s;
}
.take:hover { border-color: var(--line-2); transform: translateY(-3px); }
.take-n { display: block; font-size: 1.3rem; font-weight: 800; margin-bottom: 10px;
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.take p { margin: 0; color: var(--ink); font-size: .96rem; }
.take.extra { animation: fadeUp .4s ease; }
/* newsletter */
.newsletter {
margin: 40px 0 70px; padding: 0;
}
.nl-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
background:
radial-gradient(500px 300px at 90% 0%, rgba(34, 211, 238, 0.14), transparent 60%),
var(--surface);
border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 44px;
}
.nl-copy h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; margin: 12px 0 12px; }
.nl-copy p { color: var(--muted); margin: 0 0 16px; }
.nl-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nl-points li { position: relative; padding-left: 26px; color: var(--ink); font-size: .92rem; }
.nl-points li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: #0c0c10; background: var(--grad); width: 18px; height: 18px;
border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
.nl-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.field { display: flex; gap: 10px; }
.field input {
flex: 1; min-width: 0; font: inherit; color: var(--ink);
background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px;
padding: 13px 18px; transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #6b6b7a; }
.field input:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
.field input.invalid { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2); }
.err { color: var(--pink); font-size: .84rem; margin: 10px 0 0; }
.ok { color: var(--cyan); font-size: .9rem; font-weight: 600; margin: 10px 0 0; }
.fineprint { color: #6b6b7a; font-size: .78rem; margin: 12px 0 0; }
/* footer */
.site-foot { border-top: 1px solid var(--line); padding: 30px 0 100px; }
.foot-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-inner p { color: var(--muted); font-size: .85rem; margin: 0; }
.foot-subs { display: flex; gap: 8px; margin-left: auto; }
/* mini player */
.player {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: rgba(21, 21, 27, 0.92); backdrop-filter: blur(16px);
border-top: 1px solid var(--line-2);
transform: translateY(120%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.player.open { transform: translateY(0); }
.player-inner { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.player-play {
width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; flex: none;
background: var(--grad); color: #0c0c10; display: grid; place-items: center;
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.player-play svg { width: 20px; height: 20px; fill: currentColor; }
.player-play .ic-play { display: none; }
.player-play[aria-pressed="false"] .ic-play { display: block; }
.player-play[aria-pressed="false"] .ic-pause { display: none; }
.player-play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.player-meta { display: flex; flex-direction: column; min-width: 0; }
.player-meta strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta span { font-size: .78rem; color: var(--muted); }
.player-wave { flex: 1; height: 30px; max-width: 340px; }
.player-wave i { flex: 1; }
.player-time { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-close {
background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer;
width: 34px; height: 34px; border-radius: 50%; flex: none; transition: color .2s, background .2s;
}
.player-close:hover { color: var(--ink); background: var(--surface-2); }
.player-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* toast */
.toast {
position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px);
background: var(--surface-2); color: var(--ink);
border: 1px solid var(--line-2); border-radius: var(--r-md);
padding: 12px 20px; font-size: .9rem; font-weight: 500;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 80;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
}
/* responsive */
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; gap: 34px; }
.nl-inner { grid-template-columns: 1fr; padding: 32px; }
.logo-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.ep-grid { grid-template-columns: 1fr; }
.take-grid { grid-template-columns: 1fr 1fr; }
.links { display: none; }
}
@media (max-width: 520px) {
.hero { padding: 44px 0 40px; }
.hero-stats { grid-template-columns: 1fr 1fr; padding: 16px; }
.hero-actions { flex-wrap: wrap; gap: 14px; }
.logo-wall { grid-template-columns: repeat(2, 1fr); }
.take-grid { grid-template-columns: 1fr; }
.section-head { flex-direction: column; align-items: flex-start; }
.player-time, .player-wave { display: none; }
.player-meta strong { max-width: 46vw; }
.nl-inner { padding: 24px; }
.field { flex-direction: column; }
.field .btn { width: 100%; }
.foot-subs { margin-left: 0; width: 100%; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2600);
}
/* ---------- mini player + waveforms ---------- */
var player = document.getElementById("player");
var playHero = document.getElementById("playHero");
var playerPlay = document.getElementById("playerPlay");
var playerClose = document.getElementById("playerClose");
var heroWave = document.getElementById("heroWave");
var playerWave = document.getElementById("playerWave");
var playing = false;
function setPlaying(state) {
playing = state;
if (playHero) playHero.setAttribute("aria-pressed", String(state));
if (playerPlay) {
playerPlay.setAttribute("aria-pressed", String(state));
playerPlay.setAttribute("aria-label", state ? "Pause" : "Play");
}
[heroWave, playerWave].forEach(function (w) {
if (w) w.classList.toggle("playing", state);
});
}
function openPlayer() {
if (player) {
player.classList.add("open");
player.setAttribute("aria-hidden", "false");
}
}
function closePlayer() {
if (player) {
player.classList.remove("open");
player.setAttribute("aria-hidden", "true");
}
setPlaying(false);
toast("Playback stopped");
}
if (playHero) {
playHero.addEventListener("click", function () {
var next = !playing;
setPlaying(next);
if (next) {
openPlayer();
toast("▶ Playing EP 148 — Pricing your way out of a plateau");
} else {
toast("Paused");
}
});
}
if (playerPlay) {
playerPlay.addEventListener("click", function () {
setPlaying(!playing);
toast(playing ? "Resumed" : "Paused");
});
}
if (playerClose) playerClose.addEventListener("click", closePlayer);
/* episode card play buttons */
document.querySelectorAll(".ep-play").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.stopPropagation();
var card = btn.closest(".ep-card");
var title = card ? card.querySelector("h3").textContent : "episode";
var pm = player && player.querySelector(".player-meta strong");
if (pm) pm.textContent = title;
openPlayer();
setPlaying(true);
toast("▶ Playing — " + title);
});
});
/* simulated player clock */
var elapsed = 12 * 60 + 4;
var total = 42 * 60 + 17;
var timeEl = document.getElementById("playerTime");
function fmt(s) {
var m = Math.floor(s / 60);
var sec = s % 60;
return m + ":" + (sec < 10 ? "0" : "") + sec;
}
setInterval(function () {
if (!playing) return;
elapsed = elapsed >= total ? 0 : elapsed + 1;
if (timeEl) timeEl.textContent = fmt(elapsed) + " / " + fmt(total);
}, 1000);
/* ---------- subscribe chips (copy feed url) ---------- */
document.querySelectorAll("[data-feed]").forEach(function (chip) {
chip.addEventListener("click", function () {
var url = chip.getAttribute("data-feed");
var label = chip.textContent.trim();
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(
function () { toast("Feed copied — subscribe on " + label); },
function () { toast("Subscribe on " + label); }
);
} else {
toast("Subscribe on " + label);
}
});
});
/* header subscribe -> scroll to newsletter */
var subScroll = document.querySelector("[data-subscribe-scroll]");
if (subScroll) {
subScroll.addEventListener("click", function () {
var nl = document.getElementById("newsletter");
if (nl) nl.scrollIntoView({ behavior: "smooth", block: "center" });
var input = document.getElementById("nlEmail");
if (input) setTimeout(function () { input.focus(); }, 500);
});
}
/* ---------- takeaways expand ---------- */
var toggleTake = document.getElementById("toggleTake");
if (toggleTake) {
toggleTake.addEventListener("click", function () {
var extras = document.querySelectorAll(".take.extra");
var expanded = toggleTake.getAttribute("aria-expanded") === "true";
extras.forEach(function (el) { el.hidden = expanded; });
toggleTake.setAttribute("aria-expanded", String(!expanded));
toggleTake.textContent = expanded ? "Show 3 more" : "Show less";
});
}
/* ---------- newsletter validation ---------- */
var form = document.getElementById("nlForm");
var email = document.getElementById("nlEmail");
var errEl = document.getElementById("nlError");
var okEl = document.getElementById("nlOk");
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var val = email.value.trim();
var valid = re.test(val);
if (!valid) {
email.classList.add("invalid");
if (errEl) errEl.hidden = false;
if (okEl) okEl.hidden = true;
email.focus();
return;
}
email.classList.remove("invalid");
if (errEl) errEl.hidden = true;
if (okEl) okEl.hidden = false;
email.value = "";
toast("Subscribed — welcome to the Tuesday memo!");
});
email.addEventListener("input", function () {
if (email.classList.contains("invalid") && re.test(email.value.trim())) {
email.classList.remove("invalid");
if (errEl) errEl.hidden = true;
}
});
}
/* ---------- animated stat counters ---------- */
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count"));
var suffix = el.getAttribute("data-suffix") || "";
var isBig = target >= 1000;
var dur = 1400;
var start = performance.now();
function step(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
var v = target * eased;
var out;
if (isBig && target >= 1000000) out = (v / 1000000).toFixed(v >= target ? 1 : 1) + "M";
else if (isBig) out = Math.round(v / 1000) + "k";
else out = Math.round(v) + suffix;
el.textContent = out;
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
/* ---------- scroll reveal + counter trigger ---------- */
var sections = document.querySelectorAll(
".hero-stats, .guests, .episodes, .takeaways, .newsletter"
);
sections.forEach(function (s) { s.classList.add("reveal"); });
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.classList.add("in");
entry.target.querySelectorAll("[data-count]").forEach(animateCount);
io.unobserve(entry.target);
});
}, { threshold: 0.18 });
sections.forEach(function (s) { io.observe(s); });
} else {
sections.forEach(function (s) { s.classList.add("in"); });
document.querySelectorAll("[data-count]").forEach(animateCount);
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Signal & Scale — The business growth podcast</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site">
<div class="wrap nav">
<a class="brand" href="#main" aria-label="Signal and Scale home">
<span class="brand-mark" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</span>
<span class="brand-name">Signal & Scale</span>
</a>
<nav class="links" aria-label="Primary">
<a href="#episodes">Episodes</a>
<a href="#takeaways">Takeaways</a>
<a href="#guests">Guests</a>
<a href="#newsletter">Newsletter</a>
</nav>
<button class="btn btn-primary btn-sm" data-subscribe-scroll>Subscribe</button>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero wrap" aria-labelledby="hero-title">
<div class="hero-copy">
<span class="eyebrow"><span class="dot" aria-hidden="true"></span> New episode every Tuesday</span>
<h1 id="hero-title">How real companies <span class="grad">grow</span> — told by the people who did it.</h1>
<p class="lede">Signal & Scale is a weekly interview show where operators, founders and investors break down the decisions behind durable, profitable growth. No hype. Just the playbook.</p>
<div class="hero-actions">
<button class="play-hero" id="playHero" aria-pressed="false" aria-label="Play the latest episode">
<span class="play-glow" aria-hidden="true"></span>
<svg class="ic-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
<svg class="ic-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>
</button>
<div class="hero-nowplaying">
<span class="np-label">Latest · EP 148</span>
<strong>Pricing your way out of a plateau</strong>
<div class="wave" id="heroWave" aria-hidden="true">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
</div>
</div>
<div class="subs" aria-label="Subscribe on your platform">
<button class="chip" data-feed="https://feeds.signalscale.fm/apple">
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg> Apple Podcasts
</button>
<button class="chip" data-feed="https://feeds.signalscale.fm/spotify">
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg> Spotify
</button>
<button class="chip" data-feed="https://feeds.signalscale.fm/youtube">
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="18" height="12" rx="3"/></svg> YouTube
</button>
<button class="chip" data-feed="https://feeds.signalscale.fm/rss">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19a2 2 0 100-4 2 2 0 000 4zM5 11a8 8 0 018 8M5 5a14 14 0 0114 14"/></svg> RSS
</button>
</div>
</div>
<aside class="hero-stats" aria-label="Show highlights">
<div class="stat">
<span class="stat-num" data-count="2400000">0</span>
<span class="stat-label">Monthly downloads</span>
</div>
<div class="stat">
<span class="stat-num" data-count="148">0</span>
<span class="stat-label">Episodes shipped</span>
</div>
<div class="stat">
<span class="stat-num" data-count="63" data-suffix="k">0</span>
<span class="stat-label">Newsletter readers</span>
</div>
<div class="stat stat-rating">
<span class="stat-num">4.9</span>
<span class="stat-label">Avg. rating · 3.1k reviews</span>
<span class="stars" aria-hidden="true">★★★★★</span>
</div>
</aside>
</section>
<!-- GUEST LOGOS -->
<section class="guests wrap" id="guests" aria-labelledby="guests-title">
<h2 id="guests-title" class="section-kicker">Featured guests from</h2>
<ul class="logo-wall" aria-label="Companies our guests have led">
<li>Northwind</li>
<li>Lumen Labs</li>
<li>Cadence</li>
<li>Bright & Co</li>
<li>Meridian</li>
<li>Foundry 9</li>
<li>Tidewater</li>
<li>Kestrel</li>
</ul>
</section>
<!-- EPISODES -->
<section class="episodes wrap" id="episodes" aria-labelledby="episodes-title">
<div class="section-head">
<div>
<span class="eyebrow eyebrow-inline">Latest episodes</span>
<h2 id="episodes-title">Fresh conversations, every week</h2>
</div>
<button class="btn btn-ghost btn-sm">Browse all 148 →</button>
</div>
<div class="ep-grid">
<article class="ep-card" tabindex="0">
<div class="ep-thumb" style="--g1:#8b5cf6;--g2:#22d3ee">
<span class="ep-num">148</span>
<button class="ep-play" aria-label="Play episode 148">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="ep-body">
<div class="ep-meta"><span class="badge">Pricing</span><span class="dur">42 min</span></div>
<h3>Pricing your way out of a plateau</h3>
<p>Dana Whitfield on how a boring SaaS doubled net revenue without adding a single feature.</p>
<span class="ep-guest">with Dana Whitfield · CEO, Cadence</span>
</div>
</article>
<article class="ep-card" tabindex="0">
<div class="ep-thumb" style="--g1:#f472b6;--g2:#8b5cf6">
<span class="ep-num">147</span>
<button class="ep-play" aria-label="Play episode 147">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="ep-body">
<div class="ep-meta"><span class="badge">Hiring</span><span class="dur">51 min</span></div>
<h3>The first ten hires that actually matter</h3>
<p>Marcus Bell breaks down why he stopped hiring specialists too early — and what it cost him.</p>
<span class="ep-guest">with Marcus Bell · Founder, Foundry 9</span>
</div>
</article>
<article class="ep-card" tabindex="0">
<div class="ep-thumb" style="--g1:#22d3ee;--g2:#7c3aed">
<span class="ep-num">146</span>
<button class="ep-play" aria-label="Play episode 146">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="ep-body">
<div class="ep-meta"><span class="badge">Fundraising</span><span class="dur">38 min</span></div>
<h3>Raising less on purpose</h3>
<p>Priya Nair on turning down a bigger round and building a company that never needs the next one.</p>
<span class="ep-guest">with Priya Nair · Partner, Meridian</span>
</div>
</article>
<article class="ep-card" tabindex="0">
<div class="ep-thumb" style="--g1:#7c3aed;--g2:#f472b6">
<span class="ep-num">145</span>
<button class="ep-play" aria-label="Play episode 145">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="ep-body">
<div class="ep-meta"><span class="badge">Retention</span><span class="dur">47 min</span></div>
<h3>Churn is a product problem</h3>
<p>Leah Osei on why her team moved churn out of marketing and into engineering — and won.</p>
<span class="ep-guest">with Leah Osei · VP Product, Lumen Labs</span>
</div>
</article>
</div>
</section>
<!-- KEY TAKEAWAYS -->
<section class="takeaways wrap" id="takeaways" aria-labelledby="take-title">
<div class="section-head">
<div>
<span class="eyebrow eyebrow-inline">From EP 148</span>
<h2 id="take-title">Key takeaways in 90 seconds</h2>
</div>
<button class="btn btn-ghost btn-sm" id="toggleTake" aria-expanded="false">Show 3 more</button>
</div>
<div class="take-grid" id="takeGrid">
<div class="take"><span class="take-n">01</span><p>Raise prices before you add features — willingness to pay is a signal you already have.</p></div>
<div class="take"><span class="take-n">02</span><p>Segment by outcome, not by seat count. Buyers pay for the result, not the login.</p></div>
<div class="take"><span class="take-n">03</span><p>A 9% price increase tested on new customers first de-risks the whole rollout.</p></div>
<div class="take extra" hidden><span class="take-n">04</span><p>Grandfather loyal accounts loudly. The goodwill is worth more than the delta.</p></div>
<div class="take extra" hidden><span class="take-n">05</span><p>Publish your pricing. Hiding it filters out the exact buyers you want most.</p></div>
<div class="take extra" hidden><span class="take-n">06</span><p>Review packaging quarterly. Pricing is a product surface, not a launch-day decision.</p></div>
</div>
</section>
<!-- NEWSLETTER -->
<section class="newsletter" id="newsletter" aria-labelledby="nl-title">
<div class="wrap nl-inner">
<div class="nl-copy">
<span class="eyebrow eyebrow-inline">The Tuesday memo</span>
<h2 id="nl-title">Get the show notes before the episode drops</h2>
<p>One email a week: the three sharpest quotes, the frameworks, and the links — written up by our team. Read by 63,000 operators. No spam, unsubscribe anytime.</p>
<ul class="nl-points">
<li>Distilled takeaways from every episode</li>
<li>Occasional bonus interviews, subscribers only</li>
<li>Zero sponsored fluff</li>
</ul>
</div>
<form class="nl-form" id="nlForm" novalidate>
<label for="nlEmail">Work email</label>
<div class="field">
<input type="email" id="nlEmail" name="email" placeholder="[email protected]" autocomplete="email" required aria-describedby="nlError" />
<button class="btn btn-primary" type="submit">Subscribe free</button>
</div>
<p class="err" id="nlError" role="alert" hidden>Please enter a valid email address.</p>
<p class="ok" id="nlOk" role="status" hidden>You're in. Check your inbox to confirm.</p>
<p class="fineprint">By subscribing you agree to our friendly, human privacy policy.</p>
</form>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-inner">
<span class="brand-name">Signal & Scale</span>
<p>A fictional show built as a UI demo. © 2026 Stealthis.</p>
<div class="foot-subs">
<button class="chip chip-sm" data-feed="https://feeds.signalscale.fm/apple">Apple</button>
<button class="chip chip-sm" data-feed="https://feeds.signalscale.fm/spotify">Spotify</button>
<button class="chip chip-sm" data-feed="https://feeds.signalscale.fm/rss">RSS</button>
</div>
</div>
</footer>
<!-- MINI PLAYER -->
<div class="player" id="player" role="region" aria-label="Now playing" aria-hidden="true">
<div class="wrap player-inner">
<button class="player-play" id="playerPlay" aria-label="Pause" aria-pressed="true">
<svg class="ic-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
<svg class="ic-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>
</button>
<div class="player-meta">
<strong>Pricing your way out of a plateau</strong>
<span>EP 148 · Signal & Scale</span>
</div>
<div class="wave player-wave" id="playerWave" aria-hidden="true">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<span class="player-time" id="playerTime">12:04 / 42:17</span>
<button class="player-close" id="playerClose" aria-label="Close player">✕</button>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>A production-ready marketing landing page for Signal & Scale, a fictional weekly show where operators and founders unpack how real companies grow. The hero pairs a glowing violet-to-cyan play button with an animated CSS waveform, a rotating count of listeners, and quick subscribe chips. Below it a guest logo wall lends social proof, followed by a responsive grid of latest episodes carrying duration badges, episode numbers, and hover lift.
Interactions are all vanilla JS. Clicking the hero play button toggles a simulated mini-player at the bottom of the screen, animating the waveform bars and swapping the play/pause glyph while a toast confirms the action. The key-takeaways section reveals extra bullet points with an accessible expand control, subscribe chips copy their feed URL and fire a toast, and the newsletter form validates the email inline before showing a success state. A scroll-reveal observer fades sections in as they enter the viewport.
The layout is fully responsive down to roughly 360px, uses semantic landmarks with ARIA labelling on the player and controls, keeps focus states visible for keyboard users, and meets WCAG AA contrast against the near-black background. All names, guests, and metrics are clearly fictional.