diff --git a/marketing-site/styles/globals.css b/marketing-site/styles/globals.css index c0a1c9e..4406024 100644 --- a/marketing-site/styles/globals.css +++ b/marketing-site/styles/globals.css @@ -109,16 +109,28 @@ h1, h2, h3 { text-wrap: balance; margin: 0; } } .nav.scrolled { border-bottom-color: var(--color-line); box-shadow: var(--sh-sm); } .nav-in { + position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } -.logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 900; font-size: 21px; letter-spacing: -0.02em; } +.logo { + display: flex; align-items: baseline; gap: 2px; + font-family: var(--font-display); font-weight: 900; font-size: 21px; letter-spacing: -0.02em; + flex: none; position: relative; z-index: 1; +} .logo b { color: var(--color-pine); } .logo .dot { color: var(--color-muted); font-weight: 500; } -.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 600; color: var(--color-muted); } +.nav-links { + display: flex; align-items: center; gap: 30px; + font-size: 14.5px; font-weight: 600; color: var(--color-muted); + position: absolute; left: 50%; transform: translateX(-50%); +} .nav-links a { transition: color 0.18s; } .nav-links a:hover { color: var(--color-ink); } -.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; } +.nav-actions { + display: flex; align-items: center; gap: 10px; + flex: none; margin-left: auto; position: relative; z-index: 1; +} .nav-cta { font-size: 14px; padding: 10px 18px; } /* mobile hamburger toggle (hidden on desktop) */