refactor: enhance menu toggle structure and animations across multiple HTML files for improved user experience
This commit is contained in:
parent
e562661939
commit
9f0d845eef
8 changed files with 360 additions and 535 deletions
182
about.html
182
about.html
|
|
@ -367,22 +367,30 @@
|
||||||
</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>
|
</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"></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>
|
</div>
|
||||||
|
|
@ -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");
|
||||||
// Transform back to full grid
|
if (menuWrap) menuWrap.classList.remove("open");
|
||||||
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
BIN
assets/icons/petal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
168
contact.html
168
contact.html
|
|
@ -369,19 +369,30 @@
|
||||||
</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>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
@ -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 {
|
.contact-form-section { contain: layout; }
|
||||||
/* This class will be added to the contact form section for targeting */
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-section {
|
.map-section { contain: layout; }
|
||||||
/* This class will be added to the map 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:.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)=>{
|
||||||
}
|
if (!isOpen) return;
|
||||||
});
|
|
||||||
|
|
||||||
// Close menu when clicking outside
|
|
||||||
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>
|
||||||
|
|
|
||||||
68
index.html
68
index.html
|
|
@ -405,6 +405,12 @@
|
||||||
<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>
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
175
projects.html
175
projects.html
|
|
@ -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 class="relative inline-block" id="menuWrap">
|
||||||
|
<div class="menu-waves" aria-hidden="true">
|
||||||
|
<span class="wave"></span>
|
||||||
|
<span class="wave"></span>
|
||||||
|
<span class="wave"></span>
|
||||||
|
</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
|
||||||
class="grid grid-cols-3 gap-1 w-6 h-6"
|
id="menuPetal"
|
||||||
id="menuGrid"
|
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
||||||
style="
|
|
||||||
outline: 1px solid rgba(255, 255, 255, 0.6);
|
|
||||||
outline-offset: 6px;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
</div>
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
107
services.html
107
services.html
|
|
@ -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,22 +535,30 @@
|
||||||
</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>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
107
who.html
107
who.html
|
|
@ -367,22 +367,30 @@
|
||||||
</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>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue