/* Room detail page (room_checkout.html) — white mode.
Design source: faaji_ui_screens/faaji-white-mode-webapp/faaji-room-detail-white (1).html
Loads after public.css (base) and feed.css. The page extends public/base.html
with theme="white", so public.css white-mode tokens (--ink-60/--ink-45/
--hairline etc.) are available. Class names referenced by the page's inline
JS (.hidden, .cta, .cta-tall, .btn, .btn.ghost, .pay-label, .error,
.success, .checkbox, .ptab) must never be renamed — restyle only. */
/* ── Tokens feed.css + the page JS use but public.css doesn't define ───── */
:root {
--serif: "DM Serif Display", Georgia, serif;
--mono: "Karla", system-ui, -apple-system, sans-serif;
--danger: #b3261e; /* light-legible (dark pages use #FF6B81) */
--live: #ee3333;
}
/* ── Utilities the old inline style block provided ─────────────────────── */
.hidden { display: none; }
[data-tab-panel][hidden] { display: none; }
.rdetail { font-size: 15px; line-height: 1.65; }
.rdetail a { color: inherit; text-decoration: none; }
/* ── Host-only upsell keyword bar ──────────────────────────────────────── */
#host-keyword-bar {
padding: 8px 16px;
background: var(--cream);
border-bottom: 1px solid rgba(128, 0, 32, 0.35);
font-size: 13px;
color: var(--midnight);
text-align: center;
}
#host-keyword-bar.hidden { display: none; }
/* ── Cover ─────────────────────────────────────────────────────────────── */
.cover-wrap { max-width: 1120px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 48px) 0; }
.cover { width: 100%; height: clamp(240px, 34vw, 400px); overflow: hidden; background: var(--bone); }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* ── Body grid ─────────────────────────────────────────────────────────── */
.rd-body {
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 0 clamp(28px, 4vw, 56px);
padding: 30px clamp(20px, 4vw, 48px) 72px;
align-items: start;
}
@media (min-width: 881px) {
.rd-body { grid-template-columns: minmax(0, 1fr) 340px; }
.rd-head { grid-column: 1; grid-row: 1; }
.rc-side { grid-column: 2; grid-row: 1 / span 2; }
.rd-content { grid-column: 1; grid-row: 2; }
}
/* ── Head: eyebrow / title / host / metas / share ──────────────────────── */
.eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
color: var(--maroon); margin-bottom: 12px;
}
.rd-title {
font-family: var(--serif); font-weight: 400; /* DM Serif ships 400 only — stop faux-bold */
font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.015em;
margin: 0 0 14px;
}
.rd-host { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.rd-host-name { font-size: 13px; color: var(--ink-60); }
.rd-host-name b { color: var(--midnight); font-weight: 700; }
/* Avatar circles (host line, host card, reviews) — light fallback initials */
.host-av {
width: 28px; height: 28px; border-radius: 50%; background: var(--bone);
border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 13px; color: var(--midnight); overflow: hidden; flex-shrink: 0;
}
.host-av img { width: 100%; height: 100%; object-fit: cover; }
.meta-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px;
padding: 20px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
margin-bottom: 20px;
}
.meta-k {
font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-45); margin-bottom: 4px;
}
.meta-v { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--midnight); }
.meta-v .cd { color: var(--maroon); }
.meta-v.scarce { color: var(--maroon); }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.share-chip {
background: #fff; border: 1px solid var(--hairline); font-family: var(--mono);
font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--midnight); padding: 7px 14px; cursor: pointer; text-decoration: none;
transition: background 0.15s;
}
.share-chip:hover { background: var(--bone); }
/* ── Tabs (About / Feed / Reviews) — JS toggles .ptab.active ───────────── */
.page-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--hairline); margin: 6px 0 22px; }
.ptab {
background: none; border: none; border-bottom: 2px solid transparent; padding: 0 0 10px;
font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-45); cursor: pointer;
}
.ptab.active { color: var(--midnight); border-bottom-color: var(--maroon); }
/* ── About panel ───────────────────────────────────────────────────────── */
.lbl {
font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-60); margin: 30px 0 12px;
}
.lbl:first-child { margin-top: 0; }
.desc { color: var(--ink-60); max-width: 60ch; white-space: pre-line; }
.gets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.gets li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-60); font-size: 15px; }
.gets li::before { content: "◆"; color: var(--maroon); font-size: 11px; flex-shrink: 0; }
.hostcard {
border: 1px solid var(--hairline); padding: 18px; display: flex; gap: 14px;
align-items: flex-start; background: #fff; color: inherit; text-decoration: none;
}
.hostcard .av { width: 48px; height: 48px; font-size: 18px; }
.hc-name { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--midnight); }
.hc-stats { font-size: 12px; color: var(--ink-45); margin-top: 2px; letter-spacing: 0.03em; }
.hc-bio { font-size: 13px; color: var(--ink-60); line-height: 1.6; margin-top: 6px; }
/* ── Reviews panel ─────────────────────────────────────────────────────── */
.reviews { display: grid; gap: 12px; }
.review { background: #fff; border: 1px solid var(--hairline); padding: 16px 18px; }
.review-top { display: flex; align-items: center; gap: 12px; }
.rv-av { width: 34px; height: 34px; font-size: 13px; }
.rv-name { font-size: 13px; color: var(--midnight); }
.rv-stars { font-size: 13px; color: var(--maroon); letter-spacing: 2px; }
.rv-stars-off { color: rgba(10, 10, 10, 0.15); }
.rv-date { margin-left: auto; font-size: 11px; color: var(--ink-45); }
.rv-body { font-size: 13px; line-height: 1.7; color: var(--ink-60); margin-top: 10px; }
/* ── Checkout card (.cta — name is load-bearing, the un-stick JS queries it) */
.rc-side { margin-top: 4px; }
.cta {
background: #fff; border: 1px solid var(--hairline); padding: 24px;
box-shadow: 0 18px 44px rgba(10, 10, 10, 0.08);
}
#price-line { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--midnight); margin-bottom: 4px; }
#price-line .cd { color: var(--maroon); font-size: 20px; }
#price-line .usd { font-family: var(--mono); font-size: 13px; color: var(--ink-45); }
.price-note { font-size: 11px; color: var(--ink-45); line-height: 1.5; margin: 2px 0 10px; }
.promo-row { display: flex; gap: 8px; align-items: stretch; margin-top: 14px; }
#promo-input {
flex: 1; min-width: 0; background: #fff; border: 1px solid var(--hairline);
padding: 11px 13px; font-family: var(--mono); font-size: 13px; color: var(--midnight);
outline: none; text-transform: uppercase;
}
#promo-input::placeholder { color: var(--ink-45); text-transform: none; }
#promo-input:focus { border-color: var(--maroon); }
#promo-apply { width: auto; margin-top: 0; padding: 0 16px; font-size: 10px; }
#promo-msg { font-size: 12px; margin: 6px 0 8px; }
.field { margin-bottom: 14px; }
.field label {
display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-60); margin-bottom: 6px;
}
.field input {
width: 100%; padding: 11px 12px; background: #fff; border: 1px solid var(--hairline);
font-family: var(--mono); font-size: 13px; color: var(--midnight); outline: none;
}
.field input::placeholder { color: var(--ink-45); }
.field input:focus { border-color: var(--maroon); }
.field .field-note { font-size: 11px; color: var(--ink-45); margin-top: 5px; }
.checkbox { display: flex; align-items: center; gap: 9px; font-size: 13px; margin: 14px 0; color: var(--ink-60); }
.checkbox input { accent-color: var(--maroon); }
.rdetail .btn {
display: block; width: 100%; padding: 14px; background: var(--maroon); color: #fff; border: none;
font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; cursor: pointer; text-align: center; margin-top: 14px;
transition: background 0.2s;
}
.rdetail .btn:hover { background: #67001a; }
.rdetail .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rdetail .btn.ghost {
background: transparent; border: 1px solid var(--midnight); color: var(--midnight);
transition: background 0.15s, color 0.15s;
}
.rdetail .btn.ghost:hover { background: var(--midnight); color: #fff; }
.pay-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-60); margin: 20px 0 8px; line-height: 1.7;
}
#payment-element { min-height: 40px; }
.error { color: var(--danger); font-size: 13px; margin-top: 10px; }
.success { text-align: center; padding: 8px 0; }
.success h2 { font-family: var(--serif); font-weight: 400; color: var(--midnight); margin: 8px 0 6px; }
.success p { color: var(--ink-60); font-size: 14px; margin: 0 0 16px; }
.co-seats { font-size: 11px; color: var(--ink-45); text-align: center; margin-top: 12px; letter-spacing: 0.04em; }
.co-seats strong { color: var(--maroon); }
#google-or { text-align: center; color: var(--ink-45); font-size: 12px; margin: 10px 0; }
#inapp-note { font-size: 12px; color: var(--ink-60); line-height: 1.6; margin-top: 10px; }
#inapp-note b { color: var(--midnight); }
#google-login-btn { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
#google-login-btn:hover { background: var(--bone); }
/* Sticky checkout on desktop — clears the ~85px white .pnav */
@media (min-width: 881px) {
.cta { position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow-y: auto; }
/* Stripe Link can grow the payment element past the viewport; wheel events
over Stripe's iframe can't scroll the sticky box, so it reads as cut off.
JS adds .cta-tall to un-stick and let the page scroll. */
.cta.cta-tall { position: static; max-height: none; overflow: visible; }
}
/* ── Welcome note ("A note from {host}") — cream card, already light ───── */
.welcome-note { background: var(--cream); border: 1px solid rgba(128, 0, 32, 0.35); padding: 18px; margin-top: 14px; }
.welcome-note.hidden { display: none; }
.wn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wn-avatar {
width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid rgba(128, 0, 32, 0.4);
color: var(--midnight); display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 15px; flex-shrink: 0; overflow: hidden;
}
.wn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wn-title { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--midnight); }
.wn-sub { font-size: 11px; color: var(--ink-60); }
.wn-quote { font-size: 13px; line-height: 1.6; color: var(--midnight); margin-bottom: 12px; }
.wn-links { display: flex; flex-direction: column; gap: 7px; }
.wn-link {
display: flex; justify-content: space-between; gap: 10px; align-items: center;
background: #fff; border: 1px solid #d9d0bc; padding: 10px 12px; font-size: 12px;
font-weight: 700; color: var(--midnight); text-decoration: none;
}
.wn-link:hover { border-color: var(--maroon); }
.wn-arrow { color: var(--maroon); flex-shrink: 0; }
/* ── Feed, white — scoped so challenge_page.html's dark feed is untouched ─
feed.css is the shared source of truth for class names; only colors/
surfaces are overridden here. */
body[data-theme="white"] .feed-tabs { border-bottom-color: var(--hairline); margin-top: 4px; }
body[data-theme="white"] .ftab { color: var(--ink-45); opacity: 1; font-weight: 700; }
body[data-theme="white"] .ftab.active { color: var(--midnight); border-bottom-color: var(--maroon); }
body[data-theme="white"] .composer { background: #fff; border-color: var(--hairline); }
body[data-theme="white"] .composer input { color: var(--midnight); }
body[data-theme="white"] .composer input::placeholder { color: var(--ink-45); }
body[data-theme="white"] .composer .send { color: #fff; }
body[data-theme="white"] .post { background: #fff; border-color: var(--hairline); }
body[data-theme="white"] .post.pinned { border-color: rgba(128, 0, 32, 0.4); }
body[data-theme="white"] .pin-strip {
background: rgba(128, 0, 32, 0.06); border-bottom-color: rgba(128, 0, 32, 0.18); color: var(--maroon);
}
body[data-theme="white"] .post-av,
body[data-theme="white"] .cmt-av { background: var(--bone); border-color: var(--hairline); color: var(--midnight); }
body[data-theme="white"] .post-av.host,
body[data-theme="white"] .cmt-av.host { background: var(--cream); border-color: rgba(128, 0, 32, 0.3); }
body[data-theme="white"] .post-who,
body[data-theme="white"] .cmt-who { color: var(--midnight); }
body[data-theme="white"] .cmt-who .t { color: var(--ink-45); }
body[data-theme="white"] .host-chip { color: var(--maroon); background: rgba(128, 0, 32, 0.08); }
body[data-theme="white"] .post-when { color: var(--ink-45); }
body[data-theme="white"] .post-dots { color: var(--midnight); }
body[data-theme="white"] .post-title { color: var(--midnight); font-weight: 400; }
body[data-theme="white"] .post-text { color: var(--midnight); }
body[data-theme="white"] .post-acts { border-top-color: var(--hairline); }
body[data-theme="white"] .fact,
body[data-theme="white"] .cmt-act,
body[data-theme="white"] .view-more { color: var(--ink-60); opacity: 1; }
body[data-theme="white"] .fact.liked,
body[data-theme="white"] .cmt-act.liked { color: var(--maroon); }
body[data-theme="white"] .cmt-text { color: var(--ink-60); }
body[data-theme="white"] .replies { border-left-color: var(--hairline); }
body[data-theme="white"] .mod-menu { background: #fff; border-color: var(--hairline); box-shadow: 0 18px 44px rgba(10, 10, 10, 0.14); }
body[data-theme="white"] .mod-item { color: var(--midnight); border-bottom-color: var(--hairline); }
body[data-theme="white"] .mod-item.danger { color: var(--danger); }
body[data-theme="white"] .locked { background: #fff; border-color: var(--hairline); }
body[data-theme="white"] .locked-t { color: var(--midnight); font-weight: 400; }
body[data-theme="white"] .locked-s { color: var(--ink-60); }
body[data-theme="white"] .locked-btn { color: #fff; }
body[data-theme="white"] .feed-note { color: var(--ink-60); }
body[data-theme="white"] .reply-box input,
body[data-theme="white"] .edit-box textarea { background: #fff; border-color: var(--hairline); color: var(--midnight); }
body[data-theme="white"] .reply-box button { color: #fff; }
body[data-theme="white"] .attach-btn { border-color: var(--hairline); background: #fff; }
body[data-theme="white"] .attach-chip { background: #fff; border-color: var(--hairline); }
body[data-theme="white"] .attach-chip-name { color: var(--midnight); }
body[data-theme="white"] .attach-chip-size { color: var(--ink-45); }
body[data-theme="white"] .attach-chip-x { color: var(--midnight); }
body[data-theme="white"] .post-attach-img img,
body[data-theme="white"] .post-attach-video { border-color: var(--hairline); }
body[data-theme="white"] .post-attach-file { border-color: var(--hairline); background: #fff; }
body[data-theme="white"] .post-attach-file-icon,
body[data-theme="white"] .post-attach-file-name { color: var(--midnight); }
body[data-theme="white"] .post-attach-file-size { color: var(--ink-45); }
body[data-theme="white"] .stream-poster { background: #fff; border-color: var(--hairline); }
body[data-theme="white"] .stream-poster:hover { border-color: var(--midnight); }
body[data-theme="white"] .stream-poster-label { color: var(--midnight); }
body[data-theme="white"] .stream-frame { border-color: var(--hairline); }
body[data-theme="white"] .stream-processing { background: #fff; border-color: rgba(10, 10, 10, 0.25); color: var(--ink-60); }
body[data-theme="white"] .stream-spinner { border-color: rgba(10, 10, 10, 0.15); border-top-color: var(--maroon); }
body[data-theme="white"] .stream-tombstone { background: #fff; border-color: var(--hairline); color: var(--ink-45); }
/* ═══ Challenge page (challenge_page.html) — same white language ═══════
The challenge page links this stylesheet and reuses the shared anatomy
(.cta, .field, .btn, .meta-grid, .lbl, .desc, .gets, .hostcard). Below:
its page-specific pieces (sales schedule, member hub, day rail). */
.price-sub { font-size: 13px; color: var(--ink-45); margin: 2px 0 14px; }
#price-line .usd { font-family: var(--mono); font-size: 13px; color: var(--ink-45); }
.co-bal {
display: flex; justify-content: space-between; font-size: 13px; background: var(--bone);
border: 1px solid var(--hairline); color: var(--midnight); padding: 11px 13px; margin-bottom: 6px;
}
.fine { font-size: 12px; color: var(--ink-60); line-height: 1.6; margin-top: 14px; }
.fine a { color: var(--maroon); }
.under-btn { font-size: 12px; color: var(--ink-45); text-align: center; margin-top: 10px; }
.under-btn strong { color: var(--midnight); font-weight: 400; }
.sched { border: 1px solid var(--hairline); background: #fff; }
.sched-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.sched-row:last-child { border-bottom: none; }
.sched-n { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--maroon); width: 34px; flex-shrink: 0; line-height: 1; }
.sched-t { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--midnight); }
.sched-when { margin-left: auto; font-size: 12px; color: var(--ink-45); white-space: nowrap; }
/* Member hub (revealed by challenge-hub.js when the viewer has access) */
.hub-badge {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--maroon); background: rgba(128, 0, 32, 0.08);
border: 1px solid rgba(128, 0, 32, 0.35); padding: 5px 11px; margin: 22px 0 6px;
}
.hub-sub { font-size: 13px; color: var(--ink-60); margin-bottom: 18px; }
.hub-body { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
@media (max-width: 720px) { .hub-body { grid-template-columns: 1fr; } }
.day-card { border: 1px solid var(--hairline); background: #fff; padding: 13px 14px; margin-bottom: 10px; }
.day-card.done .dc-n, .day-card.done .dc-title { color: var(--ink-60); }
.day-card.live { border-color: rgba(128, 0, 32, 0.5); background: rgba(128, 0, 32, 0.04); }
.dc-top { display: flex; align-items: center; gap: 9px; }
.dc-n { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--midnight); width: 24px; }
.dc-state { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }
.dc-state.live { color: var(--live); display: flex; align-items: center; gap: 5px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.dc-title { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--midnight); margin-top: 6px; }
.dc-when { font-size: 12px; color: var(--ink-45); margin-top: 3px; }
.dc-join {
display: block; width: 100%; margin-top: 10px; padding: 11px; background: var(--maroon); color: #fff;
border: none; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; text-align: center; cursor: pointer; transition: background 0.2s;
}
.dc-join:hover { background: #67001a; }
.dc-recap { font-size: 12px; color: var(--maroon); margin-top: 8px; cursor: pointer; }
/* Challenge grid: the hub spans both columns; the sales view dissolves into
the grid so aside/content place like the room page. */
@media (min-width: 881px) {
#hub-view { grid-column: 1 / -1; grid-row: 2; }
#sales-view { display: contents; }
#sales-view.hidden { display: none; }
}