Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve nav overlapping and ghosting issues

Browse Source
This commit is contained in:
Johan Samudio
2026-03-10 12:02:32 -05:00
parent 66e56f6804
commit 68a40a1c36
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/views/LandingView.vue
View File

@ -202,36 +202,41 @@ const scrollToInstall = () =>
/* ─── NAV ──────────────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 160px; display: flex; align-items: center; padding: 0 24px;
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
height: 140px; display: flex; align-items: center; padding: 0 24px;
transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1),
background .4s cubic-bezier(0.4, 0, 0.2, 1),
height .4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, background, height;
height .4s cubic-bezier(0.4, 0, 0.2, 1),
opacity .3s ease,
visibility .3s ease;
will-change: transform, background, height, opacity;
}
.nav--hidden {
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.nav--solid {
background: rgba(255,255,255,.95);
background: rgba(255,255,255,.98);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
height: 100px;
height: 80px;
box-shadow: 0 4px 30px rgba(0,0,0,0.05);
}
.nav__wrap {
max-width: 1100px; margin: 0 auto; width: 100%;
display: flex; justify-content: space-between; align-items: center;
}
.nav__logo {
height: 150px;
height: 130px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav--solid .nav__logo {
height: 80px;
height: 60px;
}
.nav__logo:hover { transform: scale(1.08) rotate(-2deg); }