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