diff --git a/src/styles/globals.css b/src/styles/globals.css index b96571f72..e8af07a1a 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,9 +1,70 @@ @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 { - --color-primary-600: #22c55e; - --color-primary-700: #16a34a; + --color-primary-500: #22c55e; + --color-primary-600: #16a34a; + --color-primary-700: #15803d; + --color-secondary-50: #f8fafc; --color-secondary-100: #f1f5f9; --color-secondary-200: #e2e8f0; @@ -13,6 +74,7 @@ --color-secondary-700: #334155; --color-secondary-800: #1e293b; --color-secondary-900: #0f172a; + --color-accent-500: #eab308; }