/* ── Briefly Global Nav ────────────────────────────────────────────────── Sticky brand-anchor header shared across all public + app surfaces. Context-aware: public routes show "Start free", authed routes show "Open app". Mobile: hamburger menu, wordmark + CTA always visible. Does NOT own page-level layout — only the 64px/56px header strip. ──────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap'); /* ── Variables (fall back to inline values if theme.css vars not loaded) ── */ :root { --nav-bg: rgba(8, 8, 15, 0.94); --nav-border: rgba(255,255,255,0.07); --nav-border-scroll: rgba(255,255,255,0.12); --nav-shadow: 0 1px 32px rgba(0,0,0,0.5); --nav-text: #a1a1b0; --nav-text-hover: #f0f0f5; --nav-logo-color: #f4f4f5; --nav-accent: #7c6aff; --nav-accent-hover: #9a8aff; --nav-height-desktop: 64px; --nav-height-mobile: 56px; --nav-z: 9999; } /* ── Base ── */ .brf-nav { position: sticky; top: 0; z-index: var(--nav-z); height: var(--nav-height-desktop); background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--nav-border); transition: border-color 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; padding: 0 28px; gap: 0; } /* Shadow on scroll — toggled via JS adding .scrolled class to */ body.scrolled .brf-nav { border-color: var(--nav-border-scroll); box-shadow: var(--nav-shadow); } /* ── Inner layout ── */ .brf-nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0 auto; } /* ── Wordmark ── */ .brf-nav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--nav-logo-color); flex-shrink: 0; transition: opacity 0.15s; } .brf-nav-logo:hover { opacity: 0.85; } .brf-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nav-accent); box-shadow: 0 0 10px var(--nav-accent); flex-shrink: 0; } /* ── Center nav links ── */ .brf-nav-links { display: flex; align-items: center; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); } .brf-nav-links a { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: var(--nav-text); text-decoration: none; padding: 6px 12px; border-radius: 6px; transition: color 0.15s, background 0.15s; white-space: nowrap; } .brf-nav-links a:hover { color: var(--nav-text-hover); background: rgba(255,255,255,0.05); } .brf-nav-links a.active { color: var(--nav-text-hover); } /* ── For Teams link — highlighted ── */ .brf-nav-teams-link { color: var(--nav-accent) !important; font-weight: 600 !important; } .brf-nav-teams-link:hover { color: var(--nav-accent-hover) !important; background: rgba(124, 106, 255, 0.08) !important; } /* ── Right side ── */ .brf-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ── Primary CTA button ── */ .brf-nav-cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #fff; background: var(--nav-accent); padding: 8px 18px; border-radius: 7px; text-decoration: none; transition: background 0.15s, transform 0.1s; letter-spacing: 0.01em; border: none; cursor: pointer; } .brf-nav-cta:hover { background: var(--nav-accent-hover); transform: translateY(-1px); } .brf-nav-cta:active { transform: translateY(0); } /* ── Hamburger (mobile only) ── */ .brf-nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; transition: background 0.15s; } .brf-nav-hamburger:hover { background: rgba(255,255,255,0.07); } .brf-nav-hamburger span { display: block; width: 20px; height: 2px; background: var(--nav-text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease; } /* Open state */ .brf-nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .brf-nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; } .brf-nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile drawer ── */ .brf-nav-drawer { display: none; position: fixed; top: var(--nav-height-mobile); left: 0; right: 0; background: rgba(8,8,15,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--nav-border); padding: 16px 24px 24px; z-index: calc(var(--nav-z) - 1); flex-direction: column; gap: 4px; animation: navDrawerSlide 0.18s ease; } .brf-nav-drawer.open { display: flex; } @keyframes navDrawerSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .brf-nav-drawer a { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; color: var(--nav-text); text-decoration: none; padding: 11px 12px; border-radius: 8px; transition: color 0.15s, background 0.15s; } .brf-nav-drawer a:hover { color: var(--nav-text-hover); background: rgba(255,255,255,0.06); } .brf-nav-drawer a.brf-nav-cta { margin-top: 8px; justify-content: center; font-size: 15px; padding: 12px 18px; } /* ── Responsive ── */ @media (max-width: 768px) { .brf-nav { height: var(--nav-height-mobile); padding: 0 18px; } .brf-nav-links { display: none; } .brf-nav-right .brf-nav-cta { font-size: 12px; padding: 7px 14px; } .brf-nav-hamburger { display: flex; } } /* ── Scroll shadow init ── */