# Mobile Experience Upgrade Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Upgrade mobile experience for all 30 articles + 4 sales pages with consistent, optimized responsive design.

**Architecture:** Create a shared mobile CSS file (`mobile.css`) that all articles import, providing consistent mobile optimizations across the entire site.

**Tech Stack:** Pure CSS with media queries, no JavaScript changes required.

---

## Current State Analysis

| Issue | Current State | Impact |
|-------|---------------|--------|
| **No shared CSS** | Each article has inline styles | Inconsistent mobile experience |
| **Minimal breakpoints** | Only 768px or 640px | Poor adaptation to various screen sizes |
| **Tables** | No horizontal scroll | Tables overflow on mobile |
| **Hero sections** | Basic padding adjustments | Stats/badges not optimized |
| **Cards/Grids** | Simple 1-column fallback | Not optimized for thumb navigation |
| **Screenshots** | No responsive handling | May overflow or become too small |
| **TOC navigation** | Horizontal scroll | Hard to tap on mobile |
| **Font sizes** | No mobile-specific sizing | Text may be too small |
| **Touch targets** | Not optimized | Links/buttons too small for fingers |

---

## Task 1: Create Shared Mobile CSS

**Files:**
- Create: `/app/cfc/web/css/mobile.css`

**Mobile CSS Content:**

```css
/* ===== Mobile Experience Upgrade ===== */
/* Import this file in all articles: <link rel="stylesheet" href="../css/mobile.css"> */

/* === Base Mobile Reset === */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 1rem;
    --mobile-radius: 12px;
    --touch-target: 44px; /* Apple HIG minimum */
  }
  
  /* Improve text readability */
  body {
    font-size: 16px; /* Prevent iOS zoom */
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  
  /* Hero optimizations */
  .hero {
    padding: 5rem var(--mobile-padding) 2.5rem !important;
    min-height: auto !important;
  }
  
  .hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  .hero p {
    font-size: 0.95rem !important;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .hero-stat {
    min-width: 100% !important;
    padding: 0.75rem !important;
  }
  
  .hero-stat .num {
    font-size: 1.5rem !important;
  }
  
  /* Section padding */
  section {
    padding: 2rem var(--mobile-padding) !important;
  }
  
  /* Card optimizations */
  .info-card,
  .card {
    padding: 1.25rem !important;
    border-radius: var(--mobile-radius) !important;
    margin-bottom: 1rem !important;
  }
  
  .info-card h2,
  .card h3 {
    font-size: 1.25rem !important;
  }
  
  /* Grid → Single column */
  .grid-2,
  .grid-3,
  .infographic,
  .pathway-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Table horizontal scroll */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
    padding: 0 var(--mobile-padding);
  }
  
  .data-table {
    min-width: 600px; /* Force scroll on narrow screens */
    font-size: 0.85rem !important;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.6rem 0.75rem !important;
    white-space: nowrap;
  }
  
  /* Screenshot responsive */
  .screenshot-block {
    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
    border-radius: 0 !important;
  }
  
  .screenshot-block img {
    max-width: 100%;
    height: auto;
  }
  
  /* Evidence links */
  .evidence-link {
    padding: 1rem !important;
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .evidence-link .link-icon {
    font-size: 1.25rem !important;
  }
  
  /* Highlight boxes */
  .highlight-box {
    padding: 1rem 1.25rem !important;
    margin: 1rem 0 !important;
  }
  
  /* TOC navigation */
  .toc-inner {
    padding: 0.5rem var(--mobile-padding) !important;
    gap: 0.5rem !important;
  }
  
  .toc-inner a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
  
  /* Reference list */
  .ref-list {
    padding-left: 1.25rem !important;
  }
  
  .ref-list li {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }
  
  /* Section nav */
  .section-nav {
    gap: 0.5rem !important;
  }
  
  .section-nav a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  
  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: 2rem !important;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 1.5rem !important;
  }
  
  /* Pathway cards */
  .pathway-card {
    border-top-width: 3px !important;
    padding: 1.25rem !important;
  }
  
  .pathway-card h4 {
    font-size: 0.95rem !important;
  }
  
  /* Warning boxes */
  .warning {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Infographic items */
  .info-item {
    padding: 1.25rem !important;
  }
  
  .info-item .icon {
    font-size: 1.75rem !important;
  }
  
  .info-item h4 {
    font-size: 0.9rem !important;
  }
  
  .info-item p {
    font-size: 0.82rem !important;
  }
}

/* === Small phones (≤480px) === */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5rem !important;
  }
  
  .hero-stat .num {
    font-size: 1.25rem !important;
  }
  
  .info-card h2,
  .card h3 {
    font-size: 1.15rem !important;
  }
  
  .data-table {
    min-width: 500px;
  }
}

/* === Touch target sizing === */
@media (hover: none) and (pointer: coarse) {
  a, button, .toc-inner a, .section-nav a {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
  }
  
  /* Increase tap area for links in text */
  p a {
    padding: 0.125rem 0;
    border-bottom: 1px solid currentColor;
  }
}

/* === Safe area for notched phones === */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* === Dark mode support (optional) === */
@media (prefers-color-scheme: dark) {
  /* Can be enabled later if needed */
}
```

- [ ] **Step 1: Create mobile.css file**

Create the file at `/app/cfc/web/css/mobile.css` with the content above.

- [ ] **Step 2: Verify file exists**

Run: `ls -la /app/cfc/web/css/mobile.css`
Expected: File exists with ~200 lines

