/* Phase 1 elevation — Public vs Member content unfolding (Site UI §12) * * Reusable visual language for the "seduction path" — non-members see * full editorial + tasteful tease that hints at the depth behind * membership; members see specifics + Inquire/Book CTAs. The hotel * detail page already implements this server-side via the * `member-intelligence--locked` block; this file adds the pattern as * reusable components so it can be applied consistently across * experiences, journeys, magazine teases, and member-tier-locked * editorial. */ /* ──────────────────────────────────────────────────────────────────────── * Visibility utilities * Add data-auth-state attribute to ('public' | 'member' | 'noir') * via the existing auth bootstrap. These selectors then show / hide * content conditionally without per-page logic. * ──────────────────────────────────────────────────────────────────────── */ body[data-auth-state='public'] .bt-members-only, body[data-auth-state='public'] .bt-noir-only { display: none; } body[data-auth-state='member'] .bt-public-only, body[data-auth-state='member'] .bt-noir-only { display: none; } body[data-auth-state='noir'] .bt-public-only { display: none; } /* Body without data-auth-state — default to public visibility (server * SSR is the authoritative source; this is a graceful fallback) */ body:not([data-auth-state]) .bt-members-only, body:not([data-auth-state]) .bt-noir-only { display: none; } /* ──────────────────────────────────────────────────────────────────────── * Perks teaser — public-facing version of the perks block on property / * experience / journey pages. * "Members enjoy exclusive benefits at this property, including * welcome amenities, room upgrades, and curated experiences." * [Become a member →] * ──────────────────────────────────────────────────────────────────────── */ .bt-perks-teaser { max-width: 56ch; margin: var(--space-2xl) auto; padding: var(--space-2xl) var(--space-xl); background: rgba(196, 160, 82, 0.04); border: 1px solid rgba(196, 160, 82, 0.2); border-radius: var(--radius-md); text-align: center; position: relative; } .bt-perks-teaser__eyebrow { font-family: var(--font-ui-sans); font-weight: var(--weight-medium); font-size: var(--size-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-md); } .bt-perks-teaser__lead { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: var(--size-md); line-height: var(--leading-snug); color: var(--text-mid); margin: 0 0 var(--space-lg); } .bt-perks-teaser__cta { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-xl); background: var(--gold); color: var(--navy); font-family: var(--font-ui-sans); font-weight: var(--weight-medium); font-size: var(--size-sm); letter-spacing: var(--tracking-wide); text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition-base); } .bt-perks-teaser__cta::after { content: '→'; transition: transform var(--duration-fast) var(--ease-out); } .bt-perks-teaser__cta:hover { background: var(--gold-deep); } .bt-perks-teaser__cta:hover::after { transform: translateX(4px); } /* ──────────────────────────────────────────────────────────────────────── * Perks unlocked — member-facing version with specific benefits listed * ──────────────────────────────────────────────────────────────────────── */ .bt-perks-unlocked { max-width: 60ch; margin: var(--space-2xl) auto; padding: var(--space-2xl) var(--space-xl); background: rgba(196, 160, 82, 0.06); border: 1px solid rgba(196, 160, 82, 0.25); border-radius: var(--radius-md); position: relative; } .bt-perks-unlocked__eyebrow { font-family: var(--font-ui-sans); font-weight: var(--weight-medium); font-size: var(--size-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-md); text-align: center; } .bt-perks-unlocked__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .bt-perks-unlocked__list li { font-family: var(--font-display); font-style: italic; font-size: var(--size-md); line-height: var(--leading-snug); color: var(--text); padding-left: var(--space-md); position: relative; } .bt-perks-unlocked__list li::before { content: '✦'; color: var(--gold); position: absolute; left: 0; font-style: normal; font-size: var(--size-sm); top: 6px; } /* Noir-tier subsection within an unlocked block */ .bt-perks-unlocked__noir { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid rgba(196, 160, 82, 0.25); } .bt-perks-unlocked__noir-eyebrow { font-family: var(--font-ui-sans); font-weight: var(--weight-semibold); font-size: var(--size-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-pale); margin: 0 0 var(--space-md); text-align: center; } /* ──────────────────────────────────────────────────────────────────────── * Pricing reveal — public sees "Membership unlocks pricing", members * see actual rate. Used on hotel cards and detail pages. * ──────────────────────────────────────────────────────────────────────── */ .bt-pricing-locked { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); background: rgba(196, 160, 82, 0.08); border: 1px dashed rgba(196, 160, 82, 0.4); border-radius: var(--radius-sm); font-family: var(--font-display); font-style: italic; font-size: var(--size-sm); color: var(--text-mid); } .bt-pricing-locked::before { content: '◇'; color: var(--gold); font-style: normal; } .bt-pricing-unlocked { font-family: var(--font-ui-sans); font-weight: var(--weight-medium); font-size: var(--size-md); color: var(--gold); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .bt-pricing-unlocked__from { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); color: var(--text-mid); font-size: var(--size-xs); letter-spacing: var(--tracking-wide); margin-right: var(--space-xs); text-transform: uppercase; } /* ──────────────────────────────────────────────────────────────────────── * Membership invitation block — used at the bottom of public-facing * editorial as the seduction CTA * ──────────────────────────────────────────────────────────────────────── */ .bt-membership-invitation { max-width: 720px; margin: var(--space-3xl) auto; padding: clamp(var(--space-2xl), 6vw, var(--space-4xl)) clamp(var(--space-lg), 4vw, var(--space-3xl)); text-align: center; background: linear-gradient( 180deg, rgba(196, 160, 82, 0.04) 0%, rgba(196, 160, 82, 0.08) 100% ); border: 1px solid rgba(196, 160, 82, 0.25); border-radius: var(--radius-md); } .bt-membership-invitation__eyebrow { font-family: var(--font-ui-sans); font-weight: var(--weight-medium); font-size: var(--size-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-md); } .bt-membership-invitation__headline { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium); font-size: clamp(var(--size-2xl), 4vw, var(--size-3xl)); line-height: var(--leading-tight); color: var(--text); max-width: 18ch; margin: 0 auto var(--space-md); } .bt-membership-invitation__lead { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: var(--size-md); line-height: var(--leading-snug); color: var(--text-mid); max-width: 36ch; margin: 0 auto var(--space-xl); } .bt-membership-invitation__actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } /* ──────────────────────────────────────────────────────────────────────── * Inquiry CTA — the spec's "We would be delighted to arrange your stay" * voice. Members see "Inquire about your stay"; public sees * "Become a member to inquire." * ──────────────────────────────────────────────────────────────────────── */ .bt-inquire-block { text-align: center; padding: clamp(var(--space-3xl), 8vw, var(--space-5xl)) clamp(var(--space-md), 6vw, var(--space-3xl)); border-top: 1px solid var(--border); } .bt-inquire-block__eyebrow { font-family: var(--font-ui-sans); font-weight: var(--weight-medium); font-size: var(--size-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-md); } .bt-inquire-block__headline { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium); font-size: clamp(var(--size-2xl), 4vw, var(--size-3xl)); line-height: var(--leading-tight); color: var(--text); margin: 0 auto var(--space-md); max-width: 16ch; } .bt-inquire-block__lead { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: var(--size-md); line-height: var(--leading-snug); color: var(--text-mid); margin: 0 auto var(--space-xl); max-width: 36ch; } .bt-inquire-block__note { margin-top: var(--space-lg); font-family: var(--font-ui-sans); font-size: var(--size-xs); letter-spacing: var(--tracking-wide); color: var(--text-dim); }