@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/logo-columns/logo-columns-impl.css

@@ -0,0 +1,188 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The last of the words carries no step under it — FeatureSplit's rule and its reason: the steps
+ * sit on each part's own `margin-block-end`, so whichever part ends the column would otherwise be
+ * measured against nothing.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__title:last-child,
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__description:last-child,
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__disclaimer:last-child {
+  margin-block-end: 0;
+}
+
+/* The disclaimer sits close under the description it qualifies, not a full step away. */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__description:has(+ .dds-logocolumns__disclaimer) {
+  margin-block-end: var(--space-heading-title-description);
+}
+
+/*
+ * One column below the fold, and the words lead it — FeatureSplit's fold, written with the
+ * `data-media-position` attribute so it carries the weight of the generated rules keyed on it.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-logocolumns[data-media-position]
+    .dds-logocolumns__split {
+    flex-direction: column;
+  }
+
+}
+
+/* At full width the claim takes a measure and the wall takes the rest, FeatureSplit's shares. */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * The wall's edges fade out rather than cut.
+ *
+ * A mask rather than a gradient painted over the tiles: a painted fade has to be the ground's own
+ * colour to disappear into it, and would need restating for every ground and theme. A mask takes
+ * the tiles to transparent, so whatever is behind the wall shows through on any ground.
+ *
+ * A tenth of the wall at each edge, and eased: the mask's opacity follows a smoothstep curve across
+ * the fade rather than a straight line, which is what made the first one read as a hard band — a
+ * linear fade has its sharpest change at both of its ends. The stops are the curve sampled; a
+ * gradient between two stops is still linear, so the curve is in how many there are.
+ *
+ * Most of the fade only dims: the tiles fall to two fifths over the inner four fifths of it, eased,
+ * and only the last fifth at the very edge takes them on to nothing. The wall reads as running on
+ * behind the fade rather than dissolving into it, and still ends in no line — a fade that stopped
+ * at two fifths left the tiles cut off at the wall's edge in a straight one. Each is black
+ * mixed toward transparent rather than a colour value: a mask reads only the alpha, and the two
+ * keywords say so without a raw colour in a component's stylesheet.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+  --dds-logocolumns-fade: calc(var(--size-logo-columns-height) * 0.1);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent calc(var(--dds-logocolumns-fade) * 0),
+    color-mix(in srgb, black 40.0%, transparent) calc(var(--dds-logocolumns-fade) * 0.2),
+    color-mix(in srgb, black 46.2%, transparent) calc(var(--dds-logocolumns-fade) * 0.36),
+    color-mix(in srgb, black 61.1%, transparent) calc(var(--dds-logocolumns-fade) * 0.52),
+    color-mix(in srgb, black 78.9%, transparent) calc(var(--dds-logocolumns-fade) * 0.68),
+    color-mix(in srgb, black 93.8%, transparent) calc(var(--dds-logocolumns-fade) * 0.84),
+    black calc(var(--dds-logocolumns-fade) * 1.0),
+    black calc(100% - var(--dds-logocolumns-fade) * 1.0),
+    color-mix(in srgb, black 93.8%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.84),
+    color-mix(in srgb, black 78.9%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.68),
+    color-mix(in srgb, black 61.1%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.52),
+    color-mix(in srgb, black 46.2%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.36),
+    color-mix(in srgb, black 40.0%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.2),
+    transparent calc(100% - var(--dds-logocolumns-fade) * 0)
+  );
+}
+
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    --dds-logocolumns-fade: calc(var(--size-logo-columns-height) * 0.05);
+  }
+}
+
+/*
+ * The wall runs to the section's own edges, top and bottom.
+ *
+ * It is drawn taller than its token by the section step at each end, and pulled back by the same
+ * distance into the band's padding: the section keeps its height and the words beside the wall
+ * keep their air, while the tiles run on to the band's edge and fade out there rather than stopping
+ * a step short of it — which left a band of empty ground under a fade that had already ended.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+  block-size: calc(var(--size-logo-columns-height) + 2 * var(--space-section-default));
+  margin-block: calc(-1 * var(--space-section-default));
+}
+
+/* Half the wall on a phone: a screen of tiles under the words would be a screen the reader
+   scrolls past to find out the section is over. */
+@container (max-width: 47.9375rem) {
+  /* Only the foot runs to the band's edge on a phone. The top edge sits under the words rather
+     than at the band's edge, and pulled up it would fade into the link. */
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    block-size: calc(var(--size-logo-columns-height) * 0.5 + var(--space-section-default));
+    margin-block-start: 0;
+  }
+}
+
+/*
+ * Two columns sharing the wall, each as tall as its tiles. `align-self: flex-start` is what lets a
+ * column be taller than the wall: stretched, it would be held to the wall's height and have nothing
+ * to travel through.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column {
+  align-self: flex-start;
+  flex: 1 1 0;
+}
+
+/*
+ * The columns run with the scroll, in opposite directions.
+ *
+ * A view timeline on the wall measures its pass through the viewport, and each column travels one
+ * set — a third of its own height with the gap after its last tile counted in, the column being
+ * three sets — across that pass: the first rising, the second falling. One set is the distance at
+ * which the column shows exactly what it did at the start, so nothing jumps at either end. Scroll-
+ * driven, so it moves as the reader scrolls and back again as they scroll back, and stands still
+ * while the page does.
+ *
+ * The timeline measures against the nearest scroll container, which is why the section and the
+ * wall clip with `overflow: clip` rather than `hidden`: `hidden` makes a box a scroll container
+ * even when it never scrolls, and the columns would then sit still however far the page moved.
+ * A browser with no scroll timeline draws the columns still, which is the whole of the fallback.
+ */
+@keyframes dds-logocolumns-rise {
+  from {
+    translate: none;
+  }
+  to {
+    translate: 0 calc(-1 * (100% + var(--space-grid-gutter)) / 3);
+  }
+}
+
+@keyframes dds-logocolumns-fall {
+  from {
+    translate: 0 calc(-1 * (100% + var(--space-grid-gutter)) / 3);
+  }
+  to {
+    translate: none;
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    view-timeline: --dds-logocolumns-wall block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column[data-column='rising'] {
+    animation: dds-logocolumns-rise linear both;
+    animation-range: cover;
+    animation-timeline: --dds-logocolumns-wall;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column[data-column='falling'] {
+    animation: dds-logocolumns-fall linear both;
+    animation-range: cover;
+    animation-timeline: --dds-logocolumns-wall;
+  }
+}
+
+/* A reader who asked for less movement gets none of it: the columns stand still. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column {
+    animation: none;
+  }
+}

package/dist/components/blocks/logo-rows/LogoRows.css

@@ -0,0 +1,122 @@
+/* GENERATED from logorows.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-logorows {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: clip;
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+  display: flex;
+  flex: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  aspect-ratio: var(--aspect-landscape);
+  border-radius: var(--radius-container-item);
+  inline-size: var(--size-logo-rows-tile);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo-image {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="page"] .dds-logorows__logo {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="strong"] .dds-logorows__logo {
+  background-color: var(--color-bg-surface-card-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="subtle"] .dds-logorows__logo {
+  background-color: var(--color-bg-surface-card-raised);
+}
+

package/dist/components/blocks/logo-rows/LogoRows.d.ts

@@ -0,0 +1,20 @@
+import './LogoRows.css';
+import './logo-rows-impl.css';
+import '../block-reveal.css';
+import { type LogoRowsProps } from './LogoRows.types.js';
+export type { LogoRowsProps };
+/**
+ * A claim over two rows of logos — LogoColumns stacked: the words centred on top, the logos in
+ * two rows across the band's full width under them.
+ *
+ * Nothing here moves on its own. The stylesheet slides the rows sideways on a view timeline the
+ * rail carries — the first toward the start, the second toward the end — so they run with the
+ * reader's scroll and stand still the moment the page does, and for a reader who asked for less
+ * motion.
+ *
+ * The logos are dealt into the two rows in order, alternately, so a page orders one list rather
+ * than splitting it. Each row is a list of the logos it was dealt, drawn `SETS` times over; only
+ * the first set is announced, so a screen reader hears each name once. The title carries the
+ * section's accessible name through `aria-labelledby`.
+ */
+export declare function LogoRows({ ground, title, description, link, logos, }: LogoRowsProps): import("react").JSX.Element | null;

package/dist/components/blocks/logo-rows/LogoRows.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './LogoRows.css';
+import './logo-rows-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { logoRowsDefaults, logoRowsParts, } from './LogoRows.types.js';
+/**
+ * How many times each row is drawn. A row moves by one set across the rail's pass, so the end of
+ * the movement shows what the start did; four sets keep it running on past both ends of a wide
+ * screen at every point of it. The stylesheet's travel — a quarter of the row — is written for four.
+ */
+const SETS = 4;
+/**
+ * A claim over two rows of logos — LogoColumns stacked: the words centred on top, the logos in
+ * two rows across the band's full width under them.
+ *
+ * Nothing here moves on its own. The stylesheet slides the rows sideways on a view timeline the
+ * rail carries — the first toward the start, the second toward the end — so they run with the
+ * reader's scroll and stand still the moment the page does, and for a reader who asked for less
+ * motion.
+ *
+ * The logos are dealt into the two rows in order, alternately, so a page orders one list rather
+ * than splitting it. Each row is a list of the logos it was dealt, drawn `SETS` times over; only
+ * the first set is announced, so a screen reader hears each name once. The title carries the
+ * section's accessible name through `aria-labelledby`.
+ */
+export function LogoRows({ ground = logoRowsDefaults.ground, title, description, link, logos, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // Nothing to show is nothing drawn: a row with no logo on it is a claim with no evidence.
+    if (logos.length === 0)
+        return null;
+    const rows = [
+        logos.filter((_, at) => at % 2 === 0),
+        logos.filter((_, at) => at % 2 === 1),
+    ];
+    return (_jsx("section", { className: logoRowsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: logoRowsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: logoRowsParts.header, children: [_jsx("h2", { className: logoRowsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: logoRowsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: logoRowsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: logoRowsParts.rail, ...arriving(3), children: rows.map((row, at) => row.length === 0 ? null : (_jsx("ul", { className: logoRowsParts.track, "data-row": at === 0 ? 'leading' : 'trailing', children: Array.from({ length: SETS }, (_, set) => row.map((logo, index) => (
+                        // A logo's place is its identity: the list is the page's, and nothing reorders it.
+                        _jsx("li", { className: logoRowsParts.logo, "aria-hidden": set === 0 ? undefined : 'true', children: _jsx("img", { className: logoRowsParts['logo-image'], src: logo.src, alt: logo.name, draggable: false }) }, `${set}-${index}`)))) }, at))) })] }) }));
+}

package/dist/components/blocks/logo-rows/LogoRows.types.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { LogoTile } from '../../logo-data.js';
+export interface LogoRowsOwnProps {
+    /**
+     * `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+     * `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide". */
+    title: string;
+    /** The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on. */
+    description?: string;
+    /** The way onward — a standalone Link, "View all partners", usually. Under the line, never on the row: the tiles move. */
+    link?: ReactNode;
+    /** Always. The logos, in the order the section deals them into its two rows — the first to the first row, the second to the second, and so on. Eight or more, so each row runs on past both edges of the band. Each name is what a screen reader hears for its logo. */
+    logos: LogoTile[];
+}
+export type LogoRowsProps = LogoRowsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const logoRowsParts: {
+    readonly root: "dds-logorows";
+    readonly inner: "dds-logorows__inner";
+    readonly header: "dds-logorows__header";
+    readonly title: "dds-logorows__title";
+    readonly description: "dds-logorows__description";
+    readonly link: "dds-logorows__link";
+    readonly rail: "dds-logorows__rail";
+    readonly track: "dds-logorows__track";
+    readonly logo: "dds-logorows__logo";
+    readonly 'logo-image': "dds-logorows__logo-image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const logoRowsDefaults: {
+    readonly ground: "strong";
+};

package/dist/components/blocks/logo-rows/LogoRows.types.js

@@ -0,0 +1,16 @@
+// GENERATED from logo-rows.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const logoRowsParts = {
+    root: 'dds-logorows',
+    inner: 'dds-logorows__inner',
+    header: 'dds-logorows__header',
+    title: 'dds-logorows__title',
+    description: 'dds-logorows__description',
+    link: 'dds-logorows__link',
+    rail: 'dds-logorows__rail',
+    track: 'dds-logorows__track',
+    logo: 'dds-logorows__logo',
+    'logo-image': 'dds-logorows__logo-image',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const logoRowsDefaults = { ground: 'strong' };

package/dist/components/blocks/logo-rows/logo-rows-impl.css

@@ -0,0 +1,179 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The header starts on a phone and is centred from the fold — FeatureCards' arrangement and its
+ * reason: centred text starts every line at a different edge, which costs little across a wide
+ * measure and a great deal across a narrow one.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__link {
+    justify-content: center;
+  }
+}
+
+/*
+ * The rail runs out to the band's edges.
+ *
+ * `cqi` is the band's width — the root declares `container-type` — and the bleed is how far the
+ * column stands in from the band's edge: half of whatever the band has beyond the content measure,
+ * plus the gutter. A negative margin of that measure takes the rail out to both edges, so the row
+ * fades out at the band's edge rather than at the column's — TestimonialRow's breakout.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+  --dds-logorows-bleed: calc((100cqi - min(100cqi, var(--size-content-max))) / 2 + var(--space-inset-page));
+  margin-inline: calc(-1 * var(--dds-logorows-bleed));
+}
+
+/*
+ * Both ends fade out rather than cut — LogoColumns' mask, turned on its side.
+ *
+ * A mask rather than a painted gradient, so it reads on any ground with no colour to keep in step,
+ * and eased: the opacity follows a smoothstep curve across the fade, sampled at its stops, because
+ * a straight fade has its sharpest change at both ends. Half a tile at each end. `to right` is
+ * physical, and the only gradient direction CSS has — harmless here, the fade being the same at
+ * both ends whichever way the page reads.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+  --dds-logorows-fade: calc(var(--size-logo-rows-tile) * 0.5);
+  mask-image: linear-gradient(
+    to right,
+    transparent calc(var(--dds-logorows-fade) * 0),
+    color-mix(in srgb, black 6.1%, transparent) calc(var(--dds-logorows-fade) * 0.15),
+    color-mix(in srgb, black 21.6%, transparent) calc(var(--dds-logorows-fade) * 0.3),
+    color-mix(in srgb, black 42.5%, transparent) calc(var(--dds-logorows-fade) * 0.45),
+    color-mix(in srgb, black 64.8%, transparent) calc(var(--dds-logorows-fade) * 0.6),
+    color-mix(in srgb, black 84.4%, transparent) calc(var(--dds-logorows-fade) * 0.75),
+    color-mix(in srgb, black 97.2%, transparent) calc(var(--dds-logorows-fade) * 0.9),
+    black calc(var(--dds-logorows-fade) * 1),
+    black calc(100% - var(--dds-logorows-fade) * 1),
+    color-mix(in srgb, black 97.2%, transparent) calc(100% - var(--dds-logorows-fade) * 0.9),
+    color-mix(in srgb, black 84.4%, transparent) calc(100% - var(--dds-logorows-fade) * 0.75),
+    color-mix(in srgb, black 64.8%, transparent) calc(100% - var(--dds-logorows-fade) * 0.6),
+    color-mix(in srgb, black 42.5%, transparent) calc(100% - var(--dds-logorows-fade) * 0.45),
+    color-mix(in srgb, black 21.6%, transparent) calc(100% - var(--dds-logorows-fade) * 0.3),
+    color-mix(in srgb, black 6.1%, transparent) calc(100% - var(--dds-logorows-fade) * 0.15),
+    transparent calc(100% - var(--dds-logorows-fade) * 0)
+  );
+}
+
+/* A tile three quarters as wide on a phone, so a row still shows two and the start of a third. */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo {
+    inline-size: calc(var(--size-logo-rows-tile) * 0.75);
+  }
+}
+
+/*
+ * Tiles keep their width: a flex item shrinks to fit before it overflows, and a row of squeezed
+ * tiles is the one thing this is not.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo {
+  flex: none;
+}
+
+/*
+ * Each row is as wide as its tiles, not as the rail. The rail is a column, and a column stretches
+ * its items across itself, which held every row to the band's width: its movement — a share of its
+ * own width — was then a share of the band rather than one set of logos, and changed with the
+ * screen instead of with what the row holds.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+  align-self: flex-start;
+}
+
+/*
+ * The rows run with the scroll, in opposite directions: the first toward the start, the second
+ * toward the end.
+ *
+ * A view timeline on the rail measures its pass through the viewport, and each row travels one set
+ * across that pass, so the end of the movement shows exactly what the start did and nothing jumps
+ * at either end. One set is a quarter of the row, the row being four sets, with the gap after the
+ * last tile counted in — four sets of tiles have one gap fewer than four sets of tile-and-gap.
+ * Four rather than three so that a row of eight logos still reaches past a wide screen's far edge
+ * at the end of its travel. The second row runs the same
+ * distance the other way by starting where the first ends. In a right-to-left page a row is laid
+ * from the other edge and runs on past the left one, so both directions turn round.
+ *
+ * The timeline measures against the nearest scroll container, which is why the section and the
+ * rail clip with `overflow: clip` rather than `hidden`: `hidden` makes a box a scroll container even
+ * when it never scrolls, and the rows would sit still however far the page moved. A browser with no
+ * scroll timeline draws the rows still, which is the whole of the fallback.
+ */
+@keyframes dds-logorows-to-start {
+  from {
+    translate: none;
+  }
+  to {
+    translate: calc(-1 * (100% + var(--space-grid-gutter)) / 4) 0;
+  }
+}
+
+@keyframes dds-logorows-to-end {
+  from {
+    translate: calc(-1 * (100% + var(--space-grid-gutter)) / 4) 0;
+  }
+  to {
+    translate: none;
+  }
+}
+
+@keyframes dds-logorows-to-start-rtl {
+  from {
+    translate: none;
+  }
+  to {
+    translate: calc((100% + var(--space-grid-gutter)) / 4) 0;
+  }
+}
+
+@keyframes dds-logorows-to-end-rtl {
+  from {
+    translate: calc((100% + var(--space-grid-gutter)) / 4) 0;
+  }
+  to {
+    translate: none;
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+    view-timeline: --dds-logorows-rail block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+    animation: dds-logorows-to-start linear both;
+    animation-range: cover;
+    animation-timeline: --dds-logorows-rail;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track[data-row='trailing'] {
+    animation-name: dds-logorows-to-end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track:dir(rtl) {
+    animation-name: dds-logorows-to-start-rtl;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track[data-row='trailing']:dir(rtl) {
+    animation-name: dds-logorows-to-end-rtl;
+  }
+}
+
+/* A reader who asked for less movement gets none of it: the rows stand still. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+    animation: none;
+  }
+}