docs: Task #88 - Ghost homepage mobile responsive fix

WHAT WAS DONE:
Added Task #88 to fix mobile layout issues on firefrostgaming.com homepage where content gets cut off on right side

PROBLEM IDENTIFIED:
Homepage displays incorrectly on mobile devices:
- Content pushed off-screen to the right
- Text truncated/disappearing
- Horizontal overflow issues
- Buttons and cards not wrapping properly

ROOT CAUSE:
- Inline styles with fixed max-width values
- No mobile-responsive media queries
- Ghost theme CSS not overriding inline styles
- Negative margins pushing content beyond viewport

SOLUTION CREATED:
Complete mobile-responsive CSS media queries ready to inject via Ghost Code Injection.

CSS FIXES INCLUDED:

Mobile (< 768px):
- Force full-width layouts (remove max-width constraints)
- Reduce font sizes (4rem → 2.5rem for h1)
- Stack buttons vertically (no horizontal overflow)
- Stack Fire/Frost path cards (grid → single column)
- Remove negative margins that push content offscreen
- Ensure images don't overflow (max-width: 100%)
- Prevent horizontal scrolling (overflow-x: hidden)
- Reduce padding (80px → 40px on mobile)

Tablet (768px - 1024px):
- Medium font sizes (4rem → 3rem for h1)
- Reduced padding (80px → 60px)
- Still responsive, less aggressive than mobile

IMPLEMENTATION STEPS:
1. Copy CSS from docs/planning/ideas/features/ghost-homepage-mobile-fix.css
2. Ghost Admin → Settings → Code Injection
3. Paste into Site Header box
4. Save settings
5. Test on mobile device (force refresh)

TIME ESTIMATE: 5-10 minutes (copy/paste operation)

PRIORITY: Tier 2 - Quality of Life
- Not blocking soft launch
- Improves mobile UX significantly
- No changes to homepage HTML needed
- Pure CSS solution (non-invasive)

IMPACT:
- Immediate mobile UX improvement
- Professional mobile experience
- No desktop layout affected
- Tablet support included

WHY THIS MATTERS:
Mobile traffic is significant for gaming communities. Homepage is first impression. Content getting cut off creates unprofessional appearance and may cause visitors to leave before seeing full value proposition.

FILES ADDED:
- docs/planning/ideas/features/ghost-homepage-mobile-fix.css (133 lines)
- Task #88 added to docs/core/tasks.md

RELATED WORK:
- Ghost homepage built in previous sessions
- Original homepage content at docs/planning/ideas/features/ghost-homepage-content.md
- Frost CSS at docs/planning/ideas/features/ghost-frost-css.css

