/* ============================================================= GHS Theme -- assets/css/components/nav.css Floating glassmorphism navbar. Specification (from design handoff): position: fixed, top: 20px, centered, max-width: 1200px (--container-max) background: rgba(255,255,255,0.75) + backdrop-filter blur(20px) height: 68px, border-radius: 20px Active link: rgba(0,56,101,0.06) bg, font-weight 600, color navy @package GHS_Theme @since 1.0.0 ============================================================= */ /* ---------------------------------------------------------- OUTER WRAPPER (handles positioning + centering) ---------------------------------------------------------- */ .ghs-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 200; width: calc(100% - 48px); max-width: var(--container-max); /* 1200px */ /* Prevent nav text from being selectable on drag */ user-select: none; } /* ---------------------------------------------------------- INNER GLASS PILL (the visible bar) ---------------------------------------------------------- */ .ghs-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 var(--space-5); /* 0 24px */ /* Frosted glass -- translucent enough to show the hero gradient behind, opaque enough for text legibility. Stronger blur + saturation boost compensate for the lower background opacity. */ background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 20px; box-shadow: 0 8px 32px rgba(6, 36, 63, 0.14), 0 2px 8px rgba(6, 36, 63, 0.08); /* Promote to its own compositing layer so the backdrop-filter does not repaint/flicker against the animated hero gradient behind it (notably the logo flicker on mobile when toggling the menu). */ transform: translateZ(0); isolation: isolate; } /* ---------------------------------------------------------- LOGO LINK ---------------------------------------------------------- */ .ghs-nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; height: 44px; /* matches design logo height */ } .ghs-nav__logo img { height: 44px; width: auto; display: block; /* Avoid re-decode/flicker when the nav relayouts on menu toggle. */ transform: translateZ(0); backface-visibility: hidden; } /* ---------------------------------------------------------- NAVIGATION LINKS GROUP (center) ---------------------------------------------------------- */ .ghs-nav__links { display: flex; align-items: center; gap: var(--space-1); /* 4px between links */ list-style: none; margin: 0; padding: 0; } .ghs-nav__link { display: block; padding: 8px 16px; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-body); text-decoration: none; border-radius: var(--radius-md); /* 12px */ transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .ghs-nav__link:hover { color: var(--ghs-navy); background: var(--ghs-mist); } /* Active state -- current page indicator */ .ghs-nav__link.is-active, .ghs-nav__link[aria-current="page"] { background: rgba(0, 56, 101, 0.06); font-weight: var(--fw-semi); color: var(--ghs-navy); } /* ---------------------------------------------------------- ACTIONS GROUP (right: contact button + language switcher) ---------------------------------------------------------- */ .ghs-nav__actions { display: flex; align-items: center; gap: var(--space-3); /* 12px */ } /* ---------------------------------------------------------- LANGUAGE SWITCHER ---------------------------------------------------------- */ .ghs-nav__lang { padding: 6px 12px; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ghs-navy); text-decoration: none; border: 1px solid var(--ghs-line-strong); border-radius: var(--radius-sm); /* 8px */ } /* ---------------------------------------------------------- MOBILE HAMBURGER TOGGLE (shown below 768px) ---------------------------------------------------------- */ .ghs-nav__toggle { display: none; flex-direction: column; justify-content: space-between; box-sizing: content-box; /* width/height = the bars; padding = hit area */ width: 22px; height: 16px; padding: 9px; margin: -9px; /* keep visual position despite padding */ background: transparent; border: none; border-radius: 10px; cursor: pointer; flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease-out); } /* Soft, brand-consistent state -- no harsh outline */ .ghs-nav__toggle:hover, .ghs-nav__toggle:active, .ghs-nav__toggle[aria-expanded="true"] { background-color: rgba(0, 56, 101, 0.06); } .ghs-nav__toggle span { display: block; height: 2px; width: 100%; background-color: var(--ghs-navy); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } /* Open state -- animated to X */ .ghs-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ghs-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ghs-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Remove browser default outlines and replace with brand focus ring */ .ghs-nav__toggle:focus { outline: none; } .ghs-nav__toggle:focus-visible { outline: 2px solid var(--ghs-teal); outline-offset: 4px; border-radius: var(--radius-xs); } /* ---------------------------------------------------------- RESPONSIVE (mobile: stack links below bar) ---------------------------------------------------------- */ @media (max-width: 768px) { .ghs-nav__toggle { display: flex; } /* Hide links and actions by default on mobile */ .ghs-nav__links, .ghs-nav__actions { display: none; } /* Mobile menu panel -- open state. Strategy: keep the top row (logo + toggle) pixel-identical to the closed bar. The inner bar grows downward only. We use flex-wrap so logo (order 1) + toggle (order 2) share the first row, and links/actions (order 3/4) wrap onto rows below. Top row height is locked to 68px via explicit padding on the inner: padding-top: 12px (12 + 44px logo + 12 = 68px row height) padding-bottom: 12px (paired so the first row is symmetric) The expanded content areas add their own spacing via padding-top on the links/actions blocks. logo and toggle keep their natural dimensions -- no height overrides that would interfere with the negative-margin hit-area on toggle. */ .ghs-nav.is-open .ghs-nav__inner { flex-wrap: wrap; height: auto; padding-top: 12px; /* (68 - 44) / 2 -- mirrors closed centering */ padding-bottom: 12px; /* symmetrical; links add their own top padding */ gap: 0; align-items: center; } /* Logo: keep exactly as in closed state (height 44px, align-items center). */ .ghs-nav.is-open .ghs-nav__logo { order: 1; align-self: center; } /* Toggle: right-aligned in the top row. Reset the margin override that the open state previously introduced, keep only margin-left:auto. align-self:center keeps it on the same optical baseline as the logo. */ .ghs-nav.is-open .ghs-nav__toggle { order: 2; margin-left: auto; align-self: center; } .ghs-nav.is-open .ghs-nav__links { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: var(--space-1); order: 3; padding-top: var(--space-3); border-top: 1px solid var(--ghs-line); } .ghs-nav.is-open .ghs-nav__link { width: 100%; padding: var(--space-3) var(--space-4); } .ghs-nav.is-open .ghs-nav__actions { display: flex; width: 100%; padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--ghs-line); order: 4; } }