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

fix: replace dark logo with light logo across all pages and update menu toggle animations

Browse source
This commit is contained in:
George Birikorang 2025-08-31 22:47:28 -04:00
parent 1d80addd7a
commit a2fe128ff7
10 changed files with 121 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

55
index.html
View file

@ -44,8 +44,8 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
<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;
@ -93,8 +93,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;
@ -134,8 +134,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;
@ -266,8 +266,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<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;
@ -371,13 +371,9 @@
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"
class="w-16 h-16"
/>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
<span
class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow"
class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
>KH3</span
>
</a>
@ -459,7 +455,7 @@
>DESIGN</span
>
</div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center gap-6">
@ -533,7 +529,7 @@
WHO
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
</div>
<!-- Mobile CTA bar: About & Contacts (centered) -->
<div
@ -541,14 +537,14 @@
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
>
<div class="flex items-center gap-4">
<a
href="about.html"
<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"
<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
@ -556,7 +552,7 @@
</div>
</div>
</section>
</div>
</div>
<!-- Custom Cursor -->
<div
@ -574,11 +570,7 @@
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"
/>
<img src="assets/images/kh3_logo.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">
@ -632,17 +624,6 @@
}
}
/* Logo glow animation */
@keyframes logoGlow {
0%,
100% {
filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.3));
}
50% {
filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.6));
}
}
/* Page transition animations */
@keyframes staggerFadeOut {
0% {