/* ========================================================================== Content Forge — Homepage Scale system: 1rem = 10px of the 1920px Figma design (html font = 100vw/192) ========================================================================== */ :root { --black: #111; --ink: #1e1d1b; --cream: #efefd1; --lime: #aef640; --purple: #581ee1; --red: #fd4438; } * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Hide horizontal overflow (off-screen carousel cards, full-bleed layers) on the root scroller only — this keeps window scrolling and position:sticky working, unlike overflow on or `clip` on a single axis. */ overflow-x: hidden; /* 1rem = 10px of the 1920px design, but capped at 10px so the layout renders at its true size (never zooms up) on screens wider than 1920. */ font-size: min(0.520833vw, 10px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--black); color: var(--cream); font-family: 'Inter', system-ui, sans-serif; } /* Content canvas: fills width up to the 1920px design width, then centers. */ .stage { position: relative; width: 100%; max-width: 192rem; margin-inline: auto; } img { display: block; } a { text-decoration: none; color: inherit; } button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; } .u-hide { display: none !important; } /* ---------- zones ---------- */ .zone { position: relative; } .zone--dark { background: var(--black); } .zone--cream { background: var(--cream); } .zone--purple { background: var(--purple); } /* Full-bleed background colour: paints edge-to-edge even when the capped content canvas is narrower than the viewport (screens wider than 1920). */ .zone::before, .footer::before { content: ''; position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: inherit; z-index: -1; } /* sticky parallax grid background */ .zone__bg { position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; pointer-events: none; z-index: 0; overflow: hidden; } .zone__bg-img { position: sticky; top: 0; height: 108rem; overflow: hidden; } .zone__bg-img video { width: 100%; height: 100%; object-fit: cover; } /* ---------- shared type ---------- */ .eyebrow { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: 0.2rem; text-transform: uppercase; color: var(--cream); line-height: 1.4; } .eyebrow--center { text-align: center; } .outline-text { color: var(--purple); -webkit-text-stroke: 0.2rem var(--cream); text-stroke: 0.2rem var(--cream); paint-order: stroke fill; } /* ---------- CTA pill ---------- */ .cta { position: relative; display: block; width: 21.4rem; height: 6.34rem; border-radius: 8.63rem; background: var(--lime); overflow: hidden; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.08rem; text-transform: uppercase; z-index: 5; } .cta::before { content: ''; position: absolute; inset: 0; border-radius: 8.63rem; background: var(--purple); transform: translateY(101%); transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .cta--dark-hover::before { background: var(--ink); } .cta__a, .cta__b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .cta__a { color: #000; } .cta__b { color: var(--lime); transform: translateY(101%); } .cta:hover::before { transform: translateY(0); } .cta:hover .cta__a { transform: translateY(-101%); } .cta:hover .cta__b { transform: translateY(0); } /* ---------- header ---------- */ .header { position: absolute; top: 4rem; left: 6rem; right: 6rem; display: flex; align-items: center; justify-content: space-between; z-index: 20; } .header__logo img { width: 18rem; height: auto; } .nav { display: flex; gap: 3.5rem; } .nav__link { position: relative; display: block; height: 2rem; overflow: hidden; font-size: 1.4rem; letter-spacing: 0.14rem; text-transform: uppercase; line-height: 1.4; } .nav__a, .nav__b { display: block; height: 2rem; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .nav__a { color: var(--cream); font-weight: 500; } .nav__b { color: var(--lime); font-weight: 800; } .nav__link:hover .nav__a { transform: translateY(-100%); } .nav__link:hover .nav__b { transform: translateY(-100%); } /* ---------- hero ---------- */ .hero { position: relative; height: 108rem; z-index: 1; } .hero__eyebrow { position: absolute; left: 32rem; top: 19.9rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 2.2rem; letter-spacing: 0.22rem; text-transform: uppercase; line-height: 1.4; } .hero__title { font-weight: 700; } .hero__word { position: absolute; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20.7rem; line-height: 0.9; letter-spacing: -1.242rem; text-transform: uppercase; color: #fff; white-space: nowrap; z-index: 2; } .hero__word--1 { left: 30.8rem; top: 24.3rem; } .hero__word--2 { left: 92.1rem; top: 43.1rem; } .hero__word--3 { left: 30.5rem; top: 61.6rem; } .hero__cube { position: absolute; left: 64.6rem; top: 35.5rem; width: 32.2rem; height: 32.3rem; object-fit: contain; object-position: bottom; z-index: 3; pointer-events: none; } .hero__sub { position: absolute; left: 32rem; top: 82.6rem; width: 29.8rem; font-size: 1.8rem; line-height: 1.4; z-index: 4; } .hero__cta { position: absolute; left: 137.3rem; top: 82.6rem; } .hero__card { position: absolute; z-index: 2; border-radius: 1rem; overflow: hidden; } .hero__card video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__card--right { left: 165.6rem; top: 18.1rem; width: 15.7rem; height: 28rem; transform: rotate(7.34deg); } .hero__card--left { left: 15.9rem; top: 53.2rem; width: 13.8rem; height: 24.6rem; transform: rotate(-8.73deg); } /* stat bubble badges */ .badge { position: absolute; padding: 1.58rem; border-radius: 1.05rem; background: var(--purple); color: var(--cream); font-family: 'Unbounded', sans-serif; text-transform: uppercase; line-height: 0.9; z-index: 6; } .badge__num { font-weight: 700; font-size: 2.6rem; letter-spacing: -0.156rem; } .badge__label { font-weight: 400; font-size: 1.08rem; margin-top: 0.6rem; } .badge--cream { background: var(--cream); color: var(--purple); } .badge__dot { position: absolute; width: 1.6rem; } .badge__dot--lg { right: -1rem; bottom: -1rem; } .badge__dot--sm { width: 1.1rem; right: -2.4rem; bottom: -2.4rem; } .badge__dot--lg-left { right: auto; left: 2.2rem; bottom: -1.8rem; } .badge__dot--sm-left { right: auto; left: 1rem; bottom: -3.2rem; } .hero__badge-250 { left: 152.3rem; top: 22.8rem; min-width: 12.66rem; } .hero__badge-50 { left: 27.3rem; top: 53.4rem; min-width: 10.66rem; } /* emoji stickers */ .sticker { position: absolute; z-index: 6; pointer-events: none; } .sticker__trace { position: absolute; inset: -7%; width: 114%; height: 114%; } .sticker__emoji { position: relative; width: 100%; height: 100%; } .hero__skull { left: 173rem; top: 44.2rem; width: 6rem; height: 6rem; transform: rotate(-17.59deg); } .hero__crazy { left: 13.5rem; top: 72rem; width: 6.5rem; height: 6.5rem; transform: rotate(-17.4deg); } /* ---------- fractional CCO ---------- */ .cco { position: relative; height: 87rem; z-index: 1; } .cco__left { position: absolute; left: 24rem; top: 16.8rem; width: 52rem; } .cco__title { margin-top: 2.4rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 6rem; line-height: 1; letter-spacing: -0.36rem; text-transform: uppercase; color: var(--cream); } .cco__stack { position: absolute; left: 50%; top: 12.8rem; width: 0; height: 60.1rem; } .cco__stack-card { position: absolute; left: -16.9rem; top: 0; width: 33.8rem; height: 60.1rem; border-radius: 1rem; overflow: hidden; } .cco__stack-card video { width: 100%; height: 100%; object-fit: cover; display: block; } .cco__stack-card--a { transform: rotate(20.04deg); filter: brightness(1.25) saturate(0.8); } .cco__stack-card--b { transform: rotate(7.78deg); filter: brightness(1.12) saturate(0.9); } .cco__right { position: absolute; left: 125rem; top: 46.9rem; width: 43rem; } .cco__stats { display: flex; flex-direction: column; gap: 2rem; } .stat { display: flex; align-items: center; gap: 1.45rem; } .stat__num { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 6rem; line-height: 1; letter-spacing: -0.36rem; text-transform: uppercase; } .stat__label { font-size: 1.8rem; line-height: 1.4; } .cco__sub { margin-top: 2.6rem; font-size: 1.8rem; line-height: 1.4; } /* ---------- trusted by / logo wall ---------- */ .trusted { position: relative; z-index: 1; } .trusted__heading { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: 0.2rem; text-transform: uppercase; text-align: center; color: #fff; line-height: 1.4; } .logo-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(6, 1fr); } .logo-cell { height: 27.65rem; /* exact 1px, single-direction borders: no sub-pixel rounding, no overlap, so every grid line renders at identical brightness */ border: 0 solid rgba(255, 255, 255, 0.13); border-right-width: 1px; border-bottom-width: 1px; display: flex; align-items: center; justify-content: center; gap: 1rem; } .logo-cell:nth-child(6n+1) { border-left-width: 1px; } .logo-cell:nth-child(-n+6) { border-top-width: 1px; } .logo-cell img { max-width: 70%; height: auto; } .logo-cell--full { border: none; } .logo-cell--full img { width: 100%; height: 100%; max-width: none; object-fit: cover; } /* ---------- case studies marquee title ---------- */ .cs-title { position: relative; padding-top: 12rem; height: 53.1rem; z-index: 1; overflow: hidden; font-family: 'Unbounded', sans-serif; text-transform: uppercase; color: var(--cream); text-align: center; } .cs-title__line { font-size: 22.68rem; line-height: 0.9; letter-spacing: -1.36rem; white-space: nowrap; } .cs-title__line--1 { font-weight: 700; margin-top: -3.4rem; } .cs-title__clip { overflow: hidden; position: relative; } .cs-title__clip--2 { height: 10rem; margin-top: 2rem; } .cs-title__line--2 { font-weight: 500; font-size: 23.18rem; letter-spacing: -1.39rem; margin-top: -1.8rem; } .cs-title__clip--3 { height: 7.6rem; margin-top: 2rem; } .cs-title__line--3 { font-weight: 300; font-size: 24.24rem; letter-spacing: -1.455rem; margin-top: -1.9rem; } /* ---------- cream zone: tabs + carousel ---------- */ .zone--cream { height: 155.8rem; color: var(--ink); } .tabs { position: sticky; top: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 6rem; background: var(--cream); border-bottom: 0.1rem solid #000; z-index: 30; } .tab { position: relative; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 1.5rem; text-transform: uppercase; color: var(--ink); border-right: 0.1rem solid var(--ink); transition: background 0.25s, color 0.25s; } .tab:last-child { border-right: none; } .tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.5rem; background: #000; transform: scaleY(0); transform-origin: bottom; transition: transform 0.2s; } .tab:hover::after { transform: scaleY(1); } .tab.is-active { background: var(--ink); color: var(--cream); } .tab.is-active::after { transform: scaleY(0); } .carousel-heading { margin: 12.8rem auto 0; width: 64.5rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 6rem; line-height: 1; letter-spacing: -0.36rem; text-transform: uppercase; text-align: center; } .carousel-sub { margin: 2.2rem auto 0; width: 62.5rem; font-size: 2rem; line-height: 1.4; text-align: center; } .carousel { position: relative; margin-top: 3.7rem; height: 72rem; } .case-card { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 33.9rem; height: 60.3rem; border-radius: 1rem; overflow: hidden; z-index: 10; background: var(--ink); } .case-card__img, .case-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .case-card__video.is-hidden { display: none; } .case-card__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 25.6rem; opacity: 0.8; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 65%); } .case-card__logo { position: absolute; left: 50%; transform: translateX(-50%); top: 45.6rem; width: 19.1rem; } .case-card__play { position: absolute; left: 50%; top: 21rem; transform: translateX(-50%); width: 8.8rem; height: 8.8rem; display: flex; align-items: center; justify-content: center; border: 0.2rem solid var(--cream); background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(0.4rem); z-index: 2; transition: transform 0.25s, background 0.25s; } .case-card__play img { width: 2.6rem; } .case-card__play:hover { transform: translateX(-50%) scale(1.08); background: rgba(0, 0, 0, 0.45); } .case-card__logo-text { position: absolute; left: 50%; transform: translateX(-50%); top: 45.9rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 2.6rem; letter-spacing: -0.05rem; text-transform: uppercase; color: #fff; white-space: nowrap; z-index: 1; } .case-card__cta { position: absolute; left: 50%; transform: translateX(-50%); top: 52.4rem; width: 28.2rem; height: 5rem; display: flex; align-items: center; justify-content: center; border-radius: 8.63rem; background: var(--lime); color: #000; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.08rem; text-transform: uppercase; transition: transform 0.2s; } .case-card__cta:hover { transform: translateX(-50%) scale(1.04); } .carousel__arrow { position: absolute; top: 26.3rem; width: 6.3rem; height: 6.3rem; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; z-index: 11; transition: transform 0.2s, background 0.2s; } .carousel__arrow:hover { transform: scale(1.08); background: #000; } .carousel__arrow img { width: 1.7rem; } .carousel__arrow--prev { left: calc(50% - 26.8rem); transform: none; } .carousel__arrow--prev img { transform: rotate(-90deg); } .carousel__arrow--next { left: calc(50% + 20.5rem); } .carousel__arrow--next img { transform: rotate(90deg); } .carousel__side { position: absolute; top: 2rem; width: 33.9rem; height: 60.3rem; border-radius: 1rem; overflow: hidden; opacity: 0.15; z-index: 2; } .carousel__side--left { left: calc(50% - 71.2rem); transform: rotate(-13deg); } .carousel__side--right { left: calc(50% + 37.3rem); transform: rotate(13deg); } .carousel__side-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .carousel__side-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 25.6rem; opacity: 0.8; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%); } .carousel__side-logo { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6.5rem; } .carousel__ghost { position: absolute; top: 8rem; width: 33.9rem; height: 60.3rem; object-fit: cover; border-radius: 1rem; opacity: 0.05; z-index: 1; } .carousel__ghost--far-left { left: calc(50% - 108rem); transform: rotate(-22deg); } .carousel__ghost--far-right { left: calc(50% + 74rem); transform: rotate(22deg); } /* stat badges around center card */ .badge--stat { display: flex; align-items: flex-start; gap: 0.6rem; } .badge__icon { width: 2.4rem; height: 2.4rem; } .carousel__badge-views, .carousel__badge-comments, .carousel__badge-likes { z-index: 12; } .carousel__badge-views { left: calc(50% - 30.2rem); top: 2rem; transform: rotate(-10.64deg); } .carousel__badge-comments { left: calc(50% + 14.7rem); top: 9.9rem; transform: rotate(15.14deg); } .carousel__badge-likes { left: calc(50% - 27.2rem); top: 51.1rem; transform: rotate(-17.15deg); } /* ---------- purple zone: everything ---------- */ .everything { position: relative; height: 106.1rem; z-index: 1; } .everything__line1 { position: absolute; left: 50%; transform: translateX(-50%); top: 12.4rem; display: flex; align-items: center; justify-content: center; gap: 2rem; white-space: nowrap; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 22.67rem; line-height: 0.9; letter-spacing: -1.36rem; text-transform: uppercase; z-index: 1; } .everything__muscle { width: 19rem; height: 19rem; margin: 0 1.5rem; } .everything__tv { position: absolute; left: 50%; transform: translateX(-50%); top: 27.3rem; width: 52.9rem; height: 52.6rem; z-index: 3; } .everything__tv-frame { position: absolute; inset: 0; width: 100%; height: 100%; } .everything__tv-video { position: absolute; left: 14.7%; top: 11.3%; width: 69.9%; height: 53%; object-fit: cover; border-radius: 0.6rem; } video.everything__tv-video { display: block; } .everything__line2 { position: absolute; left: 50%; transform: translateX(-50%); top: 68rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 19.87rem; line-height: 0.9; letter-spacing: -1.192rem; text-transform: uppercase; color: var(--cream); white-space: nowrap; z-index: 2; } .everything__proof { position: absolute; left: 50%; transform: translateX(-50%); top: 90.2rem; font-size: 2.4rem; font-weight: 600; line-height: 1.4; color: var(--cream); white-space: nowrap; z-index: 4; } /* ---------- from brief to viral ---------- */ .brief { position: relative; height: 108rem; background: var(--purple); z-index: 2; } .brief__video { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; object-fit: cover; z-index: 0; } .brief::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 32rem; background: linear-gradient(to bottom, rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0)); z-index: 1; pointer-events: none; } .brief .eyebrow, .brief__title, .brief__sub, .brief__play, .tag-cloud { z-index: 2; } .brief::before { content: ''; position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: url('../assets/bg-studio.png') center / cover no-repeat; z-index: 0; } .brief .eyebrow { position: absolute; left: 50%; transform: translateX(-50%); top: 10.9rem; white-space: nowrap; } .brief__title { position: absolute; left: 50%; transform: translateX(-50%); top: 15.5rem; width: 106.3rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12rem; line-height: 0.9; letter-spacing: -0.72rem; text-transform: uppercase; text-align: center; color: var(--cream); } .brief__rocket { left: calc(50% - 4.7rem); top: 23rem; width: 9.5rem; height: 9.5rem; z-index: 2; } .brief__sub { position: absolute; left: 50%; transform: translateX(-50%); top: 40.2rem; width: 53.9rem; font-size: 2.2rem; line-height: 1.4; text-align: center; color: var(--cream); } .brief__play { position: absolute; left: 50%; transform: translateX(-50%); top: 47.8rem; width: 17.6rem; height: 17.6rem; display: flex; align-items: center; justify-content: center; transition: transform 0.25s; } .brief__play::before { content: ''; position: absolute; inset: 1.8rem; border: 0.2rem solid var(--cream); } .brief__play img { width: 4.8rem; } .brief__play:hover { transform: translateX(-50%) scale(1.06); } .tag-cloud { position: absolute; left: 45.8rem; top: 69.3rem; width: 97.9rem; height: 38.7rem; overflow: visible; } .tag { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); display: inline-flex; align-items: center; padding: 1.36rem 2.04rem; border: 0.1rem solid var(--cream); border-radius: 12.2rem; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); font-family: 'Unbounded', sans-serif; font-size: 2.17rem; line-height: 1.08; color: var(--cream); white-space: nowrap; } .pill { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); display: inline-flex; align-items: center; padding: 1rem 1.5rem; border: 0.1rem solid var(--cream); border-radius: 9rem; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); color: var(--cream); font-family: 'Unbounded', sans-serif; font-size: 1.6rem; line-height: 1.08; white-space: nowrap; z-index: 3; } /* ---------- isaac / 30M ---------- */ .isaac { position: relative; height: 99.1rem; z-index: 1; overflow: hidden; /* opaque backdrop hides the tunnel-grid overlay behind this section */ background: var(--purple); } .isaac__title { position: absolute; left: 6rem; top: 9.6rem; width: 77.6rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 6rem; line-height: 1; letter-spacing: -0.36rem; text-transform: uppercase; color: var(--cream); z-index: 2; } .isaac__red { color: var(--red); } .isaac__line { position: absolute; left: 6rem; right: 6rem; top: 42.9rem; border-top: 0.1rem solid rgba(239, 239, 209, 0.4); } .isaac__30m { position: absolute; left: 145.9rem; top: 22rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13.9rem; line-height: 0.9; letter-spacing: -0.834rem; text-transform: uppercase; z-index: 2; } .isaac__followers { position: absolute; right: 6rem; top: 37rem; font-family: 'Unbounded', sans-serif; font-size: 3.2rem; line-height: 1.1; color: var(--cream); text-align: right; z-index: 2; } .isaac__photo { position: absolute; left: 64.8rem; bottom: 0; width: 95.1rem; height: 85.8rem; object-fit: cover; object-position: bottom; z-index: 3; } .isaac__yt { position: absolute; left: 48.9rem; top: 58.3rem; width: 37rem; height: 32.2rem; object-fit: contain; object-position: center; z-index: 4; } .isaac__body { position: absolute; left: 6rem; top: 68.9rem; width: 34.5rem; font-size: 1.6rem; line-height: 1.4; color: var(--cream); z-index: 2; } .isaac__body p + p { margin-top: 2.2rem; } .isaac__cta { position: absolute; right: 6rem; top: 68.9rem; z-index: 5; } /* ---------- footer ---------- */ .footer { position: relative; height: 99.4rem; background: var(--black); overflow: hidden; } .footer__bg { position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; overflow: hidden; z-index: 0; pointer-events: none; } .footer__bg video { width: 100%; height: 100%; object-fit: cover; } .footer__cube { position: absolute; left: 34.27%; top: 0; width: 54.4rem; z-index: 3; pointer-events: none; } .footer__title { position: absolute; left: 50%; transform: translateX(-50%); top: 44rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12rem; line-height: 0.9; letter-spacing: -0.72rem; text-transform: uppercase; text-align: center; color: #fff; white-space: nowrap; z-index: 2; } .footer__q { color: var(--lime); } .footer__sub { position: absolute; left: 50%; transform: translateX(-50%); top: 70.4rem; font-size: 2.4rem; line-height: 1.4; color: #fff; white-space: nowrap; z-index: 2; } .footer__cta { position: absolute; left: 50%; margin-left: -10.7rem; top: 76.8rem; } .footer__bar { position: absolute; left: 24rem; right: 24rem; bottom: 3.8rem; display: flex; justify-content: space-between; font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 1.4rem; color: #fff; } .footer__bar a:hover { color: var(--lime); } /* ---------- mobile-only components (hidden on desktop) ---------- */ .menu-btn { display: none; } .mnav { display: none; } .tabsel { display: none; } .view-more { display: none; } .only-mobile { display: none; } /* ========================================================================== Mobile - matches the 375px Figma mobile designs (1rem = 10px of 375) ========================================================================== */ @media (max-width: 820px) { html { font-size: calc(100vw / 37.5); } .zone__bg-img { height: 100vh; } /* ---------- chrome ---------- */ .nav { display: none; } .header { top: 2.4rem; left: 2rem; right: 2rem; } .header__logo img { width: 14rem; } .menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--cream); } .menu-btn span { display: block; width: 1.8rem; height: 0.2rem; border-radius: 0.2rem; background: var(--ink); } .mnav { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100; background: var(--cream); padding: 2.4rem 2rem; } .mnav[hidden] { display: none; } .mnav__top { display: flex; align-items: center; justify-content: space-between; } .mnav__logo img { width: 14rem; } .mnav__close { width: 4.4rem; height: 4.4rem; font-size: 3rem; line-height: 1; color: var(--ink); } .mnav__links { margin-top: 4.4rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; } .mnav__links a { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: 0.16rem; text-transform: uppercase; color: var(--ink); } .mnav__cta { margin-top: 3.4rem; display: flex; align-items: center; justify-content: center; height: 4.8rem; border-radius: 9rem; background: var(--lime); color: #000; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.07rem; text-transform: uppercase; } .cta { height: 4.8rem; font-size: 1.4rem; } /* ---------- hero ---------- */ .hero { height: 106rem; } .hero__eyebrow { left: 50%; transform: translateX(-50%); top: 13.2rem; font-size: 1.4rem; letter-spacing: 0.14rem; white-space: nowrap; } .hero__word { left: 50%; transform: translateX(-50%); font-size: 5.4rem; letter-spacing: -0.32rem; } .hero__word--1 { top: 16.4rem; } .hero__word--2 { top: 21.3rem; } .hero__word--3 { top: 26.2rem; } .hero__cube { left: 4rem; top: 18.6rem; width: 12.5rem; height: 12.5rem; z-index: 1; } .hero__sub { left: 2rem; right: 2rem; width: auto; top: 33.2rem; font-size: 1.6rem; text-align: center; } .hero__cta { left: 2rem; right: 2rem; width: auto; top: 40rem; } .hero__card--left { left: 2rem; top: 49.6rem; width: 20.5rem; height: 36.5rem; transform: rotate(-8deg); } .hero__badge-50 { left: auto; right: 8.8rem; top: 52.4rem; } .hero__crazy { left: 2.6rem; top: 81.8rem; width: 6rem; height: 6rem; display: block; } .hero__card--right { left: auto; right: 2rem; top: 63rem; width: 20.5rem; height: 36.5rem; transform: rotate(7deg); } .hero__badge-250 { left: 2rem; top: 75.4rem; min-width: 11rem; } .hero__skull { left: auto; right: 3rem; top: 94.6rem; width: 6rem; height: 6rem; } .badge__num { font-size: 2.2rem; } /* ---------- cco ---------- */ .cco { height: auto; padding: 4rem 2rem 6rem; } .cco__left { position: static; width: auto; } .cco__title { font-size: 3.4rem; letter-spacing: -0.17rem; margin-top: 1.6rem; } .cco__stack { display: none; } .cco__right { position: static; width: auto; margin-top: 3rem; } .cco__stats { gap: 1.4rem; } .stat { gap: 1.6rem; } .stat__num { font-size: 2.8rem; letter-spacing: -0.14rem; } .stat__label { font-size: 1.6rem; } .cco__sub { margin-top: 3rem; font-size: 1.6rem; } /* ---------- trusted logos ---------- */ .trusted__heading { font-size: 1.4rem; } .logo-grid { margin-top: 2rem; grid-template-columns: repeat(2, 1fr); } .logo-cell { height: 16.4rem; } .logo-cell:nth-child(6n+1) { border-left-width: 0; } .logo-cell:nth-child(-n+6) { border-top-width: 0; } .logo-cell:nth-child(2n+1) { border-left-width: 1px; } .logo-cell:nth-child(-n+2) { border-top-width: 1px; } .logo-cell img { max-width: 55%; } .logo-cell:nth-child(n+9) { display: none; } .logo-grid.is-expanded .logo-cell:nth-child(n+9) { display: flex; } .view-more { display: block; margin: 3.4rem auto 0; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.14rem; text-transform: uppercase; color: var(--cream); } .view-more__chev { display: inline-block; color: var(--lime); transition: transform 0.2s; } /* ---------- case studies marquee title ---------- */ .cs-title { height: auto; padding: 7rem 0 4rem; } .cs-title__line { font-size: 5.6rem; letter-spacing: -0.4rem; } .cs-title__line--1 { margin-top: 0; } .cs-title__clip--2 { height: 2.5rem; margin-top: 0.6rem; } .cs-title__line--2 { font-size: 5.75rem; letter-spacing: -0.41rem; margin-top: -0.5rem; } .cs-title__clip--3 { height: 1.9rem; margin-top: 0.6rem; } .cs-title__line--3 { font-size: 6rem; letter-spacing: -0.43rem; margin-top: -0.55rem; } /* ---------- cream zone: dropdown + carousel ---------- */ .zone--cream { height: auto; padding-bottom: 6rem; } .tabs { display: none; } .tabsel { display: block; position: relative; margin: 4rem 2rem 0; z-index: 40; } .tabsel__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.5rem 1.8rem; border: 0.15rem solid var(--ink); border-radius: 0.6rem; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 1.4rem; letter-spacing: 0.07rem; text-transform: uppercase; color: var(--ink); background: transparent; } .tabsel__chev { font-size: 1.8rem; line-height: 0.5; } .tabsel__list { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; background: var(--cream); border: 0.15rem solid var(--ink); border-radius: 0.6rem; overflow: hidden; } .tabsel__list button { display: block; width: 100%; padding: 1.4rem 1.8rem; text-align: left; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 1.3rem; text-transform: uppercase; color: var(--ink); } .tabsel__list button:hover { background: var(--ink); color: var(--cream); } .carousel-heading { margin: 4.6rem auto 0; width: 92%; font-size: 3.4rem; letter-spacing: -0.17rem; } .carousel-sub { margin-top: 1.6rem; width: 88%; font-size: 1.6rem; } .carousel { margin-top: 4rem; height: 66rem; } .case-card { width: 28rem; height: 50rem; } .case-card__logo { top: 38rem; max-width: 15rem; } .case-card__play { position: absolute; left: 50%; top: 21rem; transform: translateX(-50%); width: 8.8rem; height: 8.8rem; display: flex; align-items: center; justify-content: center; border: 0.2rem solid var(--cream); background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(0.4rem); z-index: 2; transition: transform 0.25s, background 0.25s; } .case-card__play img { width: 2.6rem; } .case-card__play:hover { transform: translateX(-50%) scale(1.08); background: rgba(0, 0, 0, 0.45); } .case-card__logo-text { position: absolute; left: 50%; transform: translateX(-50%); top: 45.9rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 2.6rem; letter-spacing: -0.05rem; text-transform: uppercase; color: #fff; white-space: nowrap; z-index: 1; } .case-card__cta { top: 43.2rem; width: 23.4rem; height: 4.4rem; font-size: 1.4rem; } .carousel__side, .carousel__ghost { display: none; } .carousel__badge-views { left: calc(50% - 16.6rem); top: 3rem; } .carousel__badge-comments { left: auto; right: calc(50% - 16.6rem); top: 13.6rem; } .carousel__badge-likes { left: calc(50% - 15.6rem); top: 40.6rem; } .badge--stat .badge__icon { width: 1.9rem; height: 1.9rem; } .carousel__arrow { width: 5rem; height: 5rem; top: 55rem; } .carousel__arrow--prev { left: calc(50% - 5.8rem); } .carousel__arrow--next { left: calc(50% + 0.8rem); } .carousel__arrow img { width: 1.4rem; } /* ---------- everything (purple) ---------- */ .everything { height: 60rem; } .everything__line1 { top: 7.6rem; font-size: 4.4rem; letter-spacing: -0.26rem; gap: 0.6rem; } .everything__muscle { width: 4.6rem; height: 4.6rem; margin: 0 0.4rem; } .everything__tv { top: 12.6rem; width: 30rem; height: 29.8rem; } .everything__line2 { top: 42rem; font-size: 4.6rem; letter-spacing: -0.28rem; } .everything__proof { top: 50.4rem; font-size: 1.6rem; } /* ---------- brief ---------- */ .brief { height: 102rem; } .brief .eyebrow { top: 6rem; font-size: 1.4rem; } .brief__title { top: 9.6rem; width: 100%; font-size: 4.6rem; letter-spacing: -0.28rem; } .brief__rocket { left: calc(50% + 1.6rem); top: 13rem; width: 5.4rem; height: 5.4rem; display: block; } .brief__sub { top: 21rem; width: 33rem; font-size: 1.6rem; } .brief__play { top: 28.6rem; width: 9rem; height: 9rem; } .brief__play::before { inset: 1rem; } .brief__play img { width: 2.4rem; } .tag-cloud { position: absolute; left: 1rem; right: 1rem; top: 42rem; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 0.8rem; } .tag { position: static; transform: rotate(var(--r)); font-size: 1.4rem; padding: 0.9rem 1.4rem; } .pill { display: none; } /* ---------- isaac ---------- */ .isaac { height: auto; padding: 6rem 2rem 7rem; } .isaac__title { position: static; width: auto; font-size: 3.4rem; letter-spacing: -0.17rem; } .isaac__30m { position: static; margin-top: 2.6rem; font-size: 9rem; letter-spacing: -0.54rem; text-align: left; } .isaac__followers { position: static; margin-top: 0.6rem; text-align: right; font-size: 2rem; } .isaac__line { position: static; margin-top: 2.4rem; } .isaac__photo { position: static; display: block; width: calc(100% + 4rem); margin: 3rem -2rem 0; height: 42rem; object-fit: cover; object-position: top center; } .isaac__yt { position: static; display: block; margin: -7rem auto 0; width: 25rem; height: 15rem; object-fit: contain; } .isaac__body { position: static; width: auto; margin-top: 3rem; font-size: 1.6rem; } .isaac__cta { position: static; display: block; margin-top: 3.4rem; width: 100%; } /* ---------- footer ---------- */ .footer { height: auto; padding: 5rem 2rem 4rem; text-align: center; } .footer__cube { position: static; margin: 0 auto; width: 26rem; } .footer__title { position: static; transform: none; margin-top: 1rem; font-size: 4.6rem; letter-spacing: -0.28rem; white-space: normal; } .footer__sub { position: static; transform: none; margin-top: 2rem; white-space: normal; font-size: 1.6rem; } .footer__cta { position: relative; left: auto; top: auto; margin: 2.6rem auto 0; width: 100%; } .footer__bar { position: static; margin-top: 6rem; flex-direction: column; align-items: center; gap: 2.4rem; } .only-desktop { display: none; } .only-mobile { display: inline; } } /* ========================================================================== Motion — homepage animations from the Figma animated prototype. Hidden states are gated on html.anim (added by js/motion.js), so the page is fully visible without JS or with prefers-reduced-motion. ========================================================================== */ :root { --ease-slow: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); } /* ---------- masked line reveals ---------- */ .mmask { overflow: hidden; } .mline { display: inline-block; } .anim .mmask .mline { translate: 0 120%; transition: translate 1.1s var(--ease-slow); transition-delay: var(--rd, 0s); } .anim .mmask.in .mline { translate: 0 0; } /* ---------- hero letter cascade ---------- */ .anim .hero__word { overflow: hidden; } .ltr { display: inline-block; } .anim .ltr { translate: 0 var(--dist, 120%); transition: translate 1.25s var(--ease-slow) 1.5s; } .anim.hero-run .ltr { translate: 0 0; } /* eyebrow reveal rides the same beat */ .anim .hero__eyebrow .mline { translate: 0 120%; transition: translate 1s var(--ease-slow) 1.55s; } .anim.hero-run .hero__eyebrow .mline { translate: 0 0; } /* ---------- hero load cast ---------- */ .anim [data-hero] { transition: translate 1.1s var(--ease-slow), opacity 0.9s var(--ease-out), scale 0.9s var(--ease-slow); } .anim [data-hero="rise"] { translate: 0 72rem; transition-duration: 1.25s; transition-delay: 0.35s; } .anim [data-hero="drop"] { translate: 0 -20rem; transition-delay: var(--hd, 1.5s); } .anim [data-hero="slide-r"] { translate: -29rem 0; opacity: 0; transition-delay: 1.7s; } .anim [data-hero="from-right"] { translate: 33rem 0; opacity: 0; transition-delay: 1.6s; } .anim [data-hero="from-left"] { translate: -39rem 0; opacity: 0; transition-delay: 1.6s; } .anim [data-hero="pop"] { opacity: 0; scale: 0.7; transition-delay: 1.9s; } .anim .hero__badge-250[data-hero] { transition-delay: 2.05s; } .anim .hero__badge-50[data-hero] { transition-delay: 2.15s; } .anim .hero__skull[data-hero] { transition-delay: 2.25s; } .anim .hero__crazy[data-hero] { transition-delay: 2.3s; } .anim.hero-run [data-hero] { translate: 0 0; opacity: 1; scale: 1; } /* ---------- scroll reveals ---------- */ .anim [data-reveal] { transition: translate 1s var(--ease-slow), opacity 0.9s var(--ease-out), scale 1s var(--ease-slow); transition-delay: var(--rd, 0s); } .anim [data-reveal="fade-up"]:not(.in) { translate: 0 4.5rem; opacity: 0; } .anim [data-reveal="fade"]:not(.in) { opacity: 0; } .anim [data-reveal="pop"]:not(.in) { opacity: 0; scale: 0.7; } .anim [data-reveal="slide-r"]:not(.in) { translate: 19rem 0; opacity: 0; } .anim [data-reveal="rocket"]:not(.in) { translate: -8.8rem 9.2rem; opacity: 0; } .anim [data-reveal="grow-x"] { transform-origin: left center; } .anim [data-reveal="grow-x"]:not(.in) { scale: 0 1; } .anim [data-reveal="mask"]:not(.in) .mline { translate: 0 120%; } .anim [data-reveal].in, .anim [data-reveal].in .mline { translate: 0 0; opacity: 1; scale: 1; } @media (prefers-reduced-motion: reduce) { .anim [data-hero], .anim [data-reveal], .anim .ltr, .anim .mline { translate: 0 0 !important; opacity: 1 !important; scale: 1 !important; transition: none !important; } } /* ---------- fullscreen video player ---------- */ .vplayer { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; } .vplayer video { max-width: 92vw; max-height: 92vh; } .vplayer__close { position: absolute; top: 2.4rem; right: 3rem; font-size: 4rem; line-height: 1; color: #fff; z-index: 1; }