Navigation
23 examples. Use Compact to see how the same HTML reflows.
Centered destinations with account actions
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 01"><ul class="thin-cluster" role="list">
<li><a href="/patterns/marketing/">Overview</a></li>
<li><details><summary>Product</summary><ul class="thin-cluster" role="list"><li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/patterns/marketing/examples/">Examples</a></li></ul></details></li>
<li><a href="/patterns/marketing/examples/pricing/">Plans</a></li>
</ul></nav>
<div class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Start-aligned destinations with account actions
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations">
<div class="marketing-section">
<div class="marketing-nav" data-nav="start">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 02"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>End-aligned destinations with account actions
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 03"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Centered brand between link groups
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations">
<div class="marketing-section">
<div class="marketing-nav" data-nav="brand-middle">
<nav aria-label="Fieldwork destinations 04"><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><a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a>
<div class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Brand and account actions
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations" data-treatment="compact">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a>
<div class="thin-cluster marketing-nav-actions">
<a href="/guides/quick-start/" class="thin-button">Get early access</a>
</div>
</div>
</div>
</div>Centered navigation with quiet signup
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="navigations" data-treatment="plain">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 06"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button" data-variant="secondary">Get started</a>
</div>
</div>
</div>
</div>Dark centered navigation
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="navigations" data-treatment="pill">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 07"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Uppercase links with an end action
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations" data-treatment="uppercase">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 08"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Dark end-aligned navigation
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="navigations" data-treatment="uppercase">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 09"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Gradient navigation with light signup
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="navigations" data-treatment="uppercase light">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 10"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Brand and an early-access action
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="blue" data-category="navigations" data-treatment="compact pill">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a>
<div class="thin-cluster marketing-nav-actions">
<a href="/guides/quick-start/" class="thin-button">Get early access</a>
</div>
</div>
</div>
</div>Centered wordmark and community links
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="navigations" data-treatment="links">
<div class="marketing-section">
<div class="marketing-nav" data-nav="brand-middle">
<nav aria-label="Fieldwork destinations 12"><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><a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a>
<div class="thin-cluster marketing-nav-actions">
<a href="/guides/">Community</a>
</div>
</div>
</div>
</div>Violet navigation with highlighted signup
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="navigations" data-treatment="uppercase accent">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 13"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Yellow navigation with outlined signup
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="navigations" data-treatment="uppercase plain">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 14"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button" data-variant="secondary">Get started</a>
</div>
</div>
</div>
</div>Dark center links and bright signup
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="navigations" data-treatment="accent">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 15"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Minimal brand and trial link
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="navigations" data-treatment="compact pill">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a>
<div class="thin-cluster marketing-nav-actions">
<a href="/guides/quick-start/" class="thin-button">Get early access</a>
</div>
</div>
</div>
</div>Centered wordmark only
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations" data-treatment="compact plain">
<div class="marketing-section">
<div class="marketing-nav" data-nav="wordmark">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a>
</div>
</div>
</div>Blue wordmark with centered links
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="navigations" data-treatment="accent">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 18"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Dark navigation with a strong account action
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="navigations" data-treatment="accent uppercase">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">Fieldwork</a><nav aria-label="Fieldwork destinations 19"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Symbol brand with download action
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="navigations" data-treatment="label">
<div class="marketing-section">
<div class="marketing-nav" data-nav="band">
<a href="/patterns/marketing/" class="marketing-brand">◆ Fieldwork</a><nav aria-label="Fieldwork destinations 21"><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 class="thin-cluster marketing-nav-actions">
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Violet center links with trial action
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="navigations" data-treatment="light label">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">◆ Fieldwork</a><nav aria-label="Fieldwork destinations 22"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Dark navigation with a mark and wordmark
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="navigations" data-treatment="label">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">◆ Fieldwork</a><nav aria-label="Fieldwork destinations 23"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</a>
</div>
</div>
</div>
</div>Light navigation with a mark and wordmark
Brand, destinations, and actions wrap as groups as their container narrows.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="navigations" data-treatment="label">
<div class="marketing-section">
<div class="marketing-nav" data-nav="center">
<a href="/patterns/marketing/" class="marketing-brand">◆ Fieldwork</a><nav aria-label="Fieldwork destinations 24"><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 class="thin-cluster marketing-nav-actions">
<a href="/patterns/marketing/examples/forms/#example-01">Sign in demo</a>
<a href="/guides/quick-start/" class="thin-button">Get started</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; }
}
}