/* Trip Thirsty — integration adjustments only (fit real content into the theme). Loaded once after main.css. No redesign; targeted fixes to layout/overflow. */ /* --- primary nav: keep it on one line, tighten spacing --- */ .tgmenu__main-menu .navigation { flex-wrap: nowrap; white-space: nowrap; } .tgmenu__nav.ml-50 { margin-left: 28px; } .tgmenu__nav.ml-30 { margin-left: 12px; } .navigation > li > a { padding-left: 13px; padding-right: 13px; } .logo a img { max-height: 46px; width: auto; } .tgmobile__menu .nav-logo img, .offCanvas__logo img { max-height: 44px; width: auto; } .tg-footer-logo img { max-height: 42px; width: auto; } /* --- no shopping cart (not an e-commerce site) --- */ .tg-header-cart, .cart-button, .minicart, .tg-header-cart-count { display: none !important; } /* --- standard header's search + theme-toggle buttons sit outside the nav, so the theme's own "white while transparent, black once scrolled" rule (which only targets .tgmenu__navbar-wrap links) never reaches them. Match it. --- */ .tg-header-btn .search-open-btn, .tg-header-btn .tt-theme-toggle { color: var(--tg-common-white); } .tg-header-btn .tt-theme-toggle { border-color: rgba(255, 255, 255, .55); } .header-sticky .tg-header-btn .search-open-btn, .header-sticky .tg-header-btn .tt-theme-toggle { color: var(--tg-common-black); } .header-sticky .tg-header-btn .tt-theme-toggle { border-color: var(--tg-border-1, #e1e1e1); } /* the phone header keeps the theme toggle beside the hamburger (.tt-mobile-theme-toggle), outside .tg-header-btn, so the rules above never reached it: it stayed dark on the transparent header. Same white-then-dark behaviour here. */ .tt-mobile-theme-toggle .tt-theme-toggle { color: var(--tg-common-white); border-color: rgba(255, 255, 255, .55); } .header-sticky .tt-mobile-theme-toggle .tt-theme-toggle { color: var(--tg-common-black); border-color: var(--tg-border-1, #e1e1e1); } /* --- reviews widget credit line --- */ .tt-widget-credit { margin-top: 16px; font-size: 12px; opacity: .65; } .tt-widget-credit a { color: inherit; text-decoration: underline; display: inline-flex; align-items: center; gap: 4px; } .tt-widget-credit-mark { width: 14px; height: 14px; border-radius: 3px; } /* --- enquiry form: Adults/Children are the only fields that lose all context once filled in (a plain number with no unit is meaningless — "Your name"/"Budget…" etc. stay legible via their own placeholder text even when a browser autofills a value, but "2" alone tells no one anything) — give just those two a small persistent label above the box */ .tt-input-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; color: var(--tg-grey-4, #767676); } /* --- packages booking bar: single "Tour" tab only, keep fields readable --- */ .tg-booking-form-tabs .nav-links:not(#nav-platform-tab) { display: none; } .tg-filter-price-input .input, .tg-filter-price-in .input { min-width: 84px; } .tg-filter-price-input form { flex-wrap: wrap; gap: 8px; } /* --- homepage hero booking widget (Destinations/Check in/Check out/Guest): the theme only drops these fields to width:100% below 576px — from 576 to 767px they're a fixed 200px each, which is wider than the card holding them on most phones (especially landscape/phablet), pushing the row past the card edge. Stack them cleanly, full-width, for the whole phone range. --- */ @media (max-width: 767.98px) { .tg-booking-form-input-group { flex-direction: column; align-items: stretch !important; } .tg-booking-form-parent-inner { width: 100% !important; margin-right: 0 !important; } .tg-booking-add-input-field, .tg-booking-add-input-date .input { width: 100% !important; box-sizing: border-box; } .tg-booking-form-location-list { width: 100%; } } /* --- package detail gallery: main image + thumbs sit tight --- */ .tg-tour-details-gallery-slider-wrap { max-width: 860px; } .tg-tour-details-gallery-active .swiper-slide img { height: 440px; object-fit: cover; border-radius: 12px; } .tg-tour-details-gallery-active.pb-20 { padding-bottom: 0 !important; } .tg-tour-details-gallery-thumb-active { margin-top: 12px; } .tg-tour-details-gallery-thumb-active .swiper-slide img { height: 88px; object-fit: cover; border-radius: 8px; cursor: pointer; } .tg-tour-details-gallery-thumb-active .swiper-slide-thumb-active img { outline: 2px solid var(--tg-theme-primary, #1a78d0); } /* --- inline SVG map from Google embed --- */ .tg-tour-about-map iframe, .tg-contact-map iframe, .tg-contact-map { width: 100%; min-height: 420px; border: 0; border-radius: 12px; } /* --- don't title-case real data (emails, urls, addresses) --- */ .tg-contact-info-wrap .item a, .tg-contact-info-wrap .item span, .offCanvas__side-info .contact-list p, .offCanvas__side-info a, .tg-tour-details-location a, a[href^="mailto:"], a[href^="tel:"] { text-transform: none; } /* --- wishlist heart toggle state --- */ /* saved heart: real red, and actually filled — tt.js swaps fa-regular -> fa-solid (Font Awesome picks outline/filled by class prefix, so font-weight did nothing). .tt-pop is added on click only, so already-saved hearts don't re-animate on load. */ .tg-listing-item-wishlist a.is-saved, .tg-tour-details-video-share a.is-saved { color: #ff2d46; } .tt-heart, a .fa-heart { display: inline-block; transition: color .2s; } /* listing-card hearts are inline SVG outlines (fill="none"), not Font Awesome — so "saved" must fill the shape itself */ .tg-listing-item-wishlist a svg path { transition: fill .2s ease, stroke .2s ease; } .tg-listing-item-wishlist a:hover { color: #ff2d46; } .tg-listing-item-wishlist a.is-saved svg path { fill: currentColor; } .tg-listing-item-wishlist a svg { overflow: visible; } .tg-listing-item-wishlist a svg.tt-pop { animation: tt-heart-pop .5s cubic-bezier(.2, .9, .3, 1.3); transform-origin: 50% 55%; } @keyframes tt-heart-pop { 0% { transform: scale(.5); } 40% { transform: scale(1.45); } 70% { transform: scale(.92); } 100% { transform: scale(1); } } .fa-heart.tt-pop { animation: tt-heart-pop .5s cubic-bezier(.2, .9, .3, 1.3); } /* dark mode: the root invert+hue-rotate can't hand back a saturated red like #ff2d46 (channels clip, and a second re-invert only makes it duller). #fe5c5c is a near fixed point of that filter — it comes out ~rgb(255,94,94) whether it passes through once or twice — so it stays a clear red on the dark page. */ html[data-theme="dark"] .tg-listing-item-wishlist a.is-saved, html[data-theme="dark"] .tg-tour-details-video-share a.is-saved, html[data-theme="dark"] .tg-listing-item-wishlist a:hover { color: #fe5c5c; } /* --- header search overlay: live-filtered package cards --- */ .search__popup.search-opened { bottom: 0; height: 100%; overflow-y: auto; } .search__popup .tt-results { max-height: 62vh; overflow-y: auto; margin-top: 26px; } .search__popup .tt-results .row { margin: 0 -8px; } .search__popup .tt-card { display: block; padding: 8px; } .search__popup .tt-card .inner { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 10px; transition: border-color .15s; } .search__popup .tt-card:hover .inner, .search__popup .tt-card.tt-active .inner { border-color: var(--tg-theme-primary, #1a78d0); } .search__popup .tt-card img { width: 92px; height: 62px; object-fit: cover; border-radius: 8px; flex: none; } .search__popup .tt-card h6 { margin: 0 0 3px; font-size: 15px; } .search__popup .tt-card span { font-size: 13px; opacity: .7; } .search__popup .tt-empty { padding: 30px; text-align: center; opacity: .6; } .search-input-field { width: 100%; } /* --- homepage isotope grid: normal flow when JS lays it out --- */ .project-menu-active, .tg-listing-menu-wrap { display: none; } /* --- testimonials: consistent avatar, default placeholder --- */ .tg-testimonial-avatar-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; } /* --- sliders rebuilt for a small CMS: centre the few items, no dead space --- */ .tg-testimonial-slider.tt-few .swiper-wrapper { justify-content: center; } .tg-testimonial-slider.tt-few .swiper-slide { height: auto; } .tg-testimonial-slider .swiper-slide { display: flex; } .tg-testimonial-slider .tg-testimonial-item { width: 100%; } .tg-tour-details-gallery-thumb-active.tt-few .swiper-wrapper { justify-content: center; } .tg-tour-details-gallery-active .swiper-slide-active img { border-radius: 12px; } .tg-tour-details-gallery-navigation button { cursor: pointer; } /* hero: keep the caption legible while the images cross-fade */ .tg-hero-slider-active .swiper-slide { background-position: center; background-size: cover; } /* perf: main.css's zoom keyframe (scale 1→1.1→1, 20s) runs on EVERY slide's .tg-hero-thumb unconditionally, not just the visible one. With loop mode duplicating slides, that's several full-viewport 4K background layers all continuously animating/compositing at once even though only one is ever shown (fade effect keeps the rest at opacity 0, not display:none) — real, wasted GPU work behind every scroll/repaint, worse still in dark mode where each one also sits inside the page's own filter. Only the active slide needs to actually be running the animation. */ .tg-hero-thumb { animation: none; transform: scale(1); } /* hero rhythm: a slide's photo pushes in over ~1.5 s the moment it becomes active (the footage dissolves in over it after about a second — assets/js/tt.js), then keeps drifting slowly. Only the active slide animates. */ .tg-hero-slider-active .swiper-slide-active .tg-hero-thumb { animation: tt-hero-push 1.5s cubic-bezier(.16, .8, .3, 1) both, tt-hero-drift 22s ease-in-out 1.5s infinite alternate; will-change: transform; } @keyframes tt-hero-push { from { transform: scale(1); } to { transform: scale(1.1); } } @keyframes tt-hero-drift { from { transform: scale(1.1); } to { transform: scale(1.17); } } @media (prefers-reduced-motion: reduce) { .tg-hero-slider-active .swiper-slide-active .tg-hero-thumb { animation: none; } } /* --- homepage listing price badge: real (longer) prices were overflowing the fixed-width ribbon and spilling over its diagonal edge. Stack amount / unit instead of side-by-side so only the widest single line has to fit. --- */ .tg-listing-card-price-wrap.price-bg { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; } .tg-listing-card-price-wrap.price-bg .tg-listing-card-currency-amount { font-size: 16px; line-height: 1.3; margin-right: 0; white-space: nowrap; } .tg-listing-card-price-wrap.price-bg .tg-listing-card-activity-person { font-size: 9px; line-height: 1.2; } /* about-page "Where We Take You" banner: it also carries .tg-grey-bg, whose `background:` shorthand resets size/position to auto / 0 0 and beats the theme's .include-bg cover rule — so the photo only ever spanned its own 1920px width and left a blank strip on any wider screen. Re-assert cover. */ .tg-banner-area.tg-grey-bg.include-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } /* ================= Brand blue replaces the theme's purple (both modes) ================= The template's accent is a purple (#560CE3). The brand is the logo's blue, so the accent variable — which ~190 rules across main.css read — becomes a blue that still clears ~4.5:1 with white text (the logo's own light #5FB3FF is only 2.2:1, fine for the hero/price accents it's already used on, too pale for text and small buttons). Dark mode re-points the same variable at a pre-compensated value (see below) so it lands on the light logo blue on screen. */ :root { --tg-theme-primary: #1a78d0; --tg-grey-8: #f3f7fc; /* was a lavender-grey (#f6f4fa) */ --tt-blue-tint: #e3f0fc; /* pale blue chip/button fill — replaces the lavender tints */ } /* inline SVGs drawn with the literal purple (About page icon cards, search icons) */ svg [fill="#560CE3"], svg [fill="#560ce3"] { fill: var(--tg-theme-primary); } svg [stroke="#560CE3"], svg [stroke="#560ce3"] { stroke: var(--tg-theme-primary); } /* lavender tints hard-coded behind buttons / icon chips / tags */ .tg-btn-transparent, .tg-btn-su-transparent, .tg-listing-avai-btn, .tg-chose-6-wrap .icon, .tg-process-list .tg-chose-list-icon, .tg-blog-sidebar-tag-list ul li a, .tg-tour-details-video-feature-list ul li .icon, .tg-pricing-btn .tg-btn, .tg-team-social a, .tg-section-su-subtitle, .tg-section-su-subtitle.su-subtitle-2 { background: var(--tt-blue-tint); } /* nav: dropdown hover + hero-transparent hover/active tints were pale purples */ .tgmenu__navbar-wrap ul li .sub-menu li:hover > a, .tgmenu__navbar-wrap ul li .sub-menu li.active > a { color: var(--tg-theme-primary); } /* (scoped to the not-yet-sticky transparent header: the same selector in main.css also drives the opaque inner-page header, where a pale tint would vanish on white) */ .tg-transparent:not(.header-sticky) .tgmenu__navbar-wrap > ul > li.active > a, .tg-transparent:not(.header-sticky) .tgmenu__navbar-wrap > ul > li:hover > a { color: #cfe6ff; } /* ================= Light / dark mode ================= */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* the theme's default accent (--tg-theme-primary, #1a78d0, a blue-purple) drives ~190 rules across main.css — buttons, underlines, borders, hover states, the cookie/enquire buttons, etc. None of those are individually exempted from the root invert below, so on screen it was never actually showing as purple: invert(1) hue-rotate(180deg) turns #1a78d0 into a washed-out pink/magenta (rgb 255,180,255). Rather than exempting ~190 scattered rules, redefine the variable itself to a pre-compensated value — #1165B1 — chosen so that after the SAME filter it lands back on exactly the site's own brand blue (#5FB3FF, the logo's icon colour, already used for buttons/price banners elsewhere). One variable change fixes every element that reads it, site-wide, desktop and mobile alike. */ html[data-theme="dark"] { --tg-theme-primary: #1165B1; } html[data-theme="dark"] { filter: invert(1) hue-rotate(180deg); } /* re-invert real photography, video and embedded 3rd-party widgets so they stay true-to-life instead of looking like photo negatives */ html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] iframe, html[data-theme="dark"] .include-bg, html[data-theme="dark"] .tg-hero-thumb, html[data-theme="dark"] .tt-promo-img, html[data-theme="dark"] .tt-flag, html[data-theme="dark"] .tt-whatsapp-bubble { filter: invert(1) hue-rotate(180deg); } /* .tg-hero-top-shadow only needs its OWN re-invert on the homepage hero, where it's a sibling of the (separately re-inverted) slide background — two filter passes total (its own + html's), which cancel out correctly. On every breadcrumb page it's instead nested INSIDE the .include-bg banner div, which is ALSO re-inverted — adding a re-invert here too gave it three passes (own + include-bg's + html's), an odd number that does NOT cancel out, so it rendered as a pale wash instead of staying invisible/black. .tg-breadcrumb-shadow only ever appears in that nested position, so it must never get its own filter at all. */ html[data-theme="dark"] .tg-hero-area .tg-hero-top-shadow { filter: invert(1) hue-rotate(180deg); } /* same odd-pass trap for any nested inside an .include-bg block (the footer wordmark is the visible case): its own generic re-invert + the parent's + the root's = 3 passes, which nets out to ONE inversion — a white wordmark came out near-black on the footer photo. Drop the img's own pass so only the parent's + root's remain (2 = true colour). */ html[data-theme="dark"] .include-bg img { filter: none; } /* the footer's photo is a purple (hue ~262°) baked into the JPG, so no colour variable can reach it — footer-grey.jpg is the same artwork desaturated to a neutral dark grey (no colour cast at all), used in both modes. It has its own filename on purpose: replacing a file in place leaves CDN/browser caches serving the old copy for days. !important because .include-bg sets the original inline. */ .tg-footer-area { background-image: url(../img/footer/footer-grey.jpg) !important; } /* same for the "Ready when you are" banner: banner-blue.jpg is a new filename on purpose — replacing banner.jpg in place left CDN/browser caches (7-day max-age) serving the old purple copy to some visitors. */ .tg-cta-wrap { background-image: url(../img/cta/banner-blue.jpg) !important; } .tt-flag { display: inline-block; } /* brand-colour overrides below (hero CTA blue, Browse-button yellow, price banner blue) are flat CSS colours, not photos, so none of them were on the re-invert list above — the root filter was quietly shifting each one to an off, muddy tone (and flipping their white text to black) instead of leaving the real brand colour alone. Re-invert each one back to true. */ html[data-theme="dark"] .tg-hero-btn-box .tg-btn, html[data-theme="dark"] .tg-listing-card-price-wrap.price-bg, html[data-theme="dark"] .tg-listing-2-price { filter: invert(1) hue-rotate(180deg); } /* "Browse": the logo yellow (#FFC95C) can't survive the dark-mode filter — invert + hue-rotate clip a saturated yellow, so a double-inverted copy came out pale peach (rgb 246,192,145). The closest gold the filter can actually reach is ~rgb(220,162,82), which a single pass produces from #8a5000 (text #e8e8e8 lands on near-black). */ html[data-theme="dark"] .tg-booking-form-search-btn .bk-search-button { background: #8a5000; color: #e8e8e8; } /* main.css hardcodes a pale lavender (#f0e9ff / #f5efff / #f4eeff) as the tint behind several buttons and icon chips — light-mode-only by design. Under the root filter that flips to a dark PURPLE (rgb 23,16,38), which is the purple left over on the "View packages" button in the About section. #c6dcf8 is a pale blue pre-compensated to land on a dark blue tint (rgb 18,40,68) on screen, matching the blue accent everywhere else. */ html[data-theme="dark"] .tg-btn-transparent, html[data-theme="dark"] .tg-listing-avai-btn, html[data-theme="dark"] .tg-chose-6-wrap .icon, html[data-theme="dark"] .tg-process-list .tg-chose-list-icon, html[data-theme="dark"] .tg-blog-sidebar-tag-list ul li a, html[data-theme="dark"] .tg-tour-details-video-feature-list ul li .icon, html[data-theme="dark"] .tg-pricing-btn .tg-btn, html[data-theme="dark"] .tg-team-social a, html[data-theme="dark"] .tg-section-su-subtitle { background: #c6dcf8; } /* transparent header (over the hero photo, before scrolling): the theme hardcodes this state's text/icons to white — correct in light mode, but not exempted from the page filter, so in dark mode it silently inverts to black and goes unreadable against the (still true-colour) photo behind it. Re-invert it back, but ONLY while not yet sticky — the sticky state's black-on-white styling already self-corrects to white-on-dark once its own (unexempted) white background inverts to dark, so re-inverting it too would cancel that out and turn the text invisible again. Scoped to .tg-transparent specifically (the homepage-style hero header) — every inner page (packages, package, guides, about, faq, contact) reuses the same #header-sticky id for its OWN, always-opaque header, which is hardcoded dark-on-white from the start and never was white-on-photo. That variant needs no re-invert at all: it should just take the single root invert like normal content and self-correct to light-on-dark. Matching it here too was re-inverting it back to its true dark colour, making the inner-page nav links/hamburger/search/theme-toggle invisible against their own (correctly, singly-inverted) now-dark header background. */ html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tgmenu__navbar-wrap > ul > li > a, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tg-header-contact-number, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tg-header-contact-icon, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tg-btn-header, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tg-header-border, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tgmenu-offcanvas-open-btn span, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tg-header-btn .search-open-btn, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tg-header-btn .tt-theme-toggle, html[data-theme="dark"] #header-sticky.tg-transparent:not(.header-sticky) .tt-mobile-theme-toggle .tt-theme-toggle { filter: invert(1) hue-rotate(180deg); } /* Top-level links only. This list used to say `.tgmenu__navbar-wrap ul li a`, which is every link at any depth — so the dropdown's own links were re-inverted back to dark text while the dropdown panel itself (white in light mode) is NOT re-inverted and goes black: dark text on a black panel, i.e. an "empty" About / Destinations menu. Dropdown links now take the plain single invert like the panel, so they read white-on-black. The header's Enquire pill, its "Favorites" label and the vertical divider were also missing here and rendered dark on the photo. */ /* Dropdowns open on click / tap / keyboard as well as hover (tt.js adds .tt-open / .tt-shut). */ .tgmenu__navbar-wrap ul li.tt-open > .sub-menu { opacity: 1; visibility: visible; transform: scale(1); } .tgmenu__navbar-wrap ul li.tt-shut > .sub-menu { opacity: 0 !important; visibility: hidden !important; transform: scale(1, 0) !important; } .tgmenu__main-menu li.menu-item-has-children > a { cursor: pointer; } .tgmenu__main-menu li.menu-item-has-children > a::after { transition: transform .2s ease; } .tgmenu__main-menu li.menu-item-has-children.tt-open > a::after { transform: rotate(180deg); } /* same story for the homepage hero's overlaid title/subtitle/price text — always white-on-photo by design, not part of the header so no sticky state to worry about */ html[data-theme="dark"] .tg-hero-subtitle, html[data-theme="dark"] .tg-hero-title, html[data-theme="dark"] .tg-hero-para, html[data-theme="dark"] .tg-hero-price-wrap p, html[data-theme="dark"] .tg-hero-price { filter: invert(1) hue-rotate(180deg); } /* .tg-hero-price (the ₹ / amount / "Per Person" spans) was the one piece of that hero price line missing from the list — its sibling "Starting from" label stayed true white while the big number went black. Its spans are plain children, so one filter on the wrapper covers all three. */ /* the logo is a plain , so it's already covered by the generic re-invert rule above — the double-invert round-trips its blue mark and white/dark wordmark text losslessly; only the small yellow accent dot drifts to a slightly paler gold, an acceptable trade for keeping the real brand colour instead of falling back to a flat-white version. EXCEPT for .logo-2 (tt-logo.png) once the header is sticky: that variant's wordmark is a dark navy rgb(45,73,110), drawn for a white sticky bar — not near-black, so a single root invert doesn't turn it clean white either, just a washed-out grey-tan that's still low-contrast (this was tried first; still hard to read, especially at mobile sizes). Simplest correct fix: in dark mode, don't switch logos at all — keep showing .logo-1 (tt-logo-light.png, a TRUE white wordmark already, same asset used pre-scroll) even once .header-sticky would normally swap to .logo-2. It's already covered by the generic double-invert above, so this needs no filter math of its own. */ html[data-theme="dark"] .header-sticky .logo-1 { display: block !important; } html[data-theme="dark"] .header-sticky .logo-2 { display: none !important; } /* every other spot the dark-wordmark logo appears (inner-page header, the mobile menu and off-canvas panels) is emitted as a pair of images by build_partials.php — show the white-wordmark one in dark mode */ .tt-logo-dm { display: none; } html[data-theme="dark"] .tt-logo-dm { display: inline-block; } html[data-theme="dark"] .tt-logo-lm { display: none; } .tt-mobile-theme-toggle { display: inline-flex; align-items: center; margin-right: 14px; } /* on phones (< 576px) .tg-header-menu-bar holds the mobile theme toggle and the hamburger button side by side, but the div has no layout rule of its own — it falls back to block, so its inline children wrap onto their own line the moment the row runs a little tight, stacking the toggle above the hamburger instead of next to it. Force them to stay on one row. */ .tg-header-menu-bar { display: flex; align-items: center; flex-wrap: nowrap; } /* theme toggle — one icon, sun/moon swap by mode */ .tt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 10px; flex: none; border-radius: 50%; border: 1px solid var(--tg-border-1, #e1e1e1); background: transparent; color: inherit; cursor: pointer; font-size: 15px; padding: 0; } .tt-theme-toggle:hover { border-color: var(--tg-theme-primary, #1a78d0); color: var(--tg-theme-primary, #1a78d0); } .tt-theme-toggle svg { display: block; } .tt-theme-toggle .tt-icon-sun { display: none; } html[data-theme="dark"] .tt-theme-toggle .tt-icon-sun { display: block; } html[data-theme="dark"] .tt-theme-toggle .tt-icon-moon { display: none; } /* decorative background "shape" watermarks (map/line-art PNGs behind the listing, chose, location and blog sections, etc.) are pale grey line art drawn to sit almost invisibly on a light page background. The root invert flips their section's light background to black but leaves the watermark itself looking like bold, high-contrast line art on top of real content — harsh instead of the subtle texture it was designed to be. They carry no information (alt="" / decorative), so just dim them steeply in dark mode rather than trying to re-invert them back to their "true" pale colour. */ html[data-theme="dark"] .tg-listing-shape, html[data-theme="dark"] .tg-listing-shape-2, html[data-theme="dark"] .tg-listing-shape-3, html[data-theme="dark"] .tg-chose-shape, html[data-theme="dark"] .tg-chose-shape-2, html[data-theme="dark"] .tg-chose-6-shape, html[data-theme="dark"] .tg-location-shape, html[data-theme="dark"] .tg-blog-shape, html[data-theme="dark"] .tg-blog-shape-2, html[data-theme="dark"] .tg-about-details-shape, html[data-theme="dark"] .tg-team-shape-2, html[data-theme="dark"] .tg-cta-price-shape, html[data-theme="dark"] .tg-cta-price-shape-2 { opacity: 0.08; } /* --- cards: 2 per row on phones, everywhere .tg-grid-full is used (packages listing, homepage package grid + related-tours + destinations + guides teaser) --- */ @media (max-width: 767.98px) { .tg-listing-grid-wrap .tg-grid-full, .row .tg-grid-full { flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; /* the homepage grid is absolute-positioned by Isotope (percentPosition), which ignores flex-basis on its items — an explicit width is what Isotope actually measures/renders against */ width: 50%; } .tg-grid-full .tg-listing-card-item { margin-bottom: 14px; } .tg-grid-full .tg-listing-2-price .new, .tg-grid-full .tg-listing-card-price .new { font-size: 15px; } .tg-grid-full .tg-listing-card-content, .tg-grid-full .tg-listing-2-card-content { padding: 12px; } .tg-grid-full .tg-listing-card-title, .tg-grid-full .tg-listing-2-title { font-size: 15px; line-height: 1.3; } .tg-grid-full .tg-listing-avai-btn { padding: 6px 12px; font-size: 12px; } .tg-grid-full .tg-listing-card-meta-list, .tg-grid-full .tg-listing-card-location { font-size: 12px; } /* star rating: at half-card width the 5 icons + "(0 reviews)" text no longer fit on one line and wrap one-per-line; every package is at 0 reviews right now anyway, so just drop it on the compact mobile card */ .tg-grid-full .tg-listing-card-review { display: none; } /* destination cards (homepage "Where we take you") */ .tg-grid-full .tg-location-title { font-size: 15px; } .tg-grid-full .tg-location-time { font-size: 11px; } /* guide/blog teaser cards (homepage "Travel guides") */ .tg-grid-full .tg-blog-content { padding: 12px; } .tg-grid-full .tg-blog-title { font-size: 15px; line-height: 1.3; } .tg-grid-full .tg-blog-meta span { font-size: 11px; } .tg-grid-full .tg-blog-content p { font-size: 13px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .tg-grid-full .tg-blog-btn { font-size: 13px; } } /* --- homepage "about" thumbs: hide on phones (two stacked photos don't leave room for the copy next to them at this width) --- */ @media (max-width: 767.98px) { .tg-about-thumb-wrap { display: none; } } /* --- founder's note (about page) --- */ .tt-founder-thumb-wrap img { aspect-ratio: 1 / 1; object-fit: cover; max-width: 260px; margin: 0 auto; display: block; } .tt-founder-note { font-size: 18px; line-height: 1.6; font-style: italic; position: relative; padding-left: 22px; border-left: 3px solid var(--tg-theme-primary, #1a78d0); } .tt-founder-signoff span { opacity: .7; } /* --- package-detail title price line: the big price sat flush against "Per Person" with no breathing room (theme only gave it margin-left) --- */ .tg-tour-details-video-feature-price p span { margin-right: 8px; } /* --- country scroller: centring the active chip can leave a neighbour sliced in half at the edge — fade it out instead of hard-clipping it --- */ .tt-country-scroll { scroll-padding-inline: 26px; padding-left: 26px; padding-right: 26px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } /* --- guest picker dropdown: real adult/child steppers in the theme's own .tg-quantity panel (which shipped CSS but no content) --- */ [data-tt-guestpanel] .tt-guest-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px; } [data-tt-guestpanel] .tt-guest-row + .tt-guest-row { border-top: 1px solid #eee; } .tt-stepper { display: flex; align-items: center; gap: 10px; } .tt-stepper button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; } .tt-stepper button:hover { border-color: var(--tg-theme-primary, #1a78d0); color: var(--tg-theme-primary, #1a78d0); } .tt-stepper .tt-step-val { min-width: 16px; text-align: center; font-weight: 600; } [data-tt-guestpanel] .tt-guest-row em { display: block; font-style: normal; font-size: 11px; opacity: .55; margin-top: 1px; } [data-tt-guestpanel] .tt-guest-note { font-size: 11.5px; opacity: .6; margin: 8px 6px 0; padding-top: 8px; border-top: 1px solid #eee; } /* --- country filter: horizontal, scrollable, active chip auto-centres --- */ .tt-country-scroll { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 10px; margin-bottom: 18px; scroll-behavior: smooth; } .tt-country-scroll::-webkit-scrollbar { display: none; } .tt-country-scroll a { flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; border-radius: 999px; border: 1px solid #e3e3e8; background: #fff; color: inherit; font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s, color .15s; } .tt-country-scroll a:hover { border-color: var(--tg-theme-primary, #1a78d0); } .tt-country-scroll a.is-active { background: var(--tg-theme-primary, #1a78d0); border-color: var(--tg-theme-primary, #1a78d0); color: #fff; } /* --- "Watch clip" link in the itinerary --- */ a.tt-video:not(.tg-video-play) { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--tg-theme-primary, #1a78d0); } a.tt-video i { font-size: 1.05em; } /* --- YouTube lightbox --- */ .tt-video-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; } .tt-video-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 20, .82); } .tt-video-box { position: relative; width: min(960px, 92vw); } .tt-video-frame { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; } .tt-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .tt-video-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #111; font-size: 22px; line-height: 1; cursor: pointer; } /* --- 10% off popup: edge-to-edge photo, X close, name+phone --- */ .tt-promo-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 16px; } .tt-promo-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 20, .78); } .tt-promo-box { position: relative; z-index: 1; width: min(760px, 100%); max-height: 90vh; overflow: hidden; background: var(--tg-common-white); border-radius: 16px; display: flex; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); } .tt-promo-img { flex: 1 1 45%; background-size: cover; background-position: center; min-height: 320px; } .tt-promo-body { flex: 1 1 55%; padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; } .tt-promo-body h3 { font-size: 24px; } .tt-promo-body .input { width: 100%; } .tt-promo-fine { font-size: 11px; opacity: .65; margin: 14px 0 0; } .tt-promo-fine a { text-decoration: underline; } .tt-promo-msg { font-size: 13px; margin: 10px 0 0; min-height: 1em; } .tt-promo-msg.is-ok { color: #16a34a; } .tt-promo-msg.is-err { color: #dc2626; } .tt-promo-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; font-size: 20px; line-height: 1; cursor: pointer; } @media (max-width: 700px) { .tt-promo-box { flex-direction: column; max-height: 92vh; overflow-y: auto; } .tt-promo-img { min-height: 160px; } .tt-promo-body { padding: 24px 20px; } } /* --- accessible/SEO-only heading text: present in the DOM (for screen readers and search engines) without taking up visual space — used where the design has no room for a visible page title (e.g. the packages listing, which opens straight into the booking bar) --- */ .tt-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* --- date pickers (Check in/out, package enquiry dates): flatpickr's calendar popup is a fixed 307.875px wide, position:absolute, with no responsive handling at all — on a narrow phone it can extend past the input's edge and off the side of the screen. Cap it to the viewport and centre it instead of letting flatpickr's own left-offset math place it. --- */ @media (max-width: 480px) { .flatpickr-calendar { width: 300px !important; max-width: calc(100vw - 24px) !important; left: 50% !important; transform: translateX(-50%); } } /* --- fullscreen preloader: favicon mark + wordmark instead of the theme's abstract spinner shape, on the same #loading fullscreen overlay/fade-out the theme already drives (main.js: $("#loading").fadeOut(500) on window load) — only what's INSIDE it changed. tt.js picks one of 3 animations at random per page load ("random animations of the logo"). --- */ .tt-preloader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .tt-preloader-logo { width: 64px; height: 64px; display: block; margin: 0 auto 12px; } .tt-preloader-text { display: block; font-family: var(--tg-ff-heading, inherit); font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--tg-theme-primary, #1a78d0); } @keyframes tt-preload-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes tt-preload-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes tt-preload-spin-pop { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } } .tt-anim-blink .tt-preloader-logo { animation: tt-preload-blink 0.9s ease-in-out infinite; } .tt-anim-pulse .tt-preloader-logo { animation: tt-preload-pulse 0.9s ease-in-out infinite; } .tt-anim-spin .tt-preloader-logo { animation: tt-preload-spin-pop 1.1s ease-in-out infinite; } .tt-anim-blink .tt-preloader-text, .tt-anim-pulse .tt-preloader-text, .tt-anim-spin .tt-preloader-text { animation: tt-preload-blink 1.4s ease-in-out infinite; animation-delay: .15s; } /* --- WhatsApp bubble: stacked directly above the scroll-top button, same right edge, same size/breakpoints (see .scroll__top / .scroll__top.open in main.css — 50px/right:50px/bottom:30px desktop, 35px/15px/15px mobile). --- */ .tt-whatsapp-bubble { position: fixed; right: 50px; bottom: 92px; /* scroll-top's 30px + its 50px height + 12px gap */ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #25D366; color: #fff; font-size: 24px; z-index: 99; box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: transform .2s ease; } .tt-whatsapp-bubble:hover { color: #fff; transform: scale(1.08); } @media (max-width: 1500px) { .tt-whatsapp-bubble { right: 25px; } } @media (max-width: 575px) { .tt-whatsapp-bubble { right: 15px; bottom: 60px; width: 35px; height: 35px; font-size: 18px; } } /* --- carousel nav buttons: the visible circle is only 45px and sits right at the slide edge, so on touch it's easy to miss — pad the real hit area without changing how it looks (both are already position:absolute from the theme, which is itself a valid containing block for this ::before). --- */ .tg-hero-next, .tg-hero-prev, .tg-tour-details-gallery-next, .tg-tour-details-gallery-prev { cursor: pointer; } .tg-hero-next::before, .tg-hero-prev::before, .tg-tour-details-gallery-next::before, .tg-tour-details-gallery-prev::before { content: ""; position: absolute; inset: -8px; } /* --- Destinations dropdown: "Domestic Packages" + the "International" label stay pinned while the (potentially long) country list scrolls beneath them — one flat