/* ============================================================ Marketing site — phone responsive overrides ALL rules scoped to (max-width: 480px) so desktop is untouched. Added 2026-05-25 after operator phone-test caught 3 overflow sections: 1. .spectrum-phone-wrap — phone-mockup carousel overflowed right 2. .office-grid — coach-studio mockup column overflowed 3. .diff-row — 3-column comparison table truncated 3rd column File: /var/www/superhumancodes.com/_responsive-overrides.css Loaded via at end of in index.html so it wins source-order. ============================================================ */ @media (max-width: 480px) { /* Universal safety: prevent the page itself from horizontally scrolling. Doesn't hide content — children that overflow get clipped to viewport, and any section that NEEDS horizontal scroll opts in below via overflow-x:auto */ html, body { overflow-x: hidden !important; max-width: 100% !important; } /* ============= SECTION 1: phone-mockup carousel ============= */ /* The .spectrum-phone-wrap row shows multiple themed phones side-by-side at desktop. On phone, make it a horizontal-swipe carousel that lives INSIDE the page width (not overflowing the page). */ .spectrum-phone-wrap { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 16px !important; padding: 0 16px 12px !important; margin: 0 -16px !important; width: calc(100% + 32px) !important; /* hide scrollbar visually but keep scroll functionality */ scrollbar-width: none !important; } .spectrum-phone-wrap::-webkit-scrollbar { display: none !important; } .spectrum-phone-wrap > * { scroll-snap-align: center !important; flex: 0 0 auto !important; } /* Per-phone shrink — desktop renders ~220px wide; phone needs ~210 to fit + show next */ .spec-phone { width: 200px !important; max-width: 200px !important; } .spec-phone-screen { width: 184px !important; max-width: 184px !important; } .spec-phone-iframe { width: 184px !important; max-width: 184px !important; } /* Phone labels under each — keep readable but compact */ .spec-label { max-width: 200px !important; text-align: center !important; } .spec-label-cap, .spec-label-name { max-width: 200px !important; } /* ============= SECTION 2: office / coach-studio mockup ============= */ /* The .office-grid is a 2-column desktop layout (text left, laptop-mockup right). On phone, stack vertically. Laptop mockup scales to fit. */ .office-grid { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 28px !important; padding: 0 !important; } .office-l, .office-r { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .office-h2 { width: 100% !important; max-width: 100% !important; } .office-sub { width: 100% !important; max-width: 100% !important; } .office-bullets, .office-bullet { width: 100% !important; max-width: 100% !important; } /* The laptop mockup — desktop renders ~500px wide; phone needs to fit in viewport. Scale it down to ~340px max + keep aspect ratio. */ .office-laptop { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; transform: scale(0.92) !important; transform-origin: top center !important; } .office-screen { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .office-main, .office-stats, .office-clients { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .office-main-h { width: 100% !important; flex-wrap: wrap !important; } .office-main-title { max-width: 100% !important; } .office-stat { max-width: 100% !important; } .office-client-row { width: 100% !important; max-width: 100% !important; } .office-client-name { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .office-pin { max-width: 100% !important; } /* ============= SECTION 3: comparison table (.diff-row / .diff-cell) ============= */ /* 3-column comparison table — Their / Ours / Label. On phone, stack each row's cells vertically so all 3 are readable. */ .diff-row { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 16px 0 !important; } .diff-row.head { /* The header row can stay as 3 columns if it fits — narrow it */ flex-direction: row !important; gap: 8px !important; } .diff-cell { width: 100% !important; min-width: 0 !important; max-width: 100% !important; word-break: break-word !important; overflow-wrap: break-word !important; box-sizing: border-box !important; padding: 12px !important; } .diff-cell.us { width: 100% !important; max-width: 100% !important; } /* ============= GENERAL SAFETY ============= */ /* Any image, iframe, video — never exceed container width */ img, iframe, video, svg { max-width: 100% !important; height: auto !important; } /* Tables that aren't already handled — let them scroll horizontally */ table { max-width: 100% !important; display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } } /* Slightly tighter rules for very small phones (iPhone SE / Mini width) */ @media (max-width: 380px) { .spec-phone { width: 180px !important; } .spec-phone-screen, .spec-phone-iframe { width: 166px !important; } .office-laptop { max-width: 300px !important; transform: scale(0.86) !important; } } /* Patch — office laptop inner content still overflowed; clip to screen frame */ @media (max-width: 480px) { .office-laptop { overflow: hidden !important; } .office-screen { overflow: hidden !important; border-radius: inherit !important; } .office-main, .office-stats, .office-clients { overflow: hidden !important; } /* Shrink the inner mockup labels so "Roster · 47 clients" fits */ .office-screen .office-main-title, .office-screen .office-stat-num, .office-screen .office-stat-lbl, .office-screen .office-client-name { font-size: 90% !important; } } /* ============================================================ Patch v3 — kill the headline-overlap stickers. Operator screenshot 2026-05-25: chartreuse stickers (.spec-sticker-1/2/3/4) were absolute-positioned for desktop side-flair, but on phone they collapsed onto the "Six...One platform." headline and made it unreadable. Operator quote: "don't cover headlines with bubbles like that. You can put some bubbles, but put them on the side." Fix: ALL absolute-positioned decorative stickers → position:static so they flow with the document naturally (appearing as small badges above/below the headline per their DOM position), never overlapping content. ============================================================ */ @media (max-width: 480px) { /* All the absolute-positioned decorative stickers — let them flow */ .spec-sticker-1, .spec-sticker-2, .spec-sticker-3, .spec-sticker-4, .upload-sticker, .auto-sticker, .diff-sticker, .story-sticker, .price-sticker, .final-sticker, .office-pin { position: static !important; display: inline-block !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 6px 4px !important; font-size: 11px !important; white-space: nowrap !important; } /* Catch-all for any other sticker classes that might be absolute-positioned */ .sticker[class*="-sticker"]:not(.sticker-chart):not(.sticker-forest):not(.sticker-cream), span.sticker[style*="position: absolute"], span.sticker[style*="position:absolute"] { position: static !important; display: inline-block !important; margin: 4px !important; } /* Where multiple stickers cluster around a single headline, give the headline some breathing room above (so the stickers don't visually crowd it). Find the showcase section by its sticker children. */ /* The showcase headline sits between the spec stickers — let it breathe */ .spectrum-phone-wrap { margin-top: 24px !important; } } /* Patch v4 — operator screenshot 2026-05-25: the static-flow approach in v3 still rendered stickers between headline words (DOM-order interleaving). Cleanest mobile read: hide the satellite decorative stickers entirely on phone. The headline stands alone; the brand flavor stays at desktop. */ @media (max-width: 480px) { .spec-sticker-1, .spec-sticker-2, .spec-sticker-3, .spec-sticker-4, .upload-sticker, .auto-sticker, .diff-sticker, .story-sticker, .price-sticker, .final-sticker, .office-pin { display: none !important; } } /* Patch v5 — fix broken phone screenshots in the carousel. v3 set .spec-phone-iframe { width: 184px } which CLIPPED the iframe content (which is designed for ~320px width) instead of scaling it. Result: iframe content visible only in top-left corner; rest of phone frame empty. Correct fix: keep iframe at its native size, scale the whole .spec-phone element with transform:scale so frame + content shrink together. */ @media (max-width: 480px) { /* Revert the broken width overrides on iframe + screen */ .spec-phone-screen { width: auto !important; max-width: none !important; } .spec-phone-iframe { width: auto !important; max-width: none !important; height: auto !important; } /* Keep .spec-phone at desktop intrinsic width but TRANSFORM-scale it so it visually fits the phone viewport. Origin top so margins behave. */ .spec-phone { width: auto !important; max-width: none !important; transform: scale(0.62) !important; transform-origin: top center !important; /* When you scale, the element still occupies its UN-scaled size in layout — compensate with negative margins so siblings flow correctly. */ margin: -90px -50px -110px -50px !important; } /* Carousel gap tightened since each phone is now visually smaller */ .spectrum-phone-wrap { gap: 4px !important; } } /* Patch v6 — undo all the broken sizing experiments (v3 width clip + v5 scale). Reset .spec-phone* to their natural desktop size; rely on the horizontal-scroll carousel alone (overflow-x:auto + scroll-snap) to handle phone fit. */ @media (max-width: 480px) { .spec-phone { width: auto !important; max-width: none !important; transform: none !important; margin: 0 !important; } .spec-phone-screen { width: auto !important; max-width: none !important; transform: none !important; } .spec-phone-iframe { width: auto !important; max-width: none !important; transform: none !important; } .spec-label, .spec-label-cap, .spec-label-name { max-width: none !important; } /* Carousel gap restored to original spacing */ .spectrum-phone-wrap { gap: 16px !important; } } /* Patch v7 — phones collapsed to 18px because width:auto in a flex item uses the intrinsic content width (which for the iframe is tiny). Set explicit widths matching the DESKTOP sizes so iframe content renders correctly. */ @media (max-width: 480px) { .spec-phone { width: 222px !important; max-width: 222px !important; flex: 0 0 222px !important; } .spec-phone-screen { width: 203px !important; max-width: 203px !important; } /* iframe MUST stay at its native ~247px so the rendered content inside (Next.js phone screen UI) doesn't get clipped. */ .spec-phone-iframe { width: 247px !important; max-width: 247px !important; min-width: 247px !important; } }