Footers
16 examples. Use Compact to see how the same HTML reflows.
Centered footer links and legal line
A bounded measure and wrapping actions keep the composition centered.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="links legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="center"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 01"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Brand and community links in one row
Groups wrap by content while preserving their reading order.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="links compact">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="band"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong></div><nav aria-label="Footer Product 02"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav></div></footer>
</div>
</div>Brand, link groups, and newsletter
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="signup legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 03"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 03"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 03"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav><div class="thin-stack"><h4>Stay updated</h4><form class="marketing-form thin-stack" data-space="xs" data-form-layout="inline" method="post" action="/patterns/marketing/header-signup/">
<input type="hidden" name="example" value="footers:03">
<p id="marketing-footers-03-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-footers-03-email">Email address</label>
<input class="thin-input" id="marketing-footers-03-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-footers-03-form-hint">
</div>
<button class="thin-button" type="submit">Try signup</button>
</div>
</form></div></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Brand, destinations, and community row
Groups wrap by content while preserving their reading order.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="links legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="band"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 04"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 04"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Dark multi-column sitemap
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="footers" data-treatment="links legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 05"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 05"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 05"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav>
<nav aria-label="Footer Support 05"><strong>Support</strong><ul class="thin-cluster" role="list"><li><a href="/guides/submit-form/">Form guide</a></li>
<li><a href="/patterns/marketing/examples/faqs/">Site FAQ</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Compact dark brand and destination footer
Groups wrap by content while preserving their reading order.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="footers" data-treatment="compact links">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="band"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong></div><nav aria-label="Footer Product 06"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 06"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav></div></footer>
</div>
</div>Blue footer with sitemap and legal line
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="blue" data-category="footers" data-treatment="links legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 07"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 07"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 07"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Two-line compact footer
Logical start alignment and a readable measure follow the writing direction.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="footers" data-treatment="compact legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="start"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong></div><nav aria-label="Footer Product 08"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Action band above a wide sitemap
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="footers" data-treatment="announcement legal">
<div class="marketing-section">
<footer class="marketing-foot"><aside class="marketing-notice thin-cluster" aria-label="Release announcement"><p>New field edition available</p><a href="/guides/marketing-site/">Read the guide</a><a href="/patterns/marketing/examples/">Browse the collection</a></aside><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 09"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 09"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 09"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav>
<nav aria-label="Footer Support 09"><strong>Support</strong><ul class="thin-cluster" role="list"><li><a href="/guides/submit-form/">Form guide</a></li>
<li><a href="/patterns/marketing/examples/faqs/">Site FAQ</a></li></ul></nav>
<nav aria-label="Footer Explore 09"><strong>Explore</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/examples/pricing/">Pricing examples</a></li>
<li><a href="/patterns/marketing/examples/blog/">Blog examples</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Four link groups with a legal row
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="footers" data-treatment="legal links">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 10"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 10"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 10"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav>
<nav aria-label="Footer Support 10"><strong>Support</strong><ul class="thin-cluster" role="list"><li><a href="/guides/submit-form/">Form guide</a></li>
<li><a href="/patterns/marketing/examples/faqs/">Site FAQ</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Sitemap with a closing action
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="support legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 11"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 11"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 11"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav>
<nav aria-label="Footer Support 11"><strong>Support</strong><ul class="thin-cluster" role="list"><li><a href="/guides/submit-form/">Form guide</a></li>
<li><a href="/patterns/marketing/examples/faqs/">Site FAQ</a></li></ul></nav><div class="thin-stack"><h4>Our mission</h4><p>Help independent teams build for the open web.</p><a href="/guides/quick-start/">Get started</a></div></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Text-led sitemap and ownership line
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="footers" data-treatment="legal plain">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 12"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 12"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav>
<nav aria-label="Footer Resources 12"><strong>Resources</strong><ul class="thin-cluster" role="list"><li><a href="/guides/html-elements/">HTML elements</a></li>
<li><a href="/guides/live-updates/">Live updates</a></li></ul></nav>
<nav aria-label="Footer Support 12"><strong>Support</strong><ul class="thin-cluster" role="list"><li><a href="/guides/submit-form/">Form guide</a></li>
<li><a href="/patterns/marketing/examples/faqs/">Site FAQ</a></li></ul></nav></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Centered community and destination links
A bounded measure and wrapping actions keep the composition centered.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="links panel">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="center"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 13"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 13"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav></div></footer>
</div>
</div>Split footer with newsletter and small print
The tracks sit side by side when their container has room and stack in source order when it narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="footers" data-treatment="signup legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="split"><div class="thin-stack"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 14"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav></div><div class="thin-stack"><h4>Stay updated</h4><form class="marketing-form thin-stack" data-space="xs" data-form-layout="inline" method="post" action="/patterns/marketing/header-signup/">
<input type="hidden" name="example" value="footers:14">
<p id="marketing-footers-14-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-footers-14-email">Email address</label>
<input class="thin-input" id="marketing-footers-14-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-footers-14-form-hint">
</div>
<button class="thin-button" type="submit">Try signup</button>
</div>
</form></div></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Dark split newsletter footer
The tracks sit side by side when their container has room and stack in source order when it narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="footers" data-treatment="signup legal">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="split"><div class="thin-stack"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 15"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav></div><div class="thin-stack"><h4>Stay updated</h4><form class="marketing-form thin-stack" data-space="xs" data-form-layout="inline" method="post" action="/patterns/marketing/header-signup/">
<input type="hidden" name="example" value="footers:15">
<p id="marketing-footers-15-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-footers-15-email">Email address</label>
<input class="thin-input" id="marketing-footers-15-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-footers-15-form-hint">
</div>
<button class="thin-button" type="submit">Try signup</button>
</div>
</form></div></div><small>© Fieldwork Studio · Sample site</small></footer>
</div>
</div>Brand, sitemap, and mission statement
Intrinsic tracks fit the available inline size and let content set the row height.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="footers" data-treatment="support">
<div class="marketing-section">
<footer class="marketing-foot"><div class="marketing-composition" data-composition="grid"><div class="thin-stack" data-space="xs"><strong>Fieldwork</strong><p>Independent notes on the web.</p></div><nav aria-label="Footer Product 16"><strong>Product</strong><ul class="thin-cluster" role="list"><li><a href="/patterns/marketing/">Patterns</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></nav>
<nav aria-label="Footer Learn 16"><strong>Learn</strong><ul class="thin-cluster" role="list"><li><a href="/guides/quick-start/">Quick start</a></li>
<li><a href="/guides/marketing-site/">Marketing guide</a></li></ul></nav><div class="thin-stack"><h4>Our mission</h4><p>Help independent teams build for the open web.</p><a href="/guides/quick-start/">Get started</a></div></div></footer>
</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; }
}
}