Compare commits

..

No commits in common. "35b0d1aa763ebab8be22b40a8a226edd18734149" and "9111542693a4d6535eb53e572a83b46a5afef4c6" have entirely different histories.

7 changed files with 39 additions and 79 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 186 KiB

Before After
Before After

View file

@ -372,7 +372,8 @@
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
<span class="text-white text-2xl font-bold tracking-wider"
<span
class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
>KH3</span
>
</a>

View file

@ -34,7 +34,7 @@
>KH3</span
>
</a>
</div>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -349,12 +349,12 @@
>S</span
>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
@ -368,7 +368,7 @@
>KH3</span
>
</a>
</div>
</div>
<!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 z-40">
@ -386,21 +386,21 @@
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
<!-- Hero Section -->
<section class="relative bg-kh3-black hero-section">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center">
<div class="relative bg-kh3-black flex items-center justify-center">
<!-- Vertical timeline with diamonds -->
<div
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
style="animation: fadeInUp 800ms ease-out 1200ms forwards"
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
style="animation-delay: 1200ms; animation-fill-mode: forwards"
>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@ -412,10 +412,10 @@
</div>
<!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full">
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
<div
class="flex items-center gap-6 opacity-0"
style="animation: fadeInUp 800ms ease-out 1600ms forwards"
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
style="animation-delay: 1600ms; animation-fill-mode: forwards"
>
<div class="flex-1 h-px bg-white"></div>
<h1
@ -429,12 +429,13 @@
</div>
<!-- Right image panel -->
<div class="relative overflow-hidden">
<div class="relative overflow-hidden pt-20 z-10">
<!-- Current image -->
<img
id="projectsCurrentImg"
src="assets/images/room.png"
alt="KH3 Projects"
class="w-full h-full object-cover opacity-0"
class="w-full h-full object-cover opacity-0 absolute inset-0"
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
/>
<!-- Next image (for transitions) -->
@ -447,8 +448,8 @@
<!-- Down arrow prompt -->
<button
id="projectsScrollArrow"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
style="animation: fadeInUp 800ms ease-out 1900ms forwards"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0 animate-fade-in-up"
style="animation-delay: 1900ms; animation-fill-mode: forwards"
>
<span class="text-xs tracking-widest mb-2">SCROLL</span>
<svg
@ -481,7 +482,7 @@
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
data-category="all"
>
ALL PROJECTS
ALL WHAT
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
@ -551,7 +552,7 @@
id="modalCategory"
class="text-kh3-red text-sm font-medium tracking-wider"
></p>
</div>
</div>
<button
id="closeModal"
class="text-white/70 hover:text-white transition-colors duration-300"
@ -570,7 +571,7 @@
></path>
</svg>
</button>
</div>
</div>
<!-- Modal Body -->
<div class="flex flex-col lg:flex-row h-full">
@ -592,8 +593,8 @@
>
<div id="imageDots" class="flex space-x-2">
<!-- Dots will be generated here -->
</div>
</div>
</div>
</div>
<!-- Previous/Next Buttons -->
<button
@ -639,9 +640,9 @@
>
<span id="imageCounter">1</span> /
<span id="totalImages">1</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Details Section -->
<div
@ -660,7 +661,7 @@
id="modalDescription"
class="text-white/80 text-sm leading-relaxed"
></p>
</div>
</div>
<!-- Project Details -->
<div>

View file

@ -544,11 +544,11 @@
<section class="relative bg-kh3-black hero-section">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center">
<div class="relative bg-kh3-black flex items-center justify-center">
<!-- Vertical timeline with diamonds -->
<div
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
style="animation: fadeInUp 800ms ease-out 1200ms forwards"
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
style="animation-delay: 1200ms; animation-fill-mode: forwards;"
>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@ -560,10 +560,10 @@
</div>
<!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full">
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
<div
class="flex items-center gap-6 opacity-0"
style="animation: fadeInUp 800ms ease-out 1600ms forwards"
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
style="animation-delay: 1600ms; animation-fill-mode: forwards;"
>
<div class="flex-1 h-px bg-white"></div>
<h1
@ -577,13 +577,13 @@
</div>
<!-- Right image panel -->
<div class="relative overflow-hidden">
<div class="relative overflow-hidden pt-32 z-10">
<!-- Current image -->
<img
id="servicesCurrentImg"
src="assets/images/room.png"
alt="KH3 Services"
class="w-full h-full object-cover opacity-0"
class="w-full h-full object-cover opacity-0 absolute inset-0"
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
/>
<!-- Next image (for transitions) -->

View file

@ -1428,10 +1428,6 @@ video {
gap: 2rem;
}
.gap-2 {
gap: 0.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -1693,11 +1689,6 @@ video {
background-color: transparent;
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
}
@ -1992,10 +1983,6 @@ video {
padding-right: 2rem;
}
.pl-8 {
padding-left: 2rem;
}
.text-center {
text-align: center;
}
@ -2544,10 +2531,6 @@ video {
top: 7rem;
}
.md\:left-12 {
left: 3rem;
}
.md\:ml-12 {
margin-left: 3rem;
}
@ -2592,14 +2575,6 @@ video {
width: 2rem;
}
.md\:w-16 {
width: 4rem;
}
.md\:flex-1 {
flex: 1 1 0%;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -2620,14 +2595,6 @@ video {
align-items: center;
}
.md\:justify-center {
justify-content: center;
}
.md\:gap-6 {
gap: 1.5rem;
}
.md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
@ -2668,10 +2635,6 @@ video {
padding-top: 2rem;
}
.md\:pl-28 {
padding-left: 7rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -2763,11 +2726,6 @@ video {
.lg\:gap-24 {
gap: 6rem;
}
.lg\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 1280px) {

View file

@ -492,7 +492,7 @@
</div>
<!-- Team Members Grid -->
<div class="mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6">
<div class="mt-20" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;">
<!-- Team Member 1 -->
<div class="group relative team-card" data-card-index="0">
<div