Refactor: Update category structure, mega menu, footer, and remove unused pages
- Move DURGO from ระบบน้ำ to อุปกรณ์ปรับอากาศ - Add -category suffix to อุปกรณ์ดับเพลิง and ฉนวนหุ้มท่อ category pages - Update Header mega menu with correct category slugs - Fix Footer layout: split categories to 2 columns, remove quick links - Delete unused pages: all-projects, join-us, services, product - All product images fixed to 1:1 aspect ratio
This commit is contained in:
Kunthawat
@@ -1,4 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@@ -39,6 +40,12 @@
|
||||
body {
|
||||
@apply font-sans text-secondary-800 antialiased;
|
||||
overflow-x: hidden;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* Dramatic heading typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-sans tracking-tight;
|
||||
}
|
||||
|
||||
strong {
|
||||
@@ -52,100 +59,206 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-secondary-100;
|
||||
@apply bg-secondary-50;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-primary-500 rounded-full;
|
||||
@apply bg-secondary-400 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-primary-600;
|
||||
@apply bg-secondary-500;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Modern card with hover effects */
|
||||
/* ========================================
|
||||
CONTEMPORARY INDUSTRIAL DESIGN SYSTEM
|
||||
======================================== */
|
||||
|
||||
/* ---- Modern card with hover effects ---- */
|
||||
.card {
|
||||
@apply bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300
|
||||
hover:shadow-2xl hover:-translate-y-1;
|
||||
@apply bg-white rounded-lg overflow-hidden transition-all duration-300;
|
||||
}
|
||||
|
||||
/* Gradient button with modern effects */
|
||||
.card-hover {
|
||||
@apply bg-white rounded-lg overflow-hidden transition-all duration-300;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* Glass card */
|
||||
.card-glass {
|
||||
@apply bg-white/70 backdrop-blur-xl rounded-2xl border border-white/40;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* ---- Gradient Buttons with 3D Press Effect ---- */
|
||||
.btn-primary {
|
||||
@apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-3 rounded-xl
|
||||
font-medium shadow-lg hover:shadow-xl transition-all duration-300
|
||||
hover:from-primary-500 hover:to-primary-400 active:scale-95;
|
||||
@apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-4 rounded-lg
|
||||
font-semibold tracking-wide transition-all duration-200;
|
||||
box-shadow: 0 4px 0 #2d6b4f, 0 6px 12px rgba(63, 139, 109, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-white text-primary-600 px-8 py-3 rounded-xl border-2 border-primary-500
|
||||
font-medium shadow-md hover:shadow-lg transition-all duration-300
|
||||
hover:bg-primary-50 active:scale-95;
|
||||
.btn-primary:hover {
|
||||
@apply from-primary-500 to-primary-400;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 0 #2d6b4f, 0 10px 20px rgba(63, 139, 109, 0.3);
|
||||
}
|
||||
|
||||
/* Product card styling */
|
||||
.btn-primary:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 2px 0 #2d6b4f, 0 2px 6px rgba(63, 139, 109, 0.2);
|
||||
}
|
||||
|
||||
/* Accent button (green) */
|
||||
.btn-accent {
|
||||
@apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-4 rounded-lg
|
||||
font-semibold tracking-wide transition-all duration-200;
|
||||
box-shadow: 0 4px 0 #2d6b4f, 0 6px 12px rgba(63, 139, 109, 0.25);
|
||||
}
|
||||
|
||||
.btn-accent:hover {
|
||||
@apply from-primary-500 to-primary-400;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 0 #2d6b4f, 0 10px 20px rgba(63, 139, 109, 0.3);
|
||||
}
|
||||
|
||||
.btn-accent:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 2px 0 #2d6b4f, 0 2px 6px rgba(63, 139, 109, 0.2);
|
||||
}
|
||||
|
||||
/* White CTA button */
|
||||
.btn-white {
|
||||
@apply bg-white text-primary-700 px-8 py-4 rounded-lg
|
||||
font-semibold tracking-wide transition-all duration-200;
|
||||
box-shadow: 0 4px 0 #e5e7eb, 0 6px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-white:hover {
|
||||
@apply text-primary-600;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 0 #e5e7eb, 0 10px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-white:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 2px 0 #e5e7eb, 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
.btn-outline {
|
||||
@apply bg-transparent text-white px-8 py-4 rounded-lg border-2 border-white/50
|
||||
font-semibold tracking-wide transition-all duration-200;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
@apply border-white bg-white/10;
|
||||
}
|
||||
|
||||
/* ---- Product Card Styling ---- */
|
||||
.product-card {
|
||||
@apply card cursor-pointer;
|
||||
@apply card-hover cursor-pointer block;
|
||||
}
|
||||
.product-card.group:hover .product-card-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.product-card-image {
|
||||
@apply relative overflow-hidden bg-gradient-to-br from-secondary-50 to-secondary-100
|
||||
aspect-square flex items-center justify-center;
|
||||
aspect-square flex items-center justify-center;
|
||||
}
|
||||
|
||||
.product-card-image img {
|
||||
@apply w-full h-full object-contain p-6 transition-transform duration-500
|
||||
group-hover:scale-110;
|
||||
@apply w-full h-full object-contain p-6 transition-transform duration-500;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Modern section styling */
|
||||
.product-card:hover .product-card-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* ---- Modern Section Styling ---- */
|
||||
.section {
|
||||
@apply py-16 md:py-24;
|
||||
}
|
||||
|
||||
.section-dark {
|
||||
@apply py-16 md:py-24 bg-secondary-900 text-white;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-6
|
||||
animate-fade-in;
|
||||
@apply text-2xl sm:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4
|
||||
tracking-tight leading-tight;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
@apply text-lg md:text-xl text-secondary-600 max-w-3xl animate-fade-in;
|
||||
@apply text-lg md:text-xl text-secondary-500 max-w-3xl leading-relaxed;
|
||||
}
|
||||
|
||||
/* Container with modern spacing */
|
||||
/* ---- Container with modern spacing ---- */
|
||||
.container-custom {
|
||||
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Gradient background */
|
||||
/* ---- Gradient Backgrounds ---- */
|
||||
.gradient-bg {
|
||||
@apply bg-gradient-to-br from-primary-50 via-white to-accent-50;
|
||||
@apply bg-gradient-to-br from-secondary-50 via-white to-secondary-50;
|
||||
}
|
||||
|
||||
.gradient-mesh {
|
||||
background:
|
||||
radial-gradient(at 40% 20%, rgba(63, 139, 109, 0.08) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 0%, rgba(227, 92, 24, 0.05) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 50%, rgba(63, 139, 109, 0.05) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 50%, rgba(227, 92, 24, 0.03) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(63, 139, 109, 0.05) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@apply px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* ---- Navbar with Strong Glass Effect ---- */
|
||||
.navbar {
|
||||
@apply sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-secondary-200
|
||||
transition-all duration-300;
|
||||
@apply sticky top-0 z-50 transition-all duration-300;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.navbar-scrolled {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ---- Footer ---- */
|
||||
.footer {
|
||||
@apply bg-white text-secondary-900;
|
||||
@apply bg-white text-secondary-600 border-t border-secondary-200;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
@apply text-lg font-semibold text-secondary-900 mb-6 tracking-wide uppercase;
|
||||
}
|
||||
|
||||
/* ---- Tables ---- */
|
||||
.modern-table {
|
||||
@apply w-full border-collapse rounded-xl overflow-hidden shadow-lg;
|
||||
}
|
||||
|
||||
.modern-table th {
|
||||
@apply bg-primary-600 text-white px-6 py-4 text-left font-semibold uppercase tracking-wider;
|
||||
@apply bg-secondary-800 text-white px-6 py-4 text-left font-semibold uppercase tracking-wider text-sm;
|
||||
}
|
||||
|
||||
.modern-table td {
|
||||
@apply px-6 py-4 border-b border-secondary-200;
|
||||
@apply px-6 py-4 border-b border-secondary-200 text-secondary-700;
|
||||
}
|
||||
|
||||
.modern-table tr:last-child td {
|
||||
@@ -153,18 +266,118 @@
|
||||
}
|
||||
|
||||
.modern-table tr:hover td {
|
||||
@apply bg-primary-50;
|
||||
@apply bg-secondary-50;
|
||||
}
|
||||
|
||||
/* ---- Badge ---- */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium
|
||||
bg-primary-100 text-primary-700;
|
||||
@apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply bg-secondary-100 text-secondary-700;
|
||||
}
|
||||
|
||||
.badge-accent {
|
||||
@apply bg-accent-100 text-accent-700;
|
||||
}
|
||||
|
||||
/* ---- Input Modern ---- */
|
||||
.input-modern {
|
||||
@apply w-full px-4 py-3 rounded-xl border-2 border-secondary-300
|
||||
focus:border-primary-500 focus:ring-4 focus:ring-primary-100
|
||||
transition-all duration-300 outline-none;
|
||||
@apply w-full px-5 py-4 rounded-lg border-2 border-secondary-200 bg-white
|
||||
focus:border-secondary-800 focus:ring-0 focus:outline-none
|
||||
transition-all duration-200 text-secondary-800 placeholder:text-secondary-400;
|
||||
}
|
||||
|
||||
.input-modern:focus {
|
||||
box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
|
||||
}
|
||||
|
||||
/* ---- Hero Section Styles ---- */
|
||||
.hero-gradient {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(63, 139, 109, 0.95) 0%, rgba(45, 107, 79, 0.9) 100%),
|
||||
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- Divider ---- */
|
||||
.divider {
|
||||
@apply h-px bg-gradient-to-r from-transparent via-secondary-300 to-transparent;
|
||||
}
|
||||
|
||||
/* ---- Animated Underline Link ---- */
|
||||
.link-animate {
|
||||
@apply relative inline-block;
|
||||
}
|
||||
|
||||
.link-animate::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
@apply bg-accent-500;
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
.link-animate:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---- Stat Counter ---- */
|
||||
.stat-number {
|
||||
@apply text-5xl md:text-6xl font-bold text-white tracking-tight;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
@apply text-white/70 text-lg font-medium tracking-wide uppercase;
|
||||
}
|
||||
|
||||
/* ---- Feature Card ---- */
|
||||
.feature-card {
|
||||
@apply card-glass p-8 text-center;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
@apply bg-white/90;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@apply w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6;
|
||||
background: linear-gradient(135deg, rgba(63, 139, 109, 0.1) 0%, rgba(63, 139, 109, 0.05) 100%);
|
||||
}
|
||||
|
||||
/* ---- CTA Section ---- */
|
||||
.cta-gradient {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
||||
}
|
||||
|
||||
/* ---- Image Frame ---- */
|
||||
.image-frame {
|
||||
@apply relative overflow-hidden rounded-xl;
|
||||
}
|
||||
|
||||
.image-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
@apply rounded-xl;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-frame::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
|
||||
@apply rounded-xl;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,7 +393,11 @@
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
|
||||
@apply bg-gradient-to-r from-secondary-900 to-secondary-600 bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
.gradient-text-light {
|
||||
@apply bg-gradient-to-r from-white to-secondary-200 bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Glass morphism */
|
||||
@@ -188,6 +405,14 @@
|
||||
@apply bg-white/10 backdrop-blur-lg border border-white/20;
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Line icon - original color by default, white on hover */
|
||||
.line-icon {
|
||||
transition: filter 0.2s ease;
|
||||
@@ -196,4 +421,220 @@
|
||||
a:hover .line-icon {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MODERN UX/UI ENHANCEMENTS
|
||||
======================================== */
|
||||
|
||||
/* ---- Staggered Scroll Reveal Animations ---- */
|
||||
.stagger-container {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
.stagger-item {
|
||||
@apply opacity-0 translate-y-8;
|
||||
transition-property: opacity, transform, box-shadow;
|
||||
transition-duration: 0.6s;
|
||||
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.stagger-item.revealed {
|
||||
@apply opacity-100 translate-y-0;
|
||||
}
|
||||
|
||||
.stagger-item[data-delay="1"] { transition-delay: 0.1s; }
|
||||
.stagger-item[data-delay="2"] { transition-delay: 0.2s; }
|
||||
.stagger-item[data-delay="3"] { transition-delay: 0.3s; }
|
||||
.stagger-item[data-delay="4"] { transition-delay: 0.4s; }
|
||||
.stagger-item[data-delay="5"] { transition-delay: 0.5s; }
|
||||
.stagger-item[data-delay="6"] { transition-delay: 0.6s; }
|
||||
.stagger-item[data-delay="7"] { transition-delay: 0.7s; }
|
||||
.stagger-item[data-delay="8"] { transition-delay: 0.8s; }
|
||||
|
||||
/* Scale reveal for cards */
|
||||
.stagger-scale {
|
||||
@apply opacity-0 scale-95;
|
||||
transition-property: opacity, transform, box-shadow;
|
||||
transition-duration: 0.6s;
|
||||
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.stagger-scale.revealed {
|
||||
@apply opacity-100 scale-100;
|
||||
}
|
||||
|
||||
/* ---- Skeleton Loaders ---- */
|
||||
.skeleton {
|
||||
@apply relative overflow-hidden bg-secondary-200 rounded-lg;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
theme('colors.secondary.200') 0%,
|
||||
theme('colors.secondary.100') 50%,
|
||||
theme('colors.secondary.200') 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-image {
|
||||
@apply skeleton aspect-square;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
@apply skeleton h-4 rounded;
|
||||
}
|
||||
.skeleton-text-lg {
|
||||
@apply skeleton h-6 rounded;
|
||||
}
|
||||
.skeleton-title {
|
||||
@apply skeleton h-8 rounded;
|
||||
}
|
||||
|
||||
.skeleton-button {
|
||||
@apply skeleton h-12 rounded-xl;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
@apply bg-white rounded-xl shadow-lg overflow-hidden p-0;
|
||||
}
|
||||
.skeleton-card-image {
|
||||
@apply skeleton-image;
|
||||
}
|
||||
.skeleton-card-content {
|
||||
@apply p-6 space-y-3;
|
||||
}
|
||||
|
||||
/* ---- Image Hover Effects ---- */
|
||||
.img-zoom {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
.img-zoom img {
|
||||
@apply transition-transform duration-500;
|
||||
transform: scale(1);
|
||||
}
|
||||
.img-zoom:hover img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* Image reveal on scroll */
|
||||
.img-reveal {
|
||||
@apply opacity-0 scale-105;
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
.img-reveal.visible {
|
||||
@apply opacity-100 scale-100;
|
||||
}
|
||||
|
||||
/* ---- Smooth Section Transitions ---- */
|
||||
.section-transition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fade in on scroll container */
|
||||
.fade-reveal {
|
||||
@apply opacity-0;
|
||||
transition: opacity 0.8s ease-out;
|
||||
}
|
||||
.fade-reveal.visible {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
/* ---- Counter Animation Helper ---- */
|
||||
.counter-animate {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
.counter-animate.counting {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ---- Glow Effects ---- */
|
||||
.glow-primary {
|
||||
box-shadow: 0 0 40px -10px rgba(63, 139, 109, 0.4);
|
||||
}
|
||||
|
||||
.glow-accent {
|
||||
box-shadow: 0 0 40px -10px rgba(227, 92, 24, 0.4);
|
||||
}
|
||||
|
||||
/* ---- Text Balance ---- */
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* ---- Reduced motion preference ---- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.stagger-item,
|
||||
.stagger-scale,
|
||||
.fade-reveal,
|
||||
.img-reveal,
|
||||
.img-zoom img {
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.stagger-item,
|
||||
.stagger-scale,
|
||||
.fade-reveal,
|
||||
.img-reveal {
|
||||
@apply opacity-100 translate-y-0 translate-x-0 scale-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
KEYFRAME ANIMATIONS
|
||||
======================================== */
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating animation for hero elements */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Pulse glow animation */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px -5px rgba(63, 139, 109, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px -5px rgba(63, 139, 109, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Gradient shift for hero background */
|
||||
@keyframes gradient-shift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user