support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-10-24 23:35:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Compare commits

base: support:7d35a5a1876b6b0f06f324c72d5663186acdd30f
Branches Tags
support:main
..
compare: support:e562661939d5bfc9fd3fa72afe237b3225a0e3f3
Branches Tags
support:main

No commits in common. "7d35a5a1876b6b0f06f324c72d5663186acdd30f" and "e562661939d5bfc9fd3fa72afe237b3225a0e3f3" have entirely different histories.
7d35a5a187 ... e562661939

8 changed files with 507 additions and 332 deletions
Download patch file Download diff file Expand all files Collapse all files

186
about.html
View file

@ -367,33 +367,25 @@
</div> </div>
</div> </div>
<!-- Menu Toggle with Homepage structure --> <!-- Menu Toggle with Transparent Background -->
<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-40">
<div class="cursor-pointer" id="menuToggle"> <div
<div class="relative inline-block" id="menuWrap"> class="cursor-pointer p-3 transition-transform duration-300"
<div class="menu-waves" aria-hidden="true"> id="menuToggle"
<span class="wave"></span> >
<span class="wave"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<span class="wave"></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>
<span class="w-1 h-1 bg-white rounded-full"></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>
<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>
<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>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div> </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>
</div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<main class="pt-20"> <main class="pt-20">
@ -414,7 +406,7 @@
<div class="w-px flex-1 bg-neutral-800"></div> <div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div> <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
<div class="w-px flex-1 bg-neutral-800"></div> <div class="w-px flex-1 bg-neutral-800"></div>
</div> </div>
<!-- Title with horizontal ruler --> <!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full"> <div class="pl-28 pr-6 w-full">
@ -1290,23 +1282,6 @@
} }
} }
/* 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; }
.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; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst {
0%, 69% { opacity: 0; transform: scale(1); }
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
100% { opacity: 0; transform: scale(1.95, 1.75); }
}
/* Diagonal mask reveal for hero image */ /* Diagonal mask reveal for hero image */
@keyframes diagMaskReveal { @keyframes diagMaskReveal {
0% { 0% {
@ -1449,31 +1424,112 @@
}); });
}); });
// Menu toggle functionality (homepage pattern) // Menu toggle functionality
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
navMenu.classList.add("hidden"); // Close menu
if (menuWrap) menuWrap.classList.remove("open"); navMenu.classList.add("hidden");
// Transform back to full grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></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 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
`;
menuToggle.style.transform = "scale(1)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open"); // Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></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 opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
`;
menuToggle.style.transform = "scale(0.8)";
menuToggle.style.transition = "transform 0.3s ease";
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
// Transform back to full grid
menuGrid.innerHTML = `
<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>
`;
menuGrid.style.transform = "scale(1)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); // Transform back to full grid
menuGrid.innerHTML = `
<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>
`;
menuGrid.style.transform = "scale(1)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });
@ -1574,9 +1630,20 @@
cover.style.opacity = "0"; cover.style.opacity = "0";
} }
const nav = document.getElementById("navMenu"); const nav = document.getElementById("navMenu");
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden"); if (nav) nav.classList.add("hidden");
const wrap = document.getElementById("menuWrap"); if (grid) {
if (wrap) wrap.classList.remove("open"); grid.innerHTML = `
<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>`;
}
}); });
// Also ensure clean state on bfcache restore / pageshow // Also ensure clean state on bfcache restore / pageshow
@ -1585,10 +1652,21 @@
cover.style.transform = "translateX(100%)"; cover.style.transform = "translateX(100%)";
cover.style.opacity = "0"; cover.style.opacity = "0";
} }
const nav2 = document.getElementById("navMenu"); const nav = document.getElementById("navMenu");
if (nav2) nav2.classList.add("hidden"); const grid = document.getElementById("menuGrid");
const wrap2 = document.getElementById("menuWrap"); if (nav) nav.classList.add("hidden");
if (wrap2) wrap2.classList.remove("open"); if (grid) {
grid.innerHTML = `
<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>`;
}
}); });

BIN
assets/icons/petal.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

180
contact.html
View file

@ -369,33 +369,22 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Homepage/WHY structure --> <!-- Menu Toggle -->
<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-40">
<div class="cursor-pointer" id="menuToggle"> <div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap"> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<div class="menu-waves" aria-hidden="true"> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="wave"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="wave"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="wave"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
</div> <span class="w-1 h-1 bg-white rounded-full"></span>
<div class="menu-outline" aria-hidden="true"></div> <span class="w-1 h-1 bg-white rounded-full"></span>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid"> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> </div>
<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>
<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">
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div> </div>
</div> </div>
</div>
</div>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center hero-section"> <section class="relative h-screen flex items-center justify-center hero-section">
@ -868,47 +857,90 @@
} }
/* Section classes for targeting */ /* Section classes for targeting */
.hero-section { contain: layout; } .hero-section {
/* This class will be added to the hero section for targeting */
.contact-form-section { contain: layout; } }
.map-section { contain: layout; } .contact-form-section {
/* Homepage-style menu outline and waves */ /* This class will be added to the contact form section for targeting */
#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; }
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; } .map-section {
.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; } /* This class will be added to the map section for targeting */
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; } }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst { 0%,69%{opacity:0;transform:scale(1)} 77%{opacity:.38;transform:scale(1.18,1.12)} 92%{opacity:.22;transform:scale(1.55,1.42)} 100%{opacity:0;transform:scale(1.95,1.75)} }
</style> </style>
<script> <script>
// Menu toggle functionality (class-toggle) // Menu toggle functionality
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuWrap = document.getElementById("menuWrap"); const menuGrid = document.getElementById("menuGrid");
(function setupMenu(){
if (!menuToggle || !navMenu || !menuWrap) return; if (menuToggle && navMenu && menuGrid) {
let isOpen = false; let isMenuOpen = false;
menuToggle.addEventListener('click', (e)=>{ let closeBtnEl = null;
e.stopPropagation();
isOpen = !isOpen; menuToggle.addEventListener("click", () => {
if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); } if (isMenuOpen) {
else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); } // Close menu
}); navMenu.classList.add("hidden");
document.addEventListener('click', (e)=>{ if (closeBtnEl) {
if (!isOpen) return; closeBtnEl.remove();
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { closeBtnEl = null;
isOpen = false; }
navMenu.classList.add('hidden'); isMenuOpen = false;
menuWrap.classList.remove('open'); } else {
// Open menu
navMenu.classList.remove("hidden");
// Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></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 opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
`;
menuGrid.style.transform = "scale(0.8)";
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
} }
}); });
})();
</script> // Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});
}
// Form submission // Form submission
const contactForm = document.getElementById("contactForm"); const contactForm = document.getElementById("contactForm");
@ -1034,17 +1066,39 @@
// Ensure clean state on back/forward cache restores // Ensure clean state on back/forward cache restores
window.addEventListener('pageshow', () => { window.addEventListener('pageshow', () => {
const nav = document.getElementById('navMenu'); const nav = document.getElementById('navMenu');
const wrap = document.getElementById('menuWrap'); const grid = document.getElementById('menuGrid');
if (nav) nav.classList.add('hidden'); if (nav) nav.classList.add('hidden');
if (wrap) wrap.classList.remove('open'); if (grid) {
grid.innerHTML = `
<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>`;
}
}); });
// Cleanup before bfcache snapshot // Cleanup before bfcache snapshot
window.addEventListener('pagehide', () => { window.addEventListener('pagehide', () => {
const nav = document.getElementById('navMenu'); const nav = document.getElementById('navMenu');
const wrap = document.getElementById('menuWrap'); const grid = document.getElementById('menuGrid');
if (nav) nav.classList.add('hidden'); if (nav) nav.classList.add('hidden');
if (wrap) wrap.classList.remove('open'); if (grid) {
grid.innerHTML = `
<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>`;
}
}); });
</script> </script>
</body> </body>

68
index.html
View file

@ -405,12 +405,6 @@
<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> <span class="w-1 h-1 bg-white"></span>
</div> </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> </div>
</div> </div>
</div> </div>
@ -613,13 +607,6 @@
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
/* Icon swap (homepage only): show petal when wrapper has .open */
#menuWrap.open #menuPetal {
opacity: 1;
}
#menuWrap.open #menuGrid {
opacity: 0;
}
.menu-outline { .menu-outline {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -896,8 +883,18 @@
const navEl = document.getElementById("navMenu"); const navEl = document.getElementById("navMenu");
const gridEl = document.getElementById("menuGrid"); const gridEl = document.getElementById("menuGrid");
if (navEl) navEl.classList.add("hidden"); if (navEl) navEl.classList.add("hidden");
const wrapEl = document.getElementById("menuWrap"); if (gridEl) {
if (wrapEl) wrapEl.classList.remove("open"); gridEl.innerHTML = `
<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>
<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>
<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>`;
}
}); });
// Enhanced slide + zoom hero image transitions // Enhanced slide + zoom hero image transitions
@ -970,7 +967,6 @@
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
@ -979,12 +975,21 @@
if (isMenuOpen) { if (isMenuOpen) {
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); menuGrid.innerHTML = `
<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>
<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>
<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>
`;
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu (keep button static) // Open menu (keep button static)
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true; isMenuOpen = true;
} }
}); });
@ -993,7 +998,17 @@
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); menuGrid.innerHTML = `
<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>
<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>
<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>
`;
isMenuOpen = false; isMenuOpen = false;
} }
}); });
@ -1074,9 +1089,20 @@
// Close nav if it was left open and reset grid icon // Close nav if it was left open and reset grid icon
const navMenuEl = document.getElementById("navMenu"); const navMenuEl = document.getElementById("navMenu");
const wrapEl2 = document.getElementById("menuWrap"); const menuGridEl = document.getElementById("menuGrid");
if (navMenuEl) navMenuEl.classList.add("hidden"); if (navMenuEl) navMenuEl.classList.add("hidden");
if (wrapEl2) wrapEl2.classList.remove("open"); if (menuGridEl) {
menuGridEl.innerHTML = `
<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>
<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>
<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>`;
}
}); });
// Menu grid animation sequence // Menu grid animation sequence

179
projects.html
View file

@ -370,35 +370,28 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Homepage/WHY structure --> <!-- Menu Toggle with Transparent Background -->
<div <div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50" class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"
> >
<div class="cursor-pointer" id="menuToggle"> <div class="cursor-pointer p-3" id="menuToggle">
<div class="relative inline-block" id="menuWrap"> <div
<div class="menu-waves" aria-hidden="true"> class="grid grid-cols-3 gap-1 w-6 h-6"
<span class="wave"></span> id="menuGrid"
<span class="wave"></span> style="
<span class="wave"></span> outline: 1px solid rgba(255, 255, 255, 0.6);
</div> outline-offset: 6px;
<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> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
</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> </div>
</div> </div>
</div> </div>
@ -1143,66 +1136,6 @@
.hero-section { .hero-section {
/* This class will be added to the hero section for targeting */ /* This class will be added to the hero section for targeting */
} }
/* 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;
}
.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;
}
.menu-waves .wave:nth-child(3) {
animation-delay: 0.6s;
}
#menuWrap.open #menuPetal {
opacity: 1;
}
#menuWrap.open #menuGrid {
opacity: 0;
}
@keyframes waveBurst {
0%,
69% {
opacity: 0;
transform: scale(1);
}
77% {
opacity: 0.38;
transform: scale(1.18, 1.12);
}
92% {
opacity: 0.22;
transform: scale(1.55, 1.42);
}
100% {
opacity: 0;
transform: scale(1.95, 1.75);
}
}
</style> </style>
<script src="js/main.js"></script> <script src="js/main.js"></script>
@ -1541,31 +1474,93 @@
} }
}); });
// Menu toggle functionality (homepage pattern) // Menu toggle functionality
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); menuGrid.innerHTML = `
<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>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open"); // Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); menuGrid.innerHTML = `
<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>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });

109
services.html
View file

@ -166,23 +166,6 @@
.hero-section { .hero-section {
/* This class will be added to the hero section for targeting */ /* This class will be added to the hero section for targeting */
} }
/* 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; }
.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; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst {
0%, 69% { opacity: 0; transform: scale(1); }
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
100% { opacity: 0; transform: scale(1.95, 1.75); }
}
</style> </style>
</head> </head>
<body class="bg-kh3-black text-white font-montserrat"> <body class="bg-kh3-black text-white font-montserrat">
@ -535,33 +518,25 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Homepage/WHY structure --> <!-- Menu Toggle with Transparent Background -->
<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-40">
<div class="cursor-pointer" id="menuToggle"> <div
<div class="relative inline-block" id="menuWrap"> class="cursor-pointer p-3"
<div class="menu-waves" aria-hidden="true"> id="menuToggle"
<span class="wave"></span> >
<span class="wave"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<span class="wave"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
</div> <span class="w-1 h-1 bg-white rounded-full"></span>
<div class="menu-outline" aria-hidden="true"></div> <span class="w-1 h-1 bg-white rounded-full"></span>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid"> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> </div>
<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">
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div> </div>
</div> </div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<main class="pt-20"> <main class="pt-20">
@ -1109,31 +1084,71 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el)); document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})(); })();
// Menu toggle functionality (homepage pattern) // Menu toggle functionality
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open"); // Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });

8
styles/output.css
View file

@ -1022,10 +1022,6 @@ video {
height: 100svh; height: 100svh;
} }
.h-7 {
height: 1.75rem;
}
.max-h-\[90vh\] { .max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
@ -1142,10 +1138,6 @@ video {
width: 1rem; width: 1rem;
} }
.w-7 {
width: 1.75rem;
}
.min-w-0 { .min-w-0 {
min-width: 0px; min-width: 0px;
} }

109
who.html
View file

@ -367,33 +367,25 @@
</div> </div>
</div> </div>
<!-- Menu Toggle with Homepage/WHY structure --> <!-- Menu Toggle with Transparent Background -->
<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-40">
<div class="cursor-pointer" id="menuToggle"> <div
<div class="relative inline-block" id="menuWrap"> class="cursor-pointer p-3"
<div class="menu-waves" aria-hidden="true"> id="menuToggle"
<span class="wave"></span> >
<span class="wave"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<span class="wave"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
</div> <span class="w-1 h-1 bg-white rounded-full"></span>
<div class="menu-outline" aria-hidden="true"></div> <span class="w-1 h-1 bg-white rounded-full"></span>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid"> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> </div>
<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">
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div> </div>
</div> </div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<main class="pt-20"> <main class="pt-20">
@ -1477,23 +1469,6 @@
.team-section { .team-section {
/* This class will be added to the team section for targeting */ /* This class will be added to the team section for targeting */
} }
/* 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; }
.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; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst {
0%, 69% { opacity: 0; transform: scale(1); }
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
100% { opacity: 0; transform: scale(1.95, 1.75); }
}
</style> </style>
<script src="js/main.js"></script> <script src="js/main.js"></script>
@ -1546,31 +1521,71 @@
}); });
}); });
// Menu toggle functionality (homepage pattern) // Menu toggle functionality
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open"); // Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open"); if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });