fix: Restore CSS matching old site design

- Tailwind v4 syntax (@layer base/components)
- Restored all component classes (.btn-primary, .card, etc.)
- Industrial theme colors preserved
- Typography matching old site
This commit is contained in:
Kunthawat
2026-03-11 15:44:09 +07:00
parent a82f4adee2
commit 019acc9685

View File

@@ -1,9 +1,70 @@
@import "tailwindcss"; @import "tailwindcss";
/* Custom industrial theme colors */ /* Base styles */
@layer base {
html {
scroll-behavior: smooth;
}
body {
@apply bg-white text-secondary-900 antialiased;
}
h1, h2, h3, h4, h5, h6 {
@apply font-bold tracking-tight;
}
}
/* Component classes - matching old site */
@layer components {
.btn-primary {
@apply inline-flex items-center justify-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg
hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
active:translate-y-0.5;
}
.btn-secondary {
@apply inline-flex items-center justify-center px-6 py-3 bg-secondary-800 text-white font-semibold rounded-lg
hover:bg-secondary-900 transition-all duration-200;
}
.btn-outline {
@apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
hover:bg-primary-600 hover:text-white transition-all duration-200;
}
.section-title {
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900;
}
.section-subtitle {
@apply text-lg md:text-xl text-secondary-600 mt-4;
}
.card {
@apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300
hover:shadow-industrial hover:-translate-y-1;
}
.card-industrial {
@apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500;
}
.gradient-overlay {
@apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
}
.industrial-badge {
@apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded;
}
}
/* Custom theme colors - Industrial theme */
:root { :root {
--color-primary-600: #22c55e; --color-primary-500: #22c55e;
--color-primary-700: #16a34a; --color-primary-600: #16a34a;
--color-primary-700: #15803d;
--color-secondary-50: #f8fafc; --color-secondary-50: #f8fafc;
--color-secondary-100: #f1f5f9; --color-secondary-100: #f1f5f9;
--color-secondary-200: #e2e8f0; --color-secondary-200: #e2e8f0;
@@ -13,6 +74,7 @@
--color-secondary-700: #334155; --color-secondary-700: #334155;
--color-secondary-800: #1e293b; --color-secondary-800: #1e293b;
--color-secondary-900: #0f172a; --color-secondary-900: #0f172a;
--color-accent-500: #eab308; --color-accent-500: #eab308;
} }