/* ========================================================================== Travel ERP — Public site theme (production design system) --tp (primary) is injected inline from Settings → Branding. ========================================================================== */ :root { --tp: #2563eb; --tp-ink: #0b1220; --tp-dark: #0e1729; --ink: #16213a; --muted: #64748b; --line: #e7ebf3; --bg: #f5f6f8; --card: #ffffff; --r-sm: 12px; --r: 16px; --r-lg: 22px; --sh-sm: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.06); --sh: 0 8px 30px rgba(20,40,80,.10); --sh-lg: 0 20px 50px rgba(20,40,80,.16); --tp-2: color-mix(in srgb, var(--tp) 62%, #0b1730); --tp-acc: #fd7e14; --tp-acc-ink: #fff; --tp-btn: var(--tp); --tp-btn-ink: #fff; } /* derived tokens live on so a preset theme class on recomputes them */ body { --tp-soft: color-mix(in srgb, var(--tp) 12%, #fff); } * { -webkit-font-smoothing: antialiased; } body { background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.6; } /* clip (not hidden) prevents horizontal overflow WITHOUT creating a scroll container, so position:sticky on the header keeps working on every page */ html, body { overflow-x: clip; max-width: 100%; } img { max-width: 100%; } a { color: var(--tp); } h1, h2, h3, h4, h5, .section-t { color: var(--tp-ink); line-height: 1.2; letter-spacing: -.01em; } .section-t { font-weight: 800; } .lead { color: #43506a; } .container { max-width: 1200px; } /* ---------- Buttons ---------- */ .btn { border-radius: 999px; font-weight: 600; padding: .55rem 1.15rem; display: inline-flex; align-items: center; gap: .5rem; justify-content: center; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; } .btn-lg { padding: .8rem 1.7rem; font-size: 1.02rem; } .btn-tp { background: linear-gradient(135deg, var(--tp), var(--tp-2)); color: #fff; border: 0; box-shadow: 0 8px 20px color-mix(in srgb, var(--tp) 34%, transparent); } .btn-tp:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--tp) 42%, transparent); } .btn-outline-tp { border: 1.6px solid color-mix(in srgb, var(--tp) 40%, #fff); color: var(--tp); background: #fff; } .btn-outline-tp:hover { background: var(--tp-soft); color: var(--tp); } .btn-light { border-radius: 999px; font-weight: 600; } .text-tp { color: var(--tp) !important; } .link-more { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--tp); } .link-more:hover { gap: 9px; } /* ---------- Header ---------- */ .site-header { background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); box-shadow: 0 1px 0 var(--line); position: sticky; top: 0; z-index: 1020; } .site-header .navbar { padding-top: .6rem; padding-bottom: .6rem; } .site-header .navbar-brand { font-weight: 800; color: var(--tp-ink); font-size: 1.3rem; letter-spacing: -.02em; } .site-header .nav-link { color: #26324a; font-weight: 600; font-size: .95rem; padding: .5rem .85rem; border-radius: 9px; } .site-header .nav-link:hover { color: var(--tp); background: var(--tp-soft); } .navbar-toggler { border: 0; } .hdr-mob-actions { display: none; } @media (max-width: 767px) { .site-header { box-shadow: 0 2px 16px rgba(15,28,58,.07); } .site-header .navbar { padding-top: .5rem; padding-bottom: .5rem; flex-wrap: nowrap; padding-left: 16px; padding-right: 10px; } /* brand was touching the screen edge */ .site-header .navbar-brand { font-size: 1.06rem; max-width: 66%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0; } .site-header .navbar-brand img { max-height: 34px; } .hdr-mob-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } .hdr-mob-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--tp-ink); cursor: pointer; transition: background .16s, color .16s; } .hdr-mob-btn:hover, .hdr-mob-btn:active { background: var(--tp-soft); color: var(--tp); } .navbar-toggler.hdr-mob-btn { box-shadow: none; } /* dark-header templates → light icons */ .hdr-t4 .hdr-mob-btn, .hdr-t5 .hdr-mob-btn, .hdr-t7 .hdr-mob-btn { color: #fff; } .hdr-t4 .hdr-mob-btn:hover, .hdr-t5 .hdr-mob-btn:active, .hdr-t7 .hdr-mob-btn:hover { background: rgba(255,255,255,.16); color: #fff; } } .hdr-topbar { background: var(--tp-dark); color: #c7d2e6; padding: 7px 0; font-size: .84rem; } .hdr-topbar a { color: #eaf0fb; text-decoration: none; } .nav-drop { position: relative; } .nav-drop-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 210px; box-shadow: var(--sh); border: 1px solid var(--line); border-radius: 14px; padding: 8px; z-index: 1030; } .nav-drop:hover .nav-drop-menu { display: block; } .nav-drop-menu a { display: block; padding: 9px 12px; color: #26324a; text-decoration: none; font-weight: 600; border-radius: 9px; } .nav-drop-menu a:hover { color: var(--tp); background: var(--tp-soft); } /* ============================================================ PREMIUM MOBILE MENU DRAWER (slide-in, theme-independent) ============================================================ */ .mobmenu-backdrop { position:fixed; inset:0; background:rgba(8,14,28,.5); backdrop-filter:blur(3px); z-index:1190; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; } .mobmenu-backdrop.show { opacity:1; visibility:visible; } .mobmenu { position:fixed; top:0; right:0; height:100dvh; width:86%; max-width:360px; background:#fff; color:#26324a; z-index:1200; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.75,.2,1); box-shadow:-18px 0 55px rgba(6,14,38,.34); overflow:hidden; } .mobmenu.open { transform:none; } .mobmenu:not(.open) { box-shadow:none; } /* closed drawer's shadow was bleeding into the right edge of every mobile page */ .mobmenu-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid #eef1f7; } .mobmenu-brand { font-weight:800; font-size:1.14rem; color:#0f1c3a; text-decoration:none; letter-spacing:-.01em; } .mobmenu-brand img { max-height:36px; width:auto; } .mobmenu-close { display:inline-grid; place-items:center; width:38px; height:38px; border:0; border-radius:12px; background:#f1f4f9; color:#33415a; cursor:pointer; transition:transform .12s, background .16s; } .mobmenu-close:active { transform:scale(.9); } .mobmenu-acc { display:flex; align-items:center; gap:12px; margin:14px 16px 4px; padding:13px 14px; border-radius:16px; text-decoration:none; color:#0f1c3a; background:linear-gradient(135deg, color-mix(in srgb,var(--tp) 13%,#fff), color-mix(in srgb,var(--tp-2) 10%,#fff)); border:1px solid color-mix(in srgb,var(--tp) 18%,#fff); } .mm-acc-av { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; flex:0 0 auto; box-shadow:0 6px 14px -4px color-mix(in srgb,var(--tp) 55%,transparent); } .mm-acc-txt { flex:1; display:flex; flex-direction:column; line-height:1.25; min-width:0; } .mm-acc-txt b { font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mm-acc-txt small { color:var(--muted); font-size:.76rem; } .mobmenu-acc > .lucide { color:var(--muted); flex:0 0 auto; } .mobmenu-nav { flex:1; overflow-y:auto; padding:8px 10px 10px; -webkit-overflow-scrolling:touch; } .mm-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:0; background:none; text-align:left; font-size:.97rem; font-weight:600; color:#26324a; text-decoration:none; border-radius:12px; cursor:pointer; transition:background .16s, color .16s; } .mm-row:hover, .mm-row:active { background:var(--tp-soft); color:var(--tp); } .mm-row > span:nth-child(2) { flex:1; } .mm-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#f2f5fa; color:var(--tp); flex:0 0 auto; } .mm-row > .lucide:last-child { color:#c2ccdb; flex:0 0 auto; } .mm-chev { color:#8592a8; transition:transform .3s cubic-bezier(.2,.7,.2,1); display:inline-flex; } .mm-group.open .mm-chev { transform:rotate(180deg); } .mm-sub { max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.2,.7,.2,1); } .mm-subrow { display:block; padding:11px 12px 11px 58px; font-size:.9rem; font-weight:500; color:#4a5772; text-decoration:none; border-radius:10px; } .mm-subrow:hover, .mm-subrow:active { background:var(--tp-soft); color:var(--tp); } .mobmenu-foot { padding:14px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid #eef1f7; display:flex; flex-direction:column; gap:9px; } body.menu-open { overflow:hidden; } /* dark (Midnight) theme drawer */ .theme-7 .mobmenu { background:#0e1730; color:#c7d2e6; } .theme-7 .mobmenu-head, .theme-7 .mobmenu-foot { border-color:#22304d; } .theme-7 .mobmenu-brand { color:#fff; } .theme-7 .mobmenu-close { background:#18233b; color:#c7d2e6; } .theme-7 .mm-row { color:#c7d2e6; } .theme-7 .mm-ic { background:#18233b; } .theme-7 .mm-subrow { color:#9fb0cc; } /* keep drawer inert on desktop */ @media (min-width:768px){ .mobmenu, .mobmenu-backdrop { display:none !important; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; color: #fff; padding: 92px 0 104px; background: radial-gradient(1200px 500px at 78% -10%, color-mix(in srgb, var(--tp) 55%, transparent), transparent 60%), linear-gradient(135deg, var(--tp-dark) 0%, var(--tp-2) 55%, var(--tp) 120%); } .hero:before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); } .hero .container { position: relative; z-index: 2; } .hero h1 { font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.35rem); color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.25); } .hero .lead, .hero p { color: #dbe6fb; font-size: 1.12rem; } .hero .btn-tp { background: #fff; color: var(--tp-ink); box-shadow: 0 12px 30px rgba(0,0,0,.28); } .hero .btn-tp:hover { color: var(--tp-ink); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #eaf1ff; font-weight: 600; font-size: .82rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .hero-slider .hslide { min-height: 420px; } /* Search / booking widget (the form card under hero) */ .hero + .container .card, .search-widget, .hero .card, section .card.p-3.flex-row { border: 0 !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-lg) !important; } .search-card { margin-top: -46px; position: relative; z-index: 5; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 16px; } /* ---------- Section rhythm ---------- */ section.container, .container > section { padding-top: 8px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: var(--tp); margin-bottom: 6px; } .section-t { font-size: clamp(1.4rem, 2.4vw, 2rem); } /* ---------- Package cards ---------- */ .pkg-card { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--sh-sm); transition: transform .18s ease, box-shadow .18s ease; height: 100%; } .pkg-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } .pkg-card .pkg-thumb { position: relative; overflow: hidden; } .pkg-card img { height: 210px; width: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .pkg-card:hover img { transform: scale(1.06); } .pkg-card .card-body { padding: 16px 16px 18px; } .pkg-card h5, .pkg-card h6 { font-weight: 700; margin: 4px 0 6px; } .pkg-card h5 a, .pkg-card h6 a { color: var(--tp-ink); text-decoration: none; } .pkg-card h5 a:hover, .pkg-card h6 a:hover { color: var(--tp); text-decoration: none; } .pkg-card .from { color: var(--tp); font-weight: 800; font-size: 1.12rem; } .pkg-chip { position: absolute; left: 12px; top: 12px; background: rgba(9,15,30,.72); color: #fff; font-weight: 600; font-size: .76rem; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); } .pkg-card .badge-flash, .badge-flash { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; border-radius: 999px; } /* ---------- Destination tiles ---------- */ .dest-tile { position: relative; border-radius: 20px; overflow: hidden; display: block; box-shadow: 0 14px 34px -18px rgba(12,22,46,.42); transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s; } .dest-tile:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -20px rgba(12,22,46,.5), 0 0 0 2px var(--tp), 0 0 30px color-mix(in srgb,var(--tp) 24%,transparent); } .dest-tile img, .dest-fallback { width: 100%; height: 190px; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .dest-tile:after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,12,26,0) 30%, rgba(6,12,26,.34) 60%, rgba(6,12,26,.82) 100%); transition: background .38s; } .dest-tile:hover:after { background: linear-gradient(180deg, rgba(6,12,26,.12) 16%, rgba(6,12,26,.46) 54%, rgba(6,12,26,.9) 100%); } .dest-tile:hover img, .dest-tile:hover .dest-fallback { transform: scale(1.09); } .dest-tile .nm { position: absolute; left: 16px; bottom: 14px; right: 16px; color: #fff; font-weight: 800; font-size: 1.06rem; z-index: 3; text-shadow: 0 2px 12px rgba(0,0,0,.5); } /* ---------- Why choose ---------- */ .whyus-ic { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--tp-soft); color: var(--tp); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp) 16%, transparent); } /* ---------- Stats / testimonials / reviews ---------- */ .stat-num { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--tp); } .review-card, .testimonial-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--sh-sm); height: 100%; } .text-warning { color: #f5a623 !important; } /* ---------- Cards / forms on content pages ---------- */ .card { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); } .form-control, .form-select { border-radius: 11px; border-color: #d8e0ee; padding: .6rem .8rem; } .form-control:focus, .form-select:focus { border-color: var(--tp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp) 18%, transparent); } .cms-content { color: #33415a; font-size: 1.02rem; } .cms-content h2, .cms-content h3 { margin-top: 1.4rem; margin-bottom: .5rem; } .cms-content ul, .cms-content ol { padding-left: 1.4rem; } .cms-content img { border-radius: var(--r-sm); } /* Price calculator / booking box */ .breakup-row { display: flex; justify-content: space-between; font-size: .92rem; padding: 4px 0; color: #43506a; } /* ---------- Footer ---------- */ .ftr-cta { background: linear-gradient(120deg, var(--tp), var(--tp-2)); padding: 30px 0; } .ftr-cta h4 { color: #fff; } .site-footer { background: #0c1220; color: #aebaceff; padding: 56px 0 78px; margin-top: 64px; } .site-footer h5 { color: #fff; font-weight: 800; } .site-footer h6 { color: #fff; font-weight: 700; margin-bottom: 14px; } .site-footer a { color: #aebace; text-decoration: none; } .site-footer a:hover { color: #fff; } .site-footer .border-top { border-color: rgba(255,255,255,.08) !important; } /* ---------- Floats ---------- */ .wa-float { position: fixed; right: 20px; bottom: 84px; z-index: 1050; background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.5); animation: waPulse 2.4s infinite; } .wa-float:hover { color: #fff; transform: scale(1.06); } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* ============================================================ APP-STYLE MOBILE BOTTOM NAV ============================================================ */ .appnav { position:fixed; left:0; right:0; bottom:0; z-index:1040; display:none; align-items:stretch; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid rgba(15,28,58,.09); box-shadow:0 -8px 30px -12px rgba(12,22,46,.22); padding-bottom:env(safe-area-inset-bottom); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; overscroll-behavior-x:contain; } .appnav::-webkit-scrollbar { display:none; } .appnav-item { flex:1 0 calc(100% / 5.2); scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 2px 8px; text-decoration:none; color:#8592a8; font-weight:600; position:relative; transition:color .2s; -webkit-tap-highlight-color:transparent; } .appnav-ic { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:12px; transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .2s; } .appnav-ic .lucide { width:22px; height:22px; } .appnav-lbl { font-size:.66rem; letter-spacing:.01em; max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .appnav-item.active { color:var(--tp); } .appnav-item.active .appnav-ic { background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; transform:translateY(-3px); box-shadow:0 8px 18px -6px color-mix(in srgb,var(--tp) 60%,transparent); } .appnav-item.active::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--tp),var(--tp-2)); } .appnav-item:active .appnav-ic { transform:scale(.9); } /* dark theme app nav */ .theme-7 .appnav { background:rgba(11,17,32,.92); border-top-color:#1f2a44; } .theme-7 .appnav-item { color:#7c8bab; } /* mobile: show app nav, add safe bottom space, hide desktop footer chrome overlap */ @media (max-width: 767px) { .appnav { display:flex; } body { padding-bottom:64px; } .wa-float { bottom:78px; } /* ---- App-like mobile spacing / rhythm ---- */ .container, .container-fluid { --bs-gutter-x: 2rem; } /* 16px each side */ .hero { padding: 52px 0 60px; } .hslide-inner { padding-top: 30px; padding-bottom: 34px; } .hero h1, .hero .display-5 { font-size: 1.72rem; line-height: 1.18; letter-spacing: -.01em; } .hero .lead, .hero p { font-size: .98rem; margin-bottom: 1rem !important; } .hero .btn-lg { padding: .6rem 1.1rem; font-size: .95rem; } .hero-eyebrow { font-size: .78rem; } /* consistent vertical rhythm between sections */ section.container, .container.my-5, .container.my-4 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; } .section-head { margin-bottom: 14px !important; } .section-t { font-size: 1.35rem; } .eyebrow { font-size: .72rem; } .link-more { font-size: .82rem; } /* tighter, even gaps in grids */ .dest-grid { gap: 12px; } .row.g-4 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; } /* hide hero arrows on mobile (swipe + dots instead) */ .hero .hero-arrow, .hero-carousel .hero-arrow { display: none !important; } .hero-dots { bottom: 14px; } } /* Popup — lead capture (Website → Lead popup, app/Views/site/_popup.php) */ .lp-bg { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8,13,26,0); backdrop-filter: blur(0); transition: background .25s, backdrop-filter .25s; } .lp-bg[hidden] { display: none; } .lp-bg.is-in { background: rgba(8,13,26,.62); backdrop-filter: blur(3px); } .lp { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); transform: translateY(18px) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s; max-height: calc(100vh - 32px); overflow-y: auto; } .lp-bg.is-in .lp { transform: none; opacity: 1; } .lp-img { display: block; width: 100%; height: 170px; object-fit: cover; } .lp-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.15); } .lp-x:hover { background: #fff; transform: rotate(90deg); transition: transform .2s; } .lp-body { padding: 24px 24px 20px; } .lp-body h3 { font-size: 1.4rem; font-weight: 800; color: #0b1836; margin: 6px 0 6px; padding-right: 30px; } .lp-body p { color: #5b6880; font-size: .95rem; margin: 0 0 14px; } .lp-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp); background: color-mix(in srgb, var(--tp) 10%, #fff); border-radius: 999px; padding: 4px 10px; } .lp-code { display: flex; justify-content: center; align-items: center; gap: 6px; border: 2px dashed color-mix(in srgb, var(--tp) 45%, #fff); background: color-mix(in srgb, var(--tp) 6%, #fff); border-radius: 12px; padding: 9px; margin-bottom: 14px; font-size: .9rem; color: #334155; } .lp-code b { font-size: 1.05rem; letter-spacing: .08em; color: #0b1836; } .lp-form { display: grid; gap: 9px; } .lp-form .form-control { height: 46px; border-radius: 12px; } .lp-btn { height: 48px; border-radius: 12px; font-weight: 700; } .lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .lp-err { color: #b42318; font-size: .85rem; } .lp-note { display: flex; justify-content: center; align-items: center; gap: 5px; color: #8390a8; font-size: .74rem; } .lp-done { text-align: center; padding-top: 34px; } .lp-done-ic { color: #16a34a; display: inline-flex; } .lp-done .lp-code { margin-top: 4px; } .lp-teaser { position: fixed; left: 16px; bottom: 20px; z-index: 1080; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(135deg, var(--tp), var(--tp-2, var(--tp))); box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); animation: lpPulse 2.4s ease-in-out infinite; } .lp-teaser[hidden] { display: none; } @keyframes lpPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } html.lp-open { overflow: hidden; } @media (max-width: 767.98px) { .lp-bg { align-items: flex-end; padding: 0; } .lp { max-width: none; border-radius: 22px 22px 0 0; transform: translateY(100%); max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); } .lp-img { height: 140px; } .lp-teaser { bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; padding: 9px 14px; font-size: .84rem; } } @media (prefers-reduced-motion: reduce) { .lp, .lp-bg, .lp-teaser { transition: none; animation: none; } } /* ========================================================================= THEME VARIANTS — Header ×10 · Hero ×10 · Footer ×10 · Package card ×10 Each genuinely distinct and polished. ========================================================================= */ /* ---- HEADERS ---- */ .hdr-t2 .site-header { background: #fff; box-shadow: 0 6px 24px rgba(16,30,60,.08); } .hdr-t2 .site-header .navbar-brand { color: var(--tp); } .hdr-t3 .site-header .navbar { display: grid; grid-template-columns: 1fr auto 1fr; } .hdr-t3 .site-header .navbar-brand { grid-column: 2; margin: 0 auto; } .hdr-t3 .site-header .navbar-collapse { grid-column: 1 / -1; justify-content: center; } .hdr-t3 .site-header .navbar-nav { margin: 0 auto !important; } .hdr-t4 .site-header { background: var(--tp-dark); box-shadow: 0 1px 0 rgba(255,255,255,.06); } .hdr-t4 .site-header .navbar-brand { color: #fff; } .hdr-t4 .site-header .nav-link { color: #cdd8ef; } .hdr-t4 .site-header .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); } .hdr-t5 .site-header { position: fixed; left: 0; right: 0; background: rgba(12,18,32,.55); backdrop-filter: blur(14px) saturate(160%); box-shadow: none; } .hdr-t5 .site-header .navbar-brand, .hdr-t5 .site-header .nav-link { color: #fff; } .hdr-t5 .site-header .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; } .hdr-t5 .hero { padding-top: 150px; } .hdr-t6 .site-header { background: transparent; box-shadow: none; padding-top: 14px; } .hdr-t6 .site-header .navbar { background: #fff; border-radius: 999px; box-shadow: var(--sh); padding: 8px 20px; } .hdr-t7 .site-header { background: linear-gradient(100deg, var(--tp), var(--tp-2)); box-shadow: var(--sh); } .hdr-t7 .site-header .navbar-brand, .hdr-t7 .site-header .nav-link { color: #fff; } .hdr-t7 .site-header .nav-link:hover { background: rgba(255,255,255,.16); color: #fff; } .hdr-t8 .site-header { border-bottom: 1px solid var(--line); box-shadow: none; } .hdr-t8 .site-header .nav-link { text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; } .hdr-t9 .site-header { box-shadow: none; border-bottom: 3px solid var(--tp); } .hdr-t10 .site-header { box-shadow: none; border-bottom: 1px solid var(--line); } .hdr-t10 .site-header .nav-link { border-radius: 0; } .hdr-t10 .site-header .nav-link:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--tp); } /* ---- HEROES ---- */ .hero-t2 .hero { background: linear-gradient(160deg, var(--tp-dark), var(--tp) 130%); } .hero-t2 .hero:before { background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.4px); } .hero-t3 .hero { background: radial-gradient(900px 460px at 20% 20%, var(--tp), transparent 60%), radial-gradient(900px 500px at 90% 90%, var(--tp-2), transparent 55%), var(--tp-dark); } .hero-t4 .hero { background: linear-gradient(115deg, var(--tp-dark) 0%, var(--tp) 48%, #f59e0b 130%); } .hero-t5 .hero { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); padding-bottom: 120px; } .hero-t6 .hero { background: linear-gradient(135deg, var(--tp-dark), var(--tp-2)); } .hero-t6 .hero:before { opacity: .35; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 18px); background-size: auto; -webkit-mask-image: none; mask-image: none; } .hero-t7 .hero { background: #fff; color: var(--tp-ink); border-bottom: 1px solid var(--line); } .hero-t7 .hero:before { display: none; } .hero-t7 .hero h1 { color: var(--tp-ink); text-shadow: none; } .hero-t7 .hero .lead, .hero-t7 .hero p { color: #48566f; } .hero-t7 .hero-eyebrow { background: var(--tp-soft); color: var(--tp); border-color: transparent; } .hero-t7 .hero .btn-tp { background: linear-gradient(135deg, var(--tp), var(--tp-2)); color: #fff; } .hero-t8 .hero { border-radius: 0 0 48px 48px; } .hero-t9 .hero { background: conic-gradient(from 210deg at 72% 18%, var(--tp), var(--tp-dark), var(--tp-2), var(--tp)); } .hero-t10 .hero { background: var(--tp-dark); } .hero-t10 .hero:after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -140px; top: -190px; background: radial-gradient(circle, var(--tp), transparent 70%); opacity: .8; z-index: 1; } .hero-t10 .hero:before { -webkit-mask-image: none; mask-image: none; opacity: .3; } /* ---- FOOTERS ---- */ /* footer templates 1–10 live in assets/footer.css (Website → Footer) */ /* ---- PACKAGE CARDS ---- */ .pkgc-t2 .pkg-card { border-radius: 6px; } .pkgc-t2 .pkg-card img { height: 200px; } .pkgc-t3 .pkg-card { border: 1px solid var(--line); box-shadow: none; } .pkgc-t3 .pkg-card:hover { border-color: var(--tp); box-shadow: var(--sh); } .pkgc-t4 .pkg-card { border-radius: 26px; } .pkgc-t5 .pkg-card { background: #101a2e; border-color: #1c2b45; } .pkgc-t5 .pkg-card .card-body { color: #d7e0f0; } .pkgc-t5 .pkg-card h5 a, .pkgc-t5 .pkg-card h6 a { color: #fff !important; } .pkgc-t5 .pkg-card .text-muted, .pkgc-t5 .pkg-card .small { color: #9fb0cc !important; } .pkgc-t5 .pkg-card .from { color: #7db1ff; } .pkgc-t6 .pkg-card { box-shadow: 0 14px 34px rgba(20,40,80,.16); border: 0; } .pkgc-t6 .pkg-card:hover { transform: translateY(-8px); } .pkgc-t7 .pkg-card img { height: 168px; } .pkgc-t7 .pkg-card { border-radius: 14px; } .pkgc-t8 .pkg-card { border-left: 4px solid var(--tp); } .pkgc-t9 .pkg-card .from { display: inline-block; background: var(--tp); color: #fff; padding: 3px 12px; border-radius: 999px; font-size: .82rem; } .pkgc-t10 .pkg-card { border-radius: 0; border: 2px solid var(--tp-ink); box-shadow: 7px 7px 0 var(--tp-ink); } .pkgc-t10 .pkg-card:hover { transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--tp); } /* ========================================================================= SITE THEMES ×10 — each a complete, unique palette + hero + personality. Applied via body.theme-N (overrides inline --tp by proximity). theme-1 = Custom (uses the admin colour picker). ========================================================================= */ /* helpers used by themes */ .hero .hero-eyebrow, .eyebrow { } .theme-grad-title .section-t, .theme-grad-title .hero h1 { background: linear-gradient(100deg, var(--tp), var(--tp-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 1 · CUSTOM — neutral canvas, accent from picker */ /* (no palette override: uses inline --tp; base design applies) */ /* 2 · OCEAN — teal → blue, airy & glassy */ .theme-2 { --tp:#0ea5e9; --tp-2:#2563eb; --tp-dark:#0b2545; --bg:#f5f6f8; --r:18px; --tp-acc:#f59e0b; --tp-acc-ink:#141a26; --tp-btn:#0ea5e9; --tp-btn-ink:#ffffff; } .theme-2 .hero { background: radial-gradient(1100px 480px at 80% -10%, #38bdf8, transparent 60%), linear-gradient(135deg,#0b2545,#0e4b8c 55%,#0ea5e9); } .theme-2 .pkg-card { border-radius:18px; } .theme-2 .btn-tp { box-shadow:0 10px 24px rgba(14,165,233,.34); } /* 3 · SUNSET — orange → pink, warm & bold */ .theme-3 { --tp:#f97316; --tp-2:#db2777; --tp-dark:#3b0d3f; --bg:#f5f6f8; --r:20px; --tp-acc:#facc15; --tp-acc-ink:#141a26; --tp-btn:#f97316; --tp-btn-ink:#ffffff; } .theme-3 .hero { background: radial-gradient(900px 420px at 15% 20%, #fb923c, transparent 55%), linear-gradient(120deg,#7c2d12,#be185d 60%,#db2777); } .theme-3 .pkg-card { border-radius:20px; } .theme-3 .whyus-ic { background: linear-gradient(135deg, color-mix(in srgb,#f97316 18%,#fff), color-mix(in srgb,#db2777 14%,#fff)); } /* 4 · FOREST — green → lime, natural & calm */ .theme-4 { --tp:#16a34a; --tp-2:#65a30d; --tp-dark:#08351f; --bg:#f5f6f8; --r:16px; --tp-acc:#f59e0b; --tp-acc-ink:#141a26; --tp-btn:#16a34a; --tp-btn-ink:#ffffff; } .theme-4 .hero { background: radial-gradient(900px 420px at 82% -10%, #4ade80, transparent 58%), linear-gradient(135deg,#08351f,#166534 55%,#16a34a); } /* 5 · ROYAL — purple → indigo, elegant & premium */ .theme-5 { --tp:#7c3aed; --tp-2:#4f46e5; --tp-dark:#1e163f; --bg:#f5f6f8; --r:14px; --tp-acc:#f59e0b; --tp-acc-ink:#141a26; --tp-btn:#7c3aed; --tp-btn-ink:#ffffff; } .theme-5 .hero { background: radial-gradient(1000px 480px at 78% -12%, #a78bfa, transparent 60%), linear-gradient(130deg,#1e163f,#3b2d8f 55%,#6d28d9); } .theme-5 .pkg-card:hover { box-shadow:0 22px 46px rgba(79,70,229,.24); } /* 6 · CORAL — rose → amber, playful & soft */ .theme-6 { --tp:#f43f5e; --tp-2:#f59e0b; --tp-dark:#4c0f28; --bg:#f5f6f8; --r:24px; --tp-acc:#7c3aed; --tp-acc-ink:#ffffff; --tp-btn:#f43f5e; --tp-btn-ink:#ffffff; } .theme-6 .hero { background: radial-gradient(900px 420px at 20% 15%, #fda4af, transparent 55%), linear-gradient(120deg,#7f1d3a,#e11d48 55%,#fb7185); } .theme-6 .pkg-card { border-radius:24px; } .theme-6 .btn { border-radius:999px; } /* 7 · MIDNIGHT — full dark UI, cyan accent */ .theme-7 { --tp:#22d3ee; --tp-2:#6366f1; --tp-dark:#070b16; --bg:#0b1120; --card:#111a2e; --ink:#e8eefc; --tp-ink:#ffffff; --muted:#93a3c4; --line:#1f2a44; --tp-acc:#f472b6; --tp-acc-ink:#141a26; --tp-btn:#22d3ee; --tp-btn-ink:#04121a; } .theme-7 body, .theme-7 { background:#0b1120; } .theme-7 .site-header { background: rgba(11,17,32,.82); box-shadow: 0 1px 0 #1f2a44; } .theme-7 .site-header .navbar-brand, .theme-7 .site-header .nav-link { color:#e8eefc; } .theme-7 .site-header .nav-link:hover { background: rgba(255,255,255,.08); color:#fff; } .theme-7 .hero { background: radial-gradient(1000px 500px at 78% -10%, #0ea5e9, transparent 55%), linear-gradient(135deg,#070b16,#0f1e3a 60%,#14324f); } .theme-7 .card, .theme-7 .pkg-card, .theme-7 .search-card, .theme-7 .review-card { background:#111a2e; border-color:#1f2a44; } .theme-7 .form-control, .theme-7 .form-select { background:#0e1830; border-color:#26324f; color:#e8eefc; } .theme-7 .form-control::placeholder { color:#6b7a9c; } .theme-7 .pkg-card h5 a, .theme-7 .pkg-card h6 a { color:#fff !important; } .theme-7 .text-muted, .theme-7 .lead { color:#93a3c4 !important; } .theme-7 .site-footer { background:#070b16; } /* 8 · EMERALD — deep green with gold accents, luxe */ .theme-8 { --tp:#059669; --tp-2:#0d9488; --tp-dark:#052e26; --bg:#f5f6f8; --r:12px; --tp-acc:#d4a017; --tp-acc-ink:#141a26; --tp-btn:#059669; --tp-btn-ink:#ffffff; } .theme-8 .hero { background: radial-gradient(900px 440px at 82% -10%, #34d399, transparent 58%), linear-gradient(135deg,#052e26,#065f46 55%,#047857); } .theme-8 .pkg-card .from, .theme-8 .stat-num, .theme-8 .eyebrow { color:#b8860b; } .theme-8 .btn-tp { background: linear-gradient(135deg,#059669,#0d9488); } .theme-8 .badge-flash { background: linear-gradient(135deg,#d97706,#b45309); } /* 9 · BERRY — magenta → violet, vibrant */ .theme-9 { --tp:#d946ef; --tp-2:#8b5cf6; --tp-dark:#2e1065; --bg:#f5f6f8; --r:18px; --tp-acc:#22d3ee; --tp-acc-ink:#04121a; --tp-btn:#d946ef; --tp-btn-ink:#ffffff; } .theme-9 .hero { background: radial-gradient(950px 460px at 18% 18%, #e879f9, transparent 55%), linear-gradient(125deg,#2e1065,#7e22ce 55%,#c026d3); } /* 10 · AURORA — cyan → purple multi-stop, gradient titles */ .theme-10 { --tp:#06b6d4; --tp-2:#8b5cf6; --tp-dark:#0b1233; --bg:#f5f6f8; --r:20px; --tp-acc:#f472b6; --tp-acc-ink:#141a26; --tp-btn:#06b6d4; --tp-btn-ink:#ffffff; } .theme-10 .hero { background: linear-gradient(120deg,#0b1233 0%, #1e3a8a 35%, #0891b2 68%, #7c3aed 120%); } .theme-10 .hero:before { opacity:.6; } .theme-10 .section-t { background: linear-gradient(100deg, var(--tp), var(--tp-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .theme-10 .pkg-card { border-radius:20px; } /* ========================================================================= Hero carousel · MMT search tabs · Destinations · Packages sidebar ========================================================================= */ /* Hero carousel */ .hero-carousel { display:grid; min-height:clamp(460px,60vh,620px); padding:0; } .hero-carousel .hslide { grid-area:1/1; position:relative; opacity:0; transition:opacity .7s ease; display:flex; align-items:center; background-size:cover; background-position:center; } .hero-carousel .hslide.active { opacity:1; z-index:1; } .hslide-inner { position:relative; z-index:2; padding-top:48px; padding-bottom:48px; max-width:700px; } .hero-arrow { position:absolute; top:calc(50% - 30px); transform:translateY(-50%); z-index:6; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#0b1220; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.28); } .hero-arrow.prev { left:18px; } .hero-arrow.prev .lucide { transform:rotate(180deg); } .hero-arrow.next { right:18px; } .hero-arrow:hover { background:#fff; transform:translateY(-50%) scale(1.08); } .hero-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:8px; } .hero-dots button { width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; transition:all .2s; padding:0; } .hero-dots button.active { background:#fff; width:26px; border-radius:6px; } .btn-ghost-light { background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.5); } .btn-ghost-light:hover { background:rgba(255,255,255,.26); color:#fff; } /* ============================================================ GLASS COMMAND DECK — premium booking widget ============================================================ */ .gsearch-wrap { position: relative; z-index: 20; } .gsearch { position: relative; margin-top: -60px; border-radius: 26px; overflow: visible; background: linear-gradient(135deg, rgba(13,20,42,.74), rgba(22,32,64,.62)); -webkit-backdrop-filter: blur(24px) saturate(165%); backdrop-filter: blur(24px) saturate(165%); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 34px 90px rgba(5,10,28,.5), inset 0 1px 0 rgba(255,255,255,.16); } .gsearch-aurora { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; opacity: .6; pointer-events: none; } .gsearch-aurora:before, .gsearch-aurora:after { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; filter: blur(64px); } .gsearch-aurora:before { background: var(--tp); top: -180px; left: -90px; animation: auroraA 15s ease-in-out infinite alternate; } .gsearch-aurora:after { background: var(--tp-2); bottom: -200px; right: -70px; animation: auroraB 17s ease-in-out infinite alternate; } @keyframes auroraA { to { transform: translate(140px, 46px) scale(1.15); } } @keyframes auroraB { to { transform: translate(-130px, -34px) scale(1.1); } } .gseg { position: relative; display: flex; gap: 2px; padding: 10px 12px 0; z-index: 2; } .gseg-ind { position: absolute; top: 10px; height: calc(100% - 10px); border-radius: 15px 15px 0 0; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: left .34s cubic-bezier(.5,.05,.2,1), width .34s cubic-bezier(.5,.05,.2,1); z-index: 0; } .gseg-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; color: rgba(255,255,255,.6); font-weight: 700; font-size: .98rem; padding: 15px 26px; cursor: pointer; transition: color .2s; white-space: nowrap; } .gseg-tab .lucide { opacity: .8; } .gseg-tab:hover { color: #fff; } .gseg-tab.active { color: #fff; } .gseg-tab.active .lucide { opacity: 1; } .gpanes { position: relative; z-index: 2; padding: 20px; } .gpane { display: none; gap: 16px; align-items: flex-end; flex-wrap: wrap; } .gpane.active { display: flex; animation: paneIn .42s ease; } @keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .gfield { flex: 1; min-width: 165px; display: flex; flex-direction: column; gap: 8px; position: relative; } .gf-lg { flex: 1.6; } .gf-sm { flex: .85; min-width: 140px; } .gf-budget { flex: 1.5; min-width: 220px; } .glabel { display: inline-flex; align-items: center; gap: 6px; font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.62); } .glabel .lucide { opacity: .7; } .glabel b { color: #fff; font-weight: 800; text-transform: none; letter-spacing: 0; } /* custom dropdown + date button share look */ .gdrop, .gdate { position: relative; } .gdrop-btn, .gdate-btn { width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17); color: #fff; border-radius: 14px; padding: .82rem .9rem; font-weight: 600; font-size: .98rem; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; } .gdrop-btn:hover, .gdate-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); } .gdrop.open .gdrop-btn, .gdate.open .gdate-btn { border-color: var(--tp); background: rgba(255,255,255,.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tp) 28%, transparent); } .gdi { opacity: .85; } .gdrop-val, .gdate-val { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gdate-val:not(.has-val) { color: rgba(255,255,255,.6); font-weight: 500; } .gchev { margin-left: auto; transition: transform .25s; opacity: .8; } .gdrop.open .gchev { transform: rotate(180deg); } .gdrop-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 24px 54px rgba(5,10,28,.42); border: 1px solid var(--line); padding: 6px; z-index: 70; max-height: 288px; overflow: auto; opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .2s, transform .2s; } .gdrop.open .gdrop-panel { opacity: 1; transform: none; pointer-events: auto; } .gdrop-opt { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .94rem; cursor: pointer; } .gdrop-opt:hover { background: var(--tp-soft); color: var(--tp); } .gdrop-opt.is-sel { background: linear-gradient(135deg, var(--tp), var(--tp-2)); color: #fff; } /* calendar popover */ .gdate-pop { position: absolute; top: calc(100% + 8px); left: 0; width: 306px; max-width: 90vw; background: #fff; border-radius: 16px; box-shadow: 0 24px 54px rgba(5,10,28,.42); border: 1px solid var(--line); padding: 12px; z-index: 70; opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .2s, transform .2s; } .gdate.open .gdate-pop { opacity: 1; transform: none; pointer-events: auto; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 800; color: var(--ink); } .cal-nav { border: 0; background: var(--tp-soft); color: var(--tp); width: 32px; height: 32px; border-radius: 9px; font-size: 1.15rem; line-height: 1; cursor: pointer; } .cal-nav:hover { background: var(--tp); color: #fff; } .cal-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; } .cal-dow span { text-align: center; font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; } .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; } .cal-d { border: 0; background: transparent; color: var(--ink); font-weight: 600; height: 36px; border-radius: 9px; cursor: pointer; font-size: .9rem; transition: background .12s; } .cal-d:hover:not(.dis) { background: var(--tp-soft); color: var(--tp); } .cal-d.sel { background: linear-gradient(135deg, var(--tp), var(--tp-2)); color: #fff; } .cal-d.dis { color: #cbd5e1; cursor: not-allowed; } /* budget slider (glass) */ .gf-budget .bs { position: relative; height: 42px; padding-top: 18px; touch-action: none; } .bs-track { position: absolute; top: 28px; left: 0; right: 0; height: 6px; border-radius: 999px; background: rgba(255,255,255,.2); } .bs-fill { position: absolute; top: 28px; left: 0; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--tp), var(--tp-2)); box-shadow: 0 0 14px color-mix(in srgb, var(--tp) 70%, transparent); } .bs-handle { position: absolute; top: 18px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #fff; border: 3px solid var(--tp); box-shadow: 0 3px 12px rgba(0,0,0,.42); cursor: grab; touch-action: none; transition: transform .12s, box-shadow .2s; } .bs-handle:hover { transform: scale(1.1); } .bs.drag .bs-handle, .bs-handle:active { cursor: grabbing; transform: scale(1.22); box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 9px color-mix(in srgb, var(--tp) 24%, transparent); } .bs-handle:focus { outline: none; box-shadow: 0 0 0 7px color-mix(in srgb, var(--tp) 30%, transparent); } /* stepper (glass) */ .gstep { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17); border-radius: 14px; padding: .34rem .4rem; } .gstep button { width: 40px; height: 40px; border: 0; border-radius: 11px; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .1s; } .gstep button:hover { background: var(--tp); } .gstep button:active { transform: scale(.9); } .gstep-val { flex: 1; text-align: center; color: #fff; font-weight: 700; font-size: .95rem; } .gstep-val:not(.has-val) { color: rgba(255,255,255,.55); font-weight: 500; } /* search button with shine */ .gbtn { position: relative; overflow: hidden; align-self: flex-end; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 16px; padding: .98rem 2rem; font-weight: 800; font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--tp), var(--tp-2)); box-shadow: 0 12px 30px color-mix(in srgb, var(--tp) 46%, transparent); transition: transform .15s, box-shadow .15s; white-space: nowrap; } .gbtn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px color-mix(in srgb, var(--tp) 54%, transparent); } .gbtn .gbtn-shine { position: absolute; top: 0; left: -60%; width: 42%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: gshine 3.4s ease-in-out infinite; } @keyframes gshine { 0%, 55% { left: -60%; } 100% { left: 135%; } } @media (max-width: 820px) { .gsearch { margin-top: -30px; } .gseg { overflow-x: auto; } .gseg-tab { padding: 13px 18px; font-size: .92rem; } .gfield { min-width: calc(50% - 8px); } .gf-lg, .gf-budget { min-width: 100%; flex-basis: 100%; } .gbtn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .gfield { min-width: 100%; flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .gsearch-aurora:before, .gsearch-aurora:after, .gbtn-shine { animation: none; } } /* Destinations — next level */ .dest-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; grid-auto-flow:dense; gap:16px; } .dest-grid .dest-tile { min-height:0; height:100%; display:block; } .dest-grid .dest-tile:first-child { grid-column:span 2; grid-row:span 2; } .dest-grid .dest-tile.d-wide { grid-column:span 2; } /* auto-fill filler: keeps every row perfectly full */ /* Small counts (1–2): equal boxes, no oversized hero, so there is never a stranded blank cell */ .dest-grid--n1 { grid-template-columns:1fr; } .dest-grid--n1 .dest-tile:first-child { grid-column:1 / -1; grid-row:span 2; } .dest-grid--n2 { grid-template-columns:repeat(2,1fr); } .dest-grid--n2 .dest-tile { grid-column:span 1; grid-row:span 2; } .dest-grid--n2 .dest-tile:first-child { grid-column:span 1; grid-row:span 2; } .dest-tile img, .dest-fallback { height:100%; position:absolute; inset:0; z-index:0; } .dest-tile .nm { display:flex; align-items:center; justify-content:space-between; gap:8px; transition:transform .3s cubic-bezier(.2,.7,.2,1); } .dest-nm { display:inline-flex; align-items:center; gap:6px; min-width:0; } .dest-nm .lucide { flex:0 0 auto; opacity:.9; } .dest-tile:hover .nm { transform:translateY(-28px); } .dest-pill { background:rgba(255,255,255,.18); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.36); color:#fff; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 12px -4px rgba(0,0,0,.3); } /* sheen sweep on hover */ .dest-sheen { position:absolute; top:0; left:-70%; width:55%; height:100%; z-index:2; background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; } .dest-tile:hover .dest-sheen { animation:fsheen 1s ease; } /* animated Explore pill */ .dest-explore { position:absolute; left:16px; bottom:14px; z-index:3; color:#fff; font-weight:700; font-size:.82rem; opacity:0; transform:translateY(8px); display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--tp),var(--tp-2)); padding:7px 14px; border-radius:999px; box-shadow:0 8px 20px -6px color-mix(in srgb,var(--tp) 60%,transparent); transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1); } .dest-explore .lucide { transition:transform .2s; } .dest-tile:hover .dest-explore { opacity:1; transform:none; } .dest-tile:hover .dest-explore .lucide { transform:translateX(3px); } @media (max-width:800px){ .dest-grid{ grid-template-columns:repeat(2,1fr); } .dest-grid .dest-tile:first-child{ grid-column:span 2; grid-row:span 1; } /* full-width banner on mobile */ .dest-grid .dest-tile.d-wide{ grid-column:auto; } /* desktop-only filler, reset on mobile */ .dest-grid .dest-tile.m-wide{ grid-column:span 2; } /* mobile filler for even counts */ .dest-grid--n1 .dest-tile:first-child{ grid-row:span 1; } /* single: full-width banner */ .dest-grid--n2 .dest-tile{ grid-column:span 2; grid-row:span 1; } /* two: stacked full-width on phone */ } @media (prefers-reduced-motion:reduce){ .dest-sheen{ display:none; } } /* Packages — MMT/ecommerce layout */ .plist-wrap { display:grid; grid-template-columns:294px 1fr; gap:26px; align-items:start; } .plist-wrap > * { min-width:0; } .plist .row { margin-left:0; margin-right:0; } /* ============================================================ PREMIUM FILTER PANEL ============================================================ */ .pfilter { position:sticky; top:80px; background:linear-gradient(180deg,#ffffff, #fcfdff); border:1px solid #e9edf5; border-radius:20px; box-shadow:0 18px 44px -26px rgba(17,28,58,.34); overflow:hidden; } .pfilter::before { content:""; display:block; height:4px; background:linear-gradient(90deg,var(--tp),var(--tp-2),var(--tp)); background-size:200% 100%; animation:pcGradShift 5s linear infinite; } .pfilter-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px 13px; border-bottom:1px solid #eef1f7; } .pfilter-title { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:1.02rem; color:var(--tp-ink); } .pfilter-title .lucide { color:var(--tp); } .pfilter-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; font-size:.72rem; font-weight:800; box-shadow:0 4px 10px color-mix(in srgb,var(--tp) 40%,transparent); } .pfilter-clear { display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:700; color:var(--muted); background:#f1f4f9; padding:5px 11px; border-radius:999px; text-decoration:none; transition:all .18s; } .pfilter-clear:hover { color:#e11d48; background:#fdeaee; } .pfilter-clear .lucide { width:12px; height:12px; } .pfilter-group { padding:6px 18px; border-bottom:1px solid #eef1f7; } .pfilter-group:last-child { border-bottom:0; } .pfg-head { width:100%; display:flex; align-items:center; gap:8px; background:none; border:0; padding:14px 0; cursor:pointer; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tp-ink); } .pfg-head .pfg-chev { margin-left:auto; color:var(--muted); display:inline-flex; transition:transform .3s cubic-bezier(.2,.7,.2,1); } .pfilter-group.collapsed .pfg-chev { transform:rotate(-90deg); } .pfg-dot { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:color-mix(in srgb,var(--tp) 16%,#fff); color:var(--tp); font-size:.66rem; font-weight:800; font-style:normal; } .pfg-body { overflow:hidden; transition:max-height .34s cubic-bezier(.2,.7,.2,1); } .pfg-body > .pchips, .pfg-body > .pseg, .pfg-body > .rangebox { margin-bottom:14px; } /* chip toggles (destination / theme / duration) */ .pchips { display:flex; flex-wrap:wrap; gap:8px; } .pchk { position:relative; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1.5px solid #e4e9f2; border-radius:999px; background:#fff; font-size:.84rem; font-weight:600; color:#3a4864; cursor:pointer; transition:transform .16s cubic-bezier(.2,.7,.2,1), border-color .18s, background .18s, box-shadow .18s, color .18s; } .pchk input { position:absolute; opacity:0; pointer-events:none; } .pchk:hover { border-color:color-mix(in srgb,var(--tp) 55%,#fff); transform:translateY(-2px); box-shadow:0 6px 14px -6px color-mix(in srgb,var(--tp) 45%,transparent); } .pchk .cnt { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#eef2f8; color:var(--muted); font-size:.7rem; font-weight:700; transition:all .18s; } .pchk:has(input:checked) { border-color:transparent; background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; box-shadow:0 8px 20px -6px color-mix(in srgb,var(--tp) 60%,transparent); } .pchk:has(input:checked) .cnt { background:rgba(255,255,255,.26); color:#fff; } .pchk:has(input:checked) .pchk-lbl::before { content:"✓ "; font-weight:800; } /* segmented control (booking mode / type) */ .pseg { display:flex; gap:4px; background:#f0f3f9; border-radius:13px; padding:4px; } .pseg-opt { flex:1; position:relative; text-align:center; cursor:pointer; } .pseg-opt input { position:absolute; opacity:0; pointer-events:none; } .pseg-opt span { display:block; padding:8px 6px; border-radius:10px; font-size:.8rem; font-weight:700; color:#556; transition:all .2s cubic-bezier(.2,.7,.2,1); white-space:nowrap; } .pseg-opt:hover span { color:var(--tp-ink); } .pseg-opt:has(input:checked) span { background:#fff; color:var(--tp); box-shadow:0 4px 12px -4px rgba(20,40,80,.28); } .pfilter-apply { padding:14px 18px 18px; } /* active filter chips above results */ .active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; padding:12px 14px; background:linear-gradient(180deg,#fff,#f8fafd); border:1px solid #e9edf5; border-radius:14px; box-shadow:0 8px 24px -18px rgba(17,28,58,.3); } .af-label { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .af-label .lucide { color:var(--tp); } .af-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:color-mix(in srgb,var(--tp) 10%,#fff); border:1px solid color-mix(in srgb,var(--tp) 26%,#fff); color:var(--tp-ink); font-size:.8rem; font-weight:700; text-decoration:none; transition:all .18s; } .af-chip .lucide { width:12px; height:12px; } .af-chip:hover { background:#fdeaee; border-color:#f6b8c4; color:#e11d48; transform:translateY(-1px); } .af-clear { margin-left:auto; font-size:.78rem; font-weight:700; color:var(--muted); text-decoration:none; } .af-clear:hover { color:#e11d48; } /* results toolbar */ .plist-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; } .pl-count { font-weight:800; font-size:1.05rem; color:var(--tp-ink); } .pl-count span { color:var(--muted); font-weight:500; } .pl-tools { display:flex; align-items:center; gap:10px; } .pl-tools select { border:1.5px solid #e4e9f2; border-radius:11px; padding:.5rem 2rem .5rem .8rem; font-size:.88rem; font-weight:600; color:var(--tp-ink); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237a879c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .6rem center/14px no-repeat; -webkit-appearance:none; appearance:none; cursor:pointer; transition:border-color .18s, box-shadow .18s; } .pl-tools select:hover, .pl-tools select:focus { border-color:var(--tp); box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 14%,transparent); outline:none; } .view-toggle { display:inline-flex; border:1.5px solid #e4e9f2; border-radius:11px; overflow:hidden; background:#fff; } .view-toggle button { border:0; background:transparent; padding:8px 11px; color:var(--muted); cursor:pointer; display:flex; transition:all .18s; } .view-toggle button.active { background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; } .filter-toggle-btn { display:none; } /* list-view card */ .plist.list .col-item { width:100%; } .plist.list .pkg-card { display:grid; grid-template-columns:300px 1fr; } .plist.list .pkg-card .pkg-thumb img, .plist.list .pkg-card .pkg-thumb > div { height:100%; min-height:220px; } .plist.list .pkg-card .card-body { display:flex; flex-direction:column; } .pkg-feats { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .pkg-feat { background:var(--tp-soft); color:var(--tp); font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:999px; } .pkg-rating { display:inline-flex; align-items:center; gap:4px; background:#0a7d33; color:#fff; font-size:.76rem; font-weight:700; padding:2px 7px; border-radius:6px; } /* bottom-sheet grip + close (mobile only) */ .pfilter-grip { display:none; } .pfilter-headr { display:flex; align-items:center; gap:8px; } .pfilter-close { display:none; } /* mobile app-style filter/sort/view action bar (packages) */ .mfab { display:none; } @media (max-width:900px){ .plist-wrap { grid-template-columns:1fr; } /* FILTER = bottom sheet */ .pfilter { position:fixed; inset:auto 0 0 0; width:100%; max-width:none; z-index:1101; border-radius:22px 22px 0 0; transform:translateY(103%); transition:transform .36s cubic-bezier(.2,.75,.2,1); max-height:86vh; overflow:auto; box-shadow:0 -14px 50px rgba(6,14,38,.42); -webkit-overflow-scrolling:touch; } .pfilter.open { transform:none; } .pfilter::before { border-radius:22px 22px 0 0; } .pfilter-grip { display:block; width:44px; height:5px; border-radius:999px; background:#d7deea; margin:10px auto 2px; } .pfilter-head { position:sticky; top:0; background:#fff; z-index:2; } .pfilter-close { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; border:0; background:#f1f4f9; color:#556; cursor:pointer; } .pfilter-apply { position:sticky; bottom:0; background:linear-gradient(180deg,rgba(255,255,255,.4),#fff 40%); padding-top:14px; } .filter-toggle-btn { display:none; } /* replaced by bottom action bar */ .plist-top .pl-tools { display:none; } /* moved into action bar */ /* LIST view on mobile = compact horizontal card (image left, details right) */ .plist.list .row { --bs-gutter-y:12px; } .plist.list .pkg-card { grid-template-columns:122px 1fr; align-items:stretch; } .plist.list .pkg-card .pkg-thumb { border-radius:0; } .plist.list .pkg-card .pkg-thumb img, .plist.list .pkg-card .pkg-thumb > div, .plist.list .pkg-card .pkg-fallback { height:100%; min-height:100%; } .plist.list .pkg-card .pkg-chip { left:7px; top:7px; font-size:.64rem; padding:3px 7px; } .plist.list .pkg-card .badge-flash { display:none; } .plist.list .pkg-card .card-body { padding:11px 12px; gap:3px; } .plist.list .pkg-card h5 { font-size:.98rem; margin:2px 0 4px; line-height:1.25; } .plist.list .pkg-card .pkg-desc { display:none; } /* hide long desc in compact list */ .plist.list .pkg-card .pkg-feats { display:none; } .plist.list .pkg-card .pkg-thumb::before { display:none; } .plist.list .pkg-card .btn-tp { padding:6px 12px; font-size:.8rem; } /* action bar fixed above the app nav */ .mfab { display:flex; position:fixed; left:12px; right:12px; bottom:calc(64px + env(safe-area-inset-bottom) + 10px); z-index:1035; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border:1px solid rgba(15,28,58,.09); border-radius:16px; box-shadow:0 14px 34px -12px rgba(12,22,46,.34); overflow:hidden; } .mfab-btn { flex:1; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 8px; border:0; background:transparent; font-weight:700; font-size:.9rem; color:var(--tp-ink); cursor:pointer; } .mfab-btn .lucide { color:var(--tp); } .mfab-filter { border-right:1px solid rgba(15,28,58,.09); } .mfab-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; font-size:.68rem; font-weight:800; } .mfab-sort { position:relative; } .mfab-sort select { position:absolute; inset:0; opacity:0; width:100%; height:100%; border:0; cursor:pointer; } .mfab-view { display:flex; flex:0 0 auto; border-left:1px solid rgba(15,28,58,.09); } .mfab-view a { display:grid; place-items:center; width:46px; color:var(--muted); } .mfab-view a.active { background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; } .plist { padding-bottom:74px; } /* room for action bar */ body.sheet-open { overflow:hidden; } } .theme-7 .pfilter-head { background:#111a2e; } .theme-7 .pfilter-grip { background:#2b3a58; } .theme-7 .mfab { background:rgba(17,26,46,.96); border-color:#22304d; } .theme-7 .mfab-view a.active, .theme-7 .pfilter-apply { } .pfilter-backdrop { display:none; position:fixed; inset:0; background:rgba(8,14,28,.55); backdrop-filter:blur(3px); z-index:1100; } .pfilter-backdrop.show { display:block; animation:afFade .25s ease; } @keyframes afFade { from { opacity:0; } to { opacity:1; } } /* ---------- Premium dual-handle price range slider ---------- */ .rangebox { padding-top:2px; } .range-vals { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; } .range-vals .rv-cell { display:flex; flex-direction:column; gap:2px; flex:1; padding:7px 10px; border:1.5px solid #e4e9f2; border-radius:11px; background:#fff; text-align:center; } .range-vals .rv-cell small { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; } .range-vals .rv-min, .range-vals .rv-max { font-weight:800; font-size:.92rem; color:var(--tp-ink); } .range-vals .rv-sep { color:var(--tp); display:inline-flex; flex:0 0 auto; } .rs { position:relative; height:28px; margin:2px 4px 6px; touch-action:none; } .rs-track { position:absolute; top:11px; left:0; right:0; height:6px; border-radius:999px; background:#e7ecf4; box-shadow:inset 0 1px 2px rgba(20,40,80,.12); } .rs-fill { position:absolute; top:11px; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--tp),var(--tp-2)); box-shadow:0 0 14px -2px color-mix(in srgb,var(--tp) 60%,transparent); } .rs-handle { position:absolute; top:1px; width:24px; height:24px; margin-left:-12px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 8px rgba(20,40,80,.3), 0 0 0 2px var(--tp) inset; cursor:grab; touch-action:none; z-index:3; transition:transform .12s, box-shadow .18s; } .rs-handle::after { content:""; position:absolute; inset:6px; border-radius:50%; background:linear-gradient(135deg,var(--tp),var(--tp-2)); } .rs-handle:hover { transform:scale(1.12); box-shadow:0 4px 14px rgba(20,40,80,.34), 0 0 0 2px var(--tp) inset, 0 0 0 6px color-mix(in srgb,var(--tp) 16%,transparent); } .rs-handle:active { cursor:grabbing; transform:scale(1.2); } .rs-handle:focus { outline:none; box-shadow:0 4px 14px rgba(20,40,80,.34), 0 0 0 2px var(--tp) inset, 0 0 0 6px color-mix(in srgb,var(--tp) 24%,transparent); } .rs-ends { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); font-weight:600; margin-top:4px; } /* ============================================================ FEATURED — cinematic overlay-card carousel ============================================================ */ .fcar-section .fcar-tools { display:flex; align-items:center; gap:8px; } .fcar-nav { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--tp-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .15s, background .15s, color .15s, border-color .15s; } .fcar-nav:hover:not(:disabled) { background:var(--tp); color:#fff; border-color:var(--tp); transform:translateY(-2px); } .fcar-nav[data-dir="-1"] .lucide { transform:rotate(180deg); } .fcar-nav:disabled { opacity:.35; cursor:default; } .fcar { position:relative; margin:0 -8px; } .fcar-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 8px 14px; scrollbar-width:none; -ms-overflow-style:none; } .fcar-track::-webkit-scrollbar { display:none; } .fcar-track.drag { cursor:grabbing; scroll-snap-type:none; user-select:none; } .fcard { position:relative; flex:0 0 auto; width:340px; max-width:84vw; height:440px; border-radius:22px; overflow:hidden; scroll-snap-align:start; text-decoration:none; color:#fff; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; } .fcard:hover { transform:translateY(-8px); box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* rich default fallback background (no cover image) — layered, cinematic */ .fcard-fallback, .pkg-fallback, .dest-fallback { background: radial-gradient(105% 72% at 78% -12%, color-mix(in srgb, var(--tp) 90%, #fff) 0%, transparent 58%), radial-gradient(95% 65% at 8% 112%, var(--tp-dark) 0%, transparent 60%), linear-gradient(calc(150deg + var(--i,0) * 12deg), var(--tp), var(--tp-dark)); } .pkg-fallback { height:210px; } .fcard-media { position:absolute; inset:0; z-index:1; } .fcard-media img, .fcard-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .fcard:hover .fcard-media img, .fcard:hover .fcard-fallback { transform:scale(1.09); } .fcard-scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,10,24,0) 28%, rgba(6,10,24,.4) 56%, rgba(6,10,24,.92) 100%); transition:background .3s; } .fcard:hover .fcard-scrim { background:linear-gradient(180deg, rgba(6,10,24,.12) 12%, rgba(6,10,24,.55) 48%, rgba(6,10,24,.95) 100%); } .fcard-sheen { position:absolute; top:0; left:-70%; width:55%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform:skewX(-18deg); opacity:0; z-index:2; } .fcard:hover .fcard-sheen { animation:fsheen 1s ease; } @keyframes fsheen { from { left:-70%; opacity:1; } to { left:130%; opacity:1; } } .fcard-ribbon { position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-size:.72rem; font-weight:800; padding:5px 11px; border-radius:999px; box-shadow:0 6px 16px rgba(239,68,68,.42); } .fcard-ribbon .lucide { fill:#fff; stroke:#fff; } .fcard-chip { position:absolute; top:14px; right:14px; z-index:3; display:inline-flex; align-items:center; gap:5px; background:rgba(10,16,32,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px; } .fcard-content { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px; } .fcard-dest { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.88); margin-bottom:5px; } .fcard-title { color:#fff; font-size:1.28rem; font-weight:800; line-height:1.2; margin:0 0 9px; text-shadow:0 2px 12px rgba(0,0,0,.45); } .fcard-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .fcard-tag { background:rgba(255,255,255,.16); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:999px; } .fcard-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; } .fcard-price { font-size:1.3rem; font-weight:800; color:#fff; white-space:nowrap; } .fcard-price .lbl { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.78); margin-right:3px; } .fcard-price small { font-size:.72rem; font-weight:500; color:rgba(255,255,255,.78); } .fcard-cta { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--tp),var(--tp-2)); color:#fff; font-weight:700; font-size:.86rem; padding:9px 16px; border-radius:999px; box-shadow:0 8px 20px color-mix(in srgb,var(--tp) 42%,transparent); white-space:nowrap; transition:gap .2s, transform .15s; } .fcard-cta:hover { gap:10px; transform:translateY(-1px); } /* glow-ring: now handled by box-shadow on .fcard:hover — no ::after needed */ /* Clean reveal: price + CTA ALWAYS visible at bottom (never clipped). Tags collapse at rest and expand upward on hover, gently lifting the title. */ @media (hover:hover) and (pointer:fine) { .fcard-tags { max-height:0; opacity:0; margin-bottom:0; overflow:hidden; transform:translateY(4px); transition:max-height .34s cubic-bezier(.2,.7,.2,1), opacity .28s .04s, transform .3s .04s, margin-bottom .34s; } .fcard:hover .fcard-tags { max-height:46px; opacity:1; margin-bottom:12px; transform:none; } } @media (max-width:600px) { .fcard { width:286px; height:410px; } } @media (prefers-reduced-motion:reduce) { .fcard, .fcard-media img, .fcard-content, .fcard-tags { transition:none; } .fcard-sheen { display:none; } } /* ============================================================ FCARD — per-theme cinematic card personalities Each theme gives a genuinely unique shape, scrim direction, glow colour, chip/tag/ribbon style, and CTA look. ============================================================ */ /* ── Theme 2 · OCEAN — deep-sea blue, glassy & airy ──────────────── */ .featc-t2 .fcard { border-radius:26px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t2 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t2 .fcard-scrim { background:linear-gradient(180deg, rgba(2,18,50,0) 22%, rgba(11,68,132,.38) 55%, rgba(7,40,92,.93) 100%); } .featc-t2 .fcard:hover .fcard-scrim { background:linear-gradient(180deg, rgba(2,18,50,.14) 10%, rgba(11,68,132,.52) 48%, rgba(7,40,92,.96) 100%); } .featc-t2 .fcard-ribbon { background:linear-gradient(135deg,#0ea5e9,#2563eb); box-shadow:0 6px 16px rgba(14,165,233,.52); } .featc-t2 .fcard-chip { border-color:rgba(56,189,248,.44); background:rgba(2,18,50,.58); } .featc-t2 .fcard-tag { background:rgba(14,165,233,.18); border-color:rgba(56,189,248,.38); } .featc-t2 .fcard-cta { background:linear-gradient(135deg,#0ea5e9,#2563eb); box-shadow:0 8px 22px rgba(14,165,233,.50); } /* ── Theme 3 · SUNSET — diagonal scrim, molten amber-rose ─────────── */ .featc-t3 .fcard { border-radius:28px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t3 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t3 .fcard-scrim { background:linear-gradient(155deg, rgba(60,10,10,0) 18%, rgba(190,24,93,.38) 58%, rgba(124,45,18,.92) 100%); } .featc-t3 .fcard:hover .fcard-scrim { background:linear-gradient(155deg, rgba(60,10,10,.1) 10%, rgba(190,24,93,.52) 50%, rgba(124,45,18,.96) 100%); } .featc-t3 .fcard-ribbon { background:linear-gradient(135deg,#f59e0b,#f97316); box-shadow:0 6px 16px rgba(249,115,22,.48); } .featc-t3 .fcard-chip { border-color:rgba(251,146,60,.46); background:rgba(60,10,10,.52); } .featc-t3 .fcard-tag { background:rgba(249,115,22,.18); border-color:rgba(251,146,60,.38); } .featc-t3 .fcard-cta { background:linear-gradient(135deg,#f97316,#db2777); box-shadow:0 8px 22px rgba(249,115,22,.46); } /* ── Theme 4 · FOREST — earthy vignette, botanical green ──────────── */ .featc-t4 .fcard { border-radius:16px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t4 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t4 .fcard-scrim { background:linear-gradient(180deg, rgba(5,30,15,0) 32%, rgba(8,53,31,.48) 58%, rgba(5,30,15,.93) 100%); } .featc-t4 .fcard:hover .fcard-scrim { background:linear-gradient(180deg, rgba(5,30,15,.1) 16%, rgba(8,53,31,.60) 50%, rgba(5,30,15,.97) 100%); } .featc-t4 .fcard-ribbon { background:linear-gradient(135deg,#16a34a,#65a30d); box-shadow:0 6px 16px rgba(22,163,74,.46); } .featc-t4 .fcard-chip { border-color:rgba(74,222,128,.42); background:rgba(5,30,15,.58); } .featc-t4 .fcard-tag { background:rgba(22,163,74,.18); border-color:rgba(74,222,128,.36); } .featc-t4 .fcard-cta { background:linear-gradient(135deg,#16a34a,#65a30d); box-shadow:0 8px 22px rgba(22,163,74,.44); } /* ── Theme 5 · ROYAL — sharp luxury, vignette top+bottom, gold badge ─ */ .featc-t5 .fcard { border-radius:14px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t5 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t5 .fcard-scrim { background:linear-gradient(180deg, rgba(30,22,63,.40) 0%, rgba(30,22,63,0) 32%, rgba(30,22,63,.88) 100%); } .featc-t5 .fcard:hover .fcard-scrim { background:linear-gradient(180deg, rgba(30,22,63,.48) 0%, rgba(30,22,63,.10) 28%, rgba(30,22,63,.94) 100%); } .featc-t5 .fcard-ribbon { background:linear-gradient(135deg,#d97706,#b45309); box-shadow:0 6px 16px rgba(217,119,6,.46); } .featc-t5 .fcard-chip { border-color:rgba(167,139,250,.46); background:rgba(30,22,63,.60); } .featc-t5 .fcard-tag { background:rgba(124,58,237,.20); border-color:rgba(167,139,250,.38); } .featc-t5 .fcard-cta { background:linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow:0 8px 22px rgba(124,58,237,.48); } .featc-t5 .fcard-price { color:#fde68a; } /* ── Theme 6 · CORAL — super-rounded bubbly, soft rose-amber ─────────*/ .featc-t6 .fcard { border-radius:34px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t6 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t6 .fcard-scrim { background:linear-gradient(165deg, rgba(120,15,50,0) 22%, rgba(244,63,94,.36) 58%, rgba(76,15,40,.92) 100%); } .featc-t6 .fcard:hover .fcard-scrim { background:linear-gradient(165deg, rgba(120,15,50,.12) 12%, rgba(244,63,94,.50) 52%, rgba(76,15,40,.96) 100%); } .featc-t6 .fcard-ribbon { background:linear-gradient(135deg,#f43f5e,#f59e0b); border-radius:12px; box-shadow:0 6px 16px rgba(244,63,94,.46); } .featc-t6 .fcard-chip { border-radius:14px; border-color:rgba(244,63,94,.40); background:rgba(76,15,40,.52); } .featc-t6 .fcard-tag { border-radius:12px; background:rgba(244,63,94,.16); border-color:rgba(244,63,94,.34); } .featc-t6 .fcard-cta { border-radius:999px; background:linear-gradient(135deg,#f43f5e,#f59e0b); box-shadow:0 8px 22px rgba(244,63,94,.46); } /* ── Theme 7 · MIDNIGHT — dark glass, neon cyan halo, holographic ──── */ .featc-t7 .fcard { border-radius:20px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t7 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); transform:translateY(-8px); } .featc-t7 .fcard-scrim { background:linear-gradient(180deg, rgba(7,11,22,.22) 0%, rgba(7,11,22,.20) 40%, rgba(7,11,22,.95) 100%); } .featc-t7 .fcard:hover .fcard-scrim { background:linear-gradient(180deg, rgba(7,11,22,.32) 0%, rgba(7,11,22,.28) 36%, rgba(7,11,22,.98) 100%); } .featc-t7 .fcard-ribbon { background:linear-gradient(135deg,#22d3ee,#6366f1); box-shadow:0 4px 16px rgba(34,211,238,.56); } .featc-t7 .fcard-chip { border-color:rgba(34,211,238,.52); background:rgba(7,11,22,.74); backdrop-filter:blur(10px); } .featc-t7 .fcard-tag { background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.32); } .featc-t7 .fcard-cta { background:linear-gradient(135deg,#22d3ee,#6366f1); box-shadow:0 6px 22px rgba(34,211,238,.52), 0 0 28px rgba(99,102,241,.20); } .featc-t7 .fcard-price { color:#67e8f9; } .featc-t7 .fcard-title { text-shadow:0 2px 18px rgba(34,211,238,.32); } /* ── Theme 8 · EMERALD — luxe concierge, gold accents, crisp corners ─ */ .featc-t8 .fcard { border-radius:10px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t8 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t8 .fcard-scrim { background:linear-gradient(180deg, rgba(5,30,20,0) 28%, rgba(5,30,20,.46) 56%, rgba(5,30,20,.93) 100%); } .featc-t8 .fcard:hover .fcard-scrim { background:linear-gradient(180deg, rgba(5,30,20,.10) 14%, rgba(5,30,20,.56) 50%, rgba(5,30,20,.96) 100%); } .featc-t8 .fcard-ribbon { background:linear-gradient(135deg,#d97706,#b45309); border-radius:4px; box-shadow:0 6px 16px rgba(217,119,6,.46); } .featc-t8 .fcard-chip { border-radius:6px; border-color:rgba(52,211,153,.42); background:rgba(5,30,20,.62); } .featc-t8 .fcard-tag { border-radius:4px; background:rgba(5,150,105,.18); border-color:rgba(52,211,153,.34); } .featc-t8 .fcard-cta { border-radius:6px; background:linear-gradient(135deg,#059669,#0d9488); box-shadow:0 8px 22px rgba(5,150,105,.44); } .featc-t8 .fcard-price { color:#fde68a; } /* ── Theme 9 · BERRY — electric magenta-violet, vivid neon ───────────*/ .featc-t9 .fcard { border-radius:20px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t9 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t9 .fcard-scrim { background:linear-gradient(170deg, rgba(46,16,101,0) 20%, rgba(192,38,211,.36) 56%, rgba(46,16,101,.92) 100%); } .featc-t9 .fcard:hover .fcard-scrim { background:linear-gradient(170deg, rgba(46,16,101,.12) 12%, rgba(192,38,211,.52) 50%, rgba(46,16,101,.96) 100%); } .featc-t9 .fcard-ribbon { background:linear-gradient(135deg,#d946ef,#8b5cf6); box-shadow:0 4px 16px rgba(217,70,239,.58); } .featc-t9 .fcard-chip { border-color:rgba(217,70,239,.50); background:rgba(46,16,101,.60); } .featc-t9 .fcard-tag { background:rgba(217,70,239,.16); border-color:rgba(217,70,239,.36); } .featc-t9 .fcard-cta { background:linear-gradient(135deg,#d946ef,#8b5cf6); box-shadow:0 8px 24px rgba(217,70,239,.52); } .featc-t9 .fcard-title { text-shadow:0 2px 20px rgba(217,70,239,.34); } /* ── Theme 10 · AURORA — prismatic scrim, multi-stop cyan→violet ─────*/ .featc-t10 .fcard { border-radius:22px; box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t10 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } .featc-t10 .fcard-scrim { background:linear-gradient(155deg, rgba(11,18,51,.08) 0%, rgba(14,58,138,.32) 35%, rgba(8,145,178,.40) 65%, rgba(124,58,237,.72) 100%); } .featc-t10 .fcard:hover .fcard-scrim { background:linear-gradient(155deg, rgba(11,18,51,.18) 0%, rgba(14,58,138,.44) 32%, rgba(8,145,178,.52) 62%, rgba(124,58,237,.84) 100%); } .featc-t10 .fcard-ribbon { background:linear-gradient(135deg,#06b6d4,#8b5cf6); box-shadow:0 4px 16px rgba(6,182,212,.54); } .featc-t10 .fcard-chip { border-color:rgba(6,182,212,.48); background:rgba(11,18,51,.62); backdrop-filter:blur(8px); } .featc-t10 .fcard-tag { background:rgba(6,182,212,.14); border-color:rgba(139,92,246,.38); } .featc-t10 .fcard-cta { background:linear-gradient(135deg,#06b6d4,#8b5cf6); box-shadow:0 8px 24px rgba(6,182,212,.48), 0 0 20px rgba(139,92,246,.18); } /* ============================================================ SHARED animation keyframes (cards) ============================================================ */ @keyframes pcShimmer { 0% { left:-120%; } 100% { left:135%; } } @keyframes pcGradShift { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } } @keyframes pcFloatBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } } /* fcard CTA — shine sweep on hover + animated gradient for vivid themes */ .fcard-cta { position:relative; overflow:hidden; } .fcard-cta::after { content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); pointer-events:none; } .fcard:hover .fcard-cta::after { animation:pcShimmer 1s ease .08s; } .featc-t7 .fcard-cta, .featc-t9 .fcard-cta, .featc-t10 .fcard-cta { background-size:220% 100%; animation:pcGradShift 4.5s linear infinite alternate; } /* ============================================================ PREMIUM LISTING CARD (.pkg-card) — refined base ============================================================ */ .pkg-card { border-radius:20px; border:1px solid color-mix(in srgb, var(--tp) 9%, #e6ebf4); box-shadow:0 10px 30px rgba(15,28,58,.09); transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s, border-color .3s; } .pkg-card:hover { transform:translateY(-8px); box-shadow:0 26px 54px rgba(15,28,58,.20); border-color:color-mix(in srgb, var(--tp) 30%, transparent); } .pkg-card img { height:216px; } .pkg-card .pkg-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(6,12,26,.30)); opacity:.5; transition:opacity .38s; pointer-events:none; } .pkg-card:hover .pkg-thumb::after { opacity:.82; } .pkg-chip { background:rgba(9,15,30,.55); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(7px); font-weight:700; letter-spacing:.2px; z-index:2; } .pkg-feat { transition:transform .2s, background .2s; } .pkg-card:hover .pkg-feat { transform:translateY(-1px); } .pkg-card .btn-tp { border-radius:999px; font-weight:700; letter-spacing:.2px; position:relative; overflow:hidden; } .pkg-card .btn-tp::after { content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); pointer-events:none; } .pkg-card:hover .btn-tp::after { animation:pcShimmer .95s ease .05s; } .pkg-card .from { transition:color .25s; } /* ── Theme 1 · CUSTOM — clean, accent bar reveals under image on hover ─ */ .theme-1 .pkg-card { border-radius:18px; } .theme-1 .pkg-card .pkg-thumb::before { content:""; position:absolute; left:0; bottom:0; height:4px; width:0; z-index:3; background:linear-gradient(90deg,var(--tp),var(--tp-2)); transition:width .4s cubic-bezier(.2,.7,.2,1); } .theme-1 .pkg-card:hover .pkg-thumb::before { width:100%; } /* ── Theme 2 · OCEAN — aqua glass, animated wave bar at image base ───── */ .theme-2 .pkg-card { border-radius:24px; border-color:rgba(14,165,233,.16); } .theme-2 .pkg-card:hover { box-shadow:0 26px 56px rgba(14,165,233,.28); } .theme-2 .pkg-card .pkg-thumb::before { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; z-index:3; background:linear-gradient(90deg,#0ea5e9,#38bdf8,#2563eb,#0ea5e9); background-size:200% 100%; animation:pcGradShift 4s linear infinite; } .theme-2 .pkg-chip { background:rgba(2,18,50,.5); border-color:rgba(56,189,248,.5); } .theme-2 .pkg-feat { background:rgba(14,165,233,.12); color:#0369a1; border:1px solid rgba(56,189,248,.3); } .theme-2 .pkg-card .from { color:#0284c7; font-size:1.18rem; } .theme-2 .pkg-card .btn-tp { background:linear-gradient(135deg,#0ea5e9,#2563eb); } .theme-2 .badge-flash { background:linear-gradient(135deg,#0ea5e9,#2563eb)!important; } /* ── Theme 3 · SUNSET — warm editorial, asymmetric corner, square tags ─ */ .theme-3 .pkg-card { border-radius:22px 22px 22px 5px; border-color:rgba(249,115,22,.18); } .theme-3 .pkg-card:hover { box-shadow:0 26px 54px rgba(249,115,22,.26); } .theme-3 .pkg-chip { background:rgba(60,10,10,.55); border-color:rgba(251,146,60,.5); } .theme-3 .pkg-feat { background:rgba(249,115,22,.12); color:#c2410c; border:1px solid rgba(251,146,60,.32); border-radius:6px; } .theme-3 .pkg-card .from { color:#ea580c; font-size:1.22rem; } .theme-3 .pkg-card .btn-tp { background:linear-gradient(135deg,#f97316,#db2777); border-radius:11px; } .theme-3 .badge-flash { background:linear-gradient(135deg,#f59e0b,#f97316)!important; } /* ── Theme 4 · FOREST — organic, ghost outline button fills on hover ─── */ .theme-4 .pkg-card { border-radius:16px; border-color:rgba(22,163,74,.2); } .theme-4 .pkg-card:hover { box-shadow:0 24px 52px rgba(22,163,74,.24); } .theme-4 .pkg-chip { background:rgba(5,30,15,.6); border-color:rgba(74,222,128,.5); } .theme-4 .pkg-feat { background:rgba(22,163,74,.1); color:#15803d; border:1px solid rgba(74,222,128,.34); } .theme-4 .pkg-card .from { color:#16a34a; font-size:1.18rem; } .theme-4 .pkg-card .btn-tp { background:transparent; color:#15803d; border:1.8px solid #16a34a; box-shadow:none; } .theme-4 .pkg-card .btn-tp:hover { background:#16a34a; color:#fff; } .theme-4 .badge-flash { background:linear-gradient(135deg,#16a34a,#65a30d)!important; } /* ── Theme 5 · ROYAL — LUXE DARK card on light page, gold price+divider ─ */ .theme-5 .pkg-card { border-radius:12px; background:#171233; border:1px solid #2c2456; box-shadow:0 16px 42px rgba(30,22,63,.32); } .theme-5 .pkg-card .card-body { color:#d8d3f0; } .theme-5 .pkg-card h5 a, .theme-5 .pkg-card h6 a { color:#fff !important; } .theme-5 .pkg-card .text-muted, .theme-5 .pkg-card .small { color:#a99fce !important; } .theme-5 .pkg-card .from { color:#fcd34d; font-size:1.22rem; } .theme-5 .pkg-feat { background:rgba(124,58,237,.24); color:#c4b5fd; border:1px solid rgba(167,139,250,.32); } .theme-5 .pkg-chip { background:rgba(0,0,0,.55); border-color:rgba(252,211,77,.4); } .theme-5 .pkg-card .pkg-thumb::before { content:""; position:absolute; left:16px; right:16px; bottom:0; height:1px; z-index:3; background:linear-gradient(90deg,transparent,#fcd34d,transparent); } .theme-5 .pkg-card .btn-tp { background:linear-gradient(135deg,#7c3aed,#4f46e5); } .theme-5 .badge-flash { background:linear-gradient(135deg,#d97706,#b45309)!important; } /* ── Theme 6 · CORAL — bubbly super-round, bouncy lift, squircle tags ── */ .theme-6 .pkg-card { border-radius:28px; border:0; box-shadow:0 14px 36px rgba(244,63,94,.16); } .theme-6 .pkg-card:hover { transform:translateY(-11px); box-shadow:0 32px 62px rgba(244,63,94,.30); } .theme-6 .pkg-card img { height:204px; } .theme-6 .pkg-chip { border-radius:13px; background:rgba(76,15,40,.55); border-color:rgba(244,63,94,.45); } .theme-6 .pkg-feat { background:rgba(244,63,94,.12); color:#e11d48; border-radius:9px; } .theme-6 .pkg-card .from { color:#f43f5e; font-size:1.2rem; } .theme-6 .pkg-card .btn-tp { border-radius:999px; background:linear-gradient(135deg,#f43f5e,#f59e0b); } .theme-6 .badge-flash { background:linear-gradient(135deg,#f43f5e,#f59e0b)!important; } /* ── Theme 7 · MIDNIGHT — neon dark, cyan glow ring, holographic tags ── */ .theme-7 .pkg-card { border-radius:14px; border:1px solid #21314f; box-shadow:0 14px 40px rgba(0,0,0,.5); } .theme-7 .pkg-card:hover { border-color:rgba(34,211,238,.55); box-shadow:0 26px 56px rgba(0,0,0,.6), 0 0 36px rgba(34,211,238,.18); } .theme-7 .pkg-feat { background:rgba(34,211,238,.1); color:#67e8f9; border:1px solid rgba(34,211,238,.32); } .theme-7 .pkg-chip { background:rgba(7,11,22,.72); border-color:rgba(34,211,238,.42); } .theme-7 .pkg-card .from { color:#67e8f9; font-size:1.2rem; } .theme-7 .pkg-card .btn-tp { background:linear-gradient(135deg,#22d3ee,#6366f1); box-shadow:0 6px 22px rgba(34,211,238,.42); } .theme-7 .badge-flash { background:linear-gradient(135deg,#22d3ee,#6366f1)!important; } /* ── Theme 8 · EMERALD — concierge luxe, crisp corners, gold, uppercase ─ */ .theme-8 .pkg-card { border-radius:6px; border:1px solid rgba(5,150,105,.22); box-shadow:0 12px 32px rgba(5,30,20,.1); } .theme-8 .pkg-card:hover { box-shadow:0 24px 50px rgba(5,150,105,.2); } .theme-8 .pkg-card .pkg-thumb::before { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3; background:linear-gradient(90deg,#059669,#b8860b); } .theme-8 .pkg-feat { background:transparent; color:#047857; border:1px solid rgba(5,150,105,.36); border-radius:3px; text-transform:uppercase; letter-spacing:.6px; font-size:.65rem; padding:3px 8px; } .theme-8 .pkg-chip { border-radius:3px; background:rgba(5,30,20,.62); border-color:rgba(184,134,11,.5); } .theme-8 .pkg-card .from { color:#b8860b; font-size:1.2rem; } .theme-8 .pkg-card .btn-tp { border-radius:4px; background:linear-gradient(135deg,#059669,#0d9488); } .theme-8 .badge-flash { border-radius:3px; background:linear-gradient(135deg,#d97706,#b45309)!important; } /* ── Theme 9 · BERRY — vivid, gradient-text price, animated CTA ──────── */ .theme-9 .pkg-card { border-radius:20px; border-color:rgba(217,70,239,.2); } .theme-9 .pkg-card:hover { box-shadow:0 26px 58px rgba(217,70,239,.30); } .theme-9 .pkg-feat { background:rgba(217,70,239,.1); color:#a21caf; border:1px solid rgba(217,70,239,.3); } .theme-9 .pkg-chip { background:rgba(46,16,101,.6); border-color:rgba(217,70,239,.42); } .theme-9 .pkg-card .from { background:linear-gradient(135deg,#d946ef,#8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-size:1.26rem; } .theme-9 .pkg-card .btn-tp { background:linear-gradient(135deg,#d946ef,#8b5cf6,#d946ef); background-size:200% 100%; animation:pcGradShift 4s linear infinite; } .theme-9 .badge-flash { background:linear-gradient(135deg,#d946ef,#8b5cf6)!important; } /* ── Theme 10 · AURORA — prismatic animated top bar, glass tags ──────── */ .theme-10 .pkg-card { border-radius:20px; border-color:rgba(6,182,212,.18); } .theme-10 .pkg-card:hover { box-shadow:0 26px 58px rgba(6,182,212,.24); } .theme-10 .pkg-card .pkg-thumb::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; z-index:3; background:linear-gradient(90deg,#06b6d4,#8b5cf6,#22d3ee,#06b6d4); background-size:300% 100%; animation:pcGradShift 5s linear infinite; } .theme-10 .pkg-feat { background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(139,92,246,.12)); color:#0891b2; border:1px solid rgba(139,92,246,.3); } .theme-10 .pkg-chip { background:rgba(11,18,51,.6); border-color:rgba(6,182,212,.42); backdrop-filter:blur(8px); } .theme-10 .pkg-card .from { color:#0891b2; font-size:1.2rem; } .theme-10 .pkg-card .btn-tp { background:linear-gradient(135deg,#06b6d4,#8b5cf6,#06b6d4); background-size:200% 100%; animation:pcGradShift 4s linear infinite; } .theme-10 .badge-flash { background:linear-gradient(135deg,#06b6d4,#8b5cf6)!important; } /* ============================================================ CINEMATIC FALLBACK BACKGROUNDS (no cover image) + refined per-theme shadows. Each theme = a distinct designed "scene". ============================================================ */ /* Ocean — sea, sky & sun-glow */ .featc-t2 .fcard-fallback, .theme-2 .pkg-fallback, .theme-2 .dest-fallback { background: radial-gradient(72% 55% at 82% 6%, #7dd3fc 0%, transparent 55%), radial-gradient(92% 70% at 10% 114%, #1e40af 0%, transparent 60%), linear-gradient(160deg, #0ea5e9 0%, #0b3a86 55%, #071f47 100%); } .featc-t2 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t2 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Sunset — warm dusk sky */ .featc-t3 .fcard-fallback, .theme-3 .pkg-fallback, .theme-3 .dest-fallback { background: radial-gradient(82% 60% at 78% -2%, #fcd34d 0%, transparent 52%), radial-gradient(85% 65% at 6% 110%, #be185d 0%, transparent 56%), linear-gradient(160deg, #fb923c 0%, #db2777 55%, #7c2d12 100%); } .featc-t3 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t3 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Forest — misty valley */ .featc-t4 .fcard-fallback, .theme-4 .pkg-fallback, .theme-4 .dest-fallback { background: radial-gradient(76% 55% at 80% 4%, #86efac 0%, transparent 52%), radial-gradient(88% 66% at 8% 112%, #14532d 0%, transparent 58%), linear-gradient(160deg, #22c55e 0%, #166534 55%, #08351f 100%); } .featc-t4 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t4 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Royal — purple velvet */ .featc-t5 .fcard-fallback, .theme-5 .pkg-fallback, .theme-5 .dest-fallback { background: radial-gradient(70% 55% at 82% 2%, #c4b5fd 0%, transparent 52%), radial-gradient(82% 62% at 6% 112%, #4c1d95 0%, transparent 58%), linear-gradient(160deg, #7c3aed 0%, #4338ca 55%, #1e163f 100%); } .featc-t5 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t5 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Coral — soft rose horizon */ .featc-t6 .fcard-fallback, .theme-6 .pkg-fallback, .theme-6 .dest-fallback { background: radial-gradient(76% 55% at 80% 2%, #fda4af 0%, transparent 52%), radial-gradient(86% 66% at 6% 112%, #9f1239 0%, transparent 56%), linear-gradient(160deg, #fb7185 0%, #e11d48 55%, #4c0f28 100%); } .featc-t6 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t6 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Midnight — deep space, neon rim */ .featc-t7 .fcard-fallback, .theme-7 .pkg-fallback, .theme-7 .dest-fallback { background: radial-gradient(70% 50% at 82% 6%, #22d3ee 0%, transparent 46%), radial-gradient(80% 60% at 10% 114%, #4f46e5 0%, transparent 55%), linear-gradient(160deg, #0e2a4a 0%, #0a1730 55%, #05080f 100%); } .featc-t7 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t7 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Emerald — deep jade & gold */ .featc-t8 .fcard-fallback, .theme-8 .pkg-fallback, .theme-8 .dest-fallback { background: radial-gradient(72% 52% at 80% 2%, #6ee7b7 0%, transparent 50%), radial-gradient(72% 56% at 8% 110%, #b8860b 0%, transparent 52%), linear-gradient(160deg, #059669 0%, #065f46 55%, #052e26 100%); } .featc-t8 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t8 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Berry — magenta neon */ .featc-t9 .fcard-fallback, .theme-9 .pkg-fallback, .theme-9 .dest-fallback { background: radial-gradient(72% 55% at 82% 2%, #f0abfc 0%, transparent 52%), radial-gradient(82% 62% at 6% 112%, #6b21a8 0%, transparent 56%), linear-gradient(160deg, #d946ef 0%, #a21caf 50%, #2e1065 100%); } .featc-t9 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t9 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Aurora — northern-lights sky */ .featc-t10 .fcard-fallback, .theme-10 .pkg-fallback, .theme-10 .dest-fallback { background: radial-gradient(58% 48% at 80% -2%, #22d3ee 0%, transparent 48%), radial-gradient(58% 48% at 22% 8%, #a78bfa 0%, transparent 50%), radial-gradient(82% 60% at 50% 116%, #0891b2 0%, transparent 55%), linear-gradient(160deg, #0e7490 0%, #6d28d9 55%, #0b1233 100%); } .featc-t10 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t10 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* Custom (theme-1) — refined clean shadow */ .featc-t1 .fcard { box-shadow:0 16px 38px -22px rgba(17,24,39,.20); } .featc-t1 .fcard:hover { box-shadow:0 24px 48px -24px rgba(17,24,39,.30); } /* ---- Premium filter panel — dark (Midnight theme-7) overrides ---- */ .theme-7 .pfilter { background:linear-gradient(180deg,#111a2e,#0d1626); border-color:#22304d; box-shadow:0 18px 44px -26px rgba(0,0,0,.7); } .theme-7 .pfilter-head { border-color:#22304d; } .theme-7 .pfilter-title { color:#eaf0fb; } .theme-7 .pfilter-clear { background:#18233b; color:#9fb0cc; } .theme-7 .pfilter-clear:hover { background:#3a1a24; color:#fda4af; } .theme-7 .pfilter-group { border-color:#22304d; } .theme-7 .pfg-head { color:#eaf0fb; } .theme-7 .pchk { background:#0e1830; border-color:#28344f; color:#c7d2e6; } .theme-7 .pchk .cnt { background:#1b2740; color:#93a3c4; } .theme-7 .pseg { background:#0e1830; } .theme-7 .pseg-opt span { color:#9fb0cc; } .theme-7 .pseg-opt:has(input:checked) span { background:#1c2b45; color:#67e8f9; } .theme-7 .range-vals .rv-cell { background:#0e1830; border-color:#28344f; } .theme-7 .range-vals .rv-min, .theme-7 .range-vals .rv-max { color:#eaf0fb; } .theme-7 .rs-track { background:#243149; box-shadow:none; } .theme-7 .rs-handle { background:#0e1830; } .theme-7 .active-filters { background:#111a2e; border-color:#22304d; } .theme-7 .pl-count { color:#eaf0fb; } .theme-7 .pl-tools select { background-color:#0e1830; border-color:#28344f; color:#eaf0fb; } .theme-7 .view-toggle { background:#0e1830; border-color:#28344f; } .theme-7 .af-chip { background:#132038; border-color:#28405f; color:#dbe6f7; } /* ============================================================================ OFFERS & DEALS — premium coupon tickets (animated gradient, tap-to-copy) ============================================================================ */ .offers-wrap { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .offer-banner { grid-column:1 / -1; display:block; border-radius:20px; overflow:hidden; box-shadow:0 14px 34px -18px rgba(12,22,46,.42); } .offer-banner img { width:100%; max-height:200px; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .offer-banner:hover img { transform:scale(1.05); } .offer-ticket { position:relative; min-width:0; border-radius:20px; padding:2px; isolation:isolate; background:linear-gradient(135deg, color-mix(in srgb,var(--tp) 60%,transparent), transparent 42%, color-mix(in srgb,var(--tp-2,#6bb0ff) 60%,transparent)); animation:offRise .6s both cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i,0)*.08s); transition:transform .4s cubic-bezier(.2,.7,.2,1); } .offer-ticket:hover { transform:translateY(-6px); } .offer-glow { position:absolute; inset:0; z-index:-1; border-radius:24px; opacity:0; transition:opacity .4s; box-shadow:0 28px 60px -22px color-mix(in srgb,var(--tp) 65%,transparent); } .offer-ticket:hover .offer-glow { opacity:1; } .offer-ticket-in { position:relative; display:flex; align-items:stretch; min-width:0; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#0b1836,#122a52); color:#fff; min-height:122px; } /* soft aurora orbs drifting inside the ticket (no spinning — calm, premium glow) */ .offer-ticket-in::before, .offer-ticket-in::after { content:""; position:absolute; z-index:0; border-radius:50%; filter:blur(24px); pointer-events:none; will-change:transform; } .offer-ticket-in::before { width:62%; height:170%; left:-10%; top:-34%; background:radial-gradient(closest-side, color-mix(in srgb,var(--tp) 70%,transparent), transparent 72%); opacity:.6; animation:offOrbA 11s ease-in-out infinite alternate; } .offer-ticket-in::after { width:56%; height:160%; right:-8%; bottom:-34%; background:radial-gradient(closest-side, color-mix(in srgb,var(--tp-2,#4aa8ff) 62%,transparent), transparent 72%); opacity:.5; animation:offOrbB 14s ease-in-out infinite alternate; } .offer-left, .offer-right { position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:18px 22px; } .offer-left { flex:1 1 auto; } .offer-sub { overflow:hidden; text-overflow:ellipsis; } .offer-code { max-width:100%; } .offer-code-txt { overflow:hidden; text-overflow:ellipsis; } .offer-right { flex:0 0 auto; align-items:center; text-align:center; background:rgba(255,255,255,.045); } .offer-tag { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:color-mix(in srgb,var(--tp-2,#8ec5ff) 85%,#fff); margin-bottom:8px; } .offer-val { font-size:1.72rem; font-weight:900; line-height:1; letter-spacing:-.02em; background:linear-gradient(120deg,#fff,color-mix(in srgb,var(--tp-2,#8ec5ff) 78%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; } .offer-sub { margin-top:7px; font-size:.82rem; color:rgba(255,255,255,.62); } .offer-perf { position:relative; z-index:2; width:1px; flex:0 0 1px; align-self:stretch; } .offer-perf::before { content:""; position:absolute; top:10px; bottom:10px; left:0; width:2px; background-image:radial-gradient(circle, rgba(255,255,255,.6) 0 1.6px, transparent 2px); background-size:2px 12px; background-repeat:repeat-y; } .offer-code-lbl { font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.5); margin-bottom:7px; } .offer-code { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px dashed rgba(255,255,255,.42); background:rgba(255,255,255,.06); color:#fff; font-weight:800; letter-spacing:.05em; padding:9px 13px; border-radius:11px; transition:border-color .3s, background .3s, transform .12s, color .3s; } .offer-code:hover { background:rgba(255,255,255,.13); border-color:#fff; } .offer-code:active { transform:scale(.95); } .offer-copy, .offer-check { display:inline-flex; } .offer-check { display:none; } .offer-code.is-copied { border-color:#34d399; color:#eafff6; } .offer-code.is-copied .offer-copy { display:none; } .offer-code.is-copied .offer-check { display:inline-flex; color:#34d399; } .offer-code.is-copied::after { content:"Copied!"; position:absolute; top:-30px; left:50%; transform:translateX(-50%); background:#0b1836; color:#eafff6; font-size:.64rem; font-weight:700; padding:4px 9px; border-radius:7px; white-space:nowrap; box-shadow:0 8px 18px -6px rgba(0,0,0,.55); animation:offPop .3s both; } .offer-sheen { position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; } .offer-sheen::before { content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg); opacity:0; } .offer-ticket:hover .offer-sheen::before { animation:fsheen 1s ease; } @keyframes offSpin { to { transform:rotate(1turn); } } @keyframes offOrbA { 0% { transform:translate(-4%,-2%) scale(1); } 100% { transform:translate(20%,12%) scale(1.22); } } @keyframes offOrbB { 0% { transform:translate(4%,2%) scale(1.12); } 100% { transform:translate(-18%,-14%) scale(.98); } } @keyframes offRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes offPop { from { opacity:0; transform:translate(-50%,4px); } to { opacity:1; transform:translate(-50%,0); } } @media (max-width:640px){ .offers-wrap { grid-template-columns:1fr; } .offer-val { font-size:1.5rem; } .offer-left, .offer-right { padding:15px 16px; } .offer-code { padding:8px 10px; font-size:.9rem; } } /* ============================================================================ WHY BOOK WITH US — premium feature cards (conic ring icon, hover spotlight) ============================================================================ */ .why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .why-card { position:relative; min-width:0; text-align:center; padding:32px 20px 26px; border-radius:22px; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,#fff,#f6f9ff); border:1px solid color-mix(in srgb,var(--tp) 12%,#e6ecf5); box-shadow:0 12px 30px -20px rgba(12,22,46,.35); animation:offRise .6s both cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i,0)*.09s); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; } .why-card::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s; background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--tp) 15%,transparent), transparent 60%); } .why-card:hover { transform:translateY(-8px); box-shadow:0 30px 62px -28px color-mix(in srgb,var(--tp) 55%,rgba(12,22,46,.5)); border-color:color-mix(in srgb,var(--tp) 42%,transparent); } .why-card:hover::before { opacity:1; } .why-idx { position:absolute; top:14px; right:16px; font-size:.72rem; font-weight:800; letter-spacing:.05em; color:color-mix(in srgb,var(--tp) 38%,#c7d3e6); } .why-ic { position:relative; width:66px; height:66px; margin:0 auto 16px; display:grid; place-items:center; border-radius:20px; color:var(--tp); background:linear-gradient(135deg, color-mix(in srgb,var(--tp) 16%,#fff), color-mix(in srgb,var(--tp-2,#8ec5ff) 22%,#fff)); transition:transform .45s cubic-bezier(.2,.7,.2,1); } .why-ic::before { content:""; position:absolute; inset:-3px; border-radius:23px; z-index:-1; padding:3px; background:conic-gradient(from 0deg, var(--tp), var(--tp-2,#8ec5ff), var(--tp)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; animation:offSpin 6s linear infinite; } .why-card:hover .why-ic { transform:translateY(-4px) rotate(-6deg) scale(1.07); } .why-card:hover .why-ic::before { opacity:1; } .why-ic .lucide { transition:transform .4s; } .why-card:hover .why-ic .lucide { transform:scale(1.08); } .why-title { font-weight:800; font-size:1.02rem; margin:0 0 5px; color:#0b1836; } .why-text { font-size:.84rem; color:#5a6b85; margin:0; line-height:1.4; } @media (max-width:800px){ .why-grid { grid-template-columns:repeat(2,1fr); gap:14px; } } @media (max-width:400px){ .why-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .offer-ticket, .why-card { animation:none; } .offer-ticket-in::before, .offer-ticket-in::after, .why-ic::before { animation:none; } .offer-ticket:hover, .why-card:hover, .why-card:hover .why-ic { transform:none; } } /* ============================================================================ DESTINATION PAGE — cinematic hero, gallery mosaic + lightbox, About ============================================================================ */ .dhero { position:relative; overflow:hidden; min-height:clamp(380px,56vh,560px); display:flex; align-items:flex-end; color:#fff; isolation:isolate; } .dhero-media { position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg,#0b1836,#123); background-size:cover; background-position:center; transform:scale(1.06); animation:dKen 18s ease-in-out infinite alternate; } .dhero-veil { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(7,12,26,.28) 0%, rgba(7,12,26,.5) 52%, rgba(7,12,26,.9) 100%); } .dhero-in { width:100%; padding-top:48px; padding-bottom:40px; } /* keep the container's side padding intact */ .dcrumb { display:flex; align-items:center; gap:8px; font-size:.82rem; margin-bottom:18px; color:rgba(255,255,255,.75); } .dcrumb a { color:rgba(255,255,255,.75); text-decoration:none; } .dcrumb a:hover { color:#fff; } .dcrumb b { color:#fff; } .dbadges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .dbadge { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.24); color:#fff; } .dbadge-glow { background:rgba(255,255,255,.16); border-color:rgba(255,214,150,.55); box-shadow:0 6px 18px -8px rgba(0,0,0,.4); } .dbadge-glow .lucide { color:#ffd68c; } .dhero-title { color:#fff; font-size:clamp(2.1rem,5vw,3.4rem); font-weight:900; line-height:1.02; letter-spacing:-.02em; margin:0 0 10px; text-shadow:0 3px 24px rgba(0,0,0,.4); } .dhero-sub { max-width:640px; font-size:1.05rem; color:rgba(255,255,255,.9); margin-bottom:22px; } .dhero-sub p { margin:0; } .dhero-cta { display:flex; flex-wrap:wrap; gap:12px; } .dhero-cta .lucide { vertical-align:-3px; margin-right:4px; } @keyframes dKen { from { transform:scale(1.06) translateY(0); } to { transform:scale(1.14) translateY(-2%); } } /* gallery mosaic */ .dgallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:186px; grid-auto-flow:dense; gap:14px; } .dgal-item { position:relative; display:block; border-radius:18px; overflow:hidden; cursor:pointer; height:100%; box-shadow:0 14px 34px -20px rgba(12,22,46,.5); animation:offRise .6s both cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i,0)*.07s); } .dgal-item:first-child { grid-column:span 2; grid-row:span 2; } .dgal-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .dgal-item::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,12,26,.35)); opacity:0; transition:opacity .35s; } .dgal-item:hover img { transform:scale(1.09); } .dgal-item:hover::after { opacity:1; } .dgal-zoom { position:absolute; right:12px; bottom:12px; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#fff; background:rgba(10,18,40,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); opacity:0; transform:translateY(6px) scale(.9); transition:all .35s cubic-bezier(.2,.7,.2,1); } .dgal-item:hover .dgal-zoom { opacity:1; transform:none; } @media (max-width:800px){ .dgallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .dgal-item:first-child { grid-column:span 2; grid-row:span 1; } } /* lightbox */ .dlb { position:fixed; inset:0; z-index:4000; display:none; align-items:center; justify-content:center; background:rgba(5,9,20,.9); backdrop-filter:blur(10px); } .dlb.is-open { display:flex; animation:dlbFade .25s ease; } .dlb-stage { margin:0; max-width:92vw; max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:10px; } .dlb-stage img { max-width:92vw; max-height:80vh; border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:dlbPop .3s cubic-bezier(.2,.7,.2,1); } .dlb-cap { color:rgba(255,255,255,.7); font-size:.85rem; letter-spacing:.05em; } .dlb-close { position:absolute; top:18px; right:22px; width:46px; height:46px; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-size:1.7rem; line-height:1; transition:background .25s, transform .25s; } .dlb-close:hover { background:rgba(255,255,255,.24); transform:rotate(90deg); } .dlb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; transition:background .25s, transform .2s; } .dlb-nav:hover { background:rgba(255,255,255,.26); } .dlb-prev { left:18px; } .dlb-next { right:18px; } .dlb-prev:hover { transform:translateY(-50%) translateX(-3px); } .dlb-next:hover { transform:translateY(-50%) translateX(3px); } @keyframes dlbFade { from { opacity:0; } to { opacity:1; } } @keyframes dlbPop { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } } /* About typography */ #dpackages { scroll-margin-top:84px; } .dpanel-body { max-width:820px; color:#33415a; font-size:1.02rem; line-height:1.75; } .dpanel-body h3 { font-size:1.2rem; font-weight:800; color:#0b1836; margin:26px 0 10px; } .dpanel-body p { margin:0 0 14px; } .dpanel-body ul { padding-left:0; list-style:none; margin:0 0 16px; } .dpanel-body ul li { position:relative; padding-left:28px; margin-bottom:9px; } .dpanel-body ul li::before { content:""; position:absolute; left:2px; top:.55em; width:9px; height:9px; border-radius:3px; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 2px 8px -2px color-mix(in srgb,var(--tp) 70%,transparent); } .dpanel-body strong { color:#0b1836; } @media (max-width:600px){ .dhero { min-height:66vh; } .dhero-in { padding-top:28px; padding-bottom:26px; padding-left:20px; padding-right:20px; } /* comfortable side gutters */ .dcrumb { margin-bottom:13px; font-size:.78rem; } /* chips: single-line horizontal swipe strip — never wraps awkwardly */ .dbadges { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .dbadges::-webkit-scrollbar { display:none; } .dbadge { flex:0 0 auto; } .dhero-title { font-size:2.15rem; margin-bottom:8px; } .dhero-sub { font-size:.98rem; margin-bottom:20px; } .dhero-cta { flex-direction:column; gap:10px; } .dhero-cta .btn { width:100%; justify-content:center; } .dlb-nav { width:44px; height:44px; } } @media (prefers-reduced-motion:reduce){ .dhero-media { animation:none; } .dgal-item { animation:none; } } /* ============================================================================ CHECKOUT — premium booking page (guest details, live coupon, sticky summary) ============================================================================ */ .co-wrap { padding:40px 0 70px; } .co-head { text-align:center; margin-bottom:26px; } .co-steps { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; } .co-step { font-size:.73rem; font-weight:700; color:#8a97ad; padding:5px 12px; border-radius:999px; background:#eef1f6; display:inline-flex; align-items:center; gap:5px; } .co-step.active { color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); } .co-step.done { color:var(--tp); background:color-mix(in srgb,var(--tp) 12%,#fff); } .co-sep { width:20px; height:2px; background:#dde3ec; border-radius:2px; } .co-title { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; letter-spacing:-.02em; margin:0 0 6px; color:#0b1836; } .co-subtitle { color:#5a6b85; margin:0; font-size:.97rem; } .co-lock { display:inline-flex; align-items:center; gap:4px; color:#12b76a; font-weight:700; font-size:.85rem; margin-left:4px; } .co-alert { display:flex; align-items:center; gap:10px; background:#fef2f2; border:1px solid #fecaca; color:#b42318; padding:12px 16px; border-radius:14px; margin-bottom:18px; font-weight:600; } .co-grid { display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start; } .co-main { display:flex; flex-direction:column; gap:20px; min-width:0; } .co-card { background:#fff; border:1px solid #eef1f6; border-radius:22px; padding:24px; box-shadow:0 16px 40px -28px rgba(12,22,46,.4); } .co-sec { display:flex; align-items:center; gap:12px; margin-bottom:18px; } .co-sec-ic { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--tp); background:color-mix(in srgb,var(--tp) 12%,#fff); } .co-sec h2 { margin:0; font-size:1.14rem; font-weight:800; color:#0b1836; } .co-sec p { margin:0; font-size:.82rem; color:#8a97ad; } .co-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .co-field { display:flex; flex-direction:column; gap:6px; min-width:0; } .co-field.co-col-2 { grid-column:1 / -1; } .co-field label { font-size:.82rem; font-weight:700; color:#33415a; } .co-field label b { color:var(--tp); } .co-field label span { font-weight:500; color:#98a4b8; } .co-input { width:100%; border:1.5px solid #e4e9f2; border-radius:13px; padding:12px 14px; font-size:.95rem; color:#0b1836; background:#fbfcfe; transition:border-color .2s, box-shadow .2s, background .2s; } .co-input::placeholder { color:#aab4c5; } .co-input:focus { outline:0; border-color:var(--tp); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 15%,transparent); } .co-coupon { display:flex; gap:8px; } .co-coupon .co-input { flex:1; text-transform:uppercase; letter-spacing:.04em; font-weight:700; } .co-apply { flex:0 0 auto; border:0; cursor:pointer; padding:0 20px; border-radius:13px; font-weight:800; font-size:.9rem; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); transition:transform .15s, box-shadow .2s, opacity .2s; } .co-apply:hover { transform:translateY(-1px); box-shadow:0 10px 22px -8px color-mix(in srgb,var(--tp) 60%,transparent); } .co-apply:disabled { opacity:.6; cursor:default; } .co-coupon-msg { font-size:.8rem; font-weight:600; margin-top:3px; min-height:1em; } .co-coupon-msg.ok { color:#12b76a; } .co-coupon-msg.err { color:#e5484d; } .co-pay { display:flex; align-items:center; gap:13px; padding:15px 16px; border:1.5px solid #e7ecf4; border-radius:16px; cursor:pointer; margin-bottom:11px; transition:border-color .2s, background .2s, box-shadow .2s; position:relative; } .co-pay:last-child { margin-bottom:0; } .co-pay:hover { border-color:color-mix(in srgb,var(--tp) 40%,#e7ecf4); } .co-pay.sel { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 6%,#fff); box-shadow:0 8px 22px -14px color-mix(in srgb,var(--tp) 60%,transparent); } .co-pay-radio { position:absolute; opacity:0; pointer-events:none; } .co-pay-dot { flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid #cfd8e6; transition:border-color .2s; position:relative; } .co-pay.sel .co-pay-dot { border-color:var(--tp); } .co-pay.sel .co-pay-dot::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--tp); } .co-pay-txt { flex:1; min-width:0; display:flex; flex-direction:column; } .co-pay-txt b { font-size:.95rem; color:#0b1836; font-weight:800; } .co-pay-txt span { font-size:.79rem; color:#8a97ad; } .co-pay-amt { flex:0 0 auto; font-weight:800; color:#0b1836; font-size:1rem; } .co-pay-off { color:var(--tp); } .co-side { position:sticky; top:88px; } .co-summary { border-radius:22px; overflow:hidden; background:#fff; border:1px solid #eef1f6; box-shadow:0 22px 50px -30px rgba(12,22,46,.5); } .co-sum-hero { position:relative; height:130px; background:linear-gradient(135deg,#0b1836,#14315e); } .co-sum-hero img { width:100%; height:100%; object-fit:cover; } .co-sum-veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,12,26,.12),rgba(6,12,26,.82)); } .co-sum-hero-txt { position:absolute; left:18px; right:18px; bottom:14px; color:#fff; } .co-sum-hero-txt h3 { margin:0 0 2px; font-size:1.1rem; font-weight:800; line-height:1.2; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45); } .co-sum-hero-txt span { font-size:.8rem; color:rgba(255,255,255,.82); } .co-sum-body { padding:18px 20px 20px; } .co-row { display:flex; justify-content:space-between; gap:10px; font-size:.9rem; color:#33415a; padding:5px 0; } .co-row.muted { color:#8a97ad; font-size:.85rem; } .co-row.co-disc { color:#12b76a; font-weight:700; } .co-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:12px; border-top:1px dashed #e2e8f2; font-size:1.05rem; font-weight:800; color:#0b1836; } .co-total span:last-child { font-size:1.4rem; color:var(--tp); } .co-seats { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:.78rem; font-weight:700; color:#12b76a; background:color-mix(in srgb,#12b76a 12%,#fff); padding:5px 10px; border-radius:999px; } .co-seats.low { color:#e5484d; background:color-mix(in srgb,#e5484d 12%,#fff); } .co-cta { width:100%; margin-top:16px; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 20px; border-radius:16px; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 16px 34px -12px color-mix(in srgb,var(--tp) 60%,transparent); transition:transform .18s, box-shadow .2s; } .co-cta span { display:inline-flex; align-items:center; gap:8px; font-size:1rem; } .co-cta b { font-size:1.05rem; } .co-cta:hover { transform:translateY(-2px); box-shadow:0 22px 44px -14px color-mix(in srgb,var(--tp) 65%,transparent); } .co-trust { margin-top:12px; text-align:center; font-size:.76rem; color:#98a4b8; } .co-trust a { color:var(--tp); } .co-bar { display:none; } @media (max-width:900px){ .co-grid { grid-template-columns:1fr; } .co-side { position:static; } .co-summary { max-width:520px; margin:0 auto; } } @media (max-width:767px){ .co-wrap { padding:24px 0 86px; } .co-cta { display:none; } /* replaced by sticky bar (sits above the app nav) */ .co-bar { display:flex; position:fixed; left:0; right:0; bottom:64px; z-index:1039; align-items:center; gap:12px; padding:10px 14px; background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border-top:1px solid rgba(15,28,58,.1); box-shadow:0 -12px 30px -16px rgba(12,22,46,.3); } .co-bar-price { display:flex; flex-direction:column; line-height:1.12; } .co-bar-price span { font-size:.68rem; color:#8a97ad; font-weight:600; } .co-bar-price b { font-size:1.12rem; color:#0b1836; } .co-bar-btn { flex:1; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:14px; color:#fff; font-weight:800; font-size:.98rem; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 12px 26px -10px color-mix(in srgb,var(--tp) 60%,transparent); } } @media (max-width:600px){ .co-fields { grid-template-columns:1fr; } .co-card { padding:18px; border-radius:18px; } } /* ---- Destinations LISTING — premium travel cards (image + title + description) ---- */ /* dynamic collage: 4-col grid built from full-width bands → mixes big/wide/tall/normal, always flush */ .dcard-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; grid-auto-flow:row dense; gap:22px; } .dcard { display:flex; flex-direction:column; height:100%; border-radius:22px; overflow:hidden; background:#fff; text-decoration:none; color:inherit; border:1px solid #eef1f6; box-shadow:0 16px 38px -24px rgba(12,22,46,.4); animation:offRise .6s both cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i,0)*.06s); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; } .dcard:hover { transform:translateY(-8px); box-shadow:0 34px 62px -28px color-mix(in srgb,var(--tp) 45%,rgba(12,22,46,.55)); border-color:color-mix(in srgb,var(--tp) 30%,transparent); } /* collage spans — mixed tiles */ .dcard-grid > .dcard.c-big { grid-column:span 2; grid-row:span 2; } .dcard-grid > .dcard.c-wide { grid-column:span 2; grid-row:span 1; } .dcard-grid > .dcard.c-tall { grid-column:span 1; grid-row:span 2; } .dcard-grid--n1 { grid-template-columns:1fr; } .dcard-grid--n1 > .dcard.c-big { grid-column:1 / -1; grid-row:span 2; } .dcard-grid--n2 { grid-template-columns:repeat(2,1fr); } .dcard-grid--n2 > .dcard { grid-row:span 2; } .dcard-media { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; } .dcard-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .dcard:hover .dcard-media img { transform:scale(1.09); } .dcard-fallback { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.45); background:linear-gradient(150deg, color-mix(in srgb,var(--tp) 85%,#000), #0b1836); } .dcard:nth-child(3n+2) .dcard-fallback { background:linear-gradient(150deg,#0e7490,#0b1836); } .dcard:nth-child(3n) .dcard-fallback { background:linear-gradient(150deg,#4338ca,#0b1836); } .dcard-media-veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,12,26,.04) 45%,rgba(6,12,26,.42)); } .dcard-region, .dcard-trips { position:absolute; top:12px; display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; padding:5px 10px; border-radius:999px; color:#fff; background:rgba(10,18,40,.42); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); } .dcard-region { left:12px; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dcard-trips { right:12px; } .dcard-sheen { position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:2; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); opacity:0; } .dcard:hover .dcard-sheen { animation:fsheen 1s ease; } .dcard-body { padding:15px 18px 16px; display:flex; flex-direction:column; gap:6px; flex:0 0 auto; } .dcard-name { margin:0; font-size:1.18rem; font-weight:800; color:#0b1836; letter-spacing:-.01em; } .dcard-desc { margin:0; font-size:.88rem; line-height:1.5; color:#5a6b85; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .dcard-cta { margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:700; color:var(--tp); } .dcard-arrow { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--tp) 12%,#fff); transition:transform .3s, background .3s, color .3s; } .dcard:hover .dcard-arrow { transform:translateX(4px); background:var(--tp); color:#fff; } /* tablet: collage spans reset to equal 2-col cards; odd count → last spans full width (flush) */ @media (max-width:820px){ .dcard-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:236px; } .dcard-grid > .dcard.c-big, .dcard-grid > .dcard.c-wide, .dcard-grid > .dcard.c-tall { grid-column:auto; grid-row:auto; } .dcard-grid > .dcard:last-child:nth-child(odd) { grid-column:span 2; } .dcard-grid--n2 > .dcard { grid-row:auto; } } /* phones: clean single-column stack (always flush, readable) */ @media (max-width:520px){ .dcard-grid, .dcard-grid--n1, .dcard-grid--n2 { grid-template-columns:1fr; grid-auto-rows:auto; } .dcard-grid > .dcard, .dcard-grid > .dcard.c-big, .dcard-grid > .dcard.c-wide, .dcard-grid > .dcard.c-tall, .dcard-grid > .dcard:last-child:nth-child(odd), .dcard-grid--n1 > .dcard.c-big, .dcard-grid--n2 > .dcard { grid-column:1 / -1; grid-row:auto; } .dcard { height:auto; } .dcard-media { flex:none; aspect-ratio:16 / 10; } } /* ---- About card + Read-more trigger ---- */ .dabout-card { display:flex; gap:18px; align-items:flex-start; margin-top:38px; padding:24px 26px; border-radius:20px; background:linear-gradient(135deg,#0b1836,#14315e); color:#fff; position:relative; overflow:hidden; } .dabout-card::before { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb,var(--tp) 55%,transparent), transparent 70%); opacity:.5; pointer-events:none; } .dabout-ic { flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 10px 24px -8px color-mix(in srgb,var(--tp) 70%,transparent); } .dabout-txt { min-width:0; position:relative; z-index:1; } .dabout-txt .section-t { color:#fff; } .dabout-teaser { margin:0 0 14px; color:rgba(255,255,255,.82); font-size:1rem; line-height:1.6; max-width:640px; } .dabout-more { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-weight:700; font-size:.92rem; padding:10px 18px; border-radius:999px; color:#0b1836; background:#fff; transition:transform .25s, box-shadow .25s, gap .25s; } .dabout-more:hover { transform:translateY(-2px); gap:12px; box-shadow:0 12px 24px -10px rgba(0,0,0,.5); } .dabout-more .lucide { transition:transform .25s; } .dabout-more:hover .lucide { transform:translateX(3px); } @media (max-width:560px){ .dabout-card { flex-direction:column; gap:14px; padding:20px; } } /* ---- About SIDE PANEL (app-style slide-in drawer) ---- */ body.dpanel-lock { overflow:hidden; } .dpanel { position:fixed; inset:0; z-index:4200; visibility:hidden; } .dpanel::before { content:""; position:absolute; inset:0; background:rgba(6,12,26,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .35s; } .dpanel.is-open { visibility:visible; } .dpanel.is-open::before { opacity:1; } .dpanel-card { position:absolute; top:0; right:0; height:100%; width:min(460px,92vw); display:flex; flex-direction:column; background:#fff; box-shadow:-24px 0 70px -24px rgba(6,12,26,.55); border-radius:22px 0 0 22px; transform:translateX(100%); transition:transform .42s cubic-bezier(.2,.7,.2,1); will-change:transform; } .dpanel.is-open .dpanel-card { transform:none; } .dpanel-head { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 24px 16px; border-bottom:1px solid #eef1f6; } .dpanel-ey { display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tp); margin-bottom:4px; } .dpanel-head h3 { margin:0; font-size:1.3rem; font-weight:800; color:#0b1836; } .dpanel-x { flex:0 0 auto; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer; font-size:1.6rem; line-height:1; background:#eef1f6; color:#33415a; transition:background .25s, transform .25s; } .dpanel-x:hover { background:#e0e6f0; transform:rotate(90deg); } .dpanel-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 24px; max-width:none; } .dpanel-body::-webkit-scrollbar { width:8px; } .dpanel-body::-webkit-scrollbar-thumb { background:#cfd8e6; border-radius:8px; } .dpanel-foot { flex:0 0 auto; padding:14px 24px 20px; border-top:1px solid #eef1f6; } @media (max-width:520px){ .dpanel-card { width:100%; border-radius:0; } } @media (prefers-reduced-motion:reduce){ .dpanel-card { transition:none; } .dcard { animation:none; } .dcard:hover { transform:none; } } /* ============================================================================ PACKAGE / BOOKING page — cinematic content + premium live calculator ============================================================================ */ .pk-grid { display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start; } .pk-main { display:flex; flex-direction:column; gap:20px; min-width:0; } .pk-card { background:#fff; border:1px solid #eef1f6; border-radius:22px; padding:24px 26px; box-shadow:0 16px 40px -30px rgba(12,22,46,.4); } .pk-card .cms-content h3 { font-size:1.15rem; font-weight:800; color:#0b1836; margin:22px 0 9px; } .pk-card .cms-content p { margin:0 0 13px; color:#42506a; line-height:1.72; } .pk-card .cms-content ul { list-style:none; padding:0; margin:0 0 14px; } .pk-card .cms-content ul li { position:relative; padding-left:26px; margin-bottom:8px; color:#42506a; } .pk-card .cms-content ul li::before { content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:3px; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); } .pk-hl { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .pk-hl-item { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border-radius:15px; background:linear-gradient(135deg,#f7faff,#eef4ff); border:1px solid #e8eefb; font-weight:600; color:#28344a; font-size:.92rem; } .pk-hl-ic { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 6px 14px -5px color-mix(in srgb,var(--tp) 60%,transparent); } .pk-time { position:relative; } .pk-time::before { content:""; position:absolute; left:19px; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,var(--tp),color-mix(in srgb,var(--tp) 10%,transparent)); } .pk-day { position:relative; margin-bottom:10px; } .pk-day-head { width:100%; display:flex; align-items:center; gap:14px; background:none; border:0; cursor:pointer; padding:6px 0; text-align:left; } .pk-day-no { flex:0 0 auto; width:40px; height:40px; z-index:1; display:grid; place-items:center; border-radius:50%; font-weight:800; color:var(--tp); background:#fff; border:2px solid color-mix(in srgb,var(--tp) 35%,#e4e9f2); transition:all .3s; } .pk-day.open .pk-day-no { color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); border-color:transparent; box-shadow:0 8px 18px -6px color-mix(in srgb,var(--tp) 60%,transparent); } .pk-day-ttl { flex:1; min-width:0; display:flex; flex-direction:column; font-weight:800; color:#0b1836; font-size:1rem; } .pk-day-lbl { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tp); } .pk-day-chev { flex:0 0 auto; color:#8a97ad; transition:transform .35s; } .pk-day.open .pk-day-chev { transform:rotate(180deg); } .pk-day-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1); } .pk-day.open .pk-day-body { grid-template-rows:1fr; } .pk-day-inner { overflow:hidden; padding-left:54px; color:#42506a; line-height:1.7; font-size:.93rem; } .pk-day.open .pk-day-inner { padding-top:6px; padding-bottom:12px; } .pk-day-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .pk-day-meta span { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; color:#33415a; background:#f1f5fb; border:1px solid #e6ecf6; padding:5px 10px; border-radius:999px; } .pk-ie { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .pk-ie-card { padding:22px 24px; } .pk-ie-ttl { display:flex; align-items:center; gap:8px; font-size:1.08rem; font-weight:800; margin:0 0 14px; } .pk-ie-ttl.ok { color:#0e9f6e; } .pk-ie-ttl.no { color:#e5484d; } .pk-ie-list { list-style:none; padding:0; margin:0; } .pk-ie-list li { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; color:#42506a; font-size:.92rem; line-height:1.45; } .pk-ie-dot { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; margin-top:1px; } .pk-ie-dot.ok { color:#0e9f6e; background:color-mix(in srgb,#0e9f6e 14%,#fff); } .pk-ie-dot.no { color:#e5484d; background:color-mix(in srgb,#e5484d 14%,#fff); } .pk-side { position:sticky; top:88px; display:flex; flex-direction:column; gap:18px; } .bk-box { background:#fff; border:1px solid #eef1f6; border-radius:22px; padding:22px; box-shadow:0 22px 50px -30px rgba(12,22,46,.5); } .bk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; } .bk-eyebrow { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tp); } .bk-head h3 { margin:3px 0 0; font-size:1.28rem; font-weight:800; color:#0b1836; } .bk-from { text-align:right; line-height:1; } .bk-from span { font-size:.7rem; color:#8a97ad; } .bk-from b { display:block; font-size:1.2rem; color:#0b1836; } .bk-label { font-size:.76rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#8a97ad; margin:16px 0 8px; } .bk-variants { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .bk-vpill { display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer; padding:11px 13px; border-radius:14px; border:1.5px solid #e4e9f2; background:#fbfcfe; transition:all .22s; } .bk-vpill b { font-size:.92rem; font-weight:800; color:#0b1836; } .bk-vpill span { font-size:.86rem; font-weight:700; color:var(--tp); } .bk-vpill small { font-size:.7rem; color:#98a4b8; font-weight:500; } .bk-vpill:hover { border-color:color-mix(in srgb,var(--tp) 40%,#e4e9f2); } .bk-vpill.sel { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 7%,#fff); box-shadow:0 8px 20px -12px color-mix(in srgb,var(--tp) 60%,transparent); } .bk-date { position:relative; display:flex; align-items:center; } .bk-date-ic { position:absolute; left:13px; color:var(--tp); pointer-events:none; display:inline-flex; } .bk-date-in { width:100%; border:1.5px solid #e4e9f2; border-radius:13px; padding:12px 14px 12px 40px; font-size:.95rem; font-weight:600; color:#0b1836; background:#fbfcfe; appearance:none; transition:border-color .2s, box-shadow .2s, background .2s; } .bk-date-in:focus { outline:0; border-color:var(--tp); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 15%,transparent); } .bk-date-in.shake { animation:bkShake .4s; border-color:#e5484d; } @keyframes bkShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} } .bk-pax { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .bk-step { border:1.5px solid #eef1f6; border-radius:14px; padding:10px 12px; background:#fbfcfe; } .bk-step-lbl { display:flex; flex-direction:column; margin-bottom:8px; } .bk-step-lbl b { font-size:.84rem; font-weight:800; color:#0b1836; } .bk-step-lbl span { font-size:.68rem; color:#98a4b8; } .bk-step-ctrl { display:flex; align-items:center; justify-content:space-between; gap:6px; } .bk-step-ctrl.pop .bk-step-val { animation:bkPop .3s; } @keyframes bkPop { 0%{transform:scale(1)} 45%{transform:scale(1.28); color:var(--tp)} 100%{transform:scale(1)} } .bk-step-btn { flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border:0; cursor:pointer; border-radius:10px; color:var(--tp); background:color-mix(in srgb,var(--tp) 10%,#fff); transition:background .2s, transform .12s; } .bk-step-btn:hover { background:color-mix(in srgb,var(--tp) 20%,#fff); } .bk-step-btn:active { transform:scale(.88); } .bk-step-val { width:44px; text-align:center; border:0; background:none; font-size:1.05rem; font-weight:800; color:#0b1836; -moz-appearance:textfield; pointer-events:none; } .bk-step-val::-webkit-outer-spin-button, .bk-step-val::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .bk-addons { display:flex; flex-direction:column; gap:8px; } .bk-addon { display:flex; align-items:center; gap:11px; cursor:pointer; padding:11px 13px; border:1.5px solid #e7ecf4; border-radius:14px; transition:border-color .2s, background .2s; position:relative; } .bk-addon input { position:absolute; opacity:0; pointer-events:none; } .bk-addon-check { flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; border:2px solid #cfd8e6; color:#fff; transition:all .2s; } .bk-addon-check .lucide { opacity:0; transition:opacity .15s; } .bk-addon:has(input:checked) { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 6%,#fff); } .bk-addon:has(input:checked) .bk-addon-check { background:var(--tp); border-color:var(--tp); } .bk-addon:has(input:checked) .bk-addon-check .lucide { opacity:1; } .bk-addon-txt { display:flex; flex-direction:column; min-width:0; } .bk-addon-txt b { font-size:.88rem; font-weight:700; color:#0b1836; } .bk-addon-txt span { font-size:.76rem; color:#8a97ad; } .bk-out { margin-top:18px; padding-top:14px; border-top:1px dashed #e2e8f2; animation:offRise .4s both; } .bk-lines { display:flex; flex-direction:column; } .bk-row { display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:#42506a; padding:4px 0; } .bk-lines.muted .bk-row { color:#98a4b8; font-size:.82rem; } .bk-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:12px; border-top:1px solid #eef2f7; font-size:1.05rem; font-weight:800; color:#0b1836; } .bk-total span:last-child { font-size:1.5rem; color:var(--tp); } .bk-per { text-align:right; font-size:.78rem; color:#8a97ad; margin-top:2px; } .bk-seatline { margin-top:8px; } .bk-badges { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; } .bk-chip { display:inline-flex; align-items:center; font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:999px; } .bk-chip.ok { color:#0e9f6e; background:color-mix(in srgb,#0e9f6e 13%,#fff); } .bk-chip.danger { color:#e5484d; background:color-mix(in srgb,#e5484d 13%,#fff); } .bk-chip.grey { color:#64748b; background:#eef1f6; } .bk-chip.flash { color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); } .bk-book { width:100%; margin-top:18px; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 20px; border-radius:16px; color:#fff; font-weight:800; font-size:1.02rem; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 16px 34px -12px color-mix(in srgb,var(--tp) 60%,transparent); transition:transform .18s, box-shadow .2s; } .bk-book span { display:inline-flex; align-items:center; gap:8px; } .bk-book:hover { transform:translateY(-2px); box-shadow:0 22px 44px -14px color-mix(in srgb,var(--tp) 65%,transparent); } .bk-book:active { transform:translateY(0); } .bk-or { text-align:center; margin-top:12px; position:relative; } .bk-or::before { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:#eaeef4; } .bk-or span { position:relative; background:#fff; padding:0 12px; font-size:.78rem; color:#98a4b8; } .bk-enq { padding:22px; } .bk-form { display:flex; flex-direction:column; gap:10px; margin-top:4px; } .bk-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .bk-enq-btn { border:1.5px solid color-mix(in srgb,var(--tp) 30%,transparent); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:14px; font-weight:800; color:var(--tp); background:color-mix(in srgb,var(--tp) 10%,#fff); transition:background .2s, transform .12s; } .bk-enq-btn:hover { background:color-mix(in srgb,var(--tp) 16%,#fff); } .bk-enq-btn:active { transform:scale(.98); } @media (max-width:980px){ .pk-grid { grid-template-columns:1fr; } .pk-side { position:static; max-width:560px; margin:0 auto; width:100%; } } @media (max-width:600px){ .pk-card { padding:18px; border-radius:18px; } .pk-hl { grid-template-columns:1fr; } .pk-ie { grid-template-columns:1fr; } .pk-day-inner { padding-left:0; } .pk-time::before { display:none; } } @media (prefers-reduced-motion:reduce){ .bk-out { animation:none; } .bk-step-ctrl.pop .bk-step-val { animation:none; } } /* premium calendar (home-style) — light theme inside the booking calculator */ .bk-datewrap { position:relative; } .bk-gdate .gdate-btn { background:#fbfcfe; border:1.5px solid #e4e9f2; color:#0b1836; border-radius:13px; padding:12px 14px; font-weight:600; gap:10px; } .bk-gdate .gdate-btn:hover { background:#fff; border-color:color-mix(in srgb,var(--tp) 40%,#e4e9f2); } .bk-gdate.open .gdate-btn { border-color:var(--tp); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 15%,transparent); } .bk-gdate .gdate-val:not(.has-val) { color:#aab4c5; font-weight:500; } .bk-gdate .gdate-val.has-val { color:#0b1836; font-weight:700; } .bk-gdate-ic { display:inline-flex; color:var(--tp); } .bk-gdate-chev { display:inline-flex; color:#8a97ad; transition:transform .25s; } .bk-gdate.open .bk-gdate-chev { transform:rotate(180deg); } .bk-gdate .gdate-pop { width:300px; left:auto; right:0; max-width:calc(100vw - 24px); } .gdate-btn.shake { animation:bkShake .4s; border-color:#e5484d !important; } /* on phones stack the enquiry row so the date field (and its calendar) has full width */ @media (max-width:600px){ .bk-form-row { grid-template-columns:1fr; } } /* ============================================================================ HOTELS — list (filters + cards), details (amenities, rooms, booking) ============================================================================ */ .hfilter { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:14px; align-items:end; margin-bottom:28px; background:#fff; border:1px solid #eef1f6; border-radius:20px; padding:18px 20px; box-shadow:0 16px 40px -30px rgba(12,22,46,.4); } .hfilter-field { display:flex; flex-direction:column; gap:6px; min-width:0; } .hfilter-field label { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#8a97ad; } .hfilter-field label .lucide { color:var(--tp); } .hfilter-in { width:100%; border:1.5px solid #e4e9f2; border-radius:13px; padding:11px 13px; font-size:.94rem; font-weight:600; color:#0b1836; background:#fbfcfe; transition:border-color .2s, box-shadow .2s, background .2s; } .hfilter-in:focus { outline:0; border-color:var(--tp); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 15%,transparent); } .hfilter-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; white-space:nowrap; padding:12px 22px; border-radius:13px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 12px 26px -10px color-mix(in srgb,var(--tp) 60%,transparent); transition:transform .16s, box-shadow .2s; } .hfilter-btn:hover { transform:translateY(-2px); box-shadow:0 18px 34px -12px color-mix(in srgb,var(--tp) 65%,transparent); } .hempty { text-align:center; color:#8a97ad; padding:60px 20px; } .hempty .lucide { color:#c3cdda; margin-bottom:10px; } .hempty p { margin:0; font-weight:600; } .hcard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; } .hcard { display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#fff; text-decoration:none; color:inherit; border:1px solid #eef1f6; box-shadow:0 16px 38px -24px rgba(12,22,46,.4); animation:offRise .6s both cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i,0)*.06s); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; } .hcard:hover { transform:translateY(-8px); box-shadow:0 34px 62px -28px color-mix(in srgb,var(--tp) 45%,rgba(12,22,46,.55)); border-color:color-mix(in srgb,var(--tp) 30%,transparent); } .hcard-media { position:relative; aspect-ratio:16 / 10; overflow:hidden; } .hcard-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .hcard:hover .hcard-media img { transform:scale(1.09); } .hcard-fallback { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.5); background:linear-gradient(150deg,#1f6f8b,#0b1836); } .hcard:nth-child(3n+2) .hcard-fallback { background:linear-gradient(150deg,#3b5bdb,#0b1836); } .hcard:nth-child(3n) .hcard-fallback { background:linear-gradient(150deg,#0e7490,#0b1836); } .hcard-media-veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,12,26,.05) 45%,rgba(6,12,26,.4)); } .hcard-star { position:absolute; top:12px; left:12px; font-size:.82rem; letter-spacing:1px; color:#ffd76b; text-shadow:0 1px 6px rgba(0,0,0,.5); } .hcard-tag { position:absolute; top:11px; right:12px; display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:800; color:#fff; background:rgba(10,18,40,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); padding:4px 9px; border-radius:999px; } .hcard-tag.book { background:linear-gradient(135deg,color-mix(in srgb,#0e9f6e 85%,transparent),color-mix(in srgb,#0e9f6e 60%,transparent)); border-color:transparent; } .hcard-body { padding:15px 18px 16px; display:flex; flex-direction:column; gap:6px; flex:1; } .hcard-loc { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:#8a97ad; } .hcard-loc .lucide { color:var(--tp); } .hcard-name { margin:0; font-size:1.14rem; font-weight:800; color:#0b1836; letter-spacing:-.01em; line-height:1.25; } .hcard-foot { margin-top:auto; padding-top:8px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; } .hcard-price { display:flex; align-items:baseline; gap:4px; line-height:1; } .hcard-price span { font-size:.7rem; color:#98a4b8; } .hcard-price b { font-size:1.15rem; color:#0b1836; font-weight:900; } .hcard-price small { font-size:.72rem; color:#98a4b8; } .hcard-req { font-size:.95rem; color:#5a6b85; } .hcard-cta { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); padding:8px 14px; border-radius:11px; transition:gap .25s, box-shadow .25s; } .hcard:hover .hcard-cta { gap:9px; box-shadow:0 10px 22px -8px color-mix(in srgb,var(--tp) 60%,transparent); } /* details: star in hero badge, amenities, rooms */ .hstar { color:#ffd76b; letter-spacing:1px; } .hamen { display:flex; flex-wrap:wrap; gap:9px; } .hamen-item { display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; color:#33415a; background:#f4f7fc; border:1px solid #e6ecf6; padding:8px 13px; border-radius:11px; } .hamen-item .lucide { color:#0e9f6e; } .hrooms { display:flex; flex-direction:column; gap:14px; } .hroom { border:1.5px solid #eef1f6; border-radius:18px; padding:18px; transition:border-color .25s, box-shadow .25s; } .hroom:hover { border-color:color-mix(in srgb,var(--tp) 32%,#eef1f6); box-shadow:0 14px 34px -24px rgba(12,22,46,.4); } .hroom-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .hroom-info h3 { margin:0 0 4px; font-size:1.08rem; font-weight:800; color:#0b1836; } .hroom-occ { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:#8a97ad; } .hroom-occ .lucide { color:var(--tp); } .hroom-tag { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:800; color:#64748b; background:#eef1f6; padding:5px 10px; border-radius:999px; } .hroom-tag.ok { color:#0e9f6e; background:color-mix(in srgb,#0e9f6e 12%,#fff); } .hroom-rates { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .hroom-rate { display:inline-flex; flex-direction:column; align-items:center; gap:1px; font-size:.98rem; font-weight:800; color:#0b1836; background:linear-gradient(135deg,#f7faff,#eef4ff); border:1px solid #e6ecf6; padding:8px 14px; border-radius:12px; } .hroom-rate small { font-size:.62rem; font-weight:800; letter-spacing:.05em; color:var(--tp); } .hroom-btn { display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; font-weight:800; font-size:.9rem; color:var(--tp); background:color-mix(in srgb,var(--tp) 10%,#fff); border:1.5px solid color-mix(in srgb,var(--tp) 24%,transparent); padding:10px 16px; border-radius:12px; transition:background .2s, gap .2s; } .hroom-btn:hover { background:color-mix(in srgb,var(--tp) 18%,#fff); gap:10px; } /* room with cover photo → image thumbnail beside the details */ .hroom.has-img { display:flex; gap:0; padding:0; overflow:hidden; } .hroom.has-img .hroom-img { position:relative; flex:0 0 clamp(230px,32%,300px); min-height:210px; overflow:hidden; background:#e6ebf3; isolation:isolate; } .hroom.has-img .hroom-main { position:absolute; inset:0; } .hroom.has-img .hroom-main img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); } .hroom.has-img:hover .hroom-main img { transform:scale(1.08); } /* bottom scrim so thumbs/badges stay legible over any photo */ .hroom.has-img .hroom-img::before { content:''; position:absolute; inset:auto 0 0 0; height:58%; z-index:1; pointer-events:none; background:linear-gradient(to top,rgba(9,14,28,.78),rgba(9,14,28,.28) 45%,transparent); } /* one-time luxe shine sweep on hover */ .hroom-shine { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; } .hroom-shine::after { content:''; position:absolute; top:-60%; left:-75%; width:55%; height:220%; transform:rotate(22deg) translateX(-120%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:transform .9s ease; } .hroom.has-img:hover .hroom-shine::after { transform:rotate(22deg) translateX(320%); } /* photo-count pill */ .hroom-count { position:absolute; top:11px; left:11px; z-index:3; display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; letter-spacing:.01em; color:#fff; background:rgba(12,18,34,.5); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); padding:5px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); } .hroom-count svg { opacity:.9; } /* glass thumbnail rail overlaid on the photo */ .hroom-thumbs { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; gap:7px; padding:11px; flex-wrap:wrap; } .hroom-thumb { flex:0 0 auto; width:46px; height:34px; padding:0; border:2px solid rgba(255,255,255,.55); border-radius:9px; overflow:hidden; cursor:pointer; background:none; opacity:.82; box-shadow:0 3px 10px rgba(0,0,0,.35); transition:opacity .2s, border-color .2s, transform .2s; } .hroom-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .hroom-thumb:hover { opacity:1; transform:translateY(-2px); } .hroom-thumb.is-active { opacity:1; border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.4); } .hroom.has-img .hroom-body { flex:1; min-width:0; padding:20px 22px; } @media (max-width:560px){ .hroom.has-img { flex-direction:column; } .hroom.has-img .hroom-img { flex:0 0 auto; min-height:0; height:210px; } } /* ---- hero rating badge ---- */ .dbadge-rating { text-decoration:none; cursor:pointer; } .dbadge-rating b { font-weight:800; } .dbadge-rating .hstar { color:#ffcf3f; } .dbadge-rating:hover { background:rgba(255,255,255,.28); } /* ---- trust strip ---- */ .htrust-wrap { background:linear-gradient(180deg,#fbfcfe,#f4f7fc); border-bottom:1px solid #eef1f6; } .htrust { display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; padding:15px 0; } .htrust-i { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700; color:#3a4a63; } .htrust-i svg { color:var(--tp); } @media(max-width:640px){ .htrust { gap:10px 16px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding:12px 4px; -webkit-overflow-scrolling:touch; } .htrust-i { flex:0 0 auto; font-size:.8rem; } } /* ---- policies ---- */ .hpol { display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; } .hpol-item { display:flex; gap:12px; align-items:flex-start; } .hpol-ic { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--tp); background:color-mix(in srgb,var(--tp) 10%,#fff); border:1px solid color-mix(in srgb,var(--tp) 18%,transparent); } .hpol-item b { display:block; font-size:.92rem; color:#0b1836; margin-bottom:3px; } .hpol-item p { margin:0; font-size:.85rem; color:#5b6a83; line-height:1.55; } @media(max-width:620px){ .hpol { grid-template-columns:1fr; } } /* ---- reviews ---- */ .hrev-summary { display:flex; gap:26px; align-items:center; flex-wrap:wrap; padding:16px 18px; margin-bottom:18px; background:linear-gradient(135deg,#f7faff,#eef4ff); border:1px solid #e6ecf6; border-radius:16px; } .hrev-score { text-align:center; flex:0 0 auto; min-width:120px; } .hrev-avg { font-size:2.6rem; font-weight:900; line-height:1; color:#0b1836; letter-spacing:-.02em; } .hrev-stars { margin:4px 0 2px; letter-spacing:2px; color:#d7dce6; font-size:1.05rem; } .hrev-stars .on { color:#ffb400; } .hrev-count { font-size:.76rem; font-weight:700; color:#7b8aa3; } .hrev-bars { flex:1; min-width:220px; display:flex; flex-direction:column; gap:5px; } .hrev-bar { display:flex; align-items:center; gap:10px; font-size:.78rem; font-weight:700; color:#7b8aa3; } .hrev-bar-l { flex:0 0 26px; } .hrev-bar-track { flex:1; height:7px; border-radius:99px; background:#e6ebf3; overflow:hidden; } .hrev-bar-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#ffb400,#ff8a3d); } .hrev-bar-n { flex:0 0 18px; text-align:right; color:#98a4b8; } .hrev-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .hrev-card { margin:0; padding:16px 18px; border:1px solid #eef1f6; border-radius:16px; background:#fff; transition:border-color .2s, box-shadow .2s; } .hrev-card:hover { border-color:color-mix(in srgb,var(--tp) 26%,#eef1f6); box-shadow:0 14px 34px -26px rgba(12,22,46,.5); } .hrev-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .hrev-ava { flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--tp),color-mix(in srgb,var(--tp) 55%,#0b1836)); } .hrev-who { flex:1; min-width:0; line-height:1.25; } .hrev-who b { display:block; font-size:.9rem; color:#0b1836; } .hrev-who span { font-size:.74rem; color:#8a97ad; } .hrev-rt { flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font-size:.82rem; font-weight:800; color:#0b1836; background:#fff7e6; border:1px solid #ffe4a3; padding:3px 9px; border-radius:99px; } .hrev-rt i { color:#ffb400; font-style:normal; } .hrev-title { display:block; font-size:.92rem; color:#0b1836; margin-bottom:5px; } .hrev-card blockquote { margin:0; font-size:.86rem; color:#4a5a74; line-height:1.6; } .hrev-card figcaption { margin-top:9px; display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:#98a4b8; } @media(max-width:620px){ .hrev-list { grid-template-columns:1fr; } .hrev-avg { font-size:2.2rem; } } /* ---- similar hotels grid ---- */ .hsim-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media(max-width:820px){ .hsim-grid { grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .hsim-grid { grid-template-columns:1fr; } } /* ========================================================================== TAXI / CABS ========================================================================== */ .tx-hero { min-height:clamp(300px,42vh,420px); } .tx-hero .dhero-veil { background:linear-gradient(120deg,#0b2a4a,#123a63 55%,#0e2b49); } /* shared field controls */ .gsel, .ginp { width:100%; border:1.5px solid #dfe4ec; border-radius:11px; padding:10px 12px; font:inherit; font-size:.9rem; color:#16233b; background:#fff; transition:border-color .2s, box-shadow .2s; } .gsel:focus, .ginp:focus { outline:none; border-color:var(--tp); box-shadow:0 0 0 3px color-mix(in srgb,var(--tp) 16%,transparent); } .tx-fld { margin-bottom:2px; } .tx-lbl { display:block; font-size:.74rem; font-weight:700; color:#7b8aa3; margin:0 0 5px; } .tx-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; } .tx-grid { align-items:start; } .tx-filter { align-self:start; } /* trip pills */ .tx-trips { display:flex; flex-direction:column; gap:8px; } .tx-trip { display:block; cursor:pointer; border:1.5px solid #e6ebf3; border-radius:12px; padding:9px 12px; transition:border-color .18s, background .18s; } .tx-trip input { position:absolute; opacity:0; width:0; height:0; } .tx-trip b { display:block; font-size:.86rem; font-weight:700; color:#16233b; } .tx-trip span { font-size:.74rem; color:#8a97ad; } .tx-trip.sel { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 7%,#fff); } .tx-trip.sel b { color:var(--tp); } .tx-seats { display:flex; flex-wrap:wrap; gap:6px; } .tx-seat { cursor:pointer; font-size:.8rem; font-weight:700; color:#5b6a83; border:1.5px solid #e6ebf3; border-radius:99px; padding:5px 12px; } .tx-seat input { position:absolute; opacity:0; width:0; height:0; } .tx-seat.sel { border-color:var(--tp); color:var(--tp); background:color-mix(in srgb,var(--tp) 8%,#fff); } .tx-check { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.85rem; font-weight:600; color:#3a4a63; cursor:pointer; } .tx-check input { width:16px; height:16px; accent-color:var(--tp); } /* results */ .tx-results-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .tx-cards { display:flex; flex-direction:column; gap:16px; } .tx-empty { text-align:center; padding:48px 24px; border:1.5px dashed #dbe2ec; border-radius:20px; color:#7b8aa3; background:#fbfcfe; } .tx-empty-ic { display:inline-grid; place-items:center; width:76px; height:76px; border-radius:50%; background:#eef3fb; color:var(--tp); margin-bottom:12px; } .tx-empty b { display:block; font-size:1.05rem; color:#16233b; margin-bottom:4px; } .tx-empty p { margin:0 auto; max-width:380px; font-size:.88rem; } /* taxi card */ .tx-card { display:flex; gap:0; border:1.5px solid #eef1f6; border-radius:20px; overflow:hidden; background:#fff; transition:border-color .25s, box-shadow .25s, transform .25s; } .tx-card:hover { border-color:color-mix(in srgb,var(--tp) 30%,#eef1f6); box-shadow:0 20px 44px -30px rgba(12,22,46,.55); } .tx-card-media { position:relative; flex:0 0 clamp(180px,30%,230px); background:linear-gradient(135deg,#eef3fb,#e2e9f4); overflow:hidden; display:grid; place-items:center; } .tx-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1); } .tx-card:hover .tx-card-media img { transform:scale(1.07); } .tx-card-fallback { color:#aab8ce; } .tx-perkm { position:absolute; top:10px; left:10px; font-size:.72rem; font-weight:800; color:#fff; background:rgba(12,30,55,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:4px 10px; border-radius:99px; } .tx-card-body { flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; } .tx-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .tx-card-top h3 { margin:0; font-size:1.1rem; font-weight:800; color:#0b1836; } .tx-card-from { flex:0 0 auto; text-align:right; line-height:1.05; } .tx-card-from span { display:block; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#98a4b8; } .tx-card-from b { font-size:1.35rem; font-weight:900; color:var(--tp); } .tx-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .tx-chip { font-size:.72rem; font-weight:700; color:#5b6a83; background:#f2f5fa; border:1px solid #e6ebf3; padding:4px 10px; border-radius:99px; } .tx-card-desc { margin:0 0 10px; font-size:.82rem; color:#7b8aa3; line-height:1.5; } .tx-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; } .tx-opt { display:inline-flex; align-items:center; gap:8px; border:1.5px solid color-mix(in srgb,var(--tp) 26%,transparent); background:color-mix(in srgb,var(--tp) 8%,#fff); color:var(--tp); border-radius:12px; padding:8px 14px; cursor:pointer; font-weight:700; font-size:.84rem; transition:background .18s, transform .18s; } .tx-opt span { color:#5b6a83; font-weight:600; } .tx-opt b { color:var(--tp); } .tx-opt:hover { background:color-mix(in srgb,var(--tp) 16%,#fff); transform:translateY(-1px); } .tx-card-from small { font-size:.66rem; font-weight:700; color:#98a4b8; } .tx-opt-cta { background:var(--tp); color:#fff; border-color:var(--tp); } .tx-opt-cta span { color:#fff; } .tx-opt-cta:hover { filter:brightness(1.06); background:var(--tp); } .tx-avl { display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; color:#8a97ad; } .tx-pulse { animation:txpulse 1.5s ease; border-color:var(--tp) !important; } @keyframes txpulse { 0%,100%{ box-shadow:0 0 0 0 transparent; } 30%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 30%,transparent); } 70%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 18%,transparent); } } /* card is now a link */ .tx-card { text-decoration:none; color:inherit; } .tx-card:hover h3 { color:var(--tp); } .tx-card .tx-opt-cta { pointer-events:none; } /* results head + grid/list toggle */ .tx-head-actions { display:flex; align-items:center; gap:10px; } .tx-view { display:inline-flex; border:1.5px solid #e6ebf3; border-radius:10px; overflow:hidden; background:#fff; } .tx-view-btn { border:0; background:#fff; color:#93a1b7; padding:7px 11px; cursor:pointer; display:grid; place-items:center; transition:background .15s,color .15s; } .tx-view-btn + .tx-view-btn { border-left:1px solid #eef1f6; } .tx-view-btn.is-on { background:var(--tp); color:#fff; } /* view modes */ .tx-cards.is-list { display:flex; flex-direction:column; gap:16px; } .tx-cards.is-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .tx-cards.is-grid .tx-card { flex-direction:column; } .tx-cards.is-grid .tx-card-media { flex:0 0 auto; height:180px; } .tx-cards.is-grid .tx-card-body { flex:1; } @media(max-width:1100px){ .tx-cards.is-grid { grid-template-columns:1fr; } } @media(max-width:560px){ .tx-card { flex-direction:column; } .tx-card-media { flex:0 0 auto; height:180px; } .tx-cards.is-grid { grid-template-columns:1fr; } } /* ===== taxi cab DETAIL page ===== */ .txd-hero { min-height:clamp(300px,44vh,440px); } .txd-over { display:flex; gap:18px; align-items:center; margin-bottom:14px; } .txd-photo { flex:0 0 clamp(150px,34%,240px); aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#eef3fb,#e2e9f4); display:grid; place-items:center; } .txd-photo img { width:100%; height:100%; object-fit:cover; } .txd-photo-fb { color:#aab8ce; } .txd-specs { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; } .txd-spec { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color:#3a4a63; } .txd-spec-ic { display:inline-flex; color:var(--tp); } .txd-desc { font-size:.92rem; color:#4a5a74; line-height:1.6; margin:0 0 12px; } .txd-incl { display:flex; flex-wrap:wrap; gap:8px 16px; } .txd-incl span { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:#0e9f6e; } .txd-incl svg { color:#0e9f6e; } /* rate table */ .txd-rates { display:flex; flex-direction:column; } .txd-rate { display:grid; grid-template-columns:1fr auto auto; gap:6px 14px; align-items:baseline; padding:11px 2px; border-bottom:1px dashed #eef1f6; } .txd-rate:last-child { border-bottom:0; } .txd-rate-l { font-size:.88rem; font-weight:600; color:#243147; } .txd-rate-v { font-size:.95rem; font-weight:800; color:#0b1836; white-space:nowrap; } .txd-rate-s { grid-column:2 / 4; text-align:right; font-size:.74rem; color:#98a4b8; } .txd-note { margin-top:12px; font-size:.76rem; color:#8a97ad; display:flex; align-items:center; gap:6px; } .txd-note svg { color:var(--tp); flex:0 0 auto; } /* other cabs */ .txd-others { display:flex; flex-direction:column; gap:8px; } .txd-other { display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid #eef1f6; border-radius:14px; text-decoration:none; transition:border-color .18s, background .18s; } .txd-other:hover { border-color:color-mix(in srgb,var(--tp) 30%,#eef1f6); background:#fbfcfe; } .txd-other-img { flex:0 0 auto; width:52px; height:38px; border-radius:9px; overflow:hidden; background:#eef3fb; color:#aab8ce; display:grid; place-items:center; } .txd-other-img img { width:100%; height:100%; object-fit:cover; } .txd-other-b { flex:1; min-width:0; line-height:1.3; } .txd-other-b b { display:block; font-size:.9rem; color:#0b1836; } .txd-other-b span { font-size:.76rem; color:#8a97ad; } .txd-other > svg { color:#c2ccdb; } /* booking side */ .txd-trips { display:grid; grid-template-columns:1fr 1fr; gap:7px; } .txd-trip { text-align:left; border:1.5px solid #e6ebf3; background:#fff; border-radius:11px; padding:8px 10px; cursor:pointer; transition:border-color .16s, background .16s; } .txd-trip b { display:block; font-size:.8rem; font-weight:700; color:#16233b; } .txd-trip span { font-size:.68rem; color:#8a97ad; } .txd-trip.sel { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 8%,#fff); } .txd-trip.sel b { color:var(--tp); } .txd-loc { display:flex; flex-direction:column; gap:10px; margin-top:12px; } .txd-loc-f label { display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color:#3a4a63; margin-bottom:5px; } .txd-map-wrap { border:1px solid #e6ebf3; border-radius:12px; overflow:hidden; margin-top:12px; } .txd-map-wrap .tx-map { height:210px; } /* estimate box */ .txd-est { margin-top:14px; border:1.5px solid #e6ecf6; border-radius:14px; background:linear-gradient(135deg,#f7faff,#eef4ff); padding:14px; } .txd-est-hint { font-size:.82rem; color:#8a97ad; } .txd-est-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:.83rem; color:#4a5a74; padding:3px 0; } .txd-est-row b { color:#0b1836; font-weight:700; white-space:nowrap; } .txd-est-total { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid #dbe4f2; } .txd-est-total span { font-size:.8rem; font-weight:700; color:#5b6a83; } .txd-est-total b { font-size:1.5rem; font-weight:900; color:var(--tp); } .txd-est-toll { margin-top:8px; display:flex; flex-direction:column; gap:4px; } .txd-est-toll span { display:inline-flex; align-items:center; gap:6px; font-size:.73rem; color:#8a97ad; } .txd-est-warn { color:#c2410c !important; font-weight:600; } .txd-trust { margin-top:10px; display:flex; align-items:center; gap:6px; font-size:.72rem; color:#8a97ad; justify-content:center; } .txd-trust svg { color:#0e9f6e; } @media(max-width:600px){ .txd-over { flex-direction:column; align-items:stretch; } .txd-specs { grid-template-columns:1fr 1fr; } .txd-trips { grid-template-columns:1fr; } } /* booking modal */ .tx-modal { position:fixed; inset:0; z-index:1400; display:none; } .tx-modal.open { display:block; } .tx-modal-back { position:absolute; inset:0; background:rgba(9,16,32,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .tx-modal-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(680px,94vw); max-height:92vh; overflow:auto; background:#fff; border-radius:22px; box-shadow:0 40px 90px -30px rgba(6,14,30,.7); padding:22px; } .tx-modal-x { position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:#f2f5fa; color:#5b6a83; display:grid; place-items:center; cursor:pointer; } .tx-modal-x:hover { background:#e6ebf3; } .tx-modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #eef1f6; } .tx-modal-veh { display:flex; align-items:center; gap:12px; min-width:0; } .tx-modal-vimg { flex:0 0 auto; width:64px; height:48px; border-radius:10px; overflow:hidden; background:#eef3fb; color:#aab8ce; display:grid; place-items:center; } .tx-modal-vimg img { width:100%; height:100%; object-fit:cover; } .tx-modal-veh b { display:block; font-size:1.02rem; color:#0b1836; } .tx-modal-vmeta { font-size:.76rem; color:#8a97ad; } .tx-modal-fare { flex:0 0 auto; text-align:right; line-height:1.1; } .tx-modal-fare span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:#98a4b8; font-weight:700; } .tx-modal-fare b { font-size:1.5rem; font-weight:900; color:#0b1836; } .tx-modal-fare small { display:block; font-size:.66rem; color:#98a4b8; } .tx-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; } .tx-loc { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } .tx-loc-field label { display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:#3a4a63; margin-bottom:5px; } .tx-dot { width:10px; height:10px; border-radius:50%; display:inline-block; } .tx-dot.pick { background:#16a34a; } .tx-dot.drop { background:#dc2626; } .tx-ac { position:relative; } .tx-ac-list { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5; background:#fff; border:1px solid #e6ebf3; border-radius:12px; box-shadow:0 18px 40px -20px rgba(12,22,46,.5); max-height:230px; overflow:auto; display:none; } .tx-ac-list.open { display:block; } .tx-ac-item { display:block; width:100%; text-align:left; border:0; background:none; padding:9px 12px; font-size:.82rem; color:#3a4a63; cursor:pointer; border-bottom:1px solid #f0f3f8; line-height:1.35; } .tx-ac-item:last-child { border-bottom:0; } .tx-ac-item:hover { background:#f5f8fd; color:var(--tp); } .tx-map-wrap { border:1px solid #e6ebf3; border-radius:14px; overflow:hidden; margin-bottom:16px; } .tx-map-tabs { display:flex; gap:6px; padding:8px; background:#f7f9fc; border-bottom:1px solid #eef1f6; } .tx-map-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid #e6ebf3; background:#fff; border-radius:9px; padding:7px; font-size:.8rem; font-weight:700; color:#5b6a83; cursor:pointer; } .tx-map-tab.is-on { border-color:var(--tp); color:var(--tp); background:color-mix(in srgb,var(--tp) 8%,#fff); } .tx-map { height:260px; z-index:0; background:#e9eef5; } .tx-map-hint { font-size:.74rem; color:#8a97ad; padding:8px 12px; } .tx-pay { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; } .tx-pay-opt { position:relative; display:block; border:1.5px solid #e6ebf3; border-radius:14px; padding:12px 14px 12px 46px; cursor:pointer; transition:border-color .18s, background .18s; } .tx-pay-opt input { position:absolute; opacity:0; } .tx-pay-ic { position:absolute; left:12px; top:12px; width:24px; height:24px; color:#8a97ad; } .tx-pay-opt b { display:block; font-size:.88rem; color:#16233b; } .tx-pay-opt small { font-size:.72rem; color:#8a97ad; } .tx-pay-opt.is-on { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 6%,#fff); } .tx-pay-opt.is-on .tx-pay-ic { color:var(--tp); } .tx-confirm { margin-top:2px; } @media(max-width:560px){ .tx-form-grid, .tx-loc, .tx-pay { grid-template-columns:1fr; } .tx-modal-card { padding:18px; border-radius:18px; } } /* booking box extras */ .bk-meals .bk-vpill span { color:#8a97ad; font-weight:600; font-size:.72rem; } .bk-err { font-size:.82rem; font-weight:600; color:#e5484d; margin-top:6px; } /* multi-room cart (mix & match room types) */ .bk-label-hint { font-weight:600; color:#98a4b8; text-transform:none; letter-spacing:0; font-size:.72rem; } .hbcart { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; } .hbcart-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1.5px solid #eef1f6; border-radius:14px; background:#fbfcfe; transition:border-color .2s, background .2s; } .hbcart-row.has { border-color:var(--tp); background:color-mix(in srgb,var(--tp) 5%,#fff); } .hbcart-info { min-width:0; display:flex; flex-direction:column; } .hbcart-info b { font-size:.9rem; font-weight:800; color:#0b1836; } .hbcart-info span { font-size:.76rem; color:#8a97ad; font-weight:600; } .hbcart-info small { color:#98a4b8; font-weight:500; } .hbcart-tag { font-style:normal; font-weight:700; color:#64748b; } .hbcart-tag.ok { color:#0e9f6e; } .hbcart-step { flex:0 0 auto; gap:5px; } .hbcart-step .bk-step-btn { width:28px; height:28px; border-radius:8px; } .hbcart-qty { width:30px; font-size:.98rem; } .bk-pax-solo { grid-template-columns:1fr; } .bk-row em { font-style:normal; font-size:.72rem; color:#98a4b8; font-weight:600; } /* hotel check-in/out policy times */ .hb-times { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 15px; padding:11px 14px; border-radius:13px; background:color-mix(in srgb,var(--tp) 6%,#fff); border:1px solid color-mix(in srgb,var(--tp) 15%,#eef1f6); } .hb-times span { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:#5a6b85; font-weight:600; } .hb-times .lucide { color:var(--tp); } .hb-times b { color:#0b1836; font-weight:800; } /* filter — premium custom controls (dropdown, star pills, slider) */ .hf-drop { position:relative; } .hf-drop .gdrop-btn { width:100%; background:#fbfcfe; border:1.5px solid #e4e9f2; color:#0b1836; border-radius:13px; padding:11px 13px; font-weight:600; font-size:.94rem; gap:9px; } .hf-drop .gdrop-btn:hover { background:#fff; border-color:color-mix(in srgb,var(--tp) 40%,#e4e9f2); } .hf-drop.open .gdrop-btn { border-color:var(--tp); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 15%,transparent); } .hf-drop .gdi { color:var(--tp); flex:0 0 auto; } .hf-drop .gdrop-val:not(.has-val) { color:#aab4c5; font-weight:500; } .hf-drop .gchev { color:#8a97ad; flex:0 0 auto; } .hf-stars { display:flex; gap:6px; flex-wrap:wrap; } .hf-star { display:inline-flex; align-items:center; gap:2px; cursor:pointer; border:1.5px solid #e4e9f2; background:#fbfcfe; color:#33415a; font-weight:800; font-size:.92rem; padding:10px 14px; border-radius:12px; transition:transform .15s, border-color .2s, background .2s, color .2s; } .hf-star span { color:#ffb020; font-size:.85rem; } .hf-star:hover { border-color:color-mix(in srgb,var(--tp) 40%,#e4e9f2); transform:translateY(-1px); } .hf-star.sel { border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--tp) 60%,transparent); } .hf-star.sel span { color:#fff; } .hf-budget { padding:0 6px; } .hf-budget .bs { position:relative; height:44px; padding-top:20px; touch-action:none; } .hf-budget .bs-track { background:#e7ecf4; } .hfilter-field label b.bs-out { color:var(--tp); font-weight:800; } /* budget slider inside the package-style filter group */ .pfg-body > .hf-budgetbox { margin-bottom:14px; } .hf-budgetbox .range-vals { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .hf-budgetbox .rv-cell { display:flex; flex-direction:column; } .hf-budgetbox .rv-cell small { font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#98a4b8; } .hf-budgetbox .bs-out { font-size:1.05rem; font-weight:800; color:var(--tp); } .hf-budgetbox .bs { position:relative; height:40px; padding-top:18px; touch-action:none; } .hf-budgetbox .bs-track { background:#e7ecf4; } .hf-budgetbox .rs-ends { display:flex; justify-content:space-between; margin-top:6px; font-size:.72rem; color:#98a4b8; font-weight:600; } @media (max-width:820px){ .hfilter { grid-template-columns:1fr 1fr; } .hfilter-btn { grid-column:1 / -1; } } @media (max-width:767px){ .plist-wrap { padding-bottom:78px; } } /* clear the fixed mfab bar */ @media (max-width:480px){ .hfilter { grid-template-columns:1fr; } .hcard-grid { grid-template-columns:1fr; } } /* ============================================================================ PAGINATION — shared across package / destination / hotel lists ============================================================================ */ .pagi { display:flex; align-items:center; justify-content:center; gap:8px; margin:36px 0 4px; flex-wrap:wrap; } .pagi-num, .pagi-arrow { display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 11px; border-radius:12px; border:1.5px solid #e6ecf5; background:#fff; color:#33415a; font-weight:800; font-size:.95rem; text-decoration:none; transition:transform .18s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s, color .2s, box-shadow .2s; } .pagi-num:hover, .pagi-arrow:hover { border-color:color-mix(in srgb,var(--tp) 45%,#e6ecf5); color:var(--tp); transform:translateY(-2px); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--tp) 40%,transparent); } .pagi-num.is-cur { border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--tp),var(--tp-2,#4aa8ff)); box-shadow:0 10px 22px -8px color-mix(in srgb,var(--tp) 55%,transparent); } .pagi-num.is-cur:hover { transform:none; color:#fff; } .pagi-arrow.is-dis { opacity:.4; pointer-events:none; } .pagi-gap { color:#98a4b8; font-weight:800; padding:0 2px; } /* ---- hotel location map + nearby ---- */ .hloc { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:stretch; } .hloc-map { min-height:380px; height:100%; border-radius:18px; overflow:hidden; z-index:0; box-shadow:0 10px 30px rgba(20,40,80,.08); border:1px solid #e6ebf3; background:#e9eef5; } .hloc-map .leaflet-container { font:inherit; } .hloc-near { background:#fff; border:1px solid #e9eef3; border-radius:18px; padding:18px 18px 14px; box-shadow:0 10px 30px rgba(20,40,80,.06); display:flex; flex-direction:column; } .hloc-near h3 { display:flex; align-items:center; gap:8px; font-size:1.02rem; font-weight:800; margin:0 0 12px; color:#16233b; } .hloc-near h3 svg { color:#2b6ef2; } .hloc-near-list { flex:1; } .hnear-grp { margin-bottom:12px; } .hnear-h { display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#7b8aa3; margin:0 0 6px; } .hnear-ic { display:inline-flex; align-items:center; color:#2b6ef2; } .hnear-ic svg { width:15px; height:15px; } .hnear-item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #eef1f6; } .hnear-grp:last-child .hnear-item:last-child { border-bottom:0; } .hnear-nm { color:#243147; font-size:.9rem; font-weight:600; line-height:1.3; } .hnear-km { color:#2b6ef2; font-size:.82rem; font-weight:800; white-space:nowrap; } .hloc-note { font-size:.72rem; color:#98a4b8; margin-top:8px; padding-top:10px; border-top:1px solid #f0f3f8; } .hloc-loading { color:#7b8aa3; font-size:.88rem; padding:14px 0; display:flex; align-items:center; gap:9px; } .hloc-spin { width:15px; height:15px; border:2px solid #d6e0f0; border-top-color:#2b6ef2; border-radius:50%; display:inline-block; animation:hlocspin .7s linear infinite; } @keyframes hlocspin { to { transform:rotate(360deg); } } @media(max-width:820px){ .hloc { grid-template-columns:1fr; } .hloc-map { min-height:300px; } } /* ============================================================ FOOTER — desktop unchanged; phones get an app-style collapsible footer ============================================================ */ .ftr-tg { all: unset; display: inline-flex; align-items: center; gap: 8px; font: inherit; color: inherit; cursor: default; } .ftr-chev, .ftr-acts { display: none; } @media (max-width: 767.98px) { .site-footer { padding: 28px 0 calc(84px + env(safe-area-inset-bottom)); margin-top: 40px; border-radius: 26px 26px 0 0; } .site-footer .container { padding-left: 16px; padding-right: 16px; } .site-footer .row { --bs-gutter-y: 0; row-gap: 10px; } /* brand card with quick contact actions */ .ftr-brand { padding: 18px 16px 16px !important; margin: 0 12px 6px; width: calc(100% - 24px); border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .ftr-brand h5 { font-size: 1.15rem; margin-bottom: 6px; } .ftr-contact { display: none; } .ftr-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 14px; } .ftr-acts a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: rgba(255,255,255,.07); color: #fff !important; font-size: .74rem; font-weight: 700; -webkit-tap-highlight-color: transparent; transition: transform .12s, background .2s; } .ftr-acts a:active { transform: scale(.96); background: rgba(255,255,255,.12); } .ftr-acts svg { color: var(--tp-2, #fff); } /* collapsible sections as a grouped list */ .ftr-sec { margin: 0 12px; width: calc(100% - 24px); padding: 0 !important; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); overflow: hidden; } .ftr-h { margin: 0 !important; } .ftr-tg { box-sizing: border-box; display: flex; width: 100%; min-height: 56px; padding: 0 16px; justify-content: space-between; cursor: pointer; font-weight: 700; font-size: .95rem; -webkit-tap-highlight-color: transparent; } .ftr-tg:focus-visible { outline: 2px solid var(--tp); outline-offset: -2px; border-radius: 18px; } .ftr-chev { display: block; opacity: .7; transition: transform .35s cubic-bezier(.16,1,.3,1); } .ftr-sec.is-open .ftr-chev { transform: rotate(180deg); } .ftr-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); } .ftr-sec.is-open .ftr-panel { grid-template-rows: 1fr; } .ftr-panel-in { min-height: 0; overflow: hidden; padding: 0 16px; } .ftr-sec.is-open .ftr-panel-in { padding-bottom: 14px; } .ftr-panel-in > div > a { display: flex; align-items: center; min-height: 42px; border-top: 1px solid rgba(255,255,255,.06); font-size: .9rem !important; } .ftr-panel-in .btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; } body:has(.mfab) .site-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } /* clear the fixed filter bar on listing pages */ .ftr-copy { margin-top: 18px !important; border-top: 0 !important; font-size: .74rem; opacity: .7; } /* light footer template */ .ftr-t5 .ftr-brand, .ftr-t5 .ftr-sec { background: #fff; border-color: rgba(10,20,40,.08); } .ftr-t5 .ftr-acts a { background: #f1f4f9; color: #16213a !important; } .ftr-t5 .ftr-panel-in > div > a { border-top-color: rgba(10,20,40,.06); } } @media (prefers-reduced-motion: reduce) { .ftr-panel, .ftr-chev { transition: none; } } /* ---- star ratings + reviews (SEO centre) ---- */ .stars { position:relative; display:inline-block; line-height:0; vertical-align:middle; white-space:nowrap; } .stars svg { display:inline-block; margin-right:1px; } .stars-bg svg { fill:#e2e5ea; } .stars-fg { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; } .stars-fg svg { fill:#f5a524; } .rv-wrap { margin:36px 0; } .rv-sum { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; background:#fff; border:1px solid #e8ebf0; border-radius:18px; padding:20px 22px; } .rv-big { text-align:center; min-width:120px; } .rv-big b { display:block; font-size:2.6rem; line-height:1; font-weight:800; color:#101828; } .rv-big small { display:block; color:#667085; margin-top:6px; font-size:.8rem; } .rv-bars { display:grid; gap:6px; } .rv-bar { display:grid; grid-template-columns:34px 1fr 38px; gap:10px; align-items:center; font-size:.8rem; color:#475467; } .rv-bar i { display:block; height:8px; border-radius:99px; background:#eef0f4; overflow:hidden; } .rv-bar i span { display:block; height:100%; background:#f5a524; border-radius:99px; } .rv-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:16px; } .rv-card { background:#fff; border:1px solid #e8ebf0; border-radius:16px; padding:16px 18px; } .rv-card h4 { font-size:1rem; margin:8px 0 4px; } .rv-card p { font-size:.9rem; color:#475467; margin:0; } .rv-meta { font-size:.76rem; color:#98a2b3; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; } .rv-verified { display:inline-flex; align-items:center; gap:3px; color:#067647; font-weight:600; } .rv-reply { margin-top:10px; padding:10px 12px; border-radius:10px; background:#f6f7f9; font-size:.84rem; color:#344054; } .rv-form { background:#fff; border:1px solid #e8ebf0; border-radius:18px; padding:18px 20px; margin-top:16px; } .rv-pick { display:inline-flex; flex-direction:row-reverse; gap:2px; } .rv-pick input { position:absolute; opacity:0; width:1px; height:1px; } .rv-pick label { cursor:pointer; line-height:0; padding:2px; } .rv-pick label svg { width:30px; height:30px; fill:#e2e5ea; transition:fill .12s, transform .12s; } .rv-pick input:checked ~ label svg, .rv-pick label:hover svg, .rv-pick label:hover ~ label svg { fill:#f5a524; } .rv-pick input:focus-visible + label svg { outline:2px solid var(--tp); outline-offset:2px; border-radius:4px; } .rv-note { border-radius:12px; padding:10px 14px; margin:12px 0 0; font-size:.88rem; } .rv-note.ok { background:#ecfdf3; color:#067647; } .rv-note.err { background:#fef3f2; color:#b42318; } .seo-answer { border-left:4px solid var(--tp); background:color-mix(in srgb, var(--tp) 6%, #fff); border-radius:0 14px 14px 0; padding:14px 18px; margin:18px 0; } .seo-answer b { display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tp); margin-bottom:4px; } .seo-faq details { border:1px solid #e8ebf0; border-radius:14px; padding:12px 16px; background:#fff; margin-bottom:10px; } .seo-faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; } .seo-faq summary::-webkit-details-marker { display:none; } .seo-faq summary::after { content:"+"; font-weight:700; color:var(--tp); } .seo-faq details[open] summary::after { content:"–"; } .seo-faq details > div { margin-top:8px; color:#475467; font-size:.93rem; } .seo-crumb { font-size:.82rem; color:#667085; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; } .seo-crumb a { color:inherit; text-decoration:none; } .seo-crumb a:hover { color:var(--tp); } .share-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .share-row a, .share-row button { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid #e4e7ec; background:#fff; color:#344054; } .share-row a:hover, .share-row button:hover { color:#fff; background:var(--tp); border-color:var(--tp); } @media (max-width: 575.98px) { .rv-sum { grid-template-columns:1fr; } } /* quick enquiry: labelled number boxes */ .bk-mini { display: grid; gap: 3px; margin: 0; min-width: 0; } .bk-mini > span { font-size: .72rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; } /* the WhatsApp button must never sit on top of a sticky “Book / Confirm” bar */ @media (max-width:767px){ body:has(.co-bar) .wa-float { bottom:calc(64px + 86px + env(safe-area-inset-bottom)); } } @media (max-width:900px){ body:has(.mfab) .wa-float { bottom:calc(64px + 96px + env(safe-area-inset-bottom)); } }