.membership-page { overflow: hidden; background: #fff; color: #111; } .membership-hero { position: relative; min-height: 630px; padding: 170px 24px 80px; overflow: hidden; background: radial-gradient(65% 100% at 80% 55%, rgba(92,53,21,.2), transparent 70%), #080807; color: #fff; } .membership-hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; } .membership-hero__inner { position: relative; z-index: 1; width: min(100%,1216px); margin: auto; } .membership-hero__content { position: relative; z-index: 2; max-width: 820px; } .membership-eyebrow,.membership-card__starting { margin: 0 0 22px; color: var(--primary); font: 700 12px/1.4 Sora,sans-serif; letter-spacing: 4px; text-transform: uppercase; } .membership-hero h1 { margin: 0 0 28px; max-width: 800px; font-size: clamp(48px,6vw,82px); line-height: 1.04; letter-spacing: -3px; } .membership-hero__intro { max-width: 720px; margin: 0; color: #aaa49d; font-size: 18px; line-height: 1.7; } .membership-hero__lion { position: absolute; right: -80px; bottom: -115px; width: 390px; opacity: .58; filter: grayscale(1) brightness(.62); } .membership-hero .reveal-up { animation: membership-hero-reveal 850ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both; } @keyframes membership-hero-reveal { from { opacity: 0; transform: translate3d(0,42px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } [data-scroll-reveal] { opacity: 0; transform: translate3d(0,42px,0) scale(.985); transition: opacity 750ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform 750ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms); } [data-scroll-reveal].is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); } .membership-plans { padding: 90px 24px; background: #fff; } .membership-card { width: min(100%,448px); margin: auto; padding: 42px 40px 38px; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg,#454341,#282827); color: #fff; box-shadow: 0 26px 65px rgba(24,18,12,.2); } .membership-card__starting { text-align: center; } .membership-card__switch { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; width: min(100%,350px); margin: 0 auto 22px; padding: 4px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; } .membership-card__switch button { padding: 10px 15px; border: 0; border-radius: 999px; background: transparent; color: #aaa7a4; font: 700 14px Sora,sans-serif; cursor: pointer; transition: .25s ease; } .membership-card__switch button.is-active { background: var(--primary); color: #16100a; box-shadow: 0 7px 22px rgba(255,148,24,.3); } .membership-card__price { display: flex; align-items: baseline; justify-content: center; margin: 0; } .membership-card__price span { font: 700 35px Sora,sans-serif; } .membership-card__price strong { font: 800 64px/1 Sora,sans-serif; } .membership-card__price small { margin-left: 6px; color: #aaa7a4; font-size: 14px; } .membership-card__rule { height: 1px; margin: 30px 0; background: rgba(255,255,255,.15); } .membership-card__custom { margin: 6px 0 0; padding: 24px; border: 1px solid rgba(255,148,24,.35); border-radius: 18px; background: rgba(8,8,7,.28); } .membership-card__custom[hidden] { display: none; } .membership-card__custom h2 { margin: 0 0 8px; font-size: 22px; } .membership-card__custom p { margin: 0 0 20px; color: #b9b5b1; font-size: 14px; line-height: 1.65; } .membership-card__custom label { display: block; margin-bottom: 8px; color: #fff; font: 700 12px/1.4 Sora,sans-serif; } .membership-card__amount { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: #fff; color: #19130e; } .membership-card__amount:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,148,24,.18); } .membership-card__amount span { font: 800 22px Sora,sans-serif; } .membership-card__amount input { width: 100%; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent; color: #19130e; font: 800 24px Sora,sans-serif; } .membership-card__amount small { color: #6f6963; font-size: 12px; } .membership-card__custom-hint { display: block; margin-top: 8px; color: #aaa7a4; font-size: 11px; } .membership-card h2 { margin-bottom: 8px; font-size: 25px; line-height: 1.3; } .membership-card__intro { margin: 0 0 28px; color: #b9b5b1; font-size: 14px; line-height: 1.7; } .membership-card h3 { margin: 27px 0 12px; color: #d3cfcb; font-size: 12px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; } .membership-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .membership-list li { position: relative; padding-left: 32px; color: #d6d2ce; font-size: 14px; } .membership-list li::before { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; } .membership-list--included li::before { content: "✓"; background: rgba(255,148,24,.2); color: var(--primary); } .membership-list--excluded li { color: #85817e; } .membership-list--excluded li::before { content: "−"; background: rgba(255,255,255,.07); color: #716e6b; } .membership-card__button { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 38px; padding: 17px 24px; border-radius: 999px; background: var(--primary); color: #16100a; font: 700 15px Sora,sans-serif; text-decoration: none; transition: transform .25s ease,background .25s ease; } .membership-card__button:hover { background: #ffab48; transform: translateY(-2px); } .membership-card__button.is-disabled { opacity: .5; cursor: not-allowed; transform: none; } .membership-card__switch button.is-active, .membership-card__price strong { animation: membership-pop 380ms cubic-bezier(.16,1,.3,1); } @keyframes membership-pop { 0% { transform: scale(.88); opacity: .55; } 100% { transform: scale(1); opacity: 1; } } .membership-more { padding: 88px 24px; background: #0a0908; color: #fff; text-align: center; } .membership-more__inner { width: min(100%,760px); margin: auto; } .membership-more h2 { margin-bottom: 18px; font-size: clamp(34px,4vw,52px); line-height: 1.1; } .membership-more p { margin: 0 auto 28px; color: #aaa49d; font-size: 17px; line-height: 1.7; } @media (max-width: 820px) { .membership-hero { min-height: 590px; padding-top: 135px; } .membership-hero__content { max-width: 72%; } .membership-hero__lion { right: -100px; width: 350px; } } @media (max-width: 600px) { .membership-hero { min-height: 650px; padding: 125px 20px 55px; } .membership-hero__content { max-width: 100%; } .membership-hero h1 { font-size: 46px; letter-spacing: -2px; } .membership-hero__intro { font-size: 16px; } .membership-hero__lion { right: -105px; bottom: -95px; width: 280px; opacity: .38; } .membership-plans { padding: 58px 16px; } .membership-card { padding: 34px 20px; border-radius: 18px; } .membership-card__switch button { padding: 10px 8px; font-size: 12px; } .membership-card__custom { padding: 20px 16px; } } @media (prefers-reduced-motion: reduce) { .membership-hero .reveal-up,[data-scroll-reveal] { opacity: 1; transform: none; animation: none; transition: none; } .membership-card__switch button.is-active,.membership-card__price strong { animation: none; } }