/* Coded site header + Max Mega Menu structural styling. Created on : 12-AUG-2026 MMM's generated stylesheet is switched OFF (Mega Menu > General Settings), so this file owns everything the plugin used to style: the bar, the panel open/close states, the grid maths and the mobile accordion. MMM's JS still drives behaviour by toggling mega-toggle-on / mega-menu-open classes. */ /* the Elementor header template stays published but no longer renders */ .elementor-location-header { display: none !important; } /* Elementor's sticky JS sets overflow on , which breaks position:sticky for everything else. Force it back. */ html, body { overflow: visible !important; } /* ---- header bar ----------------------------------------------------------- */ .tcp-header { position: sticky; top: 0; z-index: 200; background: #fff; border-bottom: 1px solid #f0f1f4; } body.admin-bar .tcp-header { top: 32px; } .tcp-header.is-scrolled { box-shadow: 0 6px 24px rgba(17, 44, 66, 0.08); } .tcp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 48px; } /* the bar's height comes from the logo padding, NOT from padding on the inner wrapper -- inner padding leaves a strip between the menu items and the header's bottom edge, and crossing it on the way to a panel closes it */ .tcp-header__logo { padding: 14px 0; transition: padding 0.2s ease; } .tcp-header.is-scrolled .tcp-header__logo { padding: 8px 0; } .tcp-header__logo svg { width: 104px; height: auto; display: block; transition: width 0.2s ease; } .tcp-header.is-scrolled .tcp-header__logo svg { width: 86px; } /* stretches to the full header height so there is no hover dead zone between a menu link and its panel */ .tcp-header__nav { flex: 1; display: flex; justify-content: center; min-width: 0; align-self: stretch; } .tcp-header__nav [id^="mega-menu-wrap"] { display: flex; } .tcp-header__cta { display: flex; align-items: center; gap: 18px; white-space: nowrap; } .tcp-header__login { color: #152c5b; font-weight: 500; font-size: 14.5px; text-decoration: none; } /* every property pinned on hover -- the theme's generic a:hover otherwise repaints these blue and boxes the login link */ .tcp-header__login:hover, .tcp-header__login:focus { color: #e0426b; text-decoration: underline; background: none; border: none; } /* :link/:visited included -- the theme styles a:visited, which outranks a bare class */ .tcp-header__btn, .tcp-header__btn:link, .tcp-header__btn:visited { display: inline-block; padding: 11px 20px; background: #e0426b; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: #fff; transition: background 0.12s ease; } .tcp-header__btn:hover, .tcp-header__btn:focus { background: #c22e56; /* !important: the theme's link-hover colour outranks any class rule here */ color: #fff !important; text-decoration: none; border: none; } @media (max-width: 1240px) { .tcp-header__login { display: none; } } @media (max-width: 1024px) { .tcp-header__inner { padding: 0 16px; } .tcp-header__logo { padding: 12px 0; } } /* ---- MMM structural reset -------------------------------------------------- */ .tcp-header [id^="mega-menu-wrap"] { background: none; } .tcp-header ul.mega-menu { list-style: none; margin: 0; padding: 0; } .tcp-header ul.mega-menu li, .tcp-header ul.mega-menu ul { list-style: none; margin: 0; padding: 0; } @media (min-width: 1025px) { .tcp-header .mega-menu-toggle { display: none; } .tcp-header .mega-hide-on-desktop { display: none; } .tcp-header ul.mega-menu { display: flex; align-items: stretch; } /* outranks the display:flex on top-level items below */ .tcp-header ul.mega-menu > li.mega-menu-item.mega-hide-on-desktop { display: none; } /* panels position against the full header, not the menu item */ .tcp-header ul.mega-menu > li.mega-menu-item { position: static; display: flex; } .tcp-header ul.mega-menu > li.mega-menu-item > a.mega-menu-link { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500; line-height: 1; color: #2c3550; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } .tcp-header ul.mega-menu > li.mega-menu-item > a.mega-menu-link:hover, .tcp-header ul.mega-menu > li.mega-menu-item:focus-within > a.mega-menu-link, .tcp-header ul.mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: #152c5b; border-bottom-color: #e0426b; } .tcp-header .mega-indicator::after { content: "\25BE"; /* ▾ */ font-size: 9px; color: #9aa3b6; display: inline-block; transition: transform 0.15s ease; } .tcp-header li.mega-toggle-on > a .mega-indicator::after, .tcp-header li.mega-menu-megamenu:focus-within:not(.tcp-focus-closed) > a .mega-indicator::after { transform: rotate(180deg); } /* page dims behind an open panel so the menu stands out. On body, NOT on .tcp-header: a negative z-index child paints above its parent's background and washed the bar grey. z-index below the header (200) so the bar and panel stay bright; pointer-events none keeps hover intact. */ body::after { content: ""; position: fixed; inset: 0; background: rgba(12, 24, 48, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 150; } body:has(.tcp-header li.mega-menu-megamenu.mega-toggle-on)::after, body:has(.tcp-header li.mega-menu-megamenu:focus-within:not(.tcp-focus-closed))::after { opacity: 1; } /* panel open/close -- MMM JS toggles mega-toggle-on */ .tcp-header li.mega-menu-megamenu > ul.mega-sub-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 210; box-shadow: 0 14px 34px rgba(21, 44, 91, 0.13); /* tall panels scroll instead of running off screen */ max-height: calc(100vh - 140px); overflow-y: auto; } /* mega-toggle-on is MMM's hoverIntent. :focus-within is what makes the panels keyboard reachable - it has to be CSS, because MMM's JS strips mega-toggle-on straight back off if the focus handler sets it. Escape adds tcp-focus-closed to dismiss a panel without moving focus out of the item; site-header.php clears it again when focus leaves. */ .tcp-header li.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu, .tcp-header li.mega-menu-megamenu:focus-within > ul.mega-sub-menu { display: block; } .tcp-header li.mega-menu-megamenu.tcp-focus-closed:focus-within > ul.mega-sub-menu { display: none; } /* grid maths, replacing MMM's generated rules; spans come from the inline --span / --columns custom properties MMM writes on the markup. The flex container is the ul MMM nests INSIDE the row li. */ .tcp-header li.mega-menu-row > ul.mega-sub-menu { display: flex; margin: 0 -14px; position: static; box-shadow: none; } .tcp-header li.mega-menu-row + li.mega-menu-row { display: block; margin-top: 22px; } /* ul.mega-menu is in the selector for specificity: the structural reset above (.tcp-header ul.mega-menu li { padding: 0 }) outranks a bare li.mega-menu-column and was silently zeroing the column gutters */ .tcp-header ul.mega-menu li.mega-menu-column { width: calc(100% / var(--columns, 12) * var(--span, 12)); padding: 0 14px; min-width: 0; } /* indicators are for the top bar; headings inside panels don't need them */ .tcp-header ul.mega-sub-menu .mega-indicator { display: none; } .tcp-header li.mega-menu-column > ul.mega-sub-menu { position: static; display: block; box-shadow: none; } } /* ---- mobile accordion ------------------------------------------------------ */ @media (max-width: 1024px) { /* bar: logo + burger only; both CTAs live at the bottom of the menu */ .tcp-header__cta { display: none; } .tcp-header__nav { order: 3; flex: none; align-self: center; } /* MMM only reacts to clicks on its real button (button.mega-toggle-animated), so that button IS the burger -- never hide it and paint a fake one */ .tcp-header .mega-menu-toggle { display: flex; align-items: center; } .tcp-header .mega-toggle-blocks-left, .tcp-header .mega-toggle-blocks-center { display: none; } .tcp-header button.mega-toggle-animated { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 4px; background: #edeef1; cursor: pointer; } .tcp-header .mega-toggle-animated-box { position: relative; display: block; width: 18px; height: 14px; } .tcp-header .mega-toggle-animated-inner, .tcp-header .mega-toggle-animated-inner::before, .tcp-header .mega-toggle-animated-inner::after { position: absolute; display: block; width: 18px; height: 2px; background: #152c5b; content: ""; transition: transform 0.15s ease, background 0.15s ease; } .tcp-header .mega-toggle-animated-inner { top: 6px; } .tcp-header .mega-toggle-animated-inner::before { top: -6px; } .tcp-header .mega-toggle-animated-inner::after { top: 6px; } .tcp-header .mega-menu-open .mega-toggle-animated-inner { background: transparent; } .tcp-header .mega-menu-open .mega-toggle-animated-inner::before { transform: translateY(6px) rotate(45deg); } .tcp-header .mega-menu-open .mega-toggle-animated-inner::after { transform: translateY(-6px) rotate(-45deg); } .tcp-header [id^="mega-menu-wrap"] { position: static; } /* !important: MMM's mobile force-width JS inlines width/left computed against the menu's old Elementor position, throwing it off-screen */ .tcp-header ul.mega-menu { display: none; position: absolute; top: 100%; left: 0 !important; right: 0 !important; width: auto !important; max-height: calc(100vh - 80px); overflow-y: auto; background: #fff; border-top: 1px solid #e3e6ec; box-shadow: 0 14px 34px rgba(21, 44, 91, 0.18); padding: 6px 0 16px; } .tcp-header .mega-menu-toggle.mega-menu-open + ul.mega-menu { display: block; } /* top level */ .tcp-header ul.mega-menu > li.mega-menu-item > a.mega-menu-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 500; color: #152c5b; text-decoration: none; border-bottom: 1px solid #eef0f4; } .tcp-header ul.mega-menu .mega-indicator::after { content: "\25BE"; font-size: 10px; color: #9aa3b6; transition: transform 0.15s ease; } .tcp-header ul.mega-menu li.mega-toggle-on > a .mega-indicator::after { transform: rotate(180deg); } /* accordion: children only when MMM toggles the li open */ .tcp-header ul.mega-menu ul.mega-sub-menu { display: none; } .tcp-header ul.mega-menu li.mega-toggle-on > ul.mega-sub-menu { display: block; } /* rows and columns flatten to plain blocks inside an open item */ .tcp-header ul.mega-menu li.mega-toggle-on li.mega-menu-row > ul.mega-sub-menu, .tcp-header ul.mega-menu li.mega-toggle-on li.mega-menu-column > ul.mega-sub-menu { display: block; } .tcp-header li.mega-menu-row, .tcp-header li.mega-menu-column { display: block; width: auto; padding: 0; } .tcp-header ul.mega-menu ul.mega-sub-menu { background: #f4f6f9; } /* group heading */ .tcp-header .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link { display: block; padding: 12px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7488; text-decoration: none; pointer-events: none; } /* group heading children always visible once the panel is open */ .tcp-header .mega-menu-column > ul.mega-sub-menu > li > ul.mega-sub-menu { display: block; } .tcp-header .mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li > a.mega-menu-link { display: block; padding: 10px 20px 10px 32px; font-size: 14.5px; color: #26304c; text-decoration: none; } /* Training's mobile-only row: links sit straight in a column with no group heading above them, so they miss the indented rule above */ .tcp-header .mega-menu-column > ul.mega-sub-menu > li:not(.mega-menu-item-has-children) > a.mega-menu-link { display: block; padding: 12px 20px; font-size: 15px; color: #26304c; text-decoration: none; } /* content panels are desktop furniture */ .tcp-header ul.mega-menu .widget_text, .tcp-header ul.mega-menu .widget_custom_html { display: none; } .tcp-header .mega-hide-on-mobile { display: none; } /* the two mobile-only CTA items render as buttons at the foot of the menu */ .tcp-header ul.mega-menu > li.mega-menu-item-4804, .tcp-header ul.mega-menu > li.mega-menu-item-5270 { padding: 6px 20px 0; } .tcp-header ul.mega-menu > li.mega-menu-item-4804 { padding-top: 16px; } .tcp-header ul.mega-menu > li.mega-menu-item-4804 > a.mega-menu-link, .tcp-header ul.mega-menu > li.mega-menu-item-5270 > a.mega-menu-link { justify-content: center; border: none; border-radius: 3px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 13px 20px; } .tcp-header ul.mega-menu > li.mega-menu-item-4804 > a.mega-menu-link { border: 2px solid #152c5b; color: #152c5b; } .tcp-header ul.mega-menu > li.mega-menu-item-5270 > a.mega-menu-link { background: #e0426b; color: #fff !important; } /* MMM item icons render as unstyled glyph boxes without its CSS */ .tcp-header ul.mega-menu > li.mega-menu-item-4804 > a.mega-menu-link::before, .tcp-header ul.mega-menu > li.mega-menu-item-5270 > a.mega-menu-link::before { display: none; content: none; } }