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

Compare commits

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

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

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

186
about.html
View file

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

BIN
assets/icons/petal.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

180
contact.html
View file

@ -369,33 +369,22 @@
</a>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<div class="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 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" />
<!-- Menu Toggle -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div class="cursor-pointer" id="menuToggle">
<div class="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="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-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>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center hero-section">
@ -868,47 +857,90 @@
}
/* Section classes for targeting */
.hero-section { contain: layout; }
.contact-form-section { contain: layout; }
.map-section { contain: layout; }
/* 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)} }
.hero-section {
/* This class will be added to the hero section for targeting */
}
.contact-form-section {
/* This class will be added to the contact form section for targeting */
}
.map-section {
/* This class will be added to the map section for targeting */
}
</style>
<script>
// Menu toggle functionality (class-toggle)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuWrap = document.getElementById("menuWrap");
(function setupMenu(){
if (!menuToggle || !navMenu || !menuWrap) return;
let isOpen = false;
menuToggle.addEventListener('click', (e)=>{
e.stopPropagation();
isOpen = !isOpen;
if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
});
document.addEventListener('click', (e)=>{
if (!isOpen) return;
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
isOpen = false;
navMenu.classList.add('hidden');
menuWrap.classList.remove('open');
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
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;
}
});
})();
</script>
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});
}
// Form submission
const contactForm = document.getElementById("contactForm");
@ -1034,17 +1066,39 @@
// Ensure clean state on back/forward cache restores
window.addEventListener('pageshow', () => {
const nav = document.getElementById('navMenu');
const wrap = document.getElementById('menuWrap');
const grid = document.getElementById('menuGrid');
if (nav) nav.classList.add('hidden');
if (wrap) wrap.classList.remove('open');
if (grid) {
grid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>`;
}
});
// Cleanup before bfcache snapshot
window.addEventListener('pagehide', () => {
const nav = document.getElementById('navMenu');
const wrap = document.getElementById('menuWrap');
const grid = document.getElementById('menuGrid');
if (nav) nav.classList.add('hidden');
if (wrap) wrap.classList.remove('open');
if (grid) {
grid.innerHTML = `
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
}
});
</script>
</body>

68
index.html
View file

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

179
projects.html
View file

@ -370,35 +370,28 @@
</a>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<!-- Menu Toggle with Transparent Background -->
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"
>
<div class="cursor-pointer" id="menuToggle">
<div class="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
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 class="cursor-pointer p-3" 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;
"
>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-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>
@ -1143,66 +1136,6 @@
.hero-section {
/* 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>
<script src="js/main.js"></script>
@ -1541,31 +1474,93 @@
}
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});

109
services.html
View file

@ -166,23 +166,6 @@
.hero-section {
/* 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>
</head>
<body class="bg-kh3-black text-white font-montserrat">
@ -535,33 +518,25 @@
</a>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<div class="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 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" />
<!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div
class="cursor-pointer p-3"
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;">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-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>
<!-- Main Content -->
<main class="pt-20">
@ -1109,31 +1084,71 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})();
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});

8
styles/output.css
View file

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

109
who.html
View file

@ -367,33 +367,25 @@
</div>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<div class="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 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" />
<!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div
class="cursor-pointer p-3"
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;">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-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>
<!-- Main Content -->
<main class="pt-20">
@ -1477,23 +1469,6 @@
.team-section {
/* 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>
<script src="js/main.js"></script>
@ -1546,31 +1521,71 @@
});
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});