/** * AEO-REX Hero & Text Visibility Fix * Created: 2025-01-14 * Purpose: Fix text visibility over circuit board animation * * THE PROBLEM: Circuit board animation makes text hard to read * without proper contrast and text shadows * * HOW TO USE: * Add this AFTER spacing-fix.css in the : * */ /* ============================================ DARK OVERLAY FOR HERO Adds semi-transparent overlay for readability ============================================ */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 180deg, rgba(10, 15, 30, 0.85) 0%, rgba(15, 10, 30, 0.80) 50%, rgba(10, 16, 32, 0.85) 100% ); z-index: 1; pointer-events: none; } /* Ensure all hero content is above the overlay */ .hero > * { position: relative; z-index: 10; } /* ============================================ TEXT SHADOWS FOR READABILITY ============================================ */ /* Main headline */ .hero-headline, .hero h1, h1.speakable-headline { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 243, 255, 0.3) !important; } /* Subheadline */ .hero-subhead, .hero p { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 3px 6px rgba(0, 0, 0, 0.4) !important; } /* All section headings */ h2, h3, h4 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 243, 255, 0.2) !important; } /* Body text in sections */ .problem-narrative p, .problem-agitation p, .method-subtitle, .pricing-section p, .cta-section p, .social-proof p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; } /* ============================================ SECTION BACKGROUNDS Solid backgrounds for better readability ============================================ */ /* Problem agitation section */ .problem-agitation { background: rgba(10, 15, 30, 0.95) !important; } /* Method section */ .method-section { background: rgba(10, 15, 30, 0.95) !important; } /* Pricing section */ .pricing-section { background: rgba(15, 10, 30, 0.95) !important; } /* CTA section */ .cta-section { background: rgba(10, 15, 30, 0.95) !important; } /* Social proof */ .social-proof { background: rgba(10, 15, 30, 0.90) !important; } /* Footer */ .footer { background: rgba(10, 10, 26, 0.98) !important; } /* ============================================ CARD/BOX BACKGROUNDS Ensure cards are clearly visible ============================================ */ /* Stat cards */ .stat-card { background: rgba(10, 15, 30, 0.95) !important; backdrop-filter: blur(5px) !important; } /* Pricing cards */ .pricing-card { background: rgba(10, 15, 30, 0.95) !important; backdrop-filter: blur(5px) !important; } .pricing-card.featured { background: rgba(26, 10, 32, 0.95) !important; } /* Checker widget */ .checker-widget { background: rgba(13, 20, 35, 0.98) !important; backdrop-filter: blur(10px) !important; } /* Results display */ .results-display { background: rgba(10, 15, 30, 0.98) !important; backdrop-filter: blur(10px) !important; } .analysis-section { background: rgba(8, 12, 20, 0.95) !important; } .platform-score-card { background: rgba(8, 12, 20, 0.95) !important; } .results-cta { background: rgba(15, 21, 37, 0.98) !important; } /* ============================================ FREE TOOLS BANNER VISIBILITY ============================================ */ .free-tools-banner { backdrop-filter: blur(5px) !important; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4), 0 0 30px rgba(251, 191, 36, 0.2) !important; } /* ============================================ FLOATING BANNER VISIBILITY ============================================ */ .floating-banner { background: rgba(26, 26, 46, 0.98) !important; backdrop-filter: blur(10px) !important; } /* ============================================ NAV VISIBILITY ============================================ */ .nav { background: rgba(10, 10, 26, 0.98) !important; backdrop-filter: blur(15px) !important; } /* ============================================ BUTTON TEXT VISIBILITY ============================================ */ .btn-primary, .card-btn, .cta-btn { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } .btn-secondary { text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important; } /* ============================================ METHOD STEPS VISIBILITY ============================================ */ .method-step-btn { text-shadow: 0 0 15px rgba(0, 243, 255, 0.5) !important; backdrop-filter: blur(5px) !important; } .method-step-btn:hover { text-shadow: none !important; } /* ============================================ TRUST BADGES VISIBILITY ============================================ */ .trust-badges span { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } /* ============================================ GOOGLE ADS BANNER ============================================ */ section[style*="rgba(15, 20, 35"] { background: rgba(15, 20, 35, 0.98) !important; backdrop-filter: blur(5px) !important; } /* ============================================ WATERMARK ADJUSTMENT Reduce opacity if needed for readability ============================================ */ .page-watermark { opacity: 0.06 !important; } @media (max-width: 768px) { .page-watermark { opacity: 0.04 !important; } } /* ============================================ HIGHLIGHT TEXT VISIBILITY ============================================ */ .highlight, [class*="highlight"], .hero-headline .highlight { filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.5)) !important; } /* ============================================ LINK VISIBILITY ============================================ */ a { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .footer-col a, .footer-bottom a { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; }