diff --git a/src/styles/globals.css b/src/styles/globals.css index ac10a03f9..d7fb2a270 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,31 +3,8 @@ @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 { @@ -40,59 +17,45 @@ } @layer components { - /* Buttons - Larger text */ .btn-primary { - @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 + @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-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; + @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-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; + @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 titles - Larger sizes */ .section-title { - @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900; + @apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900; } .section-subtitle { - @apply text-xl md:text-2xl lg:text-3xl text-secondary-600 mt-4; + @apply text-lg md:text-xl 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-8 border-l-4 border-primary-500; + @apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500; } - /* Navigation - Larger text */ - .nav-link { - @apply text-base md:text-lg font-medium hover:text-primary-600 transition-colors; + .gradient-overlay { + @apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70; } - /* 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 */ + .industrial-badge { + @apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded; } } @@ -104,17 +67,4 @@ .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; - } }