/** * AEO-REX Spacing Fix * Created: 2025-01-14 * Purpose: Fix excessive gaps and hero section height issues * * THE PROBLEM: Hero section taking too much viewport height, * forcing users to scroll 3+ seconds before seeing content * * HOW TO USE: * Add this AFTER responsive-fixes.css in the : * */ /* ============================================ HERO SECTION HEIGHT FIX Reduce from 100vh to sensible max-height ============================================ */ .hero-section, .hero, [class*="hero"], .banner, header.hero, section.hero { height: auto !important; min-height: auto !important; max-height: 70vh !important; padding: 40px 20px !important; overflow: visible !important; } /* Fallback for any 100vh elements */ [style*="100vh"], [style*="min-height: 100vh"] { min-height: 60vh !important; max-height: 70vh !important; } /* ============================================ CHECKER WIDGET SIZE REDUCTION The main cause of excessive scrolling ============================================ */ .checker-widget { /* Dramatically reduce the circle size */ width: clamp(300px, 90%, 500px) !important; height: auto !important; min-height: auto !important; max-height: none !important; /* Make it a rounded rectangle on all screens */ border-radius: 24px !important; /* Reduce padding */ padding: 32px 24px !important; /* Center it */ margin: 20px auto !important; } /* Checker widget title */ .checker-widget h2 { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; margin-bottom: 8px !important; line-height: 1.3 !important; } /* Checker subtitle */ .checker-widget .checker-subtitle, .checker-widget .subtitle { font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important; margin-bottom: 16px !important; } /* Form container */ .checker-widget .checker-form { max-width: 100% !important; gap: 10px !important; } /* Form inputs */ .checker-widget .form-input, .checker-widget input { padding: 14px 16px !important; font-size: 1rem !important; border-radius: 10px !important; } /* Submit button */ .checker-widget .btn-primary, .checker-widget button[type="submit"] { padding: 14px 24px !important; font-size: 1.1rem !important; border-radius: 10px !important; } /* Trust badges */ .checker-widget .trust-badges { margin-top: 14px !important; font-size: 0.85rem !important; gap: 12px !important; } /* ============================================ SECTION SPACING REDUCTION Remove excessive gaps between sections ============================================ */ section { padding: 40px 24px !important; margin: 0 !important; } /* Specific sections */ .problem-agitation, .method-section, .pricing-section, .social-proof, .cta-section { padding: 32px 24px !important; } /* Remove large gaps */ .hero { padding-bottom: 20px !important; } .method-section { padding-top: 20px !important; } /* ============================================ FREE TOOLS BANNER Make smaller and less intrusive ============================================ */ .free-tools-banner { padding: 10px 20px !important; margin: 12px auto !important; border-radius: 10px !important; } .free-tools-banner a { font-size: 1rem !important; } /* ============================================ FLOATING ELEMENTS Adjust floating banner at bottom ============================================ */ .floating-banner { padding: 12px 20px !important; } .floating-banner .counter-text { font-size: 0.95rem !important; } .floating-banner .counter-num { font-size: 1.4rem !important; } .floating-banner .cta-btn { padding: 10px 20px !important; font-size: 0.9rem !important; } /* ============================================ GRID GAPS REDUCTION ============================================ */ .pricing-grid { gap: 16px !important; } .method-steps { gap: 12px !important; } .problem-stats { gap: 12px !important; } /* ============================================ HEADING MARGINS Reduce space between headings ============================================ */ h1, .hero-headline { margin-bottom: 10px !important; } h2 { margin-bottom: 16px !important; } .method-title { margin-bottom: 10px !important; } .method-subtitle { margin-bottom: 16px !important; } /* ============================================ MOBILE SPECIFIC OVERRIDES ============================================ */ @media (max-width: 768px) { .hero-section, .hero, [class*="hero"] { max-height: none !important; padding: 24px 16px !important; } .checker-widget { width: 95% !important; padding: 24px 16px !important; margin: 16px auto !important; } .checker-widget h2 { font-size: 1.15rem !important; } .checker-widget .checker-subtitle { font-size: 0.85rem !important; } section { padding: 24px 16px !important; } .free-tools-banner { padding: 8px 14px !important; margin: 10px auto !important; } .free-tools-banner a { font-size: 0.9rem !important; } .floating-banner { padding: 10px 12px !important; } } /* ============================================ STAT CARDS SIZE ============================================ */ .stat-card { padding: 20px 16px !important; min-width: 180px !important; } .stat-number { font-size: clamp(2rem, 8vw, 3rem) !important; margin-bottom: 4px !important; } .stat-text { font-size: 0.85rem !important; } /* ============================================ PRICING CARDS COMPACT ============================================ */ .pricing-card { padding: 24px 20px !important; } .card-price { font-size: 2rem !important; } .card-desc, .tier-tagline { min-height: 32px !important; margin-bottom: 12px !important; } /* ============================================ METHOD STEPS COMPACT ============================================ */ .method-step-btn { padding: 18px 32px !important; font-size: 1.15rem !important; min-width: 160px !important; } .method-arrow { font-size: 1.5rem !important; margin: 0 4px !important; } /* ============================================ CANVAS/CIRCUIT ANIMATION Ensure it doesn't block content ============================================ */ #circuit-canvas, canvas { position: fixed !important; z-index: -10 !important; pointer-events: none !important; }