.fade-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding-top: env(safe-area-inset-top); transition: opacity 0.4s ease; -webkit-transform: translateZ(0); transform: translateZ(0); } .nav-hidden { opacity: 0; pointer-events: none; } .navbar .nav-link:hover { color: var(--bs-primary); transition: color 0.25s ease-in-out; } .navbar .nav-link.active, .navbar .nav-link[aria-current="page"] { color: var(--bs-primary); } /* Scale effect only on desktop where the menu is horizontal and has room. */ @media (min-width: 992px) { .navbar .nav-link:hover { transform: scale(1.2); transition: transform 0.5s ease-in-out, color 0.25s ease-in-out; } } /* ── Mobile menu ─────────────────────────────────────────────────── */ /* Cleaner toggler button: remove Bootstrap's default border/box, replace with three clean lines drawn in CSS. */ .navbar-toggler { border: none; background: transparent; padding: 6px; width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; box-shadow: none !important; outline: none !important; } .navbar-toggler-icon { display: none; } /* Draw the three bars manually so we can control colour via currentColor */ .navbar-toggler::before, .navbar-toggler::after, .navbar-toggler span.toggler-bar { content: ''; display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: opacity 0.2s ease; } /* Colour inheritance per theme */ .navbar-k-light .navbar-toggler { color: #000; } .navbar-k-dark .navbar-toggler { color: #fff; } /* ── Mobile right-side drawer ────────────────────────────────────── */ /* The floating tab – appended to by fade-nav.js so position:fixed is viewport-relative (avoids the transform stacking context on .fade-nav) */ .nav-drawer-tab { display: none; position: fixed; right: 0; top: 80%; transform: translateY(-50%); z-index: 1050; width: 28px; height: 72px; border: none; border-radius: 10px 0 0 10px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; cursor: pointer; transition: width 0.25s ease, border-radius 0.25s ease; } .nav-drawer-tab span { display: block; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } /* Animate to ✕ when open */ .nav-drawer-tab.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-drawer-tab.open span:nth-child(2) { opacity: 0; } .nav-drawer-tab.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-drawer-tab-light { background: #000; color: #fff; } .nav-drawer-tab-dark { background: #fff; color: #000; } /* Backdrop */ .nav-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1038; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .nav-drawer-backdrop.active { display: block; } /* Drawer panel – appended to by fade-nav.js, fully independent of the navbar element and its stacking context. Width auto-fits to content. */ .nav-drawer { position: fixed; top: 0; right: -100%; width: max-content; min-width: 160px; max-width: 75vw; height: 100dvh; z-index: 1045; overflow-y: auto; display: flex; flex-direction: column; padding: 2.5rem 2rem 3rem 1.75rem; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-drawer.open { right: 0; } .nav-drawer-light { background: #fff; color: #000; } .nav-drawer-dark { background: #1a1a1a; color: #fff; } /* Cloned logo at the top of the drawer */ .nav-drawer-brand { display: flex; align-items: center; font-size: 1.25rem; font-weight: 400; line-height: 1.5; padding: 0.3125rem 0; margin-right: 1rem; margin-bottom: 3rem; white-space: nowrap; text-decoration: none; } .nav-drawer-light .nav-drawer-brand { color: #000; } .nav-drawer-dark .nav-drawer-brand { color: #fff; } /* Link list – pushed to the bottom via margin-top:auto in flex column */ .nav-drawer-list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .nav-drawer-link { display: block; padding: 0.6rem 0; font-size: 1.05rem; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .nav-drawer-light .nav-drawer-link { color: #000; } .nav-drawer-dark .nav-drawer-link { color: #fff; } .nav-drawer-link:hover { color: var(--bs-primary); } .nav-drawer-link.active { color: var(--bs-primary); } /* ── Mobile overrides ────────────────────────────────────────────── */ /* The top bar uses translateY to hide on scroll, since opacity is locked */ @media (max-width: 991.98px) { .fade-nav { opacity: 1 !important; pointer-events: auto !important; transition: transform 0.3s ease; } } @media (max-width: 991.98px) { .nav-hidden-mobile { transform: translateY(-100%) !important; } } /* Hide the in-navbar toggler and Bootstrap collapse — drawer replaces them */ @media (max-width: 991.98px) { .fade-nav .navbar-toggler, .fade-nav .navbar-collapse { display: none !important; } } @media (max-width: 991.98px) { .nav-drawer-tab { display: flex; } }