/* ========================================================================== FPP Global Header Component Shared navigation for all /new/* pages The header is font-size-independent: it locks its own font-size to 16px and every internal measurement is expressed in em (relative to .site-header itself), so pages that redefine html { font-size: ... } do not distort it. ========================================================================== */ /* -------------------------------------------------------------------------- Header-scoped variables (em units, resolved against .site-header font-size) -------------------------------------------------------------------------- */ .site-header { --color-primary: #0E5BE0; --color-accent: #0A4FC4; --color-text-light: #3D4F6F; --color-text-muted: #5E6E8C; --color-background: #FFFFFF; --color-background-alt: #F1F4FB; --color-border-light: rgba(0,0,0,0.08); --font-size-xs: 0.75em; --font-size-sm: 0.875em; --font-size-base: 1em; --font-size-xl: 1.25em; --space-xs: 0.25em; --space-sm: 0.5em; --space-md: 1em; --space-lg: 1.5em; --space-xl: 2em; --border-radius: 8px; --border-radius-lg: 12px; --transition-fast: 0.15s ease; --transition-base: 0.3s ease; } /* -------------------------------------------------------------------------- Header Base -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* Lock the header's own font-size so rem/em inside always resolve to the same absolute size, regardless of the host page's html font-size. */ font-size: 18px; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-light); transition: box-shadow var(--transition-base), background-color var(--transition-base); } .site-header.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); background-color: rgba(255, 255, 255, 0.99); } /* -------------------------------------------------------------------------- Dark theme variant Opt-in via . Used on pages whose hero is dark (fpp-insight, about, study-cases, etc.) so the header is readable on top of it. When the user scrolls, the header reverts to the light theme defined above. -------------------------------------------------------------------------- */ body[data-header-theme="dark"] .site-header:not(.scrolled) { background-color: rgba(20, 25, 51, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, 0.08); } body[data-header-theme="dark"] .site-header:not(.scrolled) .logo-img { filter: brightness(0) invert(1); } body[data-header-theme="dark"] .site-header:not(.scrolled) .nav-link, body[data-header-theme="dark"] .site-header:not(.scrolled) .nav-dropdown-trigger { color: rgba(255, 255, 255, 0.9); background-color: transparent; } body[data-header-theme="dark"] .site-header:not(.scrolled) .nav-link:hover, body[data-header-theme="dark"] .site-header:not(.scrolled) .nav-dropdown-trigger:hover, body[data-header-theme="dark"] .site-header:not(.scrolled) .nav-dropdown.active .nav-dropdown-trigger { color: #ffffff; background-color: rgba(255, 255, 255, 0.15); } body[data-header-theme="dark"] .site-header:not(.scrolled) .hamburger, body[data-header-theme="dark"] .site-header:not(.scrolled) .hamburger::before, body[data-header-theme="dark"] .site-header:not(.scrolled) .hamburger::after { background-color: #ffffff; } .site-header .container { display: flex; align-items: center; height: 72px; max-width: 1440px !important; margin: 0 auto; padding: 0 2em !important; gap: 1em; } /* -------------------------------------------------------------------------- Logo -------------------------------------------------------------------------- */ .logo { display: flex; align-items: center; flex-shrink: 0; } .logo-text { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); letter-spacing: 0.05em; } .logo:hover .logo-text { color: var(--color-accent); } .logo-img { height: 28px; width: auto; transition: opacity var(--transition-fast); } .logo:hover .logo-img { opacity: 0.8; } /* -------------------------------------------------------------------------- Desktop Navigation -------------------------------------------------------------------------- */ .main-nav { display: flex; align-items: center; gap: var(--space-sm); /* Push the nav to the right edge of the container, keeping the logo anchored on the left. */ margin-left: auto; } .nav-menu { display: flex; align-items: center; gap: 0; margin-left: 0.25em !important; } .nav-link { display: inline-flex; align-items: center; font-size: 0.8em; font-weight: 500; color: var(--color-text-light); padding: var(--space-sm) 1.4em; border-radius: var(--border-radius); transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; text-decoration: none; } .nav-link:hover { color: var(--color-primary); background-color: var(--color-background-alt); } .nav-link.active { color: var(--color-primary); background-color: var(--color-background-alt); font-weight: 600; } /* -------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------- */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.75em; font-size: 0.8em; font-weight: 500; color: var(--color-text-light); padding: var(--space-sm) 0.35em; border-radius: var(--border-radius); transition: color var(--transition-fast), background-color var(--transition-fast); cursor: pointer; background: none; border: none; text-align: left; line-height: 1.3; /* Give each trigger a consistent horizontal footprint so the header distributes evenly across the container. The label + chevron sit flush on the left; the remaining space stays as breathing room on the right, before the next nav item. */ min-width: 9.75em; padding-right: 1.75em; } .nav-dropdown-trigger .nav-text, .nav-link .nav-text { display: block; line-height: 1.2; } .mobile-nav-dropdown-trigger .nav-text { display: block; line-height: 1.2; } .nav-dropdown-trigger:hover, .nav-dropdown.active .nav-dropdown-trigger { color: var(--color-primary); background-color: var(--color-background-alt); } .nav-dropdown-trigger.active { color: var(--color-primary); background-color: var(--color-background-alt); font-weight: 600; } .nav-dropdown-icon { width: 12px; height: 12px; transition: transform var(--transition-fast); } .nav-dropdown.active .nav-dropdown-icon { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background-color: var(--color-background); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); padding: var(--space-sm); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); z-index: 1001; } /* Two-column mega menu for Recruitment Formats */ .nav-dropdown-menu.mega-menu { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; } .nav-dropdown-menu.mega-menu .mega-menu-column { padding: var(--space-sm); } .nav-dropdown-menu.mega-menu .mega-menu-column:first-child { border-right: 1px solid var(--color-border-light); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.active .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-link { display: flex; flex-direction: column; padding: var(--space-md); border-radius: var(--border-radius); transition: background-color var(--transition-fast); text-decoration: none; } .nav-dropdown-link:hover { background-color: var(--color-background-alt); } .nav-dropdown-link-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); margin-bottom: 2px; } .nav-dropdown-link-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.4; } .nav-dropdown-label { display: block; font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); padding: var(--space-sm) var(--space-md); margin-top: var(--space-xs); border-top: 1px solid var(--color-border-light); } .nav-dropdown-label:first-child { border-top: none; margin-top: 0; } .nav-dropdown-divider { height: 1px; background-color: var(--color-border-light); margin: var(--space-sm) 0; } .nav-cta { margin-left: var(--space-sm); flex-shrink: 0; } .nav-cta .btn, .nav-cta .btn-nav { display: inline-flex; align-items: center; padding: 0.6em 1.25em; font-size: 0.875em; font-weight: 600; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; } .nav-cta .btn-primary { background: var(--color-primary, #0E5BE0); color: white; } .nav-cta .btn-primary:hover { background: #0A4FC4; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(14, 91, 224, 0.3); } /* -------------------------------------------------------------------------- Mobile Menu Toggle -------------------------------------------------------------------------- */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--border-radius); transition: background-color var(--transition-fast); margin-left: auto; } .mobile-menu-toggle:hover { background-color: var(--color-background-alt); } .hamburger { display: block; width: 22px; height: 2px; background-color: var(--color-primary); position: relative; transition: background-color var(--transition-fast); } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--color-primary); transition: transform var(--transition-base), top var(--transition-base); } .hamburger::before { top: -7px; } .hamburger::after { top: 7px; } /* Hamburger animation when active */ .mobile-menu-toggle.active .hamburger { background-color: transparent; } .mobile-menu-toggle.active .hamburger::before { top: 0; transform: rotate(45deg); background-color: var(--color-primary); } .mobile-menu-toggle.active .hamburger::after { top: 0; transform: rotate(-45deg); background-color: var(--color-primary); } /* -------------------------------------------------------------------------- Mobile Navigation Panel -------------------------------------------------------------------------- */ .mobile-nav { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #141933 0%, #1a2040 100%); z-index: 999; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .mobile-nav.active { opacity: 1; visibility: visible; } .mobile-nav-content { padding: 1.5em; display: flex; flex-direction: column; gap: 0.25em; } .mobile-nav-link { display: flex; align-items: center; font-size: 1em; font-weight: 500; color: rgba(255, 255, 255, 0.9); padding: 1em 1.25em; border-radius: 12px; transition: all 0.2s ease; text-decoration: none; border: 1px solid transparent; } .mobile-nav-link:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); color: #fff; } .mobile-nav-link.active { color: #22d3ee; background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.3); font-weight: 600; } /* Mobile Dropdown */ .mobile-nav-dropdown { display: flex; flex-direction: column; margin-bottom: 0.25em; } .mobile-nav-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; font-size: 1em; font-weight: 500; color: rgba(255, 255, 255, 0.9); padding: 1em 1.25em; border-radius: 12px; background: none; border: 1px solid transparent; cursor: pointer; width: 100%; text-align: left; transition: all 0.2s ease; } .mobile-nav-dropdown-trigger:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); color: #fff; } .mobile-nav-dropdown.active .mobile-nav-dropdown-trigger { color: #22d3ee; background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.3); font-weight: 600; } .mobile-nav-dropdown-icon { width: 16px; height: 16px; transition: transform var(--transition-fast); color: rgba(255, 255, 255, 0.6); } .mobile-nav-dropdown.active .mobile-nav-dropdown-icon { transform: rotate(180deg); color: #22d3ee; } .mobile-nav-submenu { display: none; flex-direction: column; margin-top: 0.5em; margin-left: 1em; padding: 0.75em; background: rgba(0, 0, 0, 0.2); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav-dropdown.active .mobile-nav-submenu { display: flex; } .mobile-nav-sublink { font-size: 0.9em; color: rgba(255, 255, 255, 0.75); padding: 0.75em 1em; border-radius: 8px; transition: all 0.2s ease; text-decoration: none; display: block; } .mobile-nav-sublink:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .mobile-nav-label { display: block; font-size: 0.65em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #22d3ee; padding: 1em 1em 0.5em; margin-top: 0.5em; border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav-label:first-child { border-top: none; margin-top: 0; padding-top: 0.5em; } .mobile-nav-cta { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); } .mobile-nav-cta .btn { width: 100%; justify-content: center; } /* Prevent body scroll when mobile menu is open */ body.menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- Responsive Breakpoints -------------------------------------------------------------------------- */ /* Hide mobile elements on desktop */ @media (min-width: 1025px) { .mobile-menu-toggle, .mobile-nav { display: none !important; } } /* Tablet - compressed nav */ @media (max-width: 1200px) { .nav-link { padding: var(--space-xs) 0.2em; font-size: 0.72em; } .nav-dropdown-trigger { padding: var(--space-xs) 0.2em; font-size: 0.72em; } .main-nav { gap: 0; } .nav-menu { margin-left: 0 !important; } .site-header .container { padding: 0 0.75em !important; } .nav-cta { margin-left: var(--space-xs); } } @media (max-width: 1024px) { .nav-link { padding: var(--space-xs) 0.15em; font-size: 0.68em; } .nav-dropdown-trigger { padding: var(--space-xs) 0.15em; font-size: 0.68em; } .nav-dropdown-icon { width: 10px; height: 10px; } } /* Mobile nav */ @media (max-width: 900px) { .main-nav { display: none; } .mobile-menu-toggle { display: flex; } .mobile-nav { display: block; } } /* Small mobile adjustments */ @media (max-width: 480px) { .site-header .container { height: 64px; } .mobile-nav { top: 64px; } .mobile-nav-content { padding: 1em; } .mobile-nav-link, .mobile-nav-dropdown-trigger { font-size: 0.95em; padding: 0.875em 1em; } .mobile-nav-sublink { font-size: 0.85em; padding: 0.625em 0.875em; } }