Сторінки Складна

Fitness Brand

High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.

Відкрити в Lab

gsap scrolltrigger lenis barlow-condensed

Цілі: JS HTML

Код

/* ═══════════════════════════════════════════════════════
   IRONFORM — Brutalist Bold Style
   Palette: Pure Black, Neon Yellow, White, Concrete Gray
   Fonts: Barlow Condensed (display), Barlow (body)
   Feel: Raw, aggressive, no-nonsense fitness brand
═══════════════════════════════════════════════════════ */

:root {
  --black: #0a0a0a;
  --black-mid: #151515;
  --concrete: #1e1e1e;
  --gray: #2a2a2a;
  --gray-mid: #444;
  --gray-light: #888;
  --white: #f5f5f5;
  --yellow: #f0e000;
  --yellow-d: #c8bb00;
  --yellow-dim: rgba(240, 224, 0, 0.12);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3rem;
  background: var(--black);
  border-bottom: 3px solid var(--yellow);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--white);
}

.nav-logo span {
  color: var(--yellow);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 3rem;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--yellow);
}

.nav-cta {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--black);
  background: var(--yellow);
  text-decoration: none;
  padding: 0.6rem 1.5rem;
  border: none;
  transition: background 0.15s ease, transform 0.15s ease;
  display: inline-block;
}

.nav-cta:hover {
  background: var(--yellow-d);
  transform: translateY(-1px);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8rem 4rem 6rem;
  overflow: hidden;
  background: var(--black);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-stripe {
  position: absolute;
  background: var(--yellow);
  opacity: 0.04;
}

.hero-stripe--1 {
  width: 3px;
  top: 0;
  bottom: 0;
  right: 28%;
}

.hero-stripe--2 {
  height: 3px;
  left: 0;
  right: 0;
  bottom: 30%;
  opacity: 0.03;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-tag {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 2rem;
  border-left: 3px solid var(--yellow);
  padding-left: 1rem;
}

.hero-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
  line-height: 0.92;
}

.hero-line {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -3px;
  color: var(--white);
  display: block;
}

.hero-line--yellow {
  color: var(--yellow);
}

.hero-line--outline {
  color: transparent;
  -webkit-text-stroke: 3px var(--white);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gray-light);
  max-width: 500px;
  margin-bottom: 3rem;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-yellow {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.1rem 2.5rem;
  background: var(--yellow);
  color: var(--black);
  border: none;
  display: inline-block;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-yellow:hover {
  background: var(--yellow-d);
  transform: translateY(-2px);
}

.btn-border-white {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.1rem 2.5rem;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--gray-mid);
  display: inline-block;
  transition: all 0.15s ease;
}

.btn-border-white:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* Ticker */
.hero-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--yellow);
  overflow: hidden;
  padding: 0.7rem 0;
}

.ticker-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: ticker 25s linear infinite;
  width: max-content;
}

.ticker-track span {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--black);
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ── Stats Bar ── */
.stats-bar {
  display: flex;
  align-items: stretch;
  background: var(--concrete);
  border-bottom: 3px solid var(--yellow);
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 2rem;
  gap: 0.5rem;
}

.stat-divider {
  width: 1px;
  background: var(--gray);
  align-self: stretch;
}

.stat-big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.stat-sub {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-light);
}

/* ── Programs ── */
.programs-section {
  padding: 7rem 4rem;
  background: var(--black-mid);
}

.programs-header {
  margin-bottom: 4rem;
  max-width: 600px;
}

.section-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1rem;
  border-left: 3px solid var(--yellow);
  padding-left: 1rem;
}

.programs-header h2 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.programs-header h2 em {
  font-style: italic;
  color: var(--yellow);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--gray);
}

.program-card {
  padding: 3rem 2.5rem;
  border-right: 2px solid var(--gray);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.2s ease;
}

.program-card:last-child {
  border-right: none;
}

.program-card--dark {
  background: var(--concrete);
}
.program-card--yellow {
  background: var(--yellow);
}

.program-card--yellow h3,
.program-card--yellow p,
.program-card--yellow .program-meta span {
  color: var(--black) !important;
}

.program-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: -2px;
}

.program-card--yellow .program-num {
  color: rgba(0, 0, 0, 0.1);
}

.program-card h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--white);
}

.program-card p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-light);
  line-height: 1.7;
  flex: 1;
}

.program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.program-meta span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-light);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--gray);
}

