/* Theme 10 (Premium Light) - home page styles. Extracted from wl_homepage-10.php so the browser can cache them; default-layout.php already links this file in . */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap'); /* ---- THEME 10 palette: premium LIGHT (overrides the inherited dark band) ---- */ .prem10{ --ink:#101828; /* headings */ --paper:#f7f9fc; /* page background */ --surface:#ffffff; /* cards */ --soft:#475467; /* body copy */ --muted:#98a2b3; /* meta text */ --line:#e7ecf3; /* hairlines */ --gold:#c07d1e; --gold-ink:#8f5b12; --gold-soft:#fdf5e6; --teal:#0e7f6e; /* the dark "departure board" band becomes a light panel */ --band:#ffffff; --band-ink:#101828; --band-soft:#667085; --band-line:#e7ecf3; --fh:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif; --fm:'Inter',ui-sans-serif,system-ui,sans-serif; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--soft); background:var(--paper); } .prem10 h1,.prem10 h2,.prem10 h3,.prem10 .t10-h2{font-family:var(--fh);color:var(--ink);letter-spacing:-.02em;} .prem10 .t10-sec-alt{background:#eef3fa;} /* ============ THEME 10 — PREMIUM LIGHT (scoped to .prem10) ============ */ /* The shared search form ends with a 20px bottom margin, which showed as a white strip above theme 9's cream body. Close it wherever theme 9 renders. Scoped via :has(.prem10) so template 7/8 keep their original spacing. */ body:has(.prem10) .bharat-voyage-wrapper{margin-bottom:0;} .prem10{--ink:#0e1626;--paper:#f5f2ea;--surface:#fffdf9;--soft:#5a6478;--muted:#8a93a4; --line:#e6e1d5;--gold:#c07d1e;--gold-ink:#8f5b12;--gold-soft:#f4ead4;--teal:#0e7f6e; --band:#0e1626;--band-ink:#f4f1ea;--band-soft:#9aa6bd;--band-line:#26314a; --fh:"Helvetica Neue",Helvetica,Arial,sans-serif;--fm:ui-monospace,"SF Mono",Menlo,Consolas,monospace; background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:clip;} .prem10 *{box-sizing:border-box;} .prem10 .t10-wrap{max-width:1180px;margin:0 auto;padding:0 22px;} .prem10 .t10-ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none;} .prem10 .t10-ic-sm{width:16px;height:16px;} .prem10 .t10-ic-xs{width:14px;height:14px;} /* section shell */ .prem10 .t10-sec{padding:54px 0;} .prem10 .t10-sec-alt{background:linear-gradient(180deg,var(--gold-soft),transparent 60%);} .prem10 .t10-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;} .prem10 .t10-head-center{justify-content:center;text-align:center;} .prem10 .t10-kick{font-family:var(--fm);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px;} .prem10 .t10-kick-gold{color:var(--gold);} .prem10 .t10-h2{font-family:var(--fh);font-weight:800;font-size:clamp(1.4rem,3.4vw,1.95rem);letter-spacing:-.02em;line-height:1.12;margin:0;} .prem10 .t10-more{display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink);font-weight:600;font-size:.9rem;white-space:nowrap;text-decoration:none;transition:gap .2s;} .prem10 .t10-more:hover{gap:10px;} /* intro / trust */ .prem10 .t10-intro{padding:40px 0 8px;} .prem10 .t10-intro-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;align-items:center;} .prem10 .t10-eyebrow{font-family:var(--fm);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 10px;} .prem10 .t10-intro-title{font-family:var(--fh);font-weight:800;font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-.025em;line-height:1.08;margin:0;} .prem10 .t10-intro-title em{font-style:normal;color:var(--gold);} .prem10 .t10-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .prem10 .t10-trust-item{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center; background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 8px;font-size:.72rem;font-weight:600;color:var(--soft);line-height:1.25;} .prem10 .t10-trust-item .t10-ic{color:var(--teal);} /* deal cards */ .prem10 .t10-deals{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px;padding-top:10px;} /* overflow stays visible so the badge can hang over the card's top edge */ .prem10 .t10-deal{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:visible; text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s;display:block;position:relative;} .prem10 .t10-deal:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-deal-img{height:130px;background-size:cover;background-position:center;position:relative; background-color:var(--band);border-radius:15px 15px 0 0;} /* offer tag — sits half above / half inside the card's top edge */ .prem10 .t10-deal .t10-badge{ top:-12px;left:16px;z-index:3; background:linear-gradient(135deg,#e3a848,var(--gold-ink)); color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.11em;padding:6px 13px; box-shadow:0 8px 16px -5px rgba(143,91,18,.55),0 0 0 3px var(--surface); transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s; } .prem10 .t10-deal .t10-badge svg{color:#ffe3ad;} .prem10 .t10-deal:hover .t10-badge{ transform:translateY(-3px) scale(1.05); box-shadow:0 13px 22px -6px rgba(143,91,18,.68),0 0 0 3px var(--surface); } .prem10 .t10-badge{position:absolute;top:10px;left:10px;background:var(--band);color:var(--gold);font-family:var(--fm); font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:5px;} .prem10 .t10-badge-dark{background:var(--band);color:var(--band-ink);} .prem10 .t10-deal-body{padding:15px 16px;} .prem10 .t10-deal-title{font-family:var(--fh);font-weight:700;font-size:1.02rem;margin:0 0 5px;} .prem10 .t10-deal-desc{font-size:.84rem;color:var(--soft);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* routes */ .prem10 .t10-routes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .prem10 .t10-route{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px; text-decoration:none;color:inherit;transition:transform .25s,border-color .25s;} .prem10 .t10-route:hover{transform:translateY(-5px);border-color:var(--gold);} /* route image / logo tile — falls back to the destination code when no image */ .prem10 .t10-route-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;} .prem10 .t10-route-logo{width:48px;height:48px;border-radius:13px;flex:none;overflow:hidden; background:var(--surface);border:1px solid var(--line);display:grid;place-items:center; transition:transform .25s;} .prem10 .t10-route-logo img{width:100%;height:100%;object-fit:contain;padding:7px;display:block;} /* shared flight image fills the tile edge to edge (it carries its own background) */ .prem10 .t10-route-logo.is-default{border-color:transparent;background:var(--band);} .prem10 .t10-route-logo.is-default img{padding:0;object-fit:cover;} .prem10 .t10-route:hover .t10-route-logo{transform:scale(1.06);} .prem10 .t10-route-hd{min-width:0;} .prem10 .t10-route-top{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-weight:700; font-size:.98rem;min-width:0;} .prem10 .t10-route-city{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prem10 .t10-route-plane{color:var(--gold);flex:none;} .prem10 .t10-route-codes{font-family:var(--fm);font-size:.76rem;color:var(--muted);margin:3px 0 0;} .prem10 .t10-route-codes span{color:var(--gold-ink);} .prem10 .t10-route-foot{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px dashed var(--line);padding-top:11px;} .prem10 .t10-route-date{font-family:var(--fm);font-size:.74rem;color:var(--soft);} .prem10 .t10-route-fare{font-family:var(--fm);font-weight:700;font-size:1.1rem;color:var(--ink);} /* grids */ .prem10 .t10-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .prem10 .t10-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} /* hotel */ .prem10 .t10-hotel{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-hotel:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-hotel-img{display:block;height:140px;background-size:cover;background-position:center;position:relative;background-color:var(--band);} .prem10 .t10-hotel-stars{position:absolute;bottom:10px;left:10px;display:flex;gap:2px;color:var(--gold); background:rgba(255,255,255,.92);padding:4px 8px;border-radius:20px;} .prem10 .t10-hotel-body{padding:14px 16px;} .prem10 .t10-hotel-name{font-family:var(--fh);font-weight:700;font-size:1rem;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* full address — icon stays pinned to the first line, text wraps to max 2 lines */ .prem10 .t10-hotel-city{display:flex;align-items:flex-start;gap:5px;color:var(--muted);font-size:.8rem;line-height:1.4;margin:0 0 10px;min-height:2.24em;} .prem10 .t10-hotel-city .t10-ic{margin-top:3px;} .prem10 .t10-hotel-city span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* amenity icons — one compact line */ .prem10 .t10-hotel-amen{list-style:none;display:flex;align-items:center;gap:6px;padding:0;margin:0 0 12px;} .prem10 .t10-hotel-amen li{width:26px;height:26px;border-radius:8px;background:var(--gold-soft); display:grid;place-items:center;flex:none;transition:transform .2s;} .prem10 .t10-hotel-amen li:hover{transform:translateY(-2px);} .prem10 .t10-hotel-amen img{width:15px;height:15px;object-fit:contain;display:block;} .prem10 .t10-hotel-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px; border-top:1px solid var(--line);padding-top:12px;} .prem10 .t10-hotel-price small{display:block;font-size:.68rem;color:var(--muted);line-height:1.2;} .prem10 .t10-hotel-price strong{font-family:var(--fm);font-size:1.12rem;color:var(--ink);white-space:nowrap;} .prem10 .t10-rating{display:inline-flex;align-items:center;gap:4px;background:var(--gold-soft);color:var(--gold-ink);font-weight:700;font-size:.8rem;padding:4px 9px;border-radius:8px;} /* buttons */ .prem10 .t10-btn-sm{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:#fff;font-weight:700; font-size:.82rem;padding:8px 14px;border-radius:9px;text-decoration:none;transition:background .2s;white-space:nowrap;} .prem10 .t10-btn-sm:hover{background:var(--gold-ink);color:#fff;} /* places */ .prem10 .t10-places{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .prem10 .t10-place{position:relative;border-radius:14px;overflow:hidden;height:210px;color:#fff;display:flex; align-items:flex-end;padding:15px;text-decoration:none;background-size:cover;background-position:center;background-color:var(--band);transition:transform .25s;} .prem10 .t10-place:hover{transform:scale(1.02);} .prem10 .t10-place::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 32%,rgba(8,12,22,.82));z-index:1;} .prem10 .t10-place-c{position:relative;z-index:2;} .prem10 .t10-place-c h3{font-family:var(--fh);font-weight:700;font-size:1.12rem;margin:0;color:#fff;} .prem10 .t10-place-p{font-family:var(--fm);font-size:.78rem;color:#ecd9b4;margin:2px 0 0;} .prem10 .t10-place-tag{position:absolute;top:11px;right:11px;z-index:2;background:rgba(255,255,255,.18); backdrop-filter:blur(6px);font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;} /* package */ .prem10 .t10-pkg{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-pkg:hover{transform:translateY(-6px);box-shadow:0 24px 40px -22px rgba(14,22,38,.4);} .prem10 .t10-pkg-img{display:block;height:170px;background-size:cover;background-position:center;position:relative;background-color:var(--band);} .prem10 .t10-pkg-body{padding:16px 18px;} .prem10 .t10-pkg-title{font-family:var(--fh);font-weight:700;font-size:1.08rem;margin:0 0 10px;} .prem10 .t10-pkg-title a{color:inherit;text-decoration:none;} .prem10 .t10-pkg-inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px;} .prem10 .t10-pkg-inc li{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--gold-ink); font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:7px;} .prem10 .t10-pkg-foot{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;} .prem10 .t10-pkg-price small{display:block;font-size:.7rem;color:var(--muted);} .prem10 .t10-pkg-price strong{font-family:var(--fm);font-size:1.15rem;color:var(--ink);} /* visa */ .prem10 .t10-visa{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-visa:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-visa-img{display:block;height:130px;background-size:cover;background-position:center;position:relative;background-color:var(--band);} .prem10 .t10-visa-body{padding:14px 16px;} .prem10 .t10-visa-country{font-family:var(--fh);font-weight:700;font-size:1rem;margin:0 0 6px;} .prem10 .t10-visa-country a{color:inherit;text-decoration:none;} .prem10 .t10-visa-time{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.8rem;margin:0 0 8px;} .prem10 .t10-visa-cost{font-family:var(--fm);font-weight:700;color:var(--ink);font-size:1.02rem;} .prem10 .t10-visa-cost span{font-family:var(--fh);font-weight:500;font-size:.74rem;color:var(--muted);} /* car */ .prem10 .t10-car{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;transition:transform .25s,box-shadow .25s;} .prem10 .t10-car:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-car-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;} .prem10 .t10-car-name{font-family:var(--fh);font-weight:700;font-size:1.05rem;} .prem10 .t10-car-route{color:var(--muted);font-size:.82rem;margin:3px 0 0;} .prem10 .t10-car-img{width:88px;height:56px;object-fit:contain;flex:none;} .prem10 .t10-car-specs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;} .prem10 .t10-car-specs span{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--gold-ink);font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:7px;} .prem10 .t10-car-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;} .prem10 .t10-car-price{font-family:var(--fm);font-weight:700;font-size:1.15rem;color:var(--ink);} .prem10 .t10-car-price small{color:var(--muted);font-weight:500;} /* bus */ .prem10 .t10-bus{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;} .prem10 .t10-bus:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-bus-img{height:150px;background-size:cover;background-position:center;background-color:var(--band);position:relative;} .prem10 .t10-bus-body{padding:16px 18px;} .prem10 .t10-bus-name{font-family:var(--fh);font-weight:700;font-size:1.05rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prem10 .t10-bus-op{color:var(--gold-ink);font-size:.78rem;font-weight:600;margin:3px 0 0;} .prem10 .t10-bus-route{display:flex;align-items:center;gap:5px;color:var(--soft);font-size:.82rem;margin:9px 0 0;} .prem10 .t10-bus-route span{color:var(--gold-ink);} .prem10 .t10-bus-specs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;} .prem10 .t10-bus-specs span{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--gold-ink);font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:7px;} .prem10 .t10-bus-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;} .prem10 .t10-bus-fare{font-family:var(--fm);font-weight:700;font-size:1.1rem;color:var(--ink);} .prem10 .t10-bus-fare small{color:var(--muted);font-weight:500;} /* ============ SACRED JOURNEYS — premium Islamic devotional theme ============ */ .prem10 .t10-pilgrim{position:relative;overflow:hidden; /* warm ivory base + emerald & gold glows + geometric star pattern */ background: radial-gradient(680px 340px at 10% -10%,rgba(15,157,116,.13),transparent 60%), radial-gradient(620px 320px at 92% 6%,rgba(201,162,39,.18),transparent 60%), linear-gradient(180deg,#fbf5e8,#f4ecdb);} /* geometric 8-point star texture overlay */ .prem10 .t10-pilgrim::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1.1' opacity='0.22'%3E%3Cpath d='M42 10l7.5 24.5L74 42l-24.5 7.5L42 74l-7.5-24.5L10 42l24.5-7.5z'/%3E%3Ccircle cx='42' cy='42' r='30'/%3E%3Crect x='27' y='27' width='30' height='30' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E");} /* mosque-silhouette pattern (uploaded image) sits along the bottom */ .prem10 .t10-pilgrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;pointer-events:none; background-image:var(--pil-bg);background-repeat:repeat-x;background-position:bottom center;background-size:auto 150px; opacity:.5;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);} .prem10 .t10-pilgrim .t10-wrap{position:relative;z-index:2;} /* hanging lanterns */ .prem10 .t10-pil-lantern{position:absolute;top:-4px;z-index:1;color:#c9a227;opacity:.55;pointer-events:none; animation:d9sway 5s ease-in-out infinite;transform-origin:top center;} .prem10 .t10-pil-lantern svg{width:34px;height:auto;filter:drop-shadow(0 6px 8px rgba(201,162,39,.3));} .prem10 .t10-pil-lantern-l{left:5%;} .prem10 .t10-pil-lantern-r{right:6%;animation-delay:-2.2s;} .prem10 .t10-pil-lantern-r svg{width:30px;} @keyframes d9sway{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}} @media(max-width:760px){.prem10 .t10-pil-lantern{display:none;}} /* header ornaments */ .prem10 .t10-pil-kick{display:inline-flex;align-items:center;gap:8px;color:#0e8f6a;justify-content:center;} .prem10 .t10-pil-crescent{width:16px;height:16px;color:#c9a227;} .prem10 .t10-pil-h2{background:linear-gradient(90deg,#0e6b52,#1a1d29 55%,#9a6414);-webkit-background-clip:text;background-clip:text;color:transparent;} .prem10 .t10-pil-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;color:#c9a227;} .prem10 .t10-pil-divider span{height:2px;width:60px;background:linear-gradient(90deg,transparent,#c9a227);} .prem10 .t10-pil-divider span:last-child{background:linear-gradient(90deg,#c9a227,transparent);} .prem10 .t10-pil-divider svg{width:18px;height:18px;} /* colourful arched feature tiles */ .prem10 .t10-pil-tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 24px;} .prem10 .t10-pil-tile{position:relative;display:flex;align-items:flex-end;min-height:210px;padding:24px; border-radius:20px 20px 20px 20px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .3s,box-shadow .3s; box-shadow:0 22px 44px -26px rgba(20,24,31,.5);border:1px solid rgba(255,255,255,.14);} .prem10 .t10-pil-umrah{background:radial-gradient(420px 200px at 100% 0,rgba(255,255,255,.18),transparent 60%),linear-gradient(140deg,#13a878,#0a5747);} .prem10 .t10-pil-hajj{background:radial-gradient(420px 200px at 100% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(140deg,#e2ab45,#9a6414);} .prem10 .t10-pil-tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.2'%3E%3Cpath d='M35 6l6 23 23 6-23 6-6 23-6-23-23-6 23-6z'/%3E%3C/g%3E%3C/svg%3E");} /* pointed Islamic arch ornament, top-right */ .prem10 .t10-pil-arch{position:absolute;top:-30px;right:-20px;width:150px;height:180px;pointer-events:none; border:2px solid rgba(255,255,255,.28);border-radius:75px 75px 0 0;transform:rotate(0);opacity:.5;} .prem10 .t10-pil-arch::after{content:"";position:absolute;left:50%;top:-14px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg); border:2px solid rgba(255,255,255,.35);border-bottom:none;border-left:none;} .prem10 .t10-pil-tile:hover{transform:translateY(-6px);box-shadow:0 30px 54px -26px rgba(20,24,31,.6);} .prem10 .t10-pil-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,.2);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);font-size:.7rem; font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;color:#fff;} .prem10 .t10-pil-badge-gold{background:rgba(28,18,6,.28);} .prem10 .t10-pil-tc{position:relative;z-index:2;} .prem10 .t10-pil-tc h3{font-family:var(--fh);font-weight:800;font-size:1.45rem;margin:0 0 5px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25);} .prem10 .t10-pil-tc p{margin:0 0 14px;color:rgba(255,255,255,.92);font-size:.9rem;max-width:34ch;} .prem10 .t10-pil-link{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.9rem;color:#fff; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:9px 16px;border-radius:11px;transition:gap .2s,background .2s;} .prem10 .t10-pil-tile:hover .t10-pil-link{gap:11px;background:rgba(255,255,255,.28);} /* horizontal package slider */ /* slider with prev/next buttons — raw scrollbar hidden */ .prem10 .t10-pil-slider{position:relative;} .prem10 .t10-pil-rail{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;} .prem10 .t10-pil-rail::-webkit-scrollbar{display:none;height:0;width:0;} .prem10 .t10-pil-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px; border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--gold-ink);display:grid;place-items:center; cursor:pointer;box-shadow:0 12px 26px -12px rgba(20,24,31,.5);transition:transform .2s,background .2s,color .2s,opacity .2s;} .prem10 .t10-pil-nav svg{width:22px;height:22px;} .prem10 .t10-pil-nav:hover{background:var(--gold);color:#fff;transform:translateY(-50%) scale(1.08);} .prem10 .t10-pil-nav:disabled{opacity:.35;cursor:default;box-shadow:none;} .prem10 .t10-pil-nav:disabled:hover{background:#fff;color:var(--gold-ink);transform:translateY(-50%);} .prem10 .t10-pil-prev{left:-14px;} .prem10 .t10-pil-next{right:-14px;} @media(max-width:640px){.prem10 .t10-pil-nav{display:none;}} /* swipe on mobile */ .prem10 .t10-pil-card{flex:0 0 280px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line); border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s;} .prem10 .t10-pil-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(14,22,38,.42);} .prem10 .t10-pil-img{height:150px;background-size:cover;background-position:center;background-color:var(--band);position:relative;} .prem10 .t10-pil-tag{position:absolute;top:10px;left:10px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:4px 10px;border-radius:20px;color:#fff;} .prem10 .t10-pil-tag-hajj{background:#8a5a1a;} .prem10 .t10-pil-tag-umrah{background:#0e7f6e;} .prem10 .t10-pil-nights{position:absolute;top:10px;right:10px;background:rgba(9,14,22,.72);color:#fff;font-size:.68rem;font-weight:700; padding:4px 9px;border-radius:20px;} .prem10 .t10-pil-body{padding:15px 16px 16px;} .prem10 .t10-pil-name{font-family:var(--fh);font-weight:700;font-size:1rem;line-height:1.3;margin:0 0 7px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;} .prem10 .t10-pil-from{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.8rem;margin:0 0 12px;} .prem10 .t10-pil-foot{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;gap:8px;} .prem10 .t10-pil-price small{display:block;font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .prem10 .t10-pil-price strong{font-family:var(--fm);font-size:1.05rem;color:var(--ink);} /* why us */ .prem10 .t10-why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .prem10 .t10-feat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center;} .prem10 .t10-feat-ic{width:54px;height:54px;border-radius:15px;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;margin:0 auto 14px;} .prem10 .t10-feat h3{font-family:var(--fh);font-weight:700;font-size:1.02rem;margin:0 0 5px;} .prem10 .t10-feat p{color:var(--soft);font-size:.87rem;margin:0;} /* testimonials */ .prem10 .t10-testi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;} .prem10 .t10-testi-quote{width:30px;height:30px;color:var(--gold-soft);margin-bottom:6px;} .prem10 .t10-testi-text{color:var(--soft);font-size:.92rem;line-height:1.6;margin:0 0 18px;} .prem10 .t10-testi-by{display:flex;align-items:center;gap:12px;} .prem10 .t10-testi-img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;} .prem10 .t10-testi-name{font-family:var(--fh);font-weight:700;font-size:.95rem;} .prem10 .t10-testi-stars{display:flex;gap:2px;color:var(--gold);margin-top:2px;} /* app band */ .prem10 .t10-app{background:var(--band);border-radius:22px;color:var(--band-ink);display:grid; grid-template-columns:1.3fr 1fr;overflow:hidden;position:relative;isolation:isolate;} /* layered colour: warm gold, cool teal and a violet lift */ .prem10 .t10-app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(620px 300px at 88% 115%,rgba(224,162,63,.34),transparent 62%), radial-gradient(520px 260px at 6% -12%,rgba(20,180,160,.26),transparent 60%), radial-gradient(460px 320px at 62% -30%,rgba(124,92,224,.22),transparent 62%);} .prem10 .t10-app::after{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;z-index:1; background:linear-gradient(90deg,#e0a23f,#12b4a0 38%,#7c5ce0 70%,#ff5a3c);opacity:.9;} .prem10 .t10-app-l{padding:46px;position:relative;z-index:2;} .prem10 .t10-app-title{font-family:var(--fh);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;color:var(--band-ink);} .prem10 .t10-app-sub{color:var(--band-soft);margin:0;max-width:38ch;} /* colourful perk chips */ .prem10 .t10-app-perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 0;} .prem10 .t10-app-perks li{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600; padding:6px 12px;border-radius:20px;border:1px solid transparent;} .prem10 .t10-app-perks .p-gold{background:rgba(224,162,63,.16);color:#f0b95e;border-color:rgba(224,162,63,.32);} .prem10 .t10-app-perks .p-teal{background:rgba(20,180,160,.16);color:#4bd6c0;border-color:rgba(20,180,160,.32);} .prem10 .t10-app-perks .p-violet{background:rgba(124,92,224,.18);color:#a996f2;border-color:rgba(124,92,224,.34);} /* official-style store badges */ .prem10 .t10-stores{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;} .prem10 .t10-store{display:inline-flex;align-items:center;gap:10px;background:#080d17; border:1px solid rgba(255,255,255,.22);padding:9px 18px 9px 15px;border-radius:12px; color:#fff;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s;} .prem10 .t10-store:hover{transform:translateY(-3px);color:#fff;border-color:rgba(255,255,255,.45); box-shadow:0 14px 26px -12px rgba(0,0,0,.85);} .prem10 .t10-store-ic{width:24px;height:24px;flex:none;} .prem10 .t10-store-tx{display:flex;flex-direction:column;line-height:1.15;} .prem10 .t10-store-tx small{font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;opacity:.82;} .prem10 .t10-store-tx strong{font-family:var(--fh);font-size:1rem;font-weight:700;letter-spacing:-.01em;} /* rating line */ .prem10 .t10-app-rating{display:flex;align-items:center;gap:8px;margin:16px 0 0; color:var(--band-soft);font-size:.8rem;} .prem10 .t10-app-rating b{color:var(--band-ink);font-size:.9rem;} .prem10 .t10-app-stars{display:inline-flex;gap:1px;color:#f0b95e;} /* uploaded app artwork, presented inside a phone frame */ .prem10 .t10-app-device{ position:relative;display:inline-block;padding:17px 10px 13px;border-radius:30px; background:linear-gradient(158deg,#33405e,#131c2e 55%,#0b1220); box-shadow:0 30px 55px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.16); animation:d9float 4s ease-in-out infinite; } .prem10 .t10-app-notch{ position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:2; width:46px;height:4px;border-radius:10px;background:rgba(255,255,255,.3); } .prem10 .t10-app-img{ display:block;height:300px;width:auto;max-width:100%; border-radius:19px; /* the little round corner on the screen itself */ background:#fff; } .prem10 .t10-app-r{position:relative;z-index:2;display:grid;place-items:center;padding:26px;} /* colour halo behind the phone */ .prem10 .t10-app-r::before{content:"";position:absolute;width:270px;height:270px;border-radius:50%; background:radial-gradient(circle,rgba(224,162,63,.42),rgba(124,92,224,.22) 55%,transparent 72%); filter:blur(14px);z-index:-1;} .prem10 .t10-phone{width:150px;height:255px;border-radius:26px;background:linear-gradient(160deg,var(--gold),var(--gold-ink));border:6px solid rgba(255,255,255,.14);box-shadow:0 30px 50px -20px rgba(0,0,0,.6);} /* ===== animations ===== */ .prem10 .t10-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);} .prem10 .t10-reveal.t10-in{opacity:1;transform:none;} @keyframes d9float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} .prem10 .t10-phone{animation:d9float 4s ease-in-out infinite;} /* ===== responsive ===== */ @media(max-width:960px){ .prem10 .t10-deals,.prem10 .t10-routes,.prem10 .t10-grid4,.prem10 .t10-places{grid-template-columns:repeat(2,1fr);} .prem10 .t10-grid3,.prem10 .t10-why{grid-template-columns:repeat(2,1fr);} .prem10 .t10-intro-grid{grid-template-columns:1fr;} } @media(max-width:600px){ .prem10 .t10-sec{padding:40px 0;} .prem10 .t10-deals,.prem10 .t10-routes,.prem10 .t10-grid4,.prem10 .t10-grid3,.prem10 .t10-places,.prem10 .t10-why{grid-template-columns:1fr;} .prem10 .t10-pil-tiles{grid-template-columns:1fr;} .prem10 .t10-pil-card{flex-basis:78%;} .prem10 .t10-trust{grid-template-columns:repeat(4,1fr);gap:6px;} .prem10 .t10-trust-item{padding:11px 4px;font-size:.64rem;} .prem10 .t10-head{flex-direction:column;align-items:flex-start;gap:8px;} .prem10 .t10-app{grid-template-columns:1fr;} .prem10 .t10-app-r{display:none;} .prem10 .t10-app-l{padding:32px;} } @media(prefers-reduced-motion:reduce){ .prem10 .t10-reveal{opacity:1;transform:none;transition:none;} .prem10 .t10-phone{animation:none;} .prem10 *{transition:none!important;} } /* ================= AUTO SLIDERS (7 discovery sections) ================= Each section that used to stack into two rows is now a single-row owl carousel that advances on its own. Cards must keep a uniform height, and the reveal-on-scroll animation is disabled inside sliders because owl clones items — a cloned node never receives the IntersectionObserver callback and would stay invisible. */ .prem10 .t10-slider{ display:block; } .prem10 .t10-slider .owl-stage{ display:flex; } .prem10 .t10-slider .owl-item{ display:flex; align-items:stretch; height:auto; } /* Only stretch the width. Forcing height:100% here resolved the percentage against an auto-height flex item, which collapsed every card to its text height (wide 80px strips with clipped titles). */ .prem10 .t10-slider .owl-item > *{ width:100%; } /* neutralise scroll-reveal inside sliders (clones never animate in) */ .prem10 .t10-slider .t10-reveal{ opacity:1 !important; transform:none !important; } /* dots */ .prem10 .t10-slider .owl-dots{ margin-top:18px; text-align:center; line-height:0; } .prem10 .t10-slider .owl-dots .owl-dot{ display:inline-block; } .prem10 .t10-slider .owl-dots .owl-dot span{ width:7px; height:7px; margin:0 4px; background:#d6dee9; border-radius:50%; display:block; transition:all .25s ease; } .prem10 .t10-slider .owl-dots .owl-dot.active span{ width:22px; border-radius:4px; background:var(--gold); } /* arrows */ .prem10 .t10-slider .owl-nav{ margin:0; } .prem10 .t10-slider .owl-nav button.owl-prev, .prem10 .t10-slider .owl-nav button.owl-next{ position:absolute; top:38%; transform:translateY(-50%); z-index:5; width:40px; height:40px; border-radius:50%; background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:0 6px 18px -8px rgba(16,24,40,.35); display:flex; align-items:center; justify-content:center; font-size:0; transition:all .22s ease; } .prem10 .t10-slider .owl-nav button.owl-prev{ left:-18px; } .prem10 .t10-slider .owl-nav button.owl-next{ right:-18px; } .prem10 .t10-slider .owl-nav button:hover{ background:var(--gold) !important; color:#fff !important; border-color:transparent !important; } .prem10 .t10-slider .owl-nav button svg{ width:16px; height:16px; } .prem10 .t10-slider .owl-nav button.disabled{ opacity:.35; } .prem10 .t10-sec{ position:relative; } @media (max-width: 1199.98px){ .prem10 .t10-slider .owl-nav button.owl-prev{ left:-6px; } .prem10 .t10-slider .owl-nav button.owl-next{ right:-6px; } } @media (max-width: 767.98px){ /* On phones the arrows sit over the cards, so hide them and let the carousel be swiped / auto-advance. */ .prem10 .t10-slider .owl-nav{ display:none; } .prem10 .t10-slider .owl-dots{ margin-top:14px; } } /* ---- Square destination cards (Trending Indian / International) ---- A fixed pixel height left short, letterboxed cards; a 1:1 ratio scales with the column width and reads better in a slider. */ .prem10 .t10-place{ height:auto; aspect-ratio:1 / 1; min-height:0; align-items:flex-end; padding:16px; } .prem10 .t10-place::before{ background:linear-gradient(transparent 42%, rgba(8,12,22,.86)); } .prem10 .t10-place-c h3{ font-size:1.18rem; line-height:1.25; } .prem10 .t10-place-p{ font-size:.82rem; } /* Older engines without aspect-ratio keep a sensible square-ish fallback. */ @supports not (aspect-ratio: 1 / 1){ .prem10 .t10-place{ height:250px; } } @media (max-width:575.98px){ /* One card per view on phones — full square would be very tall, so ease it. */ .prem10 .t10-place{ aspect-ratio:4 / 3; } @supports not (aspect-ratio: 4 / 3){ .prem10 .t10-place{ height:210px; } } } /* ---- Align price + View across package cards ---- The tag list wraps to a second row when a package includes more services (e.g. 6 tags vs 4), which pushed that card's footer further down. Making the card a flex column and giving the footer margin-top:auto pins price/button to the bottom, so they line up across the row whatever the tag count. The slider already stretches cards to equal height, so "bottom" is shared. */ .prem10 .t10-pkg{ display:flex; flex-direction:column; } .prem10 .t10-pkg-img{ flex:0 0 auto; } .prem10 .t10-pkg-body{ display:flex; flex-direction:column; flex:1 1 auto; } .prem10 .t10-pkg-inc{ margin-bottom:14px; } .prem10 .t10-pkg-foot{ margin-top:auto; } /* Same treatment for the other cards whose body length varies, so every row of cards has its price/CTA on one line. */ .prem10 .t10-hotel{ display:flex; flex-direction:column; } .prem10 .t10-hotel-body{ display:flex; flex-direction:column; flex:1 1 auto; } .prem10 .t10-hotel-foot{ margin-top:auto; } .prem10 .t10-visa{ display:flex; flex-direction:column; } .prem10 .t10-visa-body{ display:flex; flex-direction:column; flex:1 1 auto; } .prem10 .t10-visa-cost{ margin-top:auto; } .prem10 .t10-car{ display:flex; flex-direction:column; } .prem10 .t10-car-foot{ margin-top:auto; } /* ---- Top Rented Cars: single-line name + route, larger car image ---- .t10-car-top is a flex row; without min-width:0 the text block refuses to shrink below its content, so long routes ("Indira Gandhi International Airport → Delhi") wrapped over several lines and pushed the card contents down. Constraining it lets the ellipsis do the work instead. */ .prem10 .t10-car-hd{ flex:1 1 auto; min-width:0; } .prem10 .t10-car-name, .prem10 .t10-car-route{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .prem10 .t10-car-name{ font-size:1.02rem; line-height:1.3; } .prem10 .t10-car-route{ margin-top:4px; } /* Bigger car photo */ .prem10 .t10-car-img{ width:132px; height:84px; flex:0 0 132px; } .prem10 .t10-car-top{ align-items:center; gap:10px; } /* Keep price + Book Now on a shared bottom line across all cards */ .prem10 .t10-car-foot{ margin-top:auto; } @media (max-width:1199.98px){ .prem10 .t10-car-img{ width:112px; height:72px; flex:0 0 112px; } } @media (max-width:575.98px){ .prem10 .t10-car-img{ width:120px; height:76px; flex:0 0 120px; } } /* ---- Shop product cards (home slider) ---- */ .prem10 .t10-shop{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .25s, box-shadow .25s; } .prem10 .t10-shop:hover{ transform:translateY(-6px); box-shadow:0 22px 38px -22px rgba(14,22,38,.4); } .prem10 .t10-shop-img{ display:block; aspect-ratio:1/1; background-size:cover; background-position:center; background-color:#eef2f7; position:relative; flex:0 0 auto; } .prem10 .t10-shop-tag{ position:absolute; left:10px; bottom:10px; background:rgba(255,255,255,.94); color:var(--gold-ink); font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:20px; } .prem10 .t10-shop-out{ position:absolute; right:10px; top:10px; background:#fee2e2; color:#b42318; font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:20px; } .prem10 .t10-shop-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:14px 16px 16px; } .prem10 .t10-shop-cat{ font-family:var(--fm); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 4px; font-weight:600; } .prem10 .t10-shop-name{ font-family:var(--fh); font-weight:700; font-size:1rem; margin:0 0 12px; line-height:1.3; } .prem10 .t10-shop-name a{ color:var(--ink); text-decoration:none; } .prem10 .t10-shop-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; } .prem10 .t10-shop-price strong{ font-family:var(--fm); font-size:1.1rem; color:var(--ink); } .prem10 .t10-shop-price span{ font-size:.82rem; color:var(--muted); text-decoration:line-through; margin-left:5px; } /* --------------------------------------------------------------- Deals slider: the offer tag is positioned top:-12px so it straddles the card's top edge. Owl clips its viewport with overflow:hidden on .owl-stage-outer, which sliced the tag in half. Pad the stage so the overhang falls inside the clipped area, and pull the same amount back off the top so the section spacing is unchanged. --------------------------------------------------------------- */ .prem10 .t10-slider-deals .owl-stage-outer{ padding-top:18px; margin-top:-18px; } /* The nav arrows are centred on the stage; the padding above shifts them down by half of it, so nudge them back onto the card's mid-line. */ .prem10 .t10-slider-deals .owl-nav button.owl-prev, .prem10 .t10-slider-deals .owl-nav button.owl-next{ margin-top:9px; } /* =============================================================== CHEAPEST FLIGHTS — deal card Image with a cabin chip, then two lines: route, then date + price. Foot row carries the % off pill and the Grab Deal action. =============================================================== */ .prem10 .t10-all-deals{ margin-left:auto;display:inline-flex;align-items:center;gap:7px; font-family:var(--fm);font-size:.74rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--gold-ink);text-decoration:none; padding:9px 16px;border:1px solid var(--gold);border-radius:30px; background:var(--surface);transition:background .22s,color .22s,transform .22s; } .prem10 .t10-all-deals:hover{background:var(--gold);color:#fff;transform:translateY(-2px);} .prem10 .t10-all-deals svg{width:14px;height:14px;} .prem10 .t10-deal-card{ background:var(--surface);border:1px solid var(--line);border-radius:16px; overflow:hidden;display:flex;flex-direction:column;height:100%; transition:transform .25s,box-shadow .25s; } .prem10 .t10-deal-card:hover{transform:translateY(-6px);box-shadow:0 22px 38px -22px rgba(14,22,38,.4);} .prem10 .t10-deal-media{position:relative;height:190px;background:var(--band);} .prem10 .t10-deal-media img{width:100%;height:100%;object-fit:cover;display:block;} /* Sits on top of a photograph, so it needs to read at a glance: solid white rather than translucent, near-black text, and a shadow to lift it off whatever colour happens to be behind it. */ /* Sits on top of a photograph, so it needs to read at a glance: solid white rather than translucent, near-black text, and a shadow to lift it off whatever colour happens to be behind it. Kept compact so it marks the image without covering it — the weight and solid fill carry legibility, not size. */ .prem10 .t10-deal-chip{ position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px; background:#ffffff;color:#0e1626; font-family:var(--fm);font-size:.62rem;font-weight:800;letter-spacing:.04em; text-transform:uppercase;padding:4px 9px;border-radius:20px;line-height:1; box-shadow:0 2px 10px -2px rgba(14,22,38,.4),0 0 0 1px rgba(14,22,38,.06); } .prem10 .t10-deal-chip svg{width:11px;height:11px;color:var(--gold-ink);flex:none;} .prem10 .t10-deal-body{padding:16px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1;} /* line 1 — route */ .prem10 .t10-deal-route{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .prem10 .t10-deal-city{font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.25;} .prem10 .t10-deal-plane{width:15px;height:15px;color:var(--gold-ink);flex:none;} .prem10 .t10-deal-codes{ font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;color:var(--muted); display:flex;align-items:center;gap:6px;margin-top:-4px; } .prem10 .t10-deal-codes span{color:var(--gold-ink);} .prem10 .t10-deal-nonstop{font-style:normal;color:var(--muted);} /* line 2 — date + price */ .prem10 .t10-deal-line2{ display:flex;align-items:flex-end;justify-content:space-between;gap:12px; padding-top:9px;border-top:1px dashed var(--line);margin-top:2px; } .prem10 .t10-deal-date{ display:inline-flex;align-items:center;gap:6px; font-size:.8rem;color:var(--muted);white-space:nowrap; } .prem10 .t10-deal-date svg{width:13px;height:13px;color:var(--gold-ink);flex:none;} .prem10 .t10-deal-price-wrap{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;justify-content:flex-end;} .prem10 .t10-deal-price{font-size:1.18rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;} .prem10 .t10-deal-strike{font-size:.8rem;color:var(--muted);text-decoration:line-through;} /* foot — % off + action */ .prem10 .t10-deal-foot{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:auto;padding-top:12px; } .prem10 .t10-deal-off{ display:inline-flex;align-items:center; background:#e8f6ec;color:#1c7a43;font-family:var(--fm);font-size:.7rem;font-weight:800; letter-spacing:.05em;padding:6px 12px;border-radius:20px;white-space:nowrap; } .prem10 .t10-deal-btn{ display:inline-flex;align-items:center;gap:7px; background:linear-gradient(135deg,#e3a848,var(--gold-ink));color:#fff; font-family:var(--fm);font-size:.72rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;text-decoration:none;padding:10px 17px;border-radius:30px; box-shadow:0 8px 16px -7px rgba(143,91,18,.6); transition:transform .22s,box-shadow .22s;white-space:nowrap; } .prem10 .t10-deal-btn:hover{transform:translateY(-2px);box-shadow:0 13px 22px -8px rgba(143,91,18,.7);} .prem10 .t10-deal-btn svg{width:13px;height:13px;} @media (max-width:640px){ .prem10 .t10-deal-media{height:165px;} .prem10 .t10-deal-city{font-size:.95rem;} .prem10 .t10-deal-line2{flex-direction:column;align-items:flex-start;gap:6px;} .prem10 .t10-deal-price-wrap{justify-content:flex-start;} .prem10 .t10-all-deals{font-size:.68rem;padding:8px 13px;} } /* =============================================================== ALL DEALS PAGE (/flight-deals) Reuses the .t10-deal-card design above; this only adds the page frame, the filter bar and the grid. =============================================================== */ .prem10.fd-page{padding:34px 0 70px;background:var(--paper);} .fd-head{margin-bottom:22px;} .fd-title{font-family:var(--fd,inherit);font-size:2.1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:4px 0 6px;} .fd-sub{color:var(--muted);font-size:.92rem;margin:0;} .fd-filters{ display:grid;grid-template-columns:repeat(5,1fr) auto;gap:14px;align-items:end; background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:18px 20px;margin-bottom:26px;box-shadow:0 10px 26px -20px rgba(14,22,38,.4); } .fd-field{display:flex;flex-direction:column;gap:6px;min-width:0;} .fd-field label{ display:inline-flex;align-items:center;gap:6px; font-family:var(--fm);font-size:.68rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--muted); } .fd-field label svg{width:12px;height:12px;color:var(--gold-ink);} .fd-field select,.fd-field input{ width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper); padding:10px 12px;font-size:.88rem;color:var(--ink);font-family:inherit; transition:border-color .18s,box-shadow .18s; } .fd-field select:focus,.fd-field input:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,150,60,.16); } .fd-actions{display:flex;align-items:center;gap:10px;} .fd-apply{ display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer; background:linear-gradient(135deg,#e3a848,var(--gold-ink));color:#fff; font-family:var(--fm);font-size:.72rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:12px 20px;border-radius:30px; box-shadow:0 8px 16px -7px rgba(143,91,18,.6);transition:transform .2s; } .fd-apply:hover{transform:translateY(-2px);} .fd-apply svg{width:13px;height:13px;} .fd-reset{font-size:.8rem;color:var(--muted);text-decoration:none;white-space:nowrap;} .fd-reset:hover{color:var(--gold-ink);text-decoration:underline;} .fd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .fd-empty{ text-align:center;padding:64px 20px;background:var(--surface); border:1px solid var(--line);border-radius:16px; } .fd-empty-ic{width:44px;height:44px;color:var(--muted);opacity:.5;margin-bottom:14px; fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .fd-empty h2{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 6px;} .fd-empty p{color:var(--muted);font-size:.9rem;margin:0 0 18px;} @media (max-width:1024px){ .fd-filters{grid-template-columns:repeat(2,1fr);} .fd-actions{grid-column:1/-1;} .fd-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .fd-filters{grid-template-columns:1fr;padding:16px;} .fd-grid{grid-template-columns:1fr;gap:18px;} .fd-title{font-size:1.6rem;} }