/* ================================================================= AETHERBLOOM — PRICING PAGE ANIMATED DARK GRADIENT BACKGROUND File: /wp-content/themes/aetherbloom/css/pricing-bg-override.css Overrides the cream/white background with a dramatic dark animated gradient matching the brand palette: Dark Green + Orange accents ================================================================= */ /* --------------------------------------------------------------- 1. ANIMATED BACKGROUND ON THE WHOLE PAGE --------------------------------------------------------------- */ /* Kill the cream background everywhere on this page */ .page-our-pricing body, body.page-our-pricing { background: #0a1612 !important; } /* Override the global orange gradient that body::before applies */ .page-our-pricing body::before { background: #0a1612 !important; z-index: -10; } /* Override body::after radial glow — let our ::before/::after handle it */ .page-our-pricing body::after { display: none !important; } /* Hide the petal container — our CSS gradient is the background */ .page-our-pricing .fixed-petals-container { display: none !important; } .pricing-page-layout { background: transparent !important; min-height: 100vh; position: relative; overflow-x: hidden; } /* The animated background canvas — fixed so it covers the whole viewport */ .pricing-page-layout::before { content: ''; position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 120% 80% at 10% 20%, rgba(28, 61, 43, 0.95) 0%, transparent 60%), radial-gradient(ellipse 90% 70% at 90% 80%, rgba(20, 45, 32, 0.9) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 50% 50%, rgba(12, 26, 20, 1) 0%, transparent 100%); background-color: #0a1612; animation: pricingBgShift 18s ease-in-out infinite alternate; } /* Orange accent glow layers — float slowly */ .pricing-page-layout::after { content: ''; position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 55% 45% at 15% 75%, rgba(216, 78, 40, 0.18) 0%, transparent 65%), radial-gradient(ellipse 45% 35% at 88% 18%, rgba(255, 147, 64, 0.14) 0%, transparent 60%), radial-gradient(ellipse 35% 30% at 75% 65%, rgba(216, 78, 40, 0.12) 0%, transparent 55%), radial-gradient(ellipse 30% 25% at 30% 40%, rgba(255, 147, 64, 0.08) 0%, transparent 50%); animation: pricingAccentShift 24s ease-in-out infinite alternate-reverse; pointer-events: none; } /* Main background movement */ @keyframes pricingBgShift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; background-size: 120% 80%, 90% 70%, 70% 60%; } 33% { background-position: 20% 15%, 80% 85%, 55% 45%; } 66% { background-position: 5% 30%, 95% 70%, 45% 55%; } 100% { background-position: 15% 5%, 85% 95%, 50% 50%; background-size: 130% 90%, 100% 80%, 80% 70%; } } /* Orange accent movement */ @keyframes pricingAccentShift { 0% { opacity: 0.7; transform: scale(1) translateX(0) translateY(0); } 25% { opacity: 0.9; transform: scale(1.06) translateX(-1.5%) translateY(2%); } 50% { opacity: 0.8; transform: scale(1.03) translateX(1%) translateY(-1.5%); } 75% { opacity: 1; transform: scale(1.08) translateX(-0.5%) translateY(1%); } 100% { opacity: 0.75;transform: scale(1) translateX(0) translateY(0); } } /* Floating orbs for extra depth */ .pricing-atmosphere { position: fixed !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: radial-gradient(circle at 18% 22%, rgba(216, 78, 40, 0.22) 0, rgba(216, 78, 40, 0) 32%), radial-gradient(circle at 80% 15%, rgba(28, 61, 43, 0.35) 0, rgba(28, 61, 43, 0) 28%), radial-gradient(circle at 78% 68%, rgba(216, 78, 40, 0.18) 0, rgba(216, 78, 40, 0) 30%), radial-gradient(circle at 20% 80%, rgba(28, 61, 43, 0.28) 0, rgba(28, 61, 43, 0) 26%) !important; } /* Content layers sit ABOVE the fixed background */ .pricing-page-layout > *:not(.pricing-atmosphere) { position: relative; z-index: 2; } .pricing-content-wrapper { position: relative; z-index: 2; background: transparent !important; } /* --------------------------------------------------------------- 2. CREAM OVERRIDES — remove all #FDF8F4 backgrounds --------------------------------------------------------------- */ .page-our-pricing .pricing-content-wrapper, .page-our-pricing .content-wrapper { background: transparent !important; } .page-our-pricing .pricing-page { background: transparent !important; } /* Pricing tiers section — was transparent but relied on page cream bg */ .pricing-tiers-section { background: transparent !important; } /* Upgrade, comparison, FAQ sections — were transparent/light */ .upgrade-logic-section, .comparison-table-section, .pricing-faq { background: transparent !important; } /* --------------------------------------------------------------- 3. PRICING CARDS — Glassmorphism on dark background --------------------------------------------------------------- */ .pricing-card { background: rgba(255, 255, 255, 0.07) !important; border: 1.5px solid rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; color: #fff; } .pricing-card:hover { background: rgba(255, 255, 255, 0.11) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(216, 78, 40, 0.25) !important; border-color: rgba(216, 78, 40, 0.35) !important; } /* Featured (Growth) card — brand orange glow */ .featured-card { background: linear-gradient(135deg, rgba(216, 78, 40, 0.85), rgba(180, 55, 20, 0.90)) !important; border-color: rgba(255, 147, 64, 0.45) !important; box-shadow: 0 24px 64px rgba(216, 78, 40, 0.40), 0 0 0 1px rgba(255, 147, 64, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .featured-card:hover { box-shadow: 0 32px 80px rgba(216, 78, 40, 0.55), 0 0 0 1px rgba(255, 147, 64, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* Card text — ensure readability on dark bg */ .pricing-card .card-tier-name { color: #ffffff !important; } .pricing-card .card-price { color: #ffffff !important; } .pricing-card .card-period { color: rgba(255,255,255,0.65) !important; } .pricing-card .card-hours { color: rgba(255,255,255,0.60) !important; } .pricing-card .card-billing-label { color: rgba(255,255,255,0.40) !important; } .pricing-card .features-heading { color: rgba(255,255,255,0.75) !important; } .pricing-card .card-features li { color: rgba(255,255,255,0.88) !important; } .pricing-card .green-check { color: #4ade80 !important; } .pricing-card .card-divider { background: rgba(255,255,255,0.15) !important; } /* Green badge on dark card */ .green-badge { background: rgba(28, 61, 43, 0.6) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #a5f3c0 !important; } /* --------------------------------------------------------------- 4. SIDEBAR BOXES — Glassmorphism --------------------------------------------------------------- */ .adhoc-box { background: rgba(255, 255, 255, 0.07) !important; border: 1.5px solid rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } .adhoc-box:hover { background: rgba(255, 255, 255, 0.11) !important; border-color: rgba(216, 78, 40, 0.35) !important; } .adhoc-box .sidebar-heading { color: #ffffff !important; } .adhoc-box .sidebar-text { color: rgba(255,255,255,0.75) !important; } .adhoc-box .sidebar-small-label { color: rgba(255,255,255,0.55) !important; } .outline-btn { border-color: rgba(255,255,255,0.5) !important; color: #ffffff !important; } .outline-btn:hover { background: rgba(255,255,255,0.15) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.8) !important; } /* Pricing sidebar intro text */ .pricing-sidebar-kicker { color: #ff9340 !important; } .pricing-sidebar-title { color: #ffffff !important; } .pricing-sidebar-wrap { border-top-color: rgba(255,255,255,0.15) !important; } /* --------------------------------------------------------------- 5. UPGRADE CARDS — already colored, just enhance --------------------------------------------------------------- */ .orange-upgrade-card { box-shadow: 0 12px 40px rgba(216, 78, 40, 0.35) !important; } .green-upgrade-card { box-shadow: 0 12px 40px rgba(28, 61, 43, 0.5) !important; } /* --------------------------------------------------------------- 6. COMPARISON TABLE — glassmorphism wrapper --------------------------------------------------------------- */ .pricing-table-wrap { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 12px 50px rgba(0,0,0,0.35) !important; } .pricing-comparison-table tbody td { color: rgba(255,255,255,0.88) !important; border-bottom-color: rgba(255,255,255,0.08) !important; background: transparent !important; } .pricing-comparison-table tbody td:first-child { color: #ffffff !important; } .pricing-comparison-table tbody td + td { border-left-color: rgba(255,255,255,0.08) !important; } .alt-row td { background: rgba(255,255,255,0.04) !important; } .table-dash { color: rgba(255,255,255,0.4) !important; } .table-strikethrough { color: rgba(255,255,255,0.38) !important; } /* Section titles on dark background */ .section-title-dark { color: #ffffff !important; } .section-sub-dark { color: rgba(255,255,255,0.70) !important; } /* --------------------------------------------------------------- 7. FAQ SECTION — ensure readability --------------------------------------------------------------- */ .pricing-faq::before { background: linear-gradient(90deg, transparent, rgba(216,78,40,0.4), transparent) !important; } .faq-title { color: #ffffff !important; } .faq-title em { color: #ff9340 !important; } .faq-sub { color: rgba(255,255,255,0.65) !important; } .faq-q { color: rgba(255,255,255,0.90) !important; } .faq-q:hover, .faq-item.is-open .faq-q { color: #ff9340 !important; } .faq-item { border-bottom-color: rgba(255,255,255,0.10) !important; } .faq-item:first-child { border-top-color: rgba(255,255,255,0.10) !important; } .faq-icon::before, .faq-icon::after { background: rgba(255,255,255,0.8) !important; } .faq-icon { border-color: rgba(255,255,255,0.25) !important; } .faq-item.is-open .faq-icon { background: #d84e28 !important; border-color: #d84e28 !important; } .faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: #fff !important; } .faq-a p { color: rgba(255,255,255,0.75) !important; } .faq-item::before { background: #d84e28 !important; } /* --------------------------------------------------------------- 8. CALCULATOR SECTION — light panel on dark --------------------------------------------------------------- */ .pricing-calculator-embed .uk-section, .pricing-calculator-embed .aetherbloom-card { background: rgba(255,255,255,0.96) !important; border-color: rgba(255,255,255,0.25) !important; box-shadow: 0 12px 50px rgba(0,0,0,0.4) !important; } .calc-embed-title { color: #ffffff !important; } .calc-embed-sub { color: rgba(255,255,255,0.70) !important; } /* --------------------------------------------------------------- 9. SAVINGS HIGHLIGHT LINE COLOR --------------------------------------------------------------- */ .savings-highlight-line { color: #ff9340 !important; } /* --------------------------------------------------------------- 10. REDUCED MOTION — still apply dark theme, skip animations --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .pricing-page-layout::before, .pricing-page-layout::after { animation: none !important; } .pricing-atmosphere { animation: none !important; } } /* --------------------------------------------------------------- 11. FIX — Hide bright pricing-glow orbs that bleed white light through the card glassmorphism and obscure text legibility --------------------------------------------------------------- */ .pricing-glow, .pricing-petal-orb { display: none !important; } /* --------------------------------------------------------------- 12. CALCULATOR SECTION HEADER — brighter, bolder text --------------------------------------------------------------- */ .calculator-section-title { color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.4) !important; } .calculator-section-subtitle { color: rgba(255, 255, 255, 0.90) !important; font-weight: 500 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) !important; }