Testimonials
11 examples. Use Compact to see how the same HTML reflows.
Split introduction and stacked quotes
The tracks sit side by side when their container has room and stack in source order when it narrows.
“We can change the number of stories without redesigning the page.”
Amara Okoye
Accessibility editor · Sample quote“The action stays easy to find even when the label grows.”
Marisol Vega
Editorial director · Sample quote“Our editions can share a layout and keep their own visual character.”
Rasmus Nordhimmel
Field correspondent · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="testimonials" data-treatment="portrait links">
<div class="marketing-section">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-testimonials-01-headline">From the editorial team</h3>
<p>Sample quotations about making pages that hold up.</p>
<a href="/patterns/marketing/examples/teams/">Meet the team</a>
</div><ul class="thin-grid marketing-collection marketing-quotes" role="list" style="--thin-grid-min: 100%"><li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The action stays easy to find even when the label grows.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">MV</span>
<span><strong>Marisol Vega</strong><br>Editorial director · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“Our editions can share a layout and keep their own visual character.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">RN</span>
<span><strong>Rasmus Nordhimmel</strong><br>Field correspondent · Sample quote</span>
</figcaption>
</figure></li></ul></div>
</div>
</div>Three attributed quotes with a centered title
A bounded measure and wrapping actions keep the composition centered.
From the editorial team
Sample quotations about making pages that hold up.
“We can change the number of stories without redesigning the page.”
Amara Okoye
Accessibility editor · Sample quote“The action stays easy to find even when the label grows.”
Marisol Vega
Editorial director · Sample quote“Our editions can share a layout and keep their own visual character.”
Rasmus Nordhimmel
Field correspondent · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="testimonials" data-treatment="portrait plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-testimonials-02-headline">From the editorial team</h3>
<p>Sample quotations about making pages that hold up.</p>
</div><ul class="thin-grid marketing-collection marketing-quotes" role="list" style="--thin-grid-min: 15rem"><li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The action stays easy to find even when the label grows.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">MV</span>
<span><strong>Marisol Vega</strong><br>Editorial director · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“Our editions can share a layout and keep their own visual character.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">RN</span>
<span><strong>Rasmus Nordhimmel</strong><br>Field correspondent · Sample quote</span>
</figcaption>
</figure></li></ul></div>
</div>
</div>Single centered quotation
A bounded measure and wrapping actions keep the composition centered.
“We can change the number of stories without redesigning the page.”
Accessibility editor · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="testimonials" data-treatment="plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="center"><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></div>
</div>
</div>Dark single-quote band
Groups wrap by content while preserving their reading order.
“We can change the number of stories without redesigning the page.”
Accessibility editor · Sample quote
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="testimonials" data-treatment="portrait accent">
<div class="marketing-section">
<div class="marketing-composition" data-composition="band"><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></div>
</div>
</div>Tinted single quote and attribution
Logical start alignment and a readable measure follow the writing direction.
“We can change the number of stories without redesigning the page.”
Accessibility editor · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="testimonials" data-treatment="portrait plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="start"><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></div>
</div>
</div>Two-column set of four quotes
A bounded measure and wrapping actions keep the composition centered.
From the editorial team
Sample quotations about making pages that hold up.
“We can change the number of stories without redesigning the page.”
Amara Okoye
Accessibility editor · Sample quote“The action stays easy to find even when the label grows.”
Marisol Vega
Editorial director · Sample quote“Our editions can share a layout and keep their own visual character.”
Rasmus Nordhimmel
Field correspondent · Sample quote“The same article works in the main page and in a narrower region.”
Ada Chen
Design lead · Sample quote
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="testimonials" data-treatment="portrait plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-testimonials-06-headline">From the editorial team</h3>
<p>Sample quotations about making pages that hold up.</p>
</div><ul class="thin-grid marketing-collection marketing-quotes" role="list" style="--thin-grid-min: 15rem"><li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The action stays easy to find even when the label grows.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">MV</span>
<span><strong>Marisol Vega</strong><br>Editorial director · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“Our editions can share a layout and keep their own visual character.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">RN</span>
<span><strong>Rasmus Nordhimmel</strong><br>Field correspondent · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The same article works in the main page and in a narrower region.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AC</span>
<span><strong>Ada Chen</strong><br>Design lead · Sample quote</span>
</figcaption>
</figure></li></ul></div>
</div>
</div>Four tinted quote cards
A bounded measure and wrapping actions keep the composition centered.
From the editorial team
Sample quotations about making pages that hold up.
“We can change the number of stories without redesigning the page.”
Amara Okoye
Accessibility editor · Sample quote“The action stays easy to find even when the label grows.”
Marisol Vega
Editorial director · Sample quote“Our editions can share a layout and keep their own visual character.”
Rasmus Nordhimmel
Field correspondent · Sample quote“The same article works in the main page and in a narrower region.”
Ada Chen
Design lead · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="testimonials" data-treatment="portrait tiles">
<div class="marketing-section">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-testimonials-07-headline">From the editorial team</h3>
<p>Sample quotations about making pages that hold up.</p>
</div><ul class="thin-grid marketing-collection marketing-quotes" role="list" style="--thin-grid-min: 15rem"><li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The action stays easy to find even when the label grows.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">MV</span>
<span><strong>Marisol Vega</strong><br>Editorial director · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“Our editions can share a layout and keep their own visual character.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">RN</span>
<span><strong>Rasmus Nordhimmel</strong><br>Field correspondent · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The same article works in the main page and in a narrower region.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AC</span>
<span><strong>Ada Chen</strong><br>Design lead · Sample quote</span>
</figcaption>
</figure></li></ul></div>
</div>
</div>Two quotes on a violet band
Intrinsic tracks fit the available inline size and let content set the row height.
From the editorial team
Sample quotations about making pages that hold up.
“We can change the number of stories without redesigning the page.”
Amara Okoye
Accessibility editor · Sample quote“The action stays easy to find even when the label grows.”
Marisol Vega
Editorial director · Sample quote
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="testimonials" data-treatment="portrait plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-testimonials-08-headline">From the editorial team</h3>
<p>Sample quotations about making pages that hold up.</p>
</div><ul class="thin-grid marketing-collection marketing-quotes" role="list" style="--thin-grid-min: 15rem"><li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">AO</span>
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The action stays easy to find even when the label grows.”</p></blockquote>
<figcaption class="marketing-attribution">
<span class="marketing-person-mark" aria-hidden="true">MV</span>
<span><strong>Marisol Vega</strong><br>Editorial director · Sample quote</span>
</figcaption>
</figure></li></ul></div>
</div>
</div>Nine-card testimonial wall
A bounded measure and wrapping actions keep the composition centered.
“We can change the number of stories without redesigning the page.”
Amara Okoye
Accessibility editor · Sample quote“The action stays easy to find even when the label grows.”
Marisol Vega
Editorial director · Sample quote“Our editions can share a layout and keep their own visual character.”
Rasmus Nordhimmel
Field correspondent · Sample quote“The same article works in the main page and in a narrower region.”
Ada Chen
Design lead · Sample quote“We can add an offer without recalculating the columns.”
Lina Rao
Research editor · Sample quote“The form stays usable through the whole submission.”
Jules Pereira
Community lead · Sample quote“A longer translation just gives the heading another line.”
Hana Mori
Illustrator · Sample quote“The same markup makes sense in the browser and in print.”
Inez Duarte
Managing editor · Sample quote“A reader can open a section and stay in the flow of the page.”
Noor Saleh
Producer · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="testimonials" data-treatment="tiles links compact">
<div class="marketing-section">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-testimonials-09-headline">From the editorial team</h3>
<p>Sample quotations about making pages that hold up.</p>
<a href="/patterns/marketing/examples/teams/">Meet the team</a>
</div><ul class="thin-grid marketing-collection marketing-quotes" role="list" style="--thin-grid-min: 15rem"><li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The action stays easy to find even when the label grows.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Marisol Vega</strong><br>Editorial director · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“Our editions can share a layout and keep their own visual character.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Rasmus Nordhimmel</strong><br>Field correspondent · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The same article works in the main page and in a narrower region.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Ada Chen</strong><br>Design lead · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can add an offer without recalculating the columns.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Lina Rao</strong><br>Research editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The form stays usable through the whole submission.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Jules Pereira</strong><br>Community lead · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“A longer translation just gives the heading another line.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Hana Mori</strong><br>Illustrator · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“The same markup makes sense in the browser and in print.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Inez Duarte</strong><br>Managing editor · Sample quote</span>
</figcaption>
</figure></li>
<li><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“A reader can open a section and stay in the flow of the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Noor Saleh</strong><br>Producer · Sample quote</span>
</figcaption>
</figure></li></ul></div>
</div>
</div>Portrait and large quote in an inset panel
Media and copy follow their authored sequence as the tracks stack.
“We can change the number of stories without redesigning the page.”
Accessibility editor · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="testimonials" data-treatment="portrait panel">
<div class="marketing-section">
<div class="marketing-composition" data-composition="media-first"><figure class="marketing-image"><img src="/_astro/marketing-portrait.BvfY0JqU.webp" width="1050" height="788" alt="" loading="lazy" decoding="async"></figure><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></div>
</div>
</div>Portrait and editorial quote
Media and copy follow their authored sequence as the tracks stack.
“We can change the number of stories without redesigning the page.”
Accessibility editor · Sample quote
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="testimonials" data-treatment="portrait accent">
<div class="marketing-section">
<div class="marketing-composition" data-composition="media-first"><figure class="marketing-image"><img src="/_astro/marketing-portrait.BvfY0JqU.webp" width="1050" height="788" alt="" loading="lazy" decoding="async"></figure><figure class="marketing-card marketing-quotation thin-stack" data-space="s">
<blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote>
<figcaption class="marketing-attribution">
<span><strong>Amara Okoye</strong><br>Accessibility editor · Sample quote</span>
</figcaption>
</figure></div>
</div>
</div>View shared CSS
Load Thin-Sky’s Foundation, Themes, Layouts, Components, and Marketing styles with these rules. Adapt the media, links, and form actions to your site.
@layer thin-patterns {
.marketing-specimen {
container: marketing-specimen / inline-size;
color: var(--thin-color-text);
background: var(--thin-color-surface);
}
.marketing-specimen[data-tone="sky"] { --thin-color-surface: oklch(96% .022 231); }
.marketing-specimen[data-tone="mint"] { --thin-color-surface: oklch(96% .035 155); }
.marketing-specimen[data-tone="rose"] { --thin-color-surface: oklch(96% .035 18); }
.marketing-specimen[data-tone="amber"] { --thin-color-surface: oklch(96% .06 91); }
.marketing-specimen[data-tone="blue"] { --thin-color-surface: oklch(39% .15 257); }
.marketing-specimen[data-tone="violet"] { --thin-color-surface: oklch(35% .16 290); }
.marketing-specimen[data-tone="gradient"] { background: linear-gradient(125deg, oklch(33% .13 272), oklch(37% .125 326)); }
.marketing-specimen[data-treatment~="accent"]:not([data-tone="gradient"]) {
background: radial-gradient(ellipse at 92% 88%, color-mix(in oklch, var(--thin-color-accent) 19%, transparent), transparent 60%), var(--thin-color-surface);
}
.marketing-section {
--marketing-inset: clamp(var(--thin-space-m), 5cqi, 4rem);
--marketing-gap: clamp(var(--thin-space-m), 4cqi, 3rem);
display: grid;
gap: var(--marketing-gap);
padding-block: clamp(var(--thin-space-l), 5cqi, 4rem);
padding-inline: var(--marketing-inset);
overflow-wrap: anywhere;
}
.marketing-section > *,
.marketing-composition > *,
.marketing-nav > *,
.marketing-card,
.marketing-board,
.marketing-section .thin-price-card {
min-inline-size: 0;
}
.marketing-specimen[data-category="navigations"] .marketing-section,
.marketing-specimen[data-treatment~="compact"]:not([data-category="headers"], [data-category="blog"]) .marketing-section {
padding-block: var(--thin-space-m);
}
.marketing-section :where(ul[role="list"], dl) { margin-block: 0; }
.marketing-section :where(a.thin-button, button) { max-inline-size: 100%; }
.marketing-composition {
display: grid;
gap: var(--marketing-gap);
}
.marketing-composition:is([data-composition="split"], [data-composition="media-first"]) {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
align-items: center;
}
.marketing-composition[data-composition="band"] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.marketing-composition[data-composition="band"] > .marketing-intro {
flex: 1 1 17rem;
}
.marketing-composition[data-composition="center"] > .marketing-intro,
.marketing-composition[data-composition="showcase"] > .marketing-intro {
align-items: center;
justify-self: center;
text-align: center;
}
.marketing-composition:is([data-composition="center"], [data-composition="showcase"]) > .marketing-intro .marketing-actions {
justify-content: center;
}
.marketing-composition[data-composition="editorial"] > .marketing-intro {
inline-size: min(100%, 62ch);
}
.marketing-intro {
inline-size: min(100%, 62ch);
}
.marketing-display {
max-inline-size: 23ch;
font-size: clamp(1.55rem, 1.05rem + 3.4cqi, 4rem);
line-height: 1.07;
letter-spacing: -.025em;
text-wrap: balance;
}
.marketing-display em {
color: var(--thin-color-accent);
font-style: normal;
}
.marketing-specimen[data-treatment~="light"] .marketing-display { font-weight: 430; }
.marketing-specimen[data-treatment~="uppercase"] :is(.marketing-display, .marketing-nav nav) { text-transform: uppercase; }
.marketing-specimen[data-treatment~="pill"] .thin-button { border-radius: 2em; }
.marketing-intro > p:not(.marketing-kicker) { max-inline-size: 54ch; }
.marketing-kicker { color: var(--thin-color-accent); font-size: .9em; font-weight: 700; }
.marketing-specimen[data-treatment~="pill"] .marketing-kicker { padding: .25em .8em; border: 1px solid currentColor; border-radius: 2em; inline-size: fit-content; }
.marketing-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--thin-space-xs) var(--thin-space-m);
}
.marketing-nav[data-nav="start"] > nav { flex: 1 1 auto; }
.marketing-nav[data-nav="band"] > nav { margin-inline-start: auto; }
.marketing-nav[data-nav="wordmark"] { justify-content: center; }
.marketing-nav > nav a,
.marketing-nav-actions > a:not(.thin-button) {
display: inline-flex;
align-items: center;
min-block-size: var(--thin-density-control);
}
.marketing-brand {
color: var(--thin-color-text);
font-size: 1.25em;
font-weight: 780;
text-decoration: none;
}
.marketing-stage,
.marketing-launch,
.marketing-cta,
.marketing-foot {
display: grid;
gap: var(--marketing-gap);
}
.marketing-stage {
position: relative;
isolation: isolate;
}
.marketing-stage .marketing-nav {
padding-block-end: var(--thin-space-s);
border-block-end: 1px solid var(--thin-color-border);
}
.marketing-stage:has(.marketing-backdrop) {
border-radius: var(--thin-radius-m);
padding: var(--marketing-inset);
overflow: clip;
}
.marketing-backdrop {
position: absolute;
inset: 0;
z-index: -1;
display: grid;
background: oklch(24% .04 258);
}
.marketing-backdrop img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: .23;
}
.marketing-panel {
padding: var(--marketing-inset);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-m);
background: var(--thin-color-surface-raised);
}
.marketing-notice {
justify-content: center;
padding: var(--thin-space-xs) var(--thin-space-m);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-s);
background: var(--thin-color-surface-raised);
}
.marketing-notice a { padding-block: var(--thin-space-2xs); }
.marketing-notice-inset { max-inline-size: 62ch; margin-inline: auto; }
.marketing-travel { display: grid; gap: var(--marketing-gap); align-items: center; }
@container marketing-specimen (inline-size >= 52rem) {
.marketing-travel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.marketing-travel > figure { grid-column: 1 / 5; grid-row: 1; }
.marketing-travel > .marketing-panel { grid-column: 4 / -1; grid-row: 1; }
}
.marketing-image :is(img, video) {
inline-size: 100%;
block-size: auto;
border-radius: var(--thin-radius-m);
}
.marketing-image:only-child { inline-size: min(100%, 55rem); }
.marketing-composition[data-composition="showcase"] > .marketing-image { inline-size: min(100%, 56rem); justify-self: center; }
.marketing-collage {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--thin-space-xs);
}
.marketing-collage img {
inline-size: 100%;
block-size: 100%;
min-block-size: 0;
object-fit: cover;
border-radius: var(--thin-radius-s);
}
.marketing-collage img:first-child { grid-row: span 2; }
.marketing-art {
display: grid;
place-items: center;
grid-template-columns: repeat(3, 1fr);
gap: 6%;
min-block-size: clamp(6rem, 25cqi, 16rem);
padding: 10%;
border-radius: var(--thin-radius-m);
background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
}
.marketing-art i {
inline-size: 100%;
aspect-ratio: 1;
border: .2rem solid currentColor;
border-radius: 50% 50% 12% 50%;
color: var(--thin-color-accent);
background: color-mix(in oklch, currentColor 18%, transparent);
}
.marketing-art i:nth-child(2) { border-radius: 16%; translate: 0 -18%; }
.marketing-art i:nth-child(3) { border-radius: 50%; translate: 0 18%; }
.marketing-board {
padding: var(--thin-space-m);
border: 1px solid var(--thin-color-border);
border-block-start-width: .75rem;
border-radius: var(--thin-radius-m);
background: var(--thin-color-surface-raised);
}
.marketing-device { border-width: .65rem; }
.marketing-board figcaption { margin: 0; font-weight: 700; }
.marketing-board .thin-box { background: var(--thin-color-surface); }
.marketing-code > figcaption { margin-block-end: var(--thin-space-xs); }
.marketing-code pre { margin-block: 0; }
.marketing-marks {
align-items: stretch;
text-align: center;
}
.marketing-marks > li {
display: grid;
place-items: center;
min-block-size: 3rem;
padding: var(--thin-space-xs);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-s);
font-family: var(--thin-font-display);
}
[data-treatment~="plain"] .marketing-marks > li { border-color: transparent; }
[data-treatment~="tiles"] .marketing-marks > li { background: var(--thin-color-surface-raised); }
.marketing-service-mark { font-weight: 750; }
.marketing-metrics dd { margin: 0; color: var(--thin-color-accent); font-size: var(--thin-text-1); font-weight: 720; }
.marketing-form {
inline-size: min(100%, 36rem);
text-align: start;
}
.marketing-form p { font-size: .9em; }
.marketing-form-fields {
display: grid;
gap: var(--thin-space-xs);
align-items: end;
}
.marketing-form-fields > * { min-inline-size: 0; }
:is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields {
display: flex;
flex-wrap: wrap;
}
:is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields > :is(.thin-field, input) {
flex: 1 1 12rem;
inline-size: auto;
}
.marketing-search { inline-size: min(100%, 40rem); text-align: start; }
.marketing-collection > * { min-inline-size: 0; }
.marketing-card {
block-size: 100%;
padding: var(--thin-space-m);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-m);
background: var(--thin-color-surface-raised);
}
[data-treatment~="plain"] .marketing-card {
border-color: transparent;
background: transparent;
}
[data-treatment~="accent"] .marketing-card { border-block-start: .25rem solid var(--thin-color-accent); }
.marketing-card > img {
inline-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--thin-radius-s);
}
.marketing-mark,
.marketing-person-mark {
display: inline-grid;
place-items: center;
inline-size: 2.6em;
aspect-ratio: 1;
border-radius: 50%;
color: var(--thin-color-accent);
background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
font-weight: 750;
}
.marketing-member { display: grid; align-content: start; gap: var(--thin-space-s); }
.marketing-member > img { aspect-ratio: 1; }
[data-treatment~="compact"] .marketing-member { grid-template-columns: auto minmax(0, 1fr); }
.marketing-quotation { max-inline-size: 62ch; }
[data-composition="center"] > .marketing-quotation { text-align: center; justify-self: center; }
[data-composition="center"] > .marketing-quotation .marketing-attribution { justify-content: center; }
.marketing-quotation blockquote { border: 0; padding: 0; color: var(--thin-color-text); font-size: var(--thin-text-1); }
.marketing-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--thin-space-xs); }
.marketing-questions { inline-size: 100%; text-align: start; }
.marketing-questions[data-questions="grid"] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
align-items: start;
}
.marketing-answers { display: grid; gap: var(--thin-space-s); }
.marketing-questions details > p { margin-block-start: var(--thin-space-xs); }
[data-treatment~="plain"] .marketing-questions details { background: transparent; }
[data-treatment~="accent"] .marketing-questions details { border-inline: 0; border-block-start: 0; border-radius: 0; }
.marketing-offers { min-inline-size: 0; }
.marketing-offers fieldset { justify-self: start; }
.marketing-yearly { display: none; }
.marketing-offers:has(input[value="yearly"]:checked) .marketing-monthly { display: none; }
.marketing-offers:has(input[value="yearly"]:checked) .marketing-yearly { display: inline; }
.marketing-offers .thin-price small { font-size: .55em; }
.marketing-plan-title small { color: var(--thin-color-accent); font-weight: 700; }
.marketing-offers [data-composition="stack"] .thin-pricing { grid-template-columns: minmax(0, 1fr); }
[data-treatment~="accent"] .marketing-offers .thin-price-card { border-block-start: .3rem solid var(--thin-color-accent); }
.marketing-foot [data-composition="grid"] {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.marketing-foot [data-composition="center"] {
justify-items: center;
text-align: center;
}
.marketing-foot nav > ul { margin-block-start: var(--thin-space-xs); }
.marketing-foot [data-composition="grid"] nav > ul { display: grid; }
.marketing-foot > small { border-block-start: 1px solid var(--thin-color-border); padding-block-start: var(--thin-space-s); }
@container marketing-specimen (inline-size >= 46rem) {
.marketing-stories > [data-lead] { grid-column: span 2; }
.marketing-nav[data-nav="brand-middle"] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.marketing-nav[data-nav="brand-middle"] .marketing-nav-actions { justify-self: end; }
}
@media (forced-colors: active) {
.marketing-backdrop { display: none; }
.marketing-specimen, .marketing-card, .marketing-panel { background: Canvas; color: CanvasText; }
.marketing-kicker, .marketing-display em { color: CanvasText; }
}
}