/* =====================================================================
Beyond Journey - site header
---------------------------------------------------------------------
One sticky header for every page, based on the flights.html markup.
WHY STICKY AND NOT FIXED
The previous behaviour came from two places that fought each other:
custom-nav.js added `fixed-top` past 70px of scroll (which pulls the
header out of flow and makes the page jump up by its height), and a
second scroll handler added a `.hide` class on scroll-down, so the
header disappeared entirely.
`position: sticky` fixes both at once. The header stays in normal flow,
so nothing below it ever shifts - no jump, no spacer to maintain, no
flicker - and it pins to the top on its own without a scroll listener.
THE NEGATIVE TOP
The header is two rows: a contact strip and the navigation. Pinning all
165px of it would eat a fifth of a laptop viewport. Sticking it at a
negative offset equal to the strip's height lets the strip scroll away
while the navigation row pins. --bjh-strip is measured at runtime by
bj-header.js, because the strip wraps to a taller two-line layout in
the 992-1100px range and a hard-coded value would be wrong there.
Branding, fonts and logo are untouched; this file only positions and
polishes what was already there.
===================================================================== */
:root {
--bjh-strip: 65px; /* overwritten at runtime by bj-header.js */
--bjh-navy: #17233e;
--bjh-orange: #f5761a;
--bjh-ease: cubic-bezier(.4, 0, .2, 1);
}
/* ---------------------------------------------------------------
Sticky shell
--------------------------------------------------------------- */
.main_header_area {
position: sticky;
top: calc(-1 * var(--bjh-strip));
z-index: 1000; /* above page content, below modals (2000) */
background: #fff;
transition: box-shadow .28s var(--bjh-ease);
/* isolate so page transforms cannot create a new containing block that
would break the sticky positioning */
will-change: box-shadow;
}
/* Soft shadow only once the page has actually scrolled. */
.main_header_area.is-scrolled { box-shadow: 0 4px 18px -6px rgba(23, 35, 62, .22); }
/* The nav row must be opaque or page content shows through once pinned. */
.main_header_area .header_menu { background: #fff; }
/* Kill the old behaviour wherever it is still applied.
custom-nav.js has been cleaned, but these guards mean a cached copy of
the old script cannot resurrect the hide-on-scroll or the jump. */
.main_header_area .header_menu.hide,
.main_header_area .header_menu.slideInDown,
.main_header_area .header_menu.animated { transform: none !important; animation: none !important; }
.main_header_area .header_menu.fixed-top {
position: static !important;
top: auto !important;
z-index: auto !important;
}
/* Some templates park a stray sticky helper on the body. */
.tab-sticky { top: auto !important; }
/* ---------------------------------------------------------------
Contact strip
---------------------------------------------------------------
z-index has to beat .header_menu below it. Both are children of the
same stacking context, and the nav row comes later in the DOM, so at
equal z-index it painted on top and swallowed the open mega panels. */
.main_header_area .header-content { position: relative; z-index: 3; }
.main_header_area .header_menu { position: relative; z-index: 2; }
/* ---------------------------------------------------------------
Navigation
--------------------------------------------------------------- */
.main_header_area .navbar-flex { gap: 20px; }
/* The header logo is an inside a .bj-logo crop box (css/bj-logo.css).
These selectors are more specific than .bj-logo img, so without the
:not() they would reset its width and height and undo the crop. They
stay for any plain bitmap logo that is not cropped. */
.main_header_area .navbar-brand:not(.bj-logo) img {
max-height: 46px;
width: auto;
display: block;
}
.main_header_area .icon-nav {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
flex-wrap: nowrap; /* laptop widths must not wrap the menu */
}
.main_header_area .icon-nav > li { position: relative; }
.main_header_area .icon-nav > li > a {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: var(--bjh-navy);
text-decoration: none;
white-space: nowrap;
transition: color .22s var(--bjh-ease), background-color .22s var(--bjh-ease);
}
.main_header_area .icon-nav > li > a i { font-size: 14px; color: inherit; transition: color .22s var(--bjh-ease); }
.main_header_area .icon-nav > li > a:hover {
color: var(--bjh-orange);
background: rgba(245, 118, 26, .08);
}
.main_header_area .icon-nav > li > a:hover i { color: var(--bjh-orange); }
.main_header_area .icon-nav > li > a:focus-visible {
outline: 3px solid rgba(245, 118, 26, .45);
outline-offset: 2px;
}
/* --- active page ------------------------------------------------
One treatment, applied by bj-header.js from the current filename, so
every page highlights its own item instead of inheriting whatever the
source page happened to have marked.
NO BOX, NO BAR. Two earlier versions drew a shape around the active
item - a 2px underline, then a soft orange chip - and both were wrong
here. The chip sat a few inches from the SPECIAL OFFERS button, which
is itself an orange pill: two orange pills in one strip read as a
repeat rather than as a hierarchy, and turned the masthead into an app
toolbar. So the state is type only, and half the work is done by
pushing the other three back rather than by shouting with this one:
inactive items sit at a muted slate, the active one is orange and
bold, and its icon takes the accent too. SPECIAL OFFERS is left as the
only orange object up there, which is right - it is the only button.
SPECIFICITY, and why these selectors are so long: style.css:2416 sets
font-weight, padding and background on
.header_menu .navbar.navbar-default .nav.navbar-nav li a
at (0,5,2), and style.css:2442 sets colour on `li.active a` at (0,6,2).
Everything this file wrote against `.icon-nav` is (0,2,2) or (0,3,2),
so it lost the cascade no matter how late the file loads - the active
item rendered at weight 400 in navy, identical to its neighbours. The
rules below carry the template's own chain so they win on specificity
instead of scattering !important through the file.
WIDTH: none of this changes a horizontal metric. These items are
inline-blocks that wrap (style.css sets `display: inline-block` on the
list and its items at (0,5,0), so `.icon-nav`'s flex rules never
applied), and at ~1150px the row has about 28px of slack. An earlier
version added 14px of side padding for the pill and pushed the header
onto two lines between roughly 1100 and 1250px; another lifted every
item to weight 600 and cost 20px. Only the active item changes weight,
and colour is free. */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a {
color: var(--bjh-muted, #5a6377);
/* the template's 400 read as thin next to the buttons, 600 too heavy;
500 for every item, the active one goes to 700 below */
font-weight: 500;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li:hover > a {
color: var(--bjh-navy);
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.active > a,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a[aria-current="page"] {
color: var(--bjh-orange);
font-weight: 700;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.active > a i,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a[aria-current="page"] i {
color: var(--bjh-orange);
}
/* Nothing is drawn on ::after any more. style.css:2438 already sets
`display: none` there to kill the template's own caret, and that is now
exactly what this header wants - so the rule is simply gone rather than
overridden. */
/* --- "you are here" pop -----------------------------------------
bj-header.js adds .bjh-pop only on a page that belongs to the item's
own section. index.html gets the highlight WITHOUT it: there the mark
is a signpost to the main line of business, not a claim about where
the visitor currently is, and a nav item announcing itself on the home
page would be noise.
Two parts. The label lifts and settles once on arrival, and then the
ICON alone keeps breathing for as long as the page is open.
The breathing is deliberately on the icon and not on the text. A label
that pulses is a label you cannot comfortably read or click at - the
target keeps moving and the eye keeps being pulled back to it. The
icon carries the same "you are here" signal, sits beside the word
rather than under the reader's eye, and can move without disturbing
anything: it is 14px, it is already the accent colour, and a transform
never reflows the row.
It is also slow (2.6s) and shallow (a sixth bigger at the top of the
breath, never fully fading). Fast or deep would read as an alert, and
nothing here is an alert - it is a location marker.
Anyone who has asked their system for less motion gets neither part;
see the prefers-reduced-motion block below. */
@keyframes bjh-pop {
0% { transform: translateY(0) scale(1); }
30% { transform: translateY(-2.5px) scale(1.06); }
60% { transform: translateY(0) scale(.995); }
100% { transform: translateY(0) scale(1); }
}
@keyframes bjh-breathe {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.16); opacity: .62; }
}
/* Transform only on the label. An earlier take also tweened `color` from
the muted slate up to orange, and the risk is not theoretical: any
stall leaves the label parked at a muddy brown halfway between the
two, which is exactly what it did under test. A transform that stalls
leaves the text the right colour in the wrong place for a moment - a
far cheaper failure. */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.active.bjh-pop > a {
animation: bjh-pop .62s cubic-bezier(.34, 1.4, .5, 1) .25s both;
}
/* `display: inline-block` is not decoration - transform does not apply to
a non-replaced inline box, and the is inline by default. Without it
the breath silently does nothing until FontAwesome swaps the for an