/* ══════════════════════════════════════════════════════════════════════════ Attentus - shared top navigation. SINGLE SOURCE OF TRUTH for the nav bar styling across index / pricing / roadmap / about / privacy. Edit here; every page updates. Markup lives in tools/nav.partial.html (synced into each page by tools/build_nav.py). Behavior lives in /nav.js. Do not re-declare any of these selectors inline on a page. var(--x, ) fallbacks make this file self-sufficient even on pages that don't define the design tokens (e.g. pages relying on attentus.css). ══════════════════════════════════════════════════════════════════════════ */ /* Reserve the scrollbar gutter on every nav page so the centered fixed bar lands in the exact same place whether or not a page is tall enough to scroll - this is what stops the bar "shifting slightly" between pages. */ html { scrollbar-gutter: stable; } /* -- Bar ------------------------------------------------------------------- */ .topnav { position: fixed; top: 14px; left: 50%; right: auto; transform: translateX(-50%); /* Harden against any page-level `.topnav` rule (e.g. a global fadeInUp whose final keyframe is `transform: none`) clobbering the centering transform. */ animation: none; z-index: 100; width: min(1060px, calc(100% - 32px)); line-height: 1; display: flex; align-items: center; /* Fixed height + border-box so the bar is IDENTICAL on every page and cannot be grown by a page's inherited text metrics (e.g. attentus.css on /pricing gave a taller bar). 52 = brand(28 logo + 2*5 pad) + 2*6 topnav pad + 2*1 border. */ height: 52px; box-sizing: border-box; padding: 6px 6px 6px 14px; background: rgba(10, 12, 26, 0.36); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.28); backdrop-filter: blur(28px) saturate(2.6) brightness(1.14); -webkit-backdrop-filter: blur(28px) saturate(2.6) brightness(1.14); border-radius: 999px; box-shadow: 0 0 90px rgba(61,90,254,.55), 0 0 160px rgba(80,120,255,.22), 0 6px 24px rgba(0,0,0,.45), 0 20px 56px rgba(0,0,0,.3), inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(180,205,255,.95), inset 0 -18px 20px rgba(90,120,255,.3); transition: background .35s, box-shadow .35s, border-color .35s; } .topnav.scrolled { background: rgba(8, 10, 22, 0.58); border-top-color: rgba(255,255,255,.36); box-shadow: 0 0 110px rgba(61,90,254,.68), 0 0 200px rgba(80,120,255,.28), 0 6px 28px rgba(0,0,0,.56), 0 24px 64px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(180,205,255,.95), inset 0 -18px 20px rgba(90,120,255,.35); } /* -- Brand ----------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display, "Clash Display", "Space Grotesk", system-ui, -apple-system, sans-serif); font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; color: var(--text-primary, #eef2fb); padding: 5px 14px 5px 4px; flex-shrink: 0; white-space: nowrap; } .brand .logo { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 4px 16px -4px var(--accent-glow, rgba(61,90,254,.40)); } /* -- Desktop links --------------------------------------------------------- */ .navlinks { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; padding: 0 4px; } a.nl { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9px; font-size: .9rem; font-weight: 500; color: rgba(186,196,220,.78); white-space: nowrap; transition: background .14s, color .14s; } a.nl:hover { background: rgba(80,120,255,.1); color: #eef2fb; } a.nl.active { background: rgba(255,255,255,.08); color: #eef2fb; font-weight: 600; } /* -- CTAs ------------------------------------------------------------------ */ .navcta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 4px; } .nav-login { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 9px; font-size: .9rem; font-weight: 500; color: rgba(186,196,220,.78); transition: background .14s, color .14s; white-space: nowrap; } .nav-login:hover { background: rgba(255,255,255,.07); color: #eef2fb; } /* Reserve enough width for the signed-in "My account" label so that nav.js swapping "Sign in" → "My account" does NOT widen the bar and shove the centered links sideways on every load. Desktop only; the mobile drawer link is full-width. */ .navcta .nav-login { min-width: 112px; justify-content: center; } .nav-cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 19px 9px 16px; border-radius: 999px; font-family: var(--font-display, "Clash Display", "Space Grotesk", system-ui, -apple-system, sans-serif); font-size: .9rem; font-weight: 600; color: #fff; background: var(--gradient, linear-gradient(135deg, #6689FF 0%, #3D5AFE 100%)); box-shadow: 0 4px 18px var(--accent-glow, rgba(61,90,254,.40)); transition: transform .18s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .18s var(--ease, cubic-bezier(.16,1,.3,1)); white-space: nowrap; } .nav-cta svg { opacity: .95; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-glow, rgba(61,90,254,.40)); color: #fff; } @media (max-width: 960px) { .navlinks { display: none; } .nav-login { display: none; } } /* -- Hamburger toggle ------------------------------------------------------ */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; flex-shrink: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(61,90,254,.24); border-radius: 10px; cursor: pointer; padding: 7px; margin-left: 6px; } .nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--text-secondary, #b3bdd4); border-radius: 2px; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s, width .18s; } @media (max-width: 960px) { .nav-toggle { display: flex; } } body.mnav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.mnav-open .nav-toggle span:nth-child(2) { opacity: 0; width: 8px; } body.mnav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* -- Mobile drawer --------------------------------------------------------- */ .mobile-nav { position: fixed; z-index: 98; top: 80px; left: 16px; right: 16px; background: rgba(8,11,17,.96) padding-box, linear-gradient(145deg, rgba(80,120,255,.28) 0%, rgba(61,90,254,.2) 50%, rgba(80,120,255,.1) 100%) border-box; border: 1px solid transparent; border-radius: 20px; backdrop-filter: blur(32px) saturate(1.9); -webkit-backdrop-filter: blur(32px) saturate(1.9); padding: 10px; transform: translateY(-14px) scale(.97); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s; box-shadow: 0 24px 72px rgba(0,0,0,.65), 0 0 0 1px rgba(61,90,254,.1); } body.mnav-open .mobile-nav { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .mn-label { display: block; font-family: var(--font-display, "Clash Display", "Space Grotesk", system-ui, -apple-system, sans-serif); font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted, #6c7a98); padding: 10px 12px 5px; } a.mn-link { display: flex; align-items: center; color: var(--text-secondary, #b3bdd4); font-size: .97rem; font-weight: 500; padding: 10px 12px; border-radius: 10px; transition: background .14s, color .14s; } a.mn-link:hover, a.mn-link.active-page { background: rgba(255,255,255,.07); color: var(--text-primary, #eef2fb); } .mn-divider { height: 1px; background: rgba(255,255,255,.07); margin: 6px 10px; } .mn-cta { display: flex; gap: 8px; padding: 8px 2px 2px; } .mn-cta .nav-login { flex: 1; justify-content: center; padding: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; font-size: .92rem; color: var(--text-secondary, #b3bdd4); } .mn-cta .nav-login:hover { background: rgba(255,255,255,.1); color: var(--text-primary, #eef2fb); } .mn-cta .nav-cta { flex: 1; justify-content: center; border-radius: 12px; padding: 11px; font-size: .92rem; }