->" supply link. The two are emitted directly adjacent with no
whitespace between them, so the "+" would otherwise sit squashed against the button.
The adjacent-sibling selector only matches when the button precedes the link (desktop
Show-more path), so mobile -- which renders an invisible scroll sentinel instead of the
button -- is unaffected. */
.aura-inv-more + .aura-supply { margin-left: 22px; }
.aura-landing {
margin-top: calc(-1 * var(--hero-lift));
box-sizing: border-box;
/* Width tracks the left half so the column never rides onto the clear image;
padding shifts the whole column inward from BOTH the left edge and the seam. */
max-width: min(600px, 50vw);
padding-left: clamp(16px, 3.2vw, 48px);
padding-right: clamp(24px, 4vw, 72px);
}
/* --- Strapline width-match (desktop): spread "Your booking concierge" to ~the same
ink width as the coral BOOKSESH.COM wordmark above it (mirrors the mobile
.aura-mhead-strap letter-spacing approach; DIFFERENT class, so mobile is untouched).
Measured wordmark ink = 194.2px; a small +1px font bump (13.5->14.5px) plus 0.09em
tracking lands the strap ink at ~194px (within ~0.3px). Stays BLUE (--blue @ .83
opacity), weight 500, clearly SECONDARY; not stretched unnaturally. */
.aura-brand-strap { font-size: 14.5px; letter-spacing: 0.09em; }
/* --- Desktop inventory heading removed (owner 2026-09-13): the desktop variant renders
as ("Live now") with NO --calm modifier; the mobile
variant is ("Explore "). Hiding
:not(.aura-inv-head--calm) inside this desktop-only block removes the desktop
"Live sessions now" label (cards sit directly under the search/Browse area) while the
mobile "Explore sessions" label stays untouched. */
.aura-inv-head:not(.aura-inv-head--calm) { display: none; }
/* --- Bigger logo-lockup -> H1 breathing gap (owner 2026-09-13): add top spacing to the
H1 (first element of the sub-frame) so EVERYTHING from the H1 downward — H1, CPT
capsules, Help-me-choose, search, Browse, cards, bottom action row — drops as ONE
coordinated unit with intra-group spacing intact. Adjacent-sibling vertical margins
collapse, so logo->H1 gap becomes ~max(hero-gap, this) — roughly doubled (~19->~38px
@ 900h). Coordinated with the pass-15 `safe flex-end` frame anchor: the bottom action
row still sits near the pane bottom and `safe` prevents any top clip. */
.aura-h1 { margin-top: clamp(30px, 4.2vh, 50px); font-size: clamp(46px, 5.4vw, 74px); }
/* ============================================================================
DESKTOP SCALE-UP (2026-09-13) -- owner: on large screens the composition read
tiny/"drowning" in the left pane. Enlarge every UI element as ONE coordinated
scale so the content fills the real estate. ALL rules live inside this
@media (min-width:821px) block => MOBILE (max-width:820px) is completely
unchanged. Relative rhythm preserved (scale, not distort). Covers BOTH the
landing hero AND the results (post-search) two-column view; identical across
Sessions / Events / Venues. ============================================== */
/* Logo lock-up: modest pin bump (76 -> 86px). The H1-"B" left-alignment offset
(.aura-brand margin-left: -0.227*--logo-size) tracks the token automatically,
so the pin stays lined up with the H1's "B". Wordmark/strapline unchanged. */
#aura-home { --logo-size: 86px; }
/* --- Landing hero controls --- */
/* CPT capsules (owner emphasis: noticeably bigger). */
.aura-type-switch { gap: 10px; }
.aura-type-chip { font-size: 16px; padding: 11px 24px; }
/* "Help me choose ->" primary CTA. */
.aura-start { font-size: 21px; padding: 19px 38px; border-radius: 18px; }
/* "OR . DESCRIBE IT" divider + direct-search input + its arrow. */
.aura-path-or { font-size: 14.5px; }
.aura-input-wrap { max-width: 560px; padding: 7px 7px 7px 22px; }
.aura-input-wrap .aura-input { font-size: 18.5px; padding: 15px 8px 15px 0; }
.aura-send { width: 56px; height: 56px; border-radius: 16px; }
.aura-send svg { width: 22px; height: 22px; }
/* Widen the left column so the scaled-up content fills the pane while the 3
inventory cards stay comfortably in one row (kept off the image seam by the
right padding of .aura-landing). */
.aura-landing { max-width: min(660px, 52vw); }
.aura-type-inv { max-width: 660px; }
/* Inventory cards a touch larger (grid min column width unchanged so 3 stay in
one row; the wider column makes each card bigger). Text + Show-more scaled. */
.aura-inv-t { font-size: 15.5px; }
.aura-inv-m { font-size: 13px; }
.aura-inv-b { padding: 12px 14px 14px; }
.aura-inv-more { font-size: 15px; padding: 13px 26px; }
.aura-supply { font-size: 14px; }
/* --- Results (post-search) two-column view -- brought up + scaled up --- */
/* Editable filter/summary chips (Service/Format/Where/When/Time/Budget). */
.aura-summary { gap: 10px; margin-bottom: 20px; }
.aura-summary .tag { font-size: 14.5px; padding: 9px 16px; }
/* "N strong matches" heading + helper copy line. */
.aura-results { gap: 20px; }
.aura-results-head { font-size: 17px; }
.aura-avail-note { font-size: 14px; }
/* Result cards: bigger overall (image, padding, radius) -- the two-column 40/60
structure is preserved (only the card internals scale). */
.aura-card { grid-template-columns: 140px 1fr; gap: 20px; padding: 18px; border-radius: 24px; }
.aura-card-img { min-height: 140px; }
.aura-card-img.aura-ph span { font-size: 48px; }
.aura-card-title { font-size: 20px; }
.aura-card-biz { font-size: 15.5px; }
.aura-card-meta { font-size: 15px; gap: 5px 14px; margin-bottom: 14px; }
/* "See times" button. */
.aura-card-cta { font-size: 16px; padding: 12px 22px; }
/* "Refine, or ask for a change..." input. */
.aura-refine { max-width: 480px; padding: 6px 6px 6px 20px; }
.aura-refine .aura-input { font-size: 17px; padding: 13px 0; }
}
/* ---------- Mobile ---------- */
@media (max-width: 820px) {
/* ----- Mobile brand moves into a compact preview-owned header strip (top) -----
Heart-B pin on the LEFT + BOOKSESH.COM with a smaller BLACK strapline beside it.
Vertically centred; compact fixed height so the header is not inflated. */
.aura-mhead {
display: flex; align-items: center; gap: 10px;
height: var(--m-header-h); padding: 0 clamp(14px, 4.5vw, 20px);
background: #fff; position: relative; z-index: 5; box-sizing: border-box;
}
/* Heart-B pin enlarged ~18% (38 -> 45px); only the heart-B breathes (pin static). */
.aura-mhead .aura-logo { width: 45px; height: 45px; }
.aura-mhead-text { display: flex; flex-direction: column; line-height: 1.14; }
.aura-mhead-name { font-weight: 800; font-size: 15px; letter-spacing: .01em; color: var(--coral); }
/* Secondary strapline: BLACK, lighter, clearly subordinate. A subtle letter-spacing
increase spreads it to ~the same visual width as "BOOKSESH.COM" (no unnatural stretch).
Tuned width parity — see pass-9 measurement note. */
.aura-mhead-strap { font-size: 10.5px; font-weight: 500; color: #111; letter-spacing: .055em; margin-top: 1px; } /* smaller BLACK secondary text */
/* The in-hero lock-up is hidden on mobile — the hero now starts at the H1. */
.aura-brand { display: none; }
/* Hero image becomes a band directly BELOW the header strip (curve + fade kept). */
.aura-hero-media { width: 100%; top: var(--m-header-h); height: 24vh; opacity: .78; }
.aura-hero-slide { object-position: center 22%; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.aura-hero-fade { background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.45) 84%, #fff 100%); }
/* The content stack sits below the header strip + image band; min-height auto so
there is comfortable whitespace below Browse rather than a forced full screen.
Pass-9: dropped slightly LOWER (larger image->H1 gap, uses lower whitespace for
rhythm) and given a touch more horizontal room (comfortable ~16-18px side margins,
also gives the enlarged H1 one-line headroom). NOT vertically centred. */
.aura-stage {
justify-content: flex-start;
/* image->title gap lifted UP to sit right beneath the hero image band (owner
orange-arrow target, 2026-09-13): tightened from +22px -> +6px so the title
rises close under the image. This top offset is the ONLY thing that governs the
mobile image->title gap; the whole stack below (chips/CTA/OR/input/Browse/teaser)
rides up together as one unit with its INTERNAL rhythm fully unchanged. */
padding-top: calc(24vh + 6px);
padding-bottom: 30px;
padding-left: clamp(16px, 4vw, 24px);
padding-right: clamp(16px, 4vw, 24px);
min-height: auto;
}
/* ----- ONE centred hero stack with a deliberate (non-uniform) rhythm -----
H1 -> balanced -> CTA -> breathing -> OR -> compact -> input -> section break -> Browse.
CTA, OR divider and input share the same centre axis (all centred on the viewport). */
/* H1 nudged up slightly (still one line at 360/390/440 — verified pass-9). */
/* SECTION LIFT (mobile): the ONLY change is the title->section top offset — the whole
interaction section (capsules + Help me choose + OR + input + Browse + inventory teaser)
rides up together as one unit to sit closer beneath the title. The title itself, its
size/position, and the section's INTERNAL spacing are all unchanged; just this bottom
gap shrinks (~9px lift across 360-440). Reconciled with the peek offset below. */
/* TITLE->CHIPS gap matched to the CHIPS->CTA gap (owner 2026-09-13): margin-bottom now
uses the SAME token as .aura-type-switch's bottom margin (var(--m-gap)) so title->chips
== chips->"Help me choose". This adds ~9px vs the old clamp(6px,1.8vw,12px); that extra
is absorbed one-for-one by shrinking the SEARCH->Browse gap below (.aura-path--direct
margin-bottom = --m-gap-break - 9px) so "Browse all sessions" stays at ~its position.
H1 size/position/behaviour unchanged; only this bottom gap grows. */
.aura-h1 { text-align: center; font-size: clamp(22px, 6.15vw, 40px); margin: 0 0 var(--m-gap); }
.aura-path--guided { align-items: center; margin: 0 0 var(--m-gap-lg); }
.aura-start { align-self: center; font-size: 15px; padding: 11px 24px; } /* tightened height */
/* OR divider + direct search share ONE centred width (=> same centre axis as H1/CTA/
Browse). Widened modestly to 380 (comfortable side margins come from the stage's
symmetric horizontal padding); capped by content width on the narrowest phones. */
.aura-path-or { max-width: 380px; margin: 0 auto var(--m-gap-sm); justify-content: center; }
/* SEARCH->Browse gap reduced by ~9px (owner 2026-09-13) to absorb the ~9px added to the
TITLE->CHIPS gap above, so "Browse all sessions" holds ~its previous vertical position
(measured within <1px across 360/390/440 + tall). Plenty of slack here (--m-gap-break
34-62px), so the section may drop a touch overall — acceptable. Browse row untouched. */
.aura-path--direct { max-width: 380px; margin: 0 auto calc(var(--m-gap-break) - 9px); }
/* Input fills the centred direct container (matches the OR divider width); no auto
margins here — those would shrink a flex item to content instead of stretching. */
.aura-input-wrap { max-width: none; padding: 5px 5px 5px 18px; }
.aura-input { font-size: 14px; padding: 12px 8px 12px 0; }
.aura-send { width: 42px; height: 42px; border-radius: 12px; }
.aura-send svg { width: 18px; height: 18px; }
.aura-browse-row { justify-content: center; margin: 0; }
/* CPT switcher on mobile: chips + inventory centred to the same axis as the stack. */
.aura-type-switch { justify-content: center; margin: 0 0 var(--m-gap); }
/* INVENTORY SNEAK-PREVIEW (mobile first view): push the teaser down so ONLY ~10–20% of
the first session-card row peeks above the fixed bottom nav — a deliberate "there's
real inventory below" cue, not a catalogue. The bottom nav is ~60px tall (fixed), so
the fold ≈ 100dvh − 60. The hero stack above is ~constant per width, so a viewport-
height-relative offset lands the first card row's top a card-fraction below the fold
across 360–440px + tall phones (verified peek 11–16%). max() floor keeps the normal
section gap on any short viewport where the calc would go small/negative. */
.aura-type-inv {
max-width: none; text-align: center;
/* Peek bumped from ~10-20% to ~25-30% of the first card row above the bottom nav:
a larger subtrahend lifts the teaser row higher into view (still a teaser, not a
catalogue). Combined with the tightened image->title gap above (both raise the row).
Re-measured across 360/390/440 + tall phones. max() floor keeps a sane gap on short
viewports where the calc would go small/negative. */
margin-top: max(var(--m-gap-lg), calc(67vh - 424px));
margin-top: max(var(--m-gap-lg), calc(67dvh - 424px));
}
/* Quieter, editorial section label on mobile ("Explore sessions"): calmer than the
desktop "LIVE SESSIONS NOW" — lower weight, sentence case (no uppercase tracking) and
softer colour so it reads as an invitation, not a dashboard readout. The (N of TOTAL)
count is dropped from the visible label (kept in the DOM for the unchanged pagination
mechanism — appendNew still updates it). Desktop label/behaviour is untouched. */
.aura-inv-head--calm {
font-weight: 600; letter-spacing: .01em; text-transform: none;
font-size: 14px; color: #6f6b78;
}
.aura-inv-head--calm .aura-inv-count { display: none; }
.aura-inv-grid { grid-template-columns: 1fr 1fr; text-align: left; }
.aura-inv-b { text-align: left; }
.aura-inv-empty { text-align: center; }
.aura-booking.results-mode { grid-template-columns: 1fr; }
.aura-convo { position: static; }
.aura-choice { flex: 1 1 44%; min-height: 78px; }
.aura-q { font-size: clamp(22px, 6vw, 28px); }
.aura-card { grid-template-columns: 92px 1fr; }
.aura-card-img { min-height: 92px; }
#aura-home[data-mode="booking"] .aura-stage { padding-top: clamp(20px, 4vh, 40px); }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
#aura-home *, #aura-home *::before, #aura-home *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ---------- STEP 2 mobile: full-width Booknetic wizard iframe inside the handoff modal
(owner 2026-09-13). Scoped to the handoff sheet ONLY via :has(.aura-handoff-frame) so
the stub payment/booked/details sheets are unchanged; desktop (>=821px) untouched;
payment/deep-link/flow/copy untouched. Falls back gracefully if :has() unsupported. ---------- */
@media (max-width: 820px) {
.aura-pay-sheet:has(.aura-handoff-frame) {
width: 100vw;
max-width: 100vw;
border-radius: 16px 16px 0 0;
padding: max(14px, env(safe-area-inset-top)) 8px calc(12px + env(safe-area-inset-bottom));
}
.aura-pay-sheet:has(.aura-handoff-frame) .aura-handoff-frame {
width: 100%;
height: min(80vh, 720px);
border-radius: 10px;
}
/* keep the close button reachable below any notch */
.aura-pay-sheet:has(.aura-handoff-frame) .aura-pay-close {
top: max(14px, env(safe-area-inset-top));
right: 12px;
}
}
/* ---------- STEP 2 mobile: TRUE full-screen handoff overlay above ALL host chrome
(owner 2026-09-13). Widening the sheet above exposed the problem underneath it: the
host's fixed Voxel mobile bottom nav (Menu/Home/Sign-in bar) and the Super Aura chat
FAB/panel sit on top of Booknetic's own sticky Next/Back/Confirm footer inside the
iframe, blocking it on mobile. Gated on body.aura-handoff-open, toggled ONLY for the
flag-ON handoff in aura-home.js (openWizardHandoff / payClose) -- so this is fully
inert when the modal is closed, on desktop (>=821px), and for the flag-OFF stub
payment sheet (payment()) which never sets the class. Selectors for the host chrome
were discovered at runtime (Playwright, 411x915 mobile viewport against the live
/aura-home-demo/ page) rather than guessed:
- Voxel bottom nav: the single mobile-only (elementor-hidden-desktop/laptop) fixed
Elementor container that wraps the ts-user-bar widget (Menu / Home / Sign-in
icons) -- targeted via the stable Voxel widget class, not the auto-generated
Elementor element id, so it survives Elementor re-saves.
- Aura chat FAB: #bksesh-sa-launcher (the purple bubble button) and its flyout
panel #bksesh-sa-panel, both stable plugin-owned ids.
No other fixed-position elements were found near the bottom of the mobile viewport. */
@media (max-width: 820px) {
body.aura-handoff-open {
overflow: hidden;
position: fixed;
inset: 0;
width: 100%;
}
body.aura-handoff-open .aura-pay {
position: fixed;
inset: 0;
height: 100dvh;
width: 100vw;
z-index: 2147483000;
}
body.aura-handoff-open .aura-pay-sheet:has(.aura-handoff-frame) {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
display: flex;
flex-direction: column;
padding: max(14px, env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
}
/* #aura-pay-body (the innerHTML target in openWizardHandoff -- badge/h3/iframe/verify
box are all its direct children) sits between the sheet and the iframe, so the flex
chain has to pass through it too or the iframe only ever gets its content height. */
body.aura-handoff-open .aura-pay-sheet:has(.aura-handoff-frame) #aura-pay-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
body.aura-handoff-open .aura-pay-sheet:has(.aura-handoff-frame) .aura-handoff-frame {
flex: 1 1 auto;
width: 100%;
height: auto;
min-height: 0;
border-radius: 0;
padding-bottom: env(safe-area-inset-bottom);
}
body.aura-handoff-open .aura-pay-sheet:has(.aura-handoff-frame) .aura-handoff-verify {
flex: 0 0 auto;
}
body.aura-handoff-open .aura-pay-sheet:has(.aura-handoff-frame) .aura-pay-close {
top: max(14px, env(safe-area-inset-top));
right: 12px;
z-index: 2;
}
/* Host chrome, hidden only while the overlay is open */
body.aura-handoff-open .elementor-hidden-desktop.elementor-hidden-laptop:has(.elementor-widget-ts-user-bar),
body.aura-handoff-open #bksesh-sa-launcher,
body.aura-handoff-open #bksesh-sa-panel {
display: none !important;
}
}