/* * Pure White Clean Theme - Testing Only * This file overrides all colorful backgrounds with a clean white design * To enable: Add this line to base.html in the section: * */ /* Override all gradient backgrounds to white */ section[style*="background: linear-gradient"], section[style*="background: gradient"], .pricing-hero, .cta-section, div[style*="background: linear-gradient"], div[style*="background: gradient"] { background: white !important; } /* Hero sections - pure white with subtle border */ section:first-of-type, .hero-section { background: white !important; border-bottom: 1px solid #E5E7EB !important; } /* Remove colored backgrounds from cards and containers */ .pricing-card, .faq-card, .feature-card, div[style*="background: #EFF6FF"], div[style*="background: #F3E8FF"], div[style*="background: #D1FAE5"], div[style*="background: #FCE7F3"], div[style*="background: #FEF3C7"] { background: white !important; border: 1px solid #E5E7EB !important; } /* Badges and pills - minimal gray */ div[style*="background: rgba(255,255,255,0.2)"], .hero-badge, .trust-badge, div[class*="badge"] { background: #F9FAFB !important; border: 1px solid #E5E7EB !important; } /* Navigation - clean white */ nav { background: white !important; border-bottom: 1px solid #E5E7EB !important; } /* Buttons - keep one subtle accent color */ .btn, .gradient-btn, button[class*="btn"], a[class*="button"], .plan-button { background: #111827 !important; color: white !important; border: none !important; } .btn:hover, .gradient-btn:hover { background: #374151 !important; } /* Secondary buttons - outlined */ .btn-secondary, a[style*="background: rgba(255,255,255,0.1)"] { background: white !important; color: #111827 !important; border: 2px solid #E5E7EB !important; } /* Remove gradient text effects */ .gradient-text, .gradient-text-purple, span[style*="-webkit-background-clip: text"], span[style*="background-clip: text"] { background: none !important; -webkit-text-fill-color: #111827 !important; color: #111827 !important; } /* Pricing cards - clean white with borders */ .pricing-card { background: white !important; border: 2px solid #E5E7EB !important; } .popular-card, .premium-card { border: 2px solid #111827 !important; } /* Remove colored icons backgrounds */ .plan-icon, .faq-icon, div[style*="background: #EFF6FF"], div[style*="background: #F3E8FF"], div[style*="background: #D1FAE5"], div[style*="background: #FCE7F3"] { background: #F9FAFB !important; } /* Check icons - simple black */ .check-icon, svg[class*="check"] { color: #111827 !important; stroke: #111827 !important; } /* Remove all gradient orbs and decorative elements */ .gradient-orb, div[style*="radial-gradient"] { display: none !important; } /* Clean section backgrounds */ section { background: white !important; } section:nth-child(even) { background: #F9FAFB !important; } /* Footer - white background with black text */ footer { background: #ffffff !important; border-top: 1px solid #e5e7eb !important; color: #1a1a1a !important; } footer a { color: #374151 !important; text-decoration: none !important; } footer a:hover { color: #1f2937 !important; } footer h6 { color: #1a1a1a !important; } footer p { color: #6b7280 !important; } footer strong { color: #1a1a1a !important; } footer svg { color: #1f2937 !important; } footer ul li a { color: #374151 !important; } footer ul li a:hover { color: #1f2937 !important; } /* Footer decorative elements - remove or tone down */ footer div[style*="radial-gradient"], footer div[style*="background: radial-gradient"] { display: none !important; } footer div[style*="background: linear-gradient"] { background: none !important; } /* Footer disclaimer box */ footer div[style*="background: rgba(59,130,246,0.05)"] { background: #f9fafb !important; border: 1px solid #e5e7eb !important; } footer div[style*="background: rgba(59,130,246,0.05)"] svg { color: #1f2937 !important; } footer div[style*="background: rgba(59,130,246,0.05)"] span { color: #1f2937 !important; } /* Pills and tags - minimal */ .quick-nav-pills a, div[class*="pill"] { background: white !important; border: 1px solid #E5E7EB !important; color: #111827 !important; } .quick-nav-pills a:hover { background: #F9FAFB !important; } /* Active states - subtle gray */ a[style*="background: #F0FDF4"], a[style*="background: #FEF3C7"], .active { background: #F3F4F6 !important; color: #111827 !important; } /* Comparison table - clean */ .comparison-table { background: white !important; } .comparison-table th, .comparison-table td { border-color: #E5E7EB !important; } .popular-col { background: #F9FAFB !important; } /* Trust indicators - minimal */ .trust-indicators, .trust-item, .cta-badges, .cta-badge { background: transparent !important; } /* Remove box shadows or make them subtle */ * { box-shadow: none !important; } .pricing-card, .faq-card, nav { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; } /* Ensure text is always readable */ h1, h2, h3, h4, h5, h6 { color: #111827 !important; } p, span, div { color: #374151 !important; } /* Keep white text on dark buttons */ .btn *, .gradient-btn *, button[class*="btn"] * { color: white !important; } /* ===== PRICING PAGE SPECIFIC FIXES ===== */ /* Pricing comparison table headers */ .pricing-table th, table th, thead th, th[style*="color: white"], th[style*="color:#fff"], th[style*="color: #fff"] { color: #1a1a1a !important; background: #f9fafb !important; } /* Pricing table text */ .pricing-table td, table td, tbody td { color: #374151 !important; } /* Compare Plans section */ div[style*="text-align: center"] h2, div[style*="text-align: center"] h3, h2:contains("Compare Plans"), h3:contains("Compare Plans") { color: #1a1a1a !important; } /* Features, Free, Basic, Premium headers */ table thead tr th { color: #1a1a1a !important; background: #f9fafb !important; font-weight: 700 !important; } /* All table headers with white text */ th { color: #1a1a1a !important; } /* Pricing table specific */ .comparison-table th, .pricing-comparison th, table[class*="pricing"] th, table[class*="comparison"] th { color: #1a1a1a !important; background: #f9fafb !important; } /* Any white text in tables */ table * { color: #374151 !important; } table th * { color: #1a1a1a !important; } /* Checkmarks and icons in pricing table */ table svg, table .icon { color: #10B981 !important; } /* X marks */ table svg[style*="color: #EF4444"], table .icon-x { color: #EF4444 !important; } /* ===== FORCE BLACK TEXT ON PRICING TABLE HEADERS ===== */ /* Target the comparison table specifically */ .comparison-table thead th { color: #1a1a1a !important; background: #f9fafb !important; } .comparison-table th.feature-col, .comparison-table th.popular-col { color: #1a1a1a !important; } /* Override any inline styles on table headers */ table thead tr th[style] { color: #1a1a1a !important; } /* Specific targeting for pricing page */ .comparison-table-wrapper table th { color: #1a1a1a !important; background: #f9fafb !important; } /* Force all text in thead to be black */ thead * { color: #1a1a1a !important; } /* Popular column */ .popular-col { background: #f9fafb !important; } th.popular-col { color: #1a1a1a !important; background: #f9fafb !important; } /* ===== OVERRIDE PRICING-MODERN.CSS WHITE TEXT ===== */ /* These need to be super specific to override the !important in pricing-modern.css */ .comparison-table thead tr { background: #f9fafb !important; } .comparison-table th.feature-col { color: #1a1a1a !important; background: #f9fafb !important; } .comparison-table th.popular-col { color: #1a1a1a !important; background: #f9fafb !important; } /* Override all th elements in comparison table */ table.comparison-table thead th { color: #1a1a1a !important; background: #f9fafb !important; } /* Nuclear option - override everything in pricing table */ .comparison-table-wrapper * { color: #374151 !important; } .comparison-table-wrapper th { color: #1a1a1a !important; font-weight: 700 !important; } .comparison-table-wrapper thead { background: #f9fafb !important; } .comparison-table-wrapper thead tr { background: #f9fafb !important; } /* ==== = FINAL NUCLEAR OPTION FOR PRICING TABLE ===== */ /* This must override everything */ table.comparison-table thead tr th.feature-col, table.comparison-table thead tr th.popular-col, table.comparison-table thead tr th { color: #000000 !important; background: #f9fafb !important; -webkit-text-fill-color: #000000 !important; } /* Target by position if needed */ table.comparison-table thead tr th:nth-child(1), table.comparison-table thead tr th:nth-child(2), table.comparison-table thead tr th:nth-child(3), table.comparison-table thead tr th:nth-child(4) { color: #000000 !important; background: #f9fafb !important; } /* ===== PRICING CARD ICONS/LOGOS ===== */ /* Make all SVG icons in pricing cards dark/visible */ .pricing-card svg, .pricing-card-header svg, .card-icon svg, .plan-icon svg { color: #1f2937 !important; fill: #1f2937 !important; stroke: #1f2937 !important; } /* Icon containers */ .pricing-card .icon, .pricing-card-header .icon, .card-icon, .plan-icon { color: #1f2937 !important; background: #f9fafb !important; } /* Any emoji or icon at top of pricing cards */ .pricing-card-header, .pricing-card h3, .pricing-card .plan-name { color: #1a1a1a !important; } /* Price text */ .pricing-card .price, .pricing-card .price-amount, .price-text { color: #1a1a1a !important; } /* ===== CENTER ALIGN ALL SECTION HEADERS ===== */ .section-header, .faq-section .section-header { text-align: center !important; } .section-title, .section-subtitle, .faq-section .section-title, .faq-section .section-subtitle { text-align: center !important; } /* Center all subtitles on pricing page */ p.section-subtitle { text-align: center !important; } /* ===== DESKTOP FIX FOR CENTER ALIGNMENT ===== */ @media (min-width: 768px) { .section-header, .section-title, .section-subtitle, .section-header p, .empty-state p, .empty-message { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } }