/* ═══════════════════════════════════════════════════ nav.css — VS Legacy Firms ARCHITECTURE:

z-index:100 → .navbar (bar + desktop links) z-index:9999 → .mobile-overlay (separate element, escapes backdrop-filter stacking context) ═══════════════════════════════════════════════════ */ /* ────────────────────────────── NAVBAR BAR ────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0,0,0,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.07); transition: background 0.3s ease, box-shadow 0.3s ease; } .navbar.scrolled { background: rgba(0,0,0,0.98); box-shadow: 0 2px 32px rgba(0,0,0,0.9); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Logo */ .nav-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1; gap: 1px; flex-shrink: 0; } .nav-logo-top { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; transition: color 0.2s; } .nav-logo-bottom { font-family: var(--font-display); font-size: 0.84rem; font-weight: 300; font-style: italic; color: var(--accent); } .nav-logo:hover .nav-logo-top { color: rgba(255,255,255,0.72); } .nav-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* Desktop nav */ .nav-desktop { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-link { font-family: var(--font-sans); font-size: 0.77rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-decoration: none; position: relative; padding: 0.3rem 0; transition: color 0.2s; white-space: nowrap; } .nav-link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.22s ease; } .nav-link:hover, .nav-link.active { color: #fff; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } .nav-cta { padding: 0.48rem 1.2rem !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; font-family: var(--font-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.15em !important; transition: background 0.2s, color 0.2s !important; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--accent) !important; color: #fff !important; } /* Hamburger */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 44px; height: 44px; padding: 8px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; } .hamburger span { display: block; height: 2px; background: #fff; border-radius: 1px; transform-origin: right center; transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease, width 0.22s ease; } .hamburger span:nth-child(1) { width: 26px; } .hamburger span:nth-child(2) { width: 18px; } .hamburger span:nth-child(3) { width: 26px; } .hamburger.active span:nth-child(1) { width: 26px; transform: translateY(7px) rotate(-45deg); } .hamburger.active span:nth-child(2) { opacity: 0; width: 0; } .hamburger.active span:nth-child(3) { width: 26px; transform: translateY(-7px) rotate(45deg); } .hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } /* ═══════════════════════════════════════════════════ MOBILE OVERLAY — PREMIUM 3-ZONE LAYOUT ───────────────────────────────────────────────── Zone 1 (top): logo + close button Zone 2 (middle): numbered nav links — flex-grow fills space Zone 3 (bottom): CTA + social + tagline ═══════════════════════════════════════════════════ */ .mobile-overlay { /* Hidden */ display: none; /* Full viewport, body-level — escapes stacking context */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; /* Layout: 3 zones stacked */ flex-direction: column; /* Base colour + subtle grain overlay */ background: #080808; /* Slide from right */ transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } /* Accent left border */ .mobile-overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient( to bottom, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100% ); opacity: 0.6; } .mobile-overlay.open { display: flex; transform: translateX(0); } /* ─── Zone 1: TOP BAR ─── */ .ov-top { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 64px; /* same as navbar for alignment */ flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .ov-logo { display: flex; flex-direction: column; line-height: 1; gap: 1px; } .ov-logo-first { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; } .ov-logo-last { font-family: var(--font-display); font-size: 0.82rem; font-weight: 300; font-style: italic; color: var(--accent); } /* Close button */ .ov-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; cursor: pointer; color: rgba(255,255,255,0.6); transition: background 0.2s, color 0.2s, border-color 0.2s; flex-shrink: 0; } .ov-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .ov-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Accent divider line */ .ov-line { height: 1px; background: linear-gradient(to right, var(--accent) 0%, rgba(254,73,28,0.2) 60%, transparent 100%); opacity: 0.5; flex-shrink: 0; } /* ─── Zone 2: NAV LIST (grows to fill space) ─── */ .ov-nav { flex: 1; display: flex; align-items: center; padding: 0 1.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ov-list { list-style: none; width: 100%; padding: 1rem 0; } .ov-item { opacity: 0; transform: translateX(24px); transition: opacity 0.3s ease, transform 0.3s ease; } /* Stagger in */ .mobile-overlay.open .ov-item:nth-child(1) { opacity:1; transform:none; transition-delay:0.06s; } .mobile-overlay.open .ov-item:nth-child(2) { opacity:1; transform:none; transition-delay:0.11s; } .mobile-overlay.open .ov-item:nth-child(3) { opacity:1; transform:none; transition-delay:0.16s; } .mobile-overlay.open .ov-item:nth-child(4) { opacity:1; transform:none; transition-delay:0.21s; } .mobile-overlay.open .ov-item:nth-child(5) { opacity:1; transform:none; transition-delay:0.26s; } .ov-link { display: flex; align-items: baseline; gap: 1rem; text-decoration: none; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden; transition: padding-left 0.25s ease; } /* Hover accent bar */ .ov-link::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--accent); transform: translateY(-50%); transition: width 0.25s ease; } .ov-link:hover { padding-left: 14px; } .ov-link:hover::before { width: 8px; } .ov-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .ov-num { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.14em; color: rgba(254,73,28,0.5); flex-shrink: 0; line-height: 1; margin-top: 0.35rem; transition: color 0.2s; } .ov-link:hover .ov-num { color: var(--accent); } .ov-label { font-family: var(--font-sans); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; color: rgba(255,255,255,0.35); transition: color 0.2s; line-height: 1.15; } .ov-link:hover .ov-label { color: #fff; } /* ─── Zone 3: BOTTOM BAR ─── */ .ov-bottom { flex-shrink: 0; padding: 1.25rem 1.5rem 1.75rem; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 1rem; } /* CTA button */ .ov-cta { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--accent); color: #fff !important; padding: 0.9rem 1.5rem !important; font-family: var(--font-mono) !important; font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; text-decoration: none; border: none !important; width: 100%; justify-content: center; transition: background 0.2s ease, transform 0.15s ease !important; } .ov-cta:hover { background: #d93a12 !important; transform: translateY(-1px); } .ov-cta svg { transition: transform 0.2s ease; } .ov-cta:hover svg { transform: translateX(3px); } /* Social row */ .ov-social { display: flex; gap: 0.75rem; } .ov-social-link { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3); text-decoration: none; padding: 0.45rem 0.85rem; border: 1px solid rgba(255,255,255,0.08); transition: color 0.2s, border-color 0.2s, background 0.2s; } .ov-social-link:hover { color: var(--accent); border-color: rgba(254,73,28,0.3); background: rgba(254,73,28,0.05); } /* Tagline */ .ov-tagline { font-family: var(--font-display); font-size: 0.78rem; font-style: italic; color: rgba(255,255,255,0.15); letter-spacing: 0.04em; margin: 0; line-height: 1; } .ov-tagline em { color: rgba(254,73,28,0.35); } /* Decorative bg mark */ .ov-bg-mark { position: absolute; right: -0.5rem; bottom: 5rem; font-family: var(--font-sans); font-size: clamp(6rem, 30vw, 10rem); font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(254,73,28,0.04); pointer-events: none; user-select: none; line-height: 1; letter-spacing: -0.05em; z-index: -1; } /* ─── Responsive visibility ─── */ @media (max-width: 768px) { .hamburger { display: flex; } .nav-desktop { display: none; } } @media (min-width: 769px) { .mobile-overlay { display: none !important; } }