94 lines
3 KiB
JavaScript
94 lines
3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ["./*.html", "./js/*.js", "./components/**/*.html"],
|
|
safelist: [
|
|
{ pattern: /^animate-fade-in-/ },
|
|
'animate-logo-float',
|
|
'animate-border-glow'
|
|
],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
kh3: {
|
|
black: "#212829",
|
|
red: "#B03037",
|
|
grey: "#8E9089",
|
|
white: "#FFFFFF",
|
|
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", // Corrected and verified
|
|
"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: {
|
|
// ... content ...
|
|
},
|
|
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: { // Corrected and verified
|
|
"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: [],
|
|
};
|