/* ======================================== MOBILE RESPONSIVE OVERRIDES Fox Fuel B2B - Maximum Specificity ======================================== CRITICAL: This file must load LAST in Purpose: Override all inline styles and other CSS to ensure proper mobile responsive behavior. Uses high-specificity selectors and !important declarations to override inline styles. ======================================== */ /* ============================================ MOBILE: All card grids to single column Max width: 767px (iPhone, Android phones) ============================================ */ @media screen and (max-width: 767px) { /* ---------------------------------------- UNIVERSAL GRID RESET FOR MOBILE Targets all grid-based card layouts ---------------------------------------- */ .service-cards, .services-grid, .services-section .service-cards, .industries-grid, .industries-section .industries-grid, .steps-grid, .how-it-works-section .steps-grid, .diff-grid, .features-grid, .benefits-grid, .team-grid, .testimonials-grid, .cards-grid, .card-grid, .grid-cards, .cards, div[class*="-grid"], div[class*="-cards"], div[class*="grid-"], section div[style*="grid-template-columns"] { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; gap: 1.5rem !important; width: 100% !important; max-width: 100% !important; } /* ---------------------------------------- TRUST BAR / PROOF GRID: 2x2 Layout Keep stats in 2x2 grid for readability ---------------------------------------- */ .proof-grid, .trust-bar, .stats-grid, .stats-bar, .proof-bar .proof-grid, section[style*="background: #2F2F2F"] .proof-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } /* ---------------------------------------- FOOTER: Stack columns vertically ---------------------------------------- */ .footer-container, .site-footer .footer-container, footer .footer-container { grid-template-columns: 1fr !important; gap: 2rem !important; } /* ---------------------------------------- INDIVIDUAL CARD ITEMS Ensure cards take full width ---------------------------------------- */ .service-card, .service-cards > a, .service-cards > div, .industry-card, .industries-grid > a, .industries-grid > div, .feature-card, .benefit-card, .step-card, .step, .steps-grid > div, .diff-item, .diff-grid > div, .card, div[class*="-card"], .service-cards > *, .industries-grid > *, .steps-grid > *, .diff-grid > *, .features-grid > *, .cards > * { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-bottom: 0 !important; } /* ---------------------------------------- CARD HEADINGS Prevent vertical character wrapping ---------------------------------------- */ .service-card h3, .service-card h4, .service-cards h3, .service-cards h4, .industry-card h3, .industry-card h4, .industries-grid h3, .industries-grid h4, .card h3, .card h4, .step h3, .step h4, div[class*="-card"] h3, div[class*="-card"] h4 { font-size: 1.25rem !important; line-height: 1.3 !important; word-wrap: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; white-space: normal !important; text-align: left !important; } /* ---------------------------------------- CARD BODY TEXT Ensure readable font sizes ---------------------------------------- */ .service-card p, .industry-card p, .card p, .step p, div[class*="-card"] p { font-size: 0.875rem !important; line-height: 1.5 !important; word-wrap: normal !important; overflow-wrap: normal !important; } /* ---------------------------------------- HERO SECTION Stack buttons vertically on mobile ---------------------------------------- */ .hero-cta-group, .hero-home .hero-cta-group, section[class*="hero"] .hero-cta-group { flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; } .hero-cta-group .btn, .hero-cta-group a { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; text-align: center !important; } /* ---------------------------------------- HERO TYPOGRAPHY Scale down for mobile readability ---------------------------------------- */ .hero-home h1, section[class*="hero"] h1 { font-size: 1.5rem !important; line-height: 1.2 !important; } .hero-home .subheadline, .hero-home p.subheadline, section[class*="hero"] .subheadline { font-size: 1rem !important; line-height: 1.5 !important; } /* ---------------------------------------- PROOF / STATS VALUES Scale down numbers for mobile ---------------------------------------- */ .proof-value, .proof-grid .proof-value, span.proof-value { font-size: 1.5rem !important; } .proof-label, .proof-grid .proof-label, span.proof-label { font-size: 0.75rem !important; line-height: 1.3 !important; } /* ---------------------------------------- FLEXBOX CONTAINERS Convert to vertical stacking ---------------------------------------- */ .services-section .flex, .industries-section .flex, section .flex, .flex-row, .flex-wrap, div[style*="display: flex"] { flex-direction: column !important; align-items: stretch !important; } /* ---------------------------------------- OVERRIDE INLINE STYLES Target specific inline style patterns ---------------------------------------- */ [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; } /* Exception for proof/stats grid - keep 2x2 */ .proof-grid[style*="grid-template-columns: repeat(4"], .trust-bar[style*="grid-template-columns: repeat(4"], .stats-grid[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } /* Exception for footer - stack vertically */ .footer-container[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; } /* ---------------------------------------- IMAGES IN CARDS Ensure proper sizing ---------------------------------------- */ .service-card img, .industry-card img, .card img, div[class*="-card"] img { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: cover !important; } /* ---------------------------------------- SECTION PADDING Reduce for mobile ---------------------------------------- */ section, .services-section, .industries-section, .how-it-works-section { padding: 2rem 0 !important; } /* ---------------------------------------- CONTAINER PADDING Ensure minimum horizontal padding ---------------------------------------- */ .container { padding-left: 1rem !important; padding-right: 1rem !important; } /* ---------------------------------------- BUTTONS Ensure touch-friendly sizing ---------------------------------------- */ .btn, .btn-primary, .btn-secondary, .btn-large, a.btn, button.btn { min-height: 44px !important; padding: 0.75rem 1rem !important; font-size: 1rem !important; } .btn-large { padding: 1rem 1.5rem !important; } } /* ============================================ TABLET: 2-column layouts Width: 768px - 1023px (iPad, tablets) ============================================ */ @media screen and (min-width: 768px) and (max-width: 1023px) { /* Most card grids: 2 columns */ .service-cards, .services-grid, .industries-grid, .features-grid, .benefits-grid, .diff-grid, div[class*="-grid"]:not(.proof-grid):not(.stats-grid):not(.footer-container) { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; } /* Steps: 2 columns on tablet */ .steps-grid, .how-it-works-section .steps-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Proof/Stats: Keep 4 columns */ .proof-grid, .trust-bar, .stats-grid { grid-template-columns: repeat(4, 1fr) !important; } /* Footer: 2 columns */ .footer-container, .site-footer .footer-container { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================ DESKTOP: Full multi-column layouts Width: 1024px and above ============================================ */ @media screen and (min-width: 1024px) { /* Service cards: 3 columns */ .service-cards, .services-grid, .services-section .service-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; } /* Industry cards: 3 columns */ .industries-grid, .industries-section .industries-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; } /* Steps: 4 columns */ .steps-grid, .how-it-works-section .steps-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2rem !important; } /* Diff grid: 3 columns */ .diff-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; } /* Proof/Stats: 4 columns */ .proof-grid, .trust-bar, .stats-grid, .proof-bar .proof-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2rem !important; } /* Footer: 4 columns (with first column wider) */ .footer-container, .site-footer .footer-container { grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 2rem !important; } } /* ============================================ DEBUGGING AID Remove this section in production ============================================ */ /* @media (max-width: 767px) { body::before { content: "MOBILE: < 768px"; position: fixed; top: 0; left: 0; background: red; color: white; padding: 5px 10px; z-index: 99999; font-size: 12px; } } @media (min-width: 768px) and (max-width: 1023px) { body::before { content: "TABLET: 768-1023px"; position: fixed; top: 0; left: 0; background: orange; color: white; padding: 5px 10px; z-index: 99999; font-size: 12px; } } @media (min-width: 1024px) { body::before { content: "DESKTOP: 1024px+"; position: fixed; top: 0; left: 0; background: green; color: white; padding: 5px 10px; z-index: 99999; font-size: 12px; } } */