Where do I start?
Open the quick start and compose a page with native elements.
FAQs
12 examples. Use Compact to see how the same HTML reflows.
Centered stack of visible answers
Sections keep their order and grow with the content.
Frequently asked questions
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="faqs" data-treatment="open tiles">
<div class="marketing-section">
<div class="marketing-composition" data-composition="stack"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-faqs-01-headline">Frequently asked questions</h3>
<div class="marketing-answers marketing-questions" data-questions="stack"><article class="marketing-card thin-stack" data-space="xs"><h4>Where do I start?</h4><p>Open the quick start and compose a page with native elements.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Will the same example fit inside a sidebar?</h4><p>The layout responds to its own container and allows long text to wrap.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>What happens when I submit a demo form?</h4><p>The browser sends a request and displays the page returned by the server.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>How do I customize a theme?</h4><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></article></div>
</div></div>
</div>
</div>Two columns of visible answers
Intrinsic tracks fit the available inline size and let content set the row height.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
What if I have more cards?
Intrinsic tracks take more rows as you add content.
Can I use a longer translation?
The design allows headings and actions to wrap and grow.
Where are the styles?
Open the shared CSS beneath the examples and combine it with the library stylesheets.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="faqs" data-treatment="open 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-faqs-02-headline">Frequently asked questions</h3>
<div class="marketing-answers marketing-questions" data-questions="grid"><article class="marketing-card thin-stack" data-space="xs"><h4>Where do I start?</h4><p>Open the quick start and compose a page with native elements.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Will the same example fit inside a sidebar?</h4><p>The layout responds to its own container and allows long text to wrap.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>What happens when I submit a demo form?</h4><p>The browser sends a request and displays the page returned by the server.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>How do I customize a theme?</h4><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Can I link to one example?</h4><p>Use the numbered link above the preview to jump directly to it.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>What if I have more cards?</h4><p>Intrinsic tracks take more rows as you add content.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Can I use a longer translation?</h4><p>The design allows headings and actions to wrap and grow.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Where are the styles?</h4><p>Open the shared CSS beneath the examples and combine it with the library stylesheets.</p></article></div>
</div></div>
</div>
</div>Editorial FAQ with supporting link
Text measure and logical spacing control the reading rhythm.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="faqs" data-treatment="open plain links">
<div class="marketing-section">
<div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-faqs-03-headline">Frequently asked questions</h3>
<div class="marketing-answers marketing-questions" data-questions="editorial"><article class="marketing-card thin-stack" data-space="xs"><h4>Where do I start?</h4><p>Open the quick start and compose a page with native elements.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Will the same example fit inside a sidebar?</h4><p>The layout responds to its own container and allows long text to wrap.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>What happens when I submit a demo form?</h4><p>The browser sends a request and displays the page returned by the server.</p></article></div><a href="/guides/quick-start/">Read the quick start</a>
</div></div>
</div>
</div>Large heading with quiet disclosures
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="faqs" data-treatment="plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="start"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-faqs-04-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="start"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details>
<details><summary>Can I link to one example?</summary><p>Use the numbered link above the preview to jump directly to it.</p></details></div>
</div></div>
</div>
</div>Rule-separated disclosure list
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="faqs" data-treatment="plain accent">
<div class="marketing-section">
<div class="marketing-composition" data-composition="start"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-faqs-05-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="start"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details>
<details><summary>Can I link to one example?</summary><p>Use the numbered link above the preview to jump directly to it.</p></details></div>
</div></div>
</div>
</div>Dark question and answer rows
Groups wrap by content while preserving their reading order.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="faqs" data-treatment="open plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-faqs-06-headline">Frequently asked questions</h3>
<div class="marketing-answers marketing-questions" data-questions="band"><article class="marketing-card thin-stack" data-space="xs"><h4>Where do I start?</h4><p>Open the quick start and compose a page with native elements.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Will the same example fit inside a sidebar?</h4><p>The layout responds to its own container and allows long text to wrap.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>What happens when I submit a demo form?</h4><p>The browser sends a request and displays the page returned by the server.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>How do I customize a theme?</h4><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></article></div>
</div></div>
</div>
</div>Centered bordered disclosure list
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="faqs" data-treatment="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-faqs-07-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="center"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details>
<details><summary>Can I link to one example?</summary><p>Use the numbered link above the preview to jump directly to it.</p></details></div>
</div></div>
</div>
</div>Compact dark disclosure list
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="faqs" data-treatment="plain 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-faqs-08-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="center"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details></div>
</div></div>
</div>
</div>Dark two-column disclosures
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
What if I have more cards?
Intrinsic tracks take more rows as you add content.
Can I use a longer translation?
The design allows headings and actions to wrap and grow.
Where are the styles?
Open the shared CSS beneath the examples and combine it with the library stylesheets.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="faqs" data-treatment="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-faqs-09-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="grid"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details>
<details><summary>Can I link to one example?</summary><p>Use the numbered link above the preview to jump directly to it.</p></details>
<details><summary>What if I have more cards?</summary><p>Intrinsic tracks take more rows as you add content.</p></details>
<details><summary>Can I use a longer translation?</summary><p>The design allows headings and actions to wrap and grow.</p></details>
<details><summary>Where are the styles?</summary><p>Open the shared CSS beneath the examples and combine it with the library stylesheets.</p></details></div>
</div></div>
</div>
</div>Violet two-column disclosures
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
What if I have more cards?
Intrinsic tracks take more rows as you add content.
Can I use a longer translation?
The design allows headings and actions to wrap and grow.
Where are the styles?
Open the shared CSS beneath the examples and combine it with the library stylesheets.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="faqs" data-treatment="tiles">
<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-faqs-10-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="grid"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details>
<details><summary>Can I link to one example?</summary><p>Use the numbered link above the preview to jump directly to it.</p></details>
<details><summary>What if I have more cards?</summary><p>Intrinsic tracks take more rows as you add content.</p></details>
<details><summary>Can I use a longer translation?</summary><p>The design allows headings and actions to wrap and grow.</p></details>
<details><summary>Where are the styles?</summary><p>Open the shared CSS beneath the examples and combine it with the library stylesheets.</p></details></div>
</div></div>
</div>
</div>Illustration before a compact FAQ
Native disclosures grow in flow and work with the keyboard.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
Can I link to one example?
Use the numbered link above the preview to jump directly to it.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="mint" data-category="faqs" data-treatment="art plain">
<div class="marketing-section">
<div class="marketing-composition" data-composition="media-first"><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-faqs-11-headline">Frequently asked questions</h3>
<div class="thin-faq marketing-questions" data-questions="media-first"><details><summary>Where do I start?</summary><p>Open the quick start and compose a page with native elements.</p></details>
<details><summary>Will the same example fit inside a sidebar?</summary><p>The layout responds to its own container and allows long text to wrap.</p></details>
<details><summary>What happens when I submit a demo form?</summary><p>The browser sends a request and displays the page returned by the server.</p></details>
<details><summary>How do I customize a theme?</summary><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></details>
<details><summary>Can I link to one example?</summary><p>Use the numbered link above the preview to jump directly to it.</p></details></div>
</div></div>
</div>
</div>Gradient FAQ grid with a follow-up action
Intrinsic tracks fit the available inline size and let content set the row height.
Frequently asked questions
Where do I start?
Open the quick start and compose a page with native elements.
Will the same example fit inside a sidebar?
The layout responds to its own container and allows long text to wrap.
What happens when I submit a demo form?
The browser sends a request and displays the page returned by the server.
How do I customize a theme?
Use the shared color, type, and spacing roles to give a page its own visual treatment.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="faqs" data-treatment="open links">
<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-faqs-12-headline">Frequently asked questions</h3>
<div class="marketing-answers marketing-questions" data-questions="grid"><article class="marketing-card thin-stack" data-space="xs"><h4>Where do I start?</h4><p>Open the quick start and compose a page with native elements.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>Will the same example fit inside a sidebar?</h4><p>The layout responds to its own container and allows long text to wrap.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>What happens when I submit a demo form?</h4><p>The browser sends a request and displays the page returned by the server.</p></article>
<article class="marketing-card thin-stack" data-space="xs"><h4>How do I customize a theme?</h4><p>Use the shared color, type, and spacing roles to give a page its own visual treatment.</p></article></div><a href="/guides/quick-start/">Read the quick start</a>
</div></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; }
}
}