From 099cbe2e0cb156ca99a9b0aa0cbc8709d9a4246b Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 12 Feb 2026 10:03:06 -0500
Subject: [PATCH] feat: comprehensive mobile responsiveness improvements

- Add mobile media query for screens < 768px
- Adjust hero section: font sizes, spacing, button layout
- Scale down floating coffee beans and cups
- Reduce gauge sizes for better mobile display
- Optimize card stacking and padding
- Refine testimonial avatars and quote icons
- Adjust tech/process card layouts
- Improve heading sizes with clamp() functions
- Ensure all interactive elements remain touch-friendly
---
 styles.css | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)

diff --git a/styles.css b/styles.css
index b65346a..6a94a23 100644
--- a/styles.css
+++ b/styles.css
@@ -1316,3 +1316,102 @@ footer a:hover {
     opacity: 0.9;
     text-align: center;
 }
+
+/* Mobile Responsiveness */
+@media (max-width: 767px) {
+  .hero-title {
+    font-size: clamp(2.5rem, 8vw, 5rem);
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+  }
+  .hero-subtitle {
+    font-size: clamp(1rem, 4vw, 1.5rem);
+    margin-bottom: 2rem;
+  }
+  .hero-section {
+    padding: 1.5rem 1rem;
+    min-height: 90vh;
+  }
+  .btn-group-custom {
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+  .btn-primary, .btn-outline-coffee {
+    width: 100%;
+    max-width: 300px;
+  }
+  /* Floating elements adjustments */
+  .floating-bean,
+  .floating-cup {
+    opacity: 0.02;
+  }
+  .bean-1,
+  .bean-2,
+  .bean-3 {
+    width: 60px;
+  }
+  .bean-2 {
+    right: -10%;
+  }
+  .cup-1 {
+    width: 80px;
+    right: 5%;
+    top: 15%;
+  }
+  /* Reduce section padding */
+  .section-padding {
+    padding-block: clamp(3rem, 8vw, 5rem);
+  }
+  /* Adjust gauge size */
+  .gauge {
+    width: 80px;
+    height: 80px;
+  }
+  .gauge::before {
+    font-size: 1.8rem;
+  }
+  /* Card adjustments for mobile */
+  .card {
+    margin-bottom: 1.5rem;
+  }
+  .card-body {
+    padding: 1.5rem;
+  }
+  .card-title {
+    font-size: 1.3rem;
+  }
+  /* Testimonial adjustments */
+  .testimonial-card {
+    margin-bottom: 1.5rem;
+  }
+  .testimonial-avatar {
+    width: 50px;
+    height: 50px;
+    font-size: 1.2rem;
+  }
+  .testimonial-quote-icon {
+    font-size: 6rem;
+    top: -5px;
+    right: 10px;
+  }
+  /* Tech & Process card adjustments */
+  .tech-card, .process-card {
+    padding: 1.5rem 1rem;
+  }
+  .tech-icon-wrapper {
+    width: 60px;
+    height: 60px;
+  }
+  .process-number {
+    font-size: 3.5rem;
+  }
+  /* Heading adjustments */
+  h2 {
+    font-size: clamp(2rem, 6vw, 3rem);
+    margin-bottom: 2.5rem;
+  }
+  .hero-title {
+    letter-spacing: -0.03em;
+  }
+}