---

## Task 2: Add Mobile CSS to All Articles

**Files to modify (30 articles):**
- All files in `/app/cfc/web/articles/*.html`

**Pattern to add in each file's `<head>`:**

```html
<link rel="stylesheet" href="../css/mobile.css">
```

Add this line AFTER the existing `<style>` block (before `</head>`).

**Files list:**
1. alzheimer.html
2. cardio-cerebro.html
3. cancer.html
4. diabetes.html
5. enagic-turmeric.html
6. geo-faq-1-allergy.html
7. geo-faq-2-attention.html
8. geo-faq-3-immunity.html
9. gut-microbiome-immune.html
10. gut-microbiota-testing.html
11. indicator-disease-risk.html
12. indicator-gut-barrier.html
13. indicator-microbiome-diversity.html
14. indicator-neurotransmitters.html
15. indicator-nutrition.html
16. indicator-pathogens.html
17. indicator-scfas.html
18. indicator-vitamins.html
19. metabolic-syndrome.html
20. osteoporosis.html
21. plastic-health.html
22. prebiotics-guide.html
23. prebiotics-science.html
24. probiotics-guide.html
25. probiotics-science.html
26. puerarin.html
27. tap-water-pollution.html
28. turmeric.html
29. uric-acid.html
30. water-purifier-guide.html

- [ ] **Step 1: Add mobile.css link to first 10 articles**

For each file, add `<link rel="stylesheet" href="../css/mobile.css">` before `</head>`.

- [ ] **Step 2: Add mobile.css link to next 10 articles**

- [ ] **Step 3: Add mobile.css link to remaining 10 articles**

- [ ] **Step 4: Verify all files updated**

Run: `grep -l "mobile.css" /app/cfc/web/articles/*.html | wc -l`
Expected: 30

---

## Task 3: Add Mobile CSS to Sales Pages

**Files to modify:**
- `/app/cfc/web/sales/sales.html`
- `/app/cfc/web/sales/tap-water-sale.html`
- `/app/cfc/web/sales/microplastic-sale.html`
- `/app/cfc/web/sales/index.html`

**Pattern to add:**

```html
<link rel="stylesheet" href="../css/mobile.css">
```

- [ ] **Step 1: Add mobile.css link to sales.html**

- [ ] **Step 2: Add mobile.css link to tap-water-sale.html**

- [ ] **Step 3: Add mobile.css link to microplastic-sale.html**

- [ ] **Step 4: Add mobile.css link to index.html**

- [ ] **Step 5: Verify all sales files updated**

Run: `grep -l "mobile.css" /app/cfc/web/sales/*.html | wc -l`
Expected: 4

---

## Task 4: Remove Conflicting Inline Media Queries

Many articles have their own `@media` rules that may conflict with the shared mobile.css. We need to remove redundant inline rules that are now handled by mobile.css.

**Common redundant patterns to remove:**

```css
/* These are now handled by mobile.css - safe to remove */
@media (max-width: 768px) {
  .hero { padding: 4rem 1.5rem 3rem; min-height: 50vh; }
  .hero-stats { gap: 1rem; }
  .hero-stat { min-width: 110px; padding: 0.75rem 1rem; }
  .hero-stat .num { font-size: 1.5rem; }
  section { padding: 3rem 0; }
  .info-card { padding: 1.5rem; }
  .pathway-grid { grid-template-columns: 1fr; }
}
```

**Note:** Keep article-specific rules that mobile.css doesn't cover (e.g., custom component styles).

- [ ] **Step 1: Identify articles with redundant media queries**

Run: `grep -l "@media.*768px" /app/cfc/web/articles/*.html`

- [ ] **Step 2: Remove redundant rules from turmeric.html**

- [ ] **Step 3: Remove redundant rules from cancer.html**

- [ ] **Step 4: Remove redundant rules from puerarin.html**

- [ ] **Step 5: Remove redundant rules from other articles (batch)**

- [ ] **Step 6: Verify no broken styles**

Visually inspect 3-4 articles on mobile viewport.

---

## Task 5: Test Mobile Experience

**Test checklist:**

- [ ] **Step 1: Test hero section on mobile**
  - Stats stack vertically
  - Text is readable
  - No horizontal overflow

- [ ] **Step 2: Test tables on mobile**
  - Horizontal scroll works
  - Headers visible while scrolling

- [ ] **Step 3: Test cards/grids on mobile**
  - Single column layout
  - Adequate spacing

- [ ] **Step 4: Test TOC navigation on mobile**
  - Horizontal scroll
  - Touch targets adequate

- [ ] **Step 5: Test screenshots on mobile**
  - Responsive sizing
  - Captions readable

- [ ] **Step 6: Test footer on mobile**
  - Columns stack
  - Links accessible

---

## Global Constraints

- Must work on iOS Safari and Chrome (Android)
- No JavaScript changes required
- Must not break existing desktop styles
- Must maintain accessibility
- Touch targets minimum 44x44px (Apple HIG)
- Font size minimum 16px on mobile (prevents iOS zoom)

---

## Expected Outcomes

| Metric | Before | After |
|--------|--------|-------|
| Mobile breakpoints | 768px only | 768px + 480px + touch |
| Table usability | Overflow | Horizontal scroll |
| Touch targets | Varies | 44px minimum |
| Consistency | Per-article | Shared mobile.css |
| Hero readability | Basic | Optimized |
| Card layouts | Simple stack | Thumb-friendly |