fix: correct mobile layout
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
George Birikorang 2025-08-27 05:59:09 -04:00
parent bc95267aa4
commit 2fc620570b
6 changed files with 576 additions and 1811 deletions

View file

@ -20,7 +20,7 @@
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden"> <body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
<!-- Navigation Menu --> <!-- Navigation Menu -->
<div <div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
@ -39,9 +39,16 @@
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
> >
<span class="md:hidden">HOME</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
@ -51,6 +58,7 @@
>H</span >H</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.075s; animation-delay: 0.075s;
@ -60,6 +68,7 @@
>O</span >O</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.1s; animation-delay: 0.1s;
@ -69,6 +78,7 @@
>M</span >M</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.125s; animation-delay: 0.125s;
@ -82,88 +92,28 @@
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>O</span >ABOUT US</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
> >
<span class="md:hidden">SERVICES</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
@ -173,6 +123,7 @@
>S</span >S</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.375s; animation-delay: 0.375s;
@ -182,6 +133,7 @@
>E</span >E</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.4s; animation-delay: 0.4s;
@ -191,6 +143,7 @@
>R</span >R</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.425s; animation-delay: 0.425s;
@ -200,6 +153,7 @@
>V</span >V</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.45s; animation-delay: 0.45s;
@ -209,6 +163,7 @@
>I</span >I</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.475s; animation-delay: 0.475s;
@ -218,6 +173,7 @@
>C</span >C</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.5s; animation-delay: 0.5s;
@ -227,6 +183,7 @@
>E</span >E</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.525s; animation-delay: 0.525s;
@ -240,239 +197,38 @@
<!-- PROJECTS - Most right --> <!-- PROJECTS - Most right -->
<a <a
href="projects.html" href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.55s; animation-delay: 0.55s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>P</span >PROJECTS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.75s; animation-delay: 0.75s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>C</span >CONTACTS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a
href="partners.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.95s; animation-delay: 0.95s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>P</span >PARTNERS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -1268,15 +1024,15 @@
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
menuGrid.innerHTML = ` menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
`; `;
if (closeBtnEl) { if (closeBtnEl) {
closeBtnEl.remove(); closeBtnEl.remove();
@ -1405,6 +1161,52 @@
}, 100); }, 100);
} }
}); });
// Cleanup before bfcache snapshot
window.addEventListener("pagehide", () => {
if (cover) {
cover.style.transform = "translateX(100%)";
cover.style.opacity = "0";
}
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>`;
}
});
// Also ensure clean state on bfcache restore / pageshow
window.addEventListener("pageshow", () => {
if (cover) {
cover.style.transform = "translateX(100%)";
cover.style.opacity = "0";
}
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>`;
}
});
</script> </script>
</body> </body>
</html> </html>

View file

@ -22,7 +22,7 @@
> >
<!-- Navigation Menu --> <!-- Navigation Menu -->
<div <div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
@ -39,442 +39,22 @@
<!-- Navigation items in inverted C shape --> <!-- Navigation items in inverted C shape -->
<div class="space-y-6"> <div class="space-y-6">
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a href="index.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a href="about.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a href="services.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS - Most right --> <!-- PROJECTS - Most right -->
<a <a href="projects.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a href="contact.html" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
href="contact.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a href="partners.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.95s; animation-fill-mode: forwards; animation-duration: 0.3s;">PARTNERS</a>
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -483,7 +63,7 @@
</div> </div>
<!-- Static Logo and Menu --> <!-- Static Logo and Menu -->
<div class="fixed top-8 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
@ -497,7 +77,7 @@
</div> </div>
<!-- Menu Toggle --> <!-- Menu Toggle -->
<div class="fixed top-8 right-8 z-40"> <div class="fixed top-6 right-8 z-40">
<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"> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
@ -527,27 +107,15 @@
<!-- Main Content --> <!-- Main Content -->
<div class="relative z-10 text-center w-full"> <div class="relative z-10 text-center w-full">
<div class="flex items-center gap-8 mb-6 max-w-6xl mx-auto"> <div class="flex items-center gap-4 sm:gap-8 mb-6 max-w-6xl mx-auto px-4 sm:px-6 min-w-0">
<div <div class="flex-1 h-1 bg-white opacity-0 min-w-[60px] sm:min-w-[100px]" style="animation: fadeInLeft 1s ease-out 0.3s forwards;"></div>
class="flex-1 h-1 bg-white opacity-0"
style="
min-width: 100px;
animation: fadeInLeft 1s ease-out 0.3s forwards;
"
></div>
<h1 <h1
class="text-6xl md:text-8xl font-bold whitespace-nowrap px-8 opacity-0" class="text-4xl md:text-8xl font-bold whitespace-normal md:whitespace-nowrap tracking-normal md:tracking-[0.2em] px-2 sm:px-8 opacity-0"
style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards" style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards"
> >
CONTACT US CONTACT US
</h1> </h1>
<div <div class="flex-1 h-1 bg-white opacity-0 min-w-[60px] sm:min-w-[100px]" style="animation: fadeInRight 1s ease-out 0.3s forwards;"></div>
class="flex-1 h-1 bg-white opacity-0"
style="
min-width: 100px;
animation: fadeInRight 1s ease-out 0.3s forwards;
"
></div>
</div> </div>
<div <div
class="text-xl md:text-2xl text-white tracking-widest opacity-0" class="text-xl md:text-2xl text-white tracking-widest opacity-0"
@ -767,31 +335,7 @@
</div> </div>
</div> </div>
<!-- Scroll Down Prompt -->
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
<button
id="contactScrollArrow"
class="flex items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
style="animation: fadeInUp 800ms ease-out 4.5s forwards"
>
<span class="text-xs tracking-widest mb-2">SCROLL</span>
<svg
class="w-5 h-5 animate-arrowPulse"
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="M19 9l-7 7-7-7"
/>
</svg>
<div class="w-px h-8 bg-white/70"></div>
</button>
</div>
</section> </section>
<!-- Map Section --> <!-- Map Section -->
@ -1146,5 +690,44 @@
} }
}, 2500); }, 2500);
</script> </script>
<script>
// Ensure clean state on back/forward cache restores
window.addEventListener('pageshow', () => {
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>`;
}
});
// Cleanup before bfcache snapshot
window.addEventListener('pagehide', () => {
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>`;
}
});
</script>
</body> </body>
</html> </html>

View file

@ -20,7 +20,7 @@
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden"> <body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
<!-- Navigation Menu --> <!-- Navigation Menu -->
<div <div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
@ -39,9 +39,11 @@
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
> >
<span class="md:hidden">HOME</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
@ -51,6 +53,7 @@
>H</span >H</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.075s; animation-delay: 0.075s;
@ -60,6 +63,7 @@
>O</span >O</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.1s; animation-delay: 0.1s;
@ -69,6 +73,7 @@
>M</span >M</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.125s; animation-delay: 0.125s;
@ -82,9 +87,11 @@
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat"
> >
<span class="md:hidden">ABOUT&nbsp;US</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.15s; animation-delay: 0.15s;
@ -94,6 +101,7 @@
>A</span >A</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.175s; animation-delay: 0.175s;
@ -103,6 +111,7 @@
>B</span >B</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
@ -112,6 +121,7 @@
>O</span >O</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.225s; animation-delay: 0.225s;
@ -121,6 +131,7 @@
>U</span >U</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.25s; animation-delay: 0.25s;
@ -130,6 +141,7 @@
>T</span >T</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.275s; animation-delay: 0.275s;
@ -139,6 +151,7 @@
>&nbsp;</span >&nbsp;</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.3s; animation-delay: 0.3s;
@ -148,6 +161,7 @@
>U</span >U</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.325s; animation-delay: 0.325s;
@ -161,9 +175,11 @@
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
> >
<span class="md:hidden">SERVICES</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
@ -173,6 +189,7 @@
>S</span >S</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.375s; animation-delay: 0.375s;
@ -182,6 +199,7 @@
>E</span >E</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.4s; animation-delay: 0.4s;
@ -191,6 +209,7 @@
>R</span >R</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.425s; animation-delay: 0.425s;
@ -200,6 +219,7 @@
>V</span >V</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.45s; animation-delay: 0.45s;
@ -209,6 +229,7 @@
>I</span >I</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.475s; animation-delay: 0.475s;
@ -218,6 +239,7 @@
>C</span >C</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.5s; animation-delay: 0.5s;
@ -227,6 +249,7 @@
>E</span >E</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.525s; animation-delay: 0.525s;
@ -240,9 +263,11 @@
<!-- PROJECTS - Most right --> <!-- PROJECTS - Most right -->
<a <a
href="projects.html" href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat"
> >
<span class="md:hidden">PROJECTS</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.55s; animation-delay: 0.55s;
@ -252,6 +277,7 @@
>P</span >P</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.575s; animation-delay: 0.575s;
@ -261,6 +287,7 @@
>R</span >R</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.6s; animation-delay: 0.6s;
@ -270,6 +297,7 @@
>O</span >O</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.625s; animation-delay: 0.625s;
@ -279,6 +307,7 @@
>J</span >J</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.65s; animation-delay: 0.65s;
@ -288,6 +317,7 @@
>E</span >E</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.675s; animation-delay: 0.675s;
@ -297,6 +327,7 @@
>C</span >C</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.7s; animation-delay: 0.7s;
@ -306,6 +337,7 @@
>T</span >T</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.725s; animation-delay: 0.725s;
@ -319,9 +351,11 @@
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
> >
<span class="md:hidden">CONTACTS</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.75s; animation-delay: 0.75s;
@ -331,6 +365,7 @@
>C</span >C</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.775s; animation-delay: 0.775s;
@ -340,6 +375,7 @@
>O</span >O</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.8s; animation-delay: 0.8s;
@ -349,6 +385,7 @@
>N</span >N</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.825s; animation-delay: 0.825s;
@ -358,6 +395,7 @@
>T</span >T</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.85s; animation-delay: 0.85s;
@ -367,6 +405,7 @@
>A</span >A</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.875s; animation-delay: 0.875s;
@ -376,6 +415,7 @@
>C</span >C</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.9s; animation-delay: 0.9s;
@ -385,6 +425,7 @@
>T</span >T</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.925s; animation-delay: 0.925s;
@ -398,9 +439,11 @@
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a
href="partners.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
> >
<span class="md:hidden">PARTNERS</span>
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.95s; animation-delay: 0.95s;
@ -410,6 +453,7 @@
>P</span >P</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.975s; animation-delay: 0.975s;
@ -419,6 +463,7 @@
>A</span >A</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 1s; animation-delay: 1s;
@ -428,6 +473,7 @@
>R</span >R</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 1.025s; animation-delay: 1.025s;
@ -437,6 +483,7 @@
>T</span >T</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 1.05s; animation-delay: 1.05s;
@ -446,6 +493,7 @@
>N</span >N</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 1.075s; animation-delay: 1.075s;
@ -455,6 +503,7 @@
>E</span >E</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 1.1s; animation-delay: 1.1s;
@ -464,6 +513,7 @@
>R</span >R</span
> >
<span <span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left" class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 1.125s; animation-delay: 1.125s;
@ -482,7 +532,7 @@
<!-- Main Layout --> <!-- Main Layout -->
<div class="min-h-screen relative"> <div class="min-h-screen relative">
<section class="relative h-screen flex"> <section class="relative min-h-screen flex flex-col md:flex-row">
<!-- KH3 Logo --> <!-- KH3 Logo -->
<div <div
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left" class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
@ -495,7 +545,7 @@
class="w-16 h-16" class="w-16 h-16"
/> />
<span <span
class="text-white text-2xl font-bold tracking-wider animate-logo-glow" class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow"
>KH3</span >KH3</span
> >
</div> </div>
@ -540,7 +590,7 @@
<!-- LEFT COLUMN --> <!-- LEFT COLUMN -->
<div <div
class="w-1/3 bg-kh3-black flex items-center p-8 opacity-0 animate-fade-in-left" class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left"
style="animation-delay: 0.8s; animation-fill-mode: forwards" style="animation-delay: 0.8s; animation-fill-mode: forwards"
> >
<div class="max-w-xl space-y-2"> <div class="max-w-xl space-y-2">
@ -601,10 +651,10 @@
<!-- RIGHT COLUMN --> <!-- RIGHT COLUMN -->
<div <div
class="w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden" class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden"
style="animation-delay: 0.3s; animation-fill-mode: forwards" style="animation-delay: 0.3s; animation-fill-mode: forwards"
> >
<div class="relative h-full"> <div class="relative h-[60vh] md:h-full">
<!-- Current Image --> <!-- Current Image -->
<img <img
id="currentImg" id="currentImg"
@ -625,11 +675,11 @@
<!-- About Us Button - Bottom Center --> <!-- About Us Button - Bottom Center -->
<div <div
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:block"
style="animation: fadeInUp 0.8s ease-out 1.2s forwards" style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
> >
<a <a
class="inline-block uppercase tracking-wider px-6 py-3 border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow" class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
href="about.html" href="about.html"
data-trans data-trans
> >
@ -639,18 +689,39 @@
<!-- Contact Link - Bottom Right --> <!-- Contact Link - Bottom Right -->
<div <div
class="absolute bottom-8 right-8 flex items-center space-x-4 z-20 opacity-0 animate-fade-in-right" class="absolute bottom-8 right-8 hidden md:flex items-center space-x-3 md:space-x-4 z-20 opacity-0 animate-fade-in-right"
style="animation-delay: 1.4s; animation-fill-mode: forwards" style="animation-delay: 1.4s; animation-fill-mode: forwards"
> >
<div class="w-8 h-px bg-kh3-red"></div> <div class="w-6 md:w-8 h-px bg-kh3-red"></div>
<a <a
href="contact.html" href="contact.html"
data-trans data-trans
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider" class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
> >
CONTACTS CONTACTS
</a> </a>
<div class="w-8 h-px bg-kh3-red"></div> <div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
<!-- Mobile CTA bar: About & Contacts (centered) -->
<div
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
>
<div class="flex items-center gap-4">
<a
href="about.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>About us</a
>
<a
href="contact.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Contacts</a
>
</div>
</div> </div>
</section> </section>
</div> </div>
@ -848,6 +919,27 @@
}); });
}); });
// Hide curtains and close nav just before page is cached (prevents blank back step)
window.addEventListener("pagehide", () => {
if (curtainTop) curtainTop.style.transform = "translateY(-100%)";
if (curtainBottom) curtainBottom.style.transform = "translateY(100%)";
const navEl = document.getElementById("navMenu");
const gridEl = document.getElementById("menuGrid");
if (navEl) navEl.classList.add("hidden");
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 // Enhanced slide + zoom hero image transitions
const imgs = [ const imgs = [
"assets/images/room.png", "assets/images/room.png",
@ -987,6 +1079,36 @@
} }
}); });
// Ensure back/forward navigation (bfcache) shows a clean page
window.addEventListener("pageshow", () => {
const loadingScreen = document.getElementById("loadingScreen");
if (loadingScreen) {
loadingScreen.style.display = "none";
loadingScreen.style.opacity = "0";
}
const ct = document.getElementById("pageCurtainTop");
const cb = document.getElementById("pageCurtainBottom");
if (ct) ct.style.transform = "translateY(-100%)";
if (cb) cb.style.transform = "translateY(100%)";
// Close nav if it was left open and reset grid icon
const navMenuEl = document.getElementById("navMenu");
const menuGridEl = document.getElementById("menuGrid");
if (navMenuEl) navMenuEl.classList.add("hidden");
if (menuGridEl) {
menuGridEl.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>`;
}
});
// Menu grid animation sequence // Menu grid animation sequence
function startMenuGridAnimation() { function startMenuGridAnimation() {
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");

View file

@ -16,7 +16,7 @@
<!-- Navigation Menu --> <!-- Navigation Menu -->
<div <div
id="navMenu" id="navMenu"
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
@ -31,445 +31,72 @@
<div class="relative ml-8"> <div class="relative ml-8">
<!-- Navigation items in inverted C shape --> <!-- Navigation items in inverted C shape -->
<div class="space-y-6"> <div class="space-y-6">
<!-- HOME -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>H</span >HOME</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>O</span >ABOUT US</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>S</span >SERVICES</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS -->
<a <a
href="projects.html" href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.55s; animation-delay: 0.55s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>P</span >PROJECTS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.75s; animation-delay: 0.75s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>C</span >CONTACTS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Active -->
<a <a
href="partners.html" href="partners.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.95s; animation-delay: 0.95s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>P</span >PARTNERS</a
> >
<span </div>
class="inline-block opacity-0 animate-fade-in-left" </div>
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div> </div>
</nav> </nav>
</div>
</div>
<!-- Menu Grid --> <!-- Menu Grid -->
<div <div

View file

@ -16,7 +16,7 @@
<!-- Navigation Menu --> <!-- Navigation Menu -->
<div <div
id="navMenu" id="navMenu"
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
@ -31,445 +31,82 @@
<div class="relative ml-8"> <div class="relative ml-8">
<!-- Navigation items in inverted C shape --> <!-- Navigation items in inverted C shape -->
<div class="space-y-6"> <div class="space-y-6">
<!-- HOME -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>H</span >HOME</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US --> <!-- ABOUT US -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>O</span >ABOUT US</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES --> <!-- SERVICES -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>S</span >SERVICES</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS - Active --> <!-- PROJECTS - Active -->
<a <a
href="projects.html" href="projects.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.55s; animation-delay: 0.55s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>P</span >PROJECTS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS --> <!-- CONTACTS -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.75s; animation-delay: 0.75s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>C</span >CONTACTS</a
> >
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS --> <!-- PARTNERS -->
<a <a
href="partners.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style=" style="
animation-delay: 0.95s; animation-delay: 0.95s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.15s; animation-duration: 0.3s;
" "
>P</span >PARTNERS</a
> >
<span </div>
class="inline-block opacity-0 animate-fade-in-left" </div>
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div> </div>
</nav> </nav>
</div>
</div>
<!-- Menu Grid --> <!-- Menu Grid -->
<div <div

View file

@ -69,7 +69,7 @@
<body class="bg-kh3-black text-white font-montserrat"> <body class="bg-kh3-black text-white font-montserrat">
<!-- Navigation Menu (copied from about.html) --> <!-- Navigation Menu (copied from about.html) -->
<div <div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl" class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
@ -88,38 +88,32 @@
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
>HOME</a>
<!-- ABOUT US - Slightly right --> <!-- ABOUT US - Slightly right -->
<a <a
href="about.html" href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
>ABOUT US</a>
<!-- SERVICES - More right --> <!-- SERVICES - More right -->
<a <a
href="services.html" href="services.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
>SERVICES</a>
<!-- PROJECTS - Most right --> <!-- PROJECTS - Most right -->
<a <a
href="projects.html" href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
>PROJECTS</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
>CONTACTS</a>
<!-- PARTNERS - Back to left --> <!-- PARTNERS - Back to left -->
<a <a
href="partners.html" href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.95s; animation-fill-mode: forwards; animation-duration: 0.3s;">PARTNERS</a>
>PARTNERS</a>
</div> </div>
</div> </div>
</div> </div>