/* Shared glass burger nav for the marketing pages. Linked LAST in so it overrides each page's own inline .nav / .nav-links rules. (index.html keeps its own inline burger nav and does not load this file.) Tuned for the 64px nav. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px; padding: 0 clamp(18px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; background: #ffffff !important; border-bottom: 1px solid var(--md-glass-hairline, rgba(10,12,30,0.08)) !important; } .nav-right { display: flex; align-items: center; gap: 14px; } .nav-in { font-size: 0.875rem; font-weight: 500; color: var(--text-muted, #4A4A5E); text-decoration: none; } .nav-in:hover { color: #0A0A14; } /* Burger button */ .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #ffffff; border: 1px solid var(--md-glass-hairline, rgba(10,12,30,0.10)); border-radius: 14px; font-size: 1.25rem; color: #0A0A14; cursor: pointer; line-height: 1; transition: background .18s, box-shadow .18s, transform .12s; } .nav-hamburger:hover { background: #fff; box-shadow: 0 2px 8px rgba(10,12,30,0.12); } .nav-hamburger:active { transform: scale(.96); } /* Glass dropdown panel (body sibling → viewport-fixed) */ .nav-links { list-style: none; position: fixed; top: 74px; right: 22px; width: 320px; max-width: calc(100vw - 32px); display: none; flex-direction: column; gap: 2px; margin: 0; padding: 14px; background: var(--md-glass-bg-strong, rgba(255,255,255,0.9)); -webkit-backdrop-filter: var(--md-glass-blur, saturate(180%) blur(20px)); backdrop-filter: var(--md-glass-blur, saturate(180%) blur(20px)); border: 1px solid var(--md-glass-border, rgba(255,255,255,0.55)); border-radius: 22px; box-shadow: var(--md-e3, 0 8px 24px rgba(10,12,30,0.16)); z-index: 205; animation: navMenuIn .22s cubic-bezier(.05,.7,.1,1); } .nav-links.open { display: flex; } @keyframes navMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .nav-menu-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8A8A9E; padding: 12px 12px 4px; } .nav-links a { display: flex; align-items: center; gap: 11px; font-size: 0.9375rem; font-weight: 500; color: #0A0A14; text-decoration: none; padding: 10px 12px; border-radius: 12px; transition: background .15s, color .15s; } .nav-links a i { width: 18px; text-align: center; color: #8A8A9E; transition: color .15s; } .nav-links a:hover { background: rgba(10,12,30,0.06); color: var(--primary, #0A2240); } .nav-links a:hover i { color: var(--primary, #0A2240); } .nav-menu-divider { height: 1px; background: rgba(10,12,30,0.08); margin: 8px 4px; } .nav-menu-cta { margin-top: 8px; justify-content: center !important; background: var(--primary, #0A2240); color: #fff !important; font-weight: 600 !important; border-radius: 999px !important; } .nav-menu-cta:hover { background: #071829; color: #fff !important; } .nav-menu-close { display: none; align-self: flex-end; background: none; border: none; font-size: 1.25rem; color: #8A8A9E; cursor: pointer; padding: 2px 8px; line-height: 1; } @media (max-width: 768px) { .nav-links { top: 64px; right: 0; left: 0; width: 100%; max-width: 100%; border-radius: 0 0 22px 22px; padding: 12px 14px 18px; } .nav-menu-close { display: block; } }