/* Unified "mainline" navbar for every public page. Loaded globally (guest layout head); active on any header tagged data-nav-variant="mainline". The pill floats, stays pinned on scroll, and tucks itself away when you scroll down and reappears when you scroll up. */ :root { --mlnav-primary: #0e2247; --mlnav-primary-ink: #ffffff; --mlnav-ink: #06152b; --mlnav-muted: #64748b; } .site-header[data-nav-variant="mainline"] { position: fixed; top: 1.25rem; left: 50%; width: min(90%, 700px); transform: translateX(-50%); margin: 0; z-index: 60; border: 1px solid rgb(15 23 42 / 0.12); border-radius: 999px; background: rgb(255 255 255 / 0.82); box-shadow: 0 12px 32px -24px rgb(15 23 42 / 0.45); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); color: var(--mlnav-ink); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, background 0.3s ease; } .site-header[data-nav-variant="mainline"][data-nav-hidden] { transform: translate(-50%, calc(-100% - 1.5rem)); opacity: 0; pointer-events: none; } .site-header[data-nav-variant="mainline"] .site-header__inner { margin-inline: 0; } .site-header[data-nav-variant="mainline"] .site-header__bar { min-height: 0; height: auto; padding: 0.6rem 1.4rem; gap: 1rem; } /* Logo: compact mark on a white circle so it reads on light and dark pills. */ .site-header[data-nav-variant="mainline"] .logo-mark-img { width: 1.25rem; height: 1.25rem; object-fit: contain; box-sizing: content-box; padding: 0.35rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgb(15 23 42 / 0.14); transition: box-shadow 0.2s ease; } .site-header[data-nav-variant="mainline"] .logo__name { font-family: 'DM Sans', var(--font-sans), sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .site-header[data-nav-variant="mainline"] .primary-nav { gap: 0.35rem; } .site-header[data-nav-variant="mainline"] .nav-link { padding: 0.45rem 0.8rem; border-radius: 999px; color: var(--mlnav-ink); font-family: 'DM Sans', var(--font-sans), sans-serif; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; transition: color 0.2s ease, background 0.2s ease; } .site-header[data-nav-variant="mainline"] .nav-link:hover { background: #f1f1ef; color: var(--mlnav-ink); } .site-header[data-nav-variant="mainline"] .nav-link.is-active { background: var(--mlnav-primary); color: var(--mlnav-primary-ink); } .site-header[data-nav-variant="mainline"] .header-tools { gap: 0.7rem; } /* Theme toggle: one icon at a time, sitting side by side, never stacked. Light mode shows the moon (switch to dark); dark mode shows the sun (switch to light). The .dark class alone drives visibility, so it stays correct even before the script runs. */ .header-tool--theme { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; width: 2.25rem; height: 2.25rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--mlnav-ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .header-tool--theme:hover { background: #f1f1ef; } .header-tool--theme svg { width: 1.05rem; height: 1.05rem; display: block; } html:not(.dark) .header-tool--theme [data-theme-icon='light'] { display: none; } html.dark .header-tool--theme [data-theme-icon='dark'] { display: none; } /* Dark mode: the navbar pill + a safe page base. Landing page components are dark-styled in pages/mainline.css under .mainline-page. */ html.dark { color-scheme: dark; } html.dark body { background-color: #0e0f11; color: #f2f2f0; } html.dark .site-header[data-nav-variant="mainline"] { background: rgb(17 18 20 / 0.8); border-color: rgb(255 255 255 / 0.09); color: #f4f4f0; box-shadow: 0 12px 32px -24px rgb(0 0 0 / 0.8); } html.dark .site-header[data-nav-variant="mainline"] .logo__name { color: #f4f4f0; } html.dark .site-header[data-nav-variant="mainline"] .logo-mark-img { box-shadow: 0 1px 5px rgb(0 0 0 / 0.6); } html.dark .site-header[data-nav-variant="mainline"] .nav-link { color: #d9dadd; } html.dark .site-header[data-nav-variant="mainline"] .nav-link:hover { background: rgb(255 255 255 / 0.08); color: #fff; } html.dark .site-header[data-nav-variant="mainline"] .nav-link.is-active { background: var(--mlnav-primary); color: var(--mlnav-primary-ink); } html.dark .site-header[data-nav-variant="mainline"] .header-tool--theme { color: #d9dadd; } html.dark .site-header[data-nav-variant="mainline"] .header-tool--theme:hover { background: rgb(255 255 255 / 0.08); color: #fff; } /* Clearance so the floating pill never sits on top of content on pages whose first section has no shell of its own (blog, legal, for-*, pricing…). */ .page__main:not(:has(.mainline-reference-shell)):not(:has(.auth-mainline)) { padding-top: 6.5rem; } @media (max-width: 640px) { .site-header[data-nav-variant="mainline"] { top: 0.75rem; width: min(92%, 700px); } .site-header[data-nav-variant="mainline"] .site-header__bar { padding-inline: 0.9rem; } .site-header[data-nav-variant="mainline"] .header-tools__optional { display: none; } .page__main:not(:has(.mainline-reference-shell)):not(:has(.auth-mainline)) { padding-top: 4.5rem; } } @media (prefers-reduced-motion: reduce) { .site-header[data-nav-variant="mainline"] { transition: none; } }