/* AudibleHeaT Members Portal — Brand styles */ :root { --bg: #0a0a0a; /* 2026-05-23: Cards now use a near-opaque dark base instead of 5% white transparency so they remain readable against the new brand background image. The slight transparency (0.92 alpha) preserves a hint of warmth bleeding through, but content stays high-contrast. */ --card: rgba(18, 18, 18, 0.92); --card-hover: rgba(28, 28, 28, 0.94); --border: rgba(255,255,255,0.10); --text: #f0f0f0; --muted: #999; --fire-1: #ff4500; --fire-2: #ff8c00; --success: #2ecc71; --error: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100vh; } html { background: var(--bg); } /* fallback if the bg-anim layer ever fails */ body { /* Body is transparent so .bg-anim shows through. Solid black fallback on covers anything that might briefly render before bg-anim mounts. */ background: transparent; color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; line-height: 1.5; overflow-x: hidden; } /* 2026-05-23 (revised 2026-05-31): Persistent brand background. A fixed-position layer behind everything. Because the ELEMENT itself is position:fixed + inset:0, it's already locked to the viewport and stays put while the page scrolls — we do NOT use background-attachment:fixed, which is buggy on mobile (iOS Safari) and caused the image to jitter/slide on the lighter top portion during scroll. The gradient overlay leaves the top visible and ramps to solid black so lower content stays high-contrast. */ .bg-anim { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: #0a0a0a; background-image: /* Top layer: gradient overlay. Light dim through the top, then ramp to black so the lower half is pure background for content cards. */ linear-gradient( to bottom, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.20) 30%, rgba(10, 10, 10, 0.50) 50%, rgba(10, 10, 10, 0.85) 65%, rgba(10, 10, 10, 0.97) 80%, #0a0a0a 95% ), /* Underlying brand image, centered at top, cover-cropped. */ url('/members/static/img/brand-bg.jpeg'); background-position: center top, center top; background-size: cover, cover; background-repeat: no-repeat, no-repeat; /* scroll (default) — the fixed element handles the "locked" behavior. */ background-attachment: scroll, scroll; } /* Honor reduced motion / data-saver: drop the heavy image if the user has asked for less. The page still has the brand-color overlay so the vibe stays. */ @media (prefers-reduced-data: reduce) { .bg-anim { background-image: linear-gradient(to bottom, rgba(10,10,10,0.35), #0a0a0a 70%), radial-gradient(ellipse at 50% 0%, rgba(255,140,0,0.18), transparent 65%); } } .container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; } /* Nav */ .topnav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 24px; border-bottom: 1px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; gap: 12px; } .brand { display: flex; align-items: baseline; gap: 8px; } .logo { font-size: 1.4em; font-weight: 800; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; } .logo-sub { font-size: 0.85em; color: var(--muted); font-weight: 500; } .navlinks { display: flex; gap: 4px; } .navlink { padding: 8px 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; } .navlink:hover { color: var(--text); background: var(--card); } .navlink.active { color: var(--text); background: linear-gradient(135deg, rgba(255,69,0,0.15), rgba(255,140,0,0.10)); border: 1px solid rgba(255,140,0,0.25); } /* Page head */ .page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .page-head h1 { font-size: 1.8em; font-weight: 700; letter-spacing: -0.5px; } .page-head .sub { font-size: 14px; color: var(--muted); margin-top: 4px; } /* Dashboard welcome avatar (next to "Welcome back, ...") */ .welcome-avatar-link { display: inline-block; text-decoration: none; border-radius: 50%; transition: transform 0.15s ease, box-shadow 0.15s ease; } .welcome-avatar-link:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.25); } .welcome-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .welcome-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .welcome-avatar-initials { font-size: 24px; font-weight: 700; color: var(--text, #fff); background: linear-gradient(135deg, #ff8c00, #e63946); letter-spacing: 0.5px; } /* Place the avatar to the left of the welcome text on the dashboard. .page-head still uses space-between for other pages; here the avatar + title block become the first flex item and naturally sit on the left. */ .page-head > .welcome-avatar-link { align-self: center; margin-right: 4px; } @media (max-width: 480px) { .welcome-avatar { width: 52px; height: 52px; } .welcome-avatar-initials { font-size: 20px; } } /* Cards */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; backdrop-filter: blur(20px); margin-bottom: 20px; } .card h2 { font-size: 1em; font-weight: 600; margin-bottom: 16px; color: var(--fire-2); } /* Grids */ .grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } @media (max-width: 720px) { .grid.two-col { grid-template-columns: 1fr; } } /* Hero card */ .hero-card { /* Layered: orange brand glow gradient on top of an opaque dark base, so the stat text reads clearly even when the brand background image is showing a busy area of the speaker/AUDIBLEHEAT mark behind it. */ background: linear-gradient(135deg, rgba(255,69,0,0.14), rgba(255,140,0,0.08)), rgba(18, 18, 18, 0.94); border: 1px solid rgba(255,140,0,0.35); border-radius: 20px; padding: 32px; margin-bottom: 20px; backdrop-filter: blur(8px); } .hero-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .hero-stat { font-size: 4.5em; font-weight: 800; line-height: 1; letter-spacing: -2px; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-unit { font-size: 0.3em; color: var(--text); margin-left: 8px; -webkit-text-fill-color: var(--text); vertical-align: middle; } .hero-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 4px; margin: 16px 0 8px; overflow: hidden; } .hero-fill { height: 100%; background: linear-gradient(90deg, var(--fire-1), var(--fire-2)); transition: width 0.4s; } .hero-meta { color: var(--muted); font-size: 13px; } /* Nudge */ .nudge { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(255,69,0,0.06), rgba(255,140,0,0.04)); border: 1px solid rgba(255,140,0,0.20); border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap; } .nudge-icon { font-size: 28px; } .nudge-body { flex: 1; min-width: 200px; } .nudge-title { font-weight: 600; margin-bottom: 2px; } .nudge-text { color: var(--muted); font-size: 13px; } /* Tier badge */ .tier-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--tier, var(--border)); color: var(--text); padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; } .tier-icon { font-size: 14px; } /* Rows */ .row-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); } .row-item:last-child { border-bottom: 0; } .row-title { font-weight: 500; } .row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .pill { background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); color: #000; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; } .pill-muted { background: rgba(255,255,255,0.06); color: var(--muted); } .empty { color: var(--muted); font-size: 14px; padding: 8px 0; } .empty a { color: var(--fire-2); text-decoration: none; } /* Buttons */ .btn-primary, .btn-ghost, .btn-current { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 10px; padding: 10px 20px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s; } .btn-primary { background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); color: #000; } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: rgba(255,255,255,0.10); } .btn-current { background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid var(--border); cursor: default; } .btn-lg { padding: 14px 26px; font-size: 15px; } .btn-xl { padding: 18px 36px; font-size: 16px; border-radius: 14px; } .btn-sm { padding: 6px 12px; font-size: 12px; } /* Quick links */ .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .link-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 500; transition: all 0.2s; text-align: center; } .link-tile:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); } .link-icon { font-size: 22px; } /* Auth */ .auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 36px; width: 100%; max-width: 420px; backdrop-filter: blur(20px); } .auth-header { text-align: center; margin-bottom: 20px; } .brand-title { font-size: 2.4em; font-weight: 800; letter-spacing: -1px; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-sub { color: var(--muted); font-size: 0.95em; margin-top: 2px; } .tagline { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 24px; } .btn-google { width: 100%; padding: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; cursor: pointer; opacity: 0.5; } .btn-google .soon { color: var(--muted); font-size: 12px; margin-left: 6px; } .divider { text-align: center; margin: 20px 0; position: relative; font-size: 12px; color: var(--muted); } .divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--border); } .divider::before { left: 0; } .divider::after { right: 0; } .divider span { background: var(--bg); padding: 0 12px; } .tabs { display: flex; gap: 4px; margin-bottom: 14px; } .tab { flex: 1; padding: 10px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .tab.active { background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); color: #000; border-color: transparent; } .form { display: flex; flex-direction: column; gap: 10px; } .form .row { display: flex; gap: 10px; align-items: stretch; } /* Each input in a row gets equal width regardless of placeholder length. flex: 1 1 0 + min-width: 0 + box-sizing: border-box together prevent inputs with longer placeholders from out-growing their siblings. */ .form .row input { flex: 1 1 0; width: 0; min-width: 0; } .form input { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; box-sizing: border-box; } .form input::placeholder { color: var(--muted); } .form input:focus { outline: none; border-color: var(--fire-2); } .form button { margin-top: 6px; padding: 14px; width: 100%; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); color: #000; border: none; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .footer-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 20px; } /* "Signing up creates a free guest account—no payment required" pill. Mirrors the booking-page widget so the experience feels continuous when users arrive here via ?mode=signup. */ .free-notice { display: inline-flex; align-items: center; gap: 8px; margin: 4px auto 0; padding: 9px 14px; font-size: 12.5px; font-weight: 500; color: #ffb967; background: rgba(255, 140, 0, 0.08); border: 1px solid rgba(255, 140, 0, 0.28); border-radius: 999px; line-height: 1.35; text-align: left; max-width: 100%; } .free-notice-icon { flex-shrink: 0; font-size: 14px; } /* Errors / success */ .error { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.30); color: #ff8a80; padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; } .success { background: rgba(46,204,113,0.10); border: 1px solid rgba(46,204,113,0.30); color: #4ade80; padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; } /* Tier comparison */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 24px; } .tier-card { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 24px; position: relative; transition: all 0.2s; } .tier-card:hover { transform: translateY(-2px); } .tier-card.current { border-color: var(--accent, var(--fire-2)); box-shadow: 0 0 0 4px rgba(255,140,0,0.08); } .tier-card.current::before { content: 'Current Plan'; position: absolute; top: -12px; right: 16px; background: var(--accent, var(--fire-2)); color: #000; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; } .tier-head { text-align: center; margin-bottom: 16px; } .tier-icon-big { font-size: 36px; margin-bottom: 4px; } .tier-head h3 { font-size: 1.2em; font-weight: 700; } .tier-price { font-size: 1.4em; font-weight: 800; color: var(--accent, var(--fire-2)); margin-top: 4px; } .tier-tag { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; } .perk-list { list-style: none; margin: 16px 0; } .perk-list li { padding: 6px 0; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); } .perk-list li.perk-yes { color: var(--text); } .perk-list li.perk-no { color: var(--muted); opacity: 0.6; } .perk-mark { display: inline-block; width: 16px; color: var(--accent, var(--fire-2)); font-weight: 700; } .tier-cta { margin-top: 16px; } .tier-cta .btn-primary, .tier-cta .btn-ghost, .tier-cta .btn-current { width: 100%; justify-content: center; } .ambassador-footer { text-align: center; padding: 20px; font-size: 13px; color: var(--muted); } .ambassador-footer a { color: var(--fire-2); text-decoration: none; } /* Booking page */ .book-card { text-align: center; padding: 36px; } .book-stat { margin-bottom: 20px; } .book-stat-label { color: var(--muted); font-size: 13px; } .book-stat-value { font-size: 3em; font-weight: 800; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } .book-stat-sub { color: var(--muted); font-size: 13px; } .book-text { color: var(--muted); margin: 16px auto 24px; max-width: 480px; font-size: 14px; } .book-hint { color: var(--muted); font-size: 12px; margin-top: 14px; } .bullets { list-style: none; } .bullets li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .bullets li:last-child { border-bottom: 0; } /* Account */ .kv { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; } .kv > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); } .kv label { color: var(--muted); font-size: 13px; } .tier-actions { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; } .muted { color: var(--muted); } .small { font-size: 12px; } /* === Hero card additions === */ .hero-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .hero-fine { font-size: 12px; color: var(--muted); margin-top: 14px; max-width: 540px; } /* === Coupons card === */ .coupons-card { border-color: rgba(255,140,0,0.30); } .coupon-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; margin-bottom: 10px; background: rgba(255,140,0,0.06); border: 1px dashed rgba(255,140,0,0.30); border-radius: 12px; flex-wrap: wrap; } .coupon-row:last-child { margin-bottom: 0; } .coupon-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .coupon-code { font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.4em; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 2px; } .coupon-sub { font-size: 11px; color: var(--muted); margin-top: 4px; } .coupon-actions { display: flex; gap: 8px; } /* === Modal === */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { position: relative; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; padding: 32px; max-width: 500px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .modal h2 { font-size: 1.4em; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .modal-text { color: var(--muted); font-size: 14px; margin-bottom: 20px; } .modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #888; font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; } .modal-close:hover { color: #fff; } .modal-fine { font-size: 12px; color: var(--muted); margin-top: 14px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* === Stepper === */ .stepper { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; justify-content: center; } .stepper-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .stepper-btn:hover { background: rgba(255,255,255,0.14); } .stepper input[type=number] { font-size: 2.2em; font-weight: 800; text-align: center; background: transparent; border: none; color: var(--text); width: 80px; -moz-appearance: textfield; font-family: inherit; } .stepper input[type=number]::-webkit-outer-spin-button, .stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stepper-unit { color: var(--muted); font-size: 14px; } /* === Coupon success === */ .coupon-success { margin-top: 16px; text-align: center; padding: 12px 0; } .success-title { font-size: 14px; color: var(--muted); margin-bottom: 12px; } .coupon-code-big { font-family: 'Courier New', monospace; font-weight: 800; font-size: 2.2em; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px; margin-bottom: 8px; } .coupon-meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; } .coupon-success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .coupon-reload { margin-top: 18px; font-size: 12px; } .coupon-reload a { color: var(--fire-2); text-decoration: none; } /* === Multi-coupon list inside modal === */ .code-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .code-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255,140,0,0.06); border: 1px dashed rgba(255,140,0,0.30); border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; gap: 8px; } .code-row-code { font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.2em; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 2px; } .code-row-actions { display: flex; gap: 6px; } /* === Google sign-in active === */ .btn-google.btn-google-active { opacity: 1; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; background: #fff; color: #1f1f1f; font-weight: 600; border: 1px solid #dadce0; } .btn-google.btn-google-active:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60,64,67,0.15); } /* Override the underline that comes from element on the active Google button */ .btn-google.btn-google-active, .btn-google.btn-google-active:hover, .btn-google.btn-google-active:visited { text-decoration: none !important; padding: 12px 16px; gap: 4px; } /* Center the Google button content properly */ .btn-google, .btn-google.btn-google-active { width: 100%; display: flex !important; align-items: center; justify-content: center; text-align: center; } .btn-google svg { margin-right: 10px; flex-shrink: 0; } /* === Google button — clean, centered, full-width === */ .btn-google { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; padding: 12px 16px !important; margin: 0 0 8px 0 !important; box-sizing: border-box !important; } .btn-google.btn-google-active { background: #fff !important; color: #1f1f1f !important; border: 1px solid #dadce0 !important; border-radius: 10px !important; cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit; opacity: 1; } .btn-google.btn-google-active:hover { background: #f8f9fa !important; box-shadow: 0 1px 3px rgba(60,64,67,0.15); } .btn-google-inner { display: inline-flex; align-items: center; gap: 10px; } .btn-google .google-g { display: block; flex-shrink: 0; } /* === FINAL Google button styling — pill-shaped, content-hugged, centered === */ .btn-google.btn-google-active { width: auto !important; max-width: 100%; margin: 0 auto 14px auto !important; padding: 12px 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; text-decoration: none !important; } /* The parent of the button needs to be a flex container so margin:auto centers it */ .auth-card { text-align: center; } .btn-google-inner { gap: 12px; } .coupons-intro { color: var(--muted); font-size: 13px; margin-bottom: 14px; line-height: 1.5; } .coupons-intro strong { color: var(--text); } /* ═══════════════════════════════════════════════════════════ ADMIN dashboard ═══════════════════════════════════════════════════════════ */ /* 2026-06-07: wrap the admin action buttons so they reflow on mobile/tablet instead of overflowing in one long horizontal scroll line. */ .admin-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; } .admin-preview > a.btn-sm { flex: 0 0 auto; } /* Desktop: the action buttons sit inline and wrap; mobile rules below switch this to a 2-col grid. */ .admin-action-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .preview-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .preview-form label { font-size: 12px; color: var(--muted); } .preview-form select { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.10); padding: 6px 10px; border-radius: 8px; font-family: inherit; font-size: 13px; } .admin-stats { padding: 24px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 16px; } .stat { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .stat-num { font-size: 1.6em; font-weight: 700; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } .stat-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .tier-breakdown { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); } .tier-pill { background: rgba(255,255,255,0.05); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); } .tier-pill strong { color: var(--text); margin-right: 4px; } .legend-card { padding: 16px 20px; } .legend-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .legend { display: flex; gap: 6px; flex-wrap: wrap; } .admin-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .search-input, .filter-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text); padding: 10px 14px; border-radius: 10px; font-family: inherit; font-size: 13px; } .search-input { flex: 1; min-width: 220px; } .table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th { text-align: left; padding: 10px 8px; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .admin-table td { padding: 12px 8px; border-bottom: 1px solid var(--border); } .admin-table tr:hover td { background: rgba(255,255,255,0.02); } .admin-table.compact td { padding: 8px; } .cell-name { font-weight: 600; color: var(--text); } .cell-email { font-size: 11px; color: var(--muted); margin-top: 2px; } .cell-num { font-variant-numeric: tabular-nums; } .cell-sub { font-size: 10px; color: var(--muted); margin-left: 3px; } .empty { color: var(--muted); text-align: center; padding: 20px; } /* Tier color cells */ .tier-cell { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); } .tier-guest { color: #aaa; background: rgba(255,255,255,0.05); } .tier-bronze { color: #ffbb6f; background: rgba(255,140,0,0.10); border-color: rgba(205,127,50,0.30); } .tier-silver { color: #ddd; background: rgba(255,255,255,0.06); border-color: rgba(192,192,192,0.30); } .tier-platinum { color: #e5e4e2; background: rgba(229,228,226,0.08); border-color: rgba(229,228,226,0.30); } .tier-ambassador { color: #ff9347; background: rgba(255,140,0,0.15); border-color: rgba(255,140,0,0.40); } /* Engagement / "last booked" age coloring */ .age { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; display: inline-block; } .age-fresh { color: #4ade80; background: rgba(46,204,113,0.10); border-color: rgba(46,204,113,0.30); } .age-warming { color: #c8e85c; background: rgba(200,232,92,0.10); border-color: rgba(200,232,92,0.30); } .age-warm { color: #facc15; background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.30); } .age-cool { color: #fb923c; background: rgba(251,146,60,0.10); border-color: rgba(251,146,60,0.30); } .age-cold { color: #f87171; background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.30); } .age-frozen { color: #dc2626; background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.40); font-weight: 700; } .age-never { color: #888; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); } /* Edit form */ .admin-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .admin-edit label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .admin-edit label.full { grid-column: 1 / -1; } .admin-edit input, .admin-edit select, .admin-edit textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text); padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 14px; } .admin-edit textarea { resize: vertical; } .admin-edit-actions { grid-column: 1 / -1; } .admin-quick { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; } .admin-quick form { display: flex; gap: 8px; align-items: flex-end; } .admin-quick label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .admin-quick input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text); padding: 8px 12px; border-radius: 8px; font-family: inherit; font-size: 14px; width: 80px; } /* Type pills in hour log */ .type-pill { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; display: inline-block; } .type-booking { background: rgba(46,204,113,0.10); color: #4ade80; } .type-refund { background: rgba(250,204,21,0.10); color: #facc15; } .type-mastering { background: rgba(96,165,250,0.10); color: #60a5fa; } .type-rollover { background: rgba(255,255,255,0.06); color: #aaa; } .type-bonus { background: rgba(255,140,0,0.10); color: #ff9347; } .type-reschedule { background: rgba(192,132,252,0.10); color: #c084fc; } /* Preview-as banner */ .preview-banner { background: linear-gradient(135deg, rgba(255,69,0,0.20), rgba(255,140,0,0.15)); border-bottom: 1px solid rgba(255,140,0,0.4); color: #ffb84d; padding: 10px 20px; text-align: center; font-size: 13px; font-weight: 500; position: relative; z-index: 5; } .preview-banner strong { color: #fff; } .preview-banner-clear { background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 8px; font-family: inherit; } .preview-banner-clear:hover { background: rgba(0,0,0,0.6); } /* Style the Admin nav link distinctly */ .navlink[href="/members/admin"] { color: #ffb84d !important; border: 1px solid rgba(255,140,0,0.3); } /* === Secondary perk row (Mastering + Discount) === */ .perk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; } .perk-mini { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; } .perk-mini-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .perk-mini-stat { font-size: 2.4em; font-weight: 800; line-height: 1; letter-spacing: -1px; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 2px 0; } .perk-mini-unit { font-size: 0.35em; color: var(--text); -webkit-text-fill-color: var(--text); vertical-align: middle; margin-left: 4px; } .perk-mini-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; min-height: 32px; } .perk-mini .btn-primary { align-self: flex-start; } .perk-mini .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; } /* === Account page edit forms === */ .account-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; } .account-edit label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .account-edit label.full { grid-column: 1 / -1; } .account-edit input, .account-edit select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text); padding: 11px 14px; border-radius: 10px; font-family: inherit; font-size: 14px; } .account-edit input:focus { outline: none; border-color: var(--fire-2); } .account-edit input:disabled { opacity: 0.5; cursor: not-allowed; } .account-actions { display: flex; gap: 10px; margin-top: 6px; } .account-actions.full { grid-column: 1 / -1; } @media (max-width: 600px) { .account-edit { grid-template-columns: 1fr; } } /* === Avatar uploader === */ .avatar-section { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .avatar-preview { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.10); } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } .avatar-initials { color: #000; font-weight: 800; font-size: 28px; letter-spacing: -1px; } .avatar-actions { flex: 1; display: flex; flex-direction: column; gap: 6px; } .avatar-actions label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.10); font-size: 13px; font-weight: 600; cursor: pointer; width: fit-content; } .avatar-actions label:hover { background: rgba(255,255,255,0.10); } /* === Genre chips === */ .genre-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .genre-chip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: var(--muted); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-family: inherit; cursor: pointer; font-weight: 500; transition: all 0.15s; } .genre-chip:hover { background: rgba(255,255,255,0.08); color: var(--text); } .genre-chip.active { background: linear-gradient(135deg, var(--fire-1), var(--fire-2)); color: #000; border-color: transparent; font-weight: 700; } /* Field hints */ .hint { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; } /* Account edit textarea */ .account-edit textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text); padding: 11px 14px; border-radius: 10px; font-family: inherit; font-size: 14px; resize: vertical; line-height: 1.5; } .account-edit textarea:focus { outline: none; border-color: var(--fire-2); } .checkbox-label { flex-direction: row !important; align-items: flex-start; gap: 10px !important; } .checkbox-label input[type=checkbox] { margin-top: 3px; accent-color: var(--fire-2); width: 16px; height: 16px; } /* === Ambassador card === */ .ambassador-card { background: linear-gradient(135deg, rgba(255,69,0,0.08), rgba(255,140,0,0.04)) !important; border-color: rgba(255,140,0,0.30) !important; } .amb-status { padding: 16px; border-radius: 12px; margin: 12px 0; } .amb-status-title { font-weight: 700; font-size: 1.1em; margin-bottom: 6px; } .amb-pending { background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.25); color: #facc15; } .amb-pending p { color: var(--muted); } .amb-approved { background: rgba(46,204,113,0.10); border: 1px solid rgba(46,204,113,0.30); color: #4ade80; } .amb-approved p { color: var(--text); } .amb-declined { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); color: #f87171; } .amb-declined p { color: var(--muted); } /* === Admin applications page === */ .app-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 20px; margin-bottom: 16px; } .app-card.app-status-submitted, .app-card.app-status-under-review { border-color: rgba(250,204,21,0.30); background: rgba(250,204,21,0.04); } .app-card.app-status-approved { border-color: rgba(46,204,113,0.30); background: rgba(46,204,113,0.04); } .app-card.app-status-declined { border-color: rgba(248,113,113,0.20); background: rgba(248,113,113,0.03); opacity: 0.75; } .app-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .app-name { font-weight: 700; font-size: 1.1em; } .app-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .app-status-pill { padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .app-pill-submitted, .app-pill-under-review { background: rgba(250,204,21,0.15); color: #facc15; } .app-pill-approved { background: rgba(46,204,113,0.15); color: #4ade80; } .app-pill-declined { background: rgba(248,113,113,0.15); color: #f87171; } .app-body { display: grid; gap: 12px; margin-bottom: 16px; } .app-section { } .app-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .app-text { font-size: 14px; color: var(--text); white-space: pre-wrap; line-height: 1.5; } .app-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; } .app-notes-input { flex: 1; min-width: 200px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text); padding: 8px 12px; border-radius: 8px; font-family: inherit; font-size: 13px; } /* ============================================================ 📱 MOBILE HARDENING (added 2026-05-19) Targeted fixes so pill buttons stay pill-shaped, text reflows without distortion, and there's never horizontal scroll on any screen down to 320px (smallest commonly-supported width). ============================================================ */ /* iOS Safari quirks: prevent input zoom on focus (anything <16px font triggers automatic zoom on iPhones), respect safe-area insets, and stop horizontal scroll permanently. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: hidden; /* Honor the iPhone notch / Dynamic Island safe areas */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Inputs need ≥16px font-size to prevent iOS auto-zoom on focus. Anything smaller and Safari will zoom the entire page when the user taps an input, which breaks the layout visually until they pinch back. */ @media (max-width: 640px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select, .form input, .ah-input { font-size: 16px !important; } } /* ============================================================ Auth card (login / signup page) ============================================================ */ @media (max-width: 480px) { .auth-wrap { /* Tighter side padding on phones — gives the card more horizontal real estate without touching the screen edges. */ padding: 16px 14px; min-height: 100dvh; /* Use dynamic viewport height so iOS Safari's collapsing toolbar doesn't push the card down. */ } .auth-card { padding: 28px 22px; border-radius: 16px; /* Cap width so on very wide phones (landscape) it doesn't stretch past readable line length. */ max-width: 100%; } .brand-title { font-size: 2em; letter-spacing: -0.5px; } .brand-sub { font-size: 0.9em; } .tagline { font-size: 13.5px; margin-bottom: 20px; } /* Pills stay pills — never let buttons stretch into oblongs */ .btn-google, .btn-primary { padding: 14px 18px; font-size: 15px; border-radius: 12px; min-height: 48px; /* meets WCAG 2.1 touch-target guideline */ } /* Tab pill row stays single-line, equal-width on phones */ .tabs { gap: 4px; } .tab { flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: 14px; } /* Form rows: First/Last name stay side-by-side until truly tiny widths */ .form .row { gap: 8px; } /* Free-account notice: wrap cleanly without horizontal scroll */ .free-notice { font-size: 12.5px; padding: 9px 12px; line-height: 1.4; } } /* Very small phones (iPhone SE 1st gen / older Android: 320px-360px) */ @media (max-width: 360px) { .auth-wrap { padding: 12px 10px; } .auth-card { padding: 22px 16px; border-radius: 14px; } .brand-title { font-size: 1.7em; } /* Below this width, First/Last name fields stack because two ~140px fields side-by-side don't leave room for placeholders. */ .form .row { flex-direction: column; gap: 10px; } .form .row input { width: 100%; } } /* ============================================================ Dashboard / member pages — touch target hardening ============================================================ */ @media (max-width: 480px) { /* Welcome avatar slightly smaller so the greeting text gets more room */ .welcome-avatar { width: 52px; height: 52px; } .welcome-avatar-initials { font-size: 20px; } /* Page head: title + avatar should always sit on the same row when possible, but allow wrap on very tight viewports. */ .page-head { gap: 12px; } .page-head h1 { font-size: 1.4em; line-height: 1.25; } /* Hero card numbers (e.g. "5.0 hrs") need to not overflow */ .hero-stat { font-size: 2.8em; } .hero-unit { font-size: 0.45em; } /* Primary CTA buttons inside cards stay pill-shaped */ .btn-primary, .btn-ghost, .btn-lg { width: 100%; text-align: center; border-radius: 12px; min-height: 48px; padding: 13px 20px; font-size: 15px; } /* 2026-06-07: admin action buttons reflow as a 2-col grid on phones rather than full-width stacking (5 stacked buttons is too tall). Overrides the blanket width:100% above for buttons inside the admin preview row. */ .admin-preview { width: 100%; flex-direction: column; align-items: stretch; } .admin-preview .admin-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .admin-preview .admin-action-grid > a.btn-ghost { width: 100%; min-height: 44px; padding: 10px 8px; font-size: 13px; } .admin-preview .role-chip { align-self: flex-start; } .preview-form { width: 100%; flex-direction: column; align-items: stretch; } .preview-form select, .preview-form .btn-ghost { width: 100%; } .hero-actions { flex-direction: column; gap: 10px; align-items: stretch; } /* Nav bar: shrink the brand text so it doesn't push nav links off-screen */ .topnav { padding: 12px 14px; flex-wrap: wrap; gap: 10px; } .brand .logo { font-size: 15px; } .brand .logo-sub { display: none; } /* drop subtitle on phones */ .navlinks { gap: 8px; flex-wrap: wrap; } .navlink { padding: 8px 12px; font-size: 13.5px; } /* Tier badge: stay on a single line */ .tier-badge { font-size: 12px; padding: 4px 10px; } /* Two-column grid collapses to single column */ .grid.two-col { grid-template-columns: 1fr !important; gap: 16px; } .perk-row { grid-template-columns: 1fr !important; } /* Modal overlays: full-bleed on phones so the user isn't trying to tap close buttons through tiny side gaps */ .modal { width: calc(100vw - 24px) !important; max-width: none !important; } .modal-actions { flex-direction: column-reverse; gap: 10px; } .modal-actions button { width: 100%; min-height: 48px; } } /* ============================================================ Universal pill-shape preservation These rules apply at ALL breakpoints to prevent any future button styling from accidentally producing distorted shapes. ============================================================ */ /* Any element with a pill-shaped border-radius keeps it under width pressure. Without this, a narrow viewport + a long button label can cause the border-radius to "round into a circle" on tall buttons. */ .btn-primary, .btn-google, .btn-ghost, .tier-badge, .pill, .preview-banner-clear, .tab { border-radius: 999px; /* Ensure padding scales sensibly — never less than touch-friendly */ min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Inputs in flex rows — universal fix so width stays predictable. The combo of (flex: 1 1 0) + (width: 0) + (min-width: 0) + (box-sizing: border-box) is the only reliable way to force equal widths across browsers when placeholders/values differ in length. */ .form .row { display: flex; align-items: stretch; } .form .row > * { flex: 1 1 0; width: 0; min-width: 0; box-sizing: border-box; } /* Long text in tier badges / pills never overflows; ellipsizes instead. */ .tier-badge, .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Reduced motion respected globally */ @media (prefers-reduced-motion: reduce) { .bg-anim { animation: none !important; } } /* High-contrast mode (Windows): ensure pill buttons still have visible borders */ @media (forced-colors: active) { .btn-primary, .btn-google, .tab.active { border: 2px solid CanvasText; forced-color-adjust: none; } } /* ============================================================ NATIVE BOOKING FLOW (added 2026-05-19, /members/book/new) ============================================================ */ /* Step indicator at the top of every step */ .book-stepper { display: flex; gap: 8px; margin: 0 auto 22px; flex-wrap: wrap; justify-content: center; } .book-stepper-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; border-radius: 999px; background: rgba(255,255,255,0.04); color: #777; border: 1px solid rgba(255,255,255,0.08); } .book-stepper-dot { width: 6px; height: 6px; border-radius: 50%; background: #555; } .book-stepper-step.is-active { color: #ff8c00; background: rgba(255,140,0,0.10); border-color: rgba(255,140,0,0.40); } .book-stepper-step.is-active .book-stepper-dot { background: #ff8c00; box-shadow: 0 0 8px rgba(255,140,0,0.6); } .book-stepper-step.is-done { color: #5be0a0; border-color: rgba(91,224,160,0.30); background: rgba(91,224,160,0.06); } .book-stepper-step.is-done .book-stepper-dot { background: #5be0a0; } /* Step 1: session-type grid */ .session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .session-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: #f3f3f3; text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .session-card:hover { border-color: #ff8c00; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,140,0,0.14); } .session-card-member { border-color: rgba(255,140,0,0.30); } .session-card-icon { font-size: 32px; line-height: 1; flex-shrink: 0; } .session-card-body { flex: 1; min-width: 0; } .session-card-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; line-height: 1.3; } .session-card-meta { font-size: 13px; color: #a3a3a3; margin-top: 2px; } .session-card-perk { font-size: 12px; color: #ff8c00; font-weight: 600; margin-top: 6px; } .session-card-badge { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #ff8c00; background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.30); border-radius: 999px; padding: 2px 8px; } .session-card-arrow { font-size: 18px; font-weight: 700; color: #ff8c00; flex-shrink: 0; } /* Step 2: month bar + calendar + times */ .book-time-card { padding: 22px; } .book-month-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .book-month-label { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; color: #f3f3f3; } .book-calendar { margin-bottom: 18px; } .book-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .book-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #777; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 0; } .book-cal-day { aspect-ratio: 1 / 1; min-height: 40px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.30); font-size: 14px; font-weight: 600; font-family: inherit; cursor: not-allowed; transition: all 0.12s ease; } .book-cal-day.is-avail { background: rgba(255,140,0,0.08); border-color: rgba(255,140,0,0.30); color: #ff8c00; cursor: pointer; } .book-cal-day.is-avail:hover { background: #ff8c00; color: #1a0e00; transform: scale(1.05); } .book-cal-day.is-selected { background: #ff8c00 !important; color: #1a0e00 !important; border-color: #ff8c00 !important; font-weight: 800; box-shadow: 0 0 0 2px rgba(255,140,0,0.40); } .book-cal-day.is-past { color: rgba(255,255,255,0.10); } /* Time slots */ .book-times-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #999; margin-bottom: 10px; } .book-times-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .book-time-pill { text-align: center; padding: 12px 8px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; color: #f3f3f3; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.12s ease; min-height: 44px; } .book-time-pill:hover { background: rgba(255,140,0,0.10); border-color: #ff8c00; color: #ff8c00; transform: translateY(-1px); } /* Step 3: details form */ .book-form { display: flex; flex-direction: column; gap: 14px; } .book-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #f3f3f3; } .book-label em { color: #ff8c00; font-style: normal; font-weight: 700; } .book-label input, .book-label textarea { width: 100%; padding: 12px 14px; background: #0f0f0f; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; color: #f3f3f3; font-size: 14.5px; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .book-label textarea { resize: vertical; min-height: 80px; } .book-label input:focus, .book-label textarea:focus { outline: none; border-color: #ff8c00; box-shadow: 0 0 0 3px rgba(255,140,0,0.18); } .book-terms { display: flex; align-items: flex-start; gap: 10px; padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; font-size: 13px; line-height: 1.5; color: #d3d3d3; cursor: pointer; } .book-terms input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #ff8c00; cursor: pointer; } .book-terms a { color: #ff8c00; font-weight: 600; } .book-submit { width: 100%; margin-top: 6px; } .book-fine { font-size: 12px; color: #888; text-align: center; line-height: 1.5; margin-top: 4px; } .perk-preview { margin: 0 auto 18px; padding: 14px 18px; background: rgba(255,140,0,0.08); border: 1px solid rgba(255,140,0,0.30); border-radius: 12px; color: #ffb967; font-size: 13.5px; text-align: center; max-width: 540px; } .perk-preview strong { color: #fff; } .perk-preview-muted { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); color: #999; } /* Mobile tuning */ @media (max-width: 640px) { .book-stepper { gap: 6px; } .book-stepper-step { padding: 5px 9px; font-size: 11.5px; } .session-grid { grid-template-columns: 1fr; } .book-cal-day { min-height: 36px; font-size: 13px; } .book-time-pill { padding: 11px 6px; font-size: 13.5px; } } /* ============================================================ MOCK BOOKING FLOW (added 2026-05-19, /members/book/mock) ============================================================ */ .mock-banner { max-width: 900px; margin: 0 auto 18px; padding: 10px 16px; background: linear-gradient(135deg, rgba(255,140,0,0.18), rgba(255,140,0,0.08)); border: 1px dashed rgba(255,140,0,0.55); border-radius: 10px; font-size: 13px; color: #ffb967; text-align: center; letter-spacing: 0.2px; } .mock-banner strong { color: #ff8c00; font-weight: 800; } .book-rule-note { text-align: center; font-size: 12.5px; color: #999; margin: 0 auto 14px; max-width: 540px; } /* Step 4 — add-on list */ .addon-intro { font-size: 14px; color: #a3a3a3; margin: 0 0 14px; text-align: center; } .addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 22px; } .addon-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .addon-item:hover { border-color: rgba(255,140,0,0.45); background: #1f1f1f; } .addon-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ff8c00; flex-shrink: 0; cursor: pointer; } .addon-item input[type="checkbox"]:checked + .addon-body .addon-name { color: #ff8c00; } .addon-body { flex: 1; min-width: 0; } .addon-name { font-size: 14px; font-weight: 600; color: #f3f3f3; line-height: 1.3; } .addon-price { font-size: 12.5px; color: #a3a3a3; margin-top: 2px; } .addon-total-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: rgba(255,140,0,0.08); border: 1px solid rgba(255,140,0,0.30); border-radius: 12px; margin-bottom: 18px; } .addon-total-label { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: #ffb967; text-transform: uppercase; } .addon-total-sub { font-size: 12px; color: #999; margin-top: 2px; } .addon-total-value { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.5px; } /* Step 5 — review card */ .review-card { padding: 22px; } .review-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 8px 0; font-size: 14px; } .review-k { color: #999; flex-shrink: 0; min-width: 110px; } .review-v { color: #f3f3f3; text-align: right; word-break: break-word; } .review-v a { color: #ff8c00; text-decoration: none; word-break: break-all; } .review-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 10px 0; } .review-addon { font-size: 13.5px; } .review-addon .review-k { color: #ff8c00; } .review-total { font-size: 17px; padding: 10px 0 4px; } .review-total strong { color: #fff; font-size: 19px; } @media (max-width: 640px) { .addon-grid { grid-template-columns: 1fr; } .addon-total-bar { flex-direction: column; align-items: flex-start; gap: 8px; } .addon-total-value { font-size: 24px; } .review-k { min-width: 90px; font-size: 13px; } .review-v { font-size: 13.5px; } } /* ============================================================ COMPACT DATE STRIP (replaces month-grid calendar, 2026-05-19) Horizontal scrollable pills — mobile-friendly, Calendly-style. ============================================================ */ .book-strip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #999; margin: 0 0 10px; } .book-date-strip-wrap { /* Wrapper provides edge fade hints so users know it scrolls horizontally */ position: relative; margin: 0 -4px 4px; } .book-date-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 140, 0, 0.4) transparent; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; } .book-date-strip::-webkit-scrollbar { height: 6px; } .book-date-strip::-webkit-scrollbar-track { background: transparent; } .book-date-strip::-webkit-scrollbar-thumb { background: rgba(255, 140, 0, 0.35); border-radius: 999px; } .book-date-pill { flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 72px; padding: 10px 14px 11px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: #f3f3f3; font-family: inherit; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .book-date-pill:hover { border-color: rgba(255,140,0,0.45); background: #1f1f1f; transform: translateY(-1px); } .book-date-pill.is-selected { background: linear-gradient(135deg, #ff8c00, #e07700); border-color: #ff8c00; color: #1a0e00; box-shadow: 0 8px 22px rgba(255,140,0,0.40); transform: translateY(-1px); } .book-date-pill .bd-dow { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: inherit; opacity: 0.7; } .book-date-pill .bd-num { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; } .book-date-pill .bd-mon { font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: inherit; opacity: 0.6; } .book-date-pill.is-selected .bd-dow, .book-date-pill.is-selected .bd-mon { opacity: 0.85; } @media (max-width: 640px) { .book-date-pill { min-width: 64px; padding: 9px 12px 10px; } .book-date-pill .bd-num { font-size: 20px; } } /* ============================================================ FAKE STRIPE CHECKOUT (mock payment screen, 2026-05-19) Two-column layout: order summary | card form. Closely mimics Stripe Checkout's look while making it visually obvious this is a mock (orange brand accents + (mock) tag). ============================================================ */ .stripe-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 980px; margin: 0 auto; background: #ffffff; color: #1a1a1a; padding: 36px; border-radius: 18px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } /* ---- Left: order summary ---- */ .stripe-summary { background: #fafafa; border-radius: 12px; padding: 24px 24px 18px; } .stripe-merchant { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #eaeaea; margin-bottom: 18px; } .stripe-merchant-logo { font-size: 28px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff8c00, #e07700); border-radius: 10px; box-shadow: 0 4px 10px rgba(255, 140, 0, 0.30); } .stripe-merchant-name { font-size: 16px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.2px; } .stripe-merchant-sub { font-size: 13px; color: #6a6a6a; } .stripe-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 8px 0; font-size: 14px; color: #1a1a1a; } .stripe-line-addon { font-size: 13.5px; color: #4a4a4a; } .stripe-line-name { line-height: 1.4; flex: 1; } .stripe-line-sub { font-size: 12px; color: #6a6a6a; margin-top: 2px; font-weight: 400; } .stripe-line-amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .stripe-divider { height: 1px; background: #eaeaea; margin: 14px 0; } .stripe-line-total { font-size: 17px; padding: 6px 0 0; } .stripe-line-total strong { color: #1a1a1a; } .stripe-secured { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eaeaea; font-size: 12px; color: #6a6a6a; display: flex; align-items: center; gap: 6px; } .stripe-secured strong { color: #635bff; font-weight: 600; } /* Stripe purple */ .stripe-mock-tag { background: rgba(255, 140, 0, 0.12); color: #c46a00; font-weight: 700; font-size: 10px; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.4px; text-transform: uppercase; } /* ---- Right: card form ---- */ .stripe-card-panel { display: flex; flex-direction: column; } .stripe-form-title { font-size: 19px; font-weight: 700; color: #1a1a1a; margin: 0 0 18px; letter-spacing: -0.2px; } .stripe-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: #4a4a4a; } .stripe-field > span { font-size: 12.5px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.1px; } .stripe-field input { width: 100%; padding: 11px 13px; background: #ffffff; border: 1px solid #d6d6d6; border-radius: 8px; color: #1a1a1a; font-size: 15px; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .stripe-field input::placeholder { color: #a3a3a3; font-weight: 400; } .stripe-field input:focus { outline: none; border-color: #635bff; box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15); } .stripe-field input:disabled { background: #f5f5f5; color: #6a6a6a; cursor: not-allowed; } .stripe-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stripe-field-row .stripe-field { margin-bottom: 14px; } .stripe-pay-btn { width: 100%; padding: 14px 18px; background: linear-gradient(135deg, #635bff 0%, #4a3aff 100%); color: #ffffff; border: none; border-radius: 8px; font-size: 15.5px; font-weight: 700; letter-spacing: 0.2px; font-family: inherit; cursor: pointer; margin-top: 4px; transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease; box-shadow: 0 4px 12px rgba(99, 91, 255, 0.30); } .stripe-pay-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 20px rgba(99, 91, 255, 0.40); } .stripe-pay-btn:active { transform: translateY(0); } .stripe-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } .stripe-disclaimer { margin: 14px 0 0; font-size: 11.5px; color: #6a6a6a; line-height: 1.5; text-align: center; } .stripe-disclaimer code { background: #f3f3f3; border-radius: 4px; padding: 1px 6px; font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 11px; color: #1a1a1a; } .stripe-powered { margin: 22px 0 0; font-size: 11px; color: #a3a3a3; text-align: center; } .stripe-powered strong { color: #635bff; font-weight: 700; letter-spacing: 0.5px; } .stripe-powered em { font-style: italic; } .stripe-error { background: #fff4f4; border: 1px solid #fbb; border-radius: 8px; padding: 12px 14px; color: #b00020; font-size: 13px; line-height: 1.45; margin-bottom: 18px; } .stripe-error strong { font-weight: 700; } .stripe-lock { font-size: 11px; } /* ---- Mobile: stack columns ---- */ @media (max-width: 720px) { .stripe-screen { grid-template-columns: 1fr; gap: 20px; padding: 22px; border-radius: 14px; } .stripe-summary { padding: 18px; } .stripe-field-row { gap: 10px; } .stripe-pay-btn { padding: 13px 16px; font-size: 15px; } } /* ============================================================ PERK-AWARE PRICING DISPLAY (added 2026-05-19) Strike-through old prices, perk banners, savings pills. ============================================================ */ /* Perk banner (Step 4 above the add-on grid) */ .perk-banner { max-width: 700px; margin: 0 auto 18px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(255,140,0,0.14), rgba(255,140,0,0.05)); border: 1px solid rgba(255,140,0,0.35); border-radius: 12px; color: #ffb967; font-size: 14px; line-height: 1.45; } .perk-banner-icon { font-size: 18px; flex-shrink: 0; } .perk-banner-text strong { color: #fff; font-weight: 700; } /* Generic strike-through used on portal-side breakdowns */ .strike { color: rgba(243, 243, 243, 0.42); font-weight: 400; margin-right: 4px; font-variant-numeric: tabular-nums; } /* Review (Step 5) — perk line + savings summary */ .review-row.review-perk { font-size: 13.5px; } .review-perk .review-k { color: #ff8c00; font-weight: 600; } .review-savings { color: #5be0a0; font-weight: 700; font-variant-numeric: tabular-nums; } .review-savings-summary { padding: 8px 0 0; margin-top: 2px; border-top: 1px dashed rgba(91, 224, 160, 0.18); } /* Stripe panel — strike-through, perk line, savings pill */ .stripe-strike { color: rgba(60, 60, 60, 0.50); text-decoration-thickness: 1.2px; font-weight: 400; font-variant-numeric: tabular-nums; font-size: 13px; margin-right: 4px; } .stripe-line-perk { padding-top: 4px; padding-bottom: 4px; } .stripe-perk-tag { display: inline-block; background: rgba(99, 91, 255, 0.10); color: #4a3aff; font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.2px; } .stripe-perk-savings { color: #0a7e3e; font-weight: 700; font-variant-numeric: tabular-nums; } .stripe-savings-pill { margin: 8px 0 4px; padding: 8px 12px; background: rgba(10, 126, 62, 0.08); border: 1px solid rgba(10, 126, 62, 0.25); color: #0a7e3e; font-size: 12.5px; font-weight: 700; border-radius: 8px; text-align: center; letter-spacing: 0.1px; } @media (max-width: 640px) { .perk-banner { font-size: 13px; padding: 10px 14px; } .stripe-strike { font-size: 12px; } } /* ============================================================ SERVICE-CARD PRICING (regular vs member, $65/hr regular rate) 2026-05-19 cosmetic pass. ============================================================ */ .session-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-top: 6px; font-size: 14px; } .session-card-price strong { font-size: 17px; font-weight: 800; color: #ff8c00; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; } .session-card-price .strike { color: rgba(243, 243, 243, 0.42); font-weight: 500; font-size: 14px; text-decoration-thickness: 1.4px; font-variant-numeric: tabular-nums; } .session-card-discount { display: inline-block; padding: 2px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #1a0e00; background: linear-gradient(135deg, #ffd169, #ff8c00); border-radius: 999px; white-space: nowrap; } .session-card-save-hint { display: block; flex-basis: 100%; font-size: 12px; font-weight: 600; color: #5be0a0; margin-top: 2px; letter-spacing: 0.1px; } /* ============================================================ PER-CARD PERK PICKER (Step 1 of mock booking, 2026-05-19) ============================================================ */ /* Card-as-form variant: vertical layout, perk controls section below the regular service info, explicit Continue button instead of full-card click. */ .session-card-form { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; } .session-card-form .session-card-top { display: flex; align-items: flex-start; gap: 14px; padding: 18px; } .session-card-form .session-card-icon { font-size: 28px; line-height: 1; flex-shrink: 0; } .session-card-form .session-card-body { flex: 1; } /* Perk picker section that sits below the service info */ .session-card-perks { background: rgba(255, 140, 0, 0.04); border-top: 1px dashed rgba(255, 140, 0, 0.30); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; } .perk-pick-header { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #ff8c00; margin-bottom: 2px; } .perk-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; font-size: 13px; } .perk-pick:hover { border-color: rgba(255, 140, 0, 0.35); } .perk-pick-info { flex: 1; min-width: 0; } .perk-pick-name { font-weight: 700; color: #f3f3f3; font-size: 13px; line-height: 1.3; } .perk-pick-sub { font-size: 11.5px; color: #999; margin-top: 2px; } /* Checkbox-style perk row (e.g. discount) */ .perk-pick-check { cursor: pointer; } .perk-pick-check input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: #ff8c00; margin-right: 6px; cursor: pointer; } .perk-pick-check input[type="checkbox"]:checked ~ .perk-pick-info .perk-pick-name { color: #ff8c00; } /* Stepper for the hours-perk picker */ .perk-stepper { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .perk-step-btn { width: 28px; height: 28px; border-radius: 50%; background: #2a2a2a; border: 1px solid rgba(255,255,255,0.10); color: #f3f3f3; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; line-height: 1; padding: 0; } .perk-step-btn:hover { background: #ff8c00; color: #1a0e00; border-color: #ff8c00; } .perk-step-input { width: 36px; height: 28px; text-align: center; background: #0f0f0f; border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; color: #f3f3f3; font-size: 14px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; /* Hide the spinner arrows on number input — looks cleaner */ -moz-appearance: textfield; } .perk-step-input::-webkit-outer-spin-button, .perk-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Live-total readout */ .perk-live-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: rgba(255, 140, 0, 0.10); border: 1px solid rgba(255, 140, 0, 0.35); border-radius: 10px; margin-top: 4px; font-size: 12.5px; color: #ffb967; font-weight: 600; } .perk-live-amount { font-size: 18px; font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; } .session-card-continue { width: 100%; margin-top: 4px; border-radius: 999px; font-weight: 700; } /* Manual-perk banner (Step 2 add-ons page) variant */ .perk-banner-manual { /* same base styling, just a distinct hook */ } .perk-banner-edit { margin-left: 8px; font-size: 12px; font-weight: 600; color: #ffffff; text-decoration: underline; opacity: 0.7; } .perk-banner-edit:hover { opacity: 1; } @media (max-width: 640px) { .session-card-perks { padding: 12px 14px 14px; } .perk-pick { padding: 9px 10px; } .perk-step-btn { width: 30px; height: 30px; font-size: 17px; } .perk-step-input { width: 38px; height: 30px; } .perk-live-amount { font-size: 17px; } } /* ============================================================ PERK MUTUAL EXCLUSION (2026-05-19) When hours are applied, discount row locks out visually, and vice versa. Keeps users from selecting a combination that the server will reject anyway. ============================================================ */ .perk-pick.is-perk-locked { opacity: 0.45; cursor: not-allowed; position: relative; pointer-events: none; } .perk-pick.is-perk-locked::after { content: 'Already applied another perk'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.06); color: #999; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.10); pointer-events: none; } .perk-pick.is-perk-locked .perk-step-btn, .perk-pick.is-perk-locked input { cursor: not-allowed; } /* Hide the descriptive sub-text when locked so the "Already applied" badge has visual room without overlapping numbers/text. */ .perk-pick.is-perk-locked .perk-pick-sub { opacity: 0.6; } @media (max-width: 640px) { .perk-pick.is-perk-locked::after { right: 10px; font-size: 10px; padding: 2px 7px; } } /* ============================================================ FREE LINE ITEMS (mastered songs included as $0, 2026-05-20) ============================================================ */ .review-row.review-free .review-v strong { color: #5be0a0; font-variant-numeric: tabular-nums; } .review-row.review-free .review-k::before { content: '🎚️'; margin-right: 4px; } .stripe-line-free { background: rgba(10, 126, 62, 0.04); margin: 4px -4px; padding-left: 4px !important; padding-right: 4px !important; border-radius: 6px; } .stripe-line-free .stripe-line-amt strong { color: #0a7e3e; } /* 2026-05-20 v3: passive hint shown on service cards when member has free mastering credits available. */ .perk-hint { margin-top: 4px; padding: 10px 12px; background: rgba(91, 224, 160, 0.08); border: 1px dashed rgba(91, 224, 160, 0.40); color: #5be0a0; font-size: 12.5px; line-height: 1.4; border-radius: 8px; } .perk-hint strong { color: #ffffff; font-weight: 700; } /* Mastering overflow add-on subtext on Review + Stripe */ .review-addon-sub { font-size: 11.5px; color: #ff8c00; font-weight: 500; margin-top: 2px; letter-spacing: 0.2px; } .stripe-line-sub { font-size: 11px; color: #6a6a6a; font-weight: 500; margin-top: 2px; } /* 2026-05-20 v3.1: live per-row pricing on Step 2 mastering add-ons */ .addon-mastering-note { font-size: 11px; color: #5be0a0; font-weight: 600; letter-spacing: 0.2px; margin-top: 3px; font-style: italic; } .addon-item-mastering .addon-price s.strike { color: rgba(243, 243, 243, 0.42); font-weight: 400; margin-right: 4px; } .addon-item-mastering .addon-price strong { color: #ff8c00; } /* ============================================================ DASHBOARD UPCOMING BOOKINGS WITH CANCEL/RESCHEDULE (2026-05-20) ============================================================ */ .flash-banner { max-width: 900px; margin: 0 auto 22px; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.5; } .flash-success { background: rgba(91, 224, 160, 0.08); border: 1px solid rgba(91, 224, 160, 0.35); color: #5be0a0; } .flash-error { background: rgba(255, 90, 90, 0.08); border: 1px solid rgba(255, 90, 90, 0.35); color: #ff8e8e; } .flash-info { background: rgba(255, 140, 0, 0.08); border: 1px solid rgba(255, 140, 0, 0.35); color: #ffb967; } .flash-banner strong { color: #ffffff; font-weight: 700; margin-right: 4px; } .mock-bookings-card { margin-bottom: 24px; } .mock-bookings-card h2 { display: flex; align-items: center; gap: 10px; } .mock-bookings-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #ffb967; background: rgba(255, 140, 0, 0.15); border: 1px solid rgba(255, 140, 0, 0.40); padding: 2px 8px; border-radius: 999px; } .mock-bookings-intro { font-size: 13px; color: #a3a3a3; margin: 0 0 16px; line-height: 1.5; } .booking-row { padding: 14px 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; margin-bottom: 12px; } .booking-row:last-child { margin-bottom: 0; } .booking-row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; } .booking-row-title { font-size: 15px; font-weight: 700; color: #f3f3f3; letter-spacing: -0.2px; } .booking-row-sub { font-size: 13px; color: #a3a3a3; margin-top: 2px; } .booking-row-when { color: #ff8c00; font-weight: 600; font-style: italic; } .booking-row-total { font-size: 17px; font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; } .booking-row-actions { display: flex; gap: 10px; flex-wrap: wrap; } .booking-action { flex: 1; min-width: 200px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; } .booking-action[open] { background: rgba(255, 255, 255, 0.04); } .booking-action-trigger { display: block; padding: 10px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; list-style: none; color: #f3f3f3; } .booking-action-trigger::-webkit-details-marker { display: none; } .booking-action-trigger::before { content: '⌃'; display: inline-block; margin-right: 8px; transform: rotate(180deg); transition: transform 0.15s ease; font-size: 10px; color: #999; } .booking-action[open] .booking-action-trigger::before { transform: rotate(0deg); } .booking-action-reschedule { color: #ff8c00; } .booking-action-cancel { color: #ff8e8e; } .booking-action-fee { display: inline-block; background: rgba(255, 255, 255, 0.06); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; letter-spacing: 0.2px; color: inherit; } .booking-action-refund { background: rgba(91, 224, 160, 0.12); color: #5be0a0; } .booking-action-panel { padding: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.08); } .booking-action-explain { font-size: 13px; color: #d3d3d3; line-height: 1.5; margin: 0 0 10px; } .booking-action-explain strong { color: #ffffff; } .booking-action-blocked { color: #999; font-style: italic; } .booking-action-fine { font-size: 11.5px; color: #888; margin: 8px 0 12px; line-height: 1.45; } .reschedule-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .reschedule-input { flex: 1; min-width: 180px; padding: 9px 12px; background: #0f0f0f; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #f3f3f3; font-size: 13.5px; font-family: inherit; color-scheme: dark; } .reschedule-input:focus { outline: none; border-color: #ff8c00; box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15); } .btn-danger { background: linear-gradient(135deg, #ff5a5a, #d83434); color: #fff !important; border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; transition: transform 0.15s ease, filter 0.15s ease; } .btn-danger:hover { transform: translateY(-1px); filter: brightness(1.06); } @media (max-width: 640px) { .booking-row-head { flex-direction: column; align-items: stretch; gap: 4px; } .booking-row-total { font-size: 15px; align-self: flex-end; } .booking-row-actions { flex-direction: column; } .booking-action { min-width: 0; } } /* ============================================================ MOCK SANDBOX (added 2026-05-20) Full demo environment under /members/mock/* ============================================================ */ .mock-banner-fat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 900px; margin: 0 auto 22px; padding: 14px 20px; background: linear-gradient(135deg, rgba(255,140,0,0.18), rgba(255,140,0,0.06)); border: 1px dashed rgba(255,140,0,0.55); border-radius: 12px; color: #ffb967; font-size: 13.5px; line-height: 1.5; } .mock-banner-fat strong { color: #ff8c00; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; flex-shrink: 0; } .mock-banner-fat a { color: #ffd169; font-weight: 700; text-decoration: underline; } .mock-landing .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .mock-link-grid .link-tile { display: block; padding: 18px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; text-decoration: none; color: #f3f3f3; transition: border-color 0.15s ease, transform 0.15s ease; } .mock-link-grid .link-tile:hover { border-color: #ff8c00; transform: translateY(-1px); } .mock-link-grid .link-tile .link-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; } .mock-link-grid .link-tile .link-label { font-size: 15px; font-weight: 700; color: #ffffff; } .mock-link-grid .link-tile .link-sub { font-size: 12.5px; color: #a3a3a3; margin-top: 4px; line-height: 1.4; } .mock-status-row { display: flex; flex-wrap: wrap; gap: 18px 28px; font-size: 14px; color: #f3f3f3; } .mock-status-row > div { line-height: 1.5; } .mock-status-k { display: block; font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 2px; } .mock-landing-back { text-align: center; } .pill-danger { background: rgba(255, 90, 90, 0.12); color: #ff8e8e; border: 1px solid rgba(255, 90, 90, 0.30); } /* ============================================================ COLLAPSIBLE PERK DRAWER ON SERVICE CARDS (2026-05-21) Cards default to clean state; perks tucked behind a single tappable summary row. ============================================================ */ .session-card-perks-drawer { margin: 14px -18px -18px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 140, 0, 0.025); } .session-card-perks-trigger { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 13px; font-weight: 600; color: #ff8c00; cursor: pointer; user-select: none; transition: background 0.15s ease; } .session-card-perks-trigger::-webkit-details-marker { display: none; } .session-card-perks-trigger:hover { background: rgba(255, 140, 0, 0.06); } .session-card-perks-icon { font-size: 14px; flex-shrink: 0; } .session-card-perks-caret { margin-left: auto; font-size: 11px; transition: transform 0.2s ease; color: #a3a3a3; } .session-card-perks-drawer[open] .session-card-perks-caret { transform: rotate(180deg); color: #ff8c00; } .session-card-perks-drawer[open] .session-card-perks-trigger { background: rgba(255, 140, 0, 0.08); border-bottom: 1px dashed rgba(255, 140, 0, 0.25); } .session-card-perks-panel { padding: 14px 18px 14px; display: flex; flex-direction: column; gap: 10px; animation: drawer-fade-in 0.2s ease-out; } @keyframes drawer-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Reset the older heavyweight session-card-perks block — no longer used. Continue button now sits below the drawer with consistent spacing. */ .session-card-form .session-card-continue { width: calc(100% - 36px); margin: 14px 18px 18px; border-radius: 999px; } /* Live total inside the drawer keeps its visual prominence */ .session-card-perks-panel .perk-live-total { margin-top: 4px; background: #1c1c1c; border: 1px solid rgba(255, 140, 0, 0.30); } @media (max-width: 640px) { .session-card-perks-drawer { margin: 12px -16px -16px; } .session-card-perks-trigger { padding: 11px 16px; font-size: 13px; } .session-card-perks-panel { padding: 12px 16px 14px; } .session-card-form .session-card-continue { width: calc(100% - 32px); margin: 12px 16px 14px; } } @media (prefers-reduced-motion: reduce) { .session-card-perks-panel { animation: none; } .session-card-perks-caret { transition: none; } } /* ============================================================ ADMIN TEST MODE TOGGLE + DEMO PAYMENT NOTICE (2026-05-21) ============================================================ */ .admin-test-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 900px; margin: 0 auto 18px; padding: 12px 18px; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.10); border-radius: 10px; font-size: 13px; } .admin-test-toggle.is-on { background: linear-gradient(135deg, rgba(255,140,0,0.14), rgba(255,140,0,0.04)); border: 1px dashed rgba(255, 140, 0, 0.55); } .admin-test-info { display: flex; flex-direction: column; gap: 2px; color: #a3a3a3; } .admin-test-info strong { color: #f3f3f3; font-weight: 700; font-size: 13.5px; letter-spacing: 0.2px; } .admin-test-toggle.is-on .admin-test-info strong { color: #ff8c00; } .admin-test-action { white-space: nowrap; } .booking-notice { max-width: 900px; margin: 0 auto 22px; padding: 14px 18px; background: rgba(255, 140, 0, 0.06); border: 1px solid rgba(255, 140, 0, 0.25); border-radius: 10px; font-size: 13.5px; color: #ffb967; line-height: 1.5; } .booking-notice strong { color: #ffffff; font-weight: 700; } @media (max-width: 640px) { .admin-test-toggle { flex-direction: column; align-items: stretch; } .admin-test-action { text-align: center; } } /* ============================================================ READ-ONLY PROFILE VIEW (2026-05-21) Default landing at /members/account, titled "My [Tier] Profile" ============================================================ */ .profile-card { padding: 32px; } .profile-header { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 24px; } .profile-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #ff8c00, #e07700); display: flex; align-items: center; justify-content: center; border: 3px solid rgba(255,255,255,0.10); box-shadow: 0 6px 18px rgba(255, 140, 0, 0.25); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-avatar .avatar-initials { font-size: 36px; font-weight: 800; color: #1a0e00; letter-spacing: -1px; } .profile-identity { flex: 1; min-width: 0; } .profile-name { font-size: 22px; font-weight: 800; color: #ffffff; letter-spacing: -0.3px; line-height: 1.2; } .profile-role { font-size: 14px; color: #ff8c00; font-weight: 600; margin-top: 4px; letter-spacing: 0.1px; } .profile-email { font-size: 13px; color: #a3a3a3; margin-top: 6px; word-break: break-all; } .profile-section { margin-bottom: 20px; } .profile-section:last-child { margin-bottom: 0; } .profile-section-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #999; margin-bottom: 8px; } .profile-bio { font-size: 14.5px; line-height: 1.55; color: #f3f3f3; margin: 0; white-space: pre-line; } .profile-genres { display: flex; flex-wrap: wrap; gap: 6px; } .genre-chip.is-static { cursor: default; background: rgba(255, 140, 0, 0.08); border-color: rgba(255, 140, 0, 0.30); color: #ffb967; font-weight: 600; } .profile-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .profile-social { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: #f3f3f3; text-decoration: none; font-size: 13.5px; font-weight: 600; transition: border-color 0.15s ease, transform 0.15s ease; } .profile-social:hover { border-color: #ff8c00; transform: translateY(-1px); } .profile-social-icon { font-size: 18px; flex-shrink: 0; } .profile-social-label { flex: 1; } .profile-social-arrow { color: #a3a3a3; font-size: 13px; } .profile-empty { text-align: center; padding: 24px 16px; color: #a3a3a3; } .profile-empty p:first-child { font-size: 16px; color: #f3f3f3; margin-bottom: 6px; } .profile-meta { text-align: center; padding: 16px; } .profile-meta p { margin: 4px 0; } @media (max-width: 640px) { .profile-card { padding: 22px; } .profile-header { flex-direction: column; text-align: center; gap: 14px; } .profile-avatar { width: 84px; height: 84px; } .profile-name { font-size: 20px; } } /* ============================================================ PERSISTENT SIGN OUT BUTTON IN NAV (2026-05-24) ============================================================ */ .navlink-signout-form { display: inline-flex; margin: 0; padding: 0; } .navlink-signout { font-family: inherit; font-size: inherit; border: 1px solid rgba(255, 90, 90, 0.30); cursor: pointer; background: rgba(255, 90, 90, 0.05); color: #ff8e8e; margin-left: 4px; } .navlink-signout:hover { background: rgba(255, 90, 90, 0.14); color: #ffffff; border-color: rgba(255, 90, 90, 0.55); } @media (max-width: 480px) { .navlink-signout { padding: 8px 12px; font-size: 13px; } } /* ============================================================ PUBLIC BENEFITS PAGE / "Why be a member?" (2026-05-28) /members/benefits — unauthenticated tier comparison + perk guide. ============================================================ */ .why-member-link { margin-top: 16px; text-align: center; } .why-member-link a { display: inline-block; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #ff8c00; background: rgba(255, 140, 0, 0.08); border: 1px solid rgba(255, 140, 0, 0.30); border-radius: 999px; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .why-member-link a:hover { background: rgba(255, 140, 0, 0.16); border-color: rgba(255, 140, 0, 0.55); transform: translateY(-1px); } /* === HERO === */ .benefits-hero { position: relative; padding: 60px 24px 48px; margin-bottom: 36px; overflow: hidden; border-radius: 0 0 20px 20px; } .benefits-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(255, 69, 0, 0.18), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(255, 140, 0, 0.14), transparent 65%), linear-gradient(180deg, rgba(18, 18, 18, 0.85), rgba(10, 10, 10, 0.95)); z-index: 0; } .benefits-hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; } .benefits-back { display: inline-block; margin-bottom: 20px; font-size: 13.5px; font-weight: 600; color: #ff8c00; text-decoration: none; padding: 8px 14px; border-radius: 999px; background: rgba(255, 140, 0, 0.10); border: 1px solid rgba(255, 140, 0, 0.35); transition: background 0.15s ease, transform 0.15s ease; } .benefits-back:hover { background: rgba(255, 140, 0, 0.18); transform: translateY(-1px); } .benefits-hero h1 { font-size: 2.6em; font-weight: 800; letter-spacing: -1px; background: linear-gradient(135deg, #ff4500, #ffd700); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px; } .benefits-hero-sub { font-size: 16px; line-height: 1.55; color: #d3d3d3; margin: 0 auto; max-width: 600px; } /* === SECTION HEADERS === */ .benefits-section { max-width: 1100px; margin: 0 auto 48px; padding: 0 20px; } .benefits-section-h { font-size: 1.5em; font-weight: 700; color: #ff8c00; margin-bottom: 22px; letter-spacing: -0.3px; text-align: center; } /* === TIER CARDS === */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .tier-grid-one { grid-template-columns: minmax(280px, 540px); justify-content: center; } .tier-card { background: rgba(18, 18, 18, 0.92); border: 1px solid rgba(255, 255, 255, 0.10); border-top: 3px solid var(--tier-color, #ff8c00); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; backdrop-filter: blur(8px); } .tier-card-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; } .tier-card-icon { font-size: 36px; line-height: 1; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border-radius: 14px; border: 1px solid var(--tier-color, rgba(255,140,0,0.4)); } .tier-card-name { font-size: 1.4em; font-weight: 800; letter-spacing: -0.3px; color: var(--tier-color, #ffffff); margin: 0; } .tier-card-tagline { font-size: 13px; color: #a3a3a3; margin: 4px 0 0; line-height: 1.4; } .tier-card-price { text-align: right; flex-shrink: 0; } .tier-card-price-num { font-size: 28px; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; line-height: 1; } .tier-card-price-sub { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .tier-card-billing-basis { font-size: 12px; font-style: italic; color: #ffb967; background: rgba(255, 140, 0, 0.06); border: 1px dashed rgba(255, 140, 0, 0.30); border-radius: 8px; padding: 8px 12px; margin: 0; } .tier-card-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .tier-card-benefits li { font-size: 14px; color: #f3f3f3; line-height: 1.45; padding-left: 22px; position: relative; } .tier-card-benefits li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--tier-color, #ff8c00); font-weight: 800; } .tier-card-extras { background: rgba(255, 140, 0, 0.04); border: 1px solid rgba(255, 140, 0, 0.25); border-radius: 10px; padding: 12px 14px; } .tier-card-extras-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #ff8c00; margin-bottom: 6px; } .tier-card-extras ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .tier-card-extras li { font-size: 13px; color: #d3d3d3; padding-left: 16px; position: relative; line-height: 1.45; } .tier-card-extras li::before { content: '•'; position: absolute; left: 4px; color: #ff8c00; } .tier-card-cta { margin-top: auto; padding-top: 8px; } .tier-card-cta .btn-primary { display: inline-block; width: 100%; text-align: center; text-decoration: none; } .tier-card-cta-invite { background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 14px; text-align: center; } .tier-card-cta-invite strong { color: #ff8c00; display: block; margin-bottom: 4px; } .tier-card-cta-invite p { font-size: 12.5px; color: #a3a3a3; line-height: 1.45; margin: 0; } /* === HOW-IT-WORKS GRID === */ .benefits-howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .benefits-howto { background: rgba(18, 18, 18, 0.92); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; padding: 22px; backdrop-filter: blur(8px); } .benefits-howto-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; } .benefits-howto h3 { font-size: 1.15em; font-weight: 700; color: #ffffff; margin: 0 0 10px; letter-spacing: -0.2px; } .benefits-howto p { font-size: 13.5px; color: #d3d3d3; line-height: 1.55; margin: 0 0 10px; } .benefits-howto p:last-child { margin-bottom: 0; } .benefits-howto strong { color: #ffffff; font-weight: 700; } .benefits-mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .benefits-mini-list li { font-size: 13.5px; color: #d3d3d3; padding-left: 18px; position: relative; line-height: 1.5; } .benefits-mini-list li::before { content: '→'; position: absolute; left: 0; color: #ff8c00; font-weight: 700; } /* === FAQ === */ .benefits-faq { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto; } .benefits-faq details { background: rgba(18, 18, 18, 0.92); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; overflow: hidden; } .benefits-faq summary { list-style: none; padding: 14px 18px; font-size: 14px; font-weight: 600; color: #f3f3f3; cursor: pointer; display: flex; align-items: center; gap: 10px; } .benefits-faq summary::-webkit-details-marker { display: none; } .benefits-faq summary::before { content: '+'; color: #ff8c00; font-weight: 800; font-size: 18px; width: 20px; display: inline-block; text-align: center; transition: transform 0.2s ease; } .benefits-faq details[open] summary::before { content: '−'; } .benefits-faq details[open] summary { border-bottom: 1px dashed rgba(255, 140, 0, 0.25); color: #ff8c00; } .benefits-faq p { padding: 14px 18px; font-size: 13.5px; color: #d3d3d3; line-height: 1.6; margin: 0; } /* === BOTTOM CTA === */ .benefits-cta { max-width: 720px; margin: 0 auto 60px; padding: 40px 24px; text-align: center; background: linear-gradient(135deg, rgba(255, 69, 0, 0.15), rgba(255, 140, 0, 0.08)); border: 1px solid rgba(255, 140, 0, 0.40); border-radius: 16px; } .benefits-cta h2 { font-size: 1.8em; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; margin-bottom: 10px; } .benefits-cta p { font-size: 15px; color: #d3d3d3; margin: 0 0 22px; line-height: 1.5; } .benefits-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .benefits-cta-actions .btn-primary, .benefits-cta-actions .btn-ghost { display: inline-block; padding: 13px 26px; text-decoration: none; font-size: 14.5px; font-weight: 700; border-radius: 999px; min-width: 220px; } @media (max-width: 640px) { .benefits-hero { padding: 40px 18px 32px; } .benefits-hero h1 { font-size: 2em; } .benefits-hero-sub { font-size: 14.5px; } .benefits-section { padding: 0 14px; margin-bottom: 36px; } .benefits-section-h { font-size: 1.3em; } .tier-card-head { grid-template-columns: auto 1fr; } .tier-card-price { grid-column: 1 / -1; text-align: left; margin-top: 4px; } .tier-card-price-num { font-size: 24px; } .benefits-cta-actions { flex-direction: column; align-items: stretch; } .benefits-cta-actions .btn-primary, .benefits-cta-actions .btn-ghost { min-width: 0; } } /* ============================================================ SPARKS — brand gift discount system (2026-05-28) ============================================================ */ /* Dashboard "Your Sparks" card */ .sparks-card { position: relative; } .sparks-card h2 { display: flex; align-items: center; gap: 10px; } .sparks-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; font-size: 12px; font-weight: 800; color: #1a0e00; background: linear-gradient(135deg, #ffd169, #ff8c00); border-radius: 999px; letter-spacing: 0.3px; } .sparks-intro { font-size: 13.5px; color: #a3a3a3; line-height: 1.5; margin: 0 0 16px; } .sparks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .spark-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: linear-gradient(135deg, rgba(255,140,0,0.08), rgba(255,69,0,0.04)); border: 1px solid rgba(255,140,0,0.30); border-radius: 12px; transition: transform 0.15s ease, border-color 0.15s ease; } .spark-tile:hover { transform: translateY(-1px); border-color: rgba(255,140,0,0.55); } .spark-tile-head { display: flex; align-items: baseline; gap: 4px; } .spark-tile-pct { font-size: 32px; font-weight: 800; color: #ff8c00; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; } .spark-tile-pct-sub { font-size: 13px; font-weight: 700; color: #ff8c00; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; } .spark-tile-name { font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: -0.2px; margin-bottom: 4px; } .spark-tile-desc { font-size: 13px; color: #d3d3d3; line-height: 1.45; margin-bottom: 8px; } .spark-tile-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: #999; gap: 8px; } .spark-tile-code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; color: #ff8c00; letter-spacing: 0.5px; } .spark-tile-cta { align-self: stretch; text-decoration: none; text-align: center; } /* Step 1 perk-drawer Spark picker (radio list) */ .perk-pick-sparks { flex-direction: column; align-items: stretch; padding: 14px; border: 1px dashed rgba(255, 140, 0, 0.35); background: rgba(255, 140, 0, 0.04); } .spark-radio-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .spark-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; cursor: pointer; background: rgba(255,255,255,0.02); transition: border-color 0.15s ease, background 0.15s ease; } .spark-radio:hover { border-color: rgba(255,140,0,0.40); } .spark-radio input[type="radio"] { margin-top: 3px; accent-color: #ff8c00; flex-shrink: 0; } .spark-radio input[type="radio"]:checked ~ .spark-radio-body { color: #ff8c00; } .spark-radio input[type="radio"]:checked ~ .spark-radio-body strong { color: #ffffff; } .spark-radio-body { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #d3d3d3; } .spark-radio-body strong { font-size: 14px; font-weight: 700; color: #f3f3f3; } .spark-radio-pct { font-size: 12px; font-weight: 700; color: #ff8c00; letter-spacing: 0.2px; } .spark-radio-desc { font-size: 12px; color: #999; line-height: 1.4; } .spark-radio-none { border-style: dashed; background: rgba(255,255,255,0.01); } /* Admin sparks table */ .sparks-form { display: flex; flex-direction: column; gap: 14px; } .sparks-form-row { display: flex; gap: 12px; } .sparks-form-row.sparks-form-grid { display: grid; grid-template-columns: 1fr 120px 140px; gap: 12px; } .sparks-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; } .sparks-form label.full { flex: 1; } .sparks-form label > span { font-size: 12px; font-weight: 600; color: #a3a3a3; letter-spacing: 0.2px; } .sparks-form label > span em { color: #777; font-style: normal; font-weight: 400; } .sparks-form input, .sparks-form select, .sparks-form textarea { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: #f3f3f3; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; } .sparks-form input:focus, .sparks-form select:focus, .sparks-form textarea:focus { outline: none; border-color: #ff8c00; box-shadow: 0 0 0 3px rgba(255,140,0,0.18); } .sparks-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; } .sparks-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sparks-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #999; border-bottom: 1px solid rgba(255,255,255,0.08); } .sparks-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #d3d3d3; vertical-align: top; } .sparks-table .mono { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; color: #ff8c00; font-weight: 600; } .spark-name { font-weight: 700; color: #f3f3f3; } .spark-cat { font-size: 11.5px; color: #999; margin-top: 2px; } .spark-applied-to { font-size: 11px; color: #5be0a0; margin-top: 4px; } .btn-xs { padding: 4px 10px !important; font-size: 11.5px !important; border-radius: 6px !important; } .table-wrap { overflow-x: auto; } .pill-success { background: rgba(91,224,160,0.12); color: #5be0a0; border-color: rgba(91,224,160,0.30); } @media (max-width: 640px) { .sparks-form-row.sparks-form-grid { grid-template-columns: 1fr; } .sparks-grid { grid-template-columns: 1fr; } } /* ============================================================ TIER PROMISE LINE — adds the "Buys X." identity line per tier on the perks comparison page (2026-05-30 rename). ============================================================ */ .tier-promise { margin: 6px 0 0; padding: 8px 12px; font-size: 12.5px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--accent, #ff8c00); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } .tier-promise strong { font-weight: 700; } /* Tier badge slug needs to cover the new spaced names */ .tier-cell.tier-artist-access { background: rgba(205,127,50,0.18); color: #cd7f32; } .tier-cell.tier-artist-development { background: rgba(255,215,0,0.18); color: #ffd700; } .tier-cell.tier-executive-artist-experience { background: rgba(229,228,226,0.16); color: #e5e4e2; } .tier-cell.tier-inner-circle { background: rgba(255,140,0,0.18); color: #ff8c00; } /* ============================================================ GUEST HERO — rework 2026-05-30. Explains what "Guest" means instead of just showing "0 hrs". Two CTAs: Book Now (primary) and See Plans (secondary). ============================================================ */ .hero-card-guest { padding: 24px; background: linear-gradient(135deg, rgba(255,140,0,0.05), rgba(255,69,0,0.02)); border: 1px solid rgba(255,140,0,0.20); } .hero-card-guest .hero-label { font-size: 13px; font-weight: 700; color: #ff8c00; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; } .hero-guest-explainer p { margin: 0 0 12px; color: #d8d8d8; line-height: 1.55; font-size: 14.5px; } .hero-guest-explainer p strong { color: #ffffff; } .hero-guest-list { margin: 0 0 14px; padding: 0 0 0 20px; list-style: none; } .hero-guest-list li { position: relative; padding: 10px 0 10px 8px; border-left: 2px solid rgba(255,140,0,0.30); margin-bottom: 6px; font-size: 14px; color: #d3d3d3; line-height: 1.5; } .hero-guest-list li strong { color: #f5f5f5; font-weight: 700; } .hero-guest-upgrade { margin-top: 14px; padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 13.5px; color: #b8b8b8; line-height: 1.5; } .hero-actions-guest { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .hero-actions-guest .btn-primary, .hero-actions-guest .btn-secondary { flex: 1 1 auto; min-width: 160px; text-align: center; } /* Secondary CTA — softer than the orange primary */ .btn-secondary { display: inline-block; padding: 12px 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #f3f3f3; font-weight: 600; font-size: 14px; border-radius: 8px; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; cursor: pointer; } .btn-secondary:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.25); } .btn-secondary.btn-lg { padding: 14px 28px; font-size: 15px; } @media (max-width: 520px) { .hero-actions-guest { flex-direction: column; } .hero-actions-guest .btn-primary, .hero-actions-guest .btn-secondary { width: 100%; } } /* ============================================================ GUEST VARIANT TOGGLE — 2026-05-30 Tab-style toggle between Standard ($75/hr) and AudibleHeaT Experience ($100/hr) on Step 1 of the booking flow. Replaces the previous side-by-side card grid. ============================================================ */ .guest-toggle-card { padding: 0; overflow: hidden; } .variant-toggle { display: flex; gap: 0; background: rgba(0,0,0,0.40); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 6px; } .variant-tab { flex: 1; padding: 14px 16px; background: transparent; border: 1px solid transparent; color: #999; font-size: 14.5px; font-weight: 600; font-family: inherit; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .variant-tab:hover { color: #ddd; background: rgba(255,255,255,0.03); } .variant-tab.is-active { background: rgba(255,140,0,0.10); color: #ffffff; border-color: rgba(255,140,0,0.40); } .variant-tab-price { display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 700; color: #ff8c00; background: rgba(255,140,0,0.12); border-radius: 999px; letter-spacing: 0.3px; } .variant-tab.is-active .variant-tab-price { background: rgba(255,140,0,0.25); color: #fff; } .variant-panel { padding: 22px; } .variant-panel[hidden] { display: none; } .variant-explainer { margin-bottom: 22px; padding: 16px 18px; background: rgba(255,140,0,0.04); border: 1px solid rgba(255,140,0,0.16); border-radius: 10px; } .variant-explainer h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: -0.2px; } .variant-includes { margin: 0 0 10px; padding: 0; list-style: none; } .variant-includes li { position: relative; padding: 5px 0 5px 22px; font-size: 13.5px; color: #d3d3d3; line-height: 1.5; } .variant-includes li::before { content: '✓'; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; font-size: 11px; font-weight: 800; color: #ff8c00; } .variant-includes li strong { color: #ffffff; font-weight: 700; } .variant-not-included { margin: 8px 0 0; font-size: 12.5px; color: #888; font-style: italic; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.08); } .variant-not-included.variant-yes { color: #ffb060; font-style: normal; font-weight: 600; } @media (max-width: 560px) { .variant-tab { padding: 12px 10px; font-size: 13px; flex-direction: column; gap: 4px; } .variant-panel { padding: 16px; } .variant-explainer { padding: 14px; } } /* ============================================================ GUEST PERKS INTRO CARD — 2026-05-30 Shown only when a Guest visits /members/perks. Reassures them that choosing AudibleHeaT is already a win, then teases what memberships add on top. ============================================================ */ .guest-perks-card { background: linear-gradient(135deg, rgba(255,140,0,0.06), rgba(255,69,0,0.02)); border: 1px solid rgba(255,140,0,0.22); margin-bottom: 28px; } .guest-perks-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .guest-perks-icon { font-size: 32px; line-height: 1; flex-shrink: 0; } .guest-perks-card h2 { margin: 0 0 8px; font-size: 19px; color: #ffffff; letter-spacing: -0.3px; } .guest-perks-lead { margin: 0; font-size: 14px; color: #d3d3d3; line-height: 1.55; } .guest-perks-list { list-style: none; padding: 0; margin: 0 0 22px; } .guest-perks-list li { padding: 14px 0 14px 28px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13.5px; color: #c8c8c8; line-height: 1.55; position: relative; } .guest-perks-list li:last-child { border-bottom: 0; } .guest-perks-list li::before { content: '✓'; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; font-size: 14px; font-weight: 800; color: #ff8c00; } .guest-perks-list li strong { color: #ffffff; font-weight: 700; display: inline; } .guest-perks-cta { padding: 16px 18px; background: rgba(0,0,0,0.30); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); } .guest-perks-cta p { margin: 0 0 12px; font-size: 14px; color: #d3d3d3; line-height: 1.5; } .guest-perks-cta p strong { color: #ffffff; } .guest-perks-cta .btn-primary { display: inline-block; text-decoration: none; } @media (max-width: 520px) { .guest-perks-header { flex-direction: column; gap: 10px; } .guest-perks-icon { font-size: 28px; } .guest-perks-card h2 { font-size: 17px; } } /* ============================================================ ADD-ON TILES — 2026-05-30 rework Click-tile pattern matching the perk picker. Checkbox is visually hidden; the whole tile is the click target. Selected state is a clear orange border + checkmark badge. ============================================================ */ .addon-section { margin-bottom: 24px; } .addon-section:last-child { margin-bottom: 0; } .addon-section-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; } .addon-section-sub { margin: 0 0 12px; font-size: 13px; color: #999; line-height: 1.5; } .addon-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .addon-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .addon-tile:hover { border-color: rgba(255,140,0,0.30); background: rgba(255,255,255,0.04); } .addon-tile input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .addon-tile-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.30); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #ff8c00; transition: background 0.15s ease, color 0.15s ease; } .addon-tile-check-empty { display: inline; } .addon-tile-check-on { display: none; } /* Selected state */ .addon-tile:has(input:checked) { border-color: rgba(255,140,0,0.60); background: rgba(255,140,0,0.06); } .addon-tile:has(input:checked) .addon-tile-check { background: #ff8c00; color: #1a0e00; border-color: #ff8c00; } .addon-tile:has(input:checked) .addon-tile-check-empty { display: none; } .addon-tile:has(input:checked) .addon-tile-check-on { display: inline; } /* Body */ .addon-tile-body { flex: 1; min-width: 0; } .addon-tile-name { font-size: 14px; font-weight: 600; color: #f3f3f3; letter-spacing: -0.1px; line-height: 1.35; margin-bottom: 4px; } .addon-tile-price { font-size: 13px; font-weight: 700; color: #ff8c00; letter-spacing: 0.2px; } .addon-tile-price-free { color: #5be0a0; } /* Mastering note (free credits applied live by JS) */ .addon-mastering-note { margin-top: 4px; font-size: 12px; color: #999; line-height: 1.4; } .addon-mastering-note:empty { display: none; } @media (max-width: 480px) { .addon-tile-grid { grid-template-columns: 1fr; } } /* ============================================================ ADD-ON STEPPER TILE — 2026-05-30 v2 One tile per category (Stems / Mastering) with a +/− stepper. Replaces the previous 3-tile-per-category checkbox grid. ============================================================ */ .addon-stepper-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 18px; transition: border-color 0.15s ease, background 0.15s ease; } .addon-stepper-tile:has(.songCount:not(:empty):not(:contains('0'))) { /* :contains is not a real selector; relying on JS to add active class if needed */ } .addon-stepper-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; } .addon-stepper-title { font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: -0.1px; } .addon-stepper-rate { font-size: 12px; font-weight: 700; color: #ff8c00; letter-spacing: 0.2px; background: rgba(255,140,0,0.10); padding: 4px 10px; border-radius: 999px; } .addon-stepper-rate-free { color: #5be0a0; background: rgba(91,224,160,0.10); } .addon-stepper-sub { font-size: 13px; color: #999; line-height: 1.5; margin-bottom: 10px; } .addon-stepper-credits { margin: 8px 0 12px; padding: 8px 12px; background: rgba(255,140,0,0.06); border: 1px solid rgba(255,140,0,0.20); border-radius: 8px; font-size: 12.5px; color: #ffb060; } .addon-stepper-credits strong { color: #ff8c00; font-weight: 800; } .addon-stepper-row { display: flex; align-items: stretch; gap: 10px; margin-top: 8px; } .addon-stepper-btn { flex-shrink: 0; width: 44px; font-size: 22px; font-weight: 700; color: #ff8c00; background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.30); border-radius: 10px; cursor: pointer; font-family: inherit; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; user-select: none; } .addon-stepper-btn:hover:not(:disabled) { background: rgba(255,140,0,0.20); border-color: rgba(255,140,0,0.50); } .addon-stepper-btn:active:not(:disabled) { transform: scale(0.96); } .addon-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .addon-stepper-readout { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 14px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; } .addon-stepper-count { font-size: 16px; font-weight: 700; color: #f3f3f3; letter-spacing: -0.2px; } .addon-stepper-count .songCount { font-size: 24px; font-weight: 800; color: #ff8c00; font-variant-numeric: tabular-nums; margin-right: 4px; } .addon-stepper-line { font-size: 11.5px; color: #999; margin-top: 2px; letter-spacing: 0.2px; min-height: 14px; } .addon-stepper-line-total { font-size: 14px; font-weight: 700; color: #ff8c00; margin-top: 4px; font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .addon-stepper-btn { width: 40px; font-size: 20px; } .addon-stepper-count .songCount { font-size: 22px; } } /* Benefits page: lead paragraph under the "Pick the tier" heading (2026-05-31) */ .benefits-section-lead { margin: -8px 0 20px; font-size: 14.5px; color: #b8b8b8; line-height: 1.55; max-width: 640px; } /* Benefits page: highlight the bonus-discount perk card (2026-05-31) */ .benefits-howto-highlight { border: 1px solid rgba(255,140,0,0.40) !important; background: linear-gradient(135deg, rgba(255,140,0,0.07), rgba(255,69,0,0.03)) !important; } .benefits-howto-highlight h3 { color: #ff8c00; } /* Booking card: bonus-discount perk row styling */ .perk-pick[data-kind="bonus-discount"] .perk-pick-name { color: #ff8c00; } /* ============================================================ MEMBER PERK GUIDE — 2026-05-31 Tier-specific "how to use your perks" explainer on /members/perks with worked mix-and-match savings examples. ============================================================ */ .perk-guide { margin-bottom: 28px; } .perk-guide-h { margin: 0 0 6px; font-size: 20px; color: #ffffff; letter-spacing: -0.3px; } .perk-guide-lead { margin: 0 0 20px; font-size: 14px; color: #b8b8b8; line-height: 1.55; } .perk-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 24px; } .perk-guide-item { padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; } .perk-guide-icon { font-size: 24px; line-height: 1; margin-bottom: 8px; } .perk-guide-item h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #ffffff; } .perk-guide-item p { margin: 0 0 10px; font-size: 13.5px; color: #c8c8c8; line-height: 1.5; } .perk-guide-item p strong { color: #ff8c00; } .perk-guide-eg { padding: 8px 12px; background: rgba(255,140,0,0.06); border-radius: 8px; font-size: 13px; color: #ddd; } .perk-guide-eg s { color: #888; } .perk-guide-eg strong { color: #5be0a0; font-size: 14px; } .perk-guide-mix { padding: 18px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; } .perk-guide-mix h3 { margin: 0 0 12px; font-size: 16px; color: #ffffff; } .perk-guide-mix > ul { margin: 0 0 18px; padding: 0; list-style: none; } .perk-guide-mix > ul li { padding: 8px 0 8px 22px; position: relative; font-size: 13.5px; color: #c8c8c8; line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,0.04); } .perk-guide-mix > ul li:last-child { border-bottom: 0; } .perk-guide-mix > ul li::before { content: '\2022'; position: absolute; left: 6px; top: 8px; color: #ff8c00; font-weight: 800; } .perk-guide-mix > ul li strong { color: #f5f5f5; } .perk-guide-scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; } .perk-guide-scenario { padding: 14px; background: rgba(255,140,0,0.05); border: 1px solid rgba(255,140,0,0.20); border-radius: 10px; } .perk-guide-scenario-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #ff8c00; margin-bottom: 8px; } .perk-guide-scenario p { margin: 0 0 6px; font-size: 13px; color: #c8c8c8; line-height: 1.5; } .perk-guide-scenario-total { font-size: 14px; color: #ddd; } .perk-guide-scenario-total s { color: #888; } .perk-guide-scenario-total strong { color: #5be0a0; font-size: 16px; } .perk-guide-scenario-total span { font-size: 11.5px; color: #999; display: block; margin-top: 2px; } .perk-guide-tip { margin: 0; font-size: 13px; color: #b8b8b8; line-height: 1.5; } .perks-footer-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); } .perks-footer-actions .btn-primary, .perks-footer-actions .btn-secondary { flex: 1 1 auto; min-width: 180px; text-align: center; text-decoration: none; } @media (max-width: 520px) { .perks-footer-actions { flex-direction: column; } } /* ============================================================ ADMIN: Set Available Hours (2026-06-07 powerhouse control) ============================================================ */ .set-hours-card { border: 1px solid rgba(255,140,0,0.35) !important; background: linear-gradient(135deg, rgba(255,140,0,0.06), rgba(255,69,0,0.02)) !important; } .set-hours-card h2 { color: #ff8c00; } .set-hours-sub { font-size: 13px; color: #b8b8b8; margin: 0 0 14px; line-height: 1.5; } .set-hours-current { font-size: 13px; color: #999; margin-bottom: 10px; } .set-hours-current strong { color: #f3f3f3; } .set-hours-row { display: flex; align-items: center; gap: 10px; } .set-hours-row input { width: 120px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,140,0,0.30); color: #fff; font-size: 20px; font-weight: 700; padding: 10px 12px; border-radius: 8px; text-align: center; } .set-hours-row input:focus { outline: none; border-color: #ff8c00; box-shadow: 0 0 0 3px rgba(255,140,0,0.18); } .set-hours-unit { font-size: 14px; color: #999; font-weight: 600; } /* ============================================================ UPCOMING SESSIONS CALENDAR — 2026-06-07 Inline month grid on the member dashboard highlighting days with booked sessions, plus a "next session" callout. ============================================================ */ .cal-card h2 { margin-bottom: 14px; } .cal-next { padding: 14px 16px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(255,140,0,0.10), rgba(255,69,0,0.04)); border: 1px solid rgba(255,140,0,0.30); border-radius: 10px; } .cal-next-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: #ff8c00; font-weight: 700; margin-bottom: 4px; } .cal-next-when { font-size: 17px; font-weight: 700; color: #fff; } .cal-next-name { font-size: 13px; color: #c8c8c8; margin-top: 2px; } .cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .cal-month-name { font-size: 14px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 8px; } .cal-dow-row, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-dow { text-align: center; font-size: 10px; color: #888; font-weight: 700; padding: 2px 0; } .cal-cell { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 7px; background: rgba(255,255,255,0.02); font-size: 12px; color: #aaa; position: relative; border: 1px solid transparent; } .cal-empty { background: transparent; } .cal-num { line-height: 1; } .cal-has-session { background: rgba(255,140,0,0.14); color: #fff; font-weight: 700; } .cal-today { border-color: rgba(255,255,255,0.45); } .cal-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #ff8c00; margin-top: 2px; } .cal-legend { margin-top: 14px; font-size: 11.5px; color: #888; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cal-legend .cal-dot { margin: 0 2px; } .cal-today-key { display: inline-block; padding: 0 6px; border: 1px solid rgba(255,255,255,0.45); border-radius: 4px; } /* ============================================================ CALENDAR COLLAPSE TOGGLE — 2026-06-07 Calendar grid folds behind an expand button; next-session callout stays visible. Native
/. ============================================================ */ .cal-details { margin-top: 4px; } .cal-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; list-style: none; user-select: none; transition: background 0.15s ease, border-color 0.15s ease; } .cal-toggle::-webkit-details-marker { display: none; } .cal-toggle:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,140,0,0.30); } .cal-toggle-label { font-size: 13.5px; font-weight: 600; color: #f3f3f3; } .cal-toggle-count { font-size: 11.5px; color: #ff8c00; background: rgba(255,140,0,0.12); padding: 3px 9px; border-radius: 999px; font-weight: 700; } .cal-toggle-caret { margin-left: auto; color: #ff8c00; font-size: 12px; transition: transform 0.2s ease; } .cal-details[open] .cal-toggle-caret { transform: rotate(180deg); } .cal-details[open] .cal-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: rgba(255,140,0,0.30); } .cal-details[open] .cal-months { margin-top: 14px; } /* Make the expanded grid a touch more compact */ .cal-months { gap: 14px; } .cal-cell { font-size: 11px; border-radius: 6px; } /* ============================================================ ADMIN: Perk Overrides panel (2026-06-07 maximum control) ============================================================ */ .overrides-card { border: 1px solid rgba(120,180,255,0.30) !important; } .overrides-card h2 { color: #7db4ff; } .overrides-sub { font-size: 13px; color: #b8b8b8; margin: 0 0 16px; line-height: 1.5; } .overrides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .overrides-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #a3a3a3; } .overrides-form input { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 15px; padding: 9px 11px; border-radius: 8px; } .overrides-form input:focus { outline: none; border-color: #7db4ff; box-shadow: 0 0 0 3px rgba(120,180,255,0.18); } .overrides-form input::placeholder { color: #666; font-size: 12px; } .overrides-counters { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); } .overrides-counters-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #888; font-weight: 700; margin-bottom: 10px; } .overrides-actions { margin-top: 16px; } /* ============================================================ PERK OVERRIDE: badge, history, security gate (2026-06-07) ============================================================ */ .perk-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #7db4ff; background: rgba(120,180,255,0.14); border: 1px solid rgba(120,180,255,0.35); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.2px; } .overrides-gate { padding: 12px 14px; margin-bottom: 14px; background: rgba(255,80,80,0.10); border: 1px solid rgba(255,80,80,0.40); border-radius: 8px; font-size: 13px; color: #ffb0b0; line-height: 1.5; } .overrides-gate strong { color: #fff; } .overrides-password { margin-top: 16px; padding: 14px; background: rgba(255,80,80,0.06); border: 1px solid rgba(255,80,80,0.25); border-radius: 8px; } .overrides-password label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: #ffb0b0; } .overrides-password input { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,80,80,0.30); color: #fff; font-size: 15px; padding: 10px 12px; border-radius: 8px; } .overrides-password input:focus { outline: none; border-color: #ff8080; box-shadow: 0 0 0 3px rgba(255,80,80,0.18); } .overrides-history { margin-bottom: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; } .overrides-history > summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: #a3a3a3; list-style: none; } .overrides-history > summary::-webkit-details-marker { display: none; } .overrides-history-list { padding: 0 14px 12px; } .overrides-history-row { display: grid; grid-template-columns: 120px 130px 1fr; gap: 10px; padding: 7px 0; font-size: 11.5px; border-top: 1px solid rgba(255,255,255,0.05); } .oh-when { color: #888; } .oh-by { color: #7db4ff; } .oh-chg { color: #ccc; } @media (max-width: 600px) { .overrides-history-row { grid-template-columns: 1fr; gap: 2px; } } /* Sparks admin: member search box above the dropdown (2026-06-07) */ .member-search { width: 100%; margin-bottom: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: #f3f3f3; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; } .member-search:focus { outline: none; border-color: #ff8c00; box-shadow: 0 0 0 3px rgba(255,140,0,0.18); } .member-search::placeholder { color: #888; } /* ============================================================ SESSION FILE UPLOAD PICKER — 2026-06-07 3-way picker (file / link / youtube) on project details. ============================================================ */ .book-upload { margin-bottom: 18px; padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; } .book-label-text { display: block; font-size: 14px; font-weight: 600; color: #f3f3f3; margin-bottom: 10px; } .upload-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .upload-tab { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: #aaa; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; } .upload-tab:hover { color: #ddd; border-color: rgba(255,140,0,0.30); } .upload-tab.is-active { background: rgba(255,140,0,0.12); color: #fff; border-color: rgba(255,140,0,0.45); } .upload-pane { display: none; } .upload-pane.is-active { display: block; } .upload-input, .upload-link { width: 100%; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.12); color: #f3f3f3; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; } .upload-input::file-selector-button { background: rgba(255,140,0,0.15); border: 1px solid rgba(255,140,0,0.35); color: #ff8c00; padding: 6px 12px; border-radius: 6px; margin-right: 12px; cursor: pointer; font-weight: 600; } .upload-hint { font-size: 12px; color: #888; margin-top: 6px; } .upload-status { margin-top: 8px; font-size: 13px; min-height: 18px; } .upload-prog { color: #ffb060; } .upload-ok { color: #5be0a0; font-weight: 600; } .upload-err { color: #ff7070; font-weight: 600; } /* ============================================================ ADMIN MARKETING SECTION — 2026-06-07 ============================================================ */ .mkt-sub { font-size: 13.5px; color: #b8b8b8; line-height: 1.55; margin: 0 0 14px; } .mkt-strategy { display: flex; flex-direction: column; gap: 8px; } .mkt-strategy-item { font-size: 13px; color: #c8c8c8; line-height: 1.5; padding: 8px 12px; background: rgba(255,255,255,0.02); border-left: 2px solid rgba(255,140,0,0.35); border-radius: 0 6px 6px 0; } .mkt-strategy-item strong { color: #ff8c00; } .seg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .seg-tab { font-size: 12.5px; font-weight: 600; color: #aaa; padding: 7px 12px; border-radius: 7px; text-decoration: none; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); } .seg-tab:hover { color: #ddd; border-color: rgba(255,140,0,0.30); } .seg-tab.is-active { background: rgba(255,140,0,0.14); color: #fff; border-color: rgba(255,140,0,0.45); } .mkt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .mkt-actions .btn-ghost, .mkt-actions .btn-primary { text-decoration: none; } .mkt-actions button[disabled] { opacity: 0.5; cursor: not-allowed; } .mkt-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mkt-table th { text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #999; border-bottom: 1px solid rgba(255,255,255,0.08); } .mkt-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #d3d3d3; } .mkt-table .mono { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: #bbb; } .seg-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; } .seg-active { background: rgba(91,224,160,0.15); color: #5be0a0; } .seg-warm { background: rgba(255,200,80,0.15); color: #ffc850; } .seg-cooling { background: rgba(255,140,0,0.15); color: #ff8c00; } .seg-lapsed { background: rgba(180,140,255,0.15); color: #b48cff; } .seg-cold { background: rgba(120,160,200,0.15); color: #88b0ff; } .mkt-next-card { border: 1px dashed rgba(255,255,255,0.15) !important; } /* ============================================================ ACCESS ROLES — chips + role assignment card (2026-06-07) ============================================================ */ .role-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.3px; vertical-align: middle; } .role-owner { background: linear-gradient(135deg,#ffd169,#ff8c00); color:#1a0e00; } .role-manager { background: rgba(120,180,255,0.16); color:#7db4ff; border:1px solid rgba(120,180,255,0.35); } .role-member { background: rgba(255,255,255,0.08); color:#bbb; } .role-card { border: 1px solid rgba(255,140,0,0.30) !important; } .role-card h2 { color: #ff8c00; } .role-current { margin-bottom: 12px; font-size: 14px; color: #ccc; } .role-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .role-row select { flex: 1; min-width: 220px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 14px; } .role-locked { font-size: 13px; color: #888; font-style: italic; } /* Staff-only payment bypass hint (2026-06-07) */ .stripe-bypass-hint { margin: -4px 0 12px; padding: 8px 10px; font-size: 12px; color: #ffb060; background: rgba(255,140,0,0.08); border: 1px dashed rgba(255,140,0,0.30); border-radius: 6px; } .stripe-bypass-hint code { background: rgba(0,0,0,0.4); padding: 1px 6px; border-radius: 4px; color: #ffd169; font-weight: 700; } /* Real Stripe Payment Element (2026-06-07) */ #stripe-payment-element { margin: 14px 0 4px; } .stripe-error-msg { color: #ff7070; font-size: 13px; margin-top: 8px; min-height: 16px; } /* ============================================================ ADMIN FINANCE SECTION — 2026-06-07 ============================================================ */ .fin-mode { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; vertical-align: middle; margin-left: 8px; } .fin-live { background: rgba(91,224,160,0.15); color: #5be0a0; } .fin-test { background: rgba(255,200,80,0.15); color: #ffc850; } .fin-note { font-size: 13px; color: #b8b8b8; line-height: 1.5; padding: 12px 14px; margin-bottom: 16px; background: rgba(120,180,255,0.06); border: 1px solid rgba(120,180,255,0.20); border-radius: 8px; } .fin-note strong { color: #fff; } .fin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .fin-stat { padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; text-align: center; } .fin-stat-hero { background: linear-gradient(135deg, rgba(91,224,160,0.10), rgba(91,224,160,0.03)); border-color: rgba(91,224,160,0.30); } .fin-stat-num { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; } .fin-stat-hero .fin-stat-num { color: #5be0a0; } .fin-stat-num.fin-neg { color: #ff9090; } .fin-stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; } .fin-balance { display: flex; gap: 32px; flex-wrap: wrap; } .fin-balance-label { font-size: 12px; color: #999; display: block; } .fin-balance-num { font-size: 20px; font-weight: 700; color: #fff; } .fin-table .fin-amt { font-weight: 700; color: #f3f3f3; white-space: nowrap; } .fin-email { font-size: 11px; color: #888; } .fin-card { font-size: 12px; color: #aaa; } .fin-refund { font-size: 11px; color: #ff9090; font-weight: 400; } .fin-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; } .fin-status-paid { background: rgba(91,224,160,0.15); color: #5be0a0; } .fin-status-refunded { background: rgba(255,140,140,0.15); color: #ff9090; } .fin-status-partial-refund { background: rgba(255,200,80,0.15); color: #ffc850; } /* ============================================================ SPLASH / LANDING PAGE — 2026-06-16 ============================================================ */ body.splash-page .bg-anim { display: none; } body.splash-page .container { max-width: 100%; padding: 0; } .splash { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .splash-hero { position: absolute; inset: 0; background-image: url('/members/static/img/splash-hero.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0; } .splash-overlay { position: absolute; inset: 0; z-index: 1; /* 2026-06-16: dimmed further so headline + tagline stay readable over the busy flames/speaker. */ background: linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.80) 70%, rgba(10,10,10,0.97) 100%); } .splash-content { position: relative; z-index: 2; width: 100%; max-width: 560px; padding: 40px 24px 56px; text-align: center; } .splash-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ff8c00; margin-bottom: 14px; } .splash-title { font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -1px; color: #fff; margin: 0 0 18px; text-shadow: 0 2px 24px rgba(0,0,0,0.6); } .splash-title-accent { color: #ff8c00; } .splash-tagline { font-size: 15px; line-height: 1.6; color: #d8d8d8; margin: 0 auto 30px; max-width: 460px; } .splash-actions { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 0 auto 18px; } .splash-btn { display: block; width: 100%; padding: 16px 24px; border-radius: 14px; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.12s ease, box-shadow 0.15s ease; } .splash-btn:active { transform: scale(0.98); } .splash-btn-primary { background: linear-gradient(135deg, #ff9d2e, #ff7a00); color: #1a0e00; box-shadow: 0 6px 28px rgba(255,140,0,0.40); } .splash-btn-secondary { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(4px); } .splash-btn-secondary:hover { background: rgba(255,255,255,0.16); } .splash-learn { display: inline-block; margin-top: 4px; font-size: 13.5px; color: #ffb060; text-decoration: none; } .splash-learn:hover { text-decoration: underline; } @media (min-width: 720px) { .splash { align-items: center; } .splash-title { font-size: 3.2rem; } } /* Guest contact block on the booking details step */ .guest-contact-block { padding: 16px; margin-bottom: 18px; background: rgba(255,140,0,0.06); border: 1px solid rgba(255,140,0,0.22); border-radius: 12px; } .guest-contact-head { font-size: 13px; font-weight: 700; color: #ff8c00; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .guest-upsell { margin-top: 6px; font-size: 12.5px; color: #b8b8b8; line-height: 1.5; } .guest-upsell a { color: #ff8c00; font-weight: 600; } /* Login: back-to-home link (2026-06-16) */ .auth-back { display:inline-block; font-size:13px; color:#ff8c00; text-decoration:none; margin-bottom:10px; } .auth-back:hover { text-decoration:underline; } /* ============================================================ CONVERSIONS / FUNNEL DASHBOARD — 2026-06-16 ============================================================ */ .cv-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; } .cv-kpi { background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; text-align:center; } .cv-kpi-num { font-size:28px; font-weight:800; color:#1a1a1a; line-height:1.1; } .cv-kpi-label { font-size:12.5px; color:#777; margin-top:6px; line-height:1.4; } .cv-kpi-sub { font-size:11px; color:#aaa; } .cv-funnel { margin-top:14px; } .cv-row { margin-bottom:14px; } .cv-row-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; } .cv-step { font-size:13.5px; font-weight:600; color:#333; } .cv-drop { font-size:11.5px; color:#999; } .cv-bar-track { background:#f3f3f3; border-radius:8px; overflow:hidden; height:34px; } .cv-bar { height:34px; border-radius:8px; display:flex; align-items:center; justify-content:flex-end; min-width:34px; transition:width .4s ease; } .cv-count { color:#fff; font-weight:700; font-size:13px; padding-right:10px; text-shadow:0 1px 2px rgba(0,0,0,0.2); } .cv-note { background:#f7f9ff; border-color:#e3e9ff; } .cv-note code { background:#eef; padding:1px 5px; border-radius:4px; font-size:12.5px; } @media (max-width:640px){ .cv-kpis{ grid-template-columns:repeat(2,1fr);} } /* Guest session-card upgrade CTA (replaces "save as a member" wording) — 2026-06-16 */ .session-card-upsell { display: inline-block; text-decoration: none; color: #ff8c00 !important; font-weight: 600; border-bottom: 1px dashed rgba(255,140,0,0.5); transition: color .15s ease; } .session-card-upsell:hover { color: #ffa733 !important; border-bottom-color: #ffa733; } /* Guest "Upgrade & save" badge (replaces "Member-only" on guest Experience cards) — 2026-06-16 */ .session-card-badge-upsell { background: linear-gradient(135deg, #ff9d2e, #ff7a00) !important; color: #1a0e00 !important; font-weight: 700; } /* ============================================================ GUEST UPGRADE DROPDOWN — 2026-06-16 ============================================================ */ .session-card-badge-upsell { border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } .session-card-badge-upsell:hover { filter: brightness(1.08); } .upgrade-dropdown { margin-top: 16px; background: #161616; border: 1px solid rgba(255,140,0,0.30); border-radius: 14px; overflow: hidden; animation: upgFade .18s ease; } @keyframes upgFade { from { opacity: 0; transform: translateY(-4px);} to {opacity:1;transform:none;} } .upg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(255,140,0,0.10); font-size: 13.5px; font-weight: 700; color: #ff8c00; } .upg-close { background: none; border: none; color: #999; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .upg-close:hover { color: #fff; } .upg-tabs { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; } .upg-tab { background: #222; border: 1px solid #333; color: #ccc; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s ease; } .upg-tab.is-active { background: #ff8c00; border-color: #ff8c00; color: #1a0e00; } .upg-tab:hover:not(.is-active) { border-color: #ff8c00; color: #ff8c00; } .upg-panels { padding: 12px 16px 16px; } .upg-panel { display: none; } .upg-panel.is-active { display: block; } .upg-tagline { font-size: 13px; color: #aaa; font-style: italic; margin-bottom: 10px; } .upg-perks { list-style: none; padding: 0; margin: 0 0 14px; } .upg-perks li { font-size: 13.5px; color: #ddd; padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid #222; } .upg-perks li:before { content: "✓"; position: absolute; left: 0; color: #2f9e44; font-weight: 700; } .upg-perks li:last-child { border-bottom: none; } .upg-perks li strong { color: #fff; } .upg-go { display: block; text-align: center; text-decoration: none; } /* Admin: charge card on file — 2026-06-16 */ .charge-card { border: 1px solid rgba(255,140,0,0.25); } .charge-cards { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; } .charge-card-pick { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #2a2a2a; border-radius: 10px; cursor: pointer; font-size: 14px; transition: border-color .12s ease; } .charge-card-pick:has(input:checked) { border-color: #ff8c00; background: rgba(255,140,0,0.06); } .charge-card-pick input { accent-color: #ff8c00; } .charge-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .charge-row label { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #bbb; } .charge-desc { flex: 2; } .charge-row input { padding: 10px 12px; border: 1px solid #2a2a2a; border-radius: 8px; background: #161616; color: #fff; font-size: 14px; } .charge-hint { color: #777; font-weight: 400; font-size: 11px; } .charge-go { margin-top: 4px; } @media (max-width: 560px) { .charge-row { flex-direction: column; } } /* ============================================================ UPGRADE/DOWNGRADE CONFIRMATION — 2026-06-16 ============================================================ */ .uc-card { max-width: 640px; } .uc-block { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; } .uc-gains { background: rgba(47,158,68,0.08); border: 1px solid rgba(47,158,68,0.25); } .uc-losses { background: rgba(255,170,0,0.07); border: 1px solid rgba(255,170,0,0.25); } .uc-block-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; } .uc-gains .uc-block-head { color: #2f9e44; } .uc-losses .uc-block-head { color: #d99100; } .uc-block ul { margin: 0; padding-left: 20px; } .uc-block li { font-size: 14px; color: #ddd; padding: 3px 0; } .uc-billing { margin: 18px 0; padding: 16px; background: #161616; border-radius: 12px; } .uc-billing-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; color: #ccc; } .uc-billing-row strong { color: #fff; font-size: 16px; } .uc-due { border-bottom: 1px solid #2a2a2a; padding-bottom: 10px; margin-bottom: 4px; } .uc-due strong { color: #ff8c00; font-size: 22px; } .uc-note { font-size: 12px; color: #888; line-height: 1.5; margin: 10px 0 0; } .uc-go { display: block; width: 100%; margin-top: 8px; font-size: 16px; padding: 14px; } .uc-cancel-link { display: block; text-align: center; margin-top: 12px; color: #888; font-size: 13px; text-decoration: none; } .uc-cancel-link:hover { color: #ccc; } /* Per-card upgrade dropdown — savings line (2026-06-16 v2) */ .session-card-wrap { display: contents; } .session-card-wrap .upgrade-dropdown { grid-column: 1 / -1; margin-top: -4px; } .upg-saveline { background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.28); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; color: #ddd; line-height: 1.5; } .upg-saveline .upg-price { color: #ff8c00; font-size: 18px; } .upg-save-amt { display: inline-block; margin-left: 6px; background: #2f9e44; color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .upg-aslow { margin-top: 6px; font-size: 12.5px; color: #aaa; } .upg-aslow strong { color: #2f9e44; } /* ============================================================ POST-SIGNUP "PICK YOUR PLAN" — 2026-06-16 ============================================================ */ .plan-wrap { max-width: 1000px; margin: 0 auto; padding: 8px 0 40px; } .plan-head { text-align: center; margin-bottom: 28px; } .plan-head h1 { font-size: 1.9rem; margin: 0 0 10px; color: #fff; } .plan-sub { color: #aaa; font-size: 14.5px; line-height: 1.6; max-width: 560px; margin: 0 auto; } .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .plan-card { position: relative; background: #161616; border: 1px solid #2a2a2a; border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; transition: transform .15s ease, border-color .15s ease; } .plan-card:hover { transform: translateY(-3px); border-color: #444; } .plan-popular { border-color: #ff8c00; box-shadow: 0 8px 30px rgba(255,140,0,0.15); } .plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #ff8c00; color: #1a0e00; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; } .plan-icon { font-size: 30px; } .plan-name { font-size: 17px; font-weight: 700; color: #fff; margin: 8px 0 4px; } .plan-price { color: #fff; margin-bottom: 6px; } .plan-price strong { font-size: 30px; } .plan-price span { color: #888; font-size: 14px; } .plan-tagline { font-size: 12.5px; color: #999; font-style: italic; min-height: 32px; margin-bottom: 12px; } .plan-perks { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; } .plan-perks li { font-size: 13.5px; color: #ddd; padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid #222; } .plan-perks li:before { content: "✓"; position: absolute; left: 0; color: #2f9e44; font-weight: 700; } .plan-perks li:last-child { border-bottom: none; } .plan-cta { display: block; text-align: center; text-decoration: none; } .plan-guest { text-align: center; margin-top: 26px; } .plan-guest-link { color: #ff8c00; font-weight: 600; text-decoration: none; font-size: 15px; } .plan-guest-link:hover { text-decoration: underline; } .plan-guest-note { color: #777; font-size: 12.5px; margin-top: 6px; } @media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } } /* Optional add-ons dropdown on Details page (2026-06-16) */ .addon-dropdown { margin: 6px 0 18px; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; } .addon-dropdown-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #161616; border: none; color: #eee; font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 14px 16px; cursor: pointer; text-align: left; } .addon-dropdown-toggle em { color: #888; font-style: normal; font-weight: 400; font-size: 12.5px; } .addon-dropdown-toggle:hover { background: #1c1c1c; } .addon-dropdown-chev { transition: transform .18s ease; color: #ff8c00; } .addon-dropdown.is-open .addon-dropdown-chev { transform: rotate(180deg); } .addon-dropdown-body { padding: 4px 16px 16px; border-top: 1px solid #2a2a2a; } .addon-dropdown-body .addon-intro { color: #999; font-size: 13px; margin: 12px 0 14px; }