/**
 * Testimonial layout styles. Motion is driven by GSAP via
 * @wabbit/tome-motion (useTimeline sequences the quote + avatar fade-in) —
 * no CSS keyframes. Reduced-motion users get the static end-state because
 * useTimeline calls progress(1).pause() at creation.
 *
 * Variants (Option A): `data-variant` = BlockDescriptor variant slug
 * (default|editorial|dark|carousel). Secondary attributes `data-layout`,
 * `data-text`, `data-bg`, `data-pt`, `data-pb` carry the admin-exposed
 * display toggles from the block fields.
 */

.testimonial {
  /* Subgrid opt-in: inherit column tracks from parent grid so descendants can
     snap to the page's column lines. grid-column: 1 / -1 spans the full
     subgrid; the `.inner` wrapper carries the padded content region. */
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  width: 100%;
}

.inner {
  padding-block: var(--tome-space-md);
  padding-inline: var(--tome-space-md);
  grid-column: 1 / -1;
}

/* Padding-top variants (data-pt) — target the padded wrapper */
.testimonial[data-pt='none'] .inner { padding-block-start: 0; }
.testimonial[data-pt='extraSmall'] .inner { padding-block-start: var(--tome-space-xs); }
.testimonial[data-pt='small'] .inner { padding-block-start: var(--tome-space-sm); }
.testimonial[data-pt='medium'] .inner { padding-block-start: var(--tome-space-md); }
.testimonial[data-pt='large'] .inner { padding-block-start: var(--tome-space-lg); }

/* Padding-bottom variants (data-pb) — target the padded wrapper */
.testimonial[data-pb='none'] .inner { padding-block-end: 0; }
.testimonial[data-pb='extraSmall'] .inner { padding-block-end: var(--tome-space-xs); }
.testimonial[data-pb='small'] .inner { padding-block-end: var(--tome-space-sm); }
.testimonial[data-pb='medium'] .inner { padding-block-end: var(--tome-space-md); }
.testimonial[data-pb='large'] .inner { padding-block-end: var(--tome-space-lg); }

/* Text color (data-text) */
.testimonial[data-text='light'] { color: var(--tome-color-foreground); }
.testimonial[data-text='dark']  { color: var(--tome-color-background); }

/* Background (data-bg) */
.testimonial[data-bg='light-gray'] { background-color: var(--tome-color-surface-muted); }
.testimonial[data-bg='dark-gray']  { background-color: var(--tome-color-foreground); color: var(--tome-color-background); }
.testimonial[data-bg='primary']    { background-color: var(--tome-color-primary); color: var(--tome-color-on-primary); }
.testimonial[data-bg='white']      { background-color: var(--tome-color-background); }

/* Layout (data-layout) */
.testimonial[data-layout='default'] .quote {
  max-width: 65ch;
}

.testimonial[data-layout='editorial-colophon'] {
  border-block-start: 1px solid var(--tome-color-border);
}

.testimonial[data-layout='editorial-colophon'] .inner {
  padding-block-start: var(--tome-space-md);
}

.testimonial[data-layout='editorial-colophon'] .quote {
  display: flex;
  gap: var(--tome-space-sm);
  align-items: flex-start;
}

.sectionTitle {
  font-size: var(--tome-type-size-xs);
  font-weight: var(--tome-type-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tome-type-tracking-wider);
  color: var(--tome-color-on-surface-muted);
  margin-block-end: var(--tome-space-sm);
}

.quote {
  margin: 0;
  padding: 0;
}

.quoteText {
  font-size: var(--tome-type-size-lg);
  line-height: var(--tome-type-leading-snug);
  font-style: italic;
  margin-block-end: var(--tome-space-sm);
}

.attribution {
  display: flex;
  align-items: center;
  gap: var(--tome-space-xs);
}

.avatarWrapper {
  flex-shrink: 0;
  position: relative;
  width: var(--tome-space-11);
  height: var(--tome-space-11);
}

.avatar {
  width: var(--tome-space-11);
  height: var(--tome-space-11);
  border-radius: var(--tome-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.attributionText {
  display: flex;
  flex-direction: column;
  gap: var(--tome-space-1);
}

.name {
  font-size: var(--tome-type-size-sm);
  font-weight: var(--tome-type-weight-semibold);
  font-style: normal;
  line-height: var(--tome-type-leading-tight);
}

.role {
  font-size: var(--tome-type-size-xs);
  color: var(--tome-color-on-surface-muted);
}

.company {
  font-size: var(--tome-type-size-xs);
  color: var(--tome-color-on-surface-muted);
}

.date {
  display: block;
  margin-block-start: var(--tome-space-xs);
  font-size: var(--tome-type-size-xs);
  color: var(--tome-color-on-surface-muted);
}

/* Variant: editorial — large pull-quote, hairline accent, no card */
.testimonial[data-variant='editorial'] .quoteText {
  font-size: var(--tome-type-size-2xl);
  font-style: normal;
  line-height: var(--tome-type-leading-snug);
}

.testimonial[data-variant='editorial'] {
  border-inline-start: 2px solid var(--tome-color-primary);
}

.testimonial[data-variant='editorial'] .inner {
  padding-inline-start: var(--tome-space-lg);
}

/* Variant: dark — inverted surface */
.testimonial[data-variant='dark'] {
  background-color: var(--tome-color-surface-inverse, var(--tome-color-foreground));
  color: var(--tome-color-background);
}

.testimonial[data-variant='dark'] .role,
.testimonial[data-variant='dark'] .company,
.testimonial[data-variant='dark'] .date {
  color: var(--tome-color-background);
  opacity: 0.7;
}

/* Variant: carousel — horizontal scroll affordance (legacy CSS-only
 * carousel variant; when `data-mode='carousel'` is active the JS
 * render swaps content in-place instead of relying on scroll-snap.) */
.testimonial[data-variant='carousel'] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* Mode: carousel — JS-driven index swap with pagination dots.
 * The contentRef div handles cross-fade; pagination sits below. */
.testimonial[data-mode='carousel'] {
  position: relative;
}

.counter {
  font-size: var(--tome-type-size-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--tome-color-on-surface-muted);
  margin-block-end: var(--tome-space-sm);
}

.pagination {
  display: flex;
  gap: var(--tome-space-xs);
  justify-content: center;
  margin-block-start: var(--tome-space-md);
}

.dot {
  appearance: none;
  border: 1px solid var(--tome-color-border);
  background: transparent;
  padding: 0;
  width: var(--tome-space-2);
  height: var(--tome-space-2);
  border-radius: var(--tome-radius-full);
  cursor: pointer;
  opacity: 0.5;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.dot:hover {
  background-color: var(--tome-color-border);
  opacity: 0.8;
}

.dot:focus-visible {
  outline: 2px solid var(--tome-color-primary);
  outline-offset: 2px;
}

.dotActive {
  background-color: var(--tome-color-primary);
  border-color: var(--tome-color-primary);
  opacity: 1;
  transform: scale(1.15);
}
What our clients say

Install