.program-card--yellow .program-meta span {
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-yellow-sm {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  background: var(--yellow);
  color: var(--black);
  display: inline-block;
  transition: all 0.15s ease;
  align-self: flex-start;
}

.btn-yellow-sm:hover {
  background: var(--yellow-d);
}

.btn-black-sm {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  background: var(--black);
  color: var(--yellow);
  border: 2px solid var(--black);
  display: inline-block;
  transition: all 0.15s ease;
  align-self: flex-start;
}

.btn-black-sm:hover {
  background: var(--black-mid);
}

/* ── Transform ── */
.transform-section {
  padding: 7rem 4rem;
  background: var(--black);
  border-top: 3px solid var(--yellow);
  border-bottom: 3px solid var(--yellow);
}

.transform-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.transform-text .section-tag {
  margin-bottom: 1.5rem;
}

.transform-text h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.transform-text h2 em {
  font-style: italic;
  color: var(--yellow);
}

.result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.result-list li {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-light);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  line-height: 1.5;
}

.check {
  color: var(--yellow);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.transform-visual {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.tv-box {
  flex: 1;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  border: 2px solid var(--gray);
  position: relative;
  overflow: hidden;
}

.tv-box--before {
  background: linear-gradient(160deg, #1a1a1a 0%, #222 100%);
}

.tv-box--after {
  background: linear-gradient(160deg, #1a1a00 0%, #2a2a00 100%);
  border-color: var(--yellow);
}

.tv-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-light);
}

.tv-box--after .tv-label {
  color: var(--yellow);
}

.tv-week {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-mid);
  align-self: flex-end;
}

.tv-box--after .tv-week {
  color: var(--yellow);
}

.tv-arrow {
  font-size: 2.5rem;
  color: var(--yellow);
  font-weight: 900;
  flex-shrink: 0;
}

/* ── Testimonials ── */
.testimonials-section {
  padding: 7rem 4rem;
  background: var(--black-mid);
}

.testi-header {
  margin-bottom: 4rem;
}

.testi-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-top: 1rem;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--gray);
}

.testi-card {
  background: var(--concrete);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.testi-card--yellow {
  background: var(--yellow);
}

.testi-quote {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gray-light);
  flex: 1;
}

.testi-card--yellow .testi-quote {
  color: var(--black);
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testi-avatar {
  width: 44px;
  height: 44px;
  background: var(--gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--white);
  flex-shrink: 0;
}

.testi-card--yellow .testi-avatar {
  background: var(--black);
}

.testi-person > div {
  flex: 1;
}

.testi-person strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
}

.testi-card--yellow .testi-person strong {
  color: var(--black);
}

.testi-person span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--gray-light);
}

.testi-card--yellow .testi-person span {
  color: rgba(0, 0, 0, 0.5);
}

.testi-stars {
  color: var(--yellow);
  font-size: 0.8rem;
}

.testi-card--yellow .testi-stars {
  color: var(--black);
}

/* ── Join ── */
.join-section {
  padding: 8rem 4rem;
  background: var(--yellow);
  text-align: center;
}

.join-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -4px;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 1.5rem;
}

.join-inner h2 em {
  font-style: italic;
  color: var(--black-mid);
}

.join-inner p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 3rem;
}

.btn-giant {
  font-size: 1.3rem !important;
  padding: 1.5rem 4rem !important;
  background: var(--black) !important;
  color: var(--yellow) !important;
  border: none !important;
}

.btn-giant:hover {
  background: var(--black-mid) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .programs-grid {
    grid-template-columns: 1fr;
  }
  .program-card {
    border-right: none;
    border-bottom: 2px solid var(--gray);
  }
  .program-card:last-child {
    border-bottom: none;
  }
  .transform-inner {
    grid-template-columns: 1fr;
  }
  .transform-visual {
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 1rem 1.5rem;
  }
  .nav-links {
    display: none;
  }
  .hero {
    padding: 6rem 2rem 4rem;
  }
  .hero-line {
    font-size: clamp(3.5rem, 15vw, 7rem);
  }
  .programs-section {
    padding: 5rem 2rem;
  }
  .stats-bar {
    flex-wrap: wrap;
  }
  .stat-divider {
    display: none;
  }
  .stat-item {
    width: 50%;
    border-bottom: 1px solid var(--gray);
  }
  .testi-grid {
    grid-template-columns: 1fr;
  }
  .transform-section,
  .testimonials-section {
    padding: 5rem 2rem;
  }
  .join-section {
    padding: 6rem 2rem;
  }
  .join-inner h2 {
    font-size: clamp(3rem, 12vw, 7rem);
  }
}

