/* ===================================================================== Checkout layer — mobile redesign + palette A/B toggle --------------------------------------------------------------------- Everything here is keyed off , which checkout_preview.js now sets unconditionally on every checkout page (the redesign is the default UI). The rules are still mobile-only media queries, so the wider desktop production layout is untouched. Two independent axes: 1. LAYOUT — a thumb-first single-column mobile flow + an always visible sticky checkout dock. Applies in BOTH palettes, mobile only, under html[data-checkout-preview]. 2. PALETTE — html[data-scheme="current"] (default, = live brand) vs html[data-scheme="aquatic"] (deep-navy + coral comparison). Colour-only; remaps the --houston-* tokens. Scoped to .houston-booking (field trips / birthday / private events / group admission) and .makeover-layout (event checkout). ===================================================================== */ /* Load sentinel: checkout_preview.js reads this custom property and refuses to mutate the DOM (relocate the calendar / order panel into the mock, restyle the nav) until it resolves to 1 — i.e. until THIS stylesheet has actually applied. Without the guard, a slow/dropped CSS request would leave the page torn into the unstyled mock. Keep this rule first. */ :root { --cp-css-ready: 1; } /* keep the page clear of the fixed dock so nothing hides behind it */ html[data-checkout-preview] body.houston-site-body { --cp-dock-h: 0px; } /* ===================================================================== 1. MOBILE LAYOUT (<= 600px, preview only) ===================================================================== */ @media (max-width: 600px) { /* ---- single scroll column ------------------------------------ */ html[data-checkout-preview] .houston-booking .booking-grid { display: flex; flex-direction: column; gap: 16px; } /* date picker promoted as the clear first decision */ html[data-checkout-preview] .houston-booking .summary { position: static; order: 3; } html[data-checkout-preview] .houston-booking .form-card { order: 2; border-radius: 16px; padding: 4px 16px 18px; } /* ---- step cards: roomy, readable, generous tap targets ------- */ html[data-checkout-preview] .houston-booking .step { padding: 20px 0; } html[data-checkout-preview] .houston-booking .step-head h3 { font-size: 20px; } html[data-checkout-preview] .houston-booking .step-head .sub { font-size: 13px; } html[data-checkout-preview] .houston-booking label { font-size: 10.5px; } /* inputs comfortably tappable, never iOS-zoom on focus (>=16px) */ html[data-checkout-preview] .houston-booking input[type="text"], html[data-checkout-preview] .houston-booking input[type="email"], html[data-checkout-preview] .houston-booking input[type="tel"], html[data-checkout-preview] .houston-booking input[type="number"], html[data-checkout-preview] .houston-booking input[type="date"], html[data-checkout-preview] .houston-booking select, html[data-checkout-preview] .houston-booking textarea { font-size: 16px; min-height: 48px; } html[data-checkout-preview] .houston-booking .stepper button, html[data-checkout-preview] .houston-booking .qbtn { min-width: 46px; min-height: 46px; } /* ---- bigger calendar cells (the first decision) -------------- */ html[data-checkout-preview] .houston-booking .houston-calendar-grid button { min-height: 44px; font-size: 15px; } html[data-checkout-preview] .houston-booking .houston-calendar-nav { min-width: 44px; min-height: 44px; } /* ---- order summary sits inline, full width ------------------- */ html[data-checkout-preview] .houston-booking .sum-card { border-radius: 16px; } /* ---- in-form submit zone stays (dock mirrors it) but the page needs clearance so the dock never covers the last field -- */ html[data-checkout-preview] .houston-booking, html[data-checkout-preview] .makeover-layout { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* ---- event checkout (.makeover-layout) single column --------- */ html[data-checkout-preview] .makeover-layout.event-checkout-layout { display: flex; flex-direction: column; gap: 16px; } html[data-checkout-preview] .makeover-layout .event-checkout-panel { position: static; order: 3; } html[data-checkout-preview] .makeover-layout input, html[data-checkout-preview] .makeover-layout select, html[data-checkout-preview] .makeover-layout textarea { font-size: 16px; min-height: 48px; } } /* ===================================================================== 2. STICKY CHECKOUT DOCK (the "water surface") built by JS; shown only on mobile preview ===================================================================== */ .cp-dock { display: none; } @media (max-width: 600px) { html[data-checkout-preview] .cp-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--houston-card) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--houston-line-strong); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.32); } } .cp-dock-info { flex: 1; min-width: 0; } .cp-dock-sum { color: var(--houston-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-dock-sum b { color: var(--houston-text); font-weight: 700; } .cp-dock-price { color: var(--houston-text); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } .cp-dock.is-locked .cp-dock-price { color: var(--houston-muted); } .cp-dock-btn { flex: none; border: 0; border-radius: 14px; cursor: pointer; background: var(--houston-coral); color: #fff; font: 600 15.5px/1 inherit; padding: 15px 20px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 22px var(--houston-coral-shadow, rgba(0, 0, 0, 0.3)); transition: background 0.18s ease, transform 0.08s ease; } .cp-dock-btn:hover { background: var(--houston-coral-hover); } .cp-dock-btn:active { transform: translateY(1px); } .cp-dock-btn svg { width: 17px; height: 17px; } .cp-dock.is-locked .cp-dock-btn { background: var(--houston-line-strong); color: var(--houston-muted); box-shadow: none; cursor: default; } /* ===================================================================== 3. FEE-NOTE tap-to-explain + collapsible optional name (progressive: only activated by JS where the hooks exist) ===================================================================== */ .cp-fee-info { appearance: none; width: 18px; height: 18px; margin-left: 6px; border: 1px solid var(--houston-muted); border-radius: 50%; background: transparent; color: var(--houston-muted); font: 700 11px/1 inherit; cursor: pointer; vertical-align: middle; } .cp-fee-info:hover { border-color: var(--houston-teal); color: var(--houston-teal); } .cp-fee-note { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .cp-fee-note.is-open { max-height: 120px; } .cp-fee-note p { margin: 8px 0 4px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--houston-teal) 14%, transparent); color: var(--houston-muted-2); font-size: 12.5px; line-height: 1.5; } /* ===================================================================== 4. SCHEME-TOGGLE FAB (bottom-right; visible whenever preview is on) ===================================================================== */ .cp-fab { position: fixed; right: 14px; bottom: 14px; z-index: 1300; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px 11px; border-radius: 14px; background: color-mix(in srgb, var(--houston-card) 94%, #000 6%); border: 1px solid var(--houston-line-strong); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); font-family: Inter, system-ui, sans-serif; } /* lift above the sticky dock on mobile */ @media (max-width: 600px) { html[data-checkout-preview] .cp-fab { bottom: calc(82px + env(safe-area-inset-bottom)); } } .cp-fab-label { color: var(--houston-muted); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cp-fab-opts { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--houston-bg); } .cp-fab-opts button { appearance: none; border: 0; cursor: pointer; padding: 7px 13px; border-radius: 8px; background: transparent; color: var(--houston-muted); font: 600 12.5px/1 inherit; transition: background 0.16s ease, color 0.16s ease; } .cp-fab-opts button.is-active { background: var(--houston-teal); color: #08221b; } .cp-fab-collapsed .cp-fab-label, .cp-fab-collapsed .cp-fab-opts { display: none; } .cp-fab-toggle { position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--houston-line-strong); background: var(--houston-card); color: var(--houston-muted); font: 700 12px/1 inherit; cursor: pointer; display: grid; place-items: center; } /* ===================================================================== 5. AQUATIC PALETTE (colour-only remap of the --houston-* tokens) Deep aquatic navy + coral CTA + cyan accents, from the design ref. High specificity + linked last so it beats venue theme overrides. ===================================================================== */ html[data-checkout-preview][data-scheme="aquatic"] body.houston-site-body { --houston-bg: #0b2535; --houston-bg-soft: #123b54; --houston-card: #15405a; --houston-card-soft: #123b54; --houston-line: rgba(135, 180, 200, 0.16); --houston-line-strong: rgba(135, 180, 200, 0.30); --houston-text: #eef6f8; --houston-muted: #9db5c1; --houston-muted-2: #c4d6de; --houston-teal: #5ec8e6; --houston-coral: #c0503f; --houston-coral-hover: #d8604c; --houston-coral-shadow: rgba(192, 80, 63, 0.36); --houston-amber: #e0a73a; --houston-member-green: #5ec8e6; --houston-ticket-accent: #5ec8e6; --houston-ticket-primary: #c0503f; --houston-ticket-primary-hover: #d8604c; } /* recolour the page backdrop gradient + base so it reads as deep water */ html[data-checkout-preview][data-scheme="aquatic"] body.houston-site-body { background: #06151f; } /* ===================================================================== 6. EVENT-CHECKOUT MOCK (exact rebuild of the approved mobile mockup) Structure rendered server-side as .cp-mock (hidden by default); revealed only under html[data-checkout-preview] on mobile. Colour comes entirely from --houston-* tokens, so the layout is identical in both the Current and Aquatic palettes. JS relocates the live calendar, order summary and optional-name node into the slots here. ===================================================================== */ .cp-mock { display: none; --cp-serif: 'Spectral', Georgia, 'Times New Roman', serif; --cp-sans: 'Inter', system-ui, -apple-system, sans-serif; --cp-surface: color-mix(in srgb, var(--houston-text) 4.5%, transparent); --cp-surface-2: color-mix(in srgb, var(--houston-text) 7%, transparent); --cp-accent-soft: color-mix(in srgb, var(--houston-teal) 14%, transparent); } @media (max-width: 600px) { /* swap: hide the production hero + two-column layout, show the mock — BUT only when the mock scaffold is actually present (cp-has-mock is server-rendered for events that ship preview content, i.e. morning rounds). Other events (snorkel, sleeping-with-sharks, pickleball…) have no mock, so they keep their reflowed layout instead of blanking. */ html[data-checkout-preview] .event-checkout-page.cp-has-mock .event-checkout-hero, html[data-checkout-preview] .event-checkout-page.cp-has-mock .event-checkout-layout { display: none !important; } html[data-checkout-preview] .cp-mock { display: block; font-family: var(--cp-sans); padding: 0 0 8px; } /* slim the top nav toward the mockup's compact bar */ html[data-checkout-preview] .event-checkout-page .houston-site-hours, html[data-checkout-preview] .event-checkout-page .houston-site-nav-ticket-cta { display: none; } /* ---- hero ---------------------------------------------------- */ .cp-mock .cp-hero { display: grid; justify-items: center; padding: 6px 22px 4px; position: relative; text-align: center; } .cp-mock .cp-eyebrow { font-family: var(--cp-sans); font-size: 11px; letter-spacing: 3px; font-weight: 600; color: var(--houston-teal); margin: 8px 0 14px; text-transform: uppercase; text-align: center; } .cp-mock .cp-h1 { font-family: var(--cp-serif); font-weight: 600; font-size: 36px; line-height: 1.02; letter-spacing: .3px; margin: 0 0 16px; color: var(--houston-text); max-width: 100%; overflow-wrap: anywhere; } .cp-mock .cp-h1 .cp-member { display: block; font-style: italic; font-weight: 400; color: var(--houston-teal); font-size: 30px; margin-top: 4px; } .cp-mock .cp-lead { color: var(--houston-muted); font-size: 15px; line-height: 1.55; margin: 0 0 18px; max-width: 33ch; } .cp-mock .cp-facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .cp-mock .cp-fact { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--houston-text); background: var(--cp-surface); border: 1px solid var(--houston-line); padding: 7px 12px; border-radius: 999px; } .cp-mock .cp-fact svg { width: 13px; height: 13px; color: var(--houston-teal); } /* ---- generic step section ----------------------------------- */ .cp-mock .cp-included, .cp-mock .cp-step, .cp-mock .cp-name-slot, .cp-mock .cp-order-slot { padding: 0 22px; margin-top: 26px; } .cp-mock .cp-step-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 14px; } .cp-mock .cp-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--houston-teal); color: var(--houston-teal); font-size: 13px; font-weight: 700; display: grid; place-items: center; transform: translateY(2px); transition: .25s; font-family: var(--cp-sans); } .cp-mock .cp-step-num.is-done { background: var(--houston-teal); color: var(--houston-bg); } .cp-mock .cp-step-title { font-family: var(--cp-serif); font-size: 21px; font-weight: 600; margin: 0; color: var(--houston-text); } .cp-mock .cp-step-sub { color: var(--houston-muted); font-size: 12.5px; margin: 2px 0 0; } /* ---- included card ------------------------------------------ */ .cp-mock .cp-included { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; padding: 18px 18px 16px; margin-left: 22px; margin-right: 22px; } .cp-mock .cp-inc-tag { display: inline-block; font-size: 10px; letter-spacing: 1.6px; font-weight: 700; color: var(--houston-teal); background: var(--cp-accent-soft); padding: 4px 9px; border-radius: 6px; margin-bottom: 13px; } .cp-mock .cp-inc-row { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; } .cp-mock .cp-inc-row:last-of-type { margin-bottom: 0; } .cp-mock .cp-ck { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cp-accent-soft); display: grid; place-items: center; margin-top: 1px; } .cp-mock .cp-ck svg { width: 11px; height: 11px; color: var(--houston-teal); } .cp-mock .cp-inc-t { font-size: 14.5px; line-height: 1.4; color: var(--houston-text); } .cp-mock .cp-inc-t small { display: block; color: var(--houston-muted); font-size: 12.5px; margin-top: 2px; } .cp-mock .cp-inc-price { display: flex; align-items: baseline; justify-content: space-between; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--houston-line); } .cp-mock .cp-inc-lbl { font-size: 13px; color: var(--houston-muted); } .cp-mock .cp-inc-amt { font-family: var(--cp-serif); font-size: 24px; font-weight: 600; color: var(--houston-text); } .cp-mock .cp-inc-amt span { font-family: var(--cp-sans); font-size: 12px; color: var(--houston-muted); font-weight: 500; } /* ---- relocated calendar (restyled to the mockup) ------------- */ .cp-mock .cp-cal-slot .houston-calendar { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; padding: 14px 12px 16px; margin: 0; max-width: none; } .cp-mock .cp-cal-slot .houston-calendar-header { padding: 2px 6px 12px; margin: 0; } .cp-mock .cp-cal-slot .houston-calendar-month { font-family: var(--cp-serif); font-size: 17px; font-weight: 600; color: var(--houston-text); } .cp-mock .cp-cal-slot .houston-calendar-nav { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--houston-line); background: transparent; color: var(--houston-text); } .cp-mock .cp-cal-slot .houston-calendar-weekdays span { font-size: 10.5px; letter-spacing: .6px; color: var(--houston-muted); font-weight: 600; } .cp-mock .cp-cal-slot .houston-calendar-grid { gap: 3px; } .cp-mock .cp-cal-slot .houston-calendar-day { aspect-ratio: 1/1; min-height: 42px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: var(--houston-text); background: transparent; border: 0; } .cp-mock .cp-cal-slot .houston-calendar-day:hover:not([disabled]) { background: var(--cp-surface-2); } .cp-mock .cp-cal-slot .houston-calendar-day[disabled], .cp-mock .cp-cal-slot .houston-calendar-day.is-disabled { color: var(--houston-muted); opacity: .35; } .cp-mock .cp-cal-slot .houston-calendar-day.is-selected, .cp-mock .cp-cal-slot .houston-calendar-day[aria-pressed="true"] { background: var(--houston-teal); color: var(--houston-bg); font-weight: 700; box-shadow: 0 6px 18px color-mix(in srgb, var(--houston-teal) 32%, transparent); } .cp-mock .cp-cal-confirm { margin-top: 13px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--houston-text); background: var(--cp-accent-soft); border: 1px solid color-mix(in srgb, var(--houston-teal) 30%, transparent); padding: 11px 13px; border-radius: 11px; } .cp-mock .cp-cal-confirm svg { width: 16px; height: 16px; color: var(--houston-teal); flex: none; } .cp-mock .cp-cal-confirm.is-empty { background: transparent; border-color: var(--houston-line); color: var(--houston-muted); } .cp-mock .cp-cal-confirm.is-empty svg { color: var(--houston-muted); } /* ---- guests stepper ----------------------------------------- */ .cp-mock .cp-guests { display: flex; align-items: center; justify-content: space-between; background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; padding: 14px 18px; } .cp-mock .cp-glab { font-size: 14.5px; color: var(--houston-text); } .cp-mock .cp-glab small { display: block; color: var(--houston-muted); font-size: 12px; margin-top: 2px; } .cp-mock .cp-ctrl { display: flex; align-items: center; gap: 4px; } .cp-mock .cp-qbtn { width: 48px; height: 48px; border-radius: 13px; border: 1px solid var(--houston-line); background: var(--cp-surface-2); color: var(--houston-text); font-size: 24px; cursor: pointer; display: grid; place-items: center; line-height: 1; font-family: var(--cp-sans); } .cp-mock .cp-qbtn:active { transform: scale(.9); } .cp-mock .cp-qbtn:disabled { opacity: .3; cursor: default; } .cp-mock .cp-qval { min-width: 42px; text-align: center; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--houston-text); } /* ---- optional name (moved here, mockup styling) ------------- */ .cp-mock .cp-name-slot .makeover-intro { margin: 0; } .cp-mock .cp-name-slot label { display: block; color: var(--houston-muted); font-size: 12px; margin-bottom: 7px; } .cp-mock .cp-name-slot input { width: 100%; background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 11px; color: var(--houston-text); font-size: 16px; padding: 14px 16px; font-family: var(--cp-sans); } .cp-mock .name-toggle { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 1px dashed var(--houston-line); color: var(--houston-muted); border-radius: 11px; padding: 14px 16px; font: 14px var(--cp-sans); cursor: pointer; } .cp-mock .name-toggle .plus { font-size: 18px; color: var(--houston-teal); } /* ---- relocated order summary (mockup card) ------------------ */ .cp-mock .cp-order-slot .event-checkout-panel { position: static; background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; padding: 18px; margin: 0; box-shadow: none; width: auto; } .cp-mock .cp-order-slot .makeover-summary-title { font-family: var(--cp-serif); font-size: 19px; font-weight: 600; margin: 0 0 15px; color: var(--houston-text); } .cp-mock .cp-order-slot .makeover-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; margin-bottom: 12px; color: var(--houston-muted); } .cp-mock .cp-order-slot .makeover-summary-row span:last-child { color: var(--houston-text); font-variant-numeric: tabular-nums; } .cp-mock .cp-order-slot .makeover-summary-row--total { padding-top: 15px; margin-top: 3px; border-top: 1px solid var(--houston-line); align-items: baseline; } .cp-mock .cp-order-slot .makeover-summary-row--total span:first-child { font-size: 15px; font-weight: 600; color: var(--houston-text); } .cp-mock .cp-order-slot .makeover-summary-row--total span:last-child { font-family: var(--cp-serif); font-size: 27px; font-weight: 600; color: var(--houston-teal); } .cp-mock .cp-order-slot .makeover-summary-note { color: var(--houston-muted); font-size: 11.5px; margin: 4px 0 0; } /* hide the in-panel date field (calendar moved out) + the in-body CTA */ .cp-mock .cp-order-slot .event-date-field, .cp-mock .cp-order-slot #event-checkout-btn { display: none !important; } .cp-mock .cp-fee-info { margin-left: 6px; } /* department picker rides along in the relocated dark order panel. */ .cp-mock .cp-order-slot .event-choice-field { border-top: 1px solid var(--houston-line); margin: 14px 0 4px; padding-top: 15px; } .cp-mock .cp-order-slot .event-choice-field label { color: var(--houston-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; } .cp-mock .cp-order-slot .event-choice-select { background: color-mix(in srgb, var(--houston-text) 5%, transparent); border: 1px solid var(--houston-line); color: var(--houston-text); color-scheme: dark; font-size: 15px; } .cp-mock .cp-order-slot .event-choice-select option { background: #24231f; color: var(--houston-text); } .cp-mock .cp-order-slot .event-choice-field.is-invalid label { color: #f5b54a; } .cp-mock .cp-order-slot .event-choice-field.is-invalid .event-choice-select { background: rgba(239, 159, 39, 0.12); border-color: #f5b54a; box-shadow: 0 0 0 3px rgba(239, 159, 39, 0.18); } .cp-mock .cp-order-slot .event-choice-field .makeover-section-hint { color: var(--houston-muted); font-size: 11.5px; } /* ---- trust line --------------------------------------------- */ .cp-mock .cp-trust { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--houston-muted); font-size: 12px; margin: 18px 22px 0; } .cp-mock .cp-trust svg { width: 13px; height: 13px; } /* ================================================================= 7. MOCKUP NAV — text logo + 3-line burger, mockup placement. Scoped to .cp-nav (added by JS after the brand markup is built) so there's no flash of the production nav being restyled prematurely. ================================================================= */ html[data-checkout-preview] .houston-site-nav.cp-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; margin: 0; padding: 8px 18px 12px; grid-template-columns: none; position: sticky; top: 0; z-index: 1210; border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--houston-bg) 96%, transparent), color-mix(in srgb, var(--houston-bg) 70%, transparent) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* back button + left cluster (logo sits beside it) */ html[data-checkout-preview] .houston-site-nav.cp-nav .cp-nav-left { display: flex; align-items: center; gap: 11px; min-width: 0; } html[data-checkout-preview] .cp-back-btn { flex: none; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--houston-line); background: transparent; color: var(--houston-text); display: grid; place-items: center; cursor: pointer; transition: background 0.16s ease, transform 0.08s ease; } html[data-checkout-preview] .cp-back-btn:hover { background: color-mix(in srgb, var(--houston-text) 7%, transparent); } html[data-checkout-preview] .cp-back-btn:active { transform: scale(0.92); } html[data-checkout-preview] .cp-back-btn svg { width: 18px; height: 18px; } /* dropdown panel — slides down from under the nav (mockup design) */ html[data-checkout-preview] .houston-site-nav.cp-nav .houston-site-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 62; height: auto; margin: 0; padding: 5px 0; gap: 0; background: linear-gradient(180deg, var(--houston-bg-soft), var(--houston-bg)); border-top: 1px solid var(--houston-line); border-bottom: 1px solid var(--houston-line); border-radius: 0 0 16px 16px; box-shadow: 0 26px 54px rgba(0, 0, 0, 0.45); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.24s ease; } html[data-checkout-preview] .houston-site-nav.cp-nav.is-menu-open .houston-site-menu { max-height: 420px; opacity: 1; } /* links: icon · label · chevron, uppercase, left-accent on active */ html[data-checkout-preview] .cp-menu-link { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 48px; margin: 0; padding: 13px 22px; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: 0; color: var(--houston-text); font: 600 13px/1.2 'Inter', system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; transition: background 0.16s ease; } html[data-checkout-preview] .cp-menu-link + .cp-menu-link { border-top: 1px solid var(--houston-line); } html[data-checkout-preview] .cp-menu-link::after { display: none; } html[data-checkout-preview] .cp-menu-link .cp-ico { flex: none; width: 18px; height: 18px; color: var(--houston-muted); } html[data-checkout-preview] .cp-menu-link .cp-ml-label { min-width: 0; } html[data-checkout-preview] .cp-menu-link .cp-chev { flex: none; width: 15px; height: 15px; margin-left: auto; color: var(--houston-muted); } html[data-checkout-preview] .cp-menu-link:hover { background: color-mix(in srgb, var(--houston-text) 4.5%, transparent); } html[data-checkout-preview] .cp-menu-link[aria-current="page"] { color: var(--houston-teal); background: color-mix(in srgb, var(--houston-teal) 14%, transparent); border-left-color: var(--houston-teal); } html[data-checkout-preview] .cp-menu-link[aria-current="page"] .cp-ico, html[data-checkout-preview] .cp-menu-link[aria-current="page"] .cp-chev { color: var(--houston-teal); } /* text logo */ html[data-checkout-preview] .houston-site-nav.cp-nav .houston-site-logo { color: var(--houston-text); margin: 0; width: auto; padding: 0; } html[data-checkout-preview] .cp-brand { display: flex; flex-direction: column; line-height: .98; } html[data-checkout-preview] .cp-brand .cp-b1 { font: 600 9px/1 'Inter', system-ui, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: var(--houston-muted); margin-bottom: 4px; } html[data-checkout-preview] .cp-brand .cp-b2 { font-family: 'Spectral', Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 600; letter-spacing: .5px; color: var(--houston-text); } html[data-checkout-preview] .cp-brand .cp-star { color: #e0473a; } /* 3-line hamburger (mockup): right-aligned, thin, foam-coloured */ html[data-checkout-preview] .houston-site-nav.cp-nav .houston-site-menu-toggle.cp-menu-btn { /* reset the production nav's absolute centering (built for its tall grid header) so the burger flows + centres in this compact flex bar */ position: static; top: auto; transform: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 48px; height: 48px; padding: 0 2px 0 0; margin: 0; background: none; border: 0; border-radius: 0; cursor: pointer; justify-self: end; } html[data-checkout-preview] .houston-site-nav.cp-nav .cp-menu-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--houston-text); transition: transform 0.26s ease, opacity 0.18s ease, width 0.26s ease; } html[data-checkout-preview] .houston-site-nav.cp-nav .cp-menu-btn span:nth-child(2) { width: 16px; } /* burger morphs into an X when open */ html[data-checkout-preview] .houston-site-nav.cp-nav.is-menu-open .cp-menu-btn span { align-self: center; } html[data-checkout-preview] .houston-site-nav.cp-nav.is-menu-open .cp-menu-btn span:nth-child(1) { width: 23px; transform: translateY(7px) rotate(45deg); } html[data-checkout-preview] .houston-site-nav.cp-nav.is-menu-open .cp-menu-btn span:nth-child(2) { opacity: 0; transform: translateX(10px); } html[data-checkout-preview] .houston-site-nav.cp-nav.is-menu-open .cp-menu-btn span:nth-child(3) { width: 23px; transform: translateY(-7px) rotate(-45deg); } /* scrim — dims + blurs the page behind the open menu */ html[data-checkout-preview] .cp-menu-scrim { position: fixed; inset: 0; z-index: 1205; background: rgba(4, 12, 20, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } html[data-checkout-preview] .cp-menu-scrim.is-open { opacity: 1; pointer-events: auto; } } /* ===================================================================== 8. GENERIC BOOKING PAGES — the mockup visual language applied to the shared .houston-booking step skeleton (field trips / birthday party / private events / group admission, all three venues). These pages already carry the same numbered-step flow as the approved mockup, so this is a restyle (not a DOM rebuild like the event page): teal numbered circles, Spectral step titles, mockup surface cards for inputs / steppers / calendar / order summary, and the same dock + nav the event page uses. Mobile + preview only, all colour via --houston-* tokens so it is identical in both palettes. Princess makeover is not a .houston-booking page, so it stays untouched. ===================================================================== */ @media (max-width: 600px) { html[data-checkout-preview] .houston-booking { --cp-serif: 'Spectral', Georgia, 'Times New Roman', serif; --cp-sans: 'Inter', system-ui, -apple-system, sans-serif; --cp-surface: color-mix(in srgb, var(--houston-text) 4.5%, transparent); --cp-surface-2: color-mix(in srgb, var(--houston-text) 7%, transparent); --cp-accent-soft: color-mix(in srgb, var(--houston-teal) 14%, transparent); font-family: var(--cp-sans); } /* ---- hero (band head) — matches .cp-hero ---------------------- */ html[data-checkout-preview] .houston-booking .band-head { margin: 2px 0 20px; text-align: center; } html[data-checkout-preview] .houston-booking .band-head .eyebrow { font: 600 11px/1 var(--cp-sans); letter-spacing: 3px; text-transform: uppercase; color: var(--houston-teal); margin-bottom: 12px; text-align: center; } html[data-checkout-preview] .houston-booking .band-h { font-family: var(--cp-serif); font-weight: 600; font-size: 33px; line-height: 1.04; letter-spacing: 0.3px; } /* ---- the form card becomes a bare continuous column ---------- */ html[data-checkout-preview] .houston-booking .form-card { background: none; border: 0; border-radius: 0; padding: 0; } html[data-checkout-preview] .houston-booking .step { border-bottom: 1px solid var(--houston-line); padding: 22px 0; } html[data-checkout-preview] .houston-booking .step:first-of-type { padding-top: 6px; } /* ---- numbered step circle — matches .cp-step-num ------------- */ html[data-checkout-preview] .houston-booking .step-head { align-items: center; gap: 12px; margin-bottom: 16px; } html[data-checkout-preview] .houston-booking .step-num { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1.5px solid var(--houston-teal); background: transparent; color: var(--houston-teal); font: 700 12px/1 var(--cp-sans); letter-spacing: 0; display: grid; place-items: center; } html[data-checkout-preview] .houston-booking .step-head h3 { font-family: var(--cp-serif); font-size: 21px; } html[data-checkout-preview] .houston-booking .step-head .sub { font-size: 12.5px; color: var(--houston-muted); } /* ---- fields / inputs as mockup surface cards ----------------- */ html[data-checkout-preview] .houston-booking .fields, html[data-checkout-preview] .houston-booking .counts { grid-template-columns: 1fr; gap: 14px; } html[data-checkout-preview] .houston-booking label { color: var(--houston-muted); font-size: 12px; letter-spacing: 0.2px; text-transform: none; } html[data-checkout-preview] .houston-booking input[type="text"], html[data-checkout-preview] .houston-booking input[type="email"], html[data-checkout-preview] .houston-booking input[type="tel"], html[data-checkout-preview] .houston-booking input[type="number"], html[data-checkout-preview] .houston-booking input[type="date"], html[data-checkout-preview] .houston-booking select, html[data-checkout-preview] .houston-booking textarea { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 11px; color: var(--houston-text); padding: 13px 15px; font-family: var(--cp-sans); } html[data-checkout-preview] .houston-booking input:focus, html[data-checkout-preview] .houston-booking select:focus, html[data-checkout-preview] .houston-booking textarea:focus { border-color: var(--houston-teal); outline: none; } /* ---- counts stepper — matches the .cp-guests stepper -------- */ html[data-checkout-preview] .houston-booking .stepper { display: flex; align-items: center; gap: 6px; background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 13px; padding: 6px; } html[data-checkout-preview] .houston-booking .stepper button { width: 46px; height: 46px; min-width: 46px; min-height: 46px; flex: none; border-radius: 10px; border: 1px solid var(--houston-line); background: var(--cp-surface-2); color: var(--houston-text); font-size: 22px; line-height: 1; display: grid; place-items: center; } html[data-checkout-preview] .houston-booking .stepper input { flex: 1; min-height: 46px; border: 0; background: transparent; text-align: center; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--houston-text); } html[data-checkout-preview] .houston-booking .hint { font-size: 11.5px; color: var(--houston-muted); margin-top: 6px; } html[data-checkout-preview] .houston-booking .free-tag { background: var(--cp-accent-soft); color: var(--houston-teal); } /* ---- date step: single column + mockup calendar ------------- */ html[data-checkout-preview] .houston-booking .cal-grid { grid-template-columns: 1fr; gap: 16px; } html[data-checkout-preview] .houston-booking .houston-calendar { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; padding: 14px 12px 16px; } html[data-checkout-preview] .houston-booking .houston-calendar-month { font-family: var(--cp-serif); font-size: 17px; font-weight: 600; color: var(--houston-text); } html[data-checkout-preview] .houston-booking .houston-calendar-nav { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--houston-line); background: transparent; color: var(--houston-text); } html[data-checkout-preview] .houston-booking .houston-calendar-weekdays span { font-size: 10.5px; letter-spacing: 0.6px; color: var(--houston-muted); font-weight: 600; } html[data-checkout-preview] .houston-booking .houston-calendar-grid { gap: 3px; } html[data-checkout-preview] .houston-booking .houston-calendar-day { aspect-ratio: 1 / 1; min-height: 42px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: var(--houston-text); background: transparent; border: 0; } html[data-checkout-preview] .houston-booking .houston-calendar-day:hover:not([disabled]):not(.is-disabled) { background: var(--cp-surface-2); } html[data-checkout-preview] .houston-booking .houston-calendar-day[disabled], html[data-checkout-preview] .houston-booking .houston-calendar-day.is-disabled { color: var(--houston-muted); opacity: 0.35; } /* mockup teal selection (overrides the booking page's coral default) */ html[data-checkout-preview] .houston-booking .houston-calendar-day.is-selected, html[data-checkout-preview] .houston-booking .houston-calendar-day[aria-pressed="true"] { background: var(--houston-teal); border-color: var(--houston-teal); color: var(--houston-bg); font-weight: 700; box-shadow: 0 6px 18px color-mix(in srgb, var(--houston-teal) 32%, transparent); } /* ---- guided / upsell box stays, mockup surface -------------- */ html[data-checkout-preview] .houston-booking .guided { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 14px; margin-top: 16px; } /* ---- submit zone: minitotal as a mockup surface ------------- */ html[data-checkout-preview] .houston-booking .minitotal { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 13px; } html[data-checkout-preview] .houston-booking .minitotal b { font-family: var(--cp-serif); font-weight: 600; } /* ---- order summary card — matches .cp-order-slot ------------ */ html[data-checkout-preview] .houston-booking .sum-card { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; } html[data-checkout-preview] .houston-booking .sum-top { padding: 18px 18px 14px; border-bottom: 1px solid var(--houston-line); } html[data-checkout-preview] .houston-booking .sum-top h3 { font-family: var(--cp-serif); font-size: 19px; } html[data-checkout-preview] .houston-booking .sum-body { padding: 6px 18px 2px; } html[data-checkout-preview] .houston-booking .sum-row { border-bottom-color: var(--houston-line); font-size: 14px; } html[data-checkout-preview] .houston-booking .sum-row.total .val { font-family: var(--cp-serif); font-size: 26px; font-weight: 600; color: var(--houston-teal); } html[data-checkout-preview] .houston-booking .sum-foot { background: var(--cp-surface-2); border-top: 1px solid var(--houston-line); padding: 16px 18px; } html[data-checkout-preview] .houston-booking .sum-foot .due b { font-family: var(--cp-serif); font-weight: 600; } /* ================================================================= 8b. REMAINING DRIFT (added pass) — all mobile + preview only. Flatten the production hero card onto the page gradient, drop the headline sub-boxes, collapse the lone surviving accents to cyan, hide the in-body coral CTA (the dock proxies it), give the private timing radios a cyan selected state, and convert the "good to know" prose below the flow to the system language. Scoped page-wide under html[data-checkout-preview] (NOT only .houston-booking) so it also reaches the heroes / marketing prose, which sit outside .houston-booking. ================================================================= */ /* the --cp-* surface/accent helpers are declared on .houston-booking and .cp-mock, but several rules below target the heroes / marketing prose that sit OUTSIDE .houston-booking — declare them page-wide too (mobile + preview only, so desktop is untouched). */ html[data-checkout-preview] body.houston-site-body { --cp-serif: 'Spectral', Georgia, 'Times New Roman', serif; --cp-sans: 'Inter', system-ui, -apple-system, sans-serif; --cp-surface: color-mix(in srgb, var(--houston-text) 4.5%, transparent); --cp-surface-2: color-mix(in srgb, var(--houston-text) 7%, transparent); --cp-accent-soft: color-mix(in srgb, var(--houston-teal) 14%, transparent); } /* ---- (1) flatten every hero onto the page gradient -------------- */ html[data-checkout-preview] .houston-party-hero, html[data-checkout-preview] .houston-field-hero, html[data-checkout-preview] .houston-private-hero, html[data-checkout-preview] .houston-birthday-checkout-hero, html[data-checkout-preview] .houston-group-admission-hero { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; min-height: 0; margin: 2px 0 6px; padding: 6px 0 4px; text-align: center; } /* eyebrow → .cp-eyebrow (cyan, uppercase, tracked) */ html[data-checkout-preview] .houston-events-eyebrow { color: var(--houston-teal) !important; font: 600 11px/1 var(--cp-sans, 'Inter', system-ui, sans-serif) !important; letter-spacing: 3px; text-transform: uppercase; margin: 8px 0 14px !important; text-align: center; } /* hero headline → Spectral, page text colour, sane mobile size */ html[data-checkout-preview] .houston-party-hero h1, html[data-checkout-preview] .houston-field-hero h1, html[data-checkout-preview] .houston-private-hero h1, html[data-checkout-preview] .houston-birthday-checkout-hero h1, html[data-checkout-preview] .houston-group-admission-hero h1 { color: var(--houston-text); font-family: var(--cp-serif, 'Spectral', Georgia, serif); font-size: 34px; line-height: 1.02; letter-spacing: 0.3px; margin: 0 auto 14px; max-width: 100%; overflow-wrap: anywhere; text-align: center; } html[data-checkout-preview] .houston-party-hero p:not(.houston-events-eyebrow), html[data-checkout-preview] .houston-field-hero p:not(.houston-events-eyebrow) { color: var(--houston-muted); font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0 auto 14px; max-width: 34ch; } /* drop the headline sub-boxes / watermark entirely */ html[data-checkout-preview] .houston-field-pillars, html[data-checkout-preview] .houston-party-hero-mark { display: none; } /* the GROUP RATE box becomes a single cyan fact pill (mirrors .cp-fact) */ html[data-checkout-preview] .houston-group-admission-price { display: inline-flex; align-items: baseline; gap: 6px; flex-direction: row; min-height: 0; margin: 0; padding: 7px 13px; text-align: left; background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 999px; } html[data-checkout-preview] .houston-group-admission-price span, html[data-checkout-preview] .houston-group-admission-price small { color: var(--houston-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; } html[data-checkout-preview] .houston-group-admission-price strong { color: var(--houston-teal); font-family: var(--cp-serif, 'Spectral', Georgia, serif); font-size: 17px; font-weight: 600; margin: 0; line-height: 1; } /* ---- (2) one accent only: cyan -------------------------------- */ /* warm/coral calendar selection default → already teal in §8; the featured price-card border + info-note tint are the survivors. */ html[data-checkout-preview] .houston-field-price-card.is-featured { border-color: var(--houston-line-strong); } html[data-checkout-preview] .houston-info-note { background: var(--cp-surface); border: 1px solid var(--houston-line); color: var(--houston-muted-2); border-radius: 13px; } html[data-checkout-preview] .houston-info-note a { color: var(--houston-teal); } /* any warn hint reverts to plain muted (no amber) */ html[data-checkout-preview] .houston-booking .hint.warn { color: var(--houston-muted); } /* native select chevron: recolour to cyan (was brand green) */ html[data-checkout-preview] .houston-booking select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235ec8e6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* ---- (3) coral lives ONLY in the dock -------------------------- */ /* in-body coral submit + secondary hero/banner CTAs: hidden, NOT removed (the dock proxies #…-submit via .click()). Keep .alt-link. */ html[data-checkout-preview] .houston-booking .submit-zone .btn-block, html[data-checkout-preview] .houston-field-hero .houston-site-btn, html[data-checkout-preview] .houston-field-banner .houston-site-btn { display: none !important; } /* ---- (5) private-events timing radios: clean surface card with a cyan-only selected state (mirrors a selected calendar day) ----- */ html[data-checkout-preview] .houston-private-timing { grid-template-columns: 1fr; gap: 12px; } html[data-checkout-preview] .houston-private-timing-card { background: var(--cp-surface); border: 1px solid var(--houston-line); border-left: 3px solid transparent; border-radius: 13px; padding: 14px 16px; } html[data-checkout-preview] .houston-private-timing-card:has(input:checked) { background: var(--cp-accent-soft); border-color: var(--houston-teal); border-left-color: var(--houston-teal); } html[data-checkout-preview] .houston-private-timing-card strong { color: var(--houston-text); font-family: var(--cp-serif, 'Spectral', Georgia, serif); font-size: 15px; font-weight: 600; } html[data-checkout-preview] .houston-private-timing-card small { color: var(--houston-muted); font-size: 12.5px; font-weight: 400; } /* ---- (5/6) add-on .guided cards: cyan-selected, cyan price tag -- */ html[data-checkout-preview] .houston-booking .guided:has(input:checked) { border-color: var(--houston-teal); background: var(--cp-accent-soft); } html[data-checkout-preview] .houston-booking .guided .incl { color: var(--houston-teal); } html[data-checkout-preview] .houston-booking .guided input { accent-color: var(--houston-teal); } /* ---- (6) restyle (don't delete) the "good to know" prose ------- */ html[data-checkout-preview] .houston-party-section, html[data-checkout-preview] .houston-party-host { background: var(--cp-surface); border: 1px solid var(--houston-line); box-shadow: none; border-radius: 16px; padding: 20px 18px; margin-bottom: 14px; } html[data-checkout-preview] .houston-party-section h2 { color: var(--houston-text); font-family: var(--cp-serif, 'Spectral', Georgia, serif); font-size: 22px; font-weight: 600; } html[data-checkout-preview] .houston-party-section p, html[data-checkout-preview] .houston-party-section li, html[data-checkout-preview] .houston-party-host span { color: var(--houston-muted-2); font-weight: 400; font-size: 14.5px; line-height: 1.6; } html[data-checkout-preview] .houston-party-section strong, html[data-checkout-preview] .houston-party-host strong { color: var(--houston-text); } html[data-checkout-preview] .houston-party-fineprint { color: var(--houston-muted) !important; font-weight: 400; } /* price cards / banner → flat system info cards (no warm panel) */ html[data-checkout-preview] .houston-field-price-card, html[data-checkout-preview] .houston-party-option, html[data-checkout-preview] .houston-party-addon { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 13px; } html[data-checkout-preview] .houston-party-price { color: var(--houston-text); font-family: var(--cp-serif, 'Spectral', Georgia, serif); font-weight: 600; } /* marketing host box loses its warm gradient/coral border */ html[data-checkout-preview] .houston-party-host { background: var(--cp-surface); border-color: var(--houston-line); } html[data-checkout-preview] .houston-party-host strong { font-family: var(--cp-serif, 'Spectral', Georgia, serif); font-weight: 600; } /* the "paid" pill on marketing option cards → cyan, not coral */ html[data-checkout-preview] .houston-party-option .is-paid { background: var(--cp-accent-soft); color: var(--houston-teal); } /* field-trip checklist tick stays cyan-soft (already cyan) */ html[data-checkout-preview] .houston-field-banner { background: var(--cp-surface); border: 1px solid var(--houston-line); border-radius: 16px; padding: 20px 18px; } html[data-checkout-preview] .houston-field-banner p { color: var(--houston-muted-2); font-weight: 400; font-size: 14.5px; } /* ---- (8) trust line under the order summary (mirrors .cp-trust). Placed on .summary (not .sum-card, which is overflow:hidden). ---- */ html[data-checkout-preview] .houston-booking .summary::after { content: '🔒 Secure checkout · Card details encrypted'; display: block; text-align: center; color: var(--houston-muted); font-size: 11.5px; margin-top: 14px; } }