/* ============================================================ Apex Power Washing — Google Sections: Color + 3D Upgrade Upload to public_html/ and add this to index.html : ============================================================ */ /* ── 1. HERO BADGE ── */ a.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border: 1px solid rgba(251, 188, 5, 0.45); border-radius: 999px; padding: 10px 20px; color: #ffffff !important; text-decoration: none !important; font-weight: 600; font-size: 14px; letter-spacing: 0.2px; /* 3D depth */ box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -2px 0 rgba(0,0,0,0.4) inset, 0 6px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(251,188,5,0.2), 0 0 0 1px rgba(251,188,5,0.1); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } a.hero-badge::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(251,188,5,0.5), transparent); border-radius: 999px; } a.hero-badge:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -2px 0 rgba(0,0,0,0.4) inset, 0 12px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(251,188,5,0.3); } /* Gold stars inside badge */ a.hero-badge .stars, a.hero-badge span:first-child { color: #FBBC05; text-shadow: 0 0 8px rgba(251,188,5,0.6), 0 1px 3px rgba(0,0,0,0.4); } /* ── 2. STATS SECTION ── */ .stat { background: linear-gradient(160deg, #1e1e1e 0%, #141414 100%) !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px 20px !important; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -2px 0 rgba(0,0,0,0.5) inset, 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); } .stat:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -2px 0 rgba(0,0,0,0.5) inset, 0 16px 40px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4); } /* Google Rating stat — blue accent */ .stat:nth-child(1) { border-color: rgba(66,133,244,0.3); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -2px 0 rgba(0,0,0,0.5) inset, 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(66,133,244,0.15), 0 4px 20px rgba(66,133,244,0.1); } .stat:nth-child(1)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335); border-radius: 0 0 16px 16px; } /* 5-Star Reviews stat — gold accent */ .stat:nth-child(2) { border-color: rgba(251,188,5,0.3); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -2px 0 rgba(0,0,0,0.5) inset, 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,188,5,0.15), 0 4px 20px rgba(251,188,5,0.08); } .stat:nth-child(2)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #FBBC05, #f5a623); border-radius: 0 0 16px 16px; } /* Stat number — make it pop */ .stat .stat-num, .stat [class*="num"], .stat strong { background: linear-gradient(135deg, #ffffff 30%, rgba(255,255,255,0.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 3. TESTIMONIAL CARDS ── */ /* Force readable text on dark card backgrounds */ .testi-card, .testi-card p, .testi-card span, .testi-card div, .testi-card blockquote, .testi-card [class*="text"], .testi-card [class*="body"], .testi-card [class*="quote"], .testi-card [class*="content"], .testi-card [class*="name"], .testi-card [class*="review"] { color: rgba(255, 255, 255, 0.88) !important; } .testi-card { background: linear-gradient(160deg, #1c1c1c 0%, #111111 100%) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px !important; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -2px 0 rgba(0,0,0,0.5) inset, 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .testi-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(251,188,5,0.3), transparent); z-index: 1; } .testi-card:hover { transform: translateY(-4px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -2px 0 rgba(0,0,0,0.5) inset, 0 16px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(251,188,5,0.08) !important; } /* Gold stars on review cards */ .testi-stars { color: #FBBC05 !important; text-shadow: 0 0 10px rgba(251,188,5,0.5), 0 1px 3px rgba(0,0,0,0.5) !important; font-size: 18px; letter-spacing: 2px; } /* "Google Review" badge on cards */ .testi-source, .testi-card [class*="source"], .testi-card [class*="platform"] { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, rgba(66,133,244,0.15), rgba(52,168,83,0.1)); border: 1px solid rgba(66,133,244,0.25); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7) !important; letter-spacing: 0.3px; } /* Avatar initial circles */ .testi-avatar, .testi-card [class*="avatar"], .testi-card [class*="initial"] { background: linear-gradient(135deg, #4285F4, #34A853) !important; box-shadow: 0 3px 10px rgba(66,133,244,0.4), 0 1px 0 rgba(255,255,255,0.2) inset !important; color: #ffffff !important; font-weight: 700; } /* ── 4. REVIEW SECTION AGGREGATE BADGE ── */ .testi-agg, [class*="agg"], .testi > .wrap > [class*="rating"], .section.testi .testi-overall { background: linear-gradient(135deg, #1a1a1a, #222) !important; border: 1px solid rgba(251,188,5,0.3) !important; border-radius: 16px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 24px rgba(0,0,0,0.5), 0 0 20px rgba(251,188,5,0.06) !important; } /* Stars in the aggregate rating */ .testi-agg .testi-stars, [class*="agg"] .stars { color: #FBBC05 !important; text-shadow: 0 0 12px rgba(251,188,5,0.6) !important; }