/**
* Innovadel Technologies — Navigation CSS (classic PHP theme)
*
* Targets the custom PHP header markup in template-parts/layout/header.php.
* JS (scroll-nav.js) adds:
* .is-scrolled → frosted glass after 16px scroll
* .is-dark → white links when header is over a dark hero (data-hero-dark)
* JS (nav.js) adds:
* .is-open on #site-nav, .is-active on #mobile-nav-toggle
* .nav-open on to lock scroll
*
* Sections:
* 1. Site header
* 2. Logo
* 3. Desktop nav — menu list & links
* 4. Desktop nav — dropdown
* 5. Header actions & CTA
* 6. Mobile hamburger toggle
* 7. Mobile nav overlay
* 8. Dark-hero mode overrides
* 9. Body scroll lock
* 10. Breadcrumbs
*/
/* ==========================================================================
1. SITE HEADER
========================================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background-color: transparent;
border-bottom: 1px solid transparent;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
background-color: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border-bottom-color: rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 30px -10px rgba(0, 0, 0, 0.1);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 2rem;
}
/* ==========================================================================
2. LOGO
========================================================================== */
.site-logo-link {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
/* ── Variant wrappers ──────────────────────────────────────────────────────
Visibility is toggled at the WRAPPER level (.site-logo-variant), not on
the individual child elements (.site-logo, .logo-monogram, .logo-name).
Root cause of the previous duplication bug:
.site-logo { display:block } and .logo-monogram { display:grid }
are class-level rules (specificity 0,1,0) that appeared AFTER
.site-logo--light { display:none }
in the cascade — so they overrode it and un-hid the second variant.
Fix: apply display:none to the wrapper. A parent with display:none hides
all its children unconditionally; internal display values cannot escape it.
──────────────────────────────────────────────────────────────────────── */
.site-logo-variant {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* Default (no .is-dark): dark-coloured variant visible, white variant hidden */
.site-logo-variant.site-logo--dark { display: flex; }
.site-logo-variant.site-logo--light { display: none; }
/* Dark-hero (.is-dark): flip — white variant visible, dark-coloured hidden */
.site-header.is-dark .site-logo-variant.site-logo--dark { display: none; }
.site-header.is-dark .site-logo-variant.site-logo--light { display: flex; }
/* Scrolled-while-dark (.is-dark.is-scrolled):
Header turns frosted white at this point — revert to dark-coloured variant. */
.site-header.is-dark.is-scrolled .site-logo-variant.site-logo--dark { display: flex; }
.site-header.is-dark.is-scrolled .site-logo-variant.site-logo--light { display: none; }
/* Image logo — display:block is safe; it's always inside a variant wrapper */
.site-logo {
height: 36px;
width: auto;
display: block;
flex-shrink: 0;
}
/* ── Text fallback (no logo image uploaded) ─────────────────────────────── */
/* .logo-fallback is no longer used in header.php — kept for back-compat only */
.logo-fallback {
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo-monogram {
display: grid;
place-items: center;
width: 32px;
height: 32px;
background: var(--clr-primary, #9C2022);
border-radius: 6px;
font-size: 1rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
font-family: inherit;
flex-shrink: 0;
}
.logo-name {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
/* Colour per variant — scoped to wrapper so each state is explicit */
.site-logo-variant.site-logo--dark .logo-name { color: var(--clr-foreground, #1a1d27); }
.site-logo-variant.site-logo--light .logo-name { color: #ffffff; }
/* ==========================================================================
3. DESKTOP NAV — menu list & links
========================================================================== */
.site-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-menu {
display: flex;
align-items: center;
gap: 0.125rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li {
position: relative;
}
.nav-menu > li > a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem 0.625rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--clr-foreground, #1a1d27);
text-decoration: none;
border-radius: var(--radius-md, 10px);
transition: color 0.2s ease, background-color 0.15s ease;
white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a {
color: var(--clr-primary, #9C2022);
background-color: rgba(156, 32, 34, 0.06);
}
/* Dark mode nav links */
.site-header.is-dark .nav-menu > li > a {
color: rgba(255, 255, 255, 0.8);
}
.site-header.is-dark .nav-menu > li > a:hover,
.site-header.is-dark .nav-menu > li.current-menu-item > a {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.08);
}
/* ==========================================================================
4. DESKTOP NAV — dropdown (.sub-menu)
========================================================================== */
.nav-menu .sub-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
min-width: 220px;
list-style: none;
margin: 0;
padding: 0.5rem;
background: #ffffff;
border: 1px solid var(--clr-border, #e8eaf0);
border-radius: var(--radius-xl, 16px);
box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12),
0 8px 16px -4px rgba(0, 0, 0, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 200;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-menu .sub-menu a {
display: block;
padding: 0.625rem 0.875rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--clr-foreground, #1a1d27);
text-decoration: none;
border-radius: var(--radius-md, 10px);
white-space: nowrap;
transition: color 0.15s, background-color 0.15s;
}
.nav-menu .sub-menu a:hover {
color: var(--clr-primary, #9C2022);
background-color: var(--clr-primary-light, #fef2f2);
}
/* ==========================================================================
5. HEADER ACTIONS & CTA
========================================================================== */
.header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
/* .btn-primary used here is defined in global.css */
.header-cta {
white-space: nowrap;
}
/* Hide CTA on very small screens */
@media (max-width: 479px) {
.header-cta { display: none; }
}
/* ==========================================================================
6. MOBILE HAMBURGER TOGGLE
========================================================================== */
.mobile-nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 0.25rem;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--radius-md, 10px);
transition: background-color 0.2s;
flex-shrink: 0;
}
.mobile-nav-toggle:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.site-header.is-dark .mobile-nav-toggle:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.hamburger-line {
display: block;
width: 22px;
height: 2px;
background-color: var(--clr-foreground, #1a1d27);
border-radius: 2px;
transform-origin: center;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.2s;
}
.site-header.is-dark .hamburger-line {
background-color: #ffffff;
}
/* Animate to X when active */
.mobile-nav-toggle.is-active .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.is-active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-nav-toggle.is-active .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Show hamburger below 1024px */
@media (max-width: 1023px) {
.mobile-nav-toggle { display: flex; }
}
/* ==========================================================================
7. MOBILE NAV OVERLAY
nav.js toggles .is-open on #site-nav
========================================================================== */
/* Hide desktop nav on mobile */
@media (max-width: 1023px) {
.site-nav {
position: fixed;
top: 64px; /* var(--header-height) */
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--clr-border, #e8eaf0);
z-index: 99;
overflow-y: auto;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 1rem 1.5rem 3rem;
/* Hidden until toggled */
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.site-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile menu list */
.site-nav .nav-menu {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.site-nav .nav-menu > li > a {
display: block;
padding: 1rem 0;
font-size: 1rem;
border-bottom: 1px solid var(--clr-border, #e8eaf0);
border-radius: 0;
color: var(--clr-foreground, #1a1d27);
background: transparent !important;
}
.site-nav .nav-menu > li > a:hover {
color: var(--clr-primary, #9C2022);
}
/* Mobile submenus — flat expand */
.site-nav .nav-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0 0 0 1rem;
background: transparent;
min-width: 0;
}
.site-nav .nav-menu .sub-menu a {
font-size: 0.875rem;
color: var(--clr-muted-text, #6b7280);
padding: 0.5rem 0;
border-radius: 0;
}
/* ── Dark-hero contrast fix ─────────────────────────────────────────────────
When .is-dark is active (header over dark hero), top-level nav links turn
white. On mobile the overlay background is white, so this causes invisible
text. Force dark text on the white overlay regardless of header state. */
.site-header.is-dark .site-nav .nav-menu > li > a {
color: var(--clr-foreground, #1a1d27);
}
.site-header.is-dark .site-nav .nav-menu > li > a:hover {
color: var(--clr-primary, #9C2022);
}
}
/* Ensure desktop nav is always visible above 1024px */
@media (min-width: 1024px) {
.site-nav {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
position: static;
background: transparent;
border: none;
padding: 0;
overflow: visible;
}
}
/* ==========================================================================
16. SEARCH BUTTON & OVERLAY
========================================================================== */
/* ── Search icon button (in .header-actions) ─────────────────────────────── */
.header-search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--radius-md, 10px);
color: var(--clr-foreground, #1a1d27);
transition: color 0.2s ease, background-color 0.2s ease;
flex-shrink: 0;
}
.header-search-btn:hover {
color: var(--clr-primary, #9C2022);
background-color: rgba(156, 32, 34, 0.06);
}
.site-header.is-dark .header-search-btn {
color: rgba(255, 255, 255, 0.8);
}
.site-header.is-dark .header-search-btn:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.08);
}
.site-header.is-dark.is-scrolled .header-search-btn {
color: var(--clr-foreground, #1a1d27);
}
/* ── Search overlay ──────────────────────────────────────────────────────── */
.search-overlay {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: clamp(80px, 14vh, 140px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 41, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.search-overlay__inner {
position: relative;
z-index: 1;
width: min(680px, 92vw);
background: #ffffff;
border-radius: 1.25rem;
padding: 2.25rem 2rem 1.75rem;
box-shadow: 0 32px 80px -12px rgba(0, 0, 0, 0.28);
transform: translateY(-12px);
transition: transform 0.25s ease;
}
.search-overlay.is-open .search-overlay__inner {
transform: translateY(0);
}
.search-overlay__label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--clr-primary, #9C2022);
margin: 0 0 1rem;
}
.search-overlay__field {
display: flex;
align-items: center;
gap: 0.75rem;
border: 2px solid var(--clr-border, #e8eaf0);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
background: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-overlay__field:focus-within {
border-color: var(--clr-primary, #9C2022);
box-shadow: 0 0 0 4px rgba(156, 32, 34, 0.08);
}
.search-overlay__icon {
flex-shrink: 0;
color: var(--clr-muted-text, #6b7280);
}
.search-overlay__input {
flex: 1;
border: none;
outline: none;
font-size: 1.0625rem;
font-weight: 400;
color: var(--clr-foreground, #1a1d27);
background: transparent;
font-family: inherit;
min-width: 0;
}
.search-overlay__input::placeholder {
color: var(--clr-muted-text, #6b7280);
}
.search-overlay__input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search-overlay__hint {
margin: 0.75rem 0 0;
font-size: 0.75rem;
color: var(--clr-muted-text, #6b7280);
text-align: center;
}
.search-overlay__close {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: var(--clr-muted-bg, #f5f5f7);
border: none;
border-radius: 0.5rem;
cursor: pointer;
color: var(--clr-muted-text, #6b7280);
transition: background-color 0.15s ease, color 0.15s ease;
}
.search-overlay__close:hover {
background-color: rgba(156, 32, 34, 0.08);
color: var(--clr-primary, #9C2022);
}
body.search-open {
overflow: hidden;
}
/* ==========================================================================
8. DARK-HERO MODE
scroll-nav.js adds .is-dark when header overlaps a [data-hero-dark] section.
Removed on scroll past hero.
========================================================================== */
/* Dark mode: header stays transparent (content provides the bg) */
.site-header.is-dark.is-scrolled {
background-color: rgba(255, 255, 255, 0.82);
}
/* Once scrolled, revert links to dark even if is-dark class lingers */
.site-header.is-dark.is-scrolled .nav-menu > li > a {
color: var(--clr-foreground, #1a1d27);
}
.site-header.is-dark.is-scrolled .nav-menu > li > a:hover {
color: var(--clr-primary, #9C2022);
background-color: rgba(156, 32, 34, 0.06);
}
.site-header.is-dark.is-scrolled .hamburger-line {
background-color: var(--clr-foreground, #1a1d27);
}
/* ==========================================================================
9. BODY SCROLL LOCK
nav.js adds .nav-open to when the mobile nav is open.
========================================================================== */
body.nav-open {
overflow: hidden;
}
/* ==========================================================================
10. BREADCRUMBS
========================================================================== */
.site-breadcrumbs {
padding: 0.875rem 0;
font-size: 0.8125rem;
color: var(--clr-muted-text);
}
.site-breadcrumbs a {
color: var(--clr-muted-text);
text-decoration: none;
}
.site-breadcrumbs a:hover {
color: var(--clr-primary);
}
.site-breadcrumbs .breadcrumb-separator {
margin: 0 0.375rem;
opacity: 0.5;
}
/* ==========================================================================
11. NAV CHEVRON
Injected into depth-0 items that have children via walker_nav_menu_start_el.
========================================================================== */
.nav-chevron {
transition: transform 0.2s ease;
flex-shrink: 0;
opacity: 0.6;
}
/* Rotate chevron when the item's sub-menu / mega panel is visible */
.nav-menu > li:hover > a .nav-chevron,
.nav-menu > li:focus-within > a .nav-chevron {
transform: rotate(180deg);
opacity: 1;
}
/* Dark-hero mode */
.site-header.is-dark .nav-chevron { opacity: 0.55; }
.site-header.is-dark .nav-menu > li:hover > a .nav-chevron { opacity: 0.9; }
/* ==========================================================================
12. MEGA MENU PANEL
========================================================================== */
/* ── Panel wrapper ────────────────────────────────────────────────────────── */
.mega-panel {
/* Position: flush with the bottom of the nav — no gap */
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(6px);
width: min(1120px, 96vw);
background: #ffffff;
border: 1px solid var(--clr-border, #e8eaf0);
border-radius: 1rem;
box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.16),
0 8px 24px -4px rgba(0, 0, 0, 0.06);
z-index: 300;
/* Visual breathing room between header bar and panel content */
padding-top: 6px;
/* Hidden until hover.
80ms delay on HIDE so brief cursor gaps don't dismiss the panel. */
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease 0.08s, transform 0.2s ease 0.08s,
visibility 0.2s ease 0.08s;
pointer-events: none;
}
/* Show on hover / keyboard focus — desktop only.
Scoped to ≥1024px so mobile :focus-within never triggers the
translateX(-50%) transform that would shift the static-positioned
mobile panel off-screen. */
@media (min-width: 1024px) {
.nav-menu > li:hover > .mega-panel,
.nav-menu > li:focus-within > .mega-panel {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
/* No delay on show — appear immediately */
transition-delay: 0s;
}
}
/* ── Columns grid ─────────────────────────────────────────────────────────── */
.mega-panel__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 2rem 2rem 1.5rem;
border-bottom: 1px solid var(--clr-border, #e8eaf0);
}
/* Each column */
.mega-col {
padding: 0 1.25rem;
border-right: 1px solid var(--clr-border, #e8eaf0);
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { padding-right: 0; border-right: none; }
/* ── Column heading ───────────────────────────────────────────────────────── */
.mega-col-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--clr-primary, #9C2022);
margin: 0 0 0.875rem;
line-height: 1.4;
}
/* ── Column link list ─────────────────────────────────────────────────────── */
.mega-col-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
/* ── Individual service link ──────────────────────────────────────────────── */
.mega-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
text-decoration: none;
color: var(--clr-foreground, #1a1d27);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
transition: color 0.15s ease, background-color 0.15s ease;
}
.mega-item:hover,
.mega-item[aria-current="page"] {
color: var(--clr-primary, #9C2022);
background-color: var(--clr-primary-light, #fef2f2);
}
.mega-icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-top: 0.0625rem;
color: var(--clr-primary, #9C2022);
stroke-width: 1.75;
}
/* ── Footer bar ───────────────────────────────────────────────────────────── */
.mega-panel__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 2rem;
background: var(--clr-muted-bg, #f5f5f7);
border-radius: 0 0 1rem 1rem;
}
.mega-footer-desc {
font-size: 0.8125rem;
color: var(--clr-muted-text, #6b7280);
line-height: 1.5;
}
.mega-footer-cta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--clr-primary, #9C2022);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: gap 0.2s ease;
}
.mega-footer-cta:hover {
color: var(--clr-primary-hover, #7d1a1c);
gap: 0.625rem;
}
.mega-footer-cta .icon {
transition: transform 0.2s ease;
}
.mega-footer-cta:hover .icon {
transform: translateX(2px);
}
/* ==========================================================================
13. MEGA MENU — DARK-HERO MODE OVERRIDE
When header has .is-dark, the mega panel still appears on a white bg.
The parent LI `position: relative` ensures correct anchoring.
========================================================================== */
.site-header.is-dark .mega-panel {
/* Panel is white regardless of dark hero */
background: #ffffff;
border-color: rgba(0, 0, 0, 0.06);
}
/* Ensure parent LI has relative positioning (needed for absolute panel) */
.nav-menu > li {
position: relative;
}
/* Invisible hover bridge — extends the li's pointer-event area downward by
the panel's padding-top (6px) + a safety margin, so the cursor can move
from the nav link into the panel without briefly exiting li:hover.
Applies to ALL panel-bearing items (mega + dropdown). */
@media (min-width: 1024px) {
.nav-menu > li.has-mega-menu::after,
.nav-menu > li.has-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: -2rem;
right: -2rem;
height: 12px;
display: block;
}
}
/* ==========================================================================
14. DROPDOWN PANEL (has-dropdown strategy)
Compact single-column icon-list panel. Lighter than the mega menu —
used for Platforms, Industries, Company and any future small item sets.
Shares the same hover-reliability patterns as the mega panel:
• top: 100% (no gap, no dead zone)
• 80ms hide delay (transition-delay on the default/hidden state)
• invisible bridge pseudo-element on .has-dropdown (see Section 13)
========================================================================== */
/* ── Panel wrapper ────────────────────────────────────────────────────────── */
.dropdown-panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(6px);
width: min(264px, 96vw);
background: #ffffff;
border: 1px solid var(--clr-border, #e8eaf0);
border-radius: 1rem;
box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.16),
0 8px 24px -4px rgba(0, 0, 0, 0.06);
z-index: 300;
padding-top: 6px;
overflow: hidden;
/* Hidden until hover */
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease 0.08s, transform 0.2s ease 0.08s,
visibility 0.2s ease 0.08s;
pointer-events: none;
}
/* Show on hover / keyboard focus — desktop only */
@media (min-width: 1024px) {
.nav-menu > li:hover > .dropdown-panel,
.nav-menu > li:focus-within > .dropdown-panel {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
}
/* ── Link list ────────────────────────────────────────────────────────────── */
.dropdown-list {
list-style: none;
margin: 0;
padding: 0.375rem 0.5rem 0.5rem;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
border-radius: 0.625rem;
text-decoration: none;
color: var(--clr-foreground, #1a1d27);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.35;
transition: color 0.15s ease, background-color 0.15s ease;
}
.dropdown-item:hover,
.dropdown-item[aria-current="page"] {
color: var(--clr-primary, #9C2022);
background-color: var(--clr-primary-light, #fef2f2);
}
.dropdown-icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
color: var(--clr-primary, #9C2022);
stroke-width: 1.75;
margin-top: 0.0625rem;
}
/* ── Footer bar ───────────────────────────────────────────────────────────── */
.dropdown-panel__footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.625rem 1.25rem;
border-top: 1px solid var(--clr-border, #e8eaf0);
background: var(--clr-muted-bg, #f5f5f7);
}
.dropdown-footer-cta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-primary, #9C2022);
text-decoration: none;
white-space: nowrap;
transition: gap 0.2s ease;
}
.dropdown-footer-cta:hover {
color: var(--clr-primary-hover, #7d1a1c);
gap: 0.625rem;
}
.dropdown-footer-cta .icon {
transition: transform 0.2s ease;
}
.dropdown-footer-cta:hover .icon {
transform: translateX(2px);
}
/* Dark-hero mode — keep panel white */
.site-header.is-dark .dropdown-panel {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.06);
}
/* ==========================================================================
15. MEGA MENU — MOBILE / TABLET (≤ 1023px)
On mobile the entire desktop nav slides down as an overlay.
The mega panel is hidden by default; JS toggles .is-expanded on the parent
to reveal it. Within the panel each column is also collapsible —
JS toggles .is-open on each .mega-col via clicks on .mega-col-label.
========================================================================== */
@media (max-width: 1023px) {
/* ── Mega panel: collapsed by default ────────────────────────────────────── */
.mega-panel {
position: static;
transform: none;
width: 100%;
box-shadow: none;
border: none;
border-radius: 0;
pointer-events: auto;
margin: 0;
padding: 0;
transition: none;
/* Hidden until parent receives .is-expanded from nav.js */
display: none;
}
/* Reveal when parent li.is-expanded (set by nav.js on top-link tap).
Explicitly override every desktop property that could cause misalignment. */
.nav-menu > li.is-expanded > .mega-panel {
display: block;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
padding-top: 0;
border-top: 1px solid var(--clr-border, #e8eaf0);
}
/* Rotate the chevron inside the top-level link when expanded */
.nav-menu > li.is-expanded > a .nav-chevron {
transform: rotate(180deg);
opacity: 1;
}
/* Highlight the top-level link while its panel is open */
.nav-menu > li.is-expanded > a {
color: var(--clr-primary, #9C2022);
}
/* ── Column grid → stacked ────────────────────────────────────────────────── */
.mega-panel__cols {
display: block;
padding: 0;
border-bottom: none;
}
/* Each column is a full-width accordion block */
.mega-col {
padding: 0;
border-right: none;
border-bottom: 1px solid var(--clr-border, #e8eaf0);
}
.mega-col:last-child { border-bottom: none; }
/* ── Column heading — acts as accordion trigger ───────────────────────────── */
.mega-col-label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
padding: 0.875rem 0;
margin: 0;
color: var(--clr-muted-text, #6b7280);
cursor: pointer;
user-select: none;
}
/* Chevron indicator injected via CSS (no extra HTML needed) */
.mega-col-label::after {
content: '';
display: inline-block;
width: 0.9rem;
height: 0.9rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
}
/* Open state: rotate chevron + tint label */
.mega-col.is-open .mega-col-label {
color: var(--clr-primary, #9C2022);
}
.mega-col.is-open .mega-col-label::after {
transform: rotate(180deg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C2022' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* ── Column link list: hidden until column is opened ─────────────────────── */
.mega-col-list {
display: none;
flex-direction: column;
gap: 0;
padding: 0 0 0.75rem;
}
.mega-col.is-open .mega-col-list {
display: flex;
}
/* ── Individual service links ─────────────────────────────────────────────── */
.mega-item {
padding: 0.625rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.375rem;
}
/* ── Footer hidden on mobile (saves space) ───────────────────────────────── */
.mega-panel__footer {
display: none;
}
/* ── DROPDOWN PANEL — mobile accordion ───────────────────────────────────── */
.dropdown-panel {
position: static;
transform: none;
width: 100%;
opacity: 1;
visibility: visible;
box-shadow: none;
border: none;
border-radius: 0;
pointer-events: auto;
padding: 0;
overflow: visible;
transition: none;
/* Hidden until parent receives .is-expanded from nav.js */
display: none;
}
/* Reveal with explicit overrides (same pattern as .mega-panel) */
.nav-menu > li.is-expanded > .dropdown-panel {
display: block;
border-top: 1px solid var(--clr-border, #e8eaf0);
}
.dropdown-list {
padding: 0.25rem 0 0.5rem;
}
.dropdown-item {
padding: 0.625rem 0.5rem;
border-radius: 0.375rem;
font-size: 0.875rem;
}
/* Footer bar on mobile — left-aligned, transparent bg */
.dropdown-panel__footer {
border-top: 1px solid var(--clr-border, #e8eaf0);
padding: 0.625rem 0;
justify-content: flex-start;
background: transparent;
}
}