/*! * mobile-homepage.css — Homepage-only mobile length reduction + mobile rescue * Created: 2026-04-18 (S48) * Last updated: 2026-04-18 — S48 panel sweep: Tier 2 mobile rescue + Tier 7 partial polish * Goal: cut mobile homepage from 21,025px to ~14,000px + fix iOS auto-zoom + kill heavy paint effects * All rules scoped: body.home + @media (max-width: 1049px) (except scroll-padding-top on ) * Desktop (>=1050px) behavior: unchanged */ /* T7.6 — scroll-padding-top so in-page anchors clear the sticky nav. Outside the media query by design (sets a base for both breakpoints). */ html { scroll-padding-top: 72px; } @media (min-width: 1050px) { html { scroll-padding-top: 120px; } } @media (max-width: 1049px) { /* ---------- 1. Comparison table -> stacked cards (~ -1,200px) ---------- */ /* Kept in place even if content.html drops the table — dead rules are no-op. */ body.home .ptg-comparison-table-section table, body.home .ptg-comparison-table-section thead, body.home .ptg-comparison-table-section tbody, body.home .ptg-comparison-table-section tr, body.home .ptg-comparison-table-section td, body.home .ptg-comparison-table-section th { display: block; width: 100%; } body.home .ptg-comparison-table-section thead { display: none; } body.home .ptg-comparison-table-section tr { margin-bottom: 16px; padding: 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(17,27,51,0.5); } body.home .ptg-comparison-table-section td { padding: 6px 0; border: none; } body.home .ptg-comparison-table-section td:first-child { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); } /* ---------- 2. Footer nav -> 2-column (~ -1,100px) ---------- */ /* Cols live inside .ptg-footer-nav-inner, not inside #footer wrapper. */ body.home .ptg-footer-nav-inner { font-size: 0; } /* collapse inline-block whitespace */ body.home .ptg-footer-nav-col { width: 48%; display: inline-block; vertical-align: top; font-size: 14px; padding: 0 4px; box-sizing: border-box; } body.home .ptg-footer-nav-col a.text_small { font-size: 13px; padding: 6px 0; min-height: 32px; } /* ---------- 3. Videos grid -> 2 cards on mobile (~ -800px) ---------- */ body.home .ptg-video-grid { grid-template-columns: 1fr !important; gap: 12px !important; } body.home .ptg-video-card:nth-child(n+3) { display: none; } /* ---------- 4. Tighter section padding (~ -600px cumulatively) ---------- */ body.home .ptg-section { padding-top: 48px; padding-bottom: 48px; } body.home .ptg-why, body.home .ptg-ai-showcase, body.home .ptg-how-it-works { padding-top: 40px; padding-bottom: 40px; } body.home .ptg-final-cta { padding-top: 56px; padding-bottom: 56px; } /* ---------- 5. Mobile hero tightening (kills 300px black gap above ticker) ---------- */ /* Cut the mobile content_container top padding from 130px to 66px. Default-top.tpl line 333 + master.css both set 130px (via body.home.mobile #content_container.tiny). We need matching/higher specificity (1,3,2) to win. */ html body.home.mobile #content_container.tiny, html body.home #content_container { padding-top: 66px !important; } /* Kill the 80vh min-height and tighten padding so the hero isn't half-empty. */ body.home .ptg-hero { min-height: auto; padding: 12px 0 24px; } body.home .ptg-hero-inner { gap: 24px; padding: 0 20px; } body.home .ptg-hero-text { max-width: 100%; } body.home .ptg-hero-description { margin-bottom: 20px; font-size: 1rem; line-height: 1.55; } body.home .ptg-hero-ctas { margin-bottom: 8px; } body.home .ptg-hero-guarantee { max-width: 280px; /* keep microcopy out of widget corners */ margin-left: auto; margin-right: auto; text-align: center; margin-top: 12px; } /* Trust badge: less vertical waste */ body.home .ptg-trust-badge { margin-bottom: 12px; } /* Headline: snug against badge */ body.home .ptg-h1 { margin-bottom: 12px; } /* ---------- 6. Tighten bottom-of-page clutter ---------- */ body.home .ptg-podcast-section { padding: 16px 20px 24px; } body.home .ptg-trust-bar { padding: 8px 12px; } /* ---------- T2.1 Body font 16px minimum (iOS Safari auto-zoom threshold) ---------- */ /* !important needed to beat homepage.css mobile rules that force 11.2px on body copy. */ body.home #content, body.home #content p, body.home #content li, body.home #content .text_small, body.home #content p.text_small { font-size: 16px !important; line-height: 1.55 !important; } /* Fallback if venue.js uses body.mobile instead of #content scoping */ body.mobile.home #content, body.mobile.home #content p, body.mobile.home #content li, body.mobile.home #content .text_small { font-size: 16px !important; line-height: 1.55 !important; } /* Reserve smaller sizes for dense chips, breadcrumbs, legal only */ body.home .ptg-hero-guarantee { font-size: 14px; } body.home .ptg-credential-chip, body.home .ptg-chip { font-size: 12px; } /* ---------- T2.3 Kill magnetic cursor + gradient text + glow animations on touch ---------- */ /* !important needed to override inline transforms/animations set by JS. */ body.home .ptg-magnetic { transform: none !important; transition: none !important; } body.home .ptg-cursor-glow { display: none !important; } body.home .ptg-gradient-mesh { animation: none !important; } body.home .ptg-accent-gradient { /* Keep the accent color but drop the gradient/clip so it renders cleanly on iOS */ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #00A9E0 !important; -webkit-text-fill-color: #00A9E0 !important; } /* Drop hero CTA glow animation on mobile — costs paint, adds to "busy" feel */ body.home .ptg-hero-cta-glow { animation: none !important; } /* ---------- T2.4 Sticky bottom action bar (Call + Get Quote) ---------- */ body.home .ptg-mob-action-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; display: flex; gap: 0; background: rgba(5,8,16,0.96); backdrop-filter: blur(12px); border-top: 1px solid rgba(0,169,224,0.15); padding: 8px; box-shadow: 0 -4px 20px rgba(0,0,0,0.4); } body.home .ptg-mob-action-bar a { flex: 1; text-align: center; padding: 12px 8px; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 8px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; } body.home .ptg-mob-action-bar a:first-child { color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); margin-right: 4px; } body.home .ptg-mob-action-bar a:last-child { color: #fff; background: linear-gradient(135deg, #00A9E0, #7C3AED); margin-left: 4px; } /* Give the page bottom padding so the sticky bar doesn't cover content */ body.home { padding-bottom: 72px; } /* If an existing ptg-sticky-cta is present, let this one override */ body.home #ptg-sticky-cta { display: none !important; } /* ---------- T7.8 Hide any legacy floating phone FAB ---------- */ /* Defensive rule — no harm if selectors don't match. */ body.home .ptg-phone-fab, body.home .ptg-floating-phone, body.home .ptg-lime-call { display: none !important; } }