Testimonials: blend into page, inline nav arrows, drop dots

User wanted the testimonial section to feel "of the page" rather than
a card sitting on top of it, and to occupy less vertical space.

- Strip all chrome from .card--testimonial: transparent background,
  no border, no shadow, no hover lift. Same treatment applied in the
  swiss + cosmos overrides so per-theme backgrounds don't sneak back.
- Restructure the carousel markup to put the prev/next buttons
  directly beside the viewport (carousel--inline = flex row), no
  separate controls block, no dot indicators.
- Shrink the curly quote mark and the avatar (44 -> 32px); tighten
  internal gaps. Removed the rule above the attribution row.
- Keep healthy horizontal padding via clamp() so the arrows don't
  crowd the surrounding sections.
- Update aria-label on the carousel itself instead of the dots so
  screen readers still get position context.
This commit is contained in:
Joel Brock
2026-05-16 09:18:41 -07:00
parent b257d92636
commit 4868111a14
4 changed files with 41 additions and 26 deletions

View File

@@ -419,8 +419,8 @@
}
/* ───── testimonial / carousel ───── */
:root[data-template="swiss"] .card--testimonial { background: var(--paper-2); }
:root[data-template="swiss"] .card--testimonial:hover { background: var(--paper-2); color: var(--ink); }
:root[data-template="swiss"] .card--testimonial { background: transparent; }
:root[data-template="swiss"] .card--testimonial:hover { background: transparent; color: var(--ink); }
:root[data-template="swiss"] .card--testimonial:hover .testimonial__quote,
:root[data-template="swiss"] .card--testimonial:hover .testimonial__name { color: var(--ink); }
:root[data-template="swiss"] .testimonial__mark {