f2c8b0f822
- Added favicon.ico and favicon.svg from dealplustech.co.th - Added typography guidance comment in globals.css - NO automatic font size changes - Use .text-base (16px) minimum for readable text
78 lines
2.1 KiB
CSS
78 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Typography Best Practices:
|
|
* - Use .text-base (16px) as minimum for readable text
|
|
* - Avoid .text-xs (12px) and .text-sm (14px) for body content
|
|
* - For less emphasis, use color (text-secondary-600) not smaller size
|
|
*/
|