support/website-kh3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

first commit

Browse source
This commit is contained in:
support 2026-03-04 14:21:47 +00:00
commit ebc307fe04
114 changed files with 7748 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

335
src/input.css Normal file
View file

@ -0,0 +1,335 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@keyframes projectOverlaySlide {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/*
These are component styles. Wrapping them in @layer components
is a good practice for organization with Tailwind.
*/
@layer components {
.project-overlay {
/* The default hidden state */
transform: translateY(100%);
opacity: 0;
/* Add a transition for a smooth exit if the mouse leaves quickly */
transition: opacity 0.3s ease;
}
.project-card:hover .project-overlay {
/* On hover, run the slide-in animation */
animation: projectOverlaySlide 0.4s ease-out forwards;
}
.project-card .project-image {
/* Add a transition for the zoom effect */
transition: transform 0.6s ease-out;
}
.project-card:hover .project-image {
/* On hover, zoom the image */
transform: scale(1.1);
}
}
@layer components {
/* Reusable Component for Navigation Links */
.nav-link {
@apply block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors font-montserrat opacity-0;
}
.nav-link.active {
@apply text-kh3-red;
}
.nav-link-span {
@apply hidden md:inline;
}
.project-overlay {
transform: translateY(100%);
opacity: 0;
transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
/* Menu Button Styles */
#menuWrap {
position: relative;
overflow: visible;
}
.menu-waves {
position: absolute;
inset: -20px;
z-index: 1;
pointer-events: none;
}
#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;
}
.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;
will-change: transform, opacity;
}
.menu-waves .wave:nth-child(2) {
animation-delay: 0.3s;
}
.menu-waves .wave:nth-child(3) {
animation-delay: 0.6s;
}
}
@layer base {
/* General Animations */
@keyframes spin {
from {
transform: scale(1.5) rotate(0deg);
}
to {
transform: scale(1.5) rotate(360deg);
}
}
@keyframes waveBurst {
0%,
69% {
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);
}
}
/* Page Transitions */
@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);
}
}
@keyframes staggerFadeOut {
100% {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
/* Image Slider Transitions */
@keyframes slideOutLeft {
100% {
transform: translateX(-100%) scale(0.8);
opacity: 0;
}
}
@keyframes slideOutRight {
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;
}
}
/* Specific Component Animations */
@keyframes arrowPulse {
0%,
100% {
transform: translateY(0);
opacity: 0.7;
}
50% {
transform: translateY(10px);
opacity: 1;
}
}
.animate-arrowPulse {
animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes diagMaskReveal {
0% {
opacity: 0;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.03);
}
55% {
opacity: 1;
clip-path: polygon(82% 0, 100% 0, 100% 100%, 64% 100%);
}
100% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
/* NEW: Styles from about.html */
@keyframes diamondPulse {
0%,
100% {
transform: rotate(45deg) scale(1);
box-shadow: 0 0 0 rgba(220, 38, 38, 0);
}
50% {
transform: rotate(45deg) scale(0.8);
box-shadow: 0 0 0 rgba(220, 38, 38, 0);
}
75% {
transform: rotate(45deg) scale(1.1);
box-shadow: 0 0 15px rgba(220, 38, 38, 0.4), 0 0 25px rgba(220, 38, 38, 0.2);
}
}
.diamond-pulse {
animation: diamondPulse 2s ease-in-out infinite;
}
}
@layer components {
.value-item {
@apply cursor-pointer text-lg md:text-2xl font-semibold text-neutral-400 transition-all duration-300 md:pl-6 md:border-l-4 border-neutral-200;
}
.value-item.active {
@apply text-kh3-red border-kh3-red;
transform: translateX(4px);
}
.value-content-block {
@apply absolute opacity-0 transition-opacity duration-500 ease-in-out;
}
.value-content-block.active {
@apply static opacity-100;
}
/* Mobile (Card-based) Layout */
@media (max-width: 767px) {
.value-content-block {
@apply static opacity-100 mb-8 p-6 border border-neutral-200 rounded-lg;
}
.value-item {
@apply hidden;
/* Hide the list on mobile */
}
}
.form-input {
@apply w-full bg-neutral-900 border border-neutral-700 text-white px-4 py-3 rounded-md transition-colors duration-300;
@apply focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent;
}
.form-input::placeholder {
@apply text-neutral-500;
}
.service-item {
@apply bg-neutral-900/50 border border-neutral-800 rounded-lg p-4 flex items-start gap-4 transition-all duration-300;
}
.service-item:hover {
@apply border-kh3-red/50 bg-neutral-900 scale-[1.02];
}
.service-item-icon {
@apply w-5 h-5 text-kh3-red mt-1 flex-shrink-0;
}
}