/* ===================================================================== Beyond Journey - Holiday package listing --------------------------------------------------------------------- Scoped entirely under .bjl. The site template reuses .trend-item, .team-list and .our-team on 40+ other pages, so nothing here may be written unscoped. WHAT THIS BORROWS, AND WHY TourRadar and MakeMyTrip both list packages as wide horizontal rows rather than a grid of cards, and that is not a style choice. A flight or a hotel can be judged from four numbers; a package needs its route, its night split, its inclusions and its price visible at once, and a 240px grid cell cannot hold that without turning into a stack of coloured chips. So: rows. from MakeMyTrip the city-wise night split ("2N Munnar - 1N Alleppey"), the inclusion strip, and filters carrying live counts from TourRadar a per-day price so trips of different lengths can be compared honestly, and rating shown with its sample size rather than as a bare star WHAT IT DELIBERATELY DOES NOT BORROW Both sites paper their cards in red urgency badges - "3 seats left", "Deal of the day", "Save 42%". That is a discount-aggregator language and it is what made an earlier version of this page read as cheap. Here there is one accent colour and it appears on exactly two things: the primary button, and the active state of a control. A saving is shown by a struck-through price, which says the same thing without shouting. TYPE: package names are set in the display serif because they are the editorial object on the page. Everything else - labels, filters, prices, counts - is UI and stays in the sans face. Prices use tabular figures so they line up in a column. ===================================================================== */ /* --------------------------------------------------------------------- SITE-LOCAL, NOT IN THE REFERENCE COPY OF THIS FILE - keep on re-copy. The reference sets the base type in css/style.css (body 16px / 1.6), and every component below sizes its line-height from that base. This site's copy of style.css predates that change (15px / 1.5), so the listing pages set the base themselves, on the body class they carry. --------------------------------------------------------------------- */ body.bjl-solo-sticky { font-size: 16px; line-height: 1.6; } /* likewise the template's h2 line-height (1.25 in the reference, 1.2 here), which the rail's "Filters" heading inherits */ body.bjl-solo-sticky h2 { line-height: 1.25; } .bjl { /* brand */ --bjl-navy: #17233e; --bjl-orange: #f5761a; --bjl-orange-600: #d9600d; /* 4.6:1 on white - safe for text */ --bjl-orange-50: #fdf4ec; /* neutrals - warm, not grey. A cool grey ground reads as an admin panel. */ --bjl-ink: #17233e; --bjl-muted: #5a6377; --bjl-faint: #8b93a5; --bjl-line: #e6e3dc; --bjl-line-soft: #f1efe9; --bjl-surface: #ffffff; --bjl-paper: #faf8f5; --bjl-ok: #1a7f4b; --bjl-s1: 4px; --bjl-s2: 8px; --bjl-s3: 12px; --bjl-s4: 16px; --bjl-s5: 24px; --bjl-s6: 32px; --bjl-s7: 44px; --bjl-r: 10px; --bjl-ease: cubic-bezier(.4, 0, .2, 1); /* The site's own stack, as css/style.css declares it and as the package pages load it. This file previously asked for Playfair and Manrope, which those pages do not load - so every heading fell back to Georgia, a far wider serif that pushed lines into each other. */ --bjl-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --bjl-ui: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: var(--bjl-ui); color: var(--bjl-ink); } /* style.css sets `section { padding: 4.5rem 0 5rem }` globally, which drops a blank band inside anything we use as a panel. :where() carries zero specificity, so this cancels it without having to be out-specified later. */ .bjl :where(section, aside) { padding: 0; margin: 0; } /* No top padding: the navy band sits flush under the site header, so the page opens as two clean blocks instead of white / cream gap / navy. */ .bjl-page { background: var(--bjl-paper); padding: 0 0 var(--bjl-s7); min-height: 70vh; } .bjl :focus-visible { outline: 2px solid var(--bjl-orange); outline-offset: 2px; border-radius: 6px; } .bjl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Prices sit in a column and in struck-through pairs; proportional figures make both ragged. */ .bjl-price, .bjl-row__aside, .bjl-facet__count { font-variant-numeric: tabular-nums lining-nums; } /* --------------------------------------------------------------- Breadcrumb + page head --------------------------------------------------------------- */ .bjl-crumb { font-size: 12.5px; color: var(--bjl-faint); margin-bottom: var(--bjl-s4); } .bjl-crumb ol { display: flex; flex-wrap: wrap; gap: var(--bjl-s2); list-style: none; margin: 0; padding: 0; } .bjl-crumb a { color: var(--bjl-faint); } .bjl-crumb a:hover { color: var(--bjl-orange-600); } .bjl-crumb li + li::before { content: "/"; margin-right: var(--bjl-s2); opacity: .55; } .bjl-crumb [aria-current="page"] { color: var(--bjl-muted); } /* --------------------------------------------------------------- Banner + search panel --------------------------------------------------------------- The photograph under the navy scrim carries the page identity; the panel under the title actually searches - it filters this page in place rather than bouncing back to the holiday hub. --------------------------------------------------------------- */ .bjl-hero { position: relative; overflow: hidden; background: var(--bjl-navy); /* Slim identity band. The extra bottom padding is the measured seat for the widget that straddles its lower edge - the composition every holiday site uses, kept SHORT so the widget still sits high. */ padding: 18px 0 58px; } .bjl-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .bjl-hero__bg::after { content: ""; position: absolute; inset: 0; /* near-opaque: at 130px tall the photograph is texture, not a picture, and any more of it reads as noise behind the type */ background: linear-gradient(180deg, rgba(16, 26, 46, .9) 0%, rgba(23, 35, 62, .84) 100%); } .bjl-hero .container { position: relative; z-index: 1; } .bjl-hero .bjl-crumb { margin-bottom: 8px; } .bjl-crumb--light, .bjl-crumb--light a { color: rgba(255, 255, 255, .65); } .bjl-crumb--light a:hover { color: #fff; } .bjl-crumb--light [aria-current="page"] { color: rgba(255, 255, 255, .9); } .bjl-hero h1 { font-family: var(--bjl-display); font-size: 23px; font-weight: 700; line-height: 1.18; letter-spacing: -.025em; margin: 0 0 4px; color: #fff; text-transform: none; } /* One line of context - count, length range, entry price - answering "is this worth my time" before any scrolling. */ .bjl-hero__meta { font-size: 13px; color: rgba(255, 255, 255, .78); margin: 0; } .bjl-hero__meta strong { color: #fff; font-weight: 700; } .bjl-hero__meta .sep { opacity: .5; margin: 0 8px; } /* --------------------------------------------------------------- The one sticky thing on this page --------------------------------------------------------------- The user's model, and it is the right one: the search widget follows you, nothing else does. So the site header is returned to normal flow HERE ONLY (it stays sticky on every other page), the filter rail scrolls with the page, and the widget dock pins at the very top. --------------------------------------------------------------- */ /* `relative`, not `static`. Static was the bug behind "the blue strip opens behind the search panel and gets cut": z-index only applies to a POSITIONED element, so `position: static` silently threw away the header's z-index:1000, and a positioned element paints above a non-positioned one whatever the numbers say - so .bjl-dock (sticky, z-index 900) covered the header and clipped every open mega panel. `relative` with no offsets keeps the header in normal flow, so it still scrolls away and the widget is still the only sticky thing on the page, but its z-index counts again. */ body.bjl-solo-sticky .main_header_area { position: relative; /* `top: -65px` on the base rule is there to slide the strip out of view as the sticky header pins. Under `sticky` it only applies once you scroll; under `relative` it applies at once, and it pulled the whole header up by exactly the strip's height - which is why the blue strip vanished from this page. It has to be cancelled explicitly. */ top: auto; z-index: 1000; } .bjl-dock { position: sticky; top: 0; /* under the mega-menu panels (1000+) and any modal, above everything on the page itself */ z-index: 900; /* pulls the widget up onto the band's seat - the two numbers are a matched pair with the band's 58px bottom padding */ margin-top: -44px; } .bjl-dock.is-stuck { padding: 7px 0; } /* Once pinned, the widget needs a ground behind it or page content shows in the side gutters as it scrolls past. Frosted paper, full width. */ .bjl-dock.is-stuck { background: rgba(250, 248, 245, .94); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border-bottom: 1px solid var(--bjl-line); } .bjl-dock.is-stuck .bjl-panel { box-shadow: 0 6px 20px -12px rgba(11, 17, 32, .3); } /* --------------------------------------------------------------- The widget itself --------------------------------------------------------------- One white bar, fields divided by hairlines, in the anatomy every holiday site trains people on: icon, small caps label, bold value with its own chevron. The selects are real popups cannot be styled, and next to a designed page they read as someone else's UI. Each cell is therefore one full-bleed