From 75ab40a4e7af318fa4584c3e9b8355227536ea48 Mon Sep 17 00:00:00 2001
From: "Claude (Chronicler #56)" <claude@firefrostgaming.com>
Date: Fri, 3 Apr 2026 02:06:54 +0000
Subject: [PATCH] feat: add comprehensive mobile responsive CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WHAT WAS DONE:
Created mobile-responsive.css with fixes for all mobile layout issues
observed in testing on actual mobile device.

MOBILE FIXES (up to 768px):
- All 2-column and 3-column grids stack vertically
- Font sizes reduced (h1: 2.5rem, h2: 2rem, h3: 1.5rem)
- Excessive padding reduced (100px → 40px, 80px → 40px, etc.)
- Footer columns stack vertically instead of side-by-side overflow
- Fire/Frost path cards stack on mobile
- Why Firefrost cards (Security/Community/Legacy) stack
- Buttons sized appropriately for mobile (15px 30px)
- Images constrained to 100% width
- Horizontal overflow prevented

TABLET FIXES (769px - 1024px):
- 3-column grids become 2-column
- Moderate padding reduction
- Font size optimization

INTEGRATION:
- Added to head.njk so it applies to all pages site-wide
- Uses media queries with !important to override inline styles
- Targets specific style patterns from our inline-styled pages

TESTING:
Based on actual mobile screenshots showing:
- Fire/Frost cards cutting off (Image 4)
- Why Firefrost cards side-overflow (Image 3)
- Footer 3-column overflow (Images 1-2)

STATUS:
Ready for mobile testing after deploy

Signed-off-by: Claude (Chronicler #56) <claude@firefrostgaming.com>
---
 _includes/head.njk            |   1 +
 src/css/mobile-responsive.css | 182 ++++++++++++++++++++++++++++++++++
 2 files changed, 183 insertions(+)
 create mode 100644 src/css/mobile-responsive.css

diff --git a/_includes/head.njk b/_includes/head.njk
index a3efa89..ecb79c6 100644
--- a/_includes/head.njk
+++ b/_includes/head.njk
@@ -4,6 +4,7 @@
   <title>{{ title }} | Firefrost Gaming</title>
   <meta name="description" content="{{ description }}">
   <link rel="stylesheet" href="/src/css/firefrost.css">
+  <link rel="stylesheet" href="/src/css/mobile-responsive.css">
   
   <!-- Fire/Frost/Arcane Brand Colors -->
   <style>
diff --git a/src/css/mobile-responsive.css b/src/css/mobile-responsive.css
new file mode 100644
index 0000000..2340b80
--- /dev/null
+++ b/src/css/mobile-responsive.css
@@ -0,0 +1,182 @@
+/* FIREFROST GAMING - MOBILE RESPONSIVE FIXES */
+/* Fixes for 11ty static site - mobile and tablet breakpoints */
+
+/* ========================================
+   MOBILE (up to 768px)
+   ======================================== */
+@media (max-width: 768px) {
+  
+  /* Prevent horizontal overflow */
+  body {
+    overflow-x: hidden !important;
+  }
+  
+  /* Hero sections - reduce font sizes */
+  h1 {
+    font-size: 2.5rem !important;
+    line-height: 1.2 !important;
+  }
+  
+  h2 {
+    font-size: 2rem !important;
+  }
+  
+  h3 {
+    font-size: 1.5rem !important;
+  }
+  
+  /* Paragraphs with large inline font sizes */
+  p[style*="font-size: 3.5em"],
+  p[style*="font-size: 3em"] {
+    font-size: 2rem !important;
+  }
+  
+  p[style*="font-size: 2.5em"],
+  p[style*="font-size: 2.2em"],
+  p[style*="font-size: 2em"] {
+    font-size: 1.5rem !important;
+  }
+  
+  p[style*="font-size: 1.8em"],
+  p[style*="font-size: 1.6em"],
+  p[style*="font-size: 1.5em"] {
+    font-size: 1.2rem !important;
+  }
+  
+  p[style*="font-size: 1.3em"],
+  p[style*="font-size: 1.2em"] {
+    font-size: 1rem !important;
+  }
+  
+  /* All grid layouts - stack vertically on mobile */
+  div[style*="grid-template-columns: repeat(2"],
+  div[style*="grid-template-columns: repeat(3"],
+  div[style*="grid-template-columns: repeat(auto-fit"] {
+    grid-template-columns: 1fr !important;
+    gap: 25px !important;
+  }
+  
+  /* Reduce excessive padding on mobile */
+  div[style*="padding: 100px"],
+  div[style*="padding: 80px"] {
+    padding: 40px 20px !important;
+  }
+  
+  div[style*="padding: 60px"] {
+    padding: 30px 20px !important;
+  }
+  
+  div[style*="padding: 50px"],
+  div[style*="padding: 40px"] {
+    padding: 25px 20px !important;
+  }
+  
+  div[style*="padding: 35px"] {
+    padding: 20px 15px !important;
+  }
+  
+  /* Images - ensure they don't overflow */
+  img {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+  
+  /* Buttons and links - better mobile sizing */
+  a[style*="padding: 25px"],
+  a[style*="padding: 22px"],
+  a[style*="padding: 20px"],
+  a[style*="padding: 18px"] {
+    padding: 15px 30px !important;
+    font-size: 1rem !important;
+  }
+  
+  /* Button containers - stack vertically */
+  div[style*="display: flex"][style*="gap: 25px"],
+  div[style*="display: flex"][style*="gap: 30px"] {
+    flex-direction: column !important;
+    gap: 15px !important;
+  }
+  
+  /* Footer - stack columns vertically */
+  footer div[style*="grid-template-columns"] {
+    grid-template-columns: 1fr !important;
+    gap: 40px !important;
+  }
+  
+  /* Ensure max-width containers don't cause overflow */
+  div[style*="max-width: 1600px"],
+  div[style*="max-width: 1400px"],
+  div[style*="max-width: 1200px"],
+  div[style*="max-width: 900px"],
+  div[style*="max-width: 800px"] {
+    max-width: 100% !important;
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+  }
+  
+  /* Lists inside cards */
+  ul {
+    padding-left: 20px !important;
+  }
+  
+  /* Cards with position absolute decorative elements */
+  div[style*="position: absolute"][style*="font-size: 15rem"] {
+    font-size: 8rem !important;
+  }
+  
+  /* Subscribe page - Trinity image */
+  div[style*="text-align: center"] > img {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  
+  /* Announcement banner - adjust text size */
+  header div[style*="background: linear-gradient"][style*="padding: 12px"] {
+    font-size: 0.85rem !important;
+    padding: 10px 15px !important;
+  }
+  
+  /* Nav bar - adjust for mobile */
+  nav div[style*="display: flex"][style*="gap: 35px"] {
+    gap: 20px !important;
+    font-size: 0.9rem !important;
+  }
+  
+  /* Subscribe buttons in tier cards */
+  a[style*="padding: 15px 40px"] {
+    padding: 12px 30px !important;
+    font-size: 1rem !important;
+  }
+  
+  /* Sovereign tier badge */
+  div[style*="position: absolute"][style*="top: 20px"][style*="right: 20px"] {
+    position: static !important;
+    display: inline-block !important;
+    margin-bottom: 15px !important;
+  }
+}
+
+/* ========================================
+   TABLET (769px - 1024px)
+   ======================================== */
+@media (min-width: 769px) and (max-width: 1024px) {
+  
+  h1 {
+    font-size: 3rem !important;
+  }
+  
+  h2 {
+    font-size: 2.5rem !important;
+  }
+  
+  /* Reduce padding on medium screens */
+  div[style*="padding: 100px"],
+  div[style*="padding: 80px"] {
+    padding: 60px 30px !important;
+  }
+  
+  /* Two-column grids on tablet */
+  div[style*="grid-template-columns: repeat(3"] {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+}