/* ============================================================
GRITAP AI — mobile-nav.css
Upload to: /public/css/mobile-nav.css
Add ONE line inside on every public page, after style.css:
Or add it at the very END of your existing style.css file.
============================================================ */
/* ============================================================
1. NAVBAR BASE — ensure it always sits above everything
============================================================ */
.navbar {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 9999 !important; /* above canvas (z-index ~1), chatbot (z-index 998) */
background: rgba(6, 12, 10, 0.97) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(78, 212, 198, 0.15);
}
/* Theme-toggle button above navbar on mobile */
.theme-toggle {
z-index: 10000 !important;
}
/* Hero canvas must sit BELOW navbar */
#heroCanvas {
z-index: 0 !important;
}
/* Hero content sits above canvas but below navbar */
.hero-content {
z-index: 5 !important;
}
/* ============================================================
2. HAMBURGER BUTTON — visible on mobile, hidden on desktop
============================================================ */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
background: none;
border: 1px solid rgba(78, 212, 198, 0.2);
border-radius: 8px;
cursor: pointer;
z-index: 10001;
flex-shrink: 0;
}
.hamburger span {
display: block;
width: 20px;
height: 2px;
background: #4ed4c6;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
/* Animated X when open */
.hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ============================================================
3. DESKTOP NAV — unchanged, only shown on wide screens
============================================================ */
@media (min-width: 769px) {
.hamburger { display: none !important; }
.nav-menu {
display: flex !important;
flex-direction: row;
align-items: center;
position: static !important;
background: none !important;
border: none !important;
padding: 0 !important;
overflow: visible !important;
max-height: none !important;
box-shadow: none !important;
transform: none !important;
}
/* Desktop submenu hover — keep existing behaviour */
.nav-item.has-submenu:hover .submenu,
.nav-item.has-submenu:focus-within .submenu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: all !important;
}
}
/* ============================================================
4. MOBILE NAV DRAWER
============================================================ */
@media (max-width: 768px) {
/* Show hamburger */
.hamburger { display: flex !important; }
/* Full-screen slide-in drawer */
.nav-menu {
/* Layout */
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
/* Positioning — full viewport, below navbar (70px) */
position: fixed !important;
top: 70px !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
/* Stacking */
z-index: 9998 !important;
/* Appearance */
background: rgba(6, 12, 10, 0.99) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border-top: 1px solid rgba(78, 212, 198, 0.15) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 16px 0 40px !important;
/* Hidden by default — slide up off-screen */
transform: translateY(-110%) !important;
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
pointer-events: none;
}
/* Visible state — add class 'nav-open' to via JS */
.nav-menu.nav-open {
transform: translateY(0) !important;
pointer-events: all;
}
/* ---- Top-level nav items ---- */
.nav-item {
width: 100% !important;
position: relative !important;
border-bottom: 1px solid rgba(78, 212, 198, 0.07) !important;
}
/* ---- Top-level links ---- */
.nav-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 24px !important;
color: #e8f5f2 !important;
font-size: 16px !important;
font-weight: 700 !important;
width: 100% !important;
text-decoration: none !important;
transition: background 0.2s, color 0.2s !important;
border-radius: 0 !important;
}
.nav-link:hover,
.nav-link.active {
color: #4ed4c6 !important;
background: rgba(78, 212, 198, 0.06) !important;
}
/* Chevron rotation when submenu open */
.nav-item.has-submenu.submenu-open > .nav-link {
color: #4ed4c6 !important;
background: rgba(78, 212, 198, 0.06) !important;
}
.nav-item.has-submenu.submenu-open > .nav-link .chevron {
transform: rotate(180deg) !important;
}
/* ---- CTA button ---- */
.nav-cta {
margin: 16px 24px 0 !important;
border-radius: 100px !important;
text-align: center !important;
justify-content: center !important;
display: flex !important;
background: #006755 !important;
color: #fff !important;
padding: 14px 24px !important;
font-size: 15px !important;
font-weight: 700 !important;
border: none !important;
}
.nav-cta:hover {
background: #4ed4c6 !important;
color: #003229 !important;
}
/* ---- SUBMENUS ---- */
.submenu {
/* Override desktop absolute positioning */
position: static !important;
top: auto !important;
left: auto !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: all !important;
box-shadow: none !important;
/* Collapsed state */
display: none !important;
/* Appearance */
background: rgba(0, 50, 41, 0.5) !important;
border: none !important;
border-top: 1px solid rgba(78, 212, 198, 0.08) !important;
border-radius: 0 !important;
padding: 4px 0 8px !important;
min-width: unset !important;
width: 100% !important;
}
/* Expanded state */
.nav-item.has-submenu.submenu-open > .submenu {
display: block !important;
}
/* Submenu links */
.submenu a,
.submenu li a {
display: block !important;
padding: 12px 24px 12px 40px !important;
color: #a0b8b2 !important;
font-size: 14px !important;
font-weight: 500 !important;
font-family: 'Inter', sans-serif !important;
text-decoration: none !important;
border-radius: 0 !important;
border-bottom: none !important;
transition: color 0.2s, background 0.2s !important;
position: relative !important;
}
.submenu a::before,
.submenu li a::before {
content: '→';
position: absolute;
left: 24px;
color: rgba(78, 212, 198, 0.4);
font-size: 12px;
}
.submenu a:hover,
.submenu li a:hover {
color: #4ed4c6 !important;
background: rgba(78, 212, 198, 0.06) !important;
}
/* ---- Chevron icon in nav-link ---- */
.chevron {
width: 14px !important;
height: 10px !important;
flex-shrink: 0 !important;
transition: transform 0.3s ease !important;
color: #5a7870 !important;
}
/* ---- Body scroll lock when menu open ---- */
body.menu-open {
overflow: hidden !important;
}
/* ---- Overlay behind menu ---- */
#nav-overlay {
display: none;
position: fixed;
inset: 70px 0 0 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9997;
}
#nav-overlay.visible {
display: block;
}
}
/* ============================================================
5. VERY SMALL SCREENS (≤ 380px)
============================================================ */
@media (max-width: 380px) {
.nav-link { font-size: 15px !important; padding: 14px 18px !important; }
.submenu a, .submenu li a { padding: 11px 18px 11px 34px !important; }
}