/* Sticky pill navigation + the shared brand lockup (footer reuses .brand*, overriding in footer.css). */ /* wraps the nav markup (see assets/js/site-nav.js). display:contents removes its own box so the inner .nav stays a layout child of — keeping position:sticky working relative to page scroll, not the wrapper. */ site-nav { display: contents; } .nav { position: sticky; top: 16px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(var(--container), calc(100% - 2 * var(--gutter))); margin: 16px auto 0; padding: 13px 22px; border-radius: 20px; background: rgba(18, 17, 16, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 48px rgba(0, 0, 0, 0.38); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* gradient border ring only (fill stays untouched) */ .nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.22) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .brand-mark { width: 21px; height: 21px; border-radius: 8px; box-shadow: none; } .brand-text { color: #fff; font-size: 17px; font-weight: 600; } .nav-row, .nav-links { display: flex; align-items: center; } .nav-row { flex: 1; justify-content: space-between; gap: 20px; } .nav-links { gap: clamp(18px, 2.4vw, 34px); margin: 0 auto; } .nav-link { color: #9b9794; font-size: 15px; font-weight: 500; transition: color 160ms ease; } .nav-buy { display: inline-flex; align-items: center; gap: 8px; color: #ededed; font-size: 15px; font-weight: 500; transition: color 160ms ease; } .nav-buy:hover { color: #fff; } .nav-buy .apple { width: 15px; height: 15px; } .nav-link:hover, .nav-link.active { color: #ededed; } @media (max-width: 720px) { .nav { top: 12px; width: min(100% - 28px, 1120px); margin-top: 12px; padding: 10px 12px; } .nav-links { display: none; } .brand-text { font-size: 18px; } .nav-row { flex: 0 0 auto; } } @media (max-width: 420px) { .brand-text { display: none; } /* keep nav CTA compact even when other buttons go full-width */ .nav .btn { width: auto; } }