fix: correct mobile layout

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">
@ -28,7 +28,7 @@
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative"> <nav class="flex-1 relative">
@ -37,11 +37,18 @@
<!-- 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" 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="
<span animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>
<span class="md:hidden">HOME</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;
@ -50,7 +57,8 @@
" "
>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"
> style="
<span animation-delay: 0.2s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.15s; "
animation-fill-mode: forwards; >ABOUT US</a
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" 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,243 +197,42 @@
<!-- 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
> >
<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" 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
> >
<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" 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
> >
<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>
</nav> </nav>
</div> </div>
</div> </div>
@ -549,8 +305,8 @@
ABOUT US ABOUT US
</h1> </h1>
<div class="flex-1 h-px bg-white"></div> <div class="flex-1 h-px bg-white"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Right image panel --> <!-- Right image panel -->
@ -624,11 +380,11 @@
> >
DELIVER DELIVER
</h2> </h2>
</div> </div>
</div> </div>
<!-- Subtle underline --> <!-- Subtle underline -->
<div <div
class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0" class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards" style="animation: fadeInUp 1s ease-out 1.2s forwards"
></div> ></div>
@ -685,7 +441,7 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Mission & Vision Section --> <!-- Mission & Vision Section -->
@ -731,7 +487,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg" <span class="text-white text-2xl font-bold drop-shadow-lg"
>01</span >01</span
> >
</div> </div>
<!-- Title with text glow --> <!-- Title with text glow -->
<h2 <h2
@ -849,8 +605,8 @@
We treat all stake holders with politeness, dignity and civility We treat all stake holders with politeness, dignity and civility
that equals the outward beauty of our environment and the that equals the outward beauty of our environment and the
environments we create. environments we create.
</p> </p>
</div> </div>
<div <div
class="text-center opacity-0" class="text-center opacity-0"
@ -865,8 +621,8 @@
deliver on our promises. If forfeiting on our word is beyond our deliver on our promises. If forfeiting on our word is beyond our
human control; we will communicate this transparently and in human control; we will communicate this transparently and in
good time. good time.
</p> </p>
</div> </div>
<div <div
class="text-center opacity-0" class="text-center opacity-0"
@ -879,8 +635,8 @@
<p class="text-lg text-neutral-600 leading-relaxed"> <p class="text-lg text-neutral-600 leading-relaxed">
We our faithful to our mission and vision and that of our We our faithful to our mission and vision and that of our
stakeholders and the organizations they represent. stakeholders and the organizations they represent.
</p> </p>
</div> </div>
</div> </div>
<!-- Row 2: 1 column (middle) --> <!-- Row 2: 1 column (middle) -->
@ -896,9 +652,9 @@
<p class="text-lg text-neutral-600 leading-relaxed"> <p class="text-lg text-neutral-600 leading-relaxed">
We are committed to learning and advancing our services, We are committed to learning and advancing our services,
products, and tools to best serve our stakeholders. products, and tools to best serve our stakeholders.
</p> </p>
</div>
</div> </div>
</div>
<!-- Row 3: 3 columns --> <!-- Row 3: 3 columns -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-16"> <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
@ -914,21 +670,21 @@
We give our utmost attention to all our projects. We do this in We give our utmost attention to all our projects. We do this in
earnest and with precision. earnest and with precision.
</p> </p>
</div> </div>
<div <div
class="text-center opacity-0" class="text-center opacity-0"
style="animation: fadeInUp 1s ease-out 3.6s forwards" style="animation: fadeInUp 1s ease-out 3.6s forwards"
> >
<div <div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45" class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
></div> ></div>
<h3 class="text-2xl font-semibold mb-6">Excellence</h3> <h3 class="text-2xl font-semibold mb-6">Excellence</h3>
<p class="text-lg text-neutral-600 leading-relaxed"> <p class="text-lg text-neutral-600 leading-relaxed">
We are committed to delivering exceptional results in every area We are committed to delivering exceptional results in every area
of our operations. of our operations.
</p> </p>
</div> </div>
<div <div
class="text-center opacity-0" class="text-center opacity-0"
@ -943,13 +699,13 @@
learn and document lessons, bounce back and persist in the learn and document lessons, bounce back and persist in the
pursuit of goals, targets, objectives and deadlines. We do this pursuit of goals, targets, objectives and deadlines. We do this
with focused optimism. with focused optimism.
</p> </p>
</div>
</div> </div>
</div> </div>
</section> </div>
</section>
<!-- Team Section --> <!-- Team Section -->
<section class="py-32 bg-kh3-black text-white"> <section class="py-32 bg-kh3-black text-white">
<div class="container mx-auto px-8 max-w-7xl"> <div class="container mx-auto px-8 max-w-7xl">
<div class="text-center mb-20"> <div class="text-center mb-20">
@ -984,43 +740,24 @@
> >
<!-- Team Member 1 --> <!-- Team Member 1 -->
<div class="group relative"> <div class="group relative">
<div <div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300" class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
> >
<div <div
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center" class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
> >
<span class="text-4xl text-white/60">👤</span> <span class="text-4xl text-white/60">👤</span>
</div> </div>
<div class="text-center"> <div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2"> <h3 class="text-2xl font-bold text-white mb-2">
Team Member Team Member
</h3> </h3>
<p class="text-kh3-red font-medium">Project Manager</p> <p class="text-kh3-red font-medium">Project Manager</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Team Member 2 --> <!-- Team Member 2 -->
<div class="group relative">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
>
<div
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
>
<span class="text-4xl text-white/60">👤</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2">
Team Member
</h3>
<p class="text-kh3-red font-medium">Design Specialist</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="group relative"> <div class="group relative">
<div <div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300" class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
@ -1030,6 +767,25 @@
> >
<span class="text-4xl text-white/60">👤</span> <span class="text-4xl text-white/60">👤</span>
</div> </div>
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2">
Team Member
</h3>
<p class="text-kh3-red font-medium">Design Specialist</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="group relative">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
>
<div
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
>
<span class="text-4xl text-white/60">👤</span>
</div>
<div class="text-center"> <div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2"> <h3 class="text-2xl font-bold text-white mb-2">
Team Member Team Member
@ -1037,8 +793,8 @@
<p class="text-kh3-red font-medium">Construction Lead</p> <p class="text-kh3-red font-medium">Construction Lead</p>
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</section> </section>
</main> </main>
@ -1055,7 +811,7 @@
class="w-12 h-12" class="w-12 h-12"
/> />
<span class="text-2xl font-bold tracking-wider">KH3</span> <span class="text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
<p class="text-neutral-300 leading-relaxed"> <p class="text-neutral-300 leading-relaxed">
Building inspiring spaces through innovative construction and Building inspiring spaces through innovative construction and
design solutions. design solutions.
@ -1067,31 +823,31 @@
<li> <li>
<a <a
href="index.html" href="index.html"
class="text-neutral-300 hover:text-white transition-colors" class="text-neutral-300 hover:text-white transition-colors"
>Home</a >Home</a
>
</li>
<li>
<a
href="about.html"
class="text-neutral-300 hover:text-white transition-colors"
>About Us</a
>
</li>
<li>
<a
href="projects.html"
class="text-neutral-300 hover:text-white transition-colors"
>Projects</a
> >
</li> </li>
<li> <li>
<a <a
href="contact.html" href="about.html"
class="text-neutral-300 hover:text-white transition-colors" class="text-neutral-300 hover:text-white transition-colors"
>Contact</a >About Us</a
> >
</li> </li>
<li>
<a
href="projects.html"
class="text-neutral-300 hover:text-white transition-colors"
>Projects</a
>
</li>
<li>
<a
href="contact.html"
class="text-neutral-300 hover:text-white transition-colors"
>Contact</a
>
</li>
</ul> </ul>
</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,13 +20,13 @@
<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">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div> </div>
@ -37,11 +37,13 @@
<!-- 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" 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;
@ -80,11 +85,13 @@
</a> </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"
> >
<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;
@ -159,11 +173,13 @@
</a> </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"
> >
<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;
@ -317,11 +349,13 @@
</a> </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"
> >
<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">
@ -577,7 +627,7 @@
>DESIGN</span >DESIGN</span
> >
</div> </div>
</div> </div>
<!-- DELIVER --> <!-- DELIVER -->
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
@ -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,468 +31,95 @@
<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-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" style="
> animation-delay: 0.05s;
<span animation-fill-mode: forwards;
class="inline-block opacity-0 animate-fade-in-left" animation-duration: 0.3s;
style=" "
animation-delay: 0.05s; >HOME</a
animation-fill-mode: forwards; >
animation-duration: 0.15s; <a
" href="about.html"
>H</span 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="
<span animation-delay: 0.2s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.075s; "
animation-fill-mode: forwards; >ABOUT US</a
animation-duration: 0.15s; >
" <a
>O</span 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"
<span style="
class="inline-block opacity-0 animate-fade-in-left" animation-delay: 0.35s;
style=" animation-fill-mode: forwards;
animation-delay: 0.1s; animation-duration: 0.3s;
animation-fill-mode: forwards; "
animation-duration: 0.15s; >SERVICES</a
" >
>M</span <a
> href="projects.html"
<span 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"
class="inline-block opacity-0 animate-fade-in-left" style="
style=" animation-delay: 0.55s;
animation-delay: 0.125s; animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-duration: 0.3s;
animation-duration: 0.15s; "
" >PROJECTS</a
>E</span >
> <a
</a> href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
<!-- ABOUT US --> style="
<a animation-delay: 0.75s;
href="about.html" animation-fill-mode: forwards;
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat" animation-duration: 0.3s;
> "
<span >CONTACTS</a
class="inline-block opacity-0 animate-fade-in-left" >
style=" <a
animation-delay: 0.15s; href="partners.html"
animation-fill-mode: forwards; 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"
animation-duration: 0.15s; style="
" animation-delay: 0.95s;
>A</span animation-fill-mode: forwards;
> animation-duration: 0.3s;
<span "
class="inline-block opacity-0 animate-fade-in-left" >PARTNERS</a
style=" >
animation-delay: 0.175s; </div>
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 -->
<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 -->
<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 -->
<a
href="contact.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.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 - Active -->
<a
href="partners.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 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>
</nav>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div> </div>
</div> </div>
</nav>
</div>
</div>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div> </div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<main class="pt-20"> <main class="pt-20">

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,468 +31,105 @@
<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-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat" style="
> animation-delay: 0.05s;
<span animation-fill-mode: forwards;
class="inline-block opacity-0 animate-fade-in-left" animation-duration: 0.3s;
style=" "
animation-delay: 0.05s; >HOME</a
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 --> <!-- 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"
> style="
<span animation-delay: 0.2s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.15s; "
animation-fill-mode: forwards; >ABOUT US</a
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 --> <!-- 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"
> style="
<span animation-delay: 0.35s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.35s; "
animation-fill-mode: forwards; >SERVICES</a
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 - 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"
> style="
<span animation-delay: 0.55s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.55s; "
animation-fill-mode: forwards; >PROJECTS</a
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 --> <!-- 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"
> style="
<span animation-delay: 0.75s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.75s; "
animation-fill-mode: forwards; >CONTACTS</a
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 --> <!-- 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"
> style="
<span animation-delay: 0.95s;
class="inline-block opacity-0 animate-fade-in-left" animation-fill-mode: forwards;
style=" animation-duration: 0.3s;
animation-delay: 0.95s; "
animation-fill-mode: forwards; >PARTNERS</a
animation-duration: 0.15s; >
" </div>
>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>
</nav>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div> </div>
</div> </div>
</nav>
</div>
</div>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
</div> </div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<main class="pt-20"> <main class="pt-20">

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>