/* ============================================ PROOF STRIP ENHANCEMENT — standalone module Trendwise Analytics ============================================ HOW TO USE: 1. Upload this file as: css/proof-strip-enhance.css 2. Add this line in , AFTER your other stylesheets: 3. No HTML changes needed — it re-styles your existing .proof-strip / .proof-strip__pill elements automatically. ============================================ */ /* ---- Section: soft gradient wash instead of plain white ---- */ .proof-strip { background: linear-gradient(120deg, rgba(91, 141, 239, 0.06) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(214, 51, 108, 0.05) 100%); border-top: none; border-bottom: none; padding: 3rem 0; position: relative; } /* ---- Label: gradient-underlined, more prominent ---- */ .proof-strip__label { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 1rem; letter-spacing: 0.16em; color: var(--navy); padding-bottom: 12px; } .proof-strip__label::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5B8DEF, #8B5CF6, #D6336C); } /* ---- Pills: bigger, gradient border on hover, colored accent dot ---- */ .proof-strip__pill { position: relative; padding: 10px 22px 10px 34px; font-weight: 600; font-size: 0.9rem; border: 1.5px solid var(--border); border-radius: 99px; background: #fff; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; } /* colored accent dot before each brand name, cycling through the gradient palette */ .proof-strip__pill::before { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; } .proof-strip__pill:nth-of-type(4n+1)::before { background: #5B8DEF; } .proof-strip__pill:nth-of-type(4n+2)::before { background: #8B5CF6; } .proof-strip__pill:nth-of-type(4n+3)::before { background: #D6336C; } .proof-strip__pill:nth-of-type(4n+4)::before { background: #E8B84B; } .proof-strip__pill:hover { transform: translateY(-3px) scale(1.03); border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #5B8DEF, #8B5CF6, #D6336C) border-box; box-shadow: 0 10px 28px rgba(139, 92, 246, 0.18); color: var(--navy) !important; } @media (max-width: 600px) { .proof-strip__pill { padding: 9px 18px 9px 30px; font-size: 0.85rem; } }