Signed-off-by: The Versionist (Chronicler #49) <claude@firefrostgaming.com>

docs/core/tasks.md

@@ -2637,6 +2637,88 @@ Use Pterodactyl Panel console at panel.firefrostgaming.com → Console tab → `
 
 ---
 
+### 87. Arbiter 2.1 - Subscription Cancellation & Grace Period System
+**Time:** 4-6 hours implementation + 2 hours Paymenter research  
+**Status:** ARCHITECTURE VALIDATED — awaiting Paymenter webhook research  
+**Priority:** Tier 1 — SOFT LAUNCH BLOCKER  
+**Documentation:** `docs/tasks/arbiter-2-1-cancellation-flow/`
+
+Add subscription offboarding flow to Arbiter 2.0. Currently have onboarding (subscribe → Discord role) but NO cancellation process. Cannot soft launch without defining what happens when users cancel, payment fails, or chargebacks occur.
+
+**Architecture validated by Gemini AI (March 30, 2026).**
+
+**Key Policy Decisions:**
+- Payment failure → 3-day grace → auto-downgrade to Awakened (permanent safety net)
+- Chargeback → immediate permanent ban (any amount)
+- Multi-tier support: Max 2 tiers per user (one permanent + one monthly)
+- Email reminders: Day 0, 1, 2, 3 during grace period
+- Cleanup job: Daily at 4:00 AM
+
+**Critical Edge Cases Identified:**
+1. Stripe Smart Retries - payment succeeds Day 5 after Day 3 downgrade (need payment.succeeded webhook)
+2. Double Buy - user buys new subscription during grace period (use UPSERT on email)
+
+**Blocks:** Soft launch (must have cancellation flow before opening subscriptions)
+
+**Blocked By:** Paymenter webhook event research (verify what events are available)
+
+**Next Steps:**
+1. Research Paymenter webhook events (when home)
+2. Decide: Paymenter webhooks vs Stripe webhooks direct
+3. Build database enhancements (permanent_tier, monthly_tier columns)
+4. Implement webhook handlers
+5. Build 4 AM cleanup job
+6. Create 4 email templates
+7. Test thoroughly (especially Stripe retry scenario)
+
+**See task directory for complete architectural review, Gemini consultation, code blocks, and implementation plan.**
+
+---
+
+### 88. Ghost CMS Homepage - Mobile Responsive Fix
+**Time:** 5-10 minutes  
+**Status:** IDENTIFIED — CSS fix ready to apply  
+**Priority:** Tier 2 — Quality of Life  
+**Documentation:** CSS file ready at `/home/claude/ghost-homepage-mobile-fix.css`
+
+Fix mobile layout issues on firefrostgaming.com homepage where content gets cut off on right side of screen on mobile devices.
+
+**Problem:**
+- Content pushed off-screen to right on mobile
+- Text truncated/disappearing
+- Horizontal overflow issues
+- Buttons and cards not wrapping properly
+
+**Root Cause:**
+- Inline styles with fixed max-width values
+- No mobile-responsive media queries
+- Ghost theme CSS not overriding inline styles
+
+**Solution:**
+Complete mobile-responsive CSS media queries ready to inject via Ghost Admin → Settings → Code Injection → Site Header.
+
+**CSS Fixes Applied:**
+- Force full-width layouts on mobile (< 768px)
+- Reduce font sizes (4rem → 2.5rem headings)
+- Stack buttons vertically
+- Stack Fire/Frost path cards
+- Remove negative margins
+- Prevent horizontal scrolling
+- Tablet adjustments (768px - 1024px)
+
+**Implementation:**
+1. Copy CSS from `/home/claude/ghost-homepage-mobile-fix.css`
+2. Ghost Admin → Settings → Code Injection
+3. Paste into Site Header box
+4. Save
+5. Test on mobile device
+
+**Impact:** Immediate improvement to mobile UX, no code changes to homepage HTML needed.
+
+**See CSS file for complete media queries and responsive breakpoints.**
+
+---
+
 
 ---
 

docs/planning/ideas/features/ghost-homepage-mobile-fix.css

@@ -0,0 +1,133 @@
+/* 
+ * GHOST HOMEPAGE MOBILE FIX
+ * Add this to: Ghost Admin → Settings → Code Injection → Site Header
+ * 
+ * Fixes content getting cut off on mobile by forcing full-width layouts
+ * and responsive font sizes
+ */
+
+<style>
+/* Force all homepage sections to full width on mobile */
+@media (max-width: 768px) {
+  
+  /* Remove max-width constraints from all sections */
+  .gh-canvas,
+  .gh-content,
+  .gh-article {
+    max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  
+  /* Ensure all inner containers are responsive */
+  .gh-content > * {
+    max-width: 100% !important;
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+  
+  /* Hero section responsive fixes */
+  .gh-content h1 {
+    font-size: 2.5rem !important; /* Down from 4rem */
+    line-height: 1.2 !important;
+  }
+  
+  /* Subheadings */
+  .gh-content p[style*="font-size: 1.9rem"],
+  .gh-content p[style*="font-size: 1.8rem"] {
+    font-size: 1.3rem !important;
+  }
+  
+  .gh-content p[style*="font-size: 1.25rem"],
+  .gh-content p[style*="font-size: 1.2rem"] {
+    font-size: 1rem !important;
+  }
+  
+  /* Button containers - stack vertically on mobile */
+  .gh-content div[style*="display: flex"] {
+    flex-direction: column !important;
+    gap: 15px !important;
+  }
+  
+  /* Buttons - full width on mobile */
+  .gh-content a[style*="padding: 18px"],
+  .gh-content a[style*="padding: 15px"] {
+    display: block !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+    text-align: center !important;
+  }
+  
+  /* Path cards - stack vertically */
+  .gh-content div[style*="grid-template-columns"] {
+    grid-template-columns: 1fr !important;
+    gap: 25px !important;
+  }
+  
+  /* Remove negative margins that push content offscreen */
+  .gh-content > div[style*="margin: -40px"] {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  
+  /* Images - ensure they don't overflow */
+  .gh-content img {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+  
+  /* Remove excessive padding on mobile */
+  .gh-content div[style*="padding: 80px"],
+  .gh-content div[style*="padding: 60px"] {
+    padding: 40px 20px !important;
+  }
+  
+  /* Card content responsive spacing */
+  .gh-content div[style*="padding: 40px"] {
+    padding: 25px 20px !important;
+  }
+  
+  /* Section titles */
+  .gh-content h2 {
+    font-size: 2rem !important; /* Down from 3rem */
+  }
+  
+  .gh-content h3 {
+    font-size: 1.5rem !important;
+  }
+  
+  /* Lists inside cards */
+  .gh-content ul {
+    padding-left: 20px !important;
+  }
+  
+  /* Ensure no horizontal overflow */
+  body {
+    overflow-x: hidden !important;
+  }
+  
+  .gh-viewport,
+  .gh-main,
+  .gh-page {
+    overflow-x: hidden !important;
+    max-width: 100vw !important;
+  }
+}
+
+/* Tablet responsive adjustments (768px - 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  
+  .gh-content h1 {
+    font-size: 3rem !important;
+  }
+  
+  .gh-content h2 {
+    font-size: 2.5rem !important;
+  }
+  
+  /* Reduce padding on medium screens */
+  .gh-content div[style*="padding: 80px"] {
+    padding: 60px 30px !important;
+  }
+}
+</style>