diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index d106c9a08..ccd60d163 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -26,9 +26,6 @@ const { title, description, image } = Astro.props; - - - @@ -44,36 +41,5 @@ const { title, description, image } = Astro.props; diff --git a/src/styles/globals.css b/src/styles/globals.css index e8af07a1a..e3037a947 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,66 +1,6 @@ @import "tailwindcss"; -/* 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 { +@theme { --color-primary-500: #22c55e; --color-primary-600: #16a34a; --color-primary-700: #15803d; @@ -78,11 +18,24 @@ --color-accent-500: #eab308; } -/* Desktop-first typography */ +/* Base styles */ html { + scroll-behavior: smooth; font-family: 'Kanit', system-ui, sans-serif; } +body { + background-color: white; + color: var(--color-secondary-900); + -webkit-font-smoothing: antialiased; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + letter-spacing: -0.025em; +} + +/* Desktop-first typography */ @media (min-width: 1280px) { html { font-size: 18px; @@ -94,3 +47,141 @@ html { font-size: 20px; } } + +/* Button components */ +.btn-primary { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.5rem; + background-color: var(--color-primary-600); + color: white; + font-weight: 600; + border-radius: 0.5rem; + transition: all 0.2s; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); +} + +.btn-primary:hover { + background-color: var(--color-primary-700); + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); +} + +.btn-primary:active { + transform: translateY(0.125rem); +} + +.btn-secondary { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.5rem; + background-color: var(--color-secondary-800); + color: white; + font-weight: 600; + border-radius: 0.5rem; + transition: all 0.2s; +} + +.btn-secondary:hover { + background-color: var(--color-secondary-900); +} + +.btn-outline { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.5rem; + border: 2px solid var(--color-primary-600); + color: var(--color-primary-600); + font-weight: 600; + border-radius: 0.5rem; + transition: all 0.2s; +} + +.btn-outline:hover { + background-color: var(--color-primary-600); + color: white; +} + +/* Section typography */ +.section-title { + font-size: 1.875rem; + font-weight: 700; + color: var(--color-secondary-900); +} + +@media (min-width: 768px) { + .section-title { + font-size: 2.25rem; + } +} + +@media (min-width: 1024px) { + .section-title { + font-size: 3rem; + } +} + +.section-subtitle { + font-size: 1.125rem; + color: var(--color-secondary-600); + margin-top: 1rem; +} + +@media (min-width: 768px) { + .section-subtitle { + font-size: 1.25rem; + } +} + +/* Card components */ +.card { + background-color: white; + border-radius: 0.75rem; + overflow: hidden; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); + transition: all 0.3s; +} + +.card:hover { + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); + transform: translateY(-0.25rem); +} + +.card-industrial { + background-color: var(--color-secondary-800); + color: white; + border-radius: 0.75rem; + padding: 1.5rem; + border-left: 4px solid var(--color-primary-500); +} + +/* Utility classes */ +.text-balance { + text-wrap: balance; +} + +.text-gradient { + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(to right, var(--color-primary-500), var(--color-primary-700)); +} + +.gradient-overlay { + position: absolute; + inset: 0; + background: linear-gradient(to right, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7)); +} + +.industrial-badge { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.75rem; + background-color: var(--color-primary-600); + color: white; + font-size: 0.875rem; + font-weight: 600; + border-radius: 0.25rem; +}