/* ==========================================================================
OXFORD TRAVELS — universal search bar
sites/travels/assets/css/searchbar.css
THIS FILE IS THE AGENTS DESK'S sites/desk/assets/css/search_bar.css,
UNCHANGED, WITH THIS HEADER IN FRONT OF IT.
The desk's sheet is written against that panel's design tokens (--ag-*).
Rather than find-and-replace them — which would make the two files diverge
the first time either is touched — every token it reads is DEFINED here in
terms of this site's own. That has two consequences worth knowing:
- the bar inherits the visitor's chosen colour theme for free, because
--ag-accent and friends resolve through --brand-*, which [data-theme]
re-defines (see themes.css);
- updating the bar's design means copying the desk's file again and
keeping everything above the "DESK FILE BEGINS" line.
Below the bridge are the few rules that adapt the bar to where it sits on
this site. On the desk the bar IS the hero: it paints its own dark band, its
own girih tile and its own crest. Here it sits INSIDE the page's hero, which
already paints all three, so those layers are switched off and the panel
sits within the band instead of straddling its bottom edge.
========================================================================== */
.ag-hero {
/* ---- the desk's tokens, in this site's terms ---- */
--ag-accent: var(--brand-600);
--ag-accent-wash: var(--brand-50);
--ag-accent-line: var(--brand-200);
--ag-brand: var(--brand-700);
--ag-brand-2: var(--brand-600);
--ag-brand-deep: var(--brand-900);
--ag-surface: var(--surface);
--ag-surface-2: var(--surface-2);
--ag-surface-3: var(--line-soft);
--ag-ink: var(--ink-900);
--ag-ink-2: var(--ink-700);
--ag-ink-3: var(--ink-500);
--ag-ink-4: var(--ink-400);
--ag-line: var(--line);
--ag-line-soft: var(--line-soft);
--ag-line-strong: var(--ink-200);
--ag-shadow-xs: var(--sh-xs);
--ag-shadow-sm: var(--sh-sm);
--ag-shadow-lg: var(--sh-lg);
--ag-danger: var(--danger);
--ag-radius: var(--r-md);
/* The desk loads Inter and Plus Jakarta Sans from Google. This site
deliberately loads no webfont — a public page pays for that in Core Web
Vitals — so the bar is set in the site's own stack, which is what
everything around it is set in. */
--ag-font: var(--font);
--ag-font-head: var(--font-display);
/* One duration, one curve: the desk keeps both in a single token. */
--ag-ease: 200ms var(--ease);
/* The girih tile and the merlon fringe are the same two data URIs in both
places — they were copied from here to there, byte for byte. */
--ag-pattern: var(--ox-pattern);
--ag-crest: var(--ox-crest);
}
/* ---- sitting inside the page's hero ------------------------------------ */
/* The hero already paints the band, the tile and the crest, so the bar's own
copies of all three are switched off rather than layered on top. */
.hero .ag-hero { background: transparent; }
.hero .ag-hero::before { display: none; }
/* The hero's .container has already capped and centred the column, so a second
cap inside it would only narrow the bar. */
.hero .ag-hero-inner { width: 100%; padding: 0; }
/* THE PANEL STRADDLES THE SEAM, exactly as it does on the desk.
The dark band stops half-way down the panel, so the crest runs across the
PANEL'S MIDDLE and its lower half sits on the light page below. That is the
whole two-tone effect, and it is why the panel's own negative margin —
search_bar.js measures the open panel and publishes half its height as
--ag-hero-drop — is left exactly as the desk wrote it.
Three things have to give way for it:
- .hero-search carries a -2rem margin of its own from oxford.css, for the
old bar that overlapped the band's edge by a fixed amount. Two negative
margins would pull the seam past the panel's middle;
- the hero's bottom padding would push the band past the seam;
- the hero clips its children, which would cut the panel in half at the
band's edge — see the overflow rule below. */
.hero:has(.ag-hero) .hero-search { margin-bottom: 0; }
/* AND THE BAND HAS TO ACTUALLY END AT THE SEAM.
The panel's negative margin has nothing but collapse-through boxes above it
— no padding, no border — so it collapsed all the way out of the hero and
became the HERO's own bottom margin. The next section was pulled up by it,
but the hero's box still reached the panel's bottom edge, so the band went
on painting behind the panel's lower half and the next section's opaque
background covered it: the panel appeared cut in half at the seam.
display:flow-root stops the collapse at the hero's container, so the pull
shortens the hero instead of moving it. The band, its tile and the crest
then all end at the seam, which is what puts the merlons across the middle
of the panel. */
.hero:has(.ag-hero) .hero-inner { display: flow-root; padding-bottom: 0; }
/* The half of the panel that now hangs below the band would be painted over by
the next section, which comes later in the document and carries a solid
background. This lifts the hero — and only the hero, whose own box now stops
at the seam — above it. Well under the sticky header's 100. */
.hero:has(.ag-hero) { z-index: 1; }
/* And the page below gives the overhang back, or the first card sits under the
panel. It TRACKS the overhang rather than restating it: the panel's height
changes with the open tab and again when the Recent searches strip appears,
and a fixed clearance left the panel over the content on the taller tabs.
The 40px is the gap between the panel's bottom edge and whatever follows. */
.hero:has(.ag-hero) + * { padding-top: calc(var(--ag-hero-drop, 104px) + 40px); }
/* Room between the page's own lede and the tabs, and between the panel and the
crest at the bottom of the band. */
.hero-search { margin-top: var(--sp-5); }
/* A band that carries nothing but the bar - the sign-in pages - has no lede to
be spaced away from. */
.hero-bar .hero-search { margin-top: 0; }
/* The product landing heroes: the same room above the headline as between
the line under it and the tabs, so the text sits in the middle of the band
above the bar, and every product page puts its heading at the same height. */
.hero-centred:has(.ag-hero) { --hero-gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.hero-centred:has(.ag-hero) .hero-inner { padding-top: var(--hero-gap); }
.hero-centred:has(.ag-hero) h1 { margin-top: 0; }
/* The headline in colour: a warm-to-cool sweep that stays bright against the
navy band, with depth from a shadow and a soft glow, and a slow shimmer
travelling through it. Browsers without background-clip:text keep the plain
white. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
/* Shrunk to its text, or the sweep spans the whole band and the centred
words only ever catch its middle colours. The gradient repeats its first
colour at the end and is drawn twice as wide, so the shimmer can slide it
along and loop without a jump. */
.hero-centred:has(.ag-hero) h1 {
display: inline-block;
font-weight: 800;
letter-spacing: -.01em;
background: linear-gradient(90deg,
#fde68a 0%, #fbbf24 14%, #fb923c 28%, #f472b6 44%,
#c084fc 58%, #7dd3fc 74%, #fde68a 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* text-shadow would paint through the transparent fill and muddy the
colours, so the depth comes from filter, which shades the letters'
outline from behind: a tight dark shadow to lift them off the band,
and a wide warm glow around them. */
filter: drop-shadow(0 2px 1px rgba(8, 20, 45, .55))
drop-shadow(0 6px 18px rgba(251, 146, 60, .35));
animation: ox-hero-shimmer 8s linear infinite;
}
}
@keyframes ox-hero-shimmer {
from { background-position: 0% 50%; }
to { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.hero-centred:has(.ag-hero) h1 { animation: none; }
}
/* A short bar under the headline in the same colours. It sits on the lede's
top edge so the headline stays an inline box that fits its own words. */
.hero-centred:has(.ag-hero) .lede::before {
content: "";
display: block;
width: 4.5rem; height: 4px;
margin: 0 auto var(--sp-4);
border-radius: 999px;
background: linear-gradient(90deg, #fbbf24, #f472b6, #7dd3fc);
box-shadow: 0 0 12px rgba(244, 114, 182, .55);
}
/* The line under the headline is one short sentence, so it keeps to one
line rather than breaking at the lede's 56ch cap; narrow screens still wrap. */
.hero-centred:has(.ag-hero) .lede { margin-bottom: 0; max-width: none; text-wrap: balance; }
.hero-centred:has(.ag-hero) .hero-search { margin-top: var(--hero-gap); }
/* The autocomplete list drops out of the panel and past the bottom of the
band. .hero clips its children so the hero image and the gradient cannot
leak, which would cut the suggestions off half-way — so a hero carrying the
bar does not clip. Nothing else in the hero overflows it: the media layer
and the light source are both inset:0. */
.hero:has(.ag-hero) { overflow: visible; }
/* ---- a clearer, livelier panel -------------------------------------------
The desk's fields are outlined in --line on --surface-2, which on this
site's palette is near-white on near-white: the boxes vanished and the bar
read as loose labels. These rules give every control a visible outline and
a themed hover and focus state. Each is prefixed with .ag-hero so it
outranks the desk's rule below without editing the desk's file. */
/* The panel: a firmer brand-tinted edge and a soft coloured glow beneath. */
.ag-hero .ag-hero-form {
border: 1.5px solid var(--brand-300);
border: 1.5px solid color-mix(in srgb, var(--ag-accent) 55%, var(--ag-line));
box-shadow:
0 1px 0 rgba(255, 255, 255, .6) inset,
0 0 0 5px color-mix(in srgb, var(--ag-accent) 10%, transparent),
0 22px 48px rgba(9, 24, 54, .24);
}
/* The fields: a real outline on a white ground. */
.ag-hero .ag-hero-field input,
.ag-hero .ag-hero-field select {
border: 1.5px solid var(--ink-200);
border-radius: 12px;
background: var(--ag-surface);
box-shadow: 0 1px 2px rgba(9, 24, 54, .06);
transition: border-color var(--ag-ease), box-shadow var(--ag-ease), background var(--ag-ease);
}
.ag-hero .ag-hero-field input:hover,
.ag-hero .ag-hero-field select:hover {
border-color: var(--brand-300);
background: var(--brand-50);
}
.ag-hero .ag-hero-field input:focus,
.ag-hero .ag-hero-field select:focus {
outline: none;
border-color: var(--ag-accent);
background: var(--ag-surface);
box-shadow: 0 0 0 4px var(--ag-accent-line), 0 4px 12px rgba(9, 24, 54, .08);
}
/* The label lights up with its field. */
.ag-hero .ag-hero-field label { transition: color var(--ag-ease); }
.ag-hero .ag-hero-field:focus-within label { color: var(--ag-accent); }
/* The button: a gradient with depth, lifting on hover. */
.ag-hero .ag-hero-go {
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
box-shadow: 0 6px 16px color-mix(in srgb, var(--ag-accent) 40%, transparent),
0 1px 0 rgba(255, 255, 255, .25) inset;
letter-spacing: .01em;
transition: transform var(--ag-ease), box-shadow var(--ag-ease), filter var(--ag-ease);
}
.ag-hero .ag-hero-go:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 10px 22px color-mix(in srgb, var(--ag-accent) 48%, transparent),
0 1px 0 rgba(255, 255, 255, .25) inset;
}
.ag-hero .ag-hero-go:active { transform: translateY(0); }
.ag-hero .ag-hero-go:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--ag-accent-line);
}
/* Trip-type pills and popular chips: outlined, with the same hover. */
.ag-hero .ag-hero-choice,
.ag-hero .ag-hero-chip {
border: 1.5px solid var(--ink-200);
background: var(--ag-surface);
transition: border-color var(--ag-ease), background var(--ag-ease), color var(--ag-ease);
}
.ag-hero .ag-hero-choice:hover,
.ag-hero .ag-hero-chip:hover {
border-color: var(--ag-accent);
background: var(--ag-accent-wash);
color: var(--ag-brand-2);
text-decoration: none;
}
.ag-hero .ag-hero-choice:has(input:checked) {
border-color: var(--ag-accent);
background: var(--ag-accent-wash);
color: var(--ag-brand-2);
box-shadow: 0 0 0 3px var(--ag-accent-line);
}
/* ---- recent searches, outlined and lifted -------------------------------
The desk styles the card title and its hover under .ag-body, which this
site's pages do not carry, so the title fell back to a thin link and the
cards' --line edge was barely there. */
.ag-hero .ag-hero-recent {
margin-top: 16px;
padding-top: 14px;
border-top: 1.5px dashed var(--ink-200);
}
.ag-hero .ag-hero-recent-k { font-size: .95rem; letter-spacing: -.005em; }
.ag-hero .ag-hero-recent-k svg {
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
color: #fff;
box-shadow: 0 4px 10px color-mix(in srgb, var(--ag-accent) 35%, transparent);
}
/* Both arrows get a real outline; the disabled one stays visible, just quieter. */
.ag-hero .ag-hero-recent-arrow {
border: 1.5px solid var(--ink-200);
background: var(--ag-surface);
color: var(--ag-ink-2);
box-shadow: var(--ag-shadow-xs);
}
.ag-hero .ag-hero-recent-arrow.is-next {
border-color: transparent;
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
color: #fff;
}
.ag-hero .ag-hero-recent-arrow:disabled { opacity: .5; }
/* The card: a firm outline, a coloured bar along its top in the tab's tint. */
.ag-hero .ag-recent-card {
border: 1.5px solid var(--ink-200);
border: 1.5px solid color-mix(in srgb, var(--tile) 28%, var(--ink-200));
border-radius: 14px;
box-shadow: 0 2px 6px rgba(9, 24, 54, .06);
}
.ag-hero .ag-recent-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--tile), color-mix(in srgb, var(--tile) 40%, #fff));
}
.ag-hero .ag-recent-card:hover {
transform: translateY(-4px);
border-color: var(--tile);
box-shadow: 0 12px 26px color-mix(in srgb, var(--tile) 22%, transparent),
0 2px 6px rgba(9, 24, 54, .08);
}
.ag-hero .ag-recent-head {
padding-top: 12px;
background: color-mix(in srgb, var(--tile) 10%, var(--ag-surface));
border-bottom: 1px solid color-mix(in srgb, var(--tile) 18%, var(--ag-line));
}
.ag-hero .ag-recent-ico {
background: var(--ag-surface);
box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tile) 35%, transparent),
0 3px 8px color-mix(in srgb, var(--tile) 22%, transparent);
}
/* The title: bold and in the tab's colour, as the desk intends. */
.ag-hero .ag-recent-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1rem;
font-weight: 700;
color: var(--tile);
color: color-mix(in srgb, var(--tile) 80%, var(--ag-ink));
text-decoration: none;
outline: none;
}
.ag-hero .ag-recent-title:hover { text-decoration: none; }
.ag-hero .ag-recent-drop {
top: 16px;
background: var(--ag-surface);
box-shadow: 0 0 0 1px var(--ag-line);
}
.ag-hero .ag-recent-drop:hover { background: var(--ag-danger); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.ag-hero .ag-hero-go,
.ag-hero .ag-hero-go:hover,
.ag-hero .ag-recent-card,
.ag-hero .ag-recent-card:hover { transition: none; transform: none; }
}
/* ==========================================================================
DESK FILE BEGINS — everything below this line is sites/desk/assets/css/
search_bar.css as it stands there. Do not edit it here; change it on the
desk and copy the file again.
========================================================================== */
/* ==========================================================================
OXFORD PARTNER — universal search bar
agents/assets/css/search_bar.css
The Zaereen front end's tab-search (.z-ts-*), in this panel's themeable
colours. TWO TONES, which is what makes it read as one folder rather than a
form on a strip:
the dark band — the brand colour, carrying the tabs and the girih tile,
continuing the header above it;
the light panel — the surface the open tab joins, holding the fields.
The open tab overlaps the panel's top edge by 1px. That overlap is the whole
trick: without it the tab and the panel read as two stacked boxes.
========================================================================== */
.ag-hero {
position: relative;
/* The fringe hangs below the band, so it must not be clipped. */
background: var(--ag-brand-deep);
}
/* The same tile as the page ground, so the band is patterned like Zaereen's
crest rather than a flat slab. Masked, so it follows the theme. */
.ag-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-color: #fff;
opacity: .06;
-webkit-mask-image: var(--ag-pattern);
mask-image: var(--ag-pattern);
-webkit-mask-size: 26px 26px;
mask-size: 26px 26px;
}
/* Narrower than the content below it and centred, as Zaereen's bar is: at the
full shell width the five fields stretched into a band across the screen
instead of reading as one compact panel. */
/* THE PANEL STRADDLES THE DIVIDE.
The band stops part-way down the panel and the rest of it hangs over the
content below, with the fringe running behind — the way the Zaereen hero
sits on its crest band. The negative margin is what shortens the band: it
takes that much off .ag-hero-inner's height, so the dark ends mid-panel
while the panel keeps its full size.
z-index 3 here, above the crest's 2, or the fringe would be painted across
the panel instead of behind it. */
.ag-hero-inner {
position: relative;
z-index: 3;
width: min(1080px, 100%);
margin: 0 auto;
padding: 52px 20px 0;
}
/* The panel hangs past the band, so the page below has to give that room back
or the first card sits under it. Only where the bar actually renders.
Tracks the overhang rather than restating it: the panel's height changes
with the open tab and with the Recent searches strip, and a fixed 128px
left the first card tucked under a tall panel. The 24px is the gap between
the panel's bottom edge and whatever comes first below it. */
.ag-hero + .ag-content { padding-top: calc(var(--ag-hero-drop, 104px) + 24px); }
/* The slogan block: title over strapline, centred both ways. Giving it a
min-height of its own keeps the tabs in the same place whether a title wraps
to one line or two. */
.ag-hero-head {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 116px;
margin: 0 0 36px;
text-align: center;
}
/* Beats the display:flex above — attribute + class outranks the bare class. */
.ag-hero-head[hidden] { display: none; }
.ag-hero-head h2 {
margin: 0;
font-family: var(--ag-font-head);
font-size: clamp(1.6rem, 3.1vw, 2.7rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: .01em;
/* Two tones of the SAME light, not two hues: every ramp here is sober and
deliberately has no warm accent to play the gold the /b2b/ hero uses, and
the ramp's own light step (--ag-brand-3) is DARKER than white, so using
it read as greyed-out rather than highlighted. */
color: rgba(255, 255, 255, .62);
}
.ag-hero-head h2 em {
font-style: normal;
color: #fff;
}
.ag-hero-head p {
max-width: 62ch;
margin: 0;
font-size: .96rem;
line-height: 1.45;
color: rgba(255, 255, 255, .62);
}
/* --- the stepped fringe where the two colours meet -----------------------
A repeating merlon, masked rather than filled so it takes the band's colour
in every theme — a data URI cannot read a CSS variable. */
.ag-hero-crest {
position: absolute;
left: 0; right: 0;
bottom: -13px;
height: 14px;
/* Behind the panel, in front of the band. */
z-index: 2;
pointer-events: none;
background-color: var(--ag-brand-deep);
-webkit-mask-image: var(--ag-crest);
mask-image: var(--ag-crest);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
/* 14px, to match the page hero's steps (oxford.css .hero::before), so the
two fringes are one size wherever both appear. */
-webkit-mask-size: auto 14px;
mask-size: auto 14px;
/* The glyph is a merlon pointing UP, so it is flipped to hang DOWN out of
the band — and the anchor flips with it, hence top rather than bottom. */
-webkit-mask-position: center top;
mask-position: center top;
transform: scaleY(-1);
}
/* --- the tabs, on the dark ------------------------------------------------ */
.ag-hero-tabs {
display: flex;
flex-wrap: nowrap;
gap: 3px;
padding: 0 12px;
overflow: visible;
}
.ag-hero-tab {
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 15px 10px;
/* A veil that lifts the tab off the band, plus a hairline for its edge:
the band's own colour at any alpha composites back to the band. */
border: 1px solid rgba(255, 255, 255, .26);
border-bottom: none;
border-radius: 10px 10px 0 0;
background: rgba(255, 255, 255, .13);
backdrop-filter: blur(6px);
font-family: var(--ag-font);
font-size: .82rem;
font-weight: 600;
color: #eaf0fa;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background var(--ag-ease), color var(--ag-ease), border-color var(--ag-ease);
}
.ag-hero-tab svg { flex: none; width: 15px; height: 15px; fill: var(--tile); stroke: none; }
.ag-hero-tab:hover {
background: rgba(255, 255, 255, .24);
border-color: rgba(255, 255, 255, .45);
color: #fff;
}
/* The open tab IS the panel's surface, reaching 1px into it. */
.ag-hero-tab.is-on {
position: relative;
z-index: 2;
margin-bottom: -1px;
padding-bottom: 11px;
background: var(--ag-surface);
border-color: var(--ag-line);
color: var(--ag-ink);
backdrop-filter: none;
}
/* --- the light panel ------------------------------------------------------ */
.ag-hero-form {
position: relative;
/* HOW FAR THE PANEL HANGS BELOW THE BAND — half its own height, so the two
colours always meet across the MIDDLE of the panel.
This was a flat -104px, which is about half a panel showing only the
fields. Open the Recent searches strip and the panel grows by ~230px
while the band stopped at the same place, so the seam slid down to the
panel's bottom edge and the fringe read as underlining it.
search_bar.js measures the panel and keeps --ag-hero-drop at half its
height. The 104px here is the no-JS fallback, not the usual case. */
margin-bottom: calc(-1 * var(--ag-hero-drop, 104px));
padding: 16px;
background: var(--ag-surface);
/* Outlined in the agent's own theme, like the cards below it. The plain
line is declared first so a browser without color-mix() keeps a border
rather than losing one. */
border: 1px solid var(--ag-line);
border: 1px solid color-mix(in srgb, var(--ag-accent) 38%, var(--ag-line));
/* Square under the tabs, round everywhere else — the folder shape. */
border-radius: 0 16px 16px 16px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 40px rgba(9, 24, 54, .22);
}
/* display on the form beats the browser's own [hidden] rule. */
.ag-hero-form[hidden] { display: none; }
.ag-hero-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
/* --- trip type, above the flight row ------------------------------------- */
.ag-hero-trip {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--ag-line-soft);
}
.ag-hero-choice {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
border: 1px solid var(--ag-line);
border-radius: 99px;
background: var(--ag-surface-2);
font-size: .82rem;
font-weight: 600;
color: var(--ag-ink-2);
cursor: pointer;
}
.ag-hero-choice:has(input:checked) {
border-color: var(--ag-accent);
background: var(--ag-accent-wash);
color: var(--ag-brand-2);
}
.ag-hero-choice input { accent-color: var(--ag-accent); }
.ag-hero-check {
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: auto;
font-size: .82rem;
color: var(--ag-ink-2);
cursor: pointer;
}
.ag-hero-check input { accent-color: var(--ag-accent); }
/* Widths sized to what each control shows, not to whatever is left over:
sharing the row equally made the dates cramped and the counts absurd.
Sized so the widest tab — Hotels, five controls plus the button — still fits
on ONE row inside the narrowed panel: everything else is pinned and the wide
field absorbs the remainder, so the button can never be pushed onto a line of
its own. */
.ag-hero-field { flex: 1 1 170px; min-width: 0; }
.ag-hero-field.is-wide { flex: 1 1 180px; }
.ag-hero-field.is-date { flex: 0 0 158px; }
.ag-hero-field.is-count { flex: 0 0 130px; }
.ag-hero-field.is-nat { flex: 0 0 144px; }
.ag-hero-field label {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 5px;
font-size: .655rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--ag-ink-2);
cursor: pointer;
}
.ag-hero-field label svg {
flex: none;
width: 13px; height: 13px;
color: var(--ag-accent);
stroke: currentColor; stroke-width: 1.9; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.ag-hero-field input,
.ag-hero-field select {
width: 100%;
/* An carries an intrinsic minimum of its own, and min-width:0 on
the FIELD does not reach it — without this the row cannot shrink and the
Search button is pushed out through the side of the panel. */
min-width: 0;
height: 52px;
padding: 0 15px;
border: 1px solid var(--ag-line);
border-radius: 10px;
background: var(--ag-surface-2);
box-shadow: inset 0 1px 2px rgba(9, 24, 54, .05);
font-family: var(--ag-font);
font-size: .94rem;
font-weight: 500;
color: var(--ag-ink);
cursor: pointer;
}
.ag-hero-field input { cursor: text; }
.ag-hero-field input::placeholder { color: var(--ag-ink-3); }
.ag-hero-field input:focus,
.ag-hero-field select:focus {
outline: none;
border-color: var(--ag-accent);
background: var(--ag-surface);
box-shadow: 0 0 0 3px var(--ag-accent-line);
}
.ag-hero-go {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 52px;
padding: 0 28px;
border: 1px solid var(--ag-brand);
border-radius: 10px;
background: var(--ag-brand);
font-family: var(--ag-font);
font-size: .94rem;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: filter var(--ag-ease);
}
.ag-hero-go:hover { filter: brightness(1.12); }
.ag-hero-go svg {
width: 17px; height: 17px;
stroke: currentColor; stroke-width: 2; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
/* --- popular chips -------------------------------------------------------- */
.ag-hero-pop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid var(--ag-line-soft);
}
.ag-hero-pop-k {
margin-right: 4px;
font-size: .655rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--ag-ink-3);
}
.ag-hero-chip {
padding: 7px 14px;
border: 1px solid var(--ag-line);
border-radius: 99px;
background: var(--ag-surface-2);
font-size: .82rem;
font-weight: 500;
color: var(--ag-ink-2);
}
.ag-body .ag-hero-chip:hover {
border-color: var(--ag-accent);
background: var(--ag-accent-wash);
color: var(--ag-brand-2);
text-decoration: none;
}
/* --- autocomplete --------------------------------------------------------
The hero's own, not .ag-ac from hotels.css: this bar is on every page and
must not depend on a module stylesheet being loaded.
-------------------------------------------------------------------------- */
.ag-hac-field { position: relative; }
.ag-hac {
position: absolute;
z-index: 80;
top: calc(100% + 4px);
left: 0; right: 0;
max-height: 280px;
margin: 0;
padding: 6px;
overflow-y: auto;
list-style: none;
background: var(--ag-surface);
border: 1px solid var(--ag-line);
border-radius: var(--ag-radius);
box-shadow: var(--ag-shadow-lg);
}
.ag-hac[hidden] { display: none; }
.ag-hac-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 8px;
background: transparent;
font-family: var(--ag-font);
font-size: .85rem;
text-align: left;
cursor: pointer;
}
.ag-hac-item:hover,
.ag-hac-item.is-on { background: var(--ag-accent-wash); }
.ag-hac-main { font-weight: 600; color: var(--ag-ink); }
.ag-hac-sub {
display: block;
font-size: .72rem;
font-weight: 400;
color: var(--ag-ink-3);
}
.ag-hac-tag {
margin-left: auto;
flex: 0 0 auto;
font-size: .7rem;
font-weight: 700;
color: var(--ag-ink-4);
white-space: nowrap;
}
.ag-hac-empty {
padding: 11px 10px;
font-size: .83rem;
color: var(--ag-ink-3);
}
/* --- recent searches -----------------------------------------------------
Under a tab's fields, as the /b2b/ hero has it: a label, a row of cards
scrolled sideways by two arrows, one card per search. Each strip carries its
tab's tint as --tile, for the card's mark and its title. */
.ag-hero-recent {
display: flex;
align-items: center;
gap: 14px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ag-line-soft);
}
.ag-hero-recent[hidden] { display: none; }
.ag-hero-recent-k {
flex: none;
display: flex;
align-items: center;
gap: 9px;
font-size: .9rem;
font-weight: 700;
color: var(--ag-ink);
white-space: nowrap;
}
.ag-hero-recent-k svg {
flex: none;
box-sizing: border-box;
width: 32px; height: 32px;
padding: 7px;
border-radius: 50%;
background: var(--ag-accent-wash);
color: var(--ag-accent);
stroke: currentColor; stroke-width: 2.1; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.ag-hero-recent-arrow {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
padding: 0;
border: 1px solid var(--ag-line);
border-radius: 50%;
background: var(--ag-surface-2);
color: var(--ag-ink-2);
cursor: pointer;
transition: background var(--ag-ease), color var(--ag-ease), border-color var(--ag-ease), filter var(--ag-ease);
}
.ag-hero-recent-arrow.is-next {
border-color: var(--ag-brand);
background: var(--ag-brand);
color: #fff;
}
.ag-hero-recent-arrow svg {
width: 16px; height: 16px;
stroke: currentColor; stroke-width: 2.4; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.ag-hero-recent-arrow.is-prev svg { transform: scaleX(-1); }
.ag-hero-recent-arrow.is-prev:hover:not(:disabled) { border-color: var(--ag-accent); color: var(--ag-accent); }
.ag-hero-recent-arrow.is-next:hover:not(:disabled) { filter: brightness(1.12); }
.ag-hero-recent-arrow:disabled { opacity: .38; cursor: default; }
.ag-hero-recent-track {
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: 12px;
/* Room above for the hover lift and below for the shadow, which the
scroll box would otherwise clip. */
padding: 5px 2px 9px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.ag-hero-recent-track::-webkit-scrollbar { display: none; }
.ag-recent-card {
position: relative;
flex: 0 0 258px;
overflow: hidden;
scroll-snap-align: start;
border: 1px solid var(--ag-line);
border-radius: 12px;
background: var(--ag-surface);
box-shadow: var(--ag-shadow-xs);
transition: transform var(--ag-ease), box-shadow var(--ag-ease), border-color var(--ag-ease);
}
.ag-recent-card:hover {
transform: translateY(-3px);
border-color: var(--ag-line-strong);
border-color: color-mix(in srgb, var(--tile) 45%, var(--ag-line));
box-shadow: var(--ag-shadow-sm);
}
.ag-recent-card:has(.ag-recent-title:focus-visible) { box-shadow: 0 0 0 3px var(--ag-accent-line); }
.ag-recent-head {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 40px 9px 12px;
border-bottom: 1px solid var(--ag-line-soft);
background: var(--ag-surface-2);
background: color-mix(in srgb, var(--tile) 7%, var(--ag-surface));
}
.ag-recent-ico {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--ag-surface-3);
background: color-mix(in srgb, var(--tile) 16%, var(--ag-surface));
}
.ag-recent-ico svg { width: 16px; height: 16px; fill: var(--tile); stroke: none; }
.ag-body .ag-recent-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .95rem;
font-weight: 700;
color: var(--tile);
color: color-mix(in srgb, var(--tile) 78%, var(--ag-ink));
text-decoration: none;
outline: none;
}
/* The whole card is the link. */
.ag-recent-title::after { content: ""; position: absolute; inset: 0; }
.ag-body .ag-recent-title:hover { text-decoration: none; }
.ag-recent-body {
display: grid;
gap: 7px;
padding: 10px 12px 12px;
}
.ag-recent-meta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: .8rem;
}
.ag-recent-meta-i {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
}
.ag-recent-meta-i svg {
width: 13px; height: 13px;
stroke: currentColor; stroke-width: 2; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
/* One colour per row, as /b2b/'s cards: pink for the date, amber for the
second date, blue for the people. */
.ag-recent-meta.is-date .ag-recent-meta-i { color: #db2777; background: rgba(236, 72, 153, .13); }
.ag-recent-meta.is-back .ag-recent-meta-i { color: #d97706; background: rgba(245, 158, 11, .15); }
.ag-recent-meta.is-pax .ag-recent-meta-i { color: #0284c7; background: rgba(56, 189, 248, .16); }
.ag-recent-meta-k { flex: none; color: var(--ag-ink-3); font-weight: 500; }
.ag-recent-meta-k::after { content: ":"; }
.ag-recent-meta-v {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 700;
color: var(--ag-ink);
}
/* Above the stretched link, so it removes the card instead of opening it. */
.ag-recent-drop {
position: absolute;
top: 14px; right: 10px;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ag-surface-3);
color: var(--ag-ink-3);
cursor: pointer;
transition: background var(--ag-ease), color var(--ag-ease);
}
.ag-recent-drop svg {
width: 11px; height: 11px;
stroke: currentColor; stroke-width: 2.6; fill: none;
stroke-linecap: round;
}
.ag-recent-drop:hover { background: var(--ag-danger); color: #fff; }
/* --- narrow screens ------------------------------------------------------- */
@media (max-width: 1100px) {
.ag-hero-tabs { flex-wrap: wrap; }
}
@media (max-width: 900px) {
.ag-hero-inner { padding: 12px 14px 16px; }
.ag-hero-tab { padding: 8px 12px 9px; font-size: .78rem; gap: 5px; }
/* Icons only once the space is tight. */
.ag-hero-tab span { display: none; }
.ag-hero-tab svg { width: 17px; height: 17px; }
/* Every fixed basis has to be released: once the row is a COLUMN, a
flex-basis written to size a control's WIDTH sizes its height instead,
which left a date field 174px tall. */
.ag-hero-row { flex-direction: column; align-items: stretch; }
.ag-hero-field,
.ag-hero-field.is-wide,
.ag-hero-field.is-date,
.ag-hero-field.is-count,
.ag-hero-field.is-nat { flex: 0 0 auto; }
.ag-hero-go { width: 100%; }
}
/* Recent searches on a narrow panel: the label keeps its icon, the cards
narrow, and a finger scrolls the row instead of the arrows. */
@media (max-width: 900px) {
.ag-hero-recent { gap: 10px; }
.ag-hero-recent-k span,
.ag-hero-recent-arrow { display: none; }
.ag-recent-card { flex-basis: 228px; }
}
/* The search bar at 60% of the window on every page (at most 1120px),
centred in the page's column - a step inside the content under it, so the bar reads as the
start of the page rather than a band as wide as everything else. Phones
keep the full width. */
@media (min-width: 640px) {
.hero-search { width: min(60vw, 1120px); max-width: 100%; margin-inline: auto; }
}
/* PHONES AND TABLETS: NO HEADLINE ABOVE THE BAR.
On a narrow screen the headline and its line pushed the search panel most of
the way down the first view, so below 1025px the bar leads the band on every
product landing page. The
and lede are hidden visually only (the same
clip as .sr-only), not with display:none: they stay the page's heading for
search engines and screen readers. With the text gone, the bar gets the same
room above it as the band has below the panel, so it sits centred. */
@media (max-width: 1024px) {
.hero-centred h1,
.hero-centred .lede {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
animation: none;
}
.hero-centred .hero-inner,
.hero-centred:has(.ag-hero) .hero-inner { padding-top: var(--sp-5); }
.hero-centred .hero-search,
.hero-centred:has(.ag-hero) .hero-search { margin-top: 0; }
}
/* PHONES AND TABLETS: THREE NAMED TABS.
The partial marks the two tabs this page does not show on a narrow screen
(.is-desk-only); the other three share the row equally and keep their
names, in the bar's own colours. */
@media (max-width: 1024px) {
.ag-hero-tab.is-desk-only { display: none; }
/* The row spans the panel edge to edge, and the panel's top corners
go square, so the three tabs sit flush on it like folder tabs instead
of starting 12px in and running over its rounded right corner. */
.ag-hero-tabs { flex-wrap: nowrap; gap: 4px; padding: 0; }
.ag-hero-tab {
flex: 1 1 0;
min-width: 0;
justify-content: center;
padding-inline: 8px;
border-radius: 12px 12px 0 0;
}
.ag-hero .ag-hero-form { border-radius: 0 0 16px 16px; }
.ag-hero-tab span { display: inline; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
.ag-hero-tabs { gap: 3px; }
.ag-hero-tab { padding-inline: 4px; gap: 4px; font-size: .74rem; }
}