support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-10-16 18:41:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: change menu nav names
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-08-29 18:42:22 -04:00
parent 1c9a335d26
commit 1d80addd7a
8 changed files with 2452 additions and 700 deletions
Download patch file Download diff file Expand all files Collapse all files

752
about.html
View file

@ -24,10 +24,12 @@
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<!-- 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/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>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
@ -127,8 +129,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<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;
@ -217,6 +219,47 @@
>
</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"
@ -415,11 +458,11 @@
</button>
</div>
</div>
</section>
</section>
<!-- Dream Design Deliver Section -->
<section class="py-20 bg-kh3-black text-white relative dream-design-deliver">
<div class="container mx-auto px-8 max-w-6xl">
<div class="container mx-auto px-8 max-w-6xl">
<div class="text-center">
<!-- Elegant horizontal layout -->
<div
@ -434,7 +477,7 @@
DREAM
</h2>
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
</div>
</div>
<!-- DESIGN -->
<div class="flex items-center space-x-3">
@ -444,7 +487,7 @@
DESIGN
</h2>
<div class="w-2 h-2 bg-kh3-red rounded-full"></div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center space-x-3">
@ -453,15 +496,15 @@
>
DELIVER
</h2>
</div>
</div>
</div>
</div>
<!-- Subtle underline -->
<div
class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards"
></div>
</div>
</div>
</div>
</section>
@ -512,10 +555,10 @@
>Enterprise Group Limited</span
>.
</p>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
<!-- Mission & Vision Section -->
<section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
@ -560,7 +603,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg"
>01</span
>
</div>
</div>
<!-- Title with text glow -->
<h2
@ -580,8 +623,8 @@
>
Out of the ordinary the Extraordinary that inspires the
world.
</p>
</div>
</p>
</div>
</div>
</div>
@ -624,7 +667,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg"
>02</span
>
</div>
</div>
<!-- Title with text glow -->
<h2
@ -669,8 +712,8 @@
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 2.6s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div>
<h3
@ -690,11 +733,11 @@
<!-- Empty middle column for H layout -->
<div class="hidden md:block"></div>
<div
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 3s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div>
<h3
@ -710,7 +753,7 @@
human control; we will communicate this transparently and in
good time.
</p>
</div>
</div>
</div>
<!-- Row 2: All three columns -->
@ -735,11 +778,11 @@
</p>
</div>
<div
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 3.4s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div>
<h3
@ -772,9 +815,9 @@
>
We are committed to delivering exceptional results in every area
of our operations.
</p>
</div>
</p>
</div>
</div>
<!-- Row 3: First and Third columns only -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
@ -827,568 +870,7 @@
</div>
</section>
<!-- Team Section -->
<section class="py-32 bg-kh3-black text-white team-section">
<div class="container mx-auto px-8 max-w-7xl">
<div class="text-center mb-20">
<!-- Main Title -->
<h2 class="text-6xl md:text-8xl font-bold mb-8">
<span class="text-white">KH3</span>
<span class="text-kh3-red">TEAM</span>
</h2>
<!-- Subtitle with line -->
<div class="flex items-center justify-center mb-8">
<div class="w-16 h-px bg-white"></div>
<span class="text-white text-xl font-medium mx-4 tracking-wider"
>MEET THE KH3 TEAM</span
>
<div class="w-16 h-px bg-white"></div>
</div>
<!-- Description -->
<p
class="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed tracking-wide"
>
WE'RE AN EVER-EXPANDING FAMILY OF DESIGN AND CONSTRUCTION
CRAFTSMEN AND PROJECT MANAGEMENT EXPERTS WHO BELIEVE IN DELIVERING
HIGH QUALITY SOLUTIONS.
</p>
</div>
<!-- Team Members Grid -->
<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
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/kweku_hayford.png"
alt="Kweku HAYFORD"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Kweku HAYFORD
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Director
</p>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="group relative team-card" data-card-index="1">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/hanetta.png"
alt="Hanetta HAYFORD"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Hanetta HAYFORD
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Head, Projects
</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="group relative team-card" data-card-index="2">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/yayra.png"
alt="D. Yayra NUMETU"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
D. Yayra NUMETU
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Head, Finance & Administration
</p>
</div>
</div>
</div>
<!-- Team Member 4 -->
<div class="group relative team-card" data-card-index="3">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/fauzia.png"
alt="Fauzia ABDEL-MAJEED, PMP"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Fauzia ABDEL-MAJEED, PMP
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Head, Strategy
</p>
</div>
</div>
</div>
<!-- Team Member 5 -->
<div class="group relative team-card" data-card-index="4">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/miranda.png"
alt="Miranda LARYEA"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Miranda LARYEA
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Administration
</p>
</div>
</div>
</div>
<!-- Team Member 6 -->
<div class="group relative team-card" data-card-index="5">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/helena.png"
alt="Helena NTIRI AMANKWAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Helena NTIRI AMANKWAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Procurement
</p>
</div>
</div>
</div>
<!-- Team Member 7 -->
<div class="group relative team-card" data-card-index="6">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/michael.png"
alt="Michael LARTEY"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Michael LARTEY
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Projects
</p>
</div>
</div>
</div>
<!-- Team Member 8 -->
<div class="group relative team-card" data-card-index="7">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/francis.png"
alt="Francis OPARE"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Francis OPARE
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Finance
</p>
</div>
</div>
</div>
<!-- Team Member 9 -->
<div class="group relative team-card" data-card-index="8">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/andrews.png"
alt="Andrews Amon KOTEY"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Andrews Amon KOTEY
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Design
</p>
</div>
</div>
</div>
<!-- Team Member 10 -->
<div class="group relative team-card" data-card-index="9">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/moses.png"
alt="Moses ARMAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Moses ARMAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 11 -->
<div class="group relative team-card" data-card-index="10">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/dorothea.png"
alt="Dorothea ADJETEY"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Dorothea ADJETEY
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 12 -->
<div class="group relative team-card" data-card-index="11">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/claribel.png"
alt="Claribel ARMAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Claribel ARMAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 13 -->
<div class="group relative team-card" data-card-index="12">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/daniel.png"
alt="Daniel THOMPSON"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Daniel THOMPSON
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 14 -->
<div class="group relative team-card" data-card-index="13">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/joyleen.png"
alt="Joyleen Therson-COFFIE"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Joyleen Therson-COFFIE
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 15 -->
<div class="group relative team-card" data-card-index="14">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/rebecca.png"
alt="Rebecca SAM"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Rebecca SAM
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 16 -->
<div class="group relative team-card" data-card-index="15">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/siisi.png"
alt="Siisi NKETSIAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Siisi NKETSIAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Tech Support
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
@ -1396,14 +878,14 @@
<div class="container mx-auto px-8 max-w-6xl">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
<div>
<div class="flex items-center gap-3 mb-6">
<img
src="assets/images/kh3_logo.png"
alt="KH3"
class="w-12 h-12"
/>
<a href="index.html" class="flex items-center gap-3 mb-6 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo.png"
alt="KH3"
class="w-12 h-12"
/>
<span class="text-2xl font-bold tracking-wider">KH3</span>
</div>
</a>
<p class="text-neutral-300 leading-relaxed">
Building inspiring spaces through innovative construction and
design solutions.
@ -1413,7 +895,7 @@
<h3 class="text-xl font-semibold mb-6">Quick Links</h3>
<ul class="space-y-3">
<li>
<a
<a
href="index.html"
class="text-neutral-300 hover:text-white transition-colors"
>Home</a
@ -1470,15 +952,15 @@
class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center"
id="loadingScreen"
>
<div class="text-center">
<div class="flex items-center gap-3 mb-8">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-16 h-16"
/>
<span class="text-4xl font-bold tracking-wider">KH3</span>
</div>
<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/kh3_logo_dark.png"
alt="KH3"
class="w-16 h-16"
/>
<span class="text-4xl font-bold tracking-wider">KH3</span>
</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>
@ -2146,31 +1628,7 @@
}
});
// Team section scroll animations
const teamSection = document.querySelector('.py-32.bg-kh3-black');
const teamCards = document.querySelectorAll('.team-card');
if (teamSection) {
const teamObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Add floating animation to all team cards
teamCards.forEach((card, index) => {
setTimeout(() => {
card.classList.add('floating');
}, index * 150); // Stagger the start for all 16 cards
});
teamObserver.unobserve(entry.target);
}
});
},
{ threshold: 0.3 }
);
teamObserver.observe(teamSection);
}
// Page transition functionality
function handlePageTransition(e) {
@ -2184,7 +1642,6 @@
document.querySelector('.dream-design-deliver'),
document.querySelector('.mission-vision'),
document.querySelector('.values-section'),
document.querySelector('.team-section'),
document.querySelector('main')
].filter(el => el);
@ -2218,6 +1675,35 @@
window.location.reload();
}
});
// Auto-scroll to content after 3 seconds
setTimeout(() => {
// Scroll just slightly to hint at content below (1.1 viewport heights)
const targetScroll = window.innerHeight * 1.1;
// Create a smooth, gradual scroll animation
const startScroll = window.pageYOffset;
const distance = targetScroll - startScroll;
const duration = 4000; // 4 seconds for slower, smoother animation
let start = null;
function animateScroll(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const progress = Math.min(timeElapsed / duration, 1);
// Easing function for smooth deceleration
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
window.scrollTo(0, startScroll + distance * easeOutQuart);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}, 3000);
</script>
</body>
</html>

63
contact.html
View file

@ -26,10 +26,12 @@
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<!-- 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/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>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
@ -89,8 +91,8 @@
</a>
<!-- WHY - Slightly right -->
<a
href="about.html"
<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;
@ -130,8 +132,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<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;
@ -220,6 +222,47 @@
>
</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"
@ -314,7 +357,7 @@
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
@ -323,8 +366,8 @@
<span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span
>
</a>
</div>
</div>
<!-- Menu Toggle -->
<div class="fixed top-6 right-8 z-40">
@ -650,14 +693,14 @@
<div
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
>
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-12 h-12"
/>
<span class="text-2xl font-bold tracking-wider">KH3</span>
</div>
</a>
<div class="flex space-x-8">
<a
href="contact.html"

72
index.html
View file

@ -26,8 +26,15 @@
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<div class="flex items-center gap-3 mb-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>
<a
href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<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
>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
@ -39,7 +46,7 @@
<!-- HOME - Top -->
<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"
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;
@ -217,6 +224,47 @@
>
</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"
@ -319,7 +367,10 @@
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
style="animation-delay: 0.2s; animation-fill-mode: forwards"
>
<div class="flex items-center gap-3 animate-logo-float">
<a
href="index.html"
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
>
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
@ -329,7 +380,7 @@
class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow"
>KH3</span
>
</div>
</a>
</div>
<!-- Menu Grid -->
@ -475,11 +526,11 @@
>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
<a
href="contact.html"
href="who.html"
data-trans
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
>
CONTACTS
WHO
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
@ -519,14 +570,17 @@
id="loadingScreen"
>
<div class="text-center">
<div class="flex items-center gap-3 mb-8">
<a
href="index.html"
class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"
>
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-16 h-16"
/>
<span class="text-4xl font-bold tracking-wider">KH3</span>
</div>
</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>

83
js/main.js
View file

@ -22,21 +22,12 @@ function initNavigation() {
// Only initialize if elements exist
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
// Transform back to grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
@ -48,26 +39,16 @@ function initNavigation() {
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Transform to red X
menuGrid.innerHTML = `
<svg class="w-6 h-6 text-kh3-red hover:text-white transition-colors" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
}
});
@ -76,10 +57,18 @@ function initNavigation() {
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
// Transform back to grid
menuGrid.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>
`;
isMenuOpen = false;
}
});
@ -88,10 +77,18 @@ function initNavigation() {
navLinks.forEach((link) => {
link.addEventListener("click", function () {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
// Transform back to grid
menuGrid.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>
`;
isMenuOpen = false;
});
});
@ -100,10 +97,18 @@ function initNavigation() {
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
// Transform back to grid
menuGrid.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>
`;
isMenuOpen = false;
}
});

59
projects.html
View file

@ -25,8 +25,15 @@
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<div class="flex items-center gap-3 mb-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>
<a
href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<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
>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
@ -216,6 +223,47 @@
>
</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"
@ -310,7 +358,10 @@
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<a
href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
@ -320,7 +371,7 @@
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span
>
</div>
</a>
</div>
<!-- Menu Toggle with Transparent Background -->

82
services.html
View file

@ -175,11 +175,13 @@
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<!-- 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/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div>
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -368,6 +370,47 @@
>
</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"
@ -462,7 +505,7 @@
<!-- Static Logo and Menu (copied from about.html) -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
@ -472,7 +515,7 @@
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span
>
</div>
</a>
</div>
<!-- Menu Toggle with Transparent Background -->
@ -1153,6 +1196,35 @@
window.location.reload();
}
});
// Auto-scroll to content after 3 seconds
setTimeout(() => {
// Scroll just slightly to hint at content below (1.1 viewport heights)
const targetScroll = window.innerHeight * 1.1;
// Create a smooth, gradual scroll animation
const startScroll = window.pageYOffset;
const distance = targetScroll - startScroll;
const duration = 4000; // 4 seconds for slower, smoother animation
let start = null;
function animateScroll(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const progress = Math.min(timeElapsed / duration, 1);
// Easing function for smooth deceleration
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
window.scrollTo(0, startScroll + distance * easeOutQuart);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}, 3000);
</script>
<script src="js/main.js"></script>
<script>

208
styles/output.css
View file

@ -733,6 +733,22 @@ video {
top: 7rem;
}
.-bottom-2 {
bottom: -0.5rem;
}
.-left-2 {
left: -0.5rem;
}
.-right-2 {
right: -0.5rem;
}
.-top-2 {
top: -0.5rem;
}
.-z-10 {
z-index: -10;
}
@ -843,6 +859,14 @@ video {
margin-bottom: 0.75rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
@ -950,6 +974,22 @@ video {
height: 20rem;
}
.h-0\.5 {
height: 0.125rem;
}
.h-24 {
height: 6rem;
}
.h-3\/4 {
height: 75%;
}
.h-4 {
height: 1rem;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
@ -1050,6 +1090,14 @@ video {
width: 1px;
}
.w-1\/2 {
width: 50%;
}
.w-4 {
width: 1rem;
}
.min-w-0 {
min-width: 0px;
}
@ -1133,11 +1181,41 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1 {
--tw-translate-x: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-45 {
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
@ -1464,6 +1542,14 @@ video {
border-top-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-r-2 {
border-right-width: 2px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@ -1599,6 +1685,10 @@ video {
background-color: rgb(0 0 0 / 0.95);
}
.bg-transparent {
background-color: transparent;
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
}
@ -1666,6 +1756,16 @@ video {
--tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-kh3-red\/40 {
--tw-gradient-to: rgb(176 48 55 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(176 48 55 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/10 {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#1b2021\] {
--tw-gradient-to: #1b2021 var(--tw-gradient-to-position);
}
@ -1806,6 +1906,31 @@ video {
padding-bottom: 0.25rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
@ -1850,6 +1975,14 @@ video {
padding-bottom: 0.5rem;
}
.pl-20 {
padding-left: 5rem;
}
.pr-8 {
padding-right: 2rem;
}
.text-center {
text-align: center;
}
@ -2060,6 +2193,11 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-xl {
--tw-blur: blur(24px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -2176,6 +2314,15 @@ video {
border-color: rgb(176 48 55 / var(--tw-border-opacity, 1));
}
.hover\:border-red-700:hover {
--tw-border-opacity: 1;
border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.hover\:border-white\/40:hover {
border-color: rgb(255 255 255 / 0.4);
}
.hover\:bg-kh3-grey\/30:hover {
background-color: rgb(142 144 137 / 0.3);
}
@ -2203,6 +2350,10 @@ video {
background-color: rgb(0 0 0 / 0.7);
}
.hover\:tracking-\[0\.3em\]:hover {
letter-spacing: 0.3em;
}
.hover\:text-kh3-red:hover {
--tw-text-opacity: 1;
color: rgb(176 48 55 / var(--tw-text-opacity, 1));
@ -2218,6 +2369,26 @@ video {
color: rgb(33 40 41 / var(--tw-text-opacity, 1));
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-red-500\/25:hover {
--tw-shadow-color: rgb(239 68 68 / 0.25);
--tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-red-500\/50:hover {
--tw-shadow-color: rgb(239 68 68 / 0.5);
--tw-shadow: var(--tw-shadow-colored);
}
.focus\:border-transparent:focus {
border-color: transparent;
}
@ -2242,6 +2413,16 @@ video {
width: 8rem;
}
.group:hover .group-hover\:translate-x-2 {
--tw-translate-x: 0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-full {
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -2259,6 +2440,17 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.group:hover .group-hover\:animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.group:hover .group-hover\:text-kh3-red {
--tw-text-opacity: 1;
color: rgb(176 48 55 / var(--tw-text-opacity, 1));
@ -2284,6 +2476,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:shadow-red-500\/20 {
--tw-shadow-color: rgb(239 68 68 / 0.2);
--tw-shadow: var(--tw-shadow-colored);
@ -2294,6 +2492,16 @@ video {
--tw-shadow: var(--tw-shadow-colored);
}
.group:hover .group-hover\:shadow-red-500\/30 {
--tw-shadow-color: rgb(239 68 68 / 0.3);
--tw-shadow: var(--tw-shadow-colored);
}
.group:hover .group-hover\:blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.sm\:inline {
display: inline;

1833
who.html Normal file
View file

File diff suppressed because it is too large Load diff