/* ============================================================
OnTrac — dropdown menu restyle
Loaded last so it wins on source order. Desktop only: the
mobile menu is handled by @media (max-width: 768px) in
styles.css and is deliberately left alone.
============================================================ */
@media (min-width: 769px) {
/* ---- the panel ------------------------------------------------ */
header .navbar ul li ul {
width: 268px;
padding: 8px;
background: #fff;
border: 1px solid rgba(15, 27, 51, 0.08);
border-radius: 14px;
/* layered shadow reads as depth rather than a hard drop */
box-shadow:
0 18px 40px -12px rgba(15, 27, 51, 0.2),
0 2px 8px rgba(15, 27, 51, 0.05);
}
/* the old design drew a hairline under every row */
header .navbar ul li ul li {
width: 100%;
border-top: 0;
}
/* ---- rows ------------------------------------------------------ */
header .navbar ul li ul li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
font-size: 15px;
line-height: 1.35;
font-weight: 500;
color: #42526b;
border-radius: 10px;
white-space: normal;
transition: background-color 0.15s ease, color 0.15s ease;
}
header .navbar ul li ul li a:hover,
header .navbar ul li ul li a:focus-visible,
header .navbar ul li ul li:hover > a {
background: #f0f5ff;
color: #0b63e5;
}
/* ---- chevrons --------------------------------------------------
These were absolutely positioned at hardcoded pixel offsets
(left: 270px / 167px, top: 25px), which is why they drifted.
Put them back in the flow and let flexbox place them. */
header .navbar ul li ul li i,
header .navbar ul li ul li ul i {
position: static;
width: auto;
left: auto;
top: auto;
margin-left: 8px;
font-size: 11px;
flex: 0 0 auto;
opacity: 0.4;
transition: transform 0.15s ease, opacity 0.15s ease;
}
header .navbar ul li ul li a:hover > i,
header .navbar ul li ul li:hover > a > i {
opacity: 1;
transform: translateX(2px);
}
/* ---- nested panels --------------------------------------------- */
header .navbar ul li ul li ul,
header .navbar ul li ul li ul li ul {
width: 244px;
left: calc(100% + 6px);
top: -8px;
}
/* ---- entrance --------------------------------------------------- */
header .navbar ul li:hover > ul,
header .navbar ul li:focus-within > ul {
display: block;
animation: ontracMenuIn 0.16s ease-out both;
}
@keyframes ontracMenuIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* top-level caret sits closer to its label */
header .navbar ul li > a .wsarrow {
margin-left: 2px;
}
}
/* ============================================================
Mega panel for "Our Solutions"
Replaces a three-level hover chain (Solutions > Improve
Performance > Team Leaders > item) with one flat panel.
Mobile keeps the existing accordion, so this is desktop-only.
============================================================ */
@media (min-width: 769px) {
/* The trigger is position:relative, so the panel would anchor to a
~157px list item. Make it static: the containing block becomes
nav.navbar, and the panel aligns to the nav's right edge. */
header { position: relative; }
/* navbar is position:relative and would otherwise be the containing block,
capping the panel at the nav's right edge. Static only above 768px, so
the mobile menu (<=768px) is untouched. */
header .navbar { position: static; }
header .navbar > ul > li:has(> ul.mega-menu) { position: static; }
header .navbar ul li ul.mega-menu {
/* left+right+auto margins centre an absolutely positioned box */
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: min(1000px, calc(100% - 32px));
flex-wrap: wrap;
padding: 26px 22px;
border-radius: 16px;
gap: 6px;
}
/* the generic rule shows dropdowns as block; columns need flex */
header .navbar ul li:hover > ul.mega-menu,
header .navbar ul li:focus-within > ul.mega-menu {
display: flex;
}
/* columns — override .desktop-solutions > li inline-block + margin */
header .navbar ul li ul.mega-menu > li {
display: block;
float: none;
width: auto;
flex: 1 1 0;
margin: 0;
padding: 0 14px;
border-top: 0;
position: static;
}
header .navbar ul li ul.mega-menu > li + li {
border-left: 1px solid rgba(15, 27, 51, 0.07);
}
header .navbar ul li ul.mega-menu > li { min-width: 190px; }
header .navbar ul li ul.mega-menu > li.mega-lead { flex: 0 0 236px; }
/* The item columns set the panel's height, so the lead column's two or
three lines were pinned to the top with the rest of the column empty —
183px of void under Case Studies, 402px under Our Solutions, 128px
under About. Centring the lead's content vertically balances it
against the rows beside it instead of leaving a hole. */
header .navbar ul li ul.mega-menu > li.mega-lead {
display: flex;
flex-direction: column;
justify-content: center;
}
/* the flex column would otherwise stretch the inline-block link full width */
.mega-menu .mega-all { align-self: flex-start; }
/* lead column */
.mega-menu .mega-title {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: #0f1b33;
line-height: 1.25;
}
.mega-menu .mega-blurb {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: #6b7a90;
}
.mega-menu .mega-all {
display: inline-block;
padding: 0;
font-size: 14px;
font-weight: 600;
color: #0b63e5;
background: none;
}
.mega-menu .mega-all:hover { background: none; text-decoration: underline; }
/* column headings and group labels */
.mega-menu .mega-head {
margin: 2px 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8b97a8;
}
.mega-menu .mega-group {
margin: 12px 0 4px;
padding-left: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #aab4c2;
}
.mega-menu .mega-group:first-of-type { margin-top: 0; }
/* items */
header .navbar ul li ul.mega-menu a:not(.mega-all) {
display: block;
padding: 8px 10px;
border-radius: 10px;
background: none;
transition: background-color 0.15s ease;
}
header .navbar ul li ul.mega-menu a:not(.mega-all):hover {
background: #f0f5ff;
}
.mega-menu .mi-t {
display: block;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: #1d2c45;
}
.mega-menu .mi-d {
display: block;
margin-top: 2px;
font-size: 12.5px;
line-height: 1.45;
color: #7a8798;
}
header .navbar ul li ul.mega-menu a:not(.mega-all):hover .mi-t { color: #0b63e5; }
/* Case Studies: six items, so a narrower two-column panel */
header .navbar ul li ul.mega-menu.mega-cases { width: min(760px, calc(100% - 32px)); }
header .navbar ul li ul.mega-menu.mega-cases > li.mega-lead { flex: 0 0 210px; }
}
/* ============================================================
About group (About Us + Team)
Same three-part shape the pages already use for Our Solutions and
Case Studies: a toggle anchor, a desktop panel that opens on hover,
and a separate mobile list that js/nav-about.js opens on tap. Two
items do not warrant a mega panel, so this one inherits the plain
dropdown styling above.
============================================================ */
.mobile-about {
display: none;
}
/* Above the mobile breakpoint the desktop panel is the one that opens on
hover, and the generic `header .navbar ul li:hover > ul` rule is specific
enough (0,2,4) to beat a lone .mobile-about class — which would drop the
mobile list underneath the panel. Shut it out explicitly up here; below
769px js/nav-about.js opens it with an inline style, which still wins. */
@media (min-width: 769px) {
header .navbar ul li ul.mobile-about {
display: none !important;
}
}
/* ---- caret for every trigger that has a dropdown --------------------
styles.css:95 draws the caret with position:absolute; right:5px;
top:33px, which only lands next to the label while the is the
containing block. The two mega triggers are position:static (so their
panel can centre against the header), so their caret was being thrown
to the far right of the header, off where nobody sees it — which is
why only About appeared to have one. Put the caret back in the flow
so all three behave the same.
Scoped to the desktop breakpoint: the mobile menu positions its own
caret at the right edge of the row, which is correct there. */
@media (min-width: 769px) {
header .navbar ul li > a .wsarrow::after {
position: static;
float: none;
display: inline-block;
margin: 0 0 0 7px;
vertical-align: middle;
border-top-color: currentColor;
opacity: 0.55;
}
header .navbar > ul > li:hover > a .wsarrow::after {
opacity: 1;
}
/* ---- About panel ------------------------------------------------
Same split as Case Studies: a lead column stating what the group
is, then a column of rows with their own one-line descriptions.
Two destinations, so one item column and a narrower panel than
mega-cases. No "see all" link in the lead — both destinations are
already in the list, so it would only repeat one of them.
Nothing else is needed here: carrying .mega-menu picks up the
centring, the flex columns, the divider, and the .mi-t/.mi-d type
from the rules above. */
header .navbar ul li ul.mega-menu.mega-about {
/* NOT min(560px, calc(100% - 32px)) like the other two. Their trigger is
position:static so their 100% resolves against the header; this one's
trigger is position:relative (see below), so 100% would resolve against
a 113px menu item and collapse the panel to 81px. Fixed width, and vw
for the viewport guard since that is container-independent. */
width: 560px;
max-width: calc(100vw - 32px);
}
header .navbar ul li ul.mega-menu.mega-about > li.mega-lead {
flex: 0 0 210px;
}
/* Anchor this one to its trigger, not to the header.
The generic mega rule makes the trigger position:static and centres
the panel with left:0; right:0; margin-inline:auto. That is right for
the 1000px and 760px panels, which span most of the header anyway —
but About sits second from the right and its panel is only 560px, so
centring parked it over by the logo, nowhere near the word you
hovered. Give the trigger back its positioning context and hang the
panel off its right edge. */
header .navbar > ul > li:has(> ul.mega-about) {
position: relative;
}
header .navbar ul li ul.mega-menu.mega-about {
left: auto;
right: 0;
margin-left: 0;
margin-right: 0;
}
}
/* ---- "New" badge on a menu item ------------------------------------
StarTrac is the newest thing in the portfolio and was getting the same
visual weight as programmes that have been running for years. A small
pill beside the title marks it without shouting.
Deliberately NOT scoped to .mega-menu: the same badge is used in the
mobile accordion list, which sits outside those panels. */
/* span.mi-badge, not .mi-badge: violet-theme.css has `.price span` (0,1,1)
for the big number in a pricing table, which beats a lone class and was
giving the badge a 48px font-size and line-height inside the Explore Our
Solutions card — 51px tall, pushing that card 27px taller than the rest.
Matching specificity and loading later wins it back. */
span.mi-badge {
display: inline-block;
margin-left: 8px;
padding: 1px 7px 2px;
border-radius: 999px;
background: #0b63e5;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.5;
text-transform: uppercase;
vertical-align: 1px;
white-space: nowrap;
}
/* the mega rows turn blue on hover; keep the pill readable */
header .navbar ul li ul.mega-menu a:hover .mi-badge {
background: #0b63e5;
color: #fff;
}
/* "Popular" is a quieter badge than "New": there are four of them in the
Our Solutions panel against one New, so a second solid pill would read as
noise and would compete with the thing that is actually new. Tinted
violet rather than a lighter blue, so it stays legible against the
#f0f5ff the rows turn on hover. */
span.mi-badge--popular {
background: #ece7fe;
color: #5b2ad1;
}
/* ---- keep the desktop panels out of the mobile menu -----------------
styles.css hides nested menus with `header .navbar ul li ul
{ display: none }` and reveals them with `header .navbar ul li:hover
> ul { display: initial }` — and that hover rule carries no media
query. A touch device applies :hover on tap, so tapping a top-level
item in the mobile menu could drop the full desktop panel into the
list: the About group rendered its whole mega panel (title, blurb,
"The company", both rows with their descriptions) above the two
mobile links, as one run of unstyled text.
Below the mobile breakpoint the .mobile-* lists are the menu, so shut
the panels out explicitly. Every panel carries .mega-menu, so this
covers Our Solutions, Case Studies and About alike.
------------------------------------------------------------------ */
@media (max-width: 768px) {
header .navbar ul li ul.mega-menu {
display: none !important;
}
}