/* ════════════════════════════════════════════════════════════════════ SHARED NAV STYLES — single source of truth for the top nav. Loaded via on every page. Companion files: partials/nav.html (markup), partials/nav-loader.js (injection + i18n/theme/lang/stars wiring). ════════════════════════════════════════════════════════════════════ */ .nav { position: fixed; inset: 0 0 auto 0; height: 64px; /* No bottom border — the backdrop blur alone is enough to separate the nav from page content. */ border-bottom: none; background: rgba(9, 10, 11, 0.65); backdrop-filter: blur(18px) saturate(1.2); z-index: 100; } html[data-theme="light"] .nav { background: rgba(247, 245, 240, 0.65) !important; border-bottom: none !important; } .nav-inner { width: min(100% - 2 * var(--gutter), var(--max)); height: 100%; margin: 0 auto; display: flex; align-items: center; /* flex-start + auto margins (below) keep the VIBE COMPANY + links cluster centered while logo pins left and the actions pin right — same look as the old 3-child space-between, but now VIBE COMPANY is a standalone child so it can stay in the bar while the rest collapses on mobile. */ justify-content: flex-start; } /* Desktop: the drawer "dissolves" so its links + actions lay out directly in the bar (exactly as before). The burger is hidden. Auto margins on the event and the actions group re-create the centered cluster + right-pinned actions. */ .nav-drawer { display: contents; } .nav-burger { display: none; } .nav-event { margin-left: auto; margin-right: 28px; } .nav-right { margin-left: auto; } /* Hamburger button (shown only on mobile via the media query below). */ .nav-burger { flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; } .nav-burger__line { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--text); transition: transform 0.22s ease, opacity 0.18s ease; } .nav.open .nav-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav.open .nav-burger__line:nth-child(2) { opacity: 0; } .nav.open .nav-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Dim scrim behind the open mobile drawer. Created on by nav-loader.js (NOT inside .nav, whose backdrop-filter would otherwise clip a fixed child to the 64px bar). z-index sits below the nav (100) but above page content, so the bar + drawer stay bright while the page behind dims. Tapping it closes the menu. Hidden on desktop. */ .nav-scrim { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .nav-scrim.is-open { opacity: 1; pointer-events: auto; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .nav-logo img { height: 24px; width: auto; display: block; } html[data-theme="light"] .nav-logo img { filter: invert(1); } .nav-logo span { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); text-decoration: none; transition: color 0.2s ease; } .nav-links a:hover, .nav-links a.is-current { color: var(--text); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-github { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; padding: 0 10px; transition: opacity .18s ease; } .nav-github svg { width: 16px; height: 16px; } .nav-github:hover { opacity: 0.7; } .nav-github .js-github-stars { font-family: var(--font-mono); font-weight: 600; } /* The "Star on Github" label is only used in the mobile drawer (button form); on desktop the nav shows the star count instead. */ .nav-github__label { display: none; } .lang-toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: transparent; border: 0; color: var(--text); cursor: pointer; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; transition: background .18s ease; } .lang-toggle:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="light"] .lang-toggle:hover { background: rgba(0, 0, 0, 0.05); } .lang-toggle__opt { opacity: 0.45; transition: opacity .18s ease; } .lang-toggle__opt.is-active { opacity: 1; } .lang-toggle__sep { opacity: 0.3; } .theme-toggle { width: 36px; height: 36px; display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--text); cursor: pointer; margin: 0 12px 0 4px; padding: 0; transition: background .18s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.05); } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle__sun { display: none; } html[data-theme="light"] .theme-toggle__moon { display: none; } html[data-theme="light"] .theme-toggle__sun { display: block; } /* Event button — outlined chip style, blends with the page palette but keeps the KV's signature pulsing radar icon and mono label so it still reads as a distinct event portal. !important on color/typography defeats the parent `.nav-links a` rule (specificity 0,1,1 > .nav-event's 0,1,0) which would otherwise repaint the label as muted gray at 12px. */ .nav-event { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: transparent; color: var(--text) !important; font-family: var(--font-mono); font-size: 11px !important; font-weight: 700; letter-spacing: 0.14em !important; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line); transition: border-color 0.2s ease, background 0.2s ease; } .nav-event:hover { border-color: rgba(126, 184, 200, 0.55); background: rgba(126, 184, 200, 0.06); } .nav-event__radar { width: 14px; height: 14px; color: #7eb8c8; flex-shrink: 0; overflow: visible; /* let the ping ring expand past the SVG box without clipping */ } /* Rotating sweep beam — like a radar's clock-hand sweeping the full circle. */ .nav-event__sweep { transform-origin: 8px 8px; /* SVG user units; default transform-box: view-box anchors this to the radar centre */ animation: nav-radar-sweep 2.4s linear infinite; } @keyframes nav-radar-sweep { to { transform: rotate(360deg); } } /* Sonar ping — small ring expands outward from the centre and fades, repeating. */ .nav-event__ping { transform-origin: 8px 8px; transform: scale(0.5); opacity: 0; animation: nav-radar-ping 2.4s ease-out infinite; } @keyframes nav-radar-ping { 0% { transform: scale(0.5); opacity: 0.85; } 80% { opacity: 0; } 100% { transform: scale(5.5); opacity: 0; } } html[data-theme="light"] .nav-event { border-color: rgba(126, 184, 200, 0.55) !important; /* cyan accent border, only in light mode */ } html[data-theme="light"] .nav-event:hover { border-color: rgba(126, 184, 200, 0.85) !important; /* deeper cyan on hover */ background: rgba(126, 184, 200, 0.1); } .nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .nav-cta:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } /* Light theme: invert Try Now CTA → solid dark filled button */ html[data-theme="light"] .nav-cta { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; } @media (max-width: 720px) { /* Bar keeps only: logo (left) + VIBE COMPANY + burger (right). */ .nav-event { margin-right: 12px; } .nav-burger { display: flex; } .nav-scrim { display: block; } /* present (fades in via .is-open) on mobile only */ /* The drawer becomes a dropdown panel below the 64px bar. */ .nav-drawer { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; padding: 8px 0 16px; background: rgba(9, 10, 11, 0.96); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-top: 1px solid var(--line); } html[data-theme="light"] .nav-drawer { background: rgba(247, 245, 240, 0.97); } .nav.open .nav-drawer { display: flex; } /* When open, make the bar itself opaque (matching the drawer) so the dim scrim sitting BEHIND the translucent bar doesn't bleed through and gray it out — only the page below the bar+drawer should darken. */ .nav.open { background: rgba(9, 10, 11, 0.96); } html[data-theme="light"] .nav.open { background: rgba(247, 245, 240, 0.97) !important; } /* Links stack full-width. */ .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav-links a { padding: 14px var(--gutter); font-size: 13px; } /* Actions stack full-width, left-aligned; GitHub returns inside the drawer. */ .nav-right { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin-left: 0; padding: 10px var(--gutter) 0; } /* GitHub renders as a full-width outlined button (mirrors the floating CTA's "Star on Github") instead of the inline star count. */ .nav-github { display: inline-flex; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 6px; padding: 0 16px; /* Dark outline matching the bottom floating "Star on Github" button (the light-theme .btn border); --line is too faint here. Mobile is light-only. */ border: 1px solid rgba(0, 0, 0, 0.32); } .nav-github .js-github-stars { display: none; } .nav-github__label { display: inline; } /* Both drawer buttons share the same 44px height as the floating CTA pair. */ .nav-cta { width: 100%; height: 44px; } .lang-toggle { margin: 0; } /* Mobile is light-only — hide the dark/light theme toggle. */ .theme-toggle { display: none; } }