/* ========================================================================== IT'S HIM — MEMBERSHIP ("Descend into the club") A distinct world layered on top of styles.css. Reuses the homepage palette, type system, nav, footer, .btn-gold, .appstore, and the THE·script·CAP lockup — but composes its own EDITORIAL placement: single feathered images that bleed off the frame edges while the text overlaps and layers over them, with dramatic negative space. Not a copy of the homepage's alternating panels. ========================================================================== */ .membership-page { background: var(--bg); } /* NOTE: the ambient background (flowing smoke + amber edge lighting + dark base) is now a REUSABLE component — see ambient.css / ambient.js, added via two tags in /. It is no longer defined here. */ /* ---- Shared eyebrow (small tracked label above titles) ------------------ */ .eyebrow { margin: 0 0 clamp(10px, 1.6vh, 18px); font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); padding-left: 0.42em; } /* ========================================================================== Shared media treatment — feathered on all edges so photos dissolve into the dark. Images are large and BLEED off the frame; text overlaps them. ========================================================================== */ .m-media { position: absolute; margin: 0; z-index: 1; pointer-events: none; line-height: 0; will-change: transform, opacity; } .m-media img { display: block; width: auto; height: auto; } .m-media--feather img { /* Heavy feather — a long, gradual fade on every edge so the photo dissolves softly into the dark ambient with no hard edges. A radial layer melts the corners too, and the linear layers keep the anchored edges soft. */ -webkit-mask-image: radial-gradient(72% 66% at 50% 48%, #000 30%, rgba(0,0,0,0.35) 66%, transparent 88%), linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(72% 66% at 50% 48%, #000 30%, rgba(0,0,0,0.35) 66%, transparent 88%), linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-composite: intersect; filter: drop-shadow(0 30px 66px rgba(0,0,0,0.5)); } /* ---- Shared title / slogan / body (same faces as the homepage) ---------- */ .m-name { margin: 0; font-family: var(--font-caps); font-weight: 400; font-size: clamp(30px, 5vw, 66px); line-height: 0.94; white-space: nowrap; color: var(--ink); text-shadow: 0 6px 38px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.8); } .m-name .t-the, .m-name .t-cap { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.06em; } .m-name .t-script { font-family: var(--font-script); font-size: 1.5em; text-transform: none; letter-spacing: 0.005em; padding: 0 0.06em; } .m-slogan { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(23px, 3.3vw, 42px); line-height: 1.02; color: var(--gold-bright); text-shadow: 0 2px 30px rgba(0,0,0,0.85); } .m-desc { margin: 0; max-width: 44ch; font-family: var(--font-body); font-weight: 500; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.75; letter-spacing: 0.02em; color: var(--muted); text-shadow: 0 1px 26px rgba(0,0,0,0.9); } /* ---- Soft legibility scrim behind every text block ---------------------- A wide, fully-feathered radial that darkens the frame BEHIND the copy where it overlaps an image — no hard edges, so it never reads as a box. It lives inside each inner's stacking context, so it sits above the image but below the text. */ .threshold__inner, .tier__inner, .join__inner { position: relative; } .threshold__inner::before, .tier__inner::before, .join__inner::before { content: ""; position: absolute; z-index: -1; inset: -16% -20%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(14,9,8,0.74) 0%, rgba(14,9,8,0.5) 44%, var(--bg-0) 74%); } /* ========================================================================== The descent container ========================================================================== */ .descent { position: relative; z-index: 5; } /* ========================================================================== HERO — a centered opening moment. The two-men photo fills the hero as a feathered, darkened BACKGROUND; all copy is centered over it. Bookends with the centered "Way In" close at the bottom. ========================================================================== */ .threshold { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; /* content group evenly centered in the section */ justify-content: center; text-align: center; padding: clamp(96px, 14vh, 160px) clamp(28px, 8vw, 128px); overflow: clip; } /* Contained photo — both men shown FULLY (heads in frame, not cropped), at a moderate scale, in their NATURAL moody tone (no added warmth). The edges feather softly into the black so it dissolves in rather than ending in a hard rectangle — but it keeps its natural shape (not an oval). */ .threshold__media { position: absolute; inset: auto; left: 50%; top: 49%; transform: translate(-50%, -50%); width: auto; height: auto; z-index: 1; } .threshold__media img { width: clamp(600px, 82vw, 1340px); /* slightly wider — reaches a bit past the headline */ aspect-ratio: 1.42 / 1; /* more horizontal: trimmed top/bottom lets it spread sideways without enlarging the men */ height: auto; object-fit: cover; object-position: 50% 0%; /* top-aligned: heads/faces stay fully in frame, extra trim comes off the bottom */ filter: brightness(0.9) saturate(0.95) contrast(1.05); /* dimmed a touch — moodier, matches the darker site tone; no yellow warmth */ /* feather all edges: a soft radial rounds the corners while the side + vertical linears fade the edges into the dark. Top gets a slight fade, bottom slightly more, so the image gently dissolves into the black above and below. */ -webkit-mask-image: radial-gradient(84% 84% at 50% 40%, #000 42%, rgba(0,0,0,0.35) 74%, transparent 100%), linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(84% 84% at 50% 40%, #000 42%, rgba(0,0,0,0.35) 74%, transparent 100%), linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%); mask-composite: intersect; } .threshold__media::after { display: none; } .threshold__inner { position: relative; z-index: 3; max-width: min(94vw, 760px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 2vh, 24px); } .threshold__inner .eyebrow { padding-left: 0; font-size: clamp(18px, 1.7vw, 24px); } /* larger — carries weight above the headline */ /* slightly stronger scrim behind the centred hero copy so it stays readable over the wider, warmer backdrop */ .threshold__inner::before { inset: -20% -28%; background: radial-gradient(ellipse at center, rgba(14,9,8,0.8) 0%, rgba(14,9,8,0.52) 48%, var(--bg-0) 78%); } .threshold__title { margin: 0; font-family: var(--font-caps); font-weight: 400; font-size: clamp(40px, 7vw, 96px); line-height: 0.92; white-space: nowrap; color: var(--ink); text-shadow: 0 6px 44px rgba(0,0,0,0.95); } .threshold__title .t-the, .threshold__title .t-cap { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.05em; } .threshold__title .t-script { font-family: var(--font-script); font-size: 1.35em; text-transform: none; padding: 0 0.04em; color: var(--ink); } .threshold__slogan { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.06; color: var(--gold-bright); text-shadow: 0 2px 30px rgba(0,0,0,0.85); } .threshold__desc { margin: 0; max-width: 40ch; font-family: var(--font-body); font-weight: 500; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.75; letter-spacing: 0.02em; color: var(--muted); text-shadow: 0 1px 26px rgba(0,0,0,0.9); } /* scroll cue — a downward "descend" invite */ .scroll-cue { margin-top: clamp(10px, 2vh, 22px); /* original — keeps the eyebrow/headline/slogan group in its original centered position */ position: relative; top: clamp(120px, 20vh, 190px); /* shift ONLY DESCEND well down toward the lower hero (relative, no layout change) — group above stays put */ display: inline-flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; } .scroll-cue > span:first-child { font-family: var(--font-body); font-weight: 300; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); padding-left: 0.42em; transition: color 240ms ease; } .scroll-cue:hover > span:first-child { color: var(--gold-bright); } .scroll-cue__line { position: relative; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--muted), var(--bg-0)); opacity: 0.5; overflow: hidden; } .scroll-cue__dot { position: absolute; top: 0; left: -1.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); animation: cueFall 2.4s cubic-bezier(0.4,0,0.2,1) infinite; } @keyframes cueFall { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } } /* ========================================================================== THE TIERS — each is ONE dense, composed chapter that flows downward: a wide title that announces the chapter, the tier identity + price beneath it, then a tight, gently-staggered perk list with feathered photos hugging it. No scatter, no black voids. ========================================================================== */ .tier { position: relative; padding: clamp(56px, 8vh, 100px) clamp(24px, 5vw, 92px) clamp(64px, 9vh, 120px); overflow: clip; --pw: clamp(300px, 33vw, 460px); /* shared width of the two paired photos */ } /* --- Photos: LARGER and SHARP — only a soft edge where they meet the dark, no heavy blur, no hard rectangle. Pulled IN to HUG the perk list; behind the copy (z-index 1). Their side is set per tier (mirrored). --- */ .tier__photo { position: absolute; z-index: -1; /* inside the chapter, ALWAYS beneath the text — never covers a word */ margin: 0; pointer-events: none; line-height: 0; will-change: opacity, transform; } /* Two paired photos per tier down one side + one narrower accent that bleeds off the opposite edge. The accent has a FIXED width so its inner edge lands at a constant offset from the list column at every viewport width. */ .tier__photo--upper, .tier__photo--lower { width: var(--pw); height: auto; /* height derives from each photo's real file ratio below */ } /* Frame each paired photo to its ORIGINAL file ratio so object-fit: cover shows the WHOLE image with nothing clipped top or bottom — portraits become tall, landscapes stay wide. Width is unchanged, so nothing is upscaled past its current width; we only stop the vertical clipping. */ .tier--one .tier__photo--upper { aspect-ratio: 900 / 1125; } /* m-people-cut — cutout */ .tier--one .tier__photo--lower { aspect-ratio: 1500 / 1000; } /* m-lounge — landscape */ .tier--two .tier__photo--upper { aspect-ratio: 1800 / 1200; } /* m-den — landscape */ .tier--two .tier__photo--lower { aspect-ratio: 900 / 1125; } /* m-suits-cut — cutout */ /* Background-removed cutout figures replace the portrait photos. The removal only cleared the area ABOVE the figures — the figures themselves run to the left, right and bottom edges of the frame, so those edges cut off as a hard box. They inherit the SAME soft radial edge-fade as the other paired photos (from .tier__photo--upper/--lower img) so all four edges dissolve into the dark with no rectangle. Sized down to fit beside the perks, clear of every other element, WITHOUT growing the section. No blend, no drop-shadow. */ /* NO cropping frame: the figure shrinks to the image, and the image is sized by HEIGHT only (~400px) with width auto, so it renders at full natural ratio with the whole picture — heads and their transparent headroom fully intact. */ .tier__photo--cutout { width: auto !important; height: auto !important; aspect-ratio: auto !important; } .tier__photo--cutout img { width: auto !important; height: clamp(340px, 30vw, 420px) !important; /* Tier Two size (Tier One sets its own height below) */ max-width: none !important; object-fit: fill; /* element already IS the natural ratio, so nothing is scaled/cropped */ mix-blend-mode: normal !important; filter: none !important; /* Soft, INDEPENDENT edge fades on the BOTTOM and both SIDES (the people are cut off at the left/right edges too). Two intersecting linear gradients — a straight fade per edge, NOT a radial/oval vignette. The top is left alone (already transparent above their heads). !important because a later generic rule would otherwise re-apply a radial. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 98%), linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%) !important; -webkit-mask-composite: source-in !important; mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 98%), linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%) !important; mask-composite: intersect !important; } /* TIER ONE (the four guys) only: crop the bottom shorter so it reads as a HORIZONTAL rectangle (heads / faces / drinks, no knees). object-position: 0% keeps the heads pinned at top; the lower portion crops off, and the bottom fade above applies to that new shorter edge. Tier two keeps the full-height figure. */ /* TIER ONE uses the SAME fade as tier two (the shared .tier__photo--cutout img mask above — no override here). object-fit crops a MODEST amount off the bottom (object-position 0% keeps the heads/people; ~12% trims off the lower legs), so it reads a touch more horizontal without becoming a rectangle. Height is bounded by the lounge photo below, which stays put. */ .tier--one .tier__photo--cutout img { width: clamp(250px, 21vw, 305px) !important; height: clamp(262px, 23vw, 335px) !important; object-fit: cover !important; object-position: 50% 0% !important; /* Soft organic dissolve with ROUNDED corners: the radial rounds the corners (no hard square corner) while the two linears keep the sides + bottom fading evenly. Centred high so the heads stay solid. */ -webkit-mask-image: radial-gradient(82% 94% at 50% 40%, #000 0%, #000 56%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%) !important; -webkit-mask-composite: source-in !important; mask-image: radial-gradient(82% 94% at 50% 40%, #000 0%, #000 56%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%) !important; mask-composite: intersect !important; } .tier__photo--accent { width: 360px; height: clamp(300px, 40vh, 460px); } .tier__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 40%; /* Dissolve on ALL FOUR edges — the SAME treatment as the feathered hero drink and the home-page section images (.m-media--feather): a RADIAL ellipse melts the corners and the whole rectangle away, and the two linear layers keep each edge soft. Without the radial layer, intersecting linears leave a big opaque rectangle in the middle that reads as a box — that was the bug. */ -webkit-mask-image: radial-gradient(72% 66% at 50% 46%, #000 28%, rgba(0,0,0,0.35) 62%, transparent 90%), linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(72% 66% at 50% 46%, #000 28%, rgba(0,0,0,0.35) 62%, transparent 90%), linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-composite: intersect; } /* The two PAIRED photos get a SINGLE soft radial — no linear layers at all. The linears are what draw straight-line fades (and, on a short box, a hard top/bottom edge); a lone ellipse dissolves on every side with no straight edge anywhere, so in the taller portrait frame each reads as a soft VERTICAL oval seated in the smoke. Slightly taller than wide (58% × 74%) and centred a touch high so faces sit in the opaque core. The accent photos keep the base treatment above. */ .tier__photo--upper img, .tier__photo--lower img { object-position: 50% 40%; /* Edge treatment ONLY — the frame keeps its original size. A SINGLE soft radial (no linear layers, which draw straight-line fades) whose transparent stop is reached BEFORE every edge of this short frame: vertical radius 58% of height puts the top/bottom edges past `transparent 82%`, so they hit zero alpha with no straight cut; horizontal radius 56% does the same on the sides. Every side dissolves into the dark with no visible border. */ -webkit-mask-image: radial-gradient(56% 58% at 50% 50%, #000 0%, #000 34%, rgba(0,0,0,0.32) 60%, transparent 82%); mask-image: radial-gradient(56% 58% at 50% 50%, #000 0%, #000 34%, rgba(0,0,0,0.32) 60%, transparent 82%); } /* --- Chapter content column --- */ .tier__chapter { position: relative; z-index: 3; max-width: min(94vw, 1180px); margin: 0 auto; } /* --- Header: heads the chapter. A wide one-line title, then the identity + PRICE (prominent), a flat even rule, then slogan + intro. Centred content, the whole block wider than the perk list so it reads as the list's header. --- */ .tier__open { max-width: min(94vw, 840px); margin-bottom: clamp(28px, 4.5vh, 54px); display: flex; flex-direction: column; text-align: center; align-items: center; gap: clamp(4px, 0.7vh, 8px); /* tighter — header lines group as one compact heading */ } .tier__open .m-name { font-size: clamp(28px, 4.3vw, 62px); line-height: 1.02; margin: 0; white-space: nowrap; /* ONE horizontal line, both tiers */ } .tier__id { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 16px rgba(0,0,0,0.85); } .tier__id-sep { color: rgba(199,154,84,0.55); margin: 0 0.2em; } .tier__id-price { color: var(--gold-bright); font-weight: 600; } .tier__rule { display: block; width: min(96%, 700px); /* long */ height: 1px; margin: clamp(2px, 0.35vh, 4px) 0 clamp(1px, 0.3vh, 4px); /* tighter around the underline */ background: rgba(199,154,84,0.42); /* flat, even intensity — no gradient */ } .tier__open .m-slogan, .tier__open .m-desc { max-width: 48ch; } /* --- Grade + descend: rich, present — Door In lighter/warmer (upstairs), Full Experience deeper (downstairs). --- */ .tier--one .tier__photo img { /* upstairs — lighter, warmer, present */ filter: brightness(0.9) saturate(1.18) contrast(1.14) drop-shadow(0 22px 54px rgba(0,0,0,0.55)); } .tier--two .tier__photo img { /* downstairs — darker, deeper */ filter: brightness(0.64) saturate(1.08) contrast(1.2) drop-shadow(0 22px 54px rgba(0,0,0,0.6)); } /* The downstairs shots are near-black; SCREEN blend drops their dark background into the smoke so they melt in rather than sitting as photos on the dark. Only the dark tier — the warm/bright upstairs shots keep a normal blend. Requires the photos NOT to be isolated from the ambient (see .tier__chapter). */ .tier--two .tier__photo img { mix-blend-mode: screen; } /* ---- The descent: a TIGHT, cohesive perk list with a gentle stagger so it still flows but reads as ONE connected list. Quiet gold divider + dot. --- */ .perkflow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .perk { position: relative; width: min(84vw, 440px); padding: clamp(12px, 1.6vh, 18px) 0 0 28px; margin-bottom: clamp(20px, 3vh, 40px); border-top: 1px solid rgba(199,154,84,0.28); font-family: var(--font-body); font-weight: 300; font-size: clamp(14px, 1.08vw, 15.5px); line-height: 1.62; letter-spacing: 0.015em; color: var(--muted); text-shadow: 0 1px 20px rgba(0,0,0,0.9), 0 0 34px rgba(0,0,0,0.6); } .perk:last-child { margin-bottom: 0; } .perk::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 13px rgba(199,154,84,0.6); } .perk__lead { color: var(--ink); font-weight: 500; letter-spacing: 0.02em; } /* ========================================================================== MIRRORED LEAN — The Door In leans LEFT, The Full Experience leans RIGHT, so the page balances as you scroll. Header, perks and photos all mirror. ========================================================================== */ /* Tier 1 — header CENTERED on the page; perks stay LEFT; photos on right + accent left. */ .tier--one .tier__open { margin-left: auto; margin-right: auto; } .tier--one .perkflow { align-items: flex-start; transform: translateX(32px); } /* small rightward shift of the content group (header stays centered) */ .tier--one .perk:nth-child(1) { margin-left: clamp(0px, 3vw, 42px); } .tier--one .perk:nth-child(2) { margin-left: clamp(16px, 8vw, 120px); } .tier--one .perk:nth-child(3) { margin-left: clamp(0px, 5vw, 72px); } .tier--one .perk:nth-child(4) { margin-left: clamp(16px, 9vw, 136px); } .tier--one .perk:nth-child(5) { margin-left: clamp(0px, 3vw, 42px); } /* Photos live INSIDE the centered chapter, so their inner edge tracks the list column at every width. The perk column reaches at most stagger(≤136) + 440 = ~576px from the chapter's left edge. Two photos sit on the RIGHT past that, on SEPARATE vertical bands (upper / lower) so they never pile up; one accent bleeds off the LEFT edge, its inner edge kept well left of the perk column. */ .tier--one .tier__photo--upper { left: 700px; right: auto; top: 35%; } /* Lounge: shown at its FULL image (chairs included), sized to fit inside the section (no clip), tucked slightly UNDER the four-guys above it (z-index below the cutout, so the people read as standing in front of the room). The whole group (cutout + lounge) sits at top:35% now — moved up into the empty top space so the lounge can grow bigger into the freed bottom room; the -42px keeps the overlap between the two photos unchanged. */ .tier--one .tier__photo--lower { left: 637px; right: auto; top: calc(35% + clamp(262px, 23vw, 335px) - 42px); width: clamp(300px, 27vw, 388px); z-index: -2; } .tier--one .tier__photo--accent { left: -308px; right: auto; top: 52%; } /* Tier 2 — header CENTERED on the page; perks stay RIGHT; photos on left + accent right. */ .tier--two .tier__open { margin-left: auto; margin-right: auto; } .tier--two .perkflow { align-items: flex-end; transform: translateX(-32px); } /* small leftward shift of the content group (header stays centered), mirror of tier one */ .tier--two .perk { text-align: left; } .tier--two .perk:nth-child(1) { margin-right: clamp(0px, 3vw, 42px); } .tier--two .perk:nth-child(2) { margin-right: clamp(16px, 8vw, 120px); } .tier--two .perk:nth-child(3) { margin-right: clamp(0px, 5vw, 72px); } .tier--two .perk:nth-child(4) { margin-right: clamp(16px, 9vw, 136px); } .tier--two .perk:nth-child(5) { margin-right: clamp(0px, 3vw, 42px); } .tier--two .perk:nth-child(6) { margin-right: clamp(16px, 7vw, 108px); } /* Mirror: two photos on the LEFT (upper / lower, separate bands), one accent bleeding off the RIGHT edge. */ .tier--two .tier__photo--upper { right: 700px; left: auto; top: 29%; } /* nudged up slightly — carpet line clears the men's heads; still overlaps the photo below */ .tier--two .tier__photo--lower { right: 652px; left: auto; top: 54%; } .tier--two .tier__photo--accent { right: -308px; left: auto; top: 52%; } /* ---- The stairs divider between the two tiers -------------------------- */ .stairs { position: relative; z-index: 5; display: grid; place-items: center; padding: clamp(24px, 5vh, 56px) 0; } .stairs__label { font-family: var(--font-body); font-weight: 300; font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); opacity: 0.7; padding-left: 0.5em; } .stairs::before, .stairs::after { content: ""; position: absolute; left: 50%; width: 1px; background: linear-gradient(to bottom, var(--bg-0), rgba(199,154,84,0.4), var(--bg-0)); } .stairs::before { top: -10px; height: clamp(26px, 5vh, 52px); transform: translateX(-50%); } .stairs::after { bottom: -10px; height: clamp(26px, 5vh, 52px); transform: translateX(-50%); } /* ========================================================================== CLOSE — "The Way In": a CENTERED closing moment that bookends the hero. The candlelit photo fills the section as a feathered, darkened background; the join copy + App Store button are centered over it. ========================================================================== */ .join { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(100px, 15vh, 170px) clamp(28px, 8vw, 128px); overflow: clip; } /* full-bleed candlelit background, feathered into the ambient */ .join__media { position: absolute; inset: 0; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; transform: none; z-index: 1; } .join__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; /* keep the candle glow visible low-centre */ opacity: 1; filter: none; /* heavier feather so the photo edges dissolve softly into the ambient */ -webkit-mask-image: radial-gradient(86% 82% at 50% 54%, #000 40%, rgba(0,0,0,0.4) 74%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(86% 82% at 50% 54%, #000 40%, rgba(0,0,0,0.4) 74%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; } .join__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 52%, transparent 26%, rgba(14,9,8,0.66) 100%), linear-gradient(to top, rgba(14,9,8,0.74) 0%, rgba(14,9,8,0.12) 46%, transparent 66%), linear-gradient(to bottom, rgba(14,9,8,0.58) 0%, transparent 32%); /* Fade this dark overlay in from the very top edge so the section's top does not step darker than the tier above — the horizontal seam dissolves into the ambient and the two dark backgrounds flow together. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%); } .join__inner { position: relative; z-index: 3; margin: 0 auto; max-width: min(92vw, 620px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 2vh, 24px); } .join__slogan, .join__desc { text-align: center; } .join__desc { max-width: 42ch; } .join__appstore { margin-top: clamp(10px, 2vh, 20px); } .join__note { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); opacity: 0.6; } /* ========================================================================== Scroll-driven entrance (same technique as the homepage sections) ========================================================================== */ /* Cross-fade: content materialises as it enters, HOLDS through the middle, and dissolves as it leaves — so an outgoing section is still fading while the next is already fading in. Sections blend across their boundaries (no hard cuts), over the continuous fixed ambient. */ @keyframes m-rise { 0% { opacity: 0; transform: translateY(46px); filter: blur(5px); animation-timing-function: cubic-bezier(0.16,0.84,0.24,1); } 24% { opacity: 1; transform: translateY(0); filter: blur(0); } 80% { opacity: 1; transform: translateY(0); filter: blur(0); animation-timing-function: cubic-bezier(0.6,0,0.85,0.35); } 100% { opacity: 0; transform: translateY(-30px); filter: blur(3px); } } /* Chapter elements SURFACE as they enter the viewport, then stay (a long chapter must stay readable — no fade-out). Photos rise softly out of the background. */ @keyframes reveal-up { from { opacity: 0; transform: translateY(40px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes reveal-photo { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .threshold__inner, .join__inner { animation: m-rise both; animation-timeline: view(); animation-range: cover; } /* each chapter element surfaces as it enters, then holds */ .tier__open, .perk, .tier__price { animation: reveal-up both; animation-timeline: view(); animation-range: entry 2% entry 44%; } .tier__photo { animation: reveal-photo both; animation-timeline: view(); animation-range: entry 0% cover 28%; } } } /* ========================================================================== Responsive — stack cleanly on narrow screens (mirrors homepage approach) ========================================================================== */ @media (max-width: 960px) { .threshold, .join { flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(120px, 18vh, 170px) clamp(26px, 7vw, 60px) clamp(70px, 12vh, 120px); } .threshold__inner, .tier__inner, .join__inner { max-width: 100%; margin: 0 !important; text-align: left !important; align-items: flex-start !important; animation: none !important; } .threshold__inner::before, .tier__inner::before, .join__inner::before { display: none; } .threshold__title { white-space: normal; font-size: clamp(40px, 12vw, 72px); line-height: 1; } .m-name { white-space: normal; font-size: clamp(30px, 9vw, 52px); line-height: 1.05; } /* one supporting photo below the copy at a readable size */ .m-media { position: relative !important; inset: auto !important; transform: none !important; order: 2; align-self: center; margin: clamp(28px, 5vh, 52px) auto 0; animation: none !important; opacity: 1 !important; } .m-media img { height: auto !important; width: min(84vw, 420px) !important; max-width: 84vw !important; } .perks, .tier--two .perks { align-self: flex-start; text-align: left; } .tier--two .tier__price { align-self: flex-start; } /* Hero + "Way In" stay CENTERED with a full-bleed background photo on mobile (they are not side-anchored like the tiers). */ .threshold, .join { align-items: center; } .threshold__inner, .join__inner { text-align: center !important; align-items: center !important; } /* Way In keeps its full-bleed candle background on mobile */ .join__media { position: absolute !important; inset: 0 !important; order: 0 !important; margin: 0 !important; align-self: stretch !important; } .join__media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } /* Hero stays a contained, centred, feathered photo on mobile too */ .threshold__media { position: absolute !important; inset: auto !important; left: 50% !important; top: 46% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; order: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; } .threshold__media img { width: auto !important; height: clamp(320px, 52vh, 560px) !important; max-width: 92vw !important; object-fit: fill; } /* re-enable a soft scrim behind the centered hero / Way-In copy so it stays readable over the full-bleed photo on small screens */ .threshold__inner::before, .join__inner::before { display: block; inset: -8% -12%; background: radial-gradient(ellipse at center, rgba(14,9,8,0.74) 0%, rgba(14,9,8,0.46) 52%, var(--bg-0) 80%); } /* Tiers stay tall chapters on mobile: un-stagger the perks into one readable column, and drop the atmospheric edge photos for now (a later mobile pass will reflow them). The sticky anchor, centred open and centred price stay. */ .tier { padding: clamp(90px, 14vh, 130px) clamp(24px, 7vw, 44px) clamp(80px, 12vh, 120px); } .tier__chapter, .tier__open { max-width: 100%; } .perkflow { transform: none !important; } .perk { max-width: 100%; margin-left: 0 !important; margin-bottom: clamp(18px, 3vh, 30px); /* condensed — perks sit tighter together on mobile */ } /* Tier photos reflow into the stacked chapter, and each tier reads as ONE connected composition like the homepage sections: the cut-out figures (the hero picture) sit on TOP, the tier header tucks UP under the photo's feathered bottom edge, then the perks, then a room photo closes the chapter. Feathered masks inherited unchanged, keeping the darker-as-you-descend grading. */ .tier__chapter { display: flex; flex-direction: column; align-items: center; } .tier__open { order: 1; align-self: stretch; position: relative; z-index: 2; margin-top: clamp(-72px, -9vh, -44px); /* tuck the header up under the photo (matches homepage) */ } .perkflow { order: 2; align-self: stretch; margin-top: clamp(30px, 5vh, 56px); } /* clearer gap between the header block and the perks */ .tier__photo { display: block !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; z-index: auto !important; align-self: center !important; margin: clamp(18px, 3.5vh, 40px) auto !important; opacity: 1 !important; } /* Two photos per tier reads clean on a phone — drop the small accent bleed. */ .tier__photo--accent { display: none !important; } /* The cut-out figures = the hero picture, on top. No bottom margin so the header can tuck the full overlap amount up under the feathered base. */ .tier__photo--cutout { order: 0; width: auto !important; height: auto !important; margin-bottom: 0 !important; } .tier .tier__photo--cutout img { width: min(74vw, 300px) !important; height: auto !important; max-width: 74vw !important; } /* The room / landscape photo closes the chapter after the perks, sized to the phone. */ .tier__photo--upper:not(.tier__photo--cutout), .tier__photo--lower:not(.tier__photo--cutout) { order: 3; width: min(82vw, 380px) !important; height: auto !important; } } /* Desktop only: enlarge each tier's WHOLE composition uniformly, as one group, so the chapters fill more of the section and read fuller. `zoom` scales the header, perk text, photos, offsets and spacing all by the same factor — every size and position relationship (and the left/right lean) is preserved exactly; nothing rearranges or re-centers. It reflows (unlike transform) so nothing clips, and it doesn't disturb the transform-based reveal animations. */ @media (min-width: 961px) { .tier__chapter { zoom: 1.15; } /* The Full Experience carries 6 perks + taller photos; the section's padding is fixed (not zoomed), so at shorter viewports the composition ran past the clipped bottom edge. Scale THIS tier's whole composition down a touch — uniformly, same arrangement/overlap/leans — so it fits with the last perk fully visible. */ .tier--two .tier__chapter { zoom: 1.05; } } @media (prefers-reduced-motion: reduce) { .scroll-cue__dot { animation: none; } }