Split Perspective Nav

HTML_STRUCTURE

<nav class='bh-nav-v3-split'><div class='bh-v3-logo'>VOID_CORP</div><div class='bh-v3-links'><a href='#' class='active'>ROOT</a><a href='#'>VAULT</a><a href='#'>SHARD</a><button class='bh-v3-action'>[LOGIN]</button></div></nav>

CSS_STYLING

.bh-nav-v3-split { display: flex; justify-content: space-between; align-items: stretch; background: #000; border: 2px solid #fff; width: 100%; height: 60px; overflow: hidden; } .bh-v3-logo { background: #fff; color: #000; display: flex; align-items: center; padding: 0 25px; font-weight: 900; font-size: 14px; letter-spacing: -1px; } .bh-v3-links { display: flex; align-items: center; } .bh-v3-links a { color: #fff; text-decoration: none; font-size: 11px; font-weight: 900; padding: 0 20px; height: 100%; display: flex; align-items: center; border-left: 1px solid #222; transition: 0.3s; } .bh-v3-links a:hover { background: #111; color: #00ff88; } .bh-v3-links a.active { background: #00ff88; color: #000; } .bh-v3-action { background: #ff0055; color: #fff; border: none; padding: 0 25px; font-weight: 900; font-size: 11px; cursor: pointer; height: 100%; transition: 0.3s; border-left: 1px solid #fff; } .bh-v3-action:hover { background: #fff; color: #000; } @media (max-width: 600px) { .bh-v3-links a:not(.active) { display: none; } .bh-v3-logo { padding: 0 15px; font-size: 12px; } }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.