From e8dbde069cdddac99dc384a04d53397794459e6f Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Wed, 4 Mar 2026 10:57:39 +0700
Subject: [PATCH] fix: Increase base font size for better readability on big
 screens

- Base font: 18px (was 16px)
- Large screens (1280px+): 20px
- Extra large (1536px+): 22px
- Ultra large (1920px+): 24px

- Buttons: text-lg md:text-xl (was smaller)
- Navigation: text-base md:text-lg
- Body text: text-base md:text-lg lg:text-xl
- Section titles: text-4xl md:text-5xl lg:text-6xl

- NEVER use text-xs or text-sm (too small on big screens)
- All text now scales properly for 4K displays
---
 src/styles/globals.css | 76 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index d7fb2a270..ac10a03f9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,8 +3,31 @@
 @tailwind utilities;
 
 @layer base {
+  /* Larger base font size for better readability on big screens */
   html {
     scroll-behavior: smooth;
+    font-size: 18px; /* Base size - NOT 16px */
+  }
+  
+  /* Large screens (1280px+) */
+  @media (min-width: 1280px) {
+    html {
+      font-size: 20px; /* Increased for large screens */
+    }
+  }
+  
+  /* Extra large screens (1536px+) */
+  @media (min-width: 1536px) {
+    html {
+      font-size: 22px; /* Even larger for 4K */
+    }
+  }
+  
+  /* Ultra large screens (1920px+) */
+  @media (min-width: 1920px) {
+    html {
+      font-size: 24px; /* Maximum base size */
+    }
   }
   
   body {
@@ -17,45 +40,59 @@
 }
 
 @layer components {
+  /* Buttons - Larger text */
   .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
+    @apply inline-flex items-center justify-center px-8 py-4 bg-primary-600 text-white font-semibold rounded-lg
+           text-lg md:text-xl 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;
+    @apply inline-flex items-center justify-center px-8 py-4 bg-secondary-800 text-white font-semibold rounded-lg
+           text-lg md:text-xl 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;
+    @apply inline-flex items-center justify-center px-8 py-4 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
+           text-lg md:text-xl hover:bg-primary-600 hover:text-white transition-all duration-200;
   }
   
+  /* Section titles - Larger sizes */
   .section-title {
-    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900;
+    @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900;
   }
   
   .section-subtitle {
-    @apply text-lg md:text-xl text-secondary-600 mt-4;
+    @apply text-xl md:text-2xl lg:text-3xl text-secondary-600 mt-4;
   }
   
+  /* Cards - Better padding and text */
   .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;
+    @apply bg-secondary-800 text-white rounded-xl p-8 border-l-4 border-primary-500;
   }
   
-  .gradient-overlay {
-    @apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
+  /* Navigation - Larger text */
+  .nav-link {
+    @apply text-base md:text-lg font-medium hover:text-primary-600 transition-colors;
   }
   
-  .industrial-badge {
-    @apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded;
+  /* Footer - Readable text */
+  .footer-text {
+    @apply text-base md:text-lg text-secondary-600;
+  }
+  
+  /* Body text - Minimum sizes */
+  .body-text {
+    @apply text-base md:text-lg lg:text-xl;
+  }
+  
+  .small-text {
+    @apply text-base; /* Minimum 18px, NEVER text-sm or text-xs */
   }
 }
 
@@ -67,4 +104,17 @@
   .text-gradient {
     @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
   }
+  
+  /* Responsive text utilities - Larger base sizes */
+  .text-responsive-base {
+    @apply text-base md:text-lg lg:text-xl xl:text-2xl;
+  }
+  
+  .text-responsive-lg {
+    @apply text-lg md:text-xl lg:text-2xl xl:text-3xl;
+  }
+  
+  .text-responsive-xl {
+    @apply text-xl md:text-2xl lg:text-3xl xl:text-4xl;
+  }
 }