/* Testimonials — deliberately transparent, same as .project sections: it shows whatever currently is, rather than an opaque white fill of its own. That's what lets it participate in the same smooth cross-fade as the rest of the page (see layout.css / section-theme.js) instead of creating a hard edge — a solid white background here would snap in the instant the section starts, ahead of the transition actually completing, which read as a visible seam right after a dark-themed project section. It declares the same --section-* tokens .project uses (always the light theme) purely so section-theme.js knows to bring /.top-nav back to white once this section becomes active — not to paint itself directly. */ .testimonials { padding: calc(var(--space-5) * 3) 0; overflow: hidden; --section-bg: var(--color-bg); --section-text: var(--color-text); --section-text-muted: var(--color-text-muted); } .testimonials__header { padding: 0 var(--space-3); margin-bottom: var(--space-4); } /* --current-text, not --color-text: this section is transparent (see above) and can still be transitioning from a dark project section's background when its own heading scrolls into view — same reasoning as .project__name in layout.css. */ .testimonials__name { font-size: var(--font-size-h2); letter-spacing: 0; line-height: var(--line-height-heading); color: var(--current-text, var(--color-text)); transition: color 0.6s ease; } .testimonials__subtitle { font-size: var(--font-size-h2); letter-spacing: 0; line-height: var(--line-height-heading); color: var(--current-text-muted, var(--color-text-muted)); transition: color 0.6s ease; margin-top: var(--space-1); } @media (min-width: 60rem) { .testimonials__header { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .testimonials__header-content { grid-column: 2 / span 2; } } /* Track renders every entry twice back-to-back (see render-testimonials.js) and animates exactly halfway across itself, so the loop point is seamless — no visible reset or jump. */ .testimonials__track { display: flex; gap: var(--space-3); width: max-content; padding: 0 var(--space-3); animation: testimonials-scroll 40s linear infinite; } @keyframes testimonials-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .testimonials__track { animation: none; } } .testimonials__card { flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; width: min(85vw, 34rem); aspect-ratio: 1.5 / 1; padding: var(--space-4); border-radius: var(--radius-block); background: var(--card-bg, #b8b0ff); color: var(--card-text, #111111); text-align: left; } .testimonials__quote, .testimonials__card-name, .testimonials__role { font-size: var(--font-size-h2); letter-spacing: 0; line-height: var(--line-height-heading); } .testimonials__role { opacity: 0.65; }