/* ============================================================ FYTS GLOBAL MOBILE FIXES Applies tight mobile rules across ALL pages. Loaded last in , so rules here override per-page styles on phones. ============================================================ */ /* Prevent horizontal scroll on every page, every device */ html, body { overflow-x: hidden; max-width: 100%; } /* Images and embeds never overflow their container */ img, iframe, video { max-width: 100%; height: auto; } /* ------------- PHONE: up to 720px ------------- */ @media (max-width: 720px) { /* Comfortable base touch sizes + tighter gutters */ body { font-size: 16px; -webkit-text-size-adjust: 100%; } /* Ensure the site's inner wrappers breathe on small screens */ .wrap, .hero-container, .posts-container, .lead-magnet-inner, .nav-container, .footer-content { padding-left: 18px !important; padding-right: 18px !important; max-width: 100% !important; } /* ---- Lead magnet banners (home, blog, pillars, posts) ---- */ .lead-magnet-inner { flex-direction: column !important; text-align: center; gap: 12px !important; } .lead-magnet-inner img { width: 88px !important; } .lead-magnet-inner > a:last-child { width: 100%; text-align: center; } /* Hero text scale-downs that aren't already handled per-page */ h1 { font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } h2 { font-size: 24px !important; line-height: 1.25 !important; } h3 { font-size: 19px !important; } /* Paragraphs stay readable */ p, li { font-size: 16px !important; line-height: 1.55 !important; } /* Large banner headers (homepage hero etc.) */ .hero h1, .hero-content h1, .hero-title { font-size: 30px !important; } .hero p, .hero .sub, .hero-subtitle { font-size: 16px !important; } /* Section padding — stop the giant empty blocks */ section { padding-top: 44px !important; padding-bottom: 44px !important; } .hero { padding: 44px 0 40px !important; } /* CTAs: make every button full-width and thumb-friendly */ .btn, .cta, .cta-button, .submit-btn, .btn-buy, .nav-cta, a.gumroad-button { display: block !important; width: 100% !important; box-sizing: border-box; padding: 16px 18px !important; font-size: 15px !important; min-height: 48px; } /* Inline nav CTA exception — keep it reasonable inside the nav bar */ .nav-cta { max-width: none; } /* Grids collapse to one column by default */ .product-grid, .why-grid, .inside-grid, .posts-grid, .hero-grid, .features-grid, .pricing-grid, .neighborhood-grid, .related-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* Product cards keep nice aspect when image is on top */ .product-image { min-height: 160px !important; } .product-image img { max-height: 220px; } /* Shop card body a bit tighter */ .product-body { padding: 22px !important; } .product-body h2 { font-size: 20px !important; } /* Hero-grid form card (lead magnet) — let image and form breathe */ .form-card { padding: 24px !important; } .form-card h2 { font-size: 22px !important; } /* Price rows shouldn't crash */ .price-row { flex-wrap: wrap; gap: 8px; } .price { font-size: 28px !important; } .price-old { font-size: 15px !important; } /* Tables inside blog posts — let them scroll horizontally */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Nav collapses — hide desktop nav-links until toggled open. NOTE: no !important here so the JS can toggle display. */ .nav-links { display: none; } /* Hamburger always visible on phones */ .mobile-menu-toggle { display: block !important; background: transparent; color: #fff; border: 0; font-size: 28px; cursor: pointer; padding: 6px 10px; } /* When opened (either by JS inline style or .open class), become a full-width vertical dropdown under the navbar */ .nav-links.open, .nav-links[style*="flex"], .nav-links[style*="block"] { display: flex !important; flex-direction: column !important; position: absolute !important; top: 100%; left: 0; right: 0; width: 100% !important; background: #0A1628 !important; border-top: 2px solid #D4AF37; padding: 8px 0 !important; margin: 0 !important; z-index: 999; gap: 0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .nav-links.open a, .nav-links[style*="flex"] a, .nav-links[style*="block"] a { display: block !important; width: 100% !important; margin: 0 !important; padding: 14px 22px !important; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 0 !important; color: #fff !important; font-size: 16px !important; font-weight: 600; text-align: left; background: transparent !important; } .nav-links.open a.nav-cta, .nav-links[style*="flex"] a.nav-cta, .nav-links[style*="block"] a.nav-cta { background: #D4AF37 !important; color: #0A1628 !important; margin: 6px 14px 8px !important; width: auto !important; text-align: center; border-radius: 4px !important; border: 0; } /* Navbar must be the positioning context for the dropdown */ .navbar, nav.navbar { position: relative; } /* Post-card image (emoji) — smaller hero */ .post-image { font-size: 48px !important; padding: 28px !important; } /* Breadcrumbs don't break layout */ .breadcrumb { font-size: 12px; padding: 10px 18px; } /* Footer columns stack */ .footer-grid, .footer-content { grid-template-columns: 1fr !important; text-align: center; gap: 20px; } /* Shop page headline buttons under a card should stack not sit side-by-side */ .product-body .btn + .btn { margin-top: 10px; } } /* ------------- SMALL PHONE: up to 420px ------------- */ @media (max-width: 420px) { h1 { font-size: 26px !important; } h2 { font-size: 22px !important; } .hero { padding: 36px 0 32px !important; } .eyebrow, .tag { font-size: 10px !important; } .lead-magnet-inner img { width: 76px !important; } .nav-container, .navbar .wrap { padding: 10px 14px !important; } .logo { font-size: 20px !important; } } /* ------------- TAP TARGETS ------------- */ @media (hover: none) and (pointer: coarse) { a, button, .btn { min-height: 44px; } input, textarea, select { font-size: 16px !important; } /* prevents iOS zoom on focus */ }