898 lines
30 KiB
HTML
898 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>KH3 - Building Inspiring Spaces</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<meta
|
|
name="description"
|
|
content="KH3 - Construction Project Management and Fit-out Services in Accra, Ghana. Building inspiring spaces since 2014."
|
|
/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
|
|
<!-- Preload critical resources -->
|
|
<link
|
|
rel="preload"
|
|
href="assets/images/optimized/room_optimized.jpg"
|
|
as="image"
|
|
/>
|
|
<link rel="preload" href="styles/main.css" as="style" />
|
|
<link rel="preload" href="js/main.js" as="script" />
|
|
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
|
<!-- Navigation Menu -->
|
|
<div
|
|
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"
|
|
>
|
|
<div class="p-8 flex flex-col h-full">
|
|
<!-- Logo -->
|
|
<div class="flex items-center gap-3 mb-12">
|
|
<a
|
|
href="index.html"
|
|
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
|
|
>
|
|
<img
|
|
src="assets/images/optimized/kh3_logo_optimized.png"
|
|
alt="KH3"
|
|
class="w-12 h-12"
|
|
loading="lazy"
|
|
width="64"
|
|
height="64"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Links - Inverted C Layout -->
|
|
<nav class="flex-1 relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="relative ml-8">
|
|
<!-- Navigation items in inverted C shape -->
|
|
<div class="space-y-6">
|
|
<!-- HOME - Top -->
|
|
<a
|
|
href="index.html"
|
|
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"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
>
|
|
<span class="md:hidden">HOME</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.05s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.075s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.1s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.125s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>E</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHY - Slightly right -->
|
|
<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;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHY</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.225s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.25s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>Y</span
|
|
>
|
|
</a>
|
|
|
|
<!-- HOW - More right -->
|
|
<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;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">HOW</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.35s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.375s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHAT - Most right -->
|
|
<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;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHAT</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.55s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.575s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.6s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.625s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
</a>
|
|
|
|
<!-- WHO - New position -->
|
|
<a
|
|
href="who.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.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">WHO</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.65s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>W</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.675s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>H</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
</a>
|
|
|
|
<!-- CONTACTS - More right -->
|
|
<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"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.3s;
|
|
"
|
|
data-trans="crossfade"
|
|
>
|
|
<span class="md:hidden">CONTACTS</span>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.75s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.775s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>O</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.8s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>N</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.825s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.85s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>A</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.875s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.9s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>T</span
|
|
>
|
|
<span
|
|
class="hidden md:inline"
|
|
style="
|
|
animation-delay: 0.925s;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.15s;
|
|
"
|
|
>S</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Layout -->
|
|
<div class="min-h-screen relative">
|
|
<section
|
|
class="relative h-[100svh] md:min-h-screen flex flex-col md:flex-row hero-section"
|
|
>
|
|
<!-- KH3 Logo -->
|
|
<div
|
|
class="absolute top-6 md:top-8 left-8 z-20 opacity-0 animate-fade-in-left"
|
|
style="animation-delay: 0.2s; animation-fill-mode: forwards"
|
|
>
|
|
<a
|
|
href="index.html"
|
|
class="flex flex-col items-start gap-2 animate-logo-float hover:opacity-80 transition-opacity"
|
|
>
|
|
<img
|
|
src="assets/images/optimized/kh3_logo_optimized.png"
|
|
alt="KH3"
|
|
class="w-16 h-16"
|
|
loading="lazy"
|
|
width="64"
|
|
height="64"
|
|
/>
|
|
<h1 class="text-lg md:text-xl font-semibold text-white">
|
|
KH3 Group
|
|
</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Menu Toggle with Homepage/WHY structure -->
|
|
<div
|
|
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
|
>
|
|
<div class="cursor-pointer" id="menuToggle">
|
|
<!-- Desktop view: menuWrap with waves and outline -->
|
|
<div class="relative inline-block hidden md:block" id="menuWrap">
|
|
<div class="menu-waves" aria-hidden="true">
|
|
<span class="wave"></span>
|
|
<span class="wave"></span>
|
|
<span class="wave"></span>
|
|
</div>
|
|
<div class="menu-outline" aria-hidden="true"></div>
|
|
<div class="relative" id="menuGrid">
|
|
<img
|
|
src="assets/images/optimized/closed_petal_optimized.png"
|
|
alt="closed petal"
|
|
class="w-6 h-6"
|
|
loading="lazy"
|
|
width="24"
|
|
height="24"
|
|
/>
|
|
</div>
|
|
<div
|
|
id="menuPetal"
|
|
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
|
>
|
|
<img
|
|
src="assets/images/optimized/open_petal_optimized.png"
|
|
alt="petal"
|
|
class="w-8 h-8"
|
|
loading="lazy"
|
|
width="32"
|
|
height="32"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile view: simple transparent background -->
|
|
<div class="md:hidden">
|
|
<div
|
|
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
|
>
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
<span class="w-1 h-1 bg-white rounded-full"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LEFT COLUMN -->
|
|
<div
|
|
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-4 pt-8 md:p-8 md:pt-8 h-[20vh] md:h-auto shrink-0 opacity-0 animate-fade-in-left dream-design-deliver"
|
|
style="animation-delay: 0.8s; animation-fill-mode: forwards"
|
|
>
|
|
<div class="max-w-xl space-y-2 hidden md:block">
|
|
<div class="flex flex-col space-y-8">
|
|
<!-- DREAM -->
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
<div
|
|
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
|
|
></div>
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
</div>
|
|
<div class="flex items-center h-16">
|
|
<span
|
|
class="text-xs md:text-sm tracking-widest text-neutral-400"
|
|
>DREAM</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DESIGN -->
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
<div
|
|
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
|
|
></div>
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
</div>
|
|
<div class="flex items-center h-16">
|
|
<span
|
|
class="text-xs md:text-sm tracking-widest text-neutral-400"
|
|
>DESIGN</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DELIVER -->
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
<div
|
|
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
|
|
></div>
|
|
<div class="w-px h-8 bg-kh3-red"></div>
|
|
</div>
|
|
<div class="flex items-center h-16">
|
|
<span
|
|
class="text-xs md:text-sm tracking-widest text-neutral-400"
|
|
>DELIVER</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN -->
|
|
<div
|
|
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden flex-1 min-h-0 md:flex-none"
|
|
style="animation-delay: 0.3s; animation-fill-mode: forwards"
|
|
>
|
|
<div class="relative h-full md:h-full">
|
|
<!-- Current Image -->
|
|
<img
|
|
id="currentImg"
|
|
src="assets/images/optimized/room_optimized.jpg"
|
|
alt="Sample interior fit-out by KH3"
|
|
class="absolute inset-0 w-full h-full object-cover"
|
|
loading="eager"
|
|
width="1920"
|
|
height="1080"
|
|
/>
|
|
<!-- Next Image (hidden initially) -->
|
|
<img
|
|
id="nextImg"
|
|
src="assets/images/optimized/chair_optimized.jpg"
|
|
alt="Sample interior fit-out by KH3"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-0"
|
|
loading="lazy"
|
|
width="1920"
|
|
height="1080"
|
|
/>
|
|
<div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
|
|
|
|
<!-- Mobile CTA bar on image -->
|
|
<div
|
|
class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
|
|
style="
|
|
animation: fadeInUp 0.8s ease-out 1.2s forwards;
|
|
bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
|
|
"
|
|
>
|
|
<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"
|
|
>Why</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>
|
|
</div>
|
|
|
|
<!-- Why Button - Bottom Center -->
|
|
<div
|
|
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"
|
|
>
|
|
<a
|
|
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"
|
|
data-trans
|
|
>
|
|
Why
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Contact Link - Bottom Right -->
|
|
<div
|
|
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"
|
|
>
|
|
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
|
<a
|
|
href="who.html"
|
|
data-trans
|
|
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
|
|
>
|
|
WHO
|
|
</a>
|
|
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Custom Cursor -->
|
|
<div
|
|
class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
|
|
id="customCursor"
|
|
></div>
|
|
|
|
<!-- Loading Screen -->
|
|
<div
|
|
class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center"
|
|
id="loadingScreen"
|
|
>
|
|
<div class="text-center">
|
|
<a
|
|
href="index.html"
|
|
class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"
|
|
>
|
|
<img
|
|
src="assets/images/optimized/kh3_logo_optimized.png"
|
|
alt="KH3"
|
|
class="w-16 h-16"
|
|
loading="lazy"
|
|
width="64"
|
|
height="64"
|
|
/>
|
|
</a>
|
|
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
|
|
<div class="h-full bg-kh3-red rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Homepage menu button ripple animation */
|
|
#menuGrid span {
|
|
will-change: transform, opacity, filter;
|
|
animation: menuCellPulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
/* Waves container */
|
|
#menuWrap {
|
|
position: relative;
|
|
overflow: visible; /* allow waves to extend beyond the outline */
|
|
}
|
|
.menu-waves {
|
|
position: absolute;
|
|
inset: -20px; /* enlarge field so waves can grow much bigger */
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
/* Icon swap (homepage only): show petal when wrapper has .open */
|
|
#menuWrap.open #menuPetal {
|
|
opacity: 1;
|
|
}
|
|
#menuWrap.open #menuGrid {
|
|
opacity: 0;
|
|
}
|
|
.menu-outline {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
outline: 1px solid rgba(255, 255, 255, 0.6);
|
|
outline-offset: 6px;
|
|
}
|
|
|
|
/* Hide menu outline on mobile */
|
|
@media (max-width: 768px) {
|
|
.menu-outline {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Create a proper button container for mobile */
|
|
#menuGrid {
|
|
background: rgba(255, 255, 255, 0.12) !important;
|
|
border-radius: 8px !important;
|
|
padding: 6px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
}
|
|
}
|
|
.menu-waves .wave {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
animation: waveBurst 5.8s ease-in-out infinite; /* ~4s idle + ~1.8s burst */
|
|
will-change: transform, opacity;
|
|
}
|
|
.menu-waves .wave:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
.menu-waves .wave:nth-child(2) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.menu-waves .wave:nth-child(3) {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
/* Center-out delay matrix (3x3) */
|
|
#menuGrid span:nth-child(1),
|
|
#menuGrid span:nth-child(3),
|
|
#menuGrid span:nth-child(7),
|
|
#menuGrid span:nth-child(9) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
#menuGrid span:nth-child(2),
|
|
#menuGrid span:nth-child(4),
|
|
#menuGrid span:nth-child(6),
|
|
#menuGrid span:nth-child(8) {
|
|
animation-delay: 0.12s;
|
|
}
|
|
#menuGrid span:nth-child(5) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
@keyframes menuCellPulse {
|
|
0% {
|
|
opacity: 0.7;
|
|
transform: scale(1);
|
|
filter: brightness(1);
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
transform: scale(1.12);
|
|
filter: brightness(1.35);
|
|
}
|
|
100% {
|
|
opacity: 0.7;
|
|
transform: scale(1);
|
|
filter: brightness(1);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#menuGrid span {
|
|
animation: none !important;
|
|
}
|
|
.menu-waves .wave {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Idle for ~4s, then run one burst (~1.8s), repeat */
|
|
@keyframes waveBurst {
|
|
0%,
|
|
69% {
|
|
/* idle segment (~4s of 5.8s) */
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
77% {
|
|
opacity: 0.38;
|
|
transform: scale(1.18, 1.12);
|
|
}
|
|
92% {
|
|
opacity: 0.22;
|
|
transform: scale(1.55, 1.42);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.95, 1.75);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, 20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes pageEnter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pageExit {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
/* Page transition animations */
|
|
@keyframes staggerFadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
0% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(-100%) scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
0% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(100%) scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInFromLeft {
|
|
0% {
|
|
transform: translateX(-100%) scale(1.3);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInFromRight {
|
|
0% {
|
|
transform: translateX(100%) scale(1.3);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Hero section class for targeting */
|
|
|
|
/* Mobile menu button styling */
|
|
@media (max-width: 768px) {
|
|
#menuGrid {
|
|
background: rgba(255, 255, 255, 0.12) !important;
|
|
border-radius: 8px !important;
|
|
padding: 6px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="js/main.js" defer></script>
|
|
<script src="js/hero-animations.js" defer></script>
|
|
<script src="js/page-transitions.js" defer></script>
|
|
<script src="js/menu-animations.js" defer></script>
|
|
<script src="js/loading-screen.js" defer></script>
|
|
<script>
|
|
// Minimal inline script for critical functionality
|
|
console.log("KH3 Website loaded successfully");
|
|
</script>
|
|
</body>
|
|
</html>
|