/* ===== A1 CONNECT — Testimonials Page ===== Requires in , in this order: base.css, header.css, testimonials.css. Self-contained (does not require hero.css or product-hero.css) — dark intro hero + light grid of testimonial cards below. */ :root { --th-black: #060606; --th-black-soft: #121212; } /* Intro hero */ .testimonials-hero { position: relative; background: radial-gradient(900px 420px at 85% -10%, rgba(59,130,246,0.22), transparent 60%), radial-gradient(700px 400px at 5% 110%, rgba(59,130,246,0.1), transparent 60%), linear-gradient(180deg, var(--th-black) 0%, var(--th-black-soft) 100%); color: #ffffff; padding: 96px 0 80px; overflow: hidden; text-align: center; } .testimonials-hero .eyebrow { color: var(--gold-light); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.4); } .testimonials-hero h1 { font-family: "Sora", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0 auto 18px; max-width: 760px; background: linear-gradient(100deg, #ffffff 0%, #cfe0ff 22%, #8fb8ff 45%, #ffffff 65%, #cfe0ff 85%, #8fb8ff 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 42px rgba(59,130,246,0.28); animation: testimonialsGradientMove 7s ease-in-out infinite; } @keyframes testimonialsGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .testimonials-hero p.lead { color: rgba(255,255,255,0.68); font-size: 1.05rem; line-height: 1.7; max-width: 600px; margin: 0 auto; } /* Testimonial auto-scrolling strip — cards move sideways on their own, pauses on hover so people can actually read one. The track is duplicated once in the HTML (12 cards total) and animates exactly -50% so the loop is seamless. */ .testimonials-grid-section { background: #ffffff; } .testimonial-scroll { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .testimonial-track { display: flex; gap: 24px; width: max-content; animation: testimonialScroll 38s linear infinite; } .testimonial-track:hover { animation-play-state: paused; } @keyframes testimonialScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testimonial-card { width: 320px; flex-shrink: 0; background: #ffffff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; } .testimonial-stars { color: #EDAB3B; font-size: 1rem; letter-spacing: 2px; } .testimonial-quote { color: var(--gray-800); font-size: 0.98rem; line-height: 1.6; margin: 0; } .testimonial-author { display: flex; flex-direction: column; margin-top: auto; padding-top: 4px; } .testimonial-author strong { color: var(--gold-dark); font-size: 0.95rem; } .testimonial-author span { color: var(--gray-600); font-size: 0.82rem; } @media (max-width: 480px) { .testimonials-hero { padding: 64px 0 56px; } .testimonial-card { width: 260px; } } /* Respect users who've asked for less motion */ @media (prefers-reduced-motion: reduce) { .testimonial-track { animation: none; } .testimonial-scroll { overflow-x: auto; } }