@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/core/navbar/navbar-impl.css

@@ -0,0 +1,597 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did
+ * before — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * Above the page it sticks over, which a contract cannot hold: an integer with no unit.
+ *
+ * `position: sticky` alone is not enough, and the way it fails is quiet. A sticky box at
+ * `z-index: auto` paints above the in-flow content it passes, which is most of a marketing
+ * page and is why this looks correct until it does not — the first positioned section
+ * further down the document paints straight through the bar, because a later positioned
+ * element outranks an earlier one at the same level. A hero with a positioned overlay on
+ * it is the usual first sighting, and it gets reported as the navigation disappearing
+ * rather than as a stacking bug.
+ *
+ * `layer.popup` rather than a number: the role for what floats over what the page lays
+ * out. It sits below anything that interrupts the reader, so the panel at `layer.overlay`
+ * still covers the bar it came out of.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar {
+  z-index: var(--layer-popup);
+}
+
+/*
+ * And the ground paints behind everything the row holds, which is the same kind of claim and
+ * cannot be made any other way either.
+ *
+ * It is absolutely positioned, and a positioned box paints above its in-flow siblings whatever
+ * the source order says — so without this the bar's ground would cover the mark and the control
+ * beside it. Source order is not the lever: `order` moves a flex item's position in the line and
+ * nothing about where it paints.
+ *
+ * Negative, and safely so. The rail above is a stacking context — it is positioned and carries a
+ * stacking order of its own — so this cannot sink below the page behind it. It goes behind the
+ * row's contents and stops there, which is the whole of what it is for.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground {
+  z-index: -1;
+}
+
+/*
+ * The see-through material — tint, blur, and the layer the pill's blur sits on — is in
+ * navbar-material.css, which the bar's panels share.
+ */
+
+/*
+ * Which regions the bar draws, and the one size query in this package.
+ *
+ * Every other component here is width-agnostic: the token layer adapts on its own, so a
+ * component writes a variable once and the value changes underneath it. That works for a
+ * measure and cannot work for this. What changes at a navigation bar's threshold is not
+ * how big a thing is but which things exist — the destinations become a panel, the
+ * utilities move to its foot — and no token can say "this element is not drawn".
+ *
+ * A contract cannot say it either. `presentWhen` names a prop and a width is not one, and
+ * gating the parts on a width measured in script would mean a bar that renders one
+ * arrangement on the server and another on the client, which is the flash every reader on
+ * a slow connection sees.
+ *
+ * `@container` rather than `@media`, and the difference is not a refinement. What decides
+ * whether the destinations fit is the room the bar has, which is the window's width only
+ * where the bar is full-bleed. A media query is right about the page and wrong about the
+ * component, and it is wrong silently: the arrangement it draws is a real one, just not
+ * the one the width called for. A bar in a column — a preview, a split layout, anything
+ * narrower than the window it is measuring — gets the collapsed arrangement at every size.
+ *
+ * A literal rather than a token, because no token can be one. CSS does not accept `var()`
+ * inside a container or media query condition, so a `size.breakpoint.*` role could be
+ * published and still not be usable here — which means token-discipline's own suggested
+ * resolution, "add one and bind it in the contract", cannot be carried out for a query
+ * prelude. The threshold is a duplication of VIEWPORT_BREAKPOINT in src/tokens/emit-css.ts,
+ * where the token layer holds the same number, and it is worth flagging rather than hiding.
+ *
+ * In rem rather than px, and the reason is not that token-discipline matches on `px`. A
+ * threshold in rem answers to the reader's own root size: somebody reading at larger text
+ * needs more room for the same five destinations, and a bar measured in rem gives way when
+ * they actually stop fitting rather than at a width chosen for 16px text. That it also
+ * passes a regex which cannot see query preludes is a coincidence this comment would rather
+ * name than rely on.
+ *
+ * `64rem` and not the 48 it began at, which is the one number here chosen by looking rather
+ * than by reasoning. At 48 the bar had room for its three regions and not for what a real
+ * page puts in them: a mark, five destinations, a switcher and two buttons met somewhere
+ * around a thousand pixels and drew over each other. Nothing in the component can know that
+ * — what fits depends on how many destinations a page has and how long their words are — so
+ * the threshold is set where a full bar stops fitting rather than where three empty regions
+ * do.
+ *
+ * Giving way earlier is the cost, and it is the right one. A tablet that used to show the
+ * whole bar now shows a mark and a control, and everything the bar was holding is one press
+ * away in the panel, where it is laid out for reading rather than crushed into a row. The
+ * alternative was a band of widths where the bar was technically drawn and practically
+ * unreadable.
+ *
+ * Narrow first, so the fallback where the query never matches is the arrangement that fits
+ * in less room. Written two classes deep to match the generated rules these override,
+ * which set `display: flex` on each of these parts.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster,
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__utilities {
+  display: none;
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster,
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__utilities {
+    display: flex;
+  }
+
+  /*
+   * And the bar stops being a surface. Drawn in full it is an arrangement — a mark, a pill and a
+   * pair of actions with the page showing between them — and a ground behind that would be a band
+   * across the window with a second rounded box sitting on it.
+   *
+   * `display: none` rather than turning the ground transparent, on the same reasoning as the
+   * regions above: what changes at this threshold is which things exist, and a box painted in
+   * nothing is still a box, still carrying a shadow role that would go on being drawn.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground {
+    display: none;
+  }
+
+  /*
+   * The pill takes its air back at this width.
+   *
+   * The row is padded for the collapsed bar, where eight either side of a control's height is a
+   * bar of fifty-six — enough that the action it keeps has a margin rather than a hairline. Drawn in full the row holds the pill instead, which
+   * is a surface with a shadow and wants a step of its own around it rather than the hairline that
+   * suits a bare control — so the pill asks for the rest here, where the query can reach it and
+   * cannot reach the row it sits in.
+   *
+   * On the pill rather than the row for that reason alone. The sum is unchanged: eight and four
+   * either side of a forty-eight pill is the same seventy-two the bar drew when the row carried
+   * twelve.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster {
+    margin-block: var(--space-inset-2xs);
+  }
+
+  /*
+   * The control the bar keeps only while it is collapsed. It opens the panel that holds
+   * what the other two regions were showing, and has nothing to answer for once both are
+   * drawn in full.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__trigger {
+    display: none;
+  }
+
+  /*
+   * And the action it stood beside, which is the same action `utilities` is drawing a few
+   * pixels away at this width. Kept only while the trailing end is not.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__compact-action {
+    display: none;
+  }
+
+  /*
+   * And the panel cannot be open at a width with nowhere to put it. A reader who opens it
+   * on a phone and then rotates, or drags a window wider, would otherwise be left under a
+   * surface covering the page with the bar behind it already showing every destination
+   * that surface was drawn to offer.
+   *
+   * On the host rather than the panel. The host is `display: contents`, so it is a place
+   * in the tree rather than a box — and `display: none` on a box that has none is still
+   * what takes its subtree off the page. The panel's own class belongs to NavbarPanel's
+   * stylesheet, and a rule here naming it would be a rule about a part this component does
+   * not emit.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__panel-host {
+    display: none;
+  }
+}
+
+/*
+ * The pill sits in the centre of the bar, not in the centre of what is left over.
+ *
+ * Auto margins were the first answer and they answer a different question: they split the free
+ * space either side of the box, so the pill centres between the two ends rather than in the row.
+ * The ends are not the same width — a mark is narrower than a pair of buttons — so the pill sat
+ * off to the leading side by half the difference, and moved again every time the copy on a button
+ * changed.
+ *
+ * Equal shares instead. Both ends take a basis of nothing and grow at the same rate, so whatever
+ * room is left is divided between them and the middle lands on the centre line however wide the
+ * mark or the actions turn out to be. `min-inline-size: auto` is what keeps either from being
+ * crushed below its own contents, which is a flex item's default and the reason this does not need
+ * saying twice.
+ *
+ * Not expressible in the contract. A flex ratio is a bare number, which the static CSS vocabulary
+ * rejects for the same reason it rejects a stacking order.
+ *
+ * The trailing end ranges its contents to the far edge. Grown to a share of the row it would
+ * otherwise start where its share starts, leaving the actions adrift in the middle of their own
+ * box rather than against the end of the bar.
+ *
+ * Direct children of the row only. The same two parts are rendered inside the pill once the bar
+ * gathers, and a basis of nothing there would be read as contributing nothing to the pill's own
+ * width — the shape hugs, so it would size to the destinations alone and crush the mark and the
+ * actions it had just been given. The child combinator is what keeps the rule where it is true.
+ *
+ * And the share is what they give up when the bar gathers. A box whose basis is nothing is exactly
+ * as wide as the share it grows into, so taking the growth to nought takes the box to nought —
+ * which a number can be transitioned to, where a width cannot travel to `auto` and back. The row
+ * reflows the whole way, the pill widens into what is being given up, and the destinations slide
+ * along with it.
+ *
+ * `overflow: hidden` because the box is narrower than what it holds for most of that journey.
+ * Permanently rather than for the duration: these boxes are a share of the row at rest, far wider
+ * than the mark or the pair of buttons inside them, so nothing is near an edge to be clipped.
+ *
+ * And they move while they go. The share is what they give up; the travel is what a reader follows
+ * — one says something about the layout and the other about the thing leaving it, and a box that
+ * only narrowed would read as being squeezed out rather than as going somewhere. `translate` is a
+ * transform, so it costs the layout nothing and composes with the collapse instead of arguing with
+ * it.
+ *
+ * Up, and only up. The gutter stays where it is for the whole journey, because it is what the mark
+ * and the actions are positioned against: the mark sits a gutter in from the box's leading edge and
+ * the actions a gutter in from its trailing one, so collapsing that padding walks both of them
+ * outwards — the mark left, the buttons right — while they are also travelling up. Two directions
+ * at once reads as sliding off to the side rather than as lifting away, which is not what the
+ * movement is for.
+ *
+ * The cost is that `box-sizing: border-box` will not take these boxes below their own padding, so
+ * each end keeps a gutter's width once it has gone. Nothing is drawn in it and the pill is centred
+ * by `margin-inline: auto` rather than by what the ends leave behind, so it stays where it was; the
+ * only thing given up is the last gutter's worth of room the pill could have widened into.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__brand,
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__utilities {
+  flex: 1 1 0;
+  overflow: hidden;
+  transition:
+    flex-grow var(--motion-duration-shift) var(--motion-easing-shift),
+    margin-inline var(--motion-duration-shift) var(--motion-easing-shift),
+    opacity var(--motion-duration-shift) var(--motion-easing-shift),
+    translate var(--motion-duration-shift) var(--motion-easing-shift);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__utilities {
+  justify-content: flex-end;
+}
+
+/*
+ * What a reader sets sits with the sections, at the sections' own spacing.
+ *
+ * The pill separates its regions by `space.gap.md` — the mark, the destinations, the actions, each
+ * a different kind of thing and spaced to say so. `preferences` is a fourth child of that box and
+ * takes the same step, which is the wrong claim: a locale is not another region of the bar, it is
+ * one more item at the end of the row of sections, and sixteen pixels after a four-pixel row reads
+ * as a gap somebody forgot to close.
+ *
+ * The difference of the two steps, so the net spacing is the row's own. Written as the subtraction
+ * rather than as the number it currently comes to, so retuning either ramp keeps this correct —
+ * the same reason NavbarPanel pulls its body out by reading the step it is cancelling.
+ *
+ * Not expressible in the contract, which no negative dimension is.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__preferences {
+  margin-inline-start: calc(var(--space-gap-xs) - var(--space-gap-md));
+}
+
+/*
+ * The kept action travels with the control beside it, rather than floating in the middle.
+ *
+ * The row is `space-between`, which is right while it holds two things — a mark at one end and a
+ * control at the other. Collapsed with an action as well it holds three, and space-between spreads
+ * them evenly: the action lands halfway across the bar, equidistant from the mark and the menu and
+ * reading as though it belongs to neither.
+ *
+ * An auto margin on its leading side takes all the free space instead, so the action and the
+ * trigger sit together at the trailing end with the row's own gap between them, and the mark keeps
+ * the other end to itself. Absent, nothing changes: with two children space-between already does
+ * exactly this.
+ *
+ * Not expressible in the contract. `auto` is neither a keyword the static vocabulary admits for a
+ * margin nor a quantity a token could hold — what it means here is "whatever is left", which is a
+ * different kind of value from every step on the spacing ramp.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__compact-action {
+  margin-inline-start: auto;
+}
+
+
+
+
+/*
+ * The mark carries its own leading inset, and only inside the pill.
+ *
+ * Everything else that meets the pill's ends brings padding with it: a button is a filled shape
+ * with its own, and a destination pads its words. A logo is a picture handed over by the page with
+ * nothing around it, so against the pill's own four pixels it sits a step closer to the edge than
+ * anything else does.
+ *
+ * On the mark rather than on the pill, which was the correction. Widening the pill fixed this end
+ * and moved the other: the actions were already at the right distance, and a symmetric inset
+ * pushed them in by the same amount the mark needed.
+ *
+ * Only inside the pill, which is why this is a selector rather than a binding. At rest the mark
+ * sits at the row's own leading edge with nothing around it, and a contract can say "this part" or
+ * "in this state" but not "when it is in that box".
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster > .dds-navbar__brand {
+  padding-inline-start: var(--space-inset-sm);
+}
+
+/*
+ * Whatever the slot was given fills the height the bar set, and keeps its own shape doing it.
+ *
+ * The height is bound on the part, and the part is a wrapper — so on its own it would constrain a
+ * box around a mark that went on drawing itself at whatever size it arrived at. Quill's marks
+ * carry `width` and `height` attributes, and a presentation attribute is exactly what a CSS
+ * declaration outranks.
+ *
+ * `inline-size: auto` against a bound block size is what keeps the ratio: a wordmark is three
+ * times wider than it is tall, and pinning both axes would letterbox it into a smudge. The same
+ * reasoning is why Icon clones a glyph rather than wrapping one.
+ *
+ * Reaching into a child this component did not render, which is worth naming rather than hiding. A
+ * brand slot takes an element the page owns, so there is no other way to say how big it may be —
+ * and a bar that could not say would have its height set by whatever logo it was handed.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__brand > * {
+  align-items: center;
+  block-size: 100%;
+  display: flex;
+  inline-size: auto;
+}
+
+/*
+ * And it survives the anchor around it, which is the shape the contract asks for.
+ *
+ * The rule above reaches one level. That was enough while the slot held a mark and stopped being
+ * enough the moment it held the thing the guidance actually describes — "an `<a href="/">` around
+ * an SVG, in practice" — because the child it sizes is then the link rather than the picture. A
+ * link is `display: inline`, and `block-size` does not apply to a non-replaced inline box: the
+ * height was not overridden so much as ignored, the mark went on drawing itself at whatever size
+ * the page handed it, and an inline box sits on a text baseline, so it was off centre as well as
+ * too big.
+ *
+ * `display: flex` on the wrapper is what makes the height apply at all, and centres what is in it.
+ * Then the same two declarations again, one level deeper, for the mark itself.
+ *
+ * Two levels and not a descendant selector. A wrapper around the mark is the documented case and
+ * worth handling; anything deeper is a structure this component cannot reason about, and a rule
+ * that reset the size of everything inside the slot would be one that reached into a page's markup
+ * without knowing what it was touching.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__brand > * > * {
+  block-size: 100%;
+  inline-size: auto;
+}
+
+/*
+ * The pill centres on its own margins, at every scroll position.
+ *
+ * Auto margins split the free space either side of a box, which is centring in the remainder rather
+ * than in the row — and that was the objection to them, back when the two ends were in the flow and
+ * one of them was wider than the other. The ends are out of flow now at the widths where this pill
+ * exists, so the remainder *is* the row: there is nothing else in it to divide the space with, and
+ * the pill lands on the centre line however wide the mark or the actions turn out to be.
+ *
+ * Which also retires the equal shares above. They stay because the collapsed arrangement still uses
+ * them, and because a basis of nothing on a box that is no longer a flex item costs nothing.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster {
+  margin-inline: auto;
+}
+
+/*
+ * The ends leave upward and come back down the same way; what is in the pill is simply there.
+ *
+ * A transition rather than a keyframe, which is the whole of how the return was got. An animation
+ * plays when its rule starts matching and has nothing to say when it stops — so the departure ran
+ * on the way out and the ends snapped back into place on the way home. A transition is a change
+ * between two declared states, and there are exactly two here: at rest the ends sit in the row,
+ * gathered they are a step above it at nothing. It runs in whichever direction the scroll went.
+ *
+ * Nothing animates inside the pill. Both a fade and a travel were tried there and each read as a
+ * second event competing with the first — the eye follows the ends going and then finds the pill
+ * already holding them, which is what it expects, because the pill is the thing it was watching.
+ *
+ * Up by their own height — far enough to read as going rather than as settling, and not so far that
+ * it is crossing the page. The fade is what makes them gone: the box is out of flow while it is
+ * away and would otherwise sit over the row it left.
+ *
+ * `motion.duration.shift` and `motion.easing.shift`, which every part of this change takes — the
+ * ends leaving, the pill's shape opening, its ground turning, the ink following, and what it holds
+ * fading in. One change, one clock; earlier versions ran them at different paces and that was most
+ * of what read as a jump.
+ *
+ * Both roles were added for this and both point at primitives the package already had. The step is
+ * four hundred milliseconds: a press wants two hundred because the reader is waiting on their own
+ * action, and a scroll is not an action anybody is waiting on. The curve is symmetric, which
+ * `easing.standard` is not — this change runs both ways, and a reader who scrolls back up should
+ * see the same movement in reverse rather than a different one.
+ */
+
+/*
+ * A gutter at both arrangements, and not the same one.
+ *
+ * Edge to edge was the first reading of "full-bleed" and it is the wrong one: what runs to the
+ * glass is the bar's ground, not the things standing on it. A mark touching the window reads as a
+ * page that has been cropped rather than as a frame — and the actions at the other end are worse,
+ * because a button whose fill meets the edge has no shape left on that side.
+ *
+ * Collapsed, the step is `space.inset.lg`, and it is not chosen for its own sake: it is where the
+ * panel puts its mark. The panel insets itself by one step and its header by another, and those two
+ * together are what the mark sits at — so this is the sum of somebody else's two numbers, and it
+ * has to be, because the whole point is that the mark does not move sideways at the moment a
+ * surface opens over the bar drawing it. It was matched to the panel's outer step alone and drifted
+ * the day the header gained one of its own; the mark jumped eight pixels and nothing failed.
+ *
+ * Drawn in full, the step is `space.inset.lg` — one step out from the collapsed sixteen, and
+ * fixed at twenty-four at every width. The adaptive role a step above was the first choice and it
+ * was too much: it opens to forty-eight on a wide screen, which sets the actions far enough off
+ * the edge that they read as belonging to a column that is not there rather than to the frame.
+ *
+ * On the ends rather than on the row, which is not where a gutter would naturally go. `@container`
+ * styles the descendants of whatever declares `container-type`, and that is the row itself — so it
+ * reaches the mark, the pill and the trigger, and cannot reach the box they sit in. The ground
+ * takes the other way out of this, standing in for the row as a child of it; a gutter could be
+ * moved the same way and has not been, because padding on the ends is the simpler statement of it.
+ *
+ * A container query and not a media one, which was the first attempt and was wrong everywhere the
+ * bar is not full-bleed. A media query asks the browser window; the bar's arrangement asks the row.
+ * Inside anything with its own width — a split layout, an embedded view, the stage this is judged
+ * in — the two disagree, and the bar collapses while the gutter stays off, which is exactly the
+ * case the container query was chosen for in the first place.
+ *
+ * `padding` on the mark and `margin` on the trigger, because one is a box around a picture and the
+ * other is a target a finger has to hit: padding inside the trigger would grow the target and shift
+ * the glyph off its own centre, where a margin moves the whole control and leaves it the size it
+ * declared.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__brand {
+  padding-inline-start: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__trigger {
+  margin-inline-end: var(--space-inset-lg);
+}
+
+@container (min-width: 64rem) {
+  /*
+   * The row's own copies, not the pill's. The same two parts are drawn again inside the pill once
+   * the bar gathers, where they meet a shape that pads them itself — a gutter there would push the
+   * mark and the actions off the pill's ends rather than off the window's.
+   *
+   * The child combinator also outranks the collapsed rules above without either being written any
+   * deeper than what it overrides, which is the whole reason the narrow case is stated on the bare
+   * parts.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__brand {
+    padding-inline-start: var(--space-inset-lg);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__utilities {
+    padding-inline-end: var(--space-inset-lg);
+  }
+
+  /*
+   * And the control that opened the panel is not drawn at this width, so it needs no gutter — only
+   * the one it carries while collapsed, cleared.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__trigger {
+    margin-inline-end: 0;
+  }
+}
+
+/*
+ * Which copy of the ends is the live one, and how the other one gets out of the way.
+ *
+ * They are written into the row and into the pill, and exactly one pair is showing. The choice
+ * needs the bar's width as well as its scroll state, and only a container query has the first — so
+ * the component renders both and this decides, rather than JavaScript guessing at a width it was
+ * deliberately not given.
+ *
+ * The one that is not showing collapses in place: nought wide, nothing visible, and still in the
+ * flow. That last part is the whole of why this reads as one bar changing rather than two swapping.
+ * A box that leaves the flow takes its space with it in a single frame, so the row rearranges
+ * instantly and every smooth thing after that has to be reconstructed — the pill's growth drawn on
+ * by hand, the destinations caught mid-jump and played back. A box that narrows to nothing gives
+ * its space up gradually, and the row does the rest by itself: the pill widens into it, and what it
+ * holds slides along.
+ *
+ * The inset goes with it, and has to: `box-sizing: border-box` stops a box being wider than its
+ * declared width but not narrower than its own padding, so a mark that collapsed to nothing still
+ * held its leading inset — twelve pixels of nothing at the pill's leading edge, and a gutter's worth
+ * at the row's.
+ *
+ * The gap goes with the width too. A flex container puts its gap either side of every item, including
+ * one that is nought wide — so a collapsed copy would leave a gap's worth of space behind it and
+ * the pill would sit wider than its contents at rest. The margin against that gap goes to minus it,
+ * on the side the gap is on: the marks are at a leading edge, the actions at a trailing one.
+ *
+ * `pointer-events: none` because a box with no width still answers a click on its own edge.
+ *
+ * These are the resting states only. What travels between them is measured and animated in the
+ * component, because CSS cannot interpolate between a length and `auto` — see `useCollapse`.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster:not([data-condensed='true']) > .dds-navbar__brand {
+  inline-size: 0;
+  margin-inline-end: calc(var(--space-gap-md) * -1);
+  opacity: 0;
+  padding-inline: 0;
+  pointer-events: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster:not([data-condensed='true']) > .dds-navbar__utilities {
+  inline-size: 0;
+  margin-inline-start: calc(var(--space-gap-md) * -1);
+  opacity: 0;
+  padding-inline: 0;
+  pointer-events: none;
+}
+
+@container (min-width: 64rem) {
+  /*
+   * And the row's pair does the same on the opposite schedule: showing until the bar gathers, then
+   * nought wide and invisible, still in the flow, giving their space up as the pill takes it.
+   *
+   * Rendered rather than not drawn, which is also what keeps the mark alive. The wordmark clips
+   * itself with a hard-coded id, and two copies in the markup means every reference resolves to the
+   * first in document order — this one. Hidden with `display: none` its subtree leaves the render
+   * tree, the clip path resolves to nothing, and the copy inside the pill paints as empty. That is
+   * the logo that kept disappearing.
+   */
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__brand[data-condensed='true'] {
+    flex-grow: 0;
+    margin-inline-end: calc(var(--space-gap-md) * -1);
+    opacity: 0;
+    pointer-events: none;
+    translate: 0 -100%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__utilities[data-condensed='true'] {
+    flex-grow: 0;
+    margin-inline-start: calc(var(--space-gap-md) * -1);
+    opacity: 0;
+    pointer-events: none;
+    translate: 0 -100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__brand,
+    :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner > .dds-navbar__utilities {
+      transition: none;
+    }
+  }
+}
+
+/*
+ * The pill changes rather than being replaced, and the colours have to say so.
+ *
+ * There is one of these in the markup and there always was: the same element holds the destinations
+ * at rest and the whole row once the bar gathers, which is why its ground, its corner and its lift
+ * are declared once and never handed between parts. What changes on scroll is what is inside it and
+ * what it is painted in — a bar standing on a dark hero wears the dark material, and a bar that has
+ * left that hero behind wears the page's.
+ *
+ * Instantly, though, and that is the part a reader cannot read. A surface that swaps colour in one
+ * frame while its contents change in the same frame is indistinguishable from a second surface
+ * arriving on top of the first. Carried across the same step everything else in this change takes,
+ * it is plainly the same pill: the shape never moves, and the colour arrives at the new one while
+ * the ends are still leaving.
+ *
+ * The ink travels with it, on the rail rather than here, because that is where the tone sets it and
+ * what every destination inside the pill inherits. Two properties, one clock.
+ *
+ * `transition` rather than a binding, because what varies here is an axis rather than a state: the
+ * generated sheet emits a transition for the properties a state moves and has nothing to say about
+ * one a data attribute swaps.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster {
+  transition:
+    background-color var(--motion-duration-shift) var(--motion-easing-shift),
+    --dds-navbar-tint var(--motion-duration-shift) var(--motion-easing-shift);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar {
+  transition: color var(--motion-duration-shift) var(--motion-easing-shift);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-navbar,
+  :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster {
+    transition: none;
+  }
+}