/* ═══════════════════════════════════════════════════════════════ HUSTLE HARDER MEDIA AGENCY, hustleharder.au House voice = dark (Monolith). Light world = deliberate insert (Atelier). Energy/kinetics borrowed from Raw. One accent per world: red / gold. ═══════════════════════════════════════════════════════════════ */ :root { /* dark system (house) */ --ink: #0B0B0C; --ink-2: #131315; --ink-3: #1B1B1E; --bone: #EAE6DE; --bone-dim: rgba(234, 230, 222, 0.56); --red: #E22B2B; --hair: rgba(234, 230, 222, 0.14); /* light system (insert) */ --cream: #F2EAE0; --cream-2: #E9DFD1; --esp: #2B211B; --esp-dim: rgba(43, 33, 27, 0.6); --gold: #B98F5E; --hair-l: rgba(43, 33, 27, 0.16); /* podcast */ --ion: #6BE8FF; --anton: "Anton", Impact, sans-serif; --serif: "Cormorant Garamond", Georgia, serif; --grot: "Space Grotesk", sans-serif; --caps: "Jost", sans-serif; --pad: clamp(1.25rem, 4vw, 4.5rem); } * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x lives on the root only, putting it on too makes body a scroll container, which silently breaks position:sticky (the process rail) */ html { overflow-x: hidden; scroll-behavior: smooth; } body { background: var(--ink); color: var(--bone); font-family: var(--grot); font-weight: 300; -webkit-font-smoothing: antialiased; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } li { list-style: none; } ::selection { background: var(--red); color: var(--ink); } .eyebrow { font-size: 0.66rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--red); font-weight: 600; } .eyebrow--ion { color: var(--ion); } .eyebrow--big { font-size: clamp(0.82rem, 1.5vw, 1.05rem); letter-spacing: 0.46em; } /* film grain over everything */ .grain { position: fixed; inset: -100%; z-index: 300; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 0.9s steps(4) infinite; } @keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,3%)} 50%{transform:translate(3%,-2%)} 75%{transform:translate(-1%,-3%)} 100%{transform:translate(2%,2%)} } /* ══════════════ STICKY NAV ══════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem var(--pad); background: rgba(11, 11, 12, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); transform: translateY(-102%); transition: transform 0.5s cubic-bezier(.16,1,.3,1); } .nav.is-on { transform: translateY(0); } .nav__logo { font-family: var(--anton); font-size: 0.95rem; letter-spacing: 0.05em; white-space: nowrap; } .nav__logo span { color: var(--bone-dim); font-weight: 400; } .nav__links { display: flex; gap: clamp(1.1rem, 1.9vw, 1.8rem); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .nav__links a { position: relative; padding-bottom: 3px; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transition: transform 0.35s cubic-bezier(.77,0,.18,1); } .nav__links a:hover::after { transform: scaleX(1); } .nav__cta { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; background: var(--red); color: #0B0B0C !important; padding: 0.85em 1.6em; border-radius: 100px; white-space: nowrap; transition: background 0.35s, color 0.35s; } .nav__cta:hover { background: var(--bone); } /* ── mobile nav ── The link row used to be display:none under 860px, which left phones with no way to reach any section. It now folds into a full-screen panel behind a toggle; the bar itself keeps the logo and the price CTA. */ .nav__toggle { display: none; } @media (max-width: 900px) { .nav { gap: 0.6rem; } .nav__logo span { display: none; } /* logo, CTA and toggle stay above the panel that fills the screen behind them */ .nav__logo, .nav__cta, .nav__toggle { position: relative; z-index: 2; } .nav__cta { padding: 0.85em 1.15em; font-size: 0.58rem; letter-spacing: 0.16em; } .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; flex: none; background: none; border: 1px solid var(--hair); cursor: pointer; } .nav__toggle span { display: block; height: 1.5px; background: var(--bone); transition: transform 0.3s, opacity 0.3s; } .nav.is-open .nav__toggle span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* Absolute, not fixed: .nav carries a transform for its slide-in, which makes it the containing block for fixed descendants, so a fixed panel would size itself to the bar instead of the screen. Hanging it off the bar's bottom edge gives the same full-screen result. */ .nav__links { display: flex; position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: 100vh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 2rem var(--pad) 3rem; overflow-y: auto; background: var(--ink); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; } .nav.is-open .nav__links { opacity: 1; visibility: visible; } .nav__links a { padding: 1.15rem 0; font-family: var(--anton); font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--hair); } .nav__links a::after { display: none; } .nav__links a:first-child { border-top: 1px solid var(--hair); } } /* ══════════════ THE THRESHOLD ══════════════ */ .threshold { position: relative; height: 100svh; min-height: 580px; display: flex; overflow: hidden; } .panel { position: relative; flex: 1 1 50%; overflow: hidden; transition: flex-basis 0.9s cubic-bezier(.16,1,.3,1); } .panel__stage { position: absolute; inset: 0; } .panel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; } .panel__slide.is-active { opacity: 1; } .panel__slide img { transform: scale(1.08); animation: kb 14s ease-in-out infinite alternate; } @keyframes kb { to { transform: scale(1.16) translate(-1%, -1%); } } .panel--dark .panel__slide img { filter: grayscale(0.35) contrast(1.1) brightness(0.74); } .panel--light .panel__slide img { filter: saturate(0.96) brightness(1.06); } .panel__veil { position: absolute; inset: 0; transition: opacity 0.7s; } .panel--dark .panel__veil { background: radial-gradient(65% 46% at 50% 54%, rgba(11,11,12,0.86) 0%, rgba(11,11,12,0.5) 58%, rgba(11,11,12,0.15) 100%), linear-gradient(180deg, rgba(11,11,12,0.66), rgba(11,11,12,0.24) 45%, rgba(11,11,12,0.8)); } .panel--light .panel__veil { background: radial-gradient(65% 46% at 50% 54%, rgba(242,234,224,0.90) 0%, rgba(242,234,224,0.56) 58%, rgba(242,234,224,0.18) 100%), linear-gradient(180deg, rgba(242,234,224,0.6), rgba(242,234,224,0.22) 45%, rgba(242,234,224,0.76)); } /* panel copy sits in the LOWER third so the wordmark owns the centre */ .panel__inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 7% 15vh; gap: 0.2rem; } .panel__eye { font-family: var(--grot); font-size: 0.58rem; letter-spacing: 0.44em; text-transform: uppercase; margin-bottom: 1.3rem; } .panel--dark .panel__eye { color: var(--red); } .panel--light .panel__eye { color: var(--gold); } .panel__title { line-height: 0.9; } .panel--dark .panel__title { font-family: var(--anton); font-size: clamp(2.1rem, 4.4vw, 4rem); color: var(--bone); letter-spacing: 0.02em; text-shadow: 0 4px 60px rgba(11,11,12,0.95); } .panel--light .panel__title { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(2.1rem, 4.4vw, 4rem); color: var(--esp); letter-spacing: 0.02em; text-shadow: 0 4px 60px rgba(242,234,224,0.95); } .panel__cats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; justify-content: center; margin-top: 1.3rem; max-width: 30ch; } .panel__cats li { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; } .panel--dark .panel__cats li { color: var(--bone); opacity: 0.8; } .panel--light .panel__cats li { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: none; color: var(--esp); opacity: 0.85; } /* two stacked CTAs per side: BOOK NOW (primary, filled) above VIEW GALLERY (ghost) */ .panel__ctas { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .panel__cta { display: inline-flex; align-items: center; gap: 0.6em; width: max-content; font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; padding: 1em 2.1em; border-radius: 100px; border: 1px solid; transition: background 0.35s, color 0.35s, border-color 0.35s, gap 0.35s, transform 0.35s; } .panel__cta em { font-style: normal; } .panel--dark .panel__cta--book { background: var(--bone); color: #0B0B0C; border-color: var(--bone); } .panel--dark .panel__cta--book:hover { background: var(--red); border-color: var(--red); color: var(--ink); gap: 1em; } .panel--dark .panel__cta--gal { color: var(--bone); border-color: rgba(234,230,222,0.42); } .panel--dark .panel__cta--gal:hover { border-color: var(--bone); gap: 1em; } .panel--light .panel__cta--book { background: var(--esp); color: #F7F2EA; border-color: var(--esp); } .panel--light .panel__cta--book:hover { background: var(--gold); border-color: var(--gold); color: #2B211B; gap: 1em; } .panel--light .panel__cta--gal { color: var(--esp); border-color: rgba(43,33,27,0.42); } .panel--light .panel__cta--gal:hover { border-color: var(--esp); gap: 1em; } @media (hover: hover) and (min-width: 901px) { .threshold.on-dark .panel--dark { flex-basis: 60%; } .threshold.on-dark .panel--light { flex-basis: 40%; } .threshold.on-light .panel--light { flex-basis: 60%; } .threshold.on-light .panel--dark { flex-basis: 40%; } .panel:hover .panel__veil { opacity: 0.82; } } /* ── the seam: wordmark + podcast ── */ .seam { position: absolute; z-index: 6; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; width: min(92vw, 760px); } .seam__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(226,43,43,0.65) 18%, rgba(185,143,94,0.65) 82%, transparent); transform: translateX(-50%) scaleY(0); transform-origin: top; } .seam__brand { position: relative; width: 100%; } .seam__copy { text-align: center; width: 100%; } /* the right copy stacks exactly on the left one, then each is clipped to its world */ .seam__copy--r { position: absolute; inset: 0; } .seam__copy--l { clip-path: inset(0 50% 0 0); color: var(--bone); } .seam__copy--r { clip-path: inset(0 0 0 50%); color: var(--esp); } .seam__word { display: block; font-family: var(--anton); text-transform: uppercase; font-size: clamp(2rem, 5.6vw, 4.7rem); line-height: 0.9; letter-spacing: 0.01em; color: inherit; } .seam__sub { display: block; margin-top: 0.85rem; font-family: var(--grot); font-size: 0.58rem; letter-spacing: 0.4em; text-transform: uppercase; color: inherit; opacity: 0.8; } .seam__pod { pointer-events: auto; position: absolute; bottom: 8.5vh; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.85em; white-space: nowrap; background: rgba(11,11,12,0.82); backdrop-filter: blur(10px); border: 1px solid rgba(226,43,43,0.5); border-radius: 100px; padding: 0.95em 1.9em; /* +25% */ font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone); /* was 0.56rem → +25% */ transition: background 0.4s, color 0.4s, box-shadow 0.5s; } .seam__pod:hover { background: var(--red); color: var(--ink); box-shadow: 0 0 44px rgba(226,43,43,0.5); } .seam__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 10px var(--red), 0 0 18px rgba(226,43,43,0.7); animation: glowpulse 1.8s ease-in-out infinite; } .seam__pod:hover .seam__dot { background: var(--ink); box-shadow: none; } @keyframes glowpulse { 0%, 100% { box-shadow: 0 0 8px var(--red), 0 0 14px rgba(226,43,43,0.6); opacity: 1; } 50% { box-shadow: 0 0 16px var(--red), 0 0 30px rgba(226,43,43,0.9); opacity: 0.75; } } .cue { position: absolute; z-index: 6; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.54rem; letter-spacing: 0.36em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; opacity: 0.8; } .cue b { width: 1px; height: 34px; background: currentColor; display: block; animation: drip 1.9s ease-in-out infinite; transform-origin: top; } @keyframes drip { 0%,100%{transform:scaleY(0.3)} 50%{transform:scaleY(1)} } /* ── intro animation states ── */ .is-loading .panel { flex-basis: 50%; } .is-loading .panel--dark { clip-path: inset(0 0 0 100%); } .is-loading .panel--light { clip-path: inset(0 100% 0 0); } .panel--dark, .panel--light { clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.76,0,.24,1), flex-basis 0.9s cubic-bezier(.16,1,.3,1); } .is-loading .seam__word, .is-loading .seam__sub, .is-loading .panel__inner > *, .is-loading .seam__pod, .is-loading .cue { opacity: 0; } @media (max-width: 900px) { .threshold { flex-direction: column; height: auto; } .panel { min-height: 62svh; } .seam { position: relative; left: auto; transform: none; width: 100%; padding: 2.6rem 1rem 3rem; background: var(--ink); } .seam__line { display: none; } /* stacked layout has no seam to straddle, show one full-width copy */ .seam__copy--l { clip-path: none; position: relative; } .seam__copy--r { display: none; } .panel__inner { padding-bottom: 8vh; justify-content: center; } .seam__pod { position: relative; bottom: auto; left: auto; transform: none; margin-top: 1.8rem; white-space: normal; text-align: center; } .cue { display: none; } } /* ══════════════ POSITIONING ══════════════ */ .pos { padding: clamp(5rem, 13vh, 9rem) var(--pad) clamp(3rem, 7vh, 5rem); max-width: 1500px; } /* same block display face as the Process headline, so every heading on the site reads as one voice */ .pos__line { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 5.2vw, 4.3rem); line-height: 1.0; letter-spacing: 0.01em; margin: 2rem 0 2.6rem; max-width: 26ch; } .ln { display: block; } /* the serif accent is set larger than its host: Cormorant's cap height is much shorter than Anton's, so matching font-size would leave it looking undersized */ .pos__line em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--gold); font-size: 1.22em; line-height: 0.9; } .pos__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.4rem; max-width: 900px; } .pos__cols p { color: var(--bone-dim); font-size: 0.96rem; line-height: 1.8; } .pos__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-top: 4rem; border-top: 1px solid var(--hair); padding-top: 2.4rem; } .pos__stats b { display: block; font-family: var(--anton); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; } .pos__stats span { font-size: 0.6rem; letter-spacing: 0.28em; color: var(--bone-dim); } /* ticker */ .ticker { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; } .ticker__track { display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap; padding: 1.05rem 0; will-change: transform; } .ticker__track span { font-family: var(--anton); font-size: clamp(1rem, 2.2vw, 1.7rem); color: var(--bone-dim); letter-spacing: 0.04em; } .ticker__track i { color: var(--red); font-style: normal; font-size: 0.78em; } /* ══════════════ PROCESS, 3 PHASES ══════════════ */ .process { padding: 0 var(--pad); border-top: 1px solid var(--hair); } /* headline block is centred and set in the house block type; it rides inside the pinned stage so the pause frames the headline and the steps together */ .process__head { max-width: 1180px; margin: 0 auto; text-align: center; } .process__title { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(2.3rem, 5.6vw, 4.9rem); line-height: 0.98; margin: 1.1rem 0 1.3rem; letter-spacing: 0.01em; } /* "converts" stays in the serif, as the one soft word in a hard headline */ .process__title em { font-family: var(--serif); font-weight: 300; font-style: italic; text-transform: none; color: var(--red); letter-spacing: -0.01em; font-size: 1.22em; line-height: 0.9; } .process__lede { color: var(--bone-dim); font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.85; max-width: 68ch; margin: 0 auto; } /* ── the pinned rail: scroll pauses here and walks 01 → 02 → 03 ── */ .rail { position: relative; height: 320vh; } .rail__stage { position: sticky; top: 0; height: 100vh; min-height: 560px; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 5.5vh, 4.4rem); padding: clamp(3.5rem, 8vh, 5.5rem) 0 clamp(2rem, 5vh, 3.5rem); } .rail__line { position: relative; display: flex; align-items: center; height: 1px; background: var(--hair); margin: 0 clamp(2.4rem, 4vw, 3.4rem); } .rail__fill { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--red), rgba(226,43,43,0.55)); transform: scaleX(var(--p, 0)); transform-origin: left; } .rail__arrow { position: absolute; top: 50%; translate: 0 -50%; font-family: var(--grot); font-size: 1.15rem; line-height: 1; color: var(--red); transition: opacity 0.5s, translate 0.5s; } .rail__arrow--in { left: -2.2rem; opacity: calc(1 - var(--p, 0)); } .rail__arrow--out { right: -2.4rem; opacity: var(--p, 0); } .rail__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3.4vw, 3.4rem); } .rail__step { position: relative; padding-top: clamp(1.4rem, 3vh, 2.2rem); opacity: 0.26; filter: blur(1px); transition: opacity 0.55s cubic-bezier(.2,.8,.2,1), filter 0.55s, transform 0.55s cubic-bezier(.2,.8,.2,1); transform: translateY(14px); } .rail__step.is-on { opacity: 1; filter: none; transform: none; } .rail__no { position: absolute; top: calc(-1 * clamp(1.4rem, 3vh, 2.2rem) - 24px); left: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); border: 1px solid var(--red); color: var(--red); font-family: var(--anton); font-size: 1.2rem; transition: background 0.5s, color 0.5s, box-shadow 0.5s; } .rail__step.is-on .rail__no { background: var(--red); color: var(--ink); box-shadow: 0 0 34px rgba(226,43,43,0.45); } .rail__phase { display: block; font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 0.5rem; } .rail__verb { font-family: var(--anton); font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: 0.01em; } .rail__sub { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); margin: 0.7rem 0 1rem; } .rail__copy { color: var(--bone-dim); font-size: 0.92rem; line-height: 1.75; max-width: 34ch; } /* no pinning on small screens or with motion reduced, just three plain steps */ @media (max-width: 900px) { .rail { height: auto; padding-bottom: clamp(3rem, 8vh, 5rem); } .rail__stage { position: static; height: auto; min-height: 0; gap: 2.4rem; } .rail__line { display: none; } .rail__steps { grid-template-columns: 1fr; gap: 3.2rem; } .rail__step { opacity: 1; filter: none; transform: none; padding-top: 0; padding-left: 4.4rem; } .rail__no { position: absolute; top: 0; left: 0; background: var(--red); color: var(--ink); } .rail__copy { max-width: none; } } /* ══════════════ WORLDS ══════════════ */ .world { padding: clamp(4.5rem, 11vh, 8rem) var(--pad); } .world--dark { background: var(--ink); } .world--light { background: var(--cream); color: var(--esp); } .world__head { max-width: 1500px; margin-bottom: 3.2rem; } .world__no { font-size: 0.62rem; letter-spacing: 0.38em; text-transform: uppercase; } .world--dark .world__no { color: var(--red); } .world--light .world__no { color: var(--gold); } .world__title { margin: 1.1rem 0 1.3rem; line-height: 1.0; } .world--dark .world__title { font-family: var(--anton); font-size: clamp(2.2rem, 6vw, 4.6rem); text-transform: uppercase; } .world--dark .world__title em { font-style: normal; color: var(--red); } /* Moment runs the same block display face as Motion; its identity comes from the cream palette, the gold accent and the serif accent word, not a second heading typeface */ .world--light .world__title { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: 0.01em; } .world--light .world__title em { font-family: var(--serif); font-style: italic; font-weight: 300; text-transform: none; color: var(--gold); font-size: 1.22em; line-height: 0.9; letter-spacing: -0.01em; } .world__lede { max-width: 52ch; font-size: 1rem; line-height: 1.8; } .world--dark .world__lede { color: var(--bone-dim); } .world--light .world__lede { color: var(--esp-dim); } /* ── rolling word in the Motion headline (odometer, not a fade) ── */ .roll { display: inline-block; overflow: hidden; height: 1.16em; vertical-align: bottom; transition: width 0.55s cubic-bezier(.2,.8,.2,1); } .roll__list { display: block; transition: transform 0.72s cubic-bezier(.86,0,.07,1); } .roll__list em { display: flex; align-items: center; height: 1.16em; font-style: normal; color: var(--red); white-space: nowrap; } /* mosaic, every cell filled, and shapes matched to image orientation. tall frames take verticals, the wide frame takes a horizontal, squares take whatever crops cleanly. see js/main.js for the pairing logic. */ /* two columns by default, the tile order packs solid on its own at this width */ .mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.7rem, 1.6vw, 1.2rem); } .m { position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--ink-2); } .m--tall { grid-row: span 2; aspect-ratio: 1/2.06; } .m--wide { grid-column: span 2; aspect-ratio: 2.06/1; } .m img { transition: transform 1s cubic-bezier(.2,.8,.2,1), filter 0.6s, opacity 0.42s ease; } .mosaic--dark .m img { filter: grayscale(0.2) contrast(1.05); } .m:hover img { transform: scale(1.06); filter: none; } .m--clickable { cursor: pointer; } .m--clickable::after { content: "⤢"; position: absolute; top: 0.6rem; right: 0.7rem; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 0.9rem; background: rgba(11,11,12,0.6); color: var(--bone); backdrop-filter: blur(4px); opacity: 0; transform: scale(0.7); transition: opacity 0.3s, transform 0.3s; } .mosaic--light .m--clickable::after { background: rgba(242,234,224,0.75); color: var(--esp); } .m--clickable:hover::after { opacity: 1; transform: scale(1); } .mosaic__all { margin-top: clamp(1.4rem, 3vw, 2.2rem); display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; font-family: var(--caps); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; padding: 0.6em 0; border-bottom: 1px solid; transition: gap 0.3s, color 0.3s, border-color 0.3s; } .world--dark .mosaic__all { color: var(--bone); border-color: var(--red); } .world--dark .mosaic__all:hover { color: var(--red); } .world--light .mosaic__all { color: var(--esp); border-color: var(--gold); } .world--light .mosaic__all:hover { color: var(--gold); } .m figcaption { position: absolute; left: 0.7rem; bottom: 0.7rem; font-size: 0.56rem; letter-spacing: 0.26em; padding: 0.45em 0.9em; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s; } .mosaic--dark figcaption { background: rgba(11,11,12,0.72); color: var(--bone); backdrop-filter: blur(6px); } .mosaic--light figcaption { background: rgba(242,234,224,0.85); color: var(--esp); backdrop-filter: blur(6px); } .m:hover figcaption { opacity: 1; transform: translateY(0); } .m--wide { grid-column: span 2; } .m--tall { grid-row: span 2; } /* four columns: explicit areas so all 16 cells are filled, no ragged holes */ @media (min-width: 901px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a b c d" "a b c e" "f f g h" "i j g h"; } .mosaic > .m:nth-child(1) { grid-area: a; } .mosaic > .m:nth-child(2) { grid-area: b; } .mosaic > .m:nth-child(3) { grid-area: c; } .mosaic > .m:nth-child(4) { grid-area: d; } .mosaic > .m:nth-child(5) { grid-area: e; } .mosaic > .m:nth-child(6) { grid-area: f; } .mosaic > .m:nth-child(7) { grid-area: g; } .mosaic > .m:nth-child(8) { grid-area: h; } .mosaic > .m:nth-child(9) { grid-area: i; } .mosaic > .m:nth-child(10) { grid-area: j; } } .world__foot { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: space-between; margin-top: 2.6rem; padding-top: 1.8rem; } .world--dark .world__foot { border-top: 1px solid var(--hair); } .world--light .world__foot { border-top: 1px solid var(--hair-l); } .world__foot p { font-size: 0.8rem; letter-spacing: 0.06em; } .world--dark .world__foot p { color: var(--bone-dim); } .world--light .world__foot p { color: var(--esp-dim); } .btn { display: inline-block; font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; padding: 1.1em 2.2em; border-radius: 100px; transition: background 0.35s, color 0.35s; white-space: nowrap; } .btn--dark { background: var(--bone); color: #0B0B0C !important; } .btn--dark:hover { background: var(--red); color: var(--bone) !important; } .btn--light { background: var(--esp); color: #F7F2EA !important; } .btn--light:hover { background: var(--gold); color: #2B211B !important; } /* ══════════════ REELS ══════════════ */ .reels { background: var(--ink-2); padding: clamp(4rem, 10vh, 7rem) var(--pad); border-top: 1px solid var(--hair); } .reels__head { max-width: 60ch; margin-bottom: 2.6rem; } .reels__title { font-family: var(--anton); font-size: clamp(1.9rem, 4.6vw, 3.4rem); margin: 1rem 0 0.9rem; letter-spacing: 0.02em; } .reels__head p { color: var(--bone-dim); font-size: 0.94rem; line-height: 1.8; } .reels__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem); } .reel { position: relative; } .reel video { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: var(--ink); border: 1px solid var(--hair); } .reel span { display: block; margin-top: 0.7rem; font-size: 0.56rem; letter-spacing: 0.26em; color: var(--bone-dim); } /* the Moment side runs the same wall in the light system, so the page doesn't sit dark-heavy from the Motion gallery all the way down to the podcast */ .reels--light { background: var(--cream-2); color: var(--esp); border-top: 1px solid var(--hair-l); } .reels--light .reels__title { color: var(--esp); } .reels--light .reels__head p { color: var(--esp-dim); } .reels--light .reel video { background: var(--cream); border-color: var(--hair-l); } .reels--light .reel span { color: var(--esp-dim); } .eyebrow--gold { color: var(--gold); } /* ── mobile placement pass ── */ @media (max-width: 700px) { /* auto-fit drops to a single 350px column on a phone, which makes each 9:16 tile ~620px tall and turns both reel walls into endless scroll */ .reels__row { grid-template-columns: repeat(2, 1fr); } /* text-style links and buttons are only as tall as their type, well under a comfortable touch target, so give them real vertical padding on touch */ .tier__btn, .mosaic__all, .packs__more a, .foot__nav a, .contact__grid a { padding-top: 0.75rem; padding-bottom: 0.75rem; } .tier__btn { display: inline-block; } .foot__nav { gap: 0.4rem 1.6rem; } } /* ══════════════ PODCAST ══════════════ */ .pod { background: var(--ink); border-top: 1px solid rgba(226,43,43,0.3); border-bottom: 1px solid rgba(226,43,43,0.3); padding: clamp(4rem, 10vh, 7rem) var(--pad); } .pod__inner { max-width: 1100px; } .pod__title { font-family: var(--anton); font-size: clamp(2.4rem, 6.4vw, 5rem); margin: 1rem 0 1.1rem; letter-spacing: 0.02em; } .pod__lede { color: var(--bone-dim); font-size: 1rem; line-height: 1.8; max-width: 54ch; } .pod__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 2.6rem; } .tier { position: relative; border: 1px solid var(--hair); padding: 1.8rem 1.6rem; transition: border-color 0.4s, transform 0.4s; } .tier:hover { border-color: var(--red); transform: translateY(-5px); } .tier--hi { border-color: rgba(226,43,43,0.5); } .tier b { display: block; font-family: var(--anton); font-size: 2.1rem; color: var(--red); } .tier span { display: block; margin: 0.5rem 0 0.6rem; font-size: 0.58rem; letter-spacing: 0.26em; color: var(--bone); } .tier p { font-size: 0.82rem; color: var(--bone-dim); line-height: 1.6; } .tier__btn { display: inline-block; margin-top: 1.1rem; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); border-bottom: 1px solid var(--red); padding-bottom: 2px; } .tier__btn:hover { color: var(--bone); border-color: var(--bone); } /* podcast gallery (guest episodes) */ .pod__gallery { margin-top: 3.2rem; } .pod__gallery-label { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 1.3rem; } /* justified filmstrip, mixed aspects share one height and run off the right, holding full opacity past the first two frames then fading away */ .pod__strip { display: flex; gap: clamp(0.5rem, 1.2vw, 0.9rem); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,0.12) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,0.12) 100%); } .pod__strip figure { height: clamp(180px, 24vw, 300px); flex: 0 0 auto; overflow: hidden; background: var(--ink-2); } .pod__strip img { height: 100%; width: auto; max-width: none; transition: transform 0.9s cubic-bezier(.2,.8,.2,1), filter 0.5s; filter: grayscale(0.18); } .pod__strip figure:hover img { transform: scale(1.04); filter: none; } .pod__strip-hero { outline: 1px solid rgba(226,43,43,0.35); outline-offset: -1px; } @media (max-width: 700px) { .pod__strip { flex-wrap: nowrap; -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 62%,rgba(0,0,0,0.15) 100%); mask-image: linear-gradient(90deg,#000 0%,#000 62%,rgba(0,0,0,0.15) 100%); } .pod__strip figure { height: 165px; } } /* ══════════════ PACKAGES ══════════════ */ .packs { padding: clamp(4.5rem, 11vh, 8rem) var(--pad); } .packs__head { max-width: 62ch; margin-bottom: 3rem; } .packs__title { font-family: var(--anton); font-size: clamp(2.4rem, 6.4vw, 5rem); margin: 1rem 0 1rem; } .packs__head p { color: var(--bone-dim); font-size: 0.94rem; line-height: 1.8; } .packs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.3rem; } .pack { position: relative; border: 1px solid var(--hair); background: var(--ink-2); padding: 2.2rem 1.8rem 1.9rem; display: flex; flex-direction: column; gap: 0.55rem; transition: border-color 0.4s, transform 0.4s; } .pack:hover { border-color: var(--red); transform: translateY(-6px); } .pack--flag { border-color: rgba(226,43,43,0.55); } .pack--soft { border-color: rgba(185,143,94,0.4); } .pack--soft:hover { border-color: var(--gold); } .pack__tag { position: absolute; top: -0.72rem; right: 1.4rem; background: var(--red); color: var(--ink); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2em; padding: 0.42em 0.9em; } .pack__kick { font-size: 0.54rem; letter-spacing: 0.26em; color: var(--bone-dim); } .pack h3 { font-family: var(--anton); font-size: 1.55rem; letter-spacing: 0.02em; } .pack__price { font-family: var(--anton); font-size: 2.3rem; color: var(--red); line-height: 1; margin: 0.3rem 0 0.7rem; } .pack--soft .pack__price { color: var(--gold); } .pack__price em { font-family: var(--grot); font-style: normal; font-size: 0.85rem; font-weight: 500; color: var(--bone-dim); } .pack ul { flex: 1; } .pack li { font-size: 0.84rem; color: var(--bone-dim); padding: 0.36rem 0 0.36rem 1.1rem; position: relative; line-height: 1.45; } .pack li::before { content: "→"; position: absolute; left: 0; color: var(--red); font-size: 0.75rem; } .pack--soft li::before { color: var(--gold); } .pack__save { font-size: 0.7rem; color: var(--bone-dim); padding-top: 0.9rem; margin-top: 0.5rem; border-top: 1px dashed var(--hair); } .pack__save b { color: var(--bone); } .pack__btn { margin-top: 1.1rem; text-align: center; background: var(--bone); color: #0B0B0C !important; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 1em; transition: background 0.35s; } .pack__btn:hover { background: var(--red); color: var(--bone) !important; } .pack--soft .pack__btn:hover { background: var(--gold); } .packs__more { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .packs__more a:hover { color: var(--red); } /* ══════════════ ESTIMATOR SECTION ══════════════ */ .est-sec { background: var(--ink-2); padding: clamp(4.5rem, 11vh, 8rem) var(--pad); border-top: 1px solid var(--hair); } .est-sec__head { max-width: 60ch; margin-bottom: 3rem; } .est-sec__title { font-family: var(--anton); font-size: clamp(2.2rem, 6vw, 4.4rem); margin: 1rem 0 1rem; } .est-sec__head p { color: var(--bone-dim); font-size: 0.94rem; line-height: 1.8; } /* estimator widget (dark system) */ .est { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(1.6rem,4vw,4rem); align-items: start; } .est__group { margin-bottom: 2rem; } .est__label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 0.9rem; } .est__val { color: var(--red); font-size: 1rem; font-weight: 600; } .est__hint { display: block; margin-top: 0.55rem; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--bone-dim); opacity: 0.72; } .est__seg { display: flex; border: 1px solid var(--hair); } .est__seg button { flex: 1; padding: 0.9em 0.5em; background: transparent; border: none; color: var(--bone); font-family: var(--grot); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.3s, color 0.3s; } .est__seg button + button { border-left: 1px solid var(--hair); } .est__seg button.on { background: var(--red); color: var(--ink); } .est input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--hair); outline: none; cursor: pointer; } .est input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: none; } .est input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: none; } .est__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 0.9rem 1.4rem; } .est__check { display: flex; align-items: center; gap: 0.7em; cursor: pointer; font-size: 0.84rem; } .est__check input { display: none; } .est__check i { width: 16px; height: 16px; border: 1px solid var(--bone-dim); flex: none; transition: background 0.2s, border-color 0.2s; } .est__check input:checked + i { background: var(--red); border-color: var(--red); } .est__check em { font-style: normal; color: var(--bone-dim); font-size: 0.74rem; } .est__result { border: 1px solid var(--hair); background: var(--ink); padding: 2.2rem 2rem; position: sticky; top: 2rem; } .est__result-label { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-dim); } .est__price { font-family: var(--anton); font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--red); margin: 0.6rem 0 1.4rem; } .est__breakdown { border-top: 1px solid var(--hair); } .est__breakdown li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid var(--hair); font-size: 0.8rem; color: var(--bone-dim); } .est__breakdown b { color: var(--bone); font-weight: 500; } .est__cta { display: block; text-align: center; margin-top: 1.6rem; background: var(--bone); color: #0B0B0C !important; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.15em 1em; transition: background 0.3s; } .est__cta:hover { background: var(--red); color: var(--bone) !important; } .est__fine { margin-top: 1.1rem; font-size: 0.66rem; line-height: 1.7; color: var(--bone-dim); opacity: 0.78; } @media (max-width: 900px) { .est { grid-template-columns: 1fr; } .est__result { position: static; } } /* ══════════════ CONTACT + FOOTER ══════════════ */ .contact { padding: clamp(5rem, 13vh, 9rem) var(--pad) 2.4rem; } .contact__big { display: block; width: fit-content; margin: 2rem 0 3.6rem; } .contact__big span { display: block; font-family: var(--anton); font-size: clamp(2.8rem, 11vw, 9rem); line-height: 0.92; text-transform: uppercase; } .contact__l1 { color: transparent; -webkit-text-stroke: 2px var(--bone); } .contact__l2 { transition: color 0.4s; } .contact__l2 em { font-style: normal; color: var(--red); } .contact__big:hover .contact__l2 { color: var(--red); } .contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2.2rem; padding-top: 2.4rem; border-top: 1px solid var(--hair); } .contact__grid h4 { font-size: 0.6rem; letter-spacing: 0.32em; color: var(--bone-dim); margin-bottom: 0.85rem; font-weight: 500; } .contact__grid a, .contact__grid p { font-size: 0.95rem; line-height: 1.6; } .contact__grid a:hover { color: var(--red); } .foot { padding: 0 var(--pad) 2.2rem; } .foot__top { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between; align-items: center; padding: 2.2rem 0; border-top: 1px solid var(--hair); } .foot__logo { font-family: var(--anton); font-size: 1.32rem; letter-spacing: 0.04em; } .foot__logo b { color: var(--bone-dim); font-weight: 400; } .foot__nav { display: flex; flex-wrap: wrap; gap: 1.9rem; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; } .foot__nav a:hover { color: var(--red); } .foot__shop em { font-style: normal; opacity: 0.45; letter-spacing: 0.06em; text-transform: none; } .foot__bot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--hair); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); } .foot__bot a:hover { color: var(--red); } /* ══════════════ LIGHTBOX ══════════════ */ .lb { position: fixed; inset: 0; z-index: 400; background: rgba(6, 6, 8, 0.94); backdrop-filter: blur(16px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.5rem, 2vw, 2rem); padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; } .lb.open { opacity: 1; visibility: visible; } .lb__fig { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; } .lb__fig img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border: 1px solid var(--hair); box-shadow: 0 30px 90px rgba(0,0,0,0.6); } .lb__fig figcaption { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bone-dim); } .lb__close { position: absolute; top: 1.4rem; right: 1.6rem; z-index: 2; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: none; border: 1px solid rgba(234,230,222,0.3); color: var(--bone); font-size: 1rem; transition: background 0.3s, color 0.3s; } .lb__close:hover { background: var(--bone); color: var(--ink); } .lb__nav { width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px); border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(234,230,222,0.25); color: var(--bone); font-size: 1.7rem; line-height: 1; display: grid; place-items: center; flex: none; transition: background 0.3s, border-color 0.3s; } .lb__nav:hover { background: var(--red); border-color: var(--red); color: var(--ink); } .lb__count { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); font-size: 0.62rem; letter-spacing: 0.24em; color: var(--bone-dim); } @media (max-width: 700px) { .lb { grid-template-columns: 1fr; } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); } .lb__prev { left: 0.6rem; } .lb__next { right: 0.6rem; } } /* ══════════════ RATE CARD GATE ══════════════ */ .gate { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); overflow-y: auto; background: rgba(6,6,8,0.9); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; } .gate.open { opacity: 1; visibility: visible; } .gate__card { position: relative; width: min(100%, 660px); background: var(--ink-2); border: 1px solid var(--hair); padding: clamp(1.8rem, 4vw, 3rem); transform: translateY(18px); transition: transform 0.45s cubic-bezier(.16,1,.3,1); } .gate.open .gate__card { transform: none; } .gate__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: none; border: 1px solid rgba(234,230,222,0.28); color: var(--bone); cursor: pointer; transition: background 0.3s, color 0.3s; } .gate__close:hover { background: var(--bone); color: var(--ink); } .gate__title { font-family: var(--anton); font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0.9rem 0 0.8rem; } .gate__lede { color: var(--bone-dim); font-size: 0.92rem; line-height: 1.75; max-width: 52ch; } .gate__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; } .gate__hp { position: absolute; left: -9999px; } .gate__field { display: flex; flex-direction: column; gap: 0.5rem; } .gate__field--wide, .gate__btn, .gate__fine, .gate__err { grid-column: 1 / -1; } .gate__field span { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bone-dim); } .gate__field input, .gate__field select, .gate__field textarea { background: var(--ink); border: 1px solid var(--hair); color: var(--bone); font-family: var(--grot); font-size: 0.92rem; padding: 0.85em 0.9em; border-radius: 0; transition: border-color 0.3s; } .gate__field input:focus, .gate__field select:focus, .gate__field textarea:focus { outline: none; border-color: var(--red); } .gate__field select option { background: var(--ink); } .gate__btn { margin-top: 0.4rem; background: var(--bone); color: #0B0B0C; border: none; cursor: pointer; font-family: var(--grot); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.15em 1em; transition: background 0.3s, color 0.3s; } .gate__btn:hover { background: var(--red); color: var(--bone); } .gate__btn[disabled] { opacity: 0.55; cursor: wait; } .gate__fine { font-size: 0.68rem; color: var(--bone-dim); opacity: 0.8; } .gate__err { font-size: 0.78rem; color: var(--red); } .gate__err a { text-decoration: underline; } @media (max-width: 620px) { .gate__form { grid-template-columns: 1fr; } } /* reveal defaults */ [data-rv] { opacity: 0; transform: translateY(26px); } @media (prefers-reduced-motion: reduce) { .grain, .cue b, .seam__dot, .panel__slide img { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; } [data-rv] { opacity: 1; transform: none; } .is-loading .panel--dark, .is-loading .panel--light { clip-path: inset(0 0 0 0); } .is-loading .seam__word, .is-loading .seam__sub, .is-loading .panel__inner > *, .is-loading .seam__pod, .is-loading .cue { opacity: 1; } /* no pinning: the rail collapses to three plain, fully-visible steps */ .rail { height: auto; padding-bottom: 4rem; } .rail__stage { position: static; height: auto; min-height: 0; } .rail__step { opacity: 1; filter: none; transform: none; } }