/* ══════════════════════════════════════════════════════════════════════ Ant Assist — shared site navigation. SINGLE SOURCE OF TRUTH. Loaded last in on every page, so it always wins over page CSS. Do not re-declare nav, .nav-, .mob-, #ham or #mob rules inside a page. Markup lives in assets/nav.partial.html, stamped in by tools/sync-nav.py. ══════════════════════════════════════════════════════════════════════ */ /* ── bar ─────────────────────────────────────────────────────────────── */ nav#site-nav{ position:fixed;top:0;left:0;right:0;z-index:1000; background:rgba(10,10,15,.93); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,.07); transition:background .3s; } /* The inner rail. Every page renders it at exactly this width/position. */ nav#site-nav .nav-in{ max-width:1160px; /* literal, not var(--wrap): a page redefining --wrap must not move the nav */ margin:0 auto; padding:0 28px; height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; box-sizing:border-box; } /* ── logo ────────────────────────────────────────────────────────────── */ /* Fixed 48px slot: the logo occupies the same box whether the image loads or the text fallback shows, so a failed image can't change the bar's metrics. */ nav#site-nav .nav-logo{display:flex;align-items:center;height:48px;text-decoration:none;flex-shrink:0} nav#site-nav .nav-logo img{height:48px;width:auto;display:block} nav#site-nav .nav-logo-fallback{display:none;font-weight:800;font-size:1.15rem;line-height:1.2;color:#fff} /* ── link cluster ────────────────────────────────────────────────────── */ /* flex/justify-content are reset explicitly: several pages used to set flex:1 + justify-content:center here, which centred the cluster and made margin-left:auto a no-op. That was the ~280px page-to-page shift. */ nav#site-nav .nav-links{ display:flex; align-items:center; gap:28px; flex:0 0 auto; justify-content:flex-start; margin-left:auto; padding:0; } /* Pinned on every state so hover/active can never change text metrics. line-height is pinned too: pages inherit different body line-heights, which changed the link/button box height and shifted the row vertically. */ nav#site-nav .nav-links a, nav#site-nav .nav-link, nav#site-nav .nav-drop-trigger, nav#site-nav .nav-cta-secondary, nav#site-nav .nav-cta-primary, nav#site-nav .nav-drop-item{ line-height:1.2; } nav#site-nav .nav-links a, nav#site-nav .nav-link, nav#site-nav .nav-drop-trigger{ font-size:.875rem; font-weight:600; font-family:inherit; letter-spacing:normal; white-space:nowrap; color:#fff; text-decoration:none; } nav#site-nav .nav-link{padding:8px 0;transition:color .2s} nav#site-nav .nav-link:hover, nav#site-nav .nav-link:focus-visible, nav#site-nav .nav-link.nav-active, nav#site-nav .nav-link[aria-current="page"]{ color:#fff; /* colour-only: no weight/size/border change, so nothing reflows */ font-weight:600; } /* ── dropdowns ───────────────────────────────────────────────────────── */ nav#site-nav .nav-drop{position:relative} nav#site-nav .nav-drop-trigger{ display:inline-flex;align-items:center;gap:4px; background:none;border:none;cursor:pointer;padding:8px 0; transition:color .2s; } nav#site-nav .nav-drop-trigger:hover{color:#fff} nav#site-nav .nav-chevron{opacity:.7;transition:transform .2s;flex-shrink:0} nav#site-nav .nav-drop:hover .nav-chevron, nav#site-nav .nav-drop:focus-within .nav-chevron{transform:rotate(180deg)} nav#site-nav .nav-drop-panel{ position:absolute;top:calc(100% + 14px);left:50%; transform:translateX(-50%) translateY(-6px); background:rgba(10,10,15,.97); border:1px solid rgba(255,255,255,.07); border-radius:14px;padding:6px;min-width:230px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s,transform .18s; backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); z-index:100; } nav#site-nav .nav-drop-panel::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px} nav#site-nav .nav-drop:hover .nav-drop-panel, nav#site-nav .nav-drop:focus-within .nav-drop-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } nav#site-nav .nav-drop-item{ display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px; color:#fff;text-decoration:none;font-size:.82rem;font-weight:500; white-space:nowrap;transition:background .15s; } nav#site-nav .nav-drop-item:hover, nav#site-nav .nav-drop-item[aria-current="page"]{background:rgba(255,255,255,.07)} /* ── CTA cluster ─────────────────────────────────────────────────────── */ nav#site-nav .nav-cta-group{ display:flex;align-items:center;gap:10px; margin-left:auto;padding-left:20px; border-left:1px solid rgba(255,255,255,.10); } nav#site-nav .nav-cta-secondary{ display:inline-flex;align-items:center;padding:9px 16px; font-size:.875rem;font-weight:600;color:#fff; background:transparent;border:1px solid rgba(255,255,255,.20); border-radius:8px;text-decoration:none;font-family:'Inter',sans-serif; white-space:nowrap;transition:background .2s,border-color .2s; } nav#site-nav .nav-cta-secondary:hover{background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.40)} nav#site-nav .nav-cta-primary{ padding:9px 18px;font-size:.875rem;font-weight:600;border-radius:8px; text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center; } nav#site-nav .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0} /* ── scroll progress (homepage drives it via JS; inert elsewhere) ────── */ nav#site-nav #scroll-bar{ position:absolute;bottom:0;left:0;height:2px;width:0%; background:var(--g);transition:width .1s linear; } /* ── mobile ──────────────────────────────────────────────────────────── */ #ham{ display:none;background:none;border:1.5px solid rgba(255,255,255,.18); border-radius:8px;padding:7px 11px;cursor:pointer;color:#fff; font-size:1rem;font-family:'Inter',sans-serif; } #mob{ display:none;position:fixed;top:68px;left:0;right:0;bottom:0; background:rgba(10,10,15,.98);z-index:999;padding:28px; backdrop-filter:blur(24px);overflow-y:auto; } #mob.open{display:block} .mob-links>a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#fff;text-decoration:none;font-size:1rem;font-weight:500} .mob-drop{border-bottom:1px solid rgba(255,255,255,.05)} .mob-drop summary{padding:14px 0;color:#fff;font-size:1rem;font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;user-select:none} .mob-drop summary::-webkit-details-marker{display:none} .mob-drop summary::after{content:'\203a';font-size:1.2rem;line-height:1;opacity:.5;transition:transform .2s} .mob-drop[open] summary::after{transform:rotate(90deg)} .mob-drop-links{padding:4px 0 12px 16px} .mob-drop-links a{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.03);color:#fff;text-decoration:none;font-size:.925rem;font-weight:500} .mob-drop-links a:last-child{border-bottom:none} .mob-ctas{display:flex;flex-direction:column;gap:10px;margin-top:24px} .mob-ctas a{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:13px 28px;border-radius:12px;font-size:.975rem;font-weight:600;text-decoration:none;font-family:inherit} .mob-cta-ghost{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.32);color:#fff} .mob-cta-primary{background:linear-gradient(135deg,#A855F7 0%,#3B82F6 50%,#06D6E8 100%);border:none;color:#fff} @media(max-width:959px){ nav#site-nav .nav-links{display:none!important} #ham{display:flex!important;align-items:center;justify-content:center} } @media(min-width:960px){ #mob{display:none!important} }