georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: perfects mobile menu and nav

Browse source
This commit is contained in:
George Birikorang 2025-09-03 01:39:25 -04:00
parent a3c642d9fe
commit 9275ae82db
7 changed files with 336 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

67
about.html
View file

@ -363,15 +363,18 @@
</div>
</div>
<!-- Menu Toggle with Homepage structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<!-- Menu Toggle with Homepage/WHY structure -->
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
@ -384,10 +387,32 @@
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div>
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1289,6 +1314,24 @@
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
/* Hide menu outline on mobile */
@media (max-width: 768px) {
.menu-outline {
display: none !important;
}
/* Create a proper button container for mobile */
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@ -1435,27 +1478,31 @@
});
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");

98
contact.html
View file

@ -367,9 +367,12 @@
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
@ -386,11 +389,33 @@
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div>
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
@ -873,6 +898,24 @@
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
/* Hide menu outline on mobile */
@media (max-width: 768px) {
.menu-outline {
display: none !important;
}
/* Create a proper button container for mobile */
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@ -883,28 +926,39 @@
</style>
<script>
// Menu toggle functionality (class-toggle)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuWrap = document.getElementById("menuWrap");
(function setupMenu(){
if (!menuToggle || !navMenu || !menuWrap) return;
let isOpen = false;
menuToggle.addEventListener('click', (e)=>{
e.stopPropagation();
isOpen = !isOpen;
if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
});
document.addEventListener('click', (e)=>{
if (!isOpen) return;
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
isOpen = false;
navMenu.classList.add('hidden');
menuWrap.classList.remove('open');
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
})();
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
}
});
}
</script>
// Form submission

68
index.html
View file

@ -372,13 +372,13 @@
</a>
</div>
<!-- Menu Grid -->
<!-- Menu Toggle with Homepage/WHY structure -->
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
@ -406,6 +406,25 @@
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
@ -621,6 +640,23 @@
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
}
/* Hide menu outline on mobile */
@media (max-width: 768px) {
.menu-outline {
display: none !important;
}
/* Create a proper button container for mobile */
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
.menu-waves .wave {
position: absolute;
inset: 0;
@ -805,6 +841,23 @@
opacity: 1;
}
}
/* Hero section class for targeting */
.hero-section {
/* This class will be added to the hero section for targeting */
}
/* Mobile menu button styling */
@media (max-width: 768px) {
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
</style>
<script src="js/main.js"></script>
@ -957,10 +1010,11 @@
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
@ -970,7 +1024,7 @@
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu (keep button static)
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;

36
projects.html
View file

@ -368,7 +368,8 @@
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
@ -393,6 +394,25 @@
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
@ -1137,7 +1157,7 @@
contain: layout;
}
/* Homepage-style menu outline and waves */
/* Homepage-style menu outline and waves (desktop only) */
#menuWrap {
position: relative;
overflow: visible;
@ -1150,6 +1170,7 @@
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
}
.menu-waves {
position: absolute;
inset: -20px;
@ -1534,27 +1555,32 @@
}
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");

59
services.html
View file

@ -168,6 +168,24 @@
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
/* Hide menu outline on mobile */
@media (max-width: 768px) {
.menu-outline {
display: none !important;
}
/* Create a proper button container for mobile */
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@ -530,9 +548,12 @@
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
@ -550,10 +571,32 @@
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div>
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
@ -1103,27 +1146,31 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})();
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");

5
styles/output.css
View file

@ -2296,6 +2296,11 @@ video {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

59
who.html
View file

@ -364,9 +364,12 @@
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
@ -384,10 +387,32 @@
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div>
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
@ -1476,6 +1501,24 @@
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
/* Hide menu outline on mobile */
@media (max-width: 768px) {
.menu-outline {
display: none !important;
}
/* Create a proper button container for mobile */
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@ -1541,27 +1584,31 @@
});
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");