/* ============================================================================ * session-discovery-v2.css — PREVIEW-ONLY refinements for /session-discovery-demo-v2/ * (owner directive 2026-09-14, revision r4). Scoped ENTIRELY to body.bks-disc-v2 * so the approved Variant B (15191) is byte-unchanged. Each refinement is a * self-contained block for independent rollback. * ==========================================================================*/ /* -- REFINEMENT 1 — SEARCH ARROW: dark circular arrow inside the pill -------- */ body.bks-disc-v2 .bks-disc-go { background: var(--bks-ink, #090711) !important; border-radius: 999px !important; box-shadow: none !important; } body.bks-disc-v2 .bks-disc-go:hover { background: var(--bks-coral, #EB666D) !important; } /* -- REFINEMENT 2 (r4) — QUICK VIEW: smooth content-height reveal, SLOWED ----- * grid-template-rows 0fr->1fr eased. r4: slowed ~2 stops (0.5s -> 0.85s, opacity * 0.4s -> 0.6s) per owner. Pure CSS, class-based (.is-open), quickview.php untouched. */ body.bks-disc-v2 .bksesh-qv-panel { display: grid; grid-template-rows: 0fr; max-height: none !important; overflow: hidden; opacity: 0; transition: grid-template-rows 1s cubic-bezier(.4, 0, .2, 1), opacity .8s ease !important; } body.bks-disc-v2 .bksesh-qv-panel.is-open { grid-template-rows: 1fr; max-height: none !important; opacity: 1; } body.bks-disc-v2 .bksesh-qv-panel-inner { min-height: 0; overflow: hidden; } body.bks-disc-v2 .bksesh-qv-chev { transition: transform .6s cubic-bezier(.4, 0, .2, 1); } body.bks-disc-v2 .bksesh-qv-toggle[aria-expanded="true"] .bksesh-qv-chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { body.bks-disc-v2 .bksesh-qv-panel, body.bks-disc-v2 .bksesh-qv-chev { transition: none !important; } } /* -- REFINEMENT 3 (r4) — BOOK NOW: animated gradient (/partners mechanism), SLOWED * Symmetric gradient + background-size 280% + position ping-pong 0%<->100% (never * off the edge => no white) + solid #0F40FF fallback. r4: slowed 7.5s -> 11s. */ body.bks-disc-v2 .booksesh-btn { border-radius: 999px !important; border: 0 !important; color: #fff !important; background-color: #0F40FF !important; background-image: linear-gradient(90deg, #0F40FF 0%, #7A5AF0 25%, #EB666D 50%, #7A5AF0 75%, #0F40FF 100%) !important; background-size: 280% 100% !important; box-shadow: 0 4px 14px rgba(122, 90, 240, .35) !important; transition: filter .12s ease, box-shadow .25s ease, transform .12s ease !important; animation: bksV2Grad 11s ease-in-out infinite !important; } @keyframes bksV2Grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body.bks-disc-v2 .booksesh-btn:hover, body.bks-disc-v2 .booksesh-btn:focus-visible { color: #fff !important; filter: brightness(.94); box-shadow: 0 6px 20px rgba(235, 102, 109, .45) !important; } body.bks-disc-v2 .booksesh-btn:active { transform: scale(.98) !important; } @media (prefers-reduced-motion: reduce) { body.bks-disc-v2 .booksesh-btn { animation: none !important; background-position: 0% 50% !important; } } /* -- REFINEMENT 4 (r10) — GRADIENT reserved for the HERO H1 only; card titles * SOLID (owner 2026-09-14: gradient on every card title was busy and hurt * scannability). Hero = blue->purple gradient; card titles = solid BookSesh blue. */ body.bks-disc-v2 h1.elementor-heading-title { background: linear-gradient(90deg, #0F40FF 0%, #7A5AF0 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.bks-disc-v2 .ts-preview h3, body.bks-disc-v2 .ts-preview h3 a, body.bks-disc-v2 .ts-preview .elementor-widget-heading .elementor-heading-title { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #0F40FF !important; color: #0F40FF !important; /* solid BookSesh blue */ } /* -- REFINEMENT 5 — SALIENT-STYLE ROTATING WORDS (search box) --------------- */ body.bks-disc-v2 .bks-disc-kwform { position: relative; } body.bks-disc-v2 .bks-disc-kw::placeholder { color: transparent !important; } body.bks-disc-v2 .bks-disc-rotw { position: absolute; left: 18px; right: 56px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; font-family: inherit; font-size: 15px; font-weight: 500; color: #9a95a6; } body.bks-disc-v2 .bks-disc-rotw.is-hidden { display: none; } body.bks-disc-v2 .bks-disc-rotw__w { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transform: translateY(0); opacity: 1; transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s ease; } body.bks-disc-v2 .bks-disc-rotw__w.is-out { transform: translateY(-115%); opacity: 0; } body.bks-disc-v2 .bks-disc-rotw__w.is-in-start { transform: translateY(115%); opacity: 0; transition: none; } @media (max-width: 767px) { body.bks-disc-v2 .bks-disc-rotw { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { body.bks-disc-v2 .bks-disc-rotw__w { transition: none !important; } } /* -- REFINEMENT 6 (r4) — QUICK VIEW "Check availability ->" primary CTA ------ * Injected by session-discovery-v2.js directly ABOVE the coral "View full page ->" * link inside the expanded panel. Salient "Contact us" style: compact pill, * Blue->Purple gradient, arrow slides on hover; OUR scheme (coral) on hover. * Clicking it proxy-clicks the card's BOOK NOW => opens the booking iframe popup. */ body.bks-disc-v2 .bks-qv-check-row { margin: 4px 0 8px; } body.bks-disc-v2 .bks-qv-check { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: #fff !important; text-decoration: none !important; background: linear-gradient(90deg, #0F40FF 0%, #7A5AF0 100%); box-shadow: 0 3px 10px rgba(122, 90, 240, .30); transition: background .22s ease, box-shadow .22s ease, transform .1s ease; } body.bks-disc-v2 .bks-qv-check .bks-qv-check-arw { transition: transform .28s cubic-bezier(.16, 1, .3, 1); display: inline-block; } body.bks-disc-v2 .bks-qv-check:hover, body.bks-disc-v2 .bks-qv-check:focus-visible { background: linear-gradient(90deg, #EB666D 0%, #7A5AF0 100%); /* our coral scheme on hover */ box-shadow: 0 5px 14px rgba(235, 102, 109, .40); } body.bks-disc-v2 .bks-qv-check:hover .bks-qv-check-arw, body.bks-disc-v2 .bks-qv-check:focus-visible .bks-qv-check-arw { transform: translateX(4px); } body.bks-disc-v2 .bks-qv-check:active { transform: scale(.98); } /* -- REFINEMENT 7 (r7) — "Home-based venue" (main-results CARD chip only): * SOLID BLUE house icon + Blue->Purple TEXT gradient (same as the title). Panel * duplicate stays hidden. (r5/r6 gave the icon a 3-colour gradient stroke — owner * said that was overdone; icon is now solid blue, text matches the title.) */ body.bks-disc-v2 .bksesh-qv-home { display: none !important; } /* remove the panel repeat */ body.bks-disc-v2 .bksesh-wfh-chip--card .bksesh-wfh-txt { background: linear-gradient(90deg, #0F40FF 0%, #7A5AF0 100%) !important; /* same as title */ -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.bks-disc-v2 .bksesh-wfh-chip--card .bksesh-wfh-ico { color: #0F40FF !important; stroke: #0F40FF !important; /* solid blue icon */ transform: translateX(4px); /* nudge a touch right */ overflow: visible; } body.bks-disc-v2 .bksesh-wfh-chip--card .bksesh-wfh-ico path { stroke: #0F40FF !important; } /* -- REFINEMENT 8 (r5) — round logo: full logo on a BLURRED (frosted) backdrop * of the card photo behind it, NOT a solid white fill. object-fit:contain keeps * the whole logo; backdrop-filter blurs the photo showing through the letterbox; * only a faint tint for legibility. */ body.bks-disc-v2 .ts-preview .elementor-element-b6b2133 .elementor-element-22a8d2b img { object-fit: contain !important; background: rgba(255, 255, 255, 0.10) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; padding: 7px !important; box-sizing: border-box !important; border-radius: 50% !important; } /* -- REFINEMENT 8b (r5) — nudge the round logo frame toward the upper-left corner * (Voxel/skin default sits at 20px/20px which looked odd). */ body.bks-disc-v2 .ts-preview .elementor-element-b6b2133 > .elementor-element-22a8d2b { top: 12px !important; left: 12px !important; } /* -- REFINEMENT 9 (r8) — MOBILE card title: clean 2-line clamp + ellipsis ---- * Long titles wrapped/cut mid-word on small screens. Clamp to 2 lines with an * ellipsis, wrapping at word boundaries (overflow-wrap:normal keeps whole words; * only an over-long single word would break). Text lives in the inside the * card h3, so the clamp is applied there. DESKTOP UNCHANGED (mobile query only). * Coexists with the blue->purple gradient text (background-clip:text). */ /* Applies on desktop AND mobile (owner 2026-09-14: title was chopping on both). */ body.bks-disc-v2 .ts-preview h3 a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; overflow-wrap: normal; /* prefer whole words */ word-break: normal; } /* -- REFINEMENT 10 (r8) — hide EMPTY reviews (0-review listings) ------------- * Elementor rating widget renders empty stars (ratingValue content="0" / * aria "Rated 0 out of 5") for listings with no reviews. Hide the whole rating * row for those so no empty stars show. Cards WITH reviews (content!="0") keep * their rating. Pure CSS via :has(). (Temporary — reviews move to our own system * later.) 8f23438 = the card's rating-row container. */ body.bks-disc-v2 .ts-preview .elementor-element-8f23438:has(.e-rating-wrapper[content="0"]) { display: none !important; } /* -- REFINEMENT 11 (r9) — BOOK NOW: FULL-SCREEN booking overlay ------------- * Owner: match the proven /aura-home-demo/ full-iframe host-overlay — NOT the * squeezed 960px inline iframe. REUSES the existing sitewide popup created by * openBookNowIframe() in the card template (#bookNowIframeContainer / #bookNowIframe, * also reached by the proxied "Check availability"). Here it is presented full * viewport; session-discovery-v2.js adds body.bks-disc-book-open while it is on * screen to suppress the Voxel bottom nav + Aura FAB (same selectors proven on * aura-home-demo) and lock scroll. No second booking system; no template edit. */ body.bks-disc-v2 #bookNowIframeContainer { z-index: 2147483000 !important; /* above all host chrome */ background: #ffffff !important; /* full-screen app-like (iframe fills it) */ } body.bks-disc-v2 #bookNowIframe { width: 100vw !important; max-width: none !important; height: 100dvh !important; border-radius: 0 !important; box-shadow: none !important; } body.bks-disc-v2 #bookNowIframeContainer .closeButton { top: max(16px, env(safe-area-inset-top)) !important; right: 16px !important; z-index: 2147483001 !important; } body.bks-disc-v2.bks-disc-book-open { overflow: hidden !important; } body.bks-disc-v2.bks-disc-book-open .elementor-hidden-desktop.elementor-hidden-laptop:has(.elementor-widget-ts-user-bar), body.bks-disc-v2.bks-disc-book-open #bksesh-sa-launcher, body.bks-disc-v2.bks-disc-book-open #bksesh-sa-panel { display: none !important; }