/* ========================================================================== Content Forge â€” Homepage Scale system: 1rem = 10px of the 1920px Figma design (html font = 100vw/192) ========================================================================== */ /* Display tracking scale. Unbounded 700 uppercase was set at a flat -0.06em everywhere, from the 6rem section headings up to the 24rem case-studies stack. A single ratio cannot serve that range: the face has tight sidebearings for its stem weight, so what reads as crisp at 6rem closes the letters up at display sizes — "WE HELP BRANDS" ran together, "SELECTED PROJECTS" lost the gaps inside both words, "ALL PROJECTS" nearly lost its word space. Tracking now loosens as the type grows: >= 20rem -0.030em 12-20rem -0.035em 8-12rem -0.040em 6-8rem -0.050em < 6rem unchanged Keep new headings on this scale rather than copying -0.06em from a neighbouring rule. */ :root { --black: #111; --ink: #1e1d1b; --cream: #efefd1; --lime: #aef640; --purple: #581ee1; --red: #fd4438; --blood-orange: #fd4f37; } * { 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; } [hidden] { display: none !important; } 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; /* 100vh, not the 108rem this used to be. The job of this box is to cover the screen while its zone scrolls past, so its height has to track the viewport's HEIGHT. rem here is derived from viewport WIDTH (see the html rule above), so 108rem only happened to equal a screenful at one window size: at 1600px wide it computes to 900px, which left a 400px black band below the fold on a 1300px-tall window. Mobile already used 100vh. */ height: 100vh; 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--blood-orange { background: var(--blood-orange); } .cta--blood-orange .cta__b { color: var(--blood-orange); } .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: -0.621rem; word-spacing: 0.621rem; 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.3rem; word-spacing: 0.3rem; 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.1rem; word-spacing: 0.1rem; text-transform: uppercase; padding: 0 0.2rem; } .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 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: -0.68rem; word-spacing: 0.68rem; 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: -0.695rem; word-spacing: 0.695rem; 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: -0.727rem; word-spacing: 0.727rem; margin-top: -1.9rem; } /* ---------- cream zone: tabs + carousel ---------- */ .zone--cream { height: 142rem; color: var(--ink); } .tabs { position: sticky; top: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 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.3rem; word-spacing: 0.3rem; 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; } /* ---------- testimonials ---------- Flat band, no card chrome: client logo, then the quote, then a quiet attribution line. Sits dark between the cream carousel above and the purple zone below, so it reads as its own band rather than more cream. Logos are capped by HEIGHT, not width — these marks have wildly different aspect ratios and matching their widths makes the tall ones tower. */ .praise { background: var(--ink); color: var(--cream); padding: 12rem 0 12rem; } .praise__title { margin: 0 auto; width: 90rem; max-width: 92%; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 6rem; line-height: 1; letter-spacing: -0.3rem; word-spacing: 0.3rem; text-transform: uppercase; text-align: center; } .praise__row { margin: 9rem auto 0; width: 168rem; max-width: 92%; display: flex; align-items: flex-start; gap: 6rem; } .praise__col { flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .praise__logo { height: 5.6rem; width: auto; max-width: 24rem; object-fit: contain; margin-bottom: 4.4rem; } .praise__quote { margin: 0; font-size: 1.8rem; line-height: 1.5; } .praise__by { margin-top: 2.2rem; font-size: 1.3rem; letter-spacing: 0.06rem; line-height: 1.4; color: rgba(239, 239, 209, 0.6); } .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%); /* Anchored to the baseline above the CTA rather than from the top: a logo's height varies with its aspect ratio, so a fixed top let taller marks run down through the button. */ top: auto; bottom: 9.2rem; 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; } /* Small label above the logo for a case that runs on another brand's mark (Masterminds on Activate Talent's). Positioned per layout because the logo it sits above is absolutely placed and moves between wide/narrow cards. */ .case-card__logo-note { position: absolute; left: 50%; transform: translateX(-50%); top: 41.2rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.18rem; text-transform: uppercase; color: var(--lime); white-space: nowrap; z-index: 2; } .case-card--wide .case-card__logo-note { top: 15rem; } .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__side-logo-text { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6.5rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -0.04rem; text-transform: uppercase; color: #fff; white-space: nowrap; z-index: 1; } /* One case in the deck: no arrows, and the flanking previews would only be copies of the centre card. JS also drops their sources so nothing loads. */ .carousel--solo .carousel__side, .carousel--solo .carousel__ghost { display: none; } .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; } /* Category chip: mobile-only wayfinding for the mixed "All" deck. Hidden here rather than in the mobile block so it never appears on the desktop card. */ .case-card__cat { display: none; } .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: 6rem; line-height: 0.9; letter-spacing: -0.3rem; word-spacing: 0.3rem; text-transform: uppercase; z-index: 1; } .everything__muscle { width: 8rem; height: 8rem; margin: 0 1rem; } .everything__tv { position: absolute; left: 50%; transform: translateX(-50%); top: 27.3rem; width: 52.9rem; height: 52.6rem; z-index: 3; cursor: pointer; transition: transform 0.25s; } .everything__tv:hover, .everything__tv:focus-visible { transform: translateX(-50%) scale(1.03); } .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: 10rem; line-height: 0.9; letter-spacing: -0.4rem; word-spacing: 0.4rem; text-transform: uppercase; color: var(--cream); white-space: nowrap; z-index: 4; } .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: 100%; background: linear-gradient( to bottom, rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0) 72%, rgba(17, 17, 17, 0.85) ); z-index: 1; pointer-events: none; } .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.webp') center / cover no-repeat; z-index: 0; } .brief__title { position: absolute; left: 50%; transform: translateX(-50%); top: 15.5rem; width: 100%; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 8rem; line-height: 0.9; /* -0.04em, not the -0.06em the 6rem headings use. See .ahero__title in about.css: the ratio that reads as tight at 6rem closes the letters up at display sizes. */ letter-spacing: -0.32rem; word-spacing: 0.32rem; text-transform: uppercase; text-align: center; color: var(--cream); } .brief__sub { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12rem; width: 100%; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 8rem; letter-spacing: -0.32rem; word-spacing: 0.32rem; text-transform: uppercase; line-height: 0.9; 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); } /* ---------- launch film, played in place ---------- */ /* Clicking play swaps this section's copy for the film rather than opening the lightbox. The section is 108rem tall and the film is 4:3, so on a viewport wider than 1440px `contain` lands it at exactly 1440x1080 — its native size, no upscale. The matte either side is the section's own dimmed background. */ .brief__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 3; opacity: 0; visibility: hidden; /* Settles up to 1 rather than down from 1.02: scaling past full size made the element wider than the section it fills, which widened the document on every viewport even while it was hidden. */ transform: scale(0.98); transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s; } /* Dims the studio loop behind the film so the pillarbox reads as a matte instead of a second video competing with the first. */ .brief__scrim { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #050505; opacity: 0; visibility: hidden; z-index: 2; pointer-events: none; transition: opacity 0.55s ease, visibility 0.55s; } .brief.is-playing .brief__scrim { opacity: 0.92; visibility: visible; } .brief.is-playing .brief__film { opacity: 1; visibility: visible; transform: scale(1); } /* Scoped tight so the exit beats `.anim [data-reveal]`, which would otherwise lend this its 0.9s duration and its stagger delay — the copy has to be gone before the film arrives, not drifting out behind it. `translate` rather than `transform`, so the -50% centring transform survives. */ .brief.is-playing .brief__title, .brief.is-playing .brief__sub, .brief.is-playing .brief__play { opacity: 0; transition: opacity 0.4s var(--ease-out), translate 0.4s var(--ease-out); transition-delay: 0s; } .brief.is-playing .brief__title { translate: 0 -2rem; } .brief.is-playing .brief__sub { translate: 0 2rem; } .brief.is-playing .brief__play { pointer-events: none; } .brief__filmclose { position: absolute; top: 3rem; right: 3.5rem; z-index: 4; font-size: 4.4rem; line-height: 1; color: var(--cream); opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s; } .brief.is-playing .brief__filmclose { opacity: 0.75; visibility: visible; } .brief__filmclose:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .brief__film, .brief__scrim, .brief__title, .brief__sub, .brief__play { transition-duration: 0.01s; } .brief__film { transform: none; } } .tag-cloud { position: absolute; left: 45.8rem; top: 69.3rem; width: 97.9rem; height: 38.7rem; overflow: visible; } .tag, .pill { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .tag--drag { cursor: grabbing; z-index: 10; } .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.3rem; word-spacing: 0.3rem; 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.487rem; word-spacing: 0.487rem; 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: 78.2rem; bottom: 0; width: 67.6rem; height: 90.1rem; object-fit: contain; object-position: bottom; z-index: 3; } .isaac__body { position: absolute; left: 6rem; top: 62.4rem; width: 40rem; font-size: 1.9rem; 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 ---------- */ /* Heights and offsets below assume a ONE-LINE headline. The old two-line "Let's go viral / together?" filled 21.6rem; "Let's forge?" fills 10.8rem, so the sub and CTA move up by that line and the band loses the same amount rather than leaving the space stranded at the bottom. */ .footer { position: relative; height: 88.6rem; background: var(--black); } .footer__bg { position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; overflow: hidden; z-index: 0; pointer-events: none; } .footer__bg video { position: absolute; bottom: 0; /* left:0 is load-bearing, not tidiness. With `left:auto` an absolutely positioned box falls back to its static position, and the mobile footer sets text-align:center — which shifts that static position to the middle of .footer__bg. The video then started at 50% and was clipped by the parent's overflow:hidden, so the vortex only painted on the right half. */ left: 0; width: 100%; height: 50%; object-fit: cover; object-position: bottom; } /* mirrored copy so the vortex reaches the top end too */ .footer__bg .footer__bg-top { top: 0; bottom: auto; transform: scaleY(-1); } .footer__cube { position: absolute; left: 34.27%; top: 0; width: 54.4rem; z-index: 1; 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.42rem; word-spacing: 0.42rem; 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: 59.6rem; 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: 66rem; } .footer__bar { position: absolute; left: 24rem; right: 24rem; bottom: 3.8rem; display: flex; /* One item lives here now, so space-between stranded the copyright hard against the left edge with the rest of the bar empty. Centre it until there is a second item to push apart. */ justify-content: center; font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 1.4rem; color: #fff; } /* ---------- 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); } /* The load and scroll animations park elements well off to the right before they play — the hero card at 33rem, the stat labels at 19rem. On a phone that is most of a screen, so the document is far wider than the viewport at exactly the moment the browser picks its zoom, and it fits the wider canvas instead: the layout shrinks and the zone backgrounds, which are 100vw, stop short and leave the page edged in white. `clip` rather than `hidden` because hidden would make this a scroll container and break the sticky .zone__bg parallax. Nothing legitimate is cut: at this width .stage and 100vw are the same. */ .stage { overflow-x: clip; } /* ---------- 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; word-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; word-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.04rem; } .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; /* 19px of text is not a tap target; pad it out to ~44px without moving the label (margin drops by the padding added) */ margin: 2.2rem auto 0; padding: 1.2rem 1.6rem; 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: 4.3rem; letter-spacing: -0.31rem; word-spacing: 0.31rem; } .cs-title__line--1 { margin-top: 0; } .cs-title__clip--2 { height: 1.9rem; margin-top: 0.5rem; } .cs-title__line--2 { font-size: 4.4rem; letter-spacing: -0.31rem; word-spacing: 0.31rem; margin-top: -0.4rem; } .cs-title__clip--3 { height: 1.5rem; margin-top: 0.5rem; } .cs-title__line--3 { font-size: 4.6rem; letter-spacing: -0.33rem; word-spacing: 0.33rem; margin-top: -0.45rem; } /* ---------- cream zone: dropdown + carousel ---------- */ .zone--cream { height: auto; padding-bottom: 6rem; } .tabs { display: none; } /* The dropdown's top margin collapsed straight out of the cream zone (which has no top padding), dragging the zone's top edge down with it and leaving a black strip of body showing above the control. Pad the zone instead, so the margin has nothing to collapse through. */ .zone--cream:has(> .tabsel) { padding-top: 4rem; } .tabsel { display: block; position: relative; margin: 0 2rem; 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; word-spacing: 0.17rem; } .carousel-sub { margin-top: 1.6rem; width: 88%; font-size: 1.6rem; } .praise { padding: 3.4rem 0 5rem; } .praise__title { font-size: 3.4rem; letter-spacing: -0.17rem; word-spacing: 0.17rem; width: 92%; } .praise__row { margin-top: 4.6rem; flex-direction: column; gap: 5.4rem; } .praise__logo { height: 4.4rem; margin-bottom: 2.6rem; } .praise__quote { font-size: 1.6rem; } .praise__by { font-size: 1.2rem; } /* card ends at 54.5rem and the arrows are 5rem tall, so 67rem left a 5.5rem hole above the arrows and 2rem dead below them */ .carousel { margin-top: 4rem; height: 61rem; } .case-card { width: 28rem; height: 50rem; } .case-card__logo { top: 38rem; max-width: 15rem; } .case-card__logo-note { top: 34.6rem; font-size: 1.2rem; letter-spacing: 0.14rem; } .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; } /* The stat badges keep their desktop bulk on a 28rem card, where one badge runs half the card's width. Scale the whole badge, not just the icon. */ .badge--stat { padding: 0.6rem 0.7rem; gap: 0.25rem; border-radius: 0.45rem; } .badge--stat .badge__num { font-size: 1.05rem; letter-spacing: -0.05rem; } .badge--stat .badge__label { font-size: 0.62rem; margin-top: 0.22rem; } .badge--stat .badge__icon { width: 0.9rem; height: 0.9rem; } .badge__label { font-size: 1.2rem; } /* Mobile drops the scattered-sticker treatment entirely. Three rotated badges pinned to the corners of a 28rem card cannot avoid either clipping at the screen edge or landing on the logo/CTA, and they read as clutter rather than as deliberate stickers. Lay them out as an even row under the card instead: same numbers, no rotation, nothing overlapping. */ .carousel__badge-views, .carousel__badge-comments, .carousel__badge-likes { right: auto; top: 52rem; transform: none; width: 9.7rem; min-height: 6.6rem; display: flex; align-items: center; justify-content: center; text-align: center; } .carousel__badge-views { left: calc(50% - 15rem); } .carousel__badge-comments { left: calc(50% - 4.85rem); } .carousel__badge-likes { left: calc(50% + 5.3rem); } .badge--stat { flex-direction: column; gap: 0.3rem; } .badge--stat .badge__icon { margin: 0 auto; } .badge--stat .badge__label { line-height: 1.15; } /* The floating dots only read against a rotated sticker. */ .carousel__badge-views .badge__dot, .carousel__badge-comments .badge__dot, .carousel__badge-likes .badge__dot { display: none; } /* Was 40.6rem, which dropped it straight onto the logo (42.5rem) and the CTA below it. Sit it above both, over the card's lower-left video area. */ /* 2.6rem nowrap ran wider than the 28rem card, so a long name like "Down To Health" was clipped by the card's overflow on both sides. top was 45.9rem against a CTA at 43.2rem, i.e. the name sat on the button (visible on Iris Finance). Sit it where the image logo sits, just above. */ .case-card__logo-text { font-size: 2rem; top: 39.5rem; } .case-card__cat { display: block; position: absolute; left: 50%; top: 0.8rem; transform: translateX(-50%); padding: 0.55rem 1.1rem; border-radius: 5rem; background: rgba(17, 17, 17, 0.62); backdrop-filter: blur(0.6rem); font-family: 'Unbounded', sans-serif; font-weight: 600; /* 0.95rem lands at 9.9px on a phone, under any sensible floor. 1.15rem is 12px, and the longest category still clears the card at 28rem. */ font-size: 1.15rem; letter-spacing: 0.07rem; text-transform: uppercase; color: var(--cream); white-space: nowrap; z-index: 3; } /* Same top-anchor trap as the landscape card: a logo's height varies with its aspect ratio, so a top offset let taller marks (Pit Viper, AI Summit, Wideframe) run down into the CTA. Anchor to the baseline above it. */ .case-card__logo { top: auto; bottom: 8rem; } .carousel__arrow { width: 5rem; height: 5rem; top: 56rem; } .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: 1.15rem; letter-spacing: -0.04rem; gap: 0.4rem; } .everything__muscle { width: 1.8rem; height: 1.8rem; margin: 0 0.3rem; } .everything__tv { top: 12.6rem; width: 30rem; height: 29.8rem; } .everything__line2 { top: 42rem; font-size: 2.2rem; letter-spacing: -0.13rem; } .everything__proof { top: 50.4rem; font-size: 1.6rem; } /* ---------- brief ---------- */ /* Compact on mobile: the desktop-scale 102rem left ~2.5 screens of empty looping video between headline and subline. */ .brief { height: 56rem; } .brief__title { top: 7rem; width: 94%; font-size: 2.6rem; letter-spacing: -0.16rem; } .brief__sub { bottom: 5rem; width: 94%; font-size: 2.6rem; letter-spacing: -0.16rem; } .brief__play { top: 23.5rem; width: 9rem; height: 9rem; } .brief__play::before { inset: 1rem; } .brief__play img { width: 2.4rem; } /* Clear of the notch and of the native control bar at the foot of the film. */ .brief__filmclose { top: 1.6rem; right: 1.8rem; font-size: 3.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; cursor: default; touch-action: auto; } .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; word-spacing: 0.17rem; } .isaac__30m { position: static; margin-top: 2.6rem; font-size: 9rem; letter-spacing: -0.36rem; word-spacing: 0.36rem; 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__body { position: static; width: auto; margin-top: 3rem; font-size: 1.8rem; } .isaac__cta { position: static; display: block; margin-top: 3.4rem; width: 100%; } /* ---------- footer ---------- */ .footer { height: auto; padding: 5rem 2rem 4rem; text-align: center; } /* relative + z-index rather than static, for the same reason as .footer__bar below: .footer__bg is positioned, so it paints over any static sibling. Static content here left the cube, heading and sub-line buried under the vortex video. relative with no offsets lays out identically to static. */ .footer__cube { position: relative; left: auto; top: auto; z-index: 2; margin: 0 auto; width: 26rem; } .footer__title { position: relative; left: auto; top: auto; z-index: 2; transform: none; margin-top: 1rem; font-size: 4.6rem; letter-spacing: -0.28rem; word-spacing: 0.28rem; white-space: normal; } .footer__sub { position: relative; left: auto; top: auto; z-index: 2; 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 { /* relative + z-index, not static: the bar must paint above the absolutely positioned .footer__bg vortex video, which otherwise covers the text */ position: relative; left: auto; right: auto; z-index: 2; 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="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="fall"]:not(.in) { translate: var(--driftx, 0rem) var(--fall, -60rem); rotate: var(--rspin, 0deg); opacity: 0; pointer-events: none; } .anim [data-reveal="fall"].in { animation: tag-fall var(--fd, 0.9s) var(--rd, 0s) backwards; } @keyframes tag-fall { 0% { translate: var(--driftx, 0rem) var(--fall, -60rem); rotate: var(--rspin, 0deg); opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.6); } 12% { opacity: 1; } 55% { translate: 0 0; rotate: calc(var(--rspin, 0deg) / -3); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 72% { translate: 0 -2.4rem; rotate: calc(var(--rspin, 0deg) / 8); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.5); } 86% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 93% { translate: 0 -0.7rem; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.5); } 100% { translate: 0 0; rotate: 0deg; opacity: 1; } } .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; animation: 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 iframe { width: min(92vw, 92vh * 16 / 9); aspect-ratio: 16 / 9; border: 0; } .vplayer__close { position: absolute; top: 2.4rem; right: 3rem; font-size: 4rem; line-height: 1; color: #fff; z-index: 1; } /* ---------- PLACEHOLDER markers ---------- */ /* Flags case studies whose copy and numbers are not yet fact-checked. Driven by `placeholder: true` in js/cases.js. */ .cf-placeholder { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 6; padding: 0.6rem 1.1rem; border-radius: 0.6rem; background: var(--red); color: #fff; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.14rem; text-transform: uppercase; line-height: 1; pointer-events: none; } .cf-placeholder-bar { position: sticky; top: 0; z-index: 9998; padding: 1rem 2rem; background: var(--red); color: #fff; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.12rem; text-transform: uppercase; text-align: center; } /* ---------- Landscape case card ---------- */ /* Some case studies are 16:9 work (podcast trailers, event recaps). Cropping those into the 9:16 card turns a two-shot into one giant face, so the card swaps its dimensions instead. 60.3 / 33.9 is exactly 16:9, so the same two numbers just trade places, and the card stays centred in the row's height. */ .case-card--wide { width: 60.3rem; height: 33.9rem; top: 7rem; } .case-card--wide .case-card__logo-text { top: 19.4rem; } /* A square mark (9Operators) is as tall as it is wide, so a top-anchored slot drops it straight through the CTA below. Anchor the logo to its baseline instead: whatever its height, it grows upward and clears the button. */ .case-card--wide .case-card__logo { top: auto; bottom: 9.3rem; max-height: 7rem; object-fit: contain; } .case-card--wide .case-card__cta { top: 26rem; } .case-card--wide .case-card__play { top: 8rem; } /* The stat badges are pinned to the PORTRAIT card's corners. On a landscape card those coordinates land in open cream, so they read as three loose stickers rather than something attached to the card. Re-pin them to the wide card's own corners (x 50%±30.15rem, y 13.2–47.1rem), keeping the same overhang the portrait layout uses. The right-hand badge sits higher than its portrait twin so it clears the arrow at 50%+33.6rem. */ .carousel--wide .carousel__badge-views { left: calc(50% - 43.4rem); top: 9rem; } .carousel--wide .carousel__badge-comments { left: calc(50% + 27.9rem); top: 2.3rem; } .carousel--wide .carousel__badge-likes { left: calc(50% - 40.4rem); top: 31.7rem; } @media (max-width: 820px) { .case-card--wide { width: 32rem; height: 18rem; top: 2rem; } /* An 18rem-tall card has to fit play button, logo and CTA without them landing on each other — at the old offsets the play square (5.5–14.3rem) covered both. Stack them: play 2.4–8.4, logo ~9.4–11.5, CTA 12.4–16.8. max-width is deliberately absent on the logo text: with white-space:nowrap a max-width sizes the BOX but not the text, so the text spilled out of the right side of a 12rem box and the name read as off-centre. */ .case-card--wide .case-card__logo-text { top: 8.2rem; } /* A square mark (9Operators) at its desktop 9rem would be half this card's height and run into the play button. Cap the height and let the width follow; !important is needed because the width is set inline per case. */ .case-card--wide .case-card__logo { top: auto; bottom: 6.3rem; width: auto !important; max-width: 20rem; max-height: 4rem; } .case-card--wide .case-card__logo-note { top: 6.4rem; } /* 23.4rem is the portrait card's button width; on the landscape card it runs nearly edge to edge and collides with the bottom-left badge. */ .case-card--wide .case-card__cta { top: 12.2rem; width: 19rem; } .case-card--wide .case-card__cat { top: 0.8rem; } .case-card--wide .case-card__play { top: 3.4rem; width: 4rem; height: 4rem; } .case-card--wide .case-card__play img { width: 1.5rem; } } /* Wide mode moves the whole row outward, not just the centre card. The arrows clear the 60.3rem card, and the preview cards turn landscape too and shift out past the arrows — left vertical they showed a 16:9 still squeezed into a 9:16 box. Every offset below is derived from the card half-width (30.15rem) plus a 3.5rem gap, so the spacing matches the narrow layout's rhythm. */ /* Recentre on the lifted card: 7rem top + half of 33.9rem, less half the 6.3rem arrow. And close the row down to what a landscape card actually needs, instead of the 72rem reserved for the 9:16 one. */ .carousel--wide { height: 46rem; } .carousel--wide .carousel__arrow { top: 20.8rem; } .carousel--wide .carousel__arrow--prev { left: calc(50% - 39.9rem); } .carousel--wide .carousel__arrow--next { left: calc(50% + 33.6rem); } /* A preview's SHAPE follows the case it shows; its POSITION follows how wide the centre card is. Those are independent — a 16:9 case can sit beside a 9:16 centre — so they're separate modifiers rather than one wide mode. Inner edge is 37.3rem from centre normally, 46.4rem when the centre is wide; a landscape preview starts 60.3rem before that edge, a portrait one 33.9rem. */ .carousel__side--wide { width: 60.3rem; height: 33.9rem; top: 9rem; } .carousel__side--left.carousel__side--wide { left: calc(50% - 97.6rem); } .carousel--wide .carousel__side--left { left: calc(50% - 80.3rem); } .carousel--wide .carousel__side--left.carousel__side--wide { left: calc(50% - 106.7rem); } .carousel--wide .carousel__side--right { left: calc(50% + 46.4rem); } .carousel--wide .carousel__ghost--far-left { left: calc(50% - 152rem); } .carousel--wide .carousel__ghost--far-right { left: calc(50% + 112rem); } @media (max-width: 820px) { /* A 16:9 card fills the width of a phone, so there is no room to flank it: these offsets put prev at -29px and next 15px past the right edge, which was the only thing making the page scroll sideways. Sit the pair under the card instead, exactly like the narrow layout does. */ .carousel--wide .carousel__arrow { top: 29.5rem; } .carousel--wide .carousel__arrow--prev { left: calc(50% - 5.8rem); } .carousel--wide .carousel__arrow--next { left: calc(50% + 0.8rem); } /* Same story for the stat badges: the desktop wide offsets are ~40rem from centre, which throws them clean off a 37.5rem screen. The landscape card runs 8–26rem here, so pin them to that. These have to live in this block rather than the main mobile one, since the desktop .carousel--wide rules are declared after it and would otherwise win on equal specificity. */ /* Same row, higher up: the landscape card ends at 20rem, not 50rem. */ .carousel--wide .carousel__badge-views, .carousel--wide .carousel__badge-comments, .carousel--wide .carousel__badge-likes { top: 21.5rem; right: auto; } .carousel--wide .carousel__badge-views { left: calc(50% - 15rem); } .carousel--wide .carousel__badge-comments { left: calc(50% - 4.85rem); } .carousel--wide .carousel__badge-likes { left: calc(50% + 5.3rem); } /* 66rem is reserved for the 50rem-tall 9:16 card. A wide card is 18rem, so the container was leaving ~240px of empty cream under the arrows. */ .carousel--wide { height: 36rem; } } /* Terms link in the footer bar. .footer__bar and .contact__bar are both space-between flex rows that held a single child, so the link takes the opposite end without any further layout work. */ .footer__terms { text-decoration: none; opacity: 0.75; transition: opacity 0.25s ease; } .footer__terms:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3rem; } /* ---------- 404 ---------- */ /* Served for an unmatched URL at any depth, so it is deliberately self-contained: nothing here depends on a per-page stylesheet. */ .e404 { position: relative; min-height: 100vh; padding: 20rem 24rem 8rem; display: grid; grid-template-rows: 1fr auto; align-content: center; justify-items: start; } .e404__inner, .e404__bar { position: relative; z-index: 2; } .e404__eyebrow { color: var(--lime); } .e404__title { margin-top: 2rem; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14rem; line-height: 0.9; /* -0.035em, per the display tracking scale at the top of this file */ letter-spacing: -0.49rem; word-spacing: 0.49rem; text-transform: uppercase; color: #fff; } .e404__sub { margin-top: 2.8rem; width: 56rem; max-width: 100%; font-size: 1.8rem; line-height: 1.5; color: rgba(239, 239, 209, 0.7); } .e404__cta { margin-top: 3.6rem; } .e404__links { margin-top: 3rem; font-size: 1.6rem; color: rgba(239, 239, 209, 0.6); } .e404__links a { color: var(--lime); text-decoration: underline; text-underline-offset: 0.3rem; } .e404__links a:hover { color: #fff; } .e404__cube { position: absolute; right: 18rem; top: 26rem; width: 34rem; height: 34rem; object-fit: contain; z-index: 1; pointer-events: none; } .e404__bar { align-self: end; justify-self: stretch; margin-top: 8rem; display: flex; justify-content: space-between; font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 1.4rem; color: #fff; } @media (max-width: 820px) { .e404 { min-height: 0; padding: 12rem 2rem 4rem; grid-template-rows: none; justify-items: center; text-align: center; } .e404__title { font-size: 6.4rem; letter-spacing: -0.32rem; word-spacing: 0.32rem; } .e404__sub { width: auto; font-size: 1.6rem; } .e404__cta { width: 100%; } /* Same reason as the contact page: the cube was placed against a gap in the two-column layout that does not exist once everything centres. */ .e404__cube { display: none; } .e404__bar { margin-top: 6rem; flex-direction: column; align-items: center; gap: 2.6rem; } }