/* ============================================================ RAG Tours , Shared mobile stylesheet [BUILD m12-signin] Loaded LAST in so it overrides scattered page CSS. Covers: top-bar spacing, promo ticket on mobile, premium slide-in menu, responsive booking modal, sticky package footer, promotions placement, and mobile-first base polish. Scoped to small screens so desktop is untouched. ============================================================ */ /* ---------- 0. Base mobile hygiene ---------- */ @media (max-width: 1080px) { html { -webkit-text-size-adjust: 100%; } img, video { max-width: 100%; height: auto; } /* Firm horizontal lock , no left/right drift on any page */ html, body { overflow-x: hidden !important; max-width: 100%; } /* Stop any single element from forcing the page wider than the screen */ .wrap, section, header, footer, .hero, .hero-wrap, .hero-inner, .dock, main, .pd-body, .pd-grid { max-width: 100%; } /* common offenders: absolutely-positioned wide panels off-screen */ .mega, .mega.wide, .item .mega-inner { min-width: 0 !important; } /* 16px inputs everywhere on mobile so iOS never zooms on focus */ input, select, textarea { font-size: 16px !important; } } /* ============================================================ 1. TOP BAR , fix the cramped logo / sign-in / hamburger row ============================================================ */ @media (max-width: 1080px) { /* the header inner row: give items room and vertical centering */ header.site .bar, header.site > .wrap, header.site .hdr-inner { align-items: center; } .brand { flex: 0 0 auto; } .brand img { height: 40px; } .hdr-cta { gap: 12px; align-items: center; } /* Sign in = one clean circular icon button across ALL mobile widths. The label is a BARE text node in the live markup (no .si-tx wrapper), so we collapse it with font-size:0 on the link itself. The SVG is sized in px, so it is unaffected. Self-contained so the desktop pill rules cannot leak in and break it. */ .hdr-signin { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; padding: 0 !important; gap: 0 !important; margin-left: 4px !important; border-radius: 50% !important; flex: 0 0 auto !important; background: var(--blue, #1273E6) !important; border: none !important; color: #fff !important; font-size: 0 !important; /* collapse the bare "Sign in" text node */ line-height: 0 !important; white-space: nowrap !important; overflow: visible !important; box-shadow: 0 4px 12px -4px rgba(18,115,230,.5) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; } .hdr-signin:hover, .hdr-signin:active { background: var(--blue-ink, #0B3D7A) !important; transform: none !important; } /* belt and suspenders: if a .si-tx wrapper IS present, hide it too */ .hdr-signin .si-tx { display: none !important; } .hdr-signin .si-ic { width: 21px !important; height: 21px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; } .hdr-signin .si-ic svg { width: 21px !important; height: 21px !important; display: block; stroke: #fff; } /* clear separation from the hamburger so they never collide */ .hdr-cta { gap: 12px !important; } .menu-toggle { flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; } } /* ============================================================ 2. PROMO BAR , show the offer, drop the phone, tidy spacing (issue: phone not needed on mobile top bar; promo IS needed) ============================================================ */ @media (max-width: 768px) { .anbar { font-size: .8rem; } .anbar .wrap { height: auto; min-height: 38px; flex-direction: row; justify-content: center; gap: 8px; padding: 6px 12px; } /* SHOW the promo announcement (was hidden before) */ .anbar .left { display: flex !important; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; text-align: center; width: auto; } .anbar .left .pill { font-size: .66rem; padding: 2px 9px; } .anbar .left [data-promo-announce] { font-size: .74rem; line-height: 1.3; } /* HIDE the contact block entirely on mobile (no phone/email up top) */ .anbar .right { display: none !important; } } /* ============================================================ 3. PROMO TICKET on mobile (was hidden inside .hero-side) Bring the ticket back, sized for a phone. ============================================================ */ @media (max-width: 1080px) { .hero-side { display: flex !important; width: 100% !important; margin: 22px auto 4px; justify-content: center; } .hero-side .ticket { width: min(92vw, 380px); } /* if any page hides an empty hero-side, keep that behaviour */ .hero-side:empty { display: none !important; } } @media (max-width: 420px) { .hero-side .ticket .tk-num { font-size: 2.4rem; } } /* ============================================================ 4. PREMIUM SLIDE-IN MENU (app-like panel from the right) markup: .drawer > .dwr-head / .dwr-scroll / .dwr-foot ============================================================ */ @media (max-width: 1080px) { /* No ::before backdrop , a transformed .drawer traps negative z-index, which was making the panel look shaded. Use a huge spread box-shadow on the open panel to dim the rest of the screen instead. */ .drawer { inset: 0 0 0 auto; width: min(86vw, 360px); background: #ffffff !important; color: #0A2547; padding: 0; transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.8,.28,1); display: flex; flex-direction: column; overflow: hidden; box-shadow: -24px 0 60px -24px rgba(7, 20, 40, .5); } .drawer.open { transform: none; box-shadow: 0 0 0 100vmax rgba(7, 20, 40, .5), -24px 0 60px -24px rgba(7, 20, 40, .5); } /* header band */ .dwr-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: linear-gradient(135deg, #0A2547, #1273E6); flex: none; } .dwr-title { color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; } .drawer .x { position: static; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 1.5rem; line-height: 1; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .dwr-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 4px; } .dwr-sec { font-family: 'Inter', sans-serif; font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8A94A6; padding: 14px 22px 6px; } /* links , force solid dark text (kills the old white-text rule) */ .drawer a.dwr-link { display: flex; align-items: center; gap: 13px; color: #0A2547 !important; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 1rem; padding: 13px 22px; border: none; text-decoration: none; background: transparent; } .drawer a.dwr-link:active { background: #EAF2FE; } .dwr-ic { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--blue, #1273E6); } .dwr-ic svg { width: 21px; height: 21px; display: block; } .dwr-ic .wa-ico { width: 21px; height: 21px; } .dwr-arr { margin-left: auto; color: #C3CCDA; font-size: 1.3rem; font-weight: 400; line-height: 1; } .drawer a.dwr-contact { display: flex; align-items: center; gap: 12px; margin: 6px 16px; padding: 13px 15px; border-radius: 13px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: .95rem; text-decoration: none; border: none; } .drawer a.dwr-call { background: #EAF2FE; color: #0A2547 !important; } .drawer a.dwr-call .dwr-ic { color: var(--blue, #1273E6); } .drawer a.dwr-wa { background: #E7F8EF; color: #0B7A43 !important; } .drawer a.dwr-wa .wa-ico { width: 20px; height: 20px; } .dwr-foot { flex: none; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #EEF1F6; background: #fff; } .drawer a.dwr-cta { display: flex; width: 100%; justify-content: center; padding: 15px; font-size: 1rem; border-radius: 14px; color: #1a1205 !important; } } /* ============================================================ 5. RESPONSIVE BOOKING MODAL (bottom sheet on phones) ============================================================ */ @media (max-width: 600px) { .bk-ov { padding: 0; align-items: flex-end; } .bk-modal { max-width: 100%; width: 100%; max-height: 88vh; /* leave a strip of backdrop so tap-to-close is obvious */ border-radius: 22px 22px 0 0; animation: bkUp .32s cubic-bezier(.22,.8,.28,1); padding-top: 8px; } @keyframes bkUp { from { transform: translateY(100%); } to { transform: none; } } /* Drag handle , the standard "swipe down / tap to close" affordance */ .bk-modal::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 50px; background: rgba(255,255,255,.55); z-index: 3; } .bk-head { padding: 20px 20px 16px; } .bk-body { padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px)); } .bk-f input, .bk-f select { font-size: 16px; } .bk-pay { padding: 16px; font-size: 1.05rem; } /* Bigger, clearer close button */ .bk-x { top: 12px; right: 14px; width: 40px; height: 40px; font-size: 1.4rem; background: rgba(255,255,255,.28); } .bk-f .rag-cc-wrap { gap: 6px; } .bk-f .rag-cc-wrap > select.rag-cc-select { flex: 0 0 96px !important; width: 96px !important; } } @media (max-width: 768px) and (min-width: 601px) { .bk-modal { max-width: 92vw; } } /* ============================================================ 6. STICKY PACKAGE FOOTER (price + days + Book now) Shows only on the package page on phones. ============================================================ */ @media (max-width: 980px) { .pkg-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; align-items: center; gap: 12px; background: #fff; border-top: 1px solid #E7ECF3; box-shadow: 0 -10px 30px -18px rgba(11,57,122,.5); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); } .pkg-sticky .ps-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .pkg-sticky .ps-price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.18rem; color: #0A2547; } .pkg-sticky .ps-price small { font-weight: 600; font-size: .68rem; color: #6B7280; } .pkg-sticky .ps-days { font-size: .76rem; color: #6B7280; font-weight: 600; white-space: nowrap; } .pkg-sticky .ps-book { margin-left: auto; flex: none; background: linear-gradient(120deg, var(--amber, #FF8A3D), #FF6A3D); color: #fff; border: none; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .98rem; padding: 13px 22px; border-radius: 12px; cursor: pointer; white-space: nowrap; } /* give the page bottom padding so the bar never covers content */ body.has-pkg-sticky { padding-bottom: 76px; } } /* never show the sticky bar on desktop */ @media (min-width: 981px) { .pkg-sticky { display: none !important; } } /* ============================================================ 7. MOBILE-FIRST POLISH (forms, tap targets, spacing) ============================================================ */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } .btn { min-height: 46px; } .lf input, .lf select, .cform input, .cform select { width: 100%; } .cform .row2 { grid-template-columns: 1fr; gap: 10px; } .rag-cc-wrap { gap: 6px; } .rag-cc-wrap > select.rag-cc-select { flex: 0 0 100px !important; width: 100px !important; } } @media (prefers-reduced-motion: reduce) { .drawer, .bk-modal { transition: none !important; animation: none !important; } } /* ============================================================ 8. MOBILE HOMEPAGE , Option 1 (search-first), sticky header Order on phones: header > offer banner > search dock > deals. The big video hero is collapsed; the dock (with its own headline) becomes the hero. Highlights now live inside the deals rail, so the separate chip strip is hidden. Desktop is untouched (everything is inside @media). ============================================================ */ .mob-highlights { display: none; } @media (max-width: 1080px) { /* Sticky white header so it is consistent and readable on every page */ header.site { position: sticky !important; top: 0 !important; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); box-shadow: 0 6px 20px -16px rgba(11,57,122,.6); } header.site .brand .lw { opacity: 0; } header.site .brand .lb { opacity: 1; } header.site nav.main > .item > a { color: var(--ink, #1f2937); } header.site .menu-toggle span { background: var(--ink, #1f2937) !important; } header.site .hdr-signin { color: #fff !important; } /* highlight chip strip is folded into the deals rail now */ .mob-highlights { display: none !important; } /* Reorder the homepage on mobile so SEARCH leads, then DEALS. Scoped to the home page only (body.page-home). */ body.page-home { display: flex; flex-direction: column; min-height: 100vh; } body.page-home > .anbar { order: 1; } body.page-home > header.site { order: 2; } body.page-home > .drawer { order: 0; } body.page-home .hero { order: 3; } /* DEALS first (hero holds the deals rail) */ body.page-home .dock-wrap { order: 4; } /* SEARCH right under the deals */ body.page-home > section:not(.hero), body.page-home > .lead, body.page-home > .insp, body.page-home > .split, body.page-home > .block { order: 5; } body.page-home > footer, body.page-home > .footer { order: 9; } /* Collapse the full-screen video hero. Keep ONLY the deals (.hero-trend). Deals + search share ONE continuous blue band on mobile: the blue carries straight down from the deals through the search area, with the white search card floating on top. No fade to white, no seam. */ body.page-home .hero { min-height: 0 !important; height: auto !important; background: #EAF2FE !important; display: block !important; padding: 0 !important; } body.page-home .hero .hero-video, body.page-home .hero .hero-inner { display: none !important; } body.page-home .hero .hero-trend { display: block; background: transparent !important; padding: 16px 0 0; padding-bottom: 0 !important; } /* Search dock: same blue band continues behind it (no white fade, no gap). The white card keeps its own shadow and radius, untouched. */ body.page-home .dock-wrap { margin-top: 0 !important; padding: 14px 12px 22px !important; background: #EAF2FE !important; } body.page-home .dock { box-shadow: 0 18px 40px -24px rgba(10,61,122,.45); } body.page-home .dock-headline h3 { font-size: 1.18rem; } /* keep the dock compact so it doesn't dominate the first view */ body.page-home .dock-head { margin-bottom: 10px; } body.page-home .dock-foot { font-size: .72rem; } /* the section that follows the search starts clean white again */ body.page-home .dock-wrap + section, body.page-home .dock-wrap + .block { background: #fff; } /* ---- Deal cards: smaller, tighter tags on mobile ---- */ .trend-rail { gap: 12px !important; padding: 4px 2px 14px !important; } .trend-rail .tcard { width: 78vw !important; max-width: 300px; min-height: 200px !important; } .trend-rail .tcard .tco { padding: 12px !important; } /* the category / save badge (Honeymoon, Beach, Save 20%) , noticeably smaller */ .trend-rail .tcard .deal { font-size: .6rem !important; font-weight: 600 !important; padding: 3px 9px !important; letter-spacing: .02em; } .trend-rail .tcard .deal-new { font-size: .58rem !important; letter-spacing: .05em; } /* title + duration + price scaled down to match */ .trend-rail .tcard .tcb .ci { font-size: .92rem !important; line-height: 1.18; } .trend-rail .tcard .tcb .cd-dur { font-size: .72rem !important; margin-top: 2px; } .trend-rail .tcard .tcb .pr { font-size: .76rem !important; margin-top: 2px; } .trend-rail .tcard .tcb .pr b { font-size: .92rem !important; } /* the deals section heading on mobile */ .hero-trend .ht-title { font-size: .98rem !important; } .hero-trend .ht-head { padding: 0 12px; margin-bottom: 8px; } } @media (prefers-reduced-motion: reduce) { .mh-ic, .mh-chip .mh-flag { animation: none; } }