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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user