fed by a
single unclassed wrapper that holds every card — so the real DOM here
is `.row > slot > div > code-island x N`, not `.row > card`. Left alone that
wrapper is one flex item, which is why all the cards stacked into a single
column no matter the breakpoint.
Collapsing the wrapper with `display: contents` removes it from layout, and
since Webflow's own host is already `display: contents` too,
each card's `.card` box becomes a direct flex item of `.row`. That is what
makes the per-breakpoint widths on `.card` (see EcosystemCard.module.css)
the thing that actually sizes the row. `::slotted()` is the only selector
that reaches projected content from inside a shadow tree. */
.af80CJxgiN8TFgk3kXaQ > slot::slotted(*) {
display: contents;
}
.af80CJxgiN8TFgk3kXaQ > * {
width: 100%;
}
/* Tablet: two-column wrap, all cards visible without scrolling. Centered, not
pinned to the left edge - a wrapped flex row's leftover space sits after
the last item by default (justify-content: flex-start). */
@media (min-width: 768px) {
.BYeQip38eV9iVZEz6_gz {
padding: var(--na-spacing-56, 56px) var(--na-spacing-48, 48px);
}
.VOqTQOaM3Q0XnZoP92vI,
._xRT8_CS935to4zbMBS8,
.nEC89gbar5R4_P1Vlv0o {
font-size: 42px;
line-height: 52px;
}
.af80CJxgiN8TFgk3kXaQ {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.af80CJxgiN8TFgk3kXaQ > * {
flex: 0 0 324px;
width: 324px;
}
}
/* Desktop has two modes, chosen by the `scrollAnimation` prop (see
EcosystemSection.tsx):
- Default: a plain centered row, equal-width cards filling it edge to
edge (Figma node 21069:50746: three cards at 357.33px in a 1120px
container, `flex-[1_0_0]` each) - same centering as `.track`'s base
rule above, no bleed or scroll needed.
- `.trackAnimated`: the original behaviour - fixed 452px cards in a row
wider than the viewport, pinned via a taller spacer track while its
scroll offset is driven by how far the page has scrolled through it
(CLAUDE.md-style comments kept below, on the rules themselves). */
@media (min-width: 1200px) {
.BYeQip38eV9iVZEz6_gz {
padding: var(--na-spacing-80, 96px) var(--na-spacing-80, 80px);
}
/* Step the shared tag up to Figma's M size — see shared/Tag.module.css. */
.JUTrnGv2k23kiOZaaWqK {
--tag-gap: 10px;
--tag-dot-size: 10px;
--tag-dot-radius: 3px;
--tag-font-size: 20px;
--tag-line-height: 28px;
--tag-letter-spacing: -0.4px;
}
.VOqTQOaM3Q0XnZoP92vI,
._xRT8_CS935to4zbMBS8,
.nEC89gbar5R4_P1Vlv0o {
font-size: 54px;
line-height: 58px;
}
.VOqTQOaM3Q0XnZoP92vI {
max-width: 760px;
}
.af80CJxgiN8TFgk3kXaQ {
flex-direction: row;
flex-wrap: nowrap;
}
/* Passed down through the slot to `.card` in EcosystemCard's own shadow
root (CSS custom properties inherit across shadow/slot boundaries the
same way Webflow's own `--na-*` site variables do) - plain selectors
can't reach it directly, and `.row > *` only ever matches the ``
itself, which is display: contents and generates no box. */
.af80CJxgiN8TFgk3kXaQ > * {
flex: var(--ecosystem-card-desktop-flex, 1 0 0);
width: auto;
}
.axHQOdcvNAisXFpHDy2u {
/* Bleed all the way to .section's own edges on both sides — this is the
clip boundary (via .viewport's overflow: hidden below), so cards get
the maximum possible room to enter/exit before being cut, instead of
stopping early at the 1280px heading width. `width: auto` (not 100%)
is what makes the block box actually shrink by the margins instead of
overflowing past the section's edge by that same amount. */
max-width: none;
width: auto;
margin-left: calc(-1 * var(--na-spacing-80, 80px));
margin-right: calc(-1 * var(--na-spacing-80, 80px));
}
.axHQOdcvNAisXFpHDy2u .iGdmuI1B_GfD9S1HyK8b {
position: sticky;
/* Gap from the viewport's top edge so the pinned row doesn't sit flush
against the browser chrome (or a fixed site header) while scrolling. */
top: var(--na-spacing-48, 48px);
overflow: hidden;
/* Without this, width:100% + padding-left below add up instead of the
padding eating into the 100% — the box silently grows past .track's
edge, which both breaks the overflow math in the JS (looks like
everything already fits, so it never slides) and overflows the page. */
box-sizing: border-box;
/* .viewport itself now spans .section edge-to-edge (see .trackAnimated
above). This padding re-aligns the row's resting position with the
heading above it, while the clip boundary stays out at the wider
edge — overflow:hidden clips at the padding edge, not the content
edge, so cards get this whole padding width as extra travel room as
they enter/exit instead of being cut off right where the heading
starts. */
padding-left: max(0px, calc((100% - var(--container-max-width, 1280px)) / 2));
/* Read by the scroll effect in EcosystemSection.tsx: how much room to
leave between the last card and the viewport's right edge once
scrolling has fully revealed it, so it doesn't end up flush against
the edge. */
--row-end-gap: var(--na-spacing-24, 24px);
}
.axHQOdcvNAisXFpHDy2u .af80CJxgiN8TFgk3kXaQ {
width: max-content;
will-change: transform;
--ecosystem-card-desktop-flex: 0 0 452px;
--ecosystem-card-desktop-min-height: 514px;
}
}
/* Eyebrow tag (Figma "Tag Serif"): a small square dot next to an italic serif
label. Figma ships it at two sizes, S and M.
The size is driven by custom properties rather than a React prop, because
every section so far switches between S and M at its *own* breakpoint
(Outcomes at 992px, Ecosystem at 1200px) — something a JS prop cannot do.
Defaults below are size S. A section moves to size M by passing `className`
to and setting these inside its own media query:
@media (min-width: 992px) {
.sectionTag {
--tag-gap: 10px;
--tag-dot-size: 10px;
--tag-dot-radius: 3px;
--tag-font-size: 20px;
--tag-line-height: 28px;
--tag-letter-spacing: -0.4px;
}
}
The label is serif italic by default ("Tag Serif"). Figma also uses the same
tag with a plain sans label inside cards - that is --tag-font-family and
--tag-font-style, set the same way (see StepCard).
Note the S values live in the var() fallbacks and are deliberately NOT
declared on .tag itself — a declaration here would beat an override coming
from the same element or an ancestor, and the switch would silently do
nothing. */
._ieooqJhlujimY9scWb3 {
display: flex;
align-items: center;
gap: var(--tag-gap, 8px);
}
.sA2Swnt2I2f1v55bsc1M {
flex-shrink: 0;
width: var(--tag-dot-size, 7px);
height: var(--tag-dot-size, 7px);
border-radius: var(--tag-dot-radius, 1.5px);
background: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
}
.wmvIIAw52vFHDRm9ZsjP {
margin: 0;
font-family: var(--tag-font-family, var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif));
font-style: var(--tag-font-style, italic);
font-size: var(--tag-font-size, 14px);
line-height: var(--tag-line-height, 20px);
letter-spacing: var(--tag-letter-spacing, -0.2px);
color: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
white-space: nowrap;
}