/* ============================================================ demo-hud.css — guided tier-feature tour overlay for demo sites Self-contained: no dependency on the premium design system. Drop-in with demo-hud.js + a window.BALLY_TOUR config per page. ============================================================ */ :root{ /* light, welcoming card — no more brown panels */ --hud-ink:#141A24; --hud-ink-dim:#5A6270; --hud-panel:#FFFFFF; --hud-panel-2:#F6F6F2; --hud-line:rgba(20,26,36,.12); --hud-basic:#1C8B7C; /* teal: the presence build, entry rung */ --hud-pro:#7C2D48; /* burgundy: the working build, most popular */ --hud-premium:#16263F; /* navy: the showcase build, the ceiling */ /* legacy aliases, so any page not yet re-keyed still resolves */ --hud-founder:var(--hud-basic); --hud-growth:var(--hud-pro); --hud-scale:var(--hud-premium); --hud-green:#5FD433; --hud-green-deep:#46B21F; --hud-shadow:0 24px 60px -18px rgba(16,24,40,.34); } /* ============================================================ BOTTOM-EDGE SYSTEM (added 2026-07-22 — foundation pass) ------------------------------------------------------------ Every demo stacks three FIXED overlays along the bottom edge and they were fighting: the green tour pill (bottom-left), the navy attribution bar (bottom-CENTRE, floating over the page) and the green chat launcher (bottom-right). The centre pill was the real offender — it landed mid-content and cut TrueLine's trust strip in half and clipped Alder & Oak's copy, and at 390px all three collided. One coherent system instead of three independent floats: ┌───────────────────────────────────────────────┐ │ [tour pill] [chat launch] │ ← corner slots, floats ├───────────────────────────────────────────────┤ │ ▉ DEMO STRIP — docked, full width, opaque │ ← --bda-strip tall └───────────────────────────────────────────────┘ The attribution bar becomes a DOCKED FULL-WIDTH STRIP, not a floating island, and body reserves exactly its height. At max scroll the reserved band sits under the strip, so the last line of real content is never covered. The two corner controls ride above the strip on a shared baseline. Ownership note: bally-chat.js is NOT ours to edit, so .bc is re-anchored here with scoped overrides. .bda-demobar carries inline styles injected per page, which is why these declarations need !important — that is deliberate, not lazy. ============================================================ */ :root{ --bda-strip: 48px; /* docked attribution strip height */ --bda-gap: 14px; /* breathing room above the strip */ --bda-ctrl: 60px; /* tallest corner control (the chat launcher) */ --bda-edge: clamp(14px,3vw,26px); /* the whole rail — strip + gap + corner controls. Reserving only the strip left the tour pill sitting on top of the last lines of the page, which at 390 covered TrueLine's "fictional business" disclaimer. That text is an honesty requirement, not decoration, so the reserve covers the full rail. */ --bda-rail: calc(var(--bda-strip) + var(--bda-gap) + var(--bda-ctrl)); } /* under 640 the strip wraps — was 76px measured before the tier badge went in. The badge adds a chip and a price to the same row, so the strip can now take a third line at 390. Reserve 84 so the last line of real content is still never occluded; the cost of over-reserving is whitespace, the cost of under-reserving is a covered disclaimer. */ @media (max-width:640px){ :root{ --bda-strip: 84px; --bda-gap: 12px; } } /* Reserve the strip so nothing is ever occluded at the end of the page. Unconditional because this stylesheet only ships on demo pages, which all carry the bar — no :has() dependency, so it holds on older Android Chrome. */ body{ padding-bottom: var(--bda-rail); } /* Base look for the docked strip. Lives here rather than in a per-page inline style attribute so the three demos share one source of truth. Deliberately NOT !important: halocline still carries the old inline styles and keeps its current look, because inline beats these. The !important block below then forces the docked geometry on every demo either way. */ .bda-demobar{ position:fixed; z-index:2147483000; display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; background:rgba(12,16,26,0.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:600 12.5px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif; } .bda-demobar .bda-btn{ flex:none; text-decoration:none; color:#fff; padding:7px 12px; border-radius:999px; font-weight:700; border:1px solid rgba(255,255,255,0.3); transition:background .2s,border-color .2s; } .bda-demobar .bda-btn:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.5); } .bda-demobar .bda-btn--solid{ background:#F3F5F8; color:#0C101A; border-color:#F3F5F8; } .bda-demobar .bda-btn--solid:hover{ background:#fff; color:#0C101A; } /* NOTE ON SPECIFICITY: each demo page carries its own late