html.reduced-motion .ticker-track {
  animation: none !important;
}
html.reduced-motion * {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import Lenis from "lenis";

gsap.registerPlugin(ScrollTrigger, SplitText);

initDemoShell({
  title: "Fitness Brand — Brutalist",
  category: "pages",
  tech: ["gsap", "splittext", "scrolltrigger", "lenis"],
});

const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");

// ── Hero entrance — slammed in hard ─────────────────────
if (!reduced) {
  gsap.set(".hero-tag", { opacity: 0, x: -30 });
  const heroLines = document.querySelectorAll(".hero-line");
  heroLines.forEach((line, i) => gsap.set(line, { opacity: 0, y: 80 + i * 20, skewY: 5 }));
  gsap.set(".hero-sub", { opacity: 0, y: 20 });
  gsap.set(".hero-ctas", { opacity: 0, y: 20 });

  const tl = gsap.timeline({ defaults: { ease: "expo.out" } });
  tl.to(".hero-tag", { opacity: 1, x: 0, duration: 0.6, delay: 0.3 })
    .to(heroLines, { opacity: 1, y: 0, skewY: 0, duration: 0.7, stagger: 0.07 }, "-=0.3")
    .to(".hero-sub", { opacity: 1, y: 0, duration: 0.6 }, "-=0.3")
    .to(".hero-ctas", { opacity: 1, y: 0, duration: 0.5 }, "-=0.2");
}

// ── Stats Bar — scroll counters ──────────────────────────
document.querySelectorAll(".stat-big").forEach((el) => {
  const target = parseFloat(el.dataset.target);
  const suffix = el.dataset.suffix || "";

  if (!reduced) {
    ScrollTrigger.create({
      trigger: ".stats-bar",
      start: "top 80%",
      end: "top 20%",
      onUpdate: (self) => {
        const val = target * self.progress;
        el.textContent = (target % 1 !== 0 ? val.toFixed(0) : Math.round(val)) + suffix;
      },
    });

    gsap.set(el, { opacity: 0, y: 30 });
    gsap.to(el, {
      opacity: 1,
      y: 0,
      duration: 0.8,
      ease: "expo.out",
      scrollTrigger: {
        trigger: ".stats-bar",
        start: "top 80%",
        toggleActions: "play none none reverse",
      },
    });
  } else {
    el.textContent = target + suffix;
  }
});

// ── Programs — hard entrance ─────────────────────────────
if (!reduced) {
  const hSplit = new SplitText(".programs-header h2", { type: "lines" });
  gsap.set(hSplit.lines, { opacity: 0, y: 50 });
  gsap.to(hSplit.lines, {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: "expo.out",
    scrollTrigger: {
      trigger: ".programs-header",
      start: "top 70%",
      toggleActions: "play none none reverse",
    },
  });

  document.querySelectorAll(".program-card").forEach((card, i) => {
    gsap.set(card, { opacity: 0, y: 60 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: "expo.out",
      delay: i * 0.1,
      scrollTrigger: {
        trigger: ".programs-grid",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// ── Transform section ────────────────────────────────────
if (!reduced) {
  const tSplit = new SplitText(".transform-text h2", { type: "lines" });
  gsap.set(tSplit.lines, { opacity: 0, x: -40 });
  gsap.to(tSplit.lines, {
    opacity: 1,
    x: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: "expo.out",
    scrollTrigger: {
      trigger: ".transform-section",
      start: "top 65%",
      toggleActions: "play none none reverse",
    },
  });

  gsap.set(".result-list li", { opacity: 0, x: -20 });
  gsap.to(".result-list li", {
    opacity: 1,
    x: 0,
    duration: 0.5,
    stagger: 0.1,
    ease: "expo.out",
    scrollTrigger: {
      trigger: ".result-list",
      start: "top 75%",
      toggleActions: "play none none reverse",
    },
  });

  gsap.set([".tv-box--before", ".tv-arrow", ".tv-box--after"], { opacity: 0, scale: 0.85 });
  gsap.to([".tv-box--before", ".tv-arrow", ".tv-box--after"], {
    opacity: 1,
    scale: 1,
    duration: 0.7,
    stagger: 0.15,
    ease: "back.out(1.4)",
    scrollTrigger: {
      trigger: ".transform-visual",
      start: "top 75%",
      toggleActions: "play none none reverse",
    },
  });
}

// ── Testimonials ─────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll(".testi-card").forEach((card, i) => {
    gsap.set(card, { opacity: 0, y: 40 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      delay: i * 0.1,
      ease: "expo.out",
      scrollTrigger: {
        trigger: ".testi-grid",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// ── CTA join — big slam ──────────────────────────────────
if (!reduced) {
  const jSplit = new SplitText(".join-inner h2", { type: "lines" });
  gsap.set(jSplit.lines, { opacity: 0, y: 80 });
  gsap.to(jSplit.lines, {
    opacity: 1,
    y: 0,
    duration: 1,
    stagger: 0.1,
    ease: "expo.out",
    scrollTrigger: {
      trigger: ".join-section",
      start: "top 70%",
      toggleActions: "play none none reverse",
    },
  });

  gsap.set(".join-inner p, .btn-giant", { opacity: 0, y: 25 });
  gsap.to(".join-inner p, .btn-giant", {
    opacity: 1,
    y: 0,
    duration: 0.7,
    stagger: 0.15,
    ease: "expo.out",
    scrollTrigger: {
      trigger: ".join-section",
      start: "top 60%",
      toggleActions: "play none none reverse",
    },
  });
}

// ── Motion preference ────────────────────────────────────
window.addEventListener("motion-preference", (e) => {
  gsap.globalTimeline.paused(e.detail.reduced);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IRONFORM — Train Harder</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=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,700;1,900&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"https://esm.sh/[email protected]","gsap/ScrollTrigger":"https://esm.sh/[email protected]/ScrollTrigger","gsap/SplitText":"https://esm.sh/[email protected]/SplitText","gsap/Flip":"https://esm.sh/[email protected]/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/[email protected]/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/[email protected]/TextPlugin","gsap/all":"https://esm.sh/[email protected]/all","gsap/":"https://esm.sh/[email protected]/","lenis":"https://esm.sh/[email protected]/dist/lenis.mjs","three":"https://esm.sh/[email protected]","three/addons/":"https://esm.sh/[email protected]/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>

  <!-- Nav -->
  <nav class="nav">
    <div class="nav-logo">IRON<span>FORM</span></div>
    <ul class="nav-links">
      <li><a href="#programs">Programs</a></li>
      <li><a href="#stats">Results</a></li>
      <li><a href="#join">Join</a></li>
    </ul>
    <a href="#join" class="nav-cta">START NOW</a>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-bg" aria-hidden="true">
      <div class="hero-stripe hero-stripe--1"></div>
      <div class="hero-stripe hero-stripe--2"></div>
    </div>
    <div class="hero-content">
      <div class="hero-tag">EST. 2018 · THE GYM THAT GETS RESULTS</div>
      <h1 class="hero-title">
        <span class="hero-line">NO</span>
        <span class="hero-line hero-line--yellow">EXCUSES.</span>
        <span class="hero-line">JUST</span>
        <span class="hero-line hero-line--outline">RESULTS.</span>
      </h1>
      <p class="hero-sub">Elite strength and conditioning. 12-week transformation programs. Coaches who've been there.</p>
      <div class="hero-ctas">
        <a href="#join" class="btn-yellow">GET STARTED — FREE WEEK</a>
        <a href="#stats" class="btn-border-white">SEE THE RESULTS</a>
      </div>
    </div>
    <div class="hero-ticker" aria-hidden="true">
      <div class="ticker-track">
        <span>STRENGTH</span><span>·</span>
        <span>CONDITIONING</span><span>·</span>
        <span>ENDURANCE</span><span>·</span>
        <span>MOBILITY</span><span>·</span>
        <span>MINDSET</span><span>·</span>
        <span>STRENGTH</span><span>·</span>
        <span>CONDITIONING</span><span>·</span>
        <span>ENDURANCE</span><span>·</span>
        <span>MOBILITY</span><span>·</span>
        <span>MINDSET</span><span>·</span>
      </div>
    </div>
  </section>

  <!-- Stats Bar -->
  <section class="stats-bar" id="stats">
    <div class="stat-item">
      <span class="stat-big" data-target="4200">0</span>
      <span class="stat-sub">Members</span>
    </div>
    <div class="stat-divider" aria-hidden="true"></div>
    <div class="stat-item">
      <span class="stat-big" data-target="94" data-suffix="%">0</span>
      <span class="stat-sub">Hit Their Goal</span>
    </div>
    <div class="stat-divider" aria-hidden="true"></div>
    <div class="stat-item">
      <span class="stat-big" data-target="12" data-suffix=" WKS">0</span>
      <span class="stat-sub">Transform</span>
    </div>
    <div class="stat-divider" aria-hidden="true"></div>
    <div class="stat-item">
      <span class="stat-big" data-target="5">0</span>
      <span class="stat-sub">Locations</span>
    </div>
  </section>

  <!-- Programs -->
  <section class="programs-section" id="programs">
    <div class="programs-header">
      <span class="section-tag">WHAT WE OFFER</span>
      <h2>Pick your<br><em>weapon.</em></h2>
    </div>
    <div class="programs-grid">
      <div class="program-card program-card--dark">
        <div class="program-num">01</div>
        <h3>POWERLIFTING</h3>
        <p>Squat. Bench. Deadlift. We build absolute strength from the ground up. 3x per week, 12 weeks.</p>
        <div class="program-meta">
          <span>3×/week</span>
          <span>All levels</span>
          <span>From €89/mo</span>
        </div>
        <a href="#join" class="btn-yellow-sm">JOIN →</a>
      </div>
      <div class="program-card program-card--yellow">
        <div class="program-num">02</div>
        <h3>HIIT BURN</h3>
        <p>High-intensity intervals. Maximum calorie burn. Minimum time wasted. 45 min sessions.</p>
        <div class="program-meta">
          <span>5×/week</span>
          <span>Intermediate</span>
          <span>From €79/mo</span>
        </div>
        <a href="#join" class="btn-black-sm">JOIN →</a>
      </div>
      <div class="program-card program-card--dark">
        <div class="program-num">03</div>
        <h3>ATHLETE BUILD</h3>
        <p>Sport-specific conditioning for competitive athletes. Periodized programming. Peak performance.</p>
        <div class="program-meta">
          <span>4×/week</span>
          <span>Advanced</span>
          <span>From €119/mo</span>
        </div>
        <a href="#join" class="btn-yellow-sm">JOIN →</a>
      </div>
    </div>
  </section>

  <!-- Transformation -->
  <section class="transform-section">
    <div class="transform-inner">
      <div class="transform-text">
        <span class="section-tag">12-WEEK PROGRAM</span>
        <h2>The results <br>speak for <br><em>themselves.</em></h2>
        <ul class="result-list">
          <li><span class="check">✓</span> Average 8.2kg fat loss in 12 weeks</li>
          <li><span class="check">✓</span> 20% increase in functional strength</li>
          <li><span class="check">✓</span> Improved VO2 max by 15%</li>
          <li><span class="check">✓</span> Personal coaching + nutrition plan</li>
        </ul>
        <a href="#join" class="btn-yellow">START YOUR 12 WEEKS</a>
      </div>
      <div class="transform-visual" aria-hidden="true">
        <div class="tv-box tv-box--before">
          <div class="tv-label">BEFORE</div>
          <div class="tv-week">Week 1</div>
        </div>
        <div class="tv-arrow">→</div>
        <div class="tv-box tv-box--after">
          <div class="tv-label">AFTER</div>
          <div class="tv-week">Week 12</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="testimonials-section">
    <div class="testi-header">
      <span class="section-tag">REAL PEOPLE · REAL RESULTS</span>
      <h2>They did it.<br>Now it's your turn.</h2>
    </div>
    <div class="testi-grid">
      <div class="testi-card">
        <div class="testi-quote">"Lost 14kg in 12 weeks. I've tried everything. IRONFORM is the only thing that worked."</div>
        <div class="testi-person">
          <div class="testi-avatar" style="--hue: 30">MK</div>
          <div>
            <strong>Marcus K.</strong>
            <span>Member since 2023</span>
          </div>
          <div class="testi-stars">★★★★★</div>
        </div>
      </div>
      <div class="testi-card testi-card--yellow">
        <div class="testi-quote">"Hit a 180kg deadlift PR after the powerlifting program. Coaches actually know what they're doing."</div>
        <div class="testi-person">
          <div class="testi-avatar" style="--hue: 200">SL</div>
          <div>
            <strong>Sofia L.</strong>
            <span>Member since 2022</span>
          </div>
          <div class="testi-stars">★★★★★</div>
        </div>
      </div>
      <div class="testi-card">
        <div class="testi-quote">"Competed in my first triathlon after 6 months. The conditioning program is on another level."</div>
        <div class="testi-person">
          <div class="testi-avatar" style="--hue: 100">DV</div>
          <div>
            <strong>David V.</strong>
            <span>Member since 2024</span>
          </div>
          <div class="testi-stars">★★★★★</div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Join -->
  <section class="join-section" id="join">
    <div class="join-inner">
      <h2>STOP <em>WAITING.</em><br>START TODAY.</h2>
      <p>First week free. No contracts. Cancel anytime.</p>
      <a href="#" class="btn-yellow btn-giant">CLAIM FREE WEEK →</a>
    </div>
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>

Fitness Brand

High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.

Source

Repository: libs-genclaude
Original demo id: 45-fitness-brand

Notes

High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.