/* ========================================================================== Sabah Booking — brand product detail pages. carinfo, and the tourinfo / holidayinfo / hotelinfo / transferinfo / ticketinfo siblings that follow. Loaded AFTER brand-home.css (tokens + shell) and brand-page.css (prose, form fields, tables). Body carries "sb-home sb-page sb-detail". UNLIKE the other brand pages, detail pages DO load jQuery. Their booking widget — datepicker, option selection, live price calculation — is jQuery and is the revenue path; it is deliberately left running as-is and only its markup is restyled. The dependency is kept minimal: plain jquery-3.6.3 plus jquery-ui (for .datepicker(), the only plugin the booking JS calls), NOT the 437K assets3/js/common_scripts.js theme bundle, which would also boot mmenu / flexslider / sticky-sidebar against markup that no longer exists. Bootstrap is NOT loaded, so its utilities are gone: any `d-none` scratch element in the old markup must become the `hidden` attribute (brand-page.css carries `.sb-page [hidden]{display:none}`, which beats a declared display). No !important anywhere. ========================================================================== */ /* ---- detail hero -------------------------------------------------------- */ .sb-dhero{ position:relative;background-size:cover;background-position:center; background-color:var(--sand-100); padding:44px var(--gutter) 40px; } .sb-dhero::before{ content:"";position:absolute;inset:0; background:linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.6) 70%, rgba(255,255,255,.2) 100%); } .sb-dhero__inner{position:relative;z-index:2;max-width:820px} .sb-dhero h1{ font:var(--text-h1);font-size:clamp(24px,3vw,36px); display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap; } .sb-dhero__meta{ display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px; font:var(--text-subtitle);color:var(--text-body-color); } .sb-dhero__meta a{color:var(--text-body-color)} .sb-dhero__meta a:hover{color:var(--text-link)} .sb-dhero__meta .sb-icon{width:16px;height:16px} /* the wishlist heart sits inline with the title, not floated over the photo */ .sb-dhero .sb-wishbtn{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;flex:none; background:var(--surface-card);box-shadow:var(--shadow-card); color:var(--gray-500);cursor:pointer;margin-top:4px; } .sb-dhero .sb-wishbtn:hover{color:var(--coral)} /* wishlist.js injects its own `.sb-wishbtn:after{font-family:ElegantIcons}` heart into at init. That icon font is part of the theme bundle brand pages no longer load, so the glyph would render as a tofu box next to the lucide heart the markup carries. `.liked` is the class wishlist.js paints on. The injected style tag lands in at runtime, AFTER this linked stylesheet - so on a specificity TIE, cascade order hands it the win over a same-specificity override here. `.sb-dhero .sb-wishbtn::after` (0,2,1) silences the base glyph, but wishlist.js ships two MORE ::after rules at that same (0,2,1) - `:hover:after` and `.liked:after` (the box painted once an item is saved) - and the plain override can't out-rank either. Overriding both explicitly at (0,3,1) closes the gap without !important. Hovering a saved item is covered by the :hover override alone (0,3,1 beats .liked's 0,2,1 regardless of state), but .liked on its own still needs its own line - that's the one that was reappearing on mouseout. */ .sb-dhero .sb-wishbtn::after, .sb-dhero .sb-wishbtn:hover::after, .sb-dhero .sb-wishbtn.liked::after{content:none} .sb-dhero .sb-wishbtn.liked{color:var(--coral)} .sb-dhero .sb-wishbtn.liked .sb-icon{fill:var(--coral)} /* ---- sticky section nav ------------------------------------------------- */ .sb-dnav{ position:sticky;top:62px;z-index:15; /* clears the sticky brand header */ background:var(--surface-page); border-bottom:1px solid var(--border-subtle); padding:0 var(--gutter); } .sb-dnav ul{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none} .sb-dnav ul::-webkit-scrollbar{display:none} .sb-dnav a{ display:block;padding:14px 0;white-space:nowrap; font:var(--text-subtitle);font-weight:600;color:var(--text-muted); border-bottom:2px solid transparent; } .sb-dnav a:hover{color:var(--text-heading)} .sb-dnav a.is-active{color:var(--green-600);border-bottom-color:var(--green-500)} /* ---- two-column detail layout ------------------------------------------- */ .sb-dlayout{ display:grid;grid-template-columns:minmax(0,1fr) 360px; gap:40px;align-items:start; padding:32px var(--gutter) 48px; max-width:1320px;margin:0 auto; } .sb-dmain{min-width:0} /* The rail can only stick if its container is taller than it is. `align-items: start` sizes the aside to its content, which leaves zero travel and makes position:sticky a no-op — so this one item stretches to the row height. */ .sb-dlayout > aside{align-self:stretch;min-width:0} /* ---- content section ---------------------------------------------------- */ .sb-dsec{padding:28px 0;border-top:1px solid var(--border-subtle)} .sb-dsec:first-child{border-top:0;padding-top:0} .sb-dsec > h2{font:var(--text-h2);font-size:22px;margin-bottom:16px} .sb-dsec > h3{font:var(--text-h3);margin-bottom:12px} /* Boki waving at the end of the description, standing right on the closing rule rather than guessing where the next section's own border-top lands. The next section's own border-top is switched off so the two lines don't double up. .sb-dsec--bokiclose (not #description) does that switch-off: the "description" id is reused for other sections on some detail pages (carinfo's #description is actually Terms & Conditions, with the real description section above it carrying no id at all), so a class the description section itself opts into is the one thing consistent across tourinfo/holidayinfo/transferinfo/ticketinfo/carinfo. .sb-dsec__bokirule reserves real box-model height for Boki (height: mascot-height + the gap wanted above him), with the actual 10px hairline drawn at its bottom edge via ::before. Earlier this box was just the 10px line itself and Boki overlapped upward from it via position:absolute, which added no space of his own — every time his height changed, the gap to the prose text above silently changed with it (and last had him overlapping the description text by ~130px instead of clearing it). Reserving his height here means the prose and Boki never fight for the same space regardless of how big he is drawn. */ .sb-dsec--bokiclose + .sb-dsec{border-top:0} .sb-dsec__bokirule{ position:relative;height:138px; } .sb-dsec__bokirule::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:10px; background:var(--border-subtle); } .sb-dsec__boki{ position:absolute;right:0;bottom:0;z-index:1; height:188px;width:auto; pointer-events:none; } @media (max-width:767px){ .sb-dsec__bokirule{height:200px} /* 150px mascot + 50px clearance */ .sb-dsec__boki{height:150px} } /* ---- collapsible prose --------------------------------------------------- Long CMS descriptions are clamped to half a viewport and faded out, with prose-clamp.js adding the See More / See Less button underneath. The clamp class is applied by JS and never by the markup, so a description that already fits gets no button and no fade at all — those pages look exactly as they did before. Nothing is removed from the DOM either: the copy stays readable to crawlers and to in-page find. Only the .sb-prose block is wrapped, never the whole section: transferinfo's description section used to also carry the exclusive-charter availability calendar, which must not disappear behind a fade (it now has a section of its own, but the rule still holds — the wrapper is the prose). */ .sb-clamp{position:relative} .sb-clamp--on{max-height:50vh;overflow:hidden} .sb-clamp--on::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:96px; background:linear-gradient(to bottom,transparent,var(--surface-page)); pointer-events:none; } /* display:flex, not the .sb-btn default inline-flex — `margin:auto` centres a block-level box and is a no-op on an inline-level one. */ .sb-clamp__btn{display:flex;margin:14px auto 0} /* One chevron that rotates, not two icons swapped: lucide.createIcons() runs once at load and replaces the with an inline s. An inline box ignores height, so the track would collapse and the fill would never paint — they must be blockified. The track gets it from being a flex item; the fill needs it declared. */ .sb-revbar__track{ flex:1;display:block;height:7px;border-radius:var(--radius-pill); background:var(--gray-100);overflow:hidden; } .sb-revbar__fill{display:block;height:100%;background:var(--star);border-radius:var(--radius-pill)} .sb-revbar__n{font:var(--text-caption);color:var(--text-muted);min-width:26px} /* ========================================================================== tourinfo — the components carinfo did not need. A tour page carries an itinerary (day tabs + a per-day timeline), a group price ladder, a per-pax stepper and a mobile price bar. Everything below is additive; nothing here is referenced by carinfo. Three sets of class names below are NOT brand names and are deliberate: `qtyButtons / qtyInput / qtyTotal / qtyInc / qtyDec` and the `rotate-x` keyframe are the contract the page's own inline stepper JS builds against (it injects .qtyInc/.qtyDec as siblings of `.qtyButtons input` and reads `.qtyTotal`). Renaming them would mean rewriting booking JS, which the conversion does not touch. ========================================================================== */ /* ---- two content columns (highlights beside what's included) ------------- */ .sb-dcols{display:grid;grid-template-columns:1fr 1fr;gap:32px} .sb-dcols h3{font:var(--text-h3);margin-bottom:12px} /* ---- video embed --------------------------------------------------------- Replaces bootstrap's `.ratio.ratio-16x9`. */ .sb-video{ position:relative;width:100%;padding-top:56.25%; border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-100); } .sb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---- group price ladder -------------------------------------------------- #grouppriceBody is filled by the page's setGrouppriceBar(); the blocks are emitted by that JS, so these are the only selectors that can reach them. Each block is also a .sb-tip trigger whose bubble pops up above it, so the box can't carry a permanent `overflow:hidden` — pairing overflow-x:hidden with overflow-y:visible doesn't help either, since the spec silently turns that "visible" into "auto", which still clips a bubble poking out above the box's own top edge (auto only adds a scrollbar over it, it doesn't stop the clip). Instead the JS adds .sb-pricebar--sliding only for the few hundred ms the slide-in transition is actually running, so hover/focus tooltips stay unclipped the rest of the time. Blocks flex to equal widths — the inline `width:n%` the JS writes is what the legacy bar chart used and flex-basis supersedes it. */ .sb-pricebar{border-radius:var(--radius-md)} .sb-pricebar--sliding{overflow-x:hidden} .sb-pricebar__inner{display:flex;gap:6px} .sb-pricebar__block{ flex:1;min-width:0;padding:14px 6px;text-align:center; background:var(--sand-100);border-radius:var(--radius-sm); font:var(--text-caption);color:var(--text-muted); } .sb-pricebar__block strong{ display:block;font:var(--text-subtitle);font-weight:600;color:var(--text-heading); } .sb-pricebar__value{display:block;margin-top:6px;font:var(--text-body);color:var(--green-800)} /* ---- itinerary tabs ------------------------------------------------------ Native buttons + a five-line switcher, not bootstrap's tab plugin. */ .sb-tabs__nav{ display:flex;gap:6px;flex-wrap:wrap; border-bottom:1px solid var(--border-subtle);margin-bottom:20px; } .sb-tabs__tab{ background:none;border:0;cursor:pointer;padding:10px 14px; font:var(--text-subtitle);font-weight:600;color:var(--text-muted); border-bottom:2px solid transparent; } .sb-tabs__tab:hover{color:var(--text-heading)} .sb-tabs__tab.is-active{color:var(--green-600);border-bottom-color:var(--green-500)} .sb-tabs__panel{display:none} .sb-tabs__panel.is-active{display:block} /* ---- itinerary timeline -------------------------------------------------- brand-home.css strips list markers globally, so only the connector rule below is doing any work. */ .sb-timeline{position:relative;margin:0;padding:0} .sb-timeline__item{display:flex;gap:14px;padding-bottom:20px;position:relative} .sb-timeline__item::before{ content:"";position:absolute;left:15px;top:34px;bottom:0;width:2px; background:var(--gray-100); } .sb-timeline__item:last-child::before{display:none} .sb-timeline__num{ flex:none;width:32px;height:32px;border-radius:50%;position:relative;z-index:1; background:var(--green-100);color:var(--green-800); display:flex;align-items:center;justify-content:center; font:var(--text-small);font-weight:600; } .sb-timeline__body{padding-top:3px;min-width:0} .sb-timeline__time{ display:block;font:var(--text-caption);font-weight:600;color:var(--coral-600); } .sb-timeline__body p{font:var(--text-body);color:var(--text-body-color);margin-top:2px} /* ---- hotel zone locator -------------------------------------------------- `.is-hit` is painted on the matching by the page's #checkhotelBtn handler after ./hotels answers. */ .sb-locate{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:18px} .sb-locate .sb-field{flex:1;min-width:220px} .sb-table tr.is-hit td{background:var(--green-100);color:var(--green-800)} @keyframes sb-spin{to{transform:rotate(360deg)}} .sb-spin{animation:sb-spin 1s linear infinite} /* ---- passenger stepper (booking box) ------------------------------------- */ .sb-qty{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle)} .sb-qty__head{ display:flex;align-items:center;justify-content:space-between;gap:10px; font:var(--text-subtitle);font-weight:600;color:var(--text-heading);margin-bottom:12px; } .sb-qty .qtyTotal{ min-width:28px;height:28px;padding:0 9px;border-radius:var(--radius-pill); background:var(--green-100);color:var(--green-800); display:inline-flex;align-items:center;justify-content:center; font:var(--text-small);font-weight:600; } @keyframes rotate-x{from{transform:rotateX(0)}to{transform:rotateX(360deg)}} .sb-qty .qtyTotal.rotate-x{animation:rotate-x var(--dur-med) var(--ease-brand)} .sb-qty .qtyButtons{display:flex;align-items:center;gap:8px} .sb-qty .qtyButtons + .qtyButtons{margin-top:10px} .sb-qty .qtyButtons label{ flex:1;min-width:0;display:flex;align-items:center;gap:6px; font:var(--text-body);color:var(--text-body-color); } .sb-qty .qtyButtons label .sb-icon{width:14px;height:14px;color:var(--coral-600)} .sb-qty .qtyInput{ width:48px;flex:none;text-align:center;padding:6px 4px; border:1px solid var(--gray-300);border-radius:var(--radius-sm); font:var(--text-body);color:var(--text-heading);background:var(--surface-page); } .sb-qty .qtyInput:disabled{background:var(--gray-100);color:var(--text-muted)} /* injected by the stepper JS as bare divs — the glyphs are drawn, not typed */ .sb-qty .qtyInc,.sb-qty .qtyDec{ width:28px;height:28px;flex:none;border-radius:50%;cursor:pointer;position:relative; background:var(--gray-100);color:var(--text-heading); transition:background var(--dur-fast) var(--ease-brand); } .sb-qty .qtyInc:hover,.sb-qty .qtyDec:hover{background:var(--green-100)} .sb-qty .qtyInc::before,.sb-qty .qtyDec::before,.sb-qty .qtyInc::after{ content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);background:currentColor; } .sb-qty .qtyInc::before,.sb-qty .qtyDec::before{width:10px;height:2px} .sb-qty .qtyInc::after{width:2px;height:10px} /* ---- booking price breakdown --------------------------------------------- */ .sb-prows{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle)} .sb-prow{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(48px,auto); gap:8px;align-items:baseline;padding:9px 0; border-bottom:1px solid var(--border-subtle); font:var(--text-body);font-size:14px;color:var(--text-body-color); } .sb-prow > :last-child{text-align:right} .sb-prow b{color:var(--text-heading)} .sb-prow--head{font:var(--text-caption);font-weight:600;color:var(--text-muted)} .sb-prow--disc b{color:var(--coral-600)} .sb-promorow{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:12px 0;border-bottom:1px solid var(--border-subtle); } .sb-promorow__note{font:var(--text-caption);color:var(--coral-600)} /* ---- tour guide card ------------------------------------------------------ holidayinfo only. tourGuide.jsp was a whole stand-alone document (own , own