Initial commit: KH3 Group Limited website with enhanced animations and slide+zoom transitions

2026-10-16 22:01:47 +00:00 · 2025-08-22 10:38:10 -04:00 · 2025-08-22 10:38:10 -04:00 · ecebd00021
commit ecebd00021
23 changed files with 5879 additions and 0 deletions
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,106 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./*.html", "./js/*.js"],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        kh3: {
+          black: "#212629",
+          red: "#B03037",
+          gold: "#b8860b",
+          darkGold: "#8b6914",
+          lightGold: "#daa520",
+        },
+        black: "#000000",
+        white: "#ffffff",
+      },
+      fontFamily: {
+        montserrat: ["Montserrat", "sans-serif"],
+        calibri: ["Calibri", "sans-serif"],
+      },
+      animation: {
+        "logo-float": "logoFloat 3s ease-in-out infinite",
+        "text-float": "textFloat 4s ease-in-out infinite",
+        "border-glow": "borderGlow 3s ease-in-out infinite",
+        "menu-grid-cycle": "menuGridCycle 15s ease-in-out infinite",
+        "fade-in-up": "fadeInUp 1s ease-out forwards",
+        "fade-in-left": "fadeInLeft 1s ease-out forwards",
+        "fade-in-right": "fadeInRight 1s ease-out forwards",
+        "fade-in-center": "fadeInCenter 1s ease-out forwards",
+        "logo-glow": "logoGlow 3s ease-in-out infinite",
+      },
+      keyframes: {
+        logoFloat: {
+          "0%, 100%": { transform: "translateY(0px)" },
+          "50%": { transform: "translateY(-10px)" },
+        },
+        textFloat: {
+          "0%, 100%": { transform: "translateY(0px)" },
+          "50%": { transform: "translateY(-5px)" },
+        },
+        borderGlow: {
+          "0%, 100%": {
+            borderColor: "#ffffff",
+            boxShadow: "0 0 5px rgba(255, 255, 255, 0.3)",
+          },
+          "50%": {
+            borderColor: "#B03037",
+            boxShadow: "0 0 15px rgba(176, 48, 55, 0.6)",
+          },
+        },
+        menuGridCycle: {
+          "0%, 33.33%": {
+            transform: "rotate(0deg) scale(1)",
+            color: "#ffffff",
+          },
+          "6.67%, 26.67%": {
+            transform: "rotate(360deg) scale(1.2)",
+            color: "#B03037",
+          },
+          "33.34%, 66.67%": {
+            transform: "rotate(0deg) scale(1)",
+            color: "#ffffff",
+          },
+          "40%, 60%": {
+            transform: "rotate(360deg) scale(1.2)",
+            color: "#B03037",
+          },
+          "66.68%, 100%": {
+            transform: "rotate(0deg) scale(1)",
+            color: "#ffffff",
+          },
+        },
+        fadeInUp: {
+          "0%": { opacity: "0", transform: "translateY(30px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        fadeInLeft: {
+          "0%": { opacity: "0", transform: "translateX(-30px)" },
+          "100%": { opacity: "1", transform: "translateX(0)" },
+        },
+        fadeInRight: {
+          "0%": { opacity: "0", transform: "translateX(30px)" },
+          "100%": { opacity: "1", transform: "translateX(0)" },
+        },
+        fadeInCenter: {
+          "0%": { opacity: "0", transform: "scale(0.9)" },
+          "100%": { opacity: "1", transform: "scale(1)" },
+        },
+        logoGlow: {
+          "0%, 100%": {
+            textShadow:
+              "0 0 1px rgba(255, 255, 255, 0.1), 0 0 1px rgba(176, 48, 55, 0.05)",
+            filter: "brightness(1)",
+          },
+          "50%": {
+            textShadow:
+              "0 0 2px rgba(255, 255, 255, 0.15), 0 0 3px rgba(176, 48, 55, 0.08)",
+            filter: "brightness(1.02)",
+          },
+        },
+      },
+    },
+  },
+  plugins: [],
+};