/* ============================================================ BGE site header — modern (Linear / Stripe-inspired) Reset-first: scoped under .bge-nav so Divi/MMM CSS won't leak in. ============================================================ */ :root { --bge-nav-h: 96px; --bge-nav-h-compact: 88px; --bge-nav-logo-h: 68px; --bge-nav-logo-h-compact: 68px; --bge-nav-bg: rgba(255, 255, 255, 0.78); --bge-nav-bg-solid: #ffffff; --bge-nav-border: rgba(15, 23, 42, 0.08); --bge-nav-fg: #0f172a; --bge-nav-fg-muted: #475569; --bge-nav-accent: #FD5F1E; --bge-nav-panel-bg: #ffffff; --bge-nav-panel-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04); --bge-nav-radius: 14px; --bge-nav-ease: cubic-bezier(0.22, 1, 0.36, 1); --bge-nav-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bge-nav-stick-top: 0px; } /* WP admin bar offset. Desktop: bar is position:fixed so we offset our header below it. Mobile: bar is position:absolute (scrolls away with the page) — keeping a 46px offset would leave a transparent gap above our fixed header once scrolled. So on mobile we keep top:0 and let the admin bar sit behind the header. */ body.admin-bar { --bge-nav-stick-top: 32px; } @media (max-width: 782px) { body.admin-bar { --bge-nav-stick-top: 0px; } } /* ----- Wrapper ----- */ .bge-nav, .bge-nav * { box-sizing: border-box; } .bge-nav { position: fixed; top: var(--bge-nav-stick-top); left: 0; right: 0; width: 100%; z-index: 2147483640; /* float above any Divi/MMM stacking context */ height: var(--bge-nav-h); font-family: var(--bge-nav-font); color: var(--bge-nav-fg); background: var(--bge-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: height 220ms var(--bge-nav-ease), background 240ms var(--bge-nav-ease), border-color 240ms var(--bge-nav-ease), box-shadow 240ms var(--bge-nav-ease); } /* Push the page content down so it doesn't sit underneath the fixed header. Header is rendered as a direct child of , BEFORE #page-container. */ #page-container { padding-top: var(--bge-nav-h); } .bge-nav.is-scrolled { height: var(--bge-nav-h-compact); background: var(--bge-nav-bg-solid); border-bottom-color: var(--bge-nav-border); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } .bge-nav.is-scrolled .bge-nav__logo-img { height: var(--bge-nav-logo-h-compact); } .bge-nav__inner { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 32px; } /* ----- Logo ----- */ .bge-nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; height: 100%; padding: 8px 0; } .bge-nav__logo-img { display: block; height: var(--bge-nav-logo-h); width: auto; max-height: calc(var(--bge-nav-h) - 16px); transition: height 220ms var(--bge-nav-ease); } .bge-nav__logo-text { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } /* ----- Top-level menu ----- */ .bge-nav__menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .bge-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .bge-nav__item { position: relative; list-style: none; } .bge-nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; color: var(--bge-nav-fg-muted); text-decoration: none; transition: color 160ms var(--bge-nav-ease), background-color 160ms var(--bge-nav-ease); white-space: nowrap; } .bge-nav__link:hover, .bge-nav__link:focus-visible { color: var(--bge-nav-fg); background-color: rgba(15, 23, 42, 0.04); } .bge-nav__item.is-current > .bge-nav__link, .bge-nav__item.is-open > .bge-nav__link { color: var(--bge-nav-fg); } /* Active-page indicator: thin underline, brand orange */ .bge-nav__item.is-current > .bge-nav__link::after { content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px; background: var(--bge-nav-accent); border-radius: 2px; } .bge-nav__caret { width: 9px; height: 5px; opacity: 0.5; transition: transform 200ms var(--bge-nav-ease), opacity 160ms var(--bge-nav-ease); } .bge-nav__link:hover .bge-nav__caret, .bge-nav__item.is-open .bge-nav__caret { opacity: 1; } .bge-nav__item.is-open .bge-nav__caret { transform: rotate(180deg); } /* ----- Dropdown panel ----- */ .bge-nav__panel { position: absolute; top: calc(100% + 6px); left: 0; right: auto; transform-origin: top left; transform: translateY(-4px); min-width: 240px; max-width: min(620px, calc(100vw - 32px)); background: var(--bge-nav-panel-bg); border-radius: var(--bge-nav-radius); box-shadow: var(--bge-nav-panel-shadow); padding: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms var(--bge-nav-ease), transform 200ms var(--bge-nav-ease), visibility 0s linear 180ms; z-index: 10; } /* Right-anchored variant — added by JS when the panel would overflow viewport right */ .bge-nav__panel--right { left: auto; right: 0; transform-origin: top right; } .bge-nav__item.is-open > .bge-nav__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 180ms var(--bge-nav-ease), transform 220ms var(--bge-nav-ease), visibility 0s linear 0s; } /* Hover bridge so cursor can travel from link to panel without triggering close */ .bge-nav__panel::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 12px; } .bge-nav__panel-inner { max-height: calc(100vh - var(--bge-nav-h) - 80px); overflow-y: auto; overscroll-behavior: contain; } .bge-nav__sublist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px; } /* (Legacy 2-column auto-rule removed — was bleeding into mega panels and forcing each grouped category column to 540px wide. Mega panels now own their layout.) */ /* ============================================================ Mega panel — auto-populated taxonomy lists Restraint: no sidecar, no descriptions, no CTAs. Just clean items. ============================================================ */ .bge-nav__panel--mega { width: 760px; max-width: calc(100vw - 32px); padding: 14px; } /* Flat (Disciplines, single column): tighter width */ .bge-nav__panel--mega:not(.bge-nav__panel--grouped) { width: 320px; } .bge-nav__panel--mega .bge-nav__panel-inner { max-height: calc(100vh - var(--bge-nav-h) - 80px); overflow-y: auto; position: relative; min-width: 0; } /* Flat layout (single grid, used when no groups configured) */ .bge-nav__mega-grid { display: grid !important; grid-template-columns: 1fr; gap: 0; min-width: 0 !important; width: 100%; } .bge-nav__panel--mega[data-cols="2"] .bge-nav__mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bge-nav__panel--mega[data-cols="3"] .bge-nav__mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bge-nav__panel--mega[data-cols="4"] .bge-nav__mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Grouped layout: one column per category */ .bge-nav__mega-cols { display: grid; grid-template-columns: repeat(var(--bge-cols, 3), minmax(0, 1fr)); gap: 24px; align-items: start; min-width: 0; } .bge-nav__panel--grouped[data-cols="2"] .bge-nav__mega-cols { --bge-cols: 2; } .bge-nav__panel--grouped[data-cols="3"] .bge-nav__mega-cols { --bge-cols: 3; } .bge-nav__panel--grouped[data-cols="4"] .bge-nav__mega-cols { --bge-cols: 4; } .bge-nav__mega-col { display: flex; flex-direction: column; min-width: 0; } .bge-nav__mega-col .bge-nav__sublist { min-width: 0; } .bge-nav__mega-eyebrow { margin: 0 0 8px 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bge-nav-fg-muted); opacity: 0.65; } .bge-nav__mega-link { position: relative; display: block; padding: 7px 12px; border-radius: 6px; color: var(--bge-nav-fg); text-decoration: none; transition: color 160ms var(--bge-nav-ease); z-index: 1; /* above the spotlight bg */ min-width: 0; } /* Override inherited sublink arrow indicator */ .bge-nav__mega-link::after { display: none !important; } .bge-nav__mega-link:hover, .bge-nav__mega-link:focus-visible { color: var(--bge-nav-fg); background: transparent; /* spotlight handles bg now */ } .bge-nav__mega-name { display: block; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.4; color: inherit; /* Allow wrap to up to 2 lines for long sector names ("Emergency Disaster & Recovery Management"). Stripe pattern — never truncate with ellipsis on a single line. */ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } /* ============================================================ Magic spotlight — single highlight that follows the cursor ============================================================ */ .bge-nav__spotlight { position: absolute; top: 0; left: 0; width: 0; height: 0; background: rgba(15, 23, 42, 0.05); border-radius: 6px; pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), width 220ms cubic-bezier(0.32, 0.72, 0, 1), height 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 160ms ease; z-index: 0; will-change: transform, width, height, opacity; } .bge-nav__spotlight.is-active { opacity: 1; } .bge-nav__subitem { list-style: none; } .bge-nav__sublink { display: flex; align-items: center; padding: 7px 12px; border-radius: 6px; color: var(--bge-nav-fg); text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; transition: background-color 120ms var(--bge-nav-ease), color 120ms var(--bge-nav-ease); } .bge-nav__sublink:hover, .bge-nav__sublink:focus-visible { background-color: rgba(15, 23, 42, 0.04); color: var(--bge-nav-accent); } /* When spotlight is active, suppress per-item hover bg so they don't double-up. Color shift on hover stays — it's a separate signal. */ [data-spotlight] .bge-nav__sublink:hover { background-color: transparent; } /* ----- Right side: CTA + mobile toggle ----- */ .bge-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .bge-nav__cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bge-nav-fg); color: #ffffff; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1.2; transition: background-color 160ms var(--bge-nav-ease), transform 160ms var(--bge-nav-ease); } .bge-nav__cta:hover, .bge-nav__cta:focus-visible { background: var(--bge-nav-accent); color: #ffffff; } .bge-nav__cta-arrow { width: 14px; height: 14px; transition: transform 160ms var(--bge-nav-ease); } .bge-nav__cta:hover .bge-nav__cta-arrow { transform: translate(2px, -2px); } /* ----- Mobile toggle (hamburger) ----- */ .bge-nav__toggle { display: none; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; cursor: pointer; position: relative; border-radius: 8px; transition: background-color 160ms var(--bge-nav-ease); } .bge-nav__toggle:hover { background-color: rgba(15, 23, 42, 0.06); } .bge-nav__toggle-bar { position: absolute; left: 10px; width: 20px; height: 1.5px; background: var(--bge-nav-fg); border-radius: 1px; transition: transform 240ms var(--bge-nav-ease), opacity 160ms var(--bge-nav-ease), top 240ms var(--bge-nav-ease); } .bge-nav__toggle-bar:nth-child(1) { top: 13px; } .bge-nav__toggle-bar:nth-child(2) { top: 19px; } .bge-nav__toggle-bar:nth-child(3) { top: 25px; } .bge-nav.is-mobile-open .bge-nav__toggle-bar:nth-child(1) { top: 19px; transform: rotate(45deg); } .bge-nav.is-mobile-open .bge-nav__toggle-bar:nth-child(2) { opacity: 0; } .bge-nav.is-mobile-open .bge-nav__toggle-bar:nth-child(3) { top: 19px; transform: rotate(-45deg); } /* ============================================================ Mobile (<= 980px): replace inline menu with full-screen drawer ============================================================ */ @media (max-width: 980px) { /* Shorter, more proportional header on mobile. Logo can shrink here since the executive-visibility constraint applies to desktop. The smaller --bge-nav-h flows through to #page-container's padding-top, tightening the gap between header and section content. */ :root { --bge-nav-h: 72px; --bge-nav-h-compact: 72px; --bge-nav-logo-h: 48px; --bge-nav-logo-h-compact: 48px; } /* Skip the translucent/frosted state on mobile. Solid from the start so dark hero images and the WP admin bar (which sits behind the fixed header on mobile) don't bleed through and read as a grey gradient. */ .bge-nav { background: var(--bge-nav-bg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--bge-nav-border); } /* Don't shrink the header on scroll on mobile. The shrink leaves a 16px gap between the (compact) header and the top of #page-container, whose padding-top stays at --bge-nav-h. */ .bge-nav.is-scrolled { height: var(--bge-nav-h); } .bge-nav.is-scrolled .bge-nav__logo-img { height: var(--bge-nav-logo-h); } .bge-nav__inner { padding: 0 16px; gap: 12px; } /* The fixed-positioned drawer leaves the flex flow, so without this the hamburger would sit right next to the logo instead of the right edge. */ .bge-nav__actions { margin-left: auto; } /* Active-page underline is a desktop pattern. On a full-width mobile link it stretches into a long horizontal bar — suppress it. */ .bge-nav__item.is-current > .bge-nav__link::after { display: none; } .bge-nav__cta { display: none; } .bge-nav__toggle { display: inline-block; } /* Drawer */ .bge-nav__menu { position: fixed; top: calc(var(--bge-nav-h) + var(--bge-nav-stick-top, 0px)); left: 0; right: 0; /* Use dynamic viewport height so iOS Safari address-bar collapse doesn't leave gaps */ height: calc(100vh - var(--bge-nav-h) - var(--bge-nav-stick-top, 0px)); height: calc(100dvh - var(--bge-nav-h) - var(--bge-nav-stick-top, 0px)); flex-direction: column; justify-content: flex-start; padding: 8px 20px 32px; background: var(--bge-nav-bg-solid); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 2147483639; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 220ms var(--bge-nav-ease), transform 220ms var(--bge-nav-ease), visibility 0s linear 220ms; } .bge-nav.is-mobile-open .bge-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 220ms var(--bge-nav-ease), transform 220ms var(--bge-nav-ease), visibility 0s linear 0s; } /* Dim the page behind the drawer */ .bge-nav.is-mobile-open::after { content: ''; position: fixed; top: calc(var(--bge-nav-h) + var(--bge-nav-stick-top, 0px)); left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.32); z-index: 2147483638; animation: bge-nav-fade-in 220ms var(--bge-nav-ease) both; } @keyframes bge-nav-fade-in { from { opacity: 0; } to { opacity: 1; } } .bge-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .bge-nav__item { border-bottom: 1px solid var(--bge-nav-border); } .bge-nav__item:last-child { border-bottom: 0; } .bge-nav__link { width: 100%; justify-content: space-between; padding: 18px 4px; font-size: 17px; font-weight: 500; color: var(--bge-nav-fg); border-radius: 0; min-height: 56px; } .bge-nav__link:hover, .bge-nav__link:focus-visible { background: transparent; } .bge-nav__item.is-open > .bge-nav__link { color: var(--bge-nav-fg); } /* Bigger, friendlier mobile caret */ .bge-nav__caret { width: 14px; height: 8px; opacity: 0.55; flex-shrink: 0; margin-left: 16px; } .bge-nav__item.is-open .bge-nav__caret { opacity: 1; color: var(--bge-nav-accent); } /* Mobile accordion: panel becomes inline expandable */ .bge-nav__panel { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; box-shadow: none; border-radius: 0; padding: 0; max-width: none; min-width: 0; max-height: 0; overflow: hidden; transition: max-height 320ms var(--bge-nav-ease); } .bge-nav__panel::before { display: none; } .bge-nav__panel-inner { max-height: none; overflow: visible; } /* When .is-open is set, JS measures actual content height and writes max-height inline. The CSS rule below just supplies the open-state padding + animation start point. */ .bge-nav__item.is-open > .bge-nav__panel { padding-bottom: 12px; transform: none; } .bge-nav__sublist, .bge-nav__panel:has(.bge-nav__sublist > .bge-nav__subitem:nth-child(8)) .bge-nav__sublist { grid-template-columns: 1fr; min-width: 0; gap: 0; } /* Mega panel: collapse to single column, full-width tap targets */ .bge-nav__panel--mega { width: 100%; max-width: none; padding: 0; } .bge-nav__panel--mega .bge-nav__panel-inner { max-height: none; overflow: visible; } .bge-nav__mega-grid { grid-template-columns: 1fr !important; } .bge-nav__mega-cols { grid-template-columns: 1fr !important; gap: 0; } .bge-nav__mega-col + .bge-nav__mega-col { border-top: 1px solid rgba(15, 23, 42, 0.05); margin-top: 4px; padding-top: 12px; } .bge-nav__mega-eyebrow { margin: 8px 0 4px 20px; font-size: 11px; } .bge-nav__mega-link { padding: 14px 8px 14px 20px; border-radius: 0; min-height: 48px; } .bge-nav__mega-name { font-size: 15px; white-space: normal; overflow: visible; text-overflow: clip; } /* Spotlight effect is desktop-only — disable on touch */ .bge-nav__spotlight { display: none; } .bge-nav__subitem { border-bottom: 1px solid rgba(15, 23, 42, 0.05); } .bge-nav__subitem:last-child { border-bottom: 0; } .bge-nav__sublink { padding: 14px 8px 14px 20px; font-size: 15px; color: var(--bge-nav-fg-muted); border-radius: 0; min-height: 48px; } .bge-nav__sublink::after { opacity: 0.35; } /* Drawer footer: CTA pinned to bottom of the drawer using margin-top: auto */ .bge-nav__drawer-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 16px 20px; background: var(--bge-nav-fg); color: #ffffff; border-radius: 12px; font-size: 16px; font-weight: 500; text-decoration: none; line-height: 1.2; flex-shrink: 0; } .bge-nav__drawer-cta:hover, .bge-nav__drawer-cta:focus-visible { background: var(--bge-nav-accent); color: #ffffff; } .bge-nav__drawer-cta-arrow { width: 16px; height: 16px; } body.bge-nav-locked { overflow: hidden; /* Prevent layout shift when the scrollbar disappears */ padding-right: var(--bge-nav-scrollbar-w, 0); } } /* Hide the drawer-only CTA on desktop */ @media (min-width: 981px) { .bge-nav__drawer-cta { display: none; } } /* Kill Divi's legacy fixed-nav padding on #page-container. Divi adds 80px top padding to compensate for its old fixed header height. We don't need it because our header is position:sticky and lives in flow. */ body.et_fixed_nav.et_show_nav #page-container, body.et_non_fixed_nav.et_transparent_nav.et_show_nav #page-container { padding-top: 0 !important; } /* Defensive resets — kill any stray Divi/MMM rules that might reach into our nav */ .bge-nav ul, .bge-nav li { margin: 0; padding: 0; list-style: none; } .bge-nav a { text-shadow: none; } /* ============================================================ Navbar search — icon-trigger that expands to inline input. Linear/Stripe pattern: single magnifier collapses to 36px, expands to ~340px with results dropdown anchored below. Sub-200ms transitions so it feels like the input was always there. ============================================================ */ .bge-nav__search { position: relative; display: inline-flex; align-items: center; height: 36px; width: 36px; border-radius: 999px; background: transparent; border: 1px solid transparent; transition: width 240ms var(--bge-nav-ease), background-color 200ms var(--bge-nav-ease), border-color 200ms var(--bge-nav-ease), box-shadow 200ms var(--bge-nav-ease); } .bge-nav__search.is-open { width: 340px; background: #ffffff; border-color: var(--bge-nav-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .bge-nav__search.is-open:focus-within { border-color: rgba(15, 23, 42, 0.18); box-shadow: 0 0 0 3px rgba(253, 95, 30, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04); } .bge-nav__search-toggle { flex-shrink: 0; width: 36px; height: 36px; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 999px; color: var(--bge-nav-fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 160ms var(--bge-nav-ease), color 160ms var(--bge-nav-ease); } .bge-nav__search-toggle:hover, .bge-nav__search-toggle:focus-visible { background-color: rgba(15, 23, 42, 0.06); color: var(--bge-nav-fg); outline: none; } .bge-nav__search.is-open .bge-nav__search-toggle:hover, .bge-nav__search.is-open .bge-nav__search-toggle:focus-visible { background-color: transparent; } .bge-nav__search-icon, .bge-nav__search-close { width: 18px; height: 18px; transition: opacity 160ms var(--bge-nav-ease), transform 200ms var(--bge-nav-ease); } .bge-nav__search-close { display: none; } .bge-nav__search.is-open .bge-nav__search-icon { display: none; } .bge-nav__search.is-open .bge-nav__search-close { display: block; } .bge-nav__search-input { flex: 1 1 auto; min-width: 0; width: 0; height: 100%; margin: 0; padding: 0 14px 0 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--bge-nav-fg); opacity: 0; pointer-events: none; transition: opacity 160ms var(--bge-nav-ease) 60ms; /* Hide native search-cancel button — we provide our own close affordance */ appearance: none; -webkit-appearance: none; } .bge-nav__search-input::-webkit-search-cancel-button, .bge-nav__search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; } .bge-nav__search-input::placeholder { color: var(--bge-nav-fg-muted); opacity: 0.7; } .bge-nav__search.is-open .bge-nav__search-input { opacity: 1; pointer-events: auto; } /* ----- Results dropdown ----- */ .bge-nav__search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 420px; max-width: calc(100vw - 32px); max-height: min(72vh, 540px); overflow-y: auto; overscroll-behavior: contain; background: var(--bge-nav-panel-bg); border-radius: var(--bge-nav-radius); box-shadow: var(--bge-nav-panel-shadow); padding: 6px; z-index: 11; /* Hidden by default via [hidden] attribute; JS removes it when results land */ } .bge-nav__search-results[hidden] { display: none; } .bge-nav__search-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: var(--bge-nav-fg); transition: background-color 120ms var(--bge-nav-ease); } .bge-nav__search-row:hover, .bge-nav__search-row[aria-selected="true"] { background-color: rgba(15, 23, 42, 0.05); } .bge-nav__search-row[aria-selected="true"] { background-color: rgba(253, 95, 30, 0.08); } .bge-nav__search-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: rgba(15, 23, 42, 0.06); background-size: cover; background-position: center; } .bge-nav__search-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bge-nav__search-title { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--bge-nav-fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bge-nav__search-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bge-nav-fg-muted); } .bge-nav__search-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(253, 95, 30, 0.10); color: var(--bge-nav-accent); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; white-space: nowrap; } .bge-nav__search-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bge-nav__search-hint, .bge-nav__search-empty { padding: 14px 12px; font-size: 13px; color: var(--bge-nav-fg-muted); text-align: center; } .bge-nav__search-empty strong { display: block; margin-bottom: 4px; color: var(--bge-nav-fg); font-weight: 600; } .bge-nav__search-footer { margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--bge-nav-border); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--bge-nav-fg-muted); } .bge-nav__search-footer a { color: var(--bge-nav-fg); font-weight: 600; text-decoration: none; } .bge-nav__search-footer a:hover { color: var(--bge-nav-accent); } .bge-nav__search-kbd { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(15, 23, 42, 0.06); color: var(--bge-nav-fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.4; } /* ============================================================ Mobile (≤ 980px): icon stays in nav, but tapping it drops a full-width input row directly under the navbar with a full-width results panel below it. ============================================================ */ @media (max-width: 980px) { .bge-nav__search { width: 40px; height: 40px; background: transparent; border: 0; box-shadow: none; } .bge-nav__search.is-open { width: 40px; background: transparent; border: 0; box-shadow: none; } .bge-nav__search-toggle { width: 40px; height: 40px; } .bge-nav__search-input { position: fixed; top: calc(var(--bge-nav-h) + var(--bge-nav-stick-top, 0px)); left: 0; right: 0; width: 100%; height: 56px; padding: 0 20px; background: var(--bge-nav-bg-solid); border-bottom: 1px solid var(--bge-nav-border); font-size: 16px; /* prevent iOS zoom-on-focus */ opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 200ms var(--bge-nav-ease), transform 200ms var(--bge-nav-ease); z-index: 2147483637; } .bge-nav__search.is-open .bge-nav__search-input { opacity: 1; pointer-events: auto; transform: translateY(0); } .bge-nav__search-results { position: fixed; top: calc(var(--bge-nav-h) + var(--bge-nav-stick-top, 0px) + 56px); left: 0; right: 0; width: 100%; max-width: none; max-height: calc(100dvh - var(--bge-nav-h) - var(--bge-nav-stick-top, 0px) - 56px); border-radius: 0; box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.18); z-index: 2147483637; } } /* ============================================================ Loading states — stale-while-loading dim, bottom progress bar, skeleton rows, and a soft fade-in for fresh result sets. Industry pattern (Stripe / Linear / Algolia): only painted after a 100ms grace delay so fast queries never flash a loader. ============================================================ */ /* 1. Dim existing results while a new query is in flight. */ .bge-nav__search.is-loading .bge-nav__search-results > * { opacity: 0.55; transition: opacity 160ms var(--bge-nav-ease); } /* 2. Indeterminate progress bar at the bottom of the input. Single 30%-wide bar that shuttles back and forth. Subtle, brand-tinted. */ .bge-nav__search::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--bge-nav-accent), transparent); background-size: 30% 100%; background-repeat: no-repeat; background-position: -30% 0; border-radius: 2px; opacity: 0; pointer-events: none; transition: opacity 160ms var(--bge-nav-ease); } .bge-nav__search.is-loading::after { opacity: 1; animation: bge-search-progress 1.1s linear infinite; } @keyframes bge-search-progress { 0% { background-position: -30% 0; } 100% { background-position: 130% 0; } } /* 3. Skeleton rows — first-load case (no previous results to dim). Soft shimmer sweeps left-to-right across grey blocks. */ .bge-nav__search-skel { pointer-events: none; cursor: default; } .bge-nav__search-skel:hover { background: transparent; } .bge-nav__search-skel-thumb, .bge-nav__search-skel-line { position: relative; overflow: hidden; background: rgba(15, 23, 42, 0.06); border-radius: 6px; } .bge-nav__search-skel-thumb { /* keep the existing 56×56 thumb size */ } .bge-nav__search-skel-line { display: block; height: 12px; width: 100%; margin-bottom: 6px; } .bge-nav__search-skel-line--short { width: 55%; margin-bottom: 0; } .bge-nav__search-skel-thumb::after, .bge-nav__search-skel-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100% ); transform: translateX(-100%); animation: bge-search-shimmer 1.4s ease-in-out infinite; } @keyframes bge-search-shimmer { 100% { transform: translateX(100%); } } /* 4. Fade-in for fresh result rows. Re-renders create new DOM nodes, so the animation re-fires every time results change. */ .bge-nav__search-row { animation: bge-search-row-in 200ms var(--bge-nav-ease) both; } @keyframes bge-search-row-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } /* Skeletons shouldn't fade in — they're just placeholders */ .bge-nav__search-skel { animation: none; } /* ============================================================ Match highlighting — used by both the live dropdown and search.php ============================================================ */ mark.bge-search-mark { background: rgba(253, 95, 30, 0.18); color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .primary-sector-tag mark.bge-search-mark { background: rgba(255, 255, 255, 0.30); color: inherit; } /* ============================================================ Search results page (search.php) ============================================================ */ .bge-search-page .bge-search-header { text-align: center; max-width: 720px; margin: 0 auto; } .bge-search-page .bge-search-header .eyebrow { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .bge-search-page .bge-search-header h1 { margin: 0 0 8px; } .bge-search-page .bge-search-sub { margin: 0; color: var(--bge-nav-fg-muted); font-size: 15px; } /* Pagination — matches the rest of the site's quiet, modern look */ .bge-search-pagination { margin: 48px 0 16px; display: flex; justify-content: center; } .bge-search-pagination .page-numbers { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; } .bge-search-pagination .page-numbers > li { list-style: none; margin: 0; } .bge-search-pagination a.page-numbers, .bge-search-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 8px; font-family: var(--bge-nav-font); font-size: 14px; font-weight: 500; color: var(--bge-nav-fg-muted); background: transparent; border: 1px solid transparent; text-decoration: none; transition: background-color 160ms var(--bge-nav-ease), color 160ms var(--bge-nav-ease), border-color 160ms var(--bge-nav-ease); } .bge-search-pagination a.page-numbers:hover { background: rgba(15, 23, 42, 0.05); color: var(--bge-nav-fg); } .bge-search-pagination span.page-numbers.current { color: #ffffff; background: var(--bge-nav-fg); } .bge-search-pagination span.page-numbers.dots { color: var(--bge-nav-fg-muted); background: transparent; } /* Suggestions / try-chips for empty + zero-result states */ .bge-search-suggest { text-align: center; max-width: 640px; margin: 0 auto; padding: 24px 16px 8px; } .bge-search-suggest-label { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bge-nav-fg-muted); } .bge-search-suggest-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; } .bge-search-chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: #ffffff; border: 1px solid var(--bge-nav-border); font-family: var(--bge-nav-font); font-size: 14px; font-weight: 500; color: var(--bge-nav-fg); text-decoration: none; line-height: 1.2; text-transform: capitalize; transition: background-color 160ms var(--bge-nav-ease), border-color 160ms var(--bge-nav-ease), color 160ms var(--bge-nav-ease), transform 160ms var(--bge-nav-ease); } .bge-search-chip:hover, .bge-search-chip:focus-visible { background: var(--bge-nav-fg); color: #ffffff; border-color: var(--bge-nav-fg); transform: translateY(-1px); } .bge-search-suggest-foot { margin: 0; color: var(--bge-nav-fg-muted); font-size: 14px; } .bge-search-suggest-foot a { color: var(--bge-nav-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .bge-search-suggest-foot a:hover { color: var(--bge-nav-accent); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .bge-nav, .bge-nav *, .bge-nav *::before, .bge-nav *::after { transition-duration: 0.01ms !important; } }