Auto-sync from website-creator

src/styles/global.css

@@ -11,6 +11,13 @@
     scroll-behavior: smooth;
   }
 
+  /* Small mobile screens - 320px and below */
+  @media (max-width: 380px) {
+    html {
+      font-size: 14px;
+    }
+  }
+
   @media (min-width: 1280px) {
     html {
       font-size: 20px;
@@ -31,6 +38,7 @@
 
   body {
     @apply font-sans text-secondary-800 antialiased;
+    overflow-x: hidden;
   }
 
   /* Modern scrollbar */
@@ -110,18 +118,19 @@
     @apply bg-gradient-to-br from-primary-50 via-white to-accent-50;
   }
 
-  /* Modern navbar */
+  .main-content {
+    @apply px-4 sm:px-6 lg:px-8;
+  }
+
   .navbar {
     @apply sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-secondary-200
            transition-all duration-300;
   }
 
-  /* Footer styling */
   .footer {
-    @apply bg-gradient-to-br from-secondary-900 to-secondary-800 text-white;
+    @apply bg-white text-secondary-900;
   }
 
-  /* Table styling - responsive */
   .modern-table {
     @apply w-full border-collapse rounded-xl overflow-hidden shadow-lg;
   }
@@ -142,13 +151,11 @@
     @apply bg-primary-50;
   }
 
-  /* Badge styling */
   .badge {
     @apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium
            bg-primary-100 text-primary-700;
   }
 
-  /* Modern input fields */
   .input-modern {
     @apply w-full px-4 py-3 rounded-xl border-2 border-secondary-300
            focus:border-primary-500 focus:ring-4 focus:ring-primary-100
@@ -175,4 +182,13 @@
   .glass {
     @apply bg-white/10 backdrop-blur-lg border border-white/20;
   }
+
+  /* Line icon - original color by default, white on hover */
+  .line-icon {
+    transition: filter 0.2s ease;
+  }
+  .hover\:text-white:hover .line-icon,
+  a:hover .line-icon {
+    filter: brightness(0) invert(1);
+  }
 }