-
-
@@ -414,7 +406,7 @@
-
+
@@ -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 = `
+
+
+
+
+
+
+
+
+
+ `;
+ 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 = `
+
+
+
+
+
+
+
+
+
+ `;
+ 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 = `
+
+ `;
+ navMenu.appendChild(closeBtnEl);
+ closeBtnEl.addEventListener("click", () => {
+ navMenu.classList.add("hidden");
+ // Transform back to full grid
+ menuGrid.innerHTML = `
+
+
+
+
+
+
+
+
+
+ `;
+ 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 = `
+
+
+
+
+
+
+
+
+
+ `;
+ 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 = `
+
+
+
+
+
+
+
+
+ `;
+ }
});
// 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 = `
+
+
+
+
+
+
+
+
+ `;
+ }
});
diff --git a/assets/icons/petal.png b/assets/icons/petal.png
deleted file mode 100644
index fa3858f..0000000
Binary files a/assets/icons/petal.png and /dev/null differ
diff --git a/contact.html b/contact.html
index 544665b..03c8833 100644
--- a/contact.html
+++ b/contact.html
@@ -369,33 +369,22 @@
-
-
-
-
@@ -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 */
+ }
+
+ // 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 = `
+
+
+
+
+
+
+
+
+ `;
+ }
});
// 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 = `
+
+
+
+
+
+
+
+
+ `;
+ }
});
-
-
-
-
- 
+
+
-
+
+
+
-