support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-10-16 20:41:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: enhance menu toggle structure and animations across multiple HTML files for improved user experience

Browse source
This commit is contained in:
George Birikorang 2025-09-02 07:40:15 -04:00
parent e562661939
commit 9f0d845eef
8 changed files with 360 additions and 535 deletions
Download patch file Download diff file Expand all files Collapse all files

186
about.html
View file

@ -367,25 +367,33 @@
</div> </div>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- 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-40"> <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div <div class="cursor-pointer" id="menuToggle">
class="cursor-pointer p-3 transition-transform duration-300" <div class="relative inline-block" id="menuWrap">
id="menuToggle" <div class="menu-waves" aria-hidden="true">
> <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="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>
</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">
@ -406,7 +414,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">
@ -1282,6 +1290,23 @@
} }
} }
/* 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% {
@ -1424,112 +1449,31 @@
}); });
}); });
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
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");
// 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");
// Transform to compressed state - only center 5 dots, corner dots disappear if (menuWrap) menuWrap.classList.add("open");
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");
// Transform back to full grid 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>
`;
menuGrid.style.transform = "scale(1)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });
@ -1630,20 +1574,9 @@
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");
if (grid) { const wrap = document.getElementById("menuWrap");
grid.innerHTML = ` if (wrap) wrap.classList.remove("open");
<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
@ -1652,21 +1585,10 @@
cover.style.transform = "translateX(100%)"; cover.style.transform = "translateX(100%)";
cover.style.opacity = "0"; cover.style.opacity = "0";
} }
const nav = document.getElementById("navMenu"); const nav2 = document.getElementById("navMenu");
const grid = document.getElementById("menuGrid"); if (nav2) nav2.classList.add("hidden");
if (nav) nav.classList.add("hidden"); const wrap2 = document.getElementById("menuWrap");
if (grid) { if (wrap2) wrap2.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>`;
}
}); });

BIN
assets/icons/petal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

176
contact.html
View file

@ -369,22 +369,33 @@
</a> </a>
</div> </div>
<!-- Menu Toggle --> <!-- 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-40"> <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="cursor-pointer" id="menuToggle">
<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="relative inline-block" id="menuWrap">
<span class="w-1 h-1 bg-white rounded-full"></span> <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>
</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>
<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">
@ -857,90 +868,47 @@
} }
/* Section classes for targeting */ /* Section classes for targeting */
.hero-section { .hero-section { contain: layout; }
/* This class will be added to the hero section for targeting */
} .contact-form-section { contain: layout; }
.contact-form-section { .map-section { contain: layout; }
/* This class will be added to the contact form 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; }
.map-section { .menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
/* This class will be added to the map section for targeting */ .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:.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 // Menu toggle functionality (class-toggle)
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 menuWrap = document.getElementById("menuWrap");
(function setupMenu(){
if (menuToggle && navMenu && menuGrid) { if (!menuToggle || !navMenu || !menuWrap) return;
let isMenuOpen = false; let isOpen = false;
let closeBtnEl = null; menuToggle.addEventListener('click', (e)=>{
e.stopPropagation();
menuToggle.addEventListener("click", () => { isOpen = !isOpen;
if (isMenuOpen) { if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
// Close menu else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} 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;
}
}); });
document.addEventListener('click', (e)=>{
// Close menu when clicking outside if (!isOpen) return;
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"); isOpen = false;
if (closeBtnEl) { navMenu.classList.add('hidden');
closeBtnEl.remove(); menuWrap.classList.remove('open');
closeBtnEl = null;
}
isMenuOpen = false;
} }
}); });
} })();
</script>
// Form submission // Form submission
const contactForm = document.getElementById("contactForm"); const contactForm = document.getElementById("contactForm");
@ -1066,39 +1034,17 @@
// 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 grid = document.getElementById('menuGrid'); const wrap = document.getElementById('menuWrap');
if (nav) nav.classList.add('hidden'); if (nav) nav.classList.add('hidden');
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>`;
}
}); });
// 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 grid = document.getElementById('menuGrid'); const wrap = document.getElementById('menuWrap');
if (nav) nav.classList.add('hidden'); if (nav) nav.classList.add('hidden');
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>`;
}
}); });
</script> </script>
</body> </body>

128
index.html
View file

@ -35,7 +35,7 @@
>KH3</span >KH3</span
> >
</a> </a>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative"> <nav class="flex-1 relative">
@ -54,7 +54,7 @@
" "
> >
<span class="md:hidden">HOME</span> <span class="md:hidden">HOME</span>
<span <span
class="hidden md:inline" class="hidden md:inline"
style=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
@ -63,7 +63,7 @@
" "
>H</span >H</span
> >
<span <span
class="hidden md:inline" class="hidden md:inline"
style=" style="
animation-delay: 0.075s; animation-delay: 0.075s;
@ -93,8 +93,8 @@
</a> </a>
<!-- WHY - Slightly right --> <!-- WHY - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
@ -134,8 +134,8 @@
</a> </a>
<!-- HOW - More right --> <!-- HOW - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
@ -266,8 +266,8 @@
</a> </a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.75s; animation-delay: 0.75s;
@ -393,17 +393,23 @@
<div class="menu-outline" aria-hidden="true"></div> <div class="menu-outline" aria-hidden="true"></div>
<div <div
class="grid grid-cols-3 gap-1 w-6 h-6 relative" class="grid grid-cols-3 gap-1 w-6 h-6 relative"
id="menuGrid" 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
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
> >
<span class="w-1 h-1 bg-white"></span> <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<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> </div>
</div> </div>
@ -438,7 +444,7 @@
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5" class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
></div> ></div>
<div class="w-px h-8 bg-kh3-red"></div> <div class="w-px h-8 bg-kh3-red"></div>
</div> </div>
<div class="flex items-center h-16"> <div class="flex items-center h-16">
<span <span
class="text-xs md:text-sm tracking-widest text-neutral-400" class="text-xs md:text-sm tracking-widest text-neutral-400"
@ -517,18 +523,18 @@
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<a <a
href="about.html" href="about.html"
data-trans data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none" class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Why</a >Why</a
> >
<a <a
href="contact.html" href="contact.html"
data-trans data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none" class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Contacts</a >Contacts</a
> >
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -539,7 +545,7 @@
> >
<a <a
class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow" class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
href="about.html" href="about.html"
data-trans data-trans
> >
Why Why
@ -560,9 +566,9 @@
WHO WHO
</a> </a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div> <div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div> </div>
</section> </section>
</div> </div>
<!-- Custom Cursor --> <!-- Custom Cursor -->
<div <div
@ -607,6 +613,13 @@
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;
@ -883,18 +896,8 @@
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");
if (gridEl) { const wrapEl = document.getElementById("menuWrap");
gridEl.innerHTML = ` if (wrapEl) wrapEl.classList.remove("open");
<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
@ -967,6 +970,7 @@
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;
@ -975,21 +979,12 @@
if (isMenuOpen) { if (isMenuOpen) {
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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;
} }
}); });
@ -998,17 +993,7 @@
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");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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;
} }
}); });
@ -1089,20 +1074,9 @@
// 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 menuGridEl = document.getElementById("menuGrid"); const wrapEl2 = document.getElementById("menuWrap");
if (navMenuEl) navMenuEl.classList.add("hidden"); if (navMenuEl) navMenuEl.classList.add("hidden");
if (menuGridEl) { if (wrapEl2) wrapEl2.classList.remove("open");
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,28 +370,35 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Homepage/WHY structure -->
<div <div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40" class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
> >
<div class="cursor-pointer p-3" id="menuToggle"> <div class="cursor-pointer" id="menuToggle">
<div <div class="relative inline-block" id="menuWrap">
class="grid grid-cols-3 gap-1 w-6 h-6" <div class="menu-waves" aria-hidden="true">
id="menuGrid" <span class="wave"></span>
style=" <span class="wave"></span>
outline: 1px solid rgba(255, 255, 255, 0.6); <span class="wave"></span>
outline-offset: 6px; </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 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> <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> </div>
@ -1136,6 +1143,66 @@
.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>
@ -1474,93 +1541,31 @@
} }
}); });
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
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");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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");
// Keep the grid icon as is, don't transform to X if (menuWrap) menuWrap.classList.add("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>
`;
// 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");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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,6 +166,23 @@
.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">
@ -518,25 +535,33 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- 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-40"> <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div <div class="cursor-pointer" id="menuToggle">
class="cursor-pointer p-3" <div class="relative inline-block" id="menuWrap">
id="menuToggle" <div class="menu-waves" aria-hidden="true">
> <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="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>
</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>
</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">
@ -1084,71 +1109,31 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el)); document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})(); })();
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
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 (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X if (menuWrap) menuWrap.classList.add("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>
`;
// 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 (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });

8
styles/output.css
View file

@ -1022,6 +1022,10 @@ video {
height: 100svh; height: 100svh;
} }
.h-7 {
height: 1.75rem;
}
.max-h-\[90vh\] { .max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
@ -1138,6 +1142,10 @@ 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,25 +367,33 @@
</div> </div>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- 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-40"> <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div <div class="cursor-pointer" id="menuToggle">
class="cursor-pointer p-3" <div class="relative inline-block" id="menuWrap">
id="menuToggle" <div class="menu-waves" aria-hidden="true">
> <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="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>
</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>
</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">
@ -1469,6 +1477,23 @@
.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>
@ -1521,71 +1546,31 @@
}); });
}); });
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
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 (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X if (menuWrap) menuWrap.classList.add("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>
`;
// 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 (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });