Pages Medium
Coach — Landing Strength
Energetic dark landing page for a strength and hypertrophy coach. Bold uppercase hero with animated PR counters, a three-phase periodization timeline you can step through, coaching-tier cards with a monthly and quarterly billing toggle, testimonial proof from lifters who hit new personal records, and a glowing electric-lime join CTA. Fully responsive with hover, active and focus states, keyboard-friendly controls, and toast feedback on interaction.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0f1115;
--surface: #171a21;
--surface-2: #1f232c;
--lime: #c2f542;
--lime-d: #a3d62f;
--orange: #ff6b35;
--ink: #f2f4f0;
--muted: #9aa0a6;
--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;
--glow: 0 0 0 1px rgba(194, 245, 66, 0.4), 0 12px 40px -8px rgba(194, 245, 66, 0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Inter", system-ui, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: "Oswald", "Inter", sans-serif;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 1.05;
margin: 0;
}
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 2px;
border-radius: 4px;
}
/* ---- buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: .9rem;
letter-spacing: .02em;
padding: .7rem 1.3rem;
border-radius: var(--r-sm);
border: 1px solid transparent;
cursor: pointer;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
text-transform: uppercase;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-lime {
background: var(--lime);
color: #10130a;
box-shadow: 0 6px 22px -6px rgba(194, 245, 66, 0.45);
}
.btn-lime:hover {
background: var(--lime-d);
box-shadow: var(--glow);
transform: translateY(-2px);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--line-2);
}
.btn-ghost:hover {
border-color: var(--lime);
color: var(--lime);
background: rgba(194, 245, 66, 0.06);
}
/* ---- nav ---- */
.nav {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1rem clamp(1rem, 4vw, 3rem);
background: rgba(15, 17, 21, 0.82);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.brand {
font-family: "Oswald", sans-serif;
font-weight: 700;
font-size: 1.35rem;
letter-spacing: .06em;
display: flex;
align-items: center;
gap: .45rem;
}
.brand-mark { color: var(--lime); font-size: .9em; }
.brand-accent { color: var(--lime); }
.nav-links {
display: flex;
gap: 1.5rem;
margin-left: auto;
font-size: .9rem;
font-weight: 600;
color: var(--muted);
}
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { padding: .55rem 1.1rem; }
/* ---- reveal ---- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }
/* ---- layout ---- */
.section {
max-width: 1120px;
margin: 0 auto;
padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
}
.section-head { max-width: 640px; margin-bottom: 2.5rem; }
.kicker {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: .7rem;
}
.section-head h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.section-head p { color: var(--muted); margin-top: .8rem; }
/* ---- hero ---- */
.hero {
max-width: 1120px;
margin: 0 auto;
padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(1.5rem, 5vw, 3.5rem);
align-items: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .78rem;
font-weight: 600;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 999px;
padding: .35rem .85rem;
background: var(--surface);
}
.eyebrow .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 0 rgba(194, 245, 66, .6);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(194, 245, 66, .55); }
70% { box-shadow: 0 0 0 8px rgba(194, 245, 66, 0); }
100% { box-shadow: 0 0 0 0 rgba(194, 245, 66, 0); }
}
.hero h1 {
font-size: clamp(2.6rem, 8vw, 4.6rem);
margin: 1.1rem 0;
font-weight: 700;
}
.hero h1 .hl { color: var(--lime); }
.lede {
color: var(--muted);
font-size: clamp(1rem, 2.4vw, 1.15rem);
max-width: 46ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin: 1.6rem 0 2.2rem;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 0;
padding-top: 1.6rem;
border-top: 1px solid var(--line);
}
.stat dt { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.stat dd {
margin: 0;
font-family: "Oswald", sans-serif;
font-weight: 700;
font-size: clamp(1.5rem, 4vw, 2.1rem);
color: var(--ink);
}
.stat dd .count { color: var(--lime); }
/* hero art */
.hero-art { position: relative; }
.plate-stack {
display: flex;
flex-direction: column;
gap: .6rem;
padding: 1.8rem;
background: linear-gradient(160deg, var(--surface-2), var(--surface));
border: 1px solid var(--line);
border-radius: var(--r-lg);
transform: rotate(-2deg);
}
.plate {
font-family: "Oswald", sans-serif;
font-weight: 700;
letter-spacing: .05em;
color: var(--ink);
background: #23272f;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: .55rem 1rem;
text-align: center;
font-size: 1.05rem;
transition: transform .2s;
}
.plate:hover { transform: translateX(6px); }
.plate.p1 { opacity: .55; }
.plate.p2 { opacity: .7; }
.plate.p3 { opacity: .85; }
.plate.glow {
background: var(--lime);
color: #10130a;
border-color: var(--lime);
box-shadow: var(--glow);
}
.hero-tag {
position: absolute;
bottom: -18px; right: -8px;
background: var(--orange);
color: #1a0f08;
padding: .6rem .9rem;
border-radius: var(--r-md);
transform: rotate(3deg);
box-shadow: 0 12px 28px -10px rgba(255, 107, 53, .6);
}
.hero-tag strong { display: block; font-size: .85rem; text-transform: uppercase; }
.hero-tag span { font-size: .8rem; font-weight: 600; }
/* ---- phases ---- */
.phases { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }
.phase-timeline {
display: flex;
flex-direction: column;
gap: .7rem;
position: relative;
}
.phase-node {
text-align: left;
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--line-2);
border-radius: var(--r-md);
padding: 1rem 1.1rem;
cursor: pointer;
transition: border-color .2s, background .2s, transform .15s;
display: flex;
flex-direction: column;
gap: .15rem;
color: var(--ink);
}
.phase-node:hover { transform: translateX(4px); border-left-color: var(--lime); }
.phase-node .phase-week { font-size: .72rem; color: var(--muted); letter-spacing: .05em; }
.phase-node .phase-name {
font-family: "Oswald", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1.1rem;
}
.phase-node.is-active {
border-left-color: var(--lime);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px rgba(194, 245, 66, .25);
}
.phase-node.is-active .phase-name { color: var(--lime); }
.phase-panel {
background: linear-gradient(160deg, var(--surface-2), var(--surface));
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(1.4rem, 4vw, 2.2rem);
}
.phase-body { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.badge {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: .3rem .7rem;
border-radius: 999px;
}
.badge-orange { background: rgba(255, 107, 53, .16); color: var(--orange); }
.phase-body h3 { font-size: clamp(1.4rem, 4vw, 2rem); margin: .8rem 0 .6rem; }
.phase-body > p { color: var(--muted); max-width: 52ch; }
.phase-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1.6rem 0 1.4rem;
}
.meta-label { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.meta-value { font-weight: 600; font-size: .95rem; }
.intensity-bar {
height: 10px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.intensity-fill {
height: 100%;
background: linear-gradient(90deg, var(--lime), var(--orange));
border-radius: 999px;
transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
/* ---- pricing ---- */
#pricing .section-head { max-width: 100%; display: flex; flex-direction: column; }
.billing-toggle {
display: inline-flex;
align-items: center;
gap: .8rem;
margin-top: 1.4rem;
font-weight: 600;
font-size: .9rem;
}
.toggle-label { color: var(--muted); }
.save-tag {
font-style: normal;
color: var(--lime);
font-size: .75rem;
font-weight: 700;
background: rgba(194, 245, 66, .12);
padding: .1rem .45rem;
border-radius: 6px;
margin-left: .2rem;
}
.switch {
width: 52px; height: 28px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line-2);
position: relative;
cursor: pointer;
padding: 0;
transition: background .2s;
}
.switch[aria-checked="true"] { background: var(--lime); border-color: var(--lime); }
.switch-knob {
position: absolute;
top: 2px; left: 2px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--white);
transition: transform .2s ease;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(24px); }
.tiers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.4rem;
max-width: 760px;
}
.tier {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.8rem;
transition: transform .2s, border-color .2s;
}
.tier:hover { transform: translateY(-4px); border-color: var(--line-2); }
.tier-featured {
border-color: rgba(194, 245, 66, .4);
box-shadow: 0 20px 50px -24px rgba(194, 245, 66, .4);
}
.ribbon {
position: absolute;
top: -12px; right: 1.4rem;
background: var(--lime);
color: #10130a;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: .3rem .7rem;
border-radius: 999px;
}
.tier h3 { font-size: 1.5rem; }
.tier-sub { color: var(--muted); font-size: .9rem; margin: .3rem 0 1.1rem; }
.price {
display: flex;
align-items: baseline;
gap: .1rem;
margin: 0 0 1.2rem;
font-family: "Oswald", sans-serif;
}
.price .currency { font-size: 1.3rem; color: var(--muted); }
.price .amount { font-size: 3rem; font-weight: 700; color: var(--ink); }
.price .per { font-size: 1rem; color: var(--muted); font-family: "Inter"; }
.features { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.features li {
position: relative;
padding-left: 1.6rem;
font-size: .9rem;
color: var(--ink);
}
.features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--lime);
font-weight: 800;
}
/* ---- proof ---- */
.proof-rail {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.quote {
margin: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: transform .2s, border-color .2s;
}
.quote:hover { transform: translateY(-4px); border-color: var(--line-2); }
.pr-gain {
align-self: flex-start;
font-family: "Oswald", sans-serif;
font-weight: 700;
color: var(--lime);
background: rgba(194, 245, 66, .1);
border: 1px solid rgba(194, 245, 66, .25);
padding: .3rem .7rem;
border-radius: var(--r-sm);
font-size: .9rem;
}
.quote blockquote { margin: 0; font-size: .98rem; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.avatar {
width: 42px; height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 700;
font-size: .8rem;
color: #10130a;
background: hsl(var(--h, 82), 70%, 55%);
flex-shrink: 0;
}
.quote figcaption strong { display: block; font-size: .92rem; }
.quote figcaption em { font-style: normal; color: var(--muted); font-size: .8rem; }
/* ---- join ---- */
.join-card {
background: linear-gradient(150deg, var(--surface-2), var(--surface));
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(1.6rem, 5vw, 3rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 5vw, 3rem);
align-items: start;
position: relative;
overflow: hidden;
}
.join-card::before {
content: "";
position: absolute;
top: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(194, 245, 66, .22), transparent 70%);
}
.join-copy h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .6rem 0 .8rem; }
.join-copy p { color: var(--muted); }
.join-perks { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.join-perks li { position: relative; padding-left: 1.6rem; font-size: .9rem; }
.join-perks li::before {
content: "▲"; position: absolute; left: 0; color: var(--lime); font-size: .75rem; top: .18rem;
}
.join-form { display: grid; gap: .35rem; position: relative; z-index: 1; }
.join-form label {
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-top: .7rem;
}
.join-form input,
.join-form select {
width: 100%;
padding: .8rem .9rem;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--ink);
font-family: "Inter", sans-serif;
font-size: .95rem;
transition: border-color .2s, box-shadow .2s;
}
.join-form input:focus,
.join-form select:focus {
outline: none;
border-color: var(--lime);
box-shadow: 0 0 0 3px rgba(194, 245, 66, .18);
}
.join-form input.invalid { border-color: var(--orange); }
.field-error {
color: var(--orange);
font-size: .78rem;
min-height: 1rem;
font-weight: 600;
}
.join-form .btn { margin-top: 1rem; }
.form-note { font-size: .76rem; color: var(--muted); text-align: center; margin: .6rem 0 0; }
/* ---- footer ---- */
.footer {
max-width: 1120px;
margin: 0 auto;
padding: 2rem clamp(1rem, 4vw, 2rem) 3rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
color: var(--muted);
font-size: .85rem;
border-top: 1px solid var(--line);
}
.foot-links a { transition: color .2s; }
.foot-links a:hover { color: var(--lime); }
/* ---- toast ---- */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(140%);
background: var(--lime);
color: #10130a;
font-weight: 700;
padding: .85rem 1.3rem;
border-radius: var(--r-md);
box-shadow: 0 16px 40px -12px rgba(194, 245, 66, .55);
z-index: 90;
opacity: 0;
transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s;
max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* ---- responsive ---- */
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; }
.hero-art { max-width: 340px; }
.phases { grid-template-columns: 1fr; }
.phase-timeline { flex-direction: row; overflow-x: auto; }
.phase-node { min-width: 130px; }
.proof-rail { grid-template-columns: 1fr; }
.join-card { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.nav-links { display: none; }
.nav-cta { margin-left: auto; }
.hero h1 { font-size: 2.5rem; }
.stats { grid-template-columns: 1fr; gap: .8rem; }
.stat { display: flex; align-items: baseline; gap: .6rem; }
.stat dt { order: 2; }
.phase-meta { grid-template-columns: 1fr; gap: .7rem; }
.tiers { grid-template-columns: 1fr; }
.hero-actions .btn { flex: 1; }
.footer { flex-direction: column; text-align: center; }
.hero-tag { right: 0; }
}(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);
}
/* ---------- reveal on scroll ---------- */
var revealEls = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.14 }
);
revealEls.forEach(function (el) { io.observe(el); });
} else {
revealEls.forEach(function (el) { el.classList.add("in"); });
}
/* ---------- animated counters ---------- */
var counters = document.querySelectorAll(".count");
var counted = false;
function runCounters() {
if (counted) return;
counted = true;
counters.forEach(function (el) {
var target = parseFloat(el.getAttribute("data-target")) || 0;
var suffix = el.getAttribute("data-suffix") || "";
var start = null;
var dur = 1400;
function step(ts) {
if (!start) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * eased) + suffix;
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
});
}
if ("IntersectionObserver" in window && counters.length) {
var cio = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { runCounters(); cio.disconnect(); }
});
},
{ threshold: 0.4 }
);
cio.observe(counters[0]);
} else {
runCounters();
}
/* ---------- phase timeline ---------- */
var PHASES = [
{
badge: "Volume block",
title: "Base — Build the engine",
desc: "High volume, moderate intensity. We hammer technique and grow work capacity so the heavy weeks later actually stick.",
focus: "Hypertrophy & technique",
volume: "High · 18–22 sets",
intensity: "65–78% 1RM",
fill: 60
},
{
badge: "Intensity block",
title: "Peak — Express the strength",
desc: "Volume drops, load climbs. Singles, doubles and triples sharpen your top-end so a new PR feels routine on meet day.",
focus: "Maximal strength",
volume: "Moderate · 10–14 sets",
intensity: "82–95% 1RM",
fill: 92
},
{
badge: "Recovery block",
title: "Deload — Absorb the work",
desc: "Planned back-off week. Fatigue clears, joints recover, and adaptations catch up so the next block starts fresh.",
focus: "Recovery & readiness",
volume: "Low · 6–9 sets",
intensity: "50–65% 1RM",
fill: 35
}
];
var nodes = Array.prototype.slice.call(document.querySelectorAll(".phase-node"));
var panel = document.getElementById("phase-panel");
var els = {
badge: document.getElementById("phase-badge"),
title: document.getElementById("phase-title"),
desc: document.getElementById("phase-desc"),
focus: document.getElementById("phase-focus"),
volume: document.getElementById("phase-volume"),
intensity: document.getElementById("phase-intensity"),
fill: document.getElementById("phase-fill")
};
var activePhase = 0;
function setPhase(i, focusNode) {
activePhase = i;
var p = PHASES[i];
els.badge.textContent = p.badge;
els.title.textContent = p.title;
els.desc.textContent = p.desc;
els.focus.textContent = p.focus;
els.volume.textContent = p.volume;
els.intensity.textContent = p.intensity;
els.fill.style.width = p.fill + "%";
// re-trigger fade animation
var body = panel.querySelector(".phase-body");
if (body) { body.style.animation = "none"; void body.offsetWidth; body.style.animation = ""; }
nodes.forEach(function (n, idx) {
var on = idx === i;
n.classList.toggle("is-active", on);
n.setAttribute("aria-selected", on ? "true" : "false");
});
if (panel) panel.setAttribute("aria-labelledby", "tab-" + i);
if (focusNode) nodes[i].focus();
}
nodes.forEach(function (n) {
n.addEventListener("click", function () {
setPhase(parseInt(n.getAttribute("data-phase"), 10), false);
});
n.addEventListener("keydown", function (e) {
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
e.preventDefault();
setPhase((activePhase + 1) % nodes.length, true);
} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
e.preventDefault();
setPhase((activePhase - 1 + nodes.length) % nodes.length, true);
}
});
});
/* ---------- pricing toggle ---------- */
var billSwitch = document.getElementById("billSwitch");
var amounts = document.querySelectorAll(".amount");
var quarterly = false;
function updatePrices() {
amounts.forEach(function (el) {
var key = quarterly ? "data-quarterly" : "data-monthly";
var val = el.getAttribute(key);
// little count animation
var from = parseInt(el.textContent, 10) || 0;
var to = parseInt(val, 10);
var start = null;
function step(ts) {
if (!start) start = ts;
var p = Math.min((ts - start) / 350, 1);
el.textContent = Math.round(from + (to - from) * p);
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
});
}
if (billSwitch) {
billSwitch.addEventListener("click", function () {
quarterly = !quarterly;
billSwitch.setAttribute("aria-checked", quarterly ? "true" : "false");
updatePrices();
toast(quarterly ? "Quarterly billing — 15% off applied" : "Switched to monthly billing");
});
}
/* ---------- tier buttons ---------- */
document.querySelectorAll("[data-plan]").forEach(function (btn) {
btn.addEventListener("click", function () {
var plan = btn.getAttribute("data-plan");
toast("Nice pick — " + plan + " selected. Finish below.");
var join = document.getElementById("join");
if (join) join.scrollIntoView({ behavior: "smooth" });
});
});
/* ---------- join form ---------- */
var form = document.getElementById("joinForm");
var email = document.getElementById("jemail");
var err = document.getElementById("jerr");
var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function validateEmail() {
var ok = EMAIL_RE.test(email.value.trim());
if (!ok) {
email.classList.add("invalid");
email.setAttribute("aria-invalid", "true");
err.textContent = "Enter a valid email so Coach Reyes can reach you.";
} else {
email.classList.remove("invalid");
email.removeAttribute("aria-invalid");
err.textContent = "";
}
return ok;
}
if (email) {
email.addEventListener("input", function () {
if (email.classList.contains("invalid")) validateEmail();
});
}
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = form.querySelector("#jname");
if (!name.value.trim()) {
name.focus();
toast("Add your name first, lifter.");
return;
}
if (!validateEmail()) {
email.focus();
return;
}
var goal = form.querySelector("#jgoal").value;
form.reset();
toast("Audit request in — welcome to IRONBASE, " + name.value.trim().split(" ")[0] + "!");
console.log("Join submitted:", { name: name.value, goal: goal });
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>IRONBASE — Strength & Hypertrophy Coaching</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&family=Oswald:wght@500;600;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<header class="nav">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">▲</span>
IRON<span class="brand-accent">BASE</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#phases">Program</a>
<a href="#pricing">Coaching</a>
<a href="#proof">Results</a>
</nav>
<a class="btn btn-lime nav-cta" href="#join">Start Lifting</a>
</header>
<main id="top">
<!-- HERO -->
<section class="hero reveal">
<div class="hero-copy">
<span class="eyebrow"><span class="dot"></span> Now coaching 12 lifters</span>
<h1>Get <span class="hl">brutally</span><br />strong. On purpose.</h1>
<p class="lede">
Data-driven powerlifting & hypertrophy programming built around your
leverages, your schedule, and your next personal record — not a
cookie-cutter template.
</p>
<div class="hero-actions">
<a class="btn btn-lime btn-lg" href="#join">Claim Your Slot</a>
<a class="btn btn-ghost btn-lg" href="#phases">See the Method</a>
</div>
<dl class="stats" aria-label="Coaching results">
<div class="stat">
<dt>Avg total added</dt>
<dd><span class="count" data-target="127" data-suffix="kg">0</span></dd>
</div>
<div class="stat">
<dd><span class="count" data-target="340" data-suffix="+">0</span></dd>
<dt>PRs logged in 2026</dt>
</div>
<div class="stat">
<dt>Athletes retained</dt>
<dd><span class="count" data-target="94" data-suffix="%">0</span></dd>
</div>
</dl>
</div>
<div class="hero-art" aria-hidden="true">
<div class="plate-stack">
<span class="plate p1">225</span>
<span class="plate p2">315</span>
<span class="plate p3">405</span>
<span class="plate p4 glow">495</span>
</div>
<div class="hero-tag">
<strong>New bar PR</strong>
<span>Deadlift · 227.5kg</span>
</div>
</div>
</section>
<!-- PHASES -->
<section class="section reveal" id="phases">
<div class="section-head">
<span class="kicker">The Method</span>
<h2>Periodized in three phases</h2>
<p>Every block has a job. Step through the timeline to see how we build,
express, and recover your strength.</p>
</div>
<div class="phases">
<div class="phase-timeline" role="tablist" aria-label="Training phases">
<button class="phase-node is-active" role="tab" aria-selected="true"
data-phase="0" id="tab-0" aria-controls="phase-panel">
<span class="phase-week">Wk 1–5</span>
<span class="phase-name">Base</span>
</button>
<button class="phase-node" role="tab" aria-selected="false"
data-phase="1" id="tab-1" aria-controls="phase-panel">
<span class="phase-week">Wk 6–9</span>
<span class="phase-name">Peak</span>
</button>
<button class="phase-node" role="tab" aria-selected="false"
data-phase="2" id="tab-2" aria-controls="phase-panel">
<span class="phase-week">Wk 10</span>
<span class="phase-name">Deload</span>
</button>
</div>
<div class="phase-panel" id="phase-panel" role="tabpanel"
aria-labelledby="tab-0" tabindex="0">
<div class="phase-body">
<span class="badge badge-orange" id="phase-badge">Volume block</span>
<h3 id="phase-title">Base — Build the engine</h3>
<p id="phase-desc">
High volume, moderate intensity. We hammer technique and grow
work capacity so the heavy weeks later actually stick.
</p>
<div class="phase-meta">
<div>
<span class="meta-label">Focus</span>
<span class="meta-value" id="phase-focus">Hypertrophy & technique</span>
</div>
<div>
<span class="meta-label">Weekly volume</span>
<span class="meta-value" id="phase-volume">High · 18–22 sets</span>
</div>
<div>
<span class="meta-label">Intensity</span>
<span class="meta-value" id="phase-intensity">65–78% 1RM</span>
</div>
</div>
<div class="intensity-bar" aria-hidden="true">
<div class="intensity-fill" id="phase-fill" style="width:60%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section reveal" id="pricing">
<div class="section-head">
<span class="kicker">Coaching Tiers</span>
<h2>Pick your level of grind</h2>
<div class="billing-toggle" role="group" aria-label="Billing period">
<span class="toggle-label">Monthly</span>
<button class="switch" id="billSwitch" role="switch"
aria-checked="false" aria-label="Toggle quarterly billing">
<span class="switch-knob"></span>
</button>
<span class="toggle-label">Quarterly <em class="save-tag">save 15%</em></span>
</div>
</div>
<div class="tiers">
<article class="tier">
<h3>Programmed</h3>
<p class="tier-sub">Structured training, self-driven.</p>
<p class="price">
<span class="currency">$</span><span class="amount" data-monthly="89"
data-quarterly="76">89</span><span class="per">/mo</span>
</p>
<ul class="features">
<li>Custom 10-week block</li>
<li>Auto-regulated loading</li>
<li>Exercise video library</li>
<li>Weekly check-in form</li>
</ul>
<button class="btn btn-ghost btn-block" data-plan="Programmed">Choose Programmed</button>
</article>
<article class="tier tier-featured">
<span class="ribbon">Most picked</span>
<h3>Coached 1:1</h3>
<p class="tier-sub">Full accountability, hands-on.</p>
<p class="price">
<span class="currency">$</span><span class="amount" data-monthly="179"
data-quarterly="152">179</span><span class="per">/mo</span>
</p>
<ul class="features">
<li>Everything in Programmed</li>
<li>Weekly video technique review</li>
<li>Direct messaging with Coach Reyes</li>
<li>PR meet-day peaking plan</li>
<li>Nutrition & recovery targets</li>
</ul>
<button class="btn btn-lime btn-block" data-plan="Coached 1:1">Choose Coached</button>
</article>
</div>
</section>
<!-- PROOF -->
<section class="section reveal" id="proof">
<div class="section-head">
<span class="kicker">The Receipts</span>
<h2>PRs, not promises</h2>
</div>
<div class="proof-rail">
<figure class="quote">
<span class="pr-gain">+42.5kg total</span>
<blockquote>Two meets in, three national records. Reyes taught me to
trust the deload instead of fearing it.</blockquote>
<figcaption>
<span class="avatar" style="--h:82">MG</span>
<span><strong>Marcus Ogundele</strong><em>83kg · Powerlifting</em></span>
</figcaption>
</figure>
<figure class="quote">
<span class="pr-gain">+18kg squat</span>
<blockquote>I finally understand fatigue management. My legs grew and my
back stopped hating Mondays.</blockquote>
<figcaption>
<span class="avatar" style="--h:150">LN</span>
<span><strong>Lena Ferreira</strong><em>Hypertrophy · 14 months</em></span>
</figcaption>
</figure>
<figure class="quote">
<span class="pr-gain">400lb club</span>
<blockquote>Pulled 405 at 40 years old. The programming was ruthless but
never reckless.</blockquote>
<figcaption>
<span class="avatar" style="--h:24">DT</span>
<span><strong>Devon Tanaka</strong><em>Masters · Raw</em></span>
</figcaption>
</figure>
</div>
</section>
<!-- JOIN -->
<section class="section join-section reveal" id="join">
<div class="join-card">
<div class="join-copy">
<span class="kicker">2 slots open</span>
<h2>Ready to add plates?</h2>
<p>Drop your email and Coach Reyes reviews your lifts within 48 hours.
No bots, no funnels — just a plan.</p>
<ul class="join-perks">
<li>Free training audit</li>
<li>No lock-in contract</li>
<li>Cancel anytime</li>
</ul>
</div>
<form class="join-form" id="joinForm" novalidate>
<label for="jname">Name</label>
<input id="jname" name="name" type="text" autocomplete="name"
placeholder="Alex Morgan" required />
<label for="jemail">Email</label>
<input id="jemail" name="email" type="email" autocomplete="email"
placeholder="[email protected]" required aria-describedby="jerr" />
<span class="field-error" id="jerr" role="alert"></span>
<label for="jgoal">Primary goal</label>
<select id="jgoal" name="goal">
<option>Total a bigger powerlifting number</option>
<option>Build muscle / hypertrophy</option>
<option>Peak for a meet</option>
<option>Break a specific PR</option>
</select>
<button class="btn btn-lime btn-block btn-lg" type="submit">Send My Audit Request</button>
<p class="form-note">We reply within 48h. Your data stays private.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<span>© 2026 IRONBASE Strength Co. — Fictional demo.</span>
<div class="foot-links">
<a href="#top">Back to top ↑</a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>A gritty, high-energy landing page for a powerlifting and hypertrophy coach. The hero pairs a bold uppercase headline with three animated stat counters that count up to real PR-flavored numbers when the page loads, plus a glowing lime CTA that scrolls to the join form. Below it, a periodization section lays out three training phases — Base, Peak, and Deload — as an interactive timeline; clicking a phase (or using the arrow keys) swaps the detail panel with its focus, weekly volume, and intensity band.
The pricing section offers two coaching tiers with a monthly/quarterly billing toggle that live-updates the displayed price and highlights the savings. A testimonial rail shows fictional lifters with their headline PR gain, and the final join form validates the email inline before firing a celebratory toast. Everything runs on vanilla JS: an IntersectionObserver reveals sections on scroll, the counters animate with requestAnimationFrame, and a small toast helper confirms every action.
The palette is the collection’s energetic dark theme — near-black surfaces, electric-lime accents that glow on hover, and an orange secondary for badges and highlights. Controls are keyboard-usable with visible focus rings, contrast meets WCAG AA, and the layout collapses cleanly to a single column under 520px.