Improve mobile responsiveness across all sections

- Increase hero content size for better mobile visibility
- Expand buttons and touch targets to recommended sizes
- Fix section padding and container widths for mobile
- Ensure all cards and grids use full width on mobile
- Update typography scaling for better readability
- Set proper viewport base font size (16px)
- Add comprehensive mobile layout fixes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/website/assets/css/main.css

@@ -239,21 +239,26 @@ body {
   @media (max-width: 768px) {
     .hero-logo img {
       height: auto;
-      max-height: 150px;
-      width: 90%;
-      max-width: 280px;
-      margin: 20px auto;
+      width: 85%;
+      max-width: 340px;
+      max-height: 200px;
+      margin: 0 auto;
     }
 
-    /* Reduce hero padding on mobile */
+    /* Proper hero sizing on mobile */
     .hero-content {
-      padding: 1rem;
+      padding: 20px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
 
-    /* Ensure touch targets are at least 44x44px */
+    /* Ensure touch targets are at least 48px for better mobile UX */
     button, .btn-primary-warm, .btn-secondary-warm {
-      min-height: 44px;
-      min-width: 44px;
+      min-height: 48px;
+      min-width: 48px;
     }
   }
 
@@ -310,12 +315,26 @@ body {
 
   /* Section Styles */
   .section-title {
-    @apply text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-harbor-navy;
+    @apply text-3xl md:text-5xl lg:text-6xl font-serif font-bold text-harbor-navy;
     @apply mb-4;
   }
 
   .section-subtitle {
-    @apply text-xl md:text-2xl text-gray-600 mb-12;
+    @apply text-lg md:text-2xl text-gray-600 mb-8 md:mb-12;
+  }
+
+  @media (max-width: 768px) {
+    .section-title {
+      font-size: 1.875rem;
+      line-height: 1.2;
+      padding: 0 10px;
+    }
+
+    .section-subtitle {
+      font-size: 1rem;
+      line-height: 1.4;
+      padding: 0 10px;
+    }
   }
 }
 
@@ -450,7 +469,22 @@ body {
 /* Responsive Typography Scale */
 @media (max-width: 768px) {
   html {
-    font-size: 14px;
+    font-size: 16px; /* Keep base font size for readability */
+  }
+
+  body {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  /* Ensure all containers use full width */
+  .container,
+  .content-wrapper,
+  main {
+    width: 100%;
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
   }
 }
 

apps/website/assets/css/voyage-layout.css

@@ -1663,13 +1663,19 @@ html {
 /* Responsive */
 @media (max-width: 768px) {
     .hero-voyage {
-        padding: 60px 15px;
+        padding: 0;
         min-height: 100vh;
+        height: 100vh;
     }
 
     .hero-content {
-        padding: 0 15px;
+        padding: 15px;
         overflow-x: hidden;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
     }
 
     /* Responsive logo */
@@ -1681,10 +1687,10 @@ html {
 
     .hero-logo img {
         height: auto;
-        max-height: 150px;
-        width: 100%;
-        max-width: 280px;
-        margin: 20px auto;
+        width: 90%;
+        max-width: 340px;
+        max-height: 200px;
+        margin: 0 auto;
         object-fit: contain;
     }
 
@@ -1696,32 +1702,34 @@ html {
     }
 
     .hero-subtext {
-        font-size: 0.95rem;
+        font-size: 1rem;
         padding: 0 10px;
-        margin-bottom: 1.5rem;
-        line-height: 1.6;
+        margin-bottom: 2rem;
+        line-height: 1.5;
+        text-align: center;
     }
 
     .hero-actions {
         flex-direction: column;
         width: 100%;
-        padding: 0;
-        gap: 0.75rem;
+        padding: 0 15px;
+        gap: 12px;
         align-items: center;
     }
 
     /* Smaller buttons on mobile */
     .btn-primary-warm,
     .btn-secondary-warm {
-        width: 85%;
-        max-width: 260px;
-        padding: 0.65rem 1rem;
-        font-size: 0.875rem;
+        width: 100%;
+        max-width: 340px;
+        padding: 14px 24px;
+        font-size: 1rem;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         gap: 0.5rem;
+        min-height: 50px;
     }
 
     .btn-primary-warm .btn-icon,
@@ -1742,8 +1750,33 @@ html {
         display: none;
     }
     
+    /* Fix all section padding for mobile */
+    section {
+        padding: 40px 15px !important;
+    }
+
+    .welcome-section,
+    .services-section,
+    .experience-stories,
+    .portfolio-gallery,
+    .booking-cta {
+        padding: 40px 15px !important;
+    }
+
     .welcome-content {
         grid-template-columns: 1fr;
+        padding: 0;
+    }
+
+    .service-card {
+        width: 100%;
+        padding: 20px;
+    }
+
+    .services-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+        padding: 0;
     }
 
     .yacht-card {
@@ -1755,6 +1788,29 @@ html {
         text-align: center;
     }
 
+    /* Fix booking cards for mobile */
+    .booking-options {
+        grid-template-columns: 1fr;
+        padding: 0;
+    }
+
+    .booking-card {
+        width: 100%;
+        padding: 20px;
+    }
+
+    /* Fix testimonial cards */
+    .testimonials-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+        padding: 0;
+    }
+
+    .testimonial-card {
+        width: 100%;
+        padding: 20px;
+    }
+    
     .social-links {
         justify-content: center;
     }