@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/blocks/feature-tabs/feature-tabs-impl.css

@@ -0,0 +1,53 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * The heading, the tabs and the footnote start on a phone, as every block's heading does there, and
+ * are centred from 48rem over the content they choose — Documents' and FaqAccordion's rule. `48rem`
+ * longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__header {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__tabs {
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__footnote {
+    text-align: center;
+  }
+}
+
+/*
+ * A lone tab has no strip, and the strip it would have held is not left as a step in the
+ * header's rhythm: an empty part with a margin is a gap with nothing in it.
+ */
+:where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__tabs:empty {
+  display: none;
+}
+
+/*
+ * On the strong band the tab strip takes the band's inks, as Documents' accordion does: TabList is
+ * drawn for a light ground, so a selected tab's near-black text would vanish on the dark one.
+ */
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tablist {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab[data-selected="true"] :is(.dds-tab__label, .dds-tab__icon, .dds-tab__trailing-icon) {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab[data-selected="false"] :is(.dds-tab__label, .dds-tab__icon, .dds-tab__trailing-icon) {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab .dds-tab__surface:hover {
+  background-color: var(--color-bg-hover-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}

package/dist/components/blocks/image-banner/ImageBanner.css

@@ -96,7 +96,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="strong"] .dds-imagebanner__card {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="subtle"] {

package/dist/components/blocks/image-banner/ImageBanner.d.ts

@@ -1,6 +1,7 @@
 import './ImageBanner.css';
 import './image-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type ImageBannerProps } from './ImageBanner.types.js';
 export type { ImageBannerProps };
 /**
@@ -29,4 +30,4 @@ export type { ImageBannerProps };
  * the photograph after them. A cover photograph is the card's ground rather than a part of what it
  * says, so it is there from the start and only the words arrive over it.
  */
-export declare function ImageBanner({ ground, variant, mediaPosition, parallax, title, headingLevel, description, action, media, }: ImageBannerProps): import("react").JSX.Element;
+export declare function ImageBanner({ ground, variant, mediaPosition, parallax, stackOnPhone, title, headingLevel, description, action, media, }: ImageBannerProps): import("react").JSX.Element;

package/dist/components/blocks/image-banner/ImageBanner.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './ImageBanner.css';
 import './image-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { imageBannerDefaults, imageBannerParts } from './ImageBanner.types.js';
@@ -33,9 +34,9 @@ import { imageBannerDefaults, imageBannerParts } from './ImageBanner.types.js';
  * the photograph after them. A cover photograph is the card's ground rather than a part of what it
  * says, so it is there from the start and only the words arrive over it.
  */
-export function ImageBanner({ ground = imageBannerDefaults.ground, variant = imageBannerDefaults.variant, mediaPosition = imageBannerDefaults.mediaPosition, parallax = imageBannerDefaults.parallax, title, headingLevel = imageBannerDefaults.headingLevel, description, action, media, }) {
+export function ImageBanner({ ground = imageBannerDefaults.ground, variant = imageBannerDefaults.variant, mediaPosition = imageBannerDefaults.mediaPosition, parallax = imageBannerDefaults.parallax, stackOnPhone = imageBannerDefaults.stackOnPhone, title, headingLevel = imageBannerDefaults.headingLevel, description, action, media, }) {
     const titleId = useId();
     const Title = headingLevel;
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
+    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "data-stack-on-phone": variant === 'cover' && stackOnPhone ? '' : undefined, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, "data-dds-parallax": parallax ? '' : undefined, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
 }

package/dist/components/blocks/image-banner/ImageBanner.types.d.ts

@@ -3,14 +3,9 @@ export interface ImageBannerOwnProps {
     /**
      * `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
      * `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-     * `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
+     * `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong-on-brand-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
      */
     ground?: 'page' | 'subtle' | 'strong';
-    /**
-     * `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. On a phone the card runs the width of the screen and the photograph stacks with the words
-     * `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. For a photograph wide enough to be the band rather than half of it
-     */
-    variant?: 'split' | 'cover';
     /**
      * `end` — The default. The words lead and the photograph follows, which is the order the card argues in
      * `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
@@ -29,10 +24,16 @@ export interface ImageBannerOwnProps {
     action?: ReactNode;
     /** Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration. */
     media: ReactNode;
-    /** The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button. */
+    /** The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button. */
     parallax?: boolean;
 }
-export type ImageBannerProps = ImageBannerOwnProps;
+export type ImageBannerProps = ImageBannerOwnProps & ({
+    variant?: 'split' | 'cover';
+    stackOnPhone?: false;
+} | {
+    variant: Exclude<'split' | 'cover', 'split'>;
+    stackOnPhone?: boolean;
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const imageBannerParts: {
     readonly root: "dds-imagebanner";
@@ -51,4 +52,5 @@ export declare const imageBannerDefaults: {
     readonly mediaPosition: "end";
     readonly headingLevel: "h2";
     readonly parallax: true;
+    readonly stackOnPhone: false;
 };

package/dist/components/blocks/image-banner/ImageBanner.types.js

@@ -11,4 +11,4 @@ export const imageBannerParts = {
     media: 'dds-imagebanner__media',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: true };
+export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: true, stackOnPhone: false };

package/dist/components/blocks/image-banner/image-banner-impl.css

@@ -173,109 +173,116 @@
 }
 
 /*
- * The scrim over the cover photograph, darkest where the words are.
+ * The shade under a cover card's words: their column, and just past it.
  *
- * color.bg.overlay held across the whole of the words' column — three fifths of the card, the
- * content's share — so white body copy keeps AA over even a pale photograph; then
- * color.bg.overlay-subtle, the role for an image overlay, and clear at the far side, so the
- * photograph shows where nothing is written on it. Darkest only at the words' edge was not enough:
- * over a light photograph the end of a line of copy sat at about 2:1.
- * On a phone the words are at the top across the whole width, so the scrim runs down rather than
- * across.
+ * White body copy has to keep AA over even a pale photograph, so the words' column is
+ * color.bg.overlay at full strength — darkest only at the words' edge was tried and left the end of a
+ * line at about 2:1. But the shade is the words', not the photograph's: it is drawn by the column the
+ * words take and fades to clear across the column's own margin and space.section.default past its
+ * edge — a long fade, so it never reads as an edge on the photograph — and the rest of the
+ * photograph is shown as it was taken. It once held across three fifths of the card and then thinned
+ * out to the far edge, which turned a bright photograph slate grey nearly all the way across; on a
+ * phone it ran down three fifths of the card's height however short the words were.
  *
- * A gradient takes a physical direction — there is no `to inline-end` — so the direction is a
- * custom property set once per case: toward the photograph's side, and mirrored under `:dir(rtl)`,
- * which is the package's rule for a pattern that must follow the reading direction. Set on the
- * photograph rather than the section, because a container query styles what is inside the
- * container and never the container itself.
+ * Under the words inside their own stacking context — the column is lifted over the photograph — so
+ * it is always behind them and always over the photograph. Toward the photograph: across from the
+ * fold, mirrored for a photograph at the start and under `:dir(rtl)`, and downward on a phone, where
+ * the words are at the top across the whole width. A gradient takes a physical direction — there is
+ * no `to inline-end` — so the direction is a custom property set once per case, the package's rule for
+ * a pattern that must follow the reading direction.
  *
  * The words need no rule to change sides: the photograph is out of flow behind them, so the row
  * `mediaPosition` sets holds the words alone, at the start or, reversed, at the end.
  */
-:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media::after {
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+  --dds-imagebanner-shade-fade: var(--space-section-default);
+  /* The column's own inset, which the words end inside: space.inset.card, and space.inset.2xl from
+     64rem, where the column is given more room. The shade holds full strength to there. */
+  --dds-imagebanner-words-inset: var(--space-inset-card);
+  position: relative;
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+    --dds-imagebanner-words-inset: var(--space-inset-2xl);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content::before {
   background-image: linear-gradient(
-    var(--dds-imagebanner-scrim-toward, to bottom),
+    var(--dds-imagebanner-shade-toward, to bottom),
     var(--color-bg-overlay),
-    var(--color-bg-overlay) 60%,
-    var(--color-bg-overlay-subtle) 80%,
+    var(--color-bg-overlay) calc(100% - var(--dds-imagebanner-shade-fade) - var(--dds-imagebanner-words-inset)),
     transparent
   );
   content: '';
-  inset: 0;
+  inset: 0 0 calc(-1 * var(--dds-imagebanner-shade-fade));
   pointer-events: none;
   position: absolute;
+  z-index: -1;
 }
 
 @container (min-width: 48rem) {
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"] .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to right;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content::before {
+    inset-block-end: 0;
+    inset-inline-end: calc(-1 * var(--dds-imagebanner-shade-fade));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__content::before {
+    inset-inline-end: 0;
+    inset-inline-start: calc(-1 * var(--dds-imagebanner-shade-fade));
   }
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to left;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"] .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to right;
   }
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"]:dir(rtl) .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to left;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to left;
   }
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"]:dir(rtl) .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to right;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"]:dir(rtl) .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"]:dir(rtl) .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to right;
   }
 }
 
 /*
- * `parallax`: the photograph drifts against the scroll as the card passes through the view — the
- * reference design's ParallaxBanner, folded in here as an option on the split and cover cards.
+ * `stackOnPhone`: below the fold the cover card stacks, as a split card does.
  *
- * The photograph is drawn taller than its frame by the drift, half above and half below, so the
- * movement never shows an edge at either end; the frame clips it. The image itself is the thing
- * that moves, so the frame keeps its size and the card its layout.
- *
- * Scroll-driven, the way LogoColumns moves its wall: the frame names a view timeline and the image
- * runs down it from half the drift above centre to half below, over the whole pass (`cover`), so as
- * the page carries the card up the photograph falls behind a little and reads as further away.
- * Linear, because the scroll is the easing. The card and the frame clip with `overflow: clip`, not
- * `hidden`: `hidden` makes a box a scroll container, and a view timeline measured against one that
- * never scrolls stands still.
- *
- * A browser with no scroll timeline, and a reader who asked for less motion, get the photograph
- * still and centred, as with `parallax` off.
+ * A cover photograph is cropped to a 2.53:1 strip on a desktop and a near-square on a phone, both
+ * held to the photograph's side, and the two crops share only a third of it — so a person framed for
+ * the strip loses their head on the phone, or stands under the words. Stacked, the words stand on the
+ * card's own dark ground and need no shade, and the photograph follows them whole at the landscape
+ * shape, in flow rather than behind. From the fold it is the cover card again.
  */
-:where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
-  block-size: calc(100% + var(--motion-distance-drift));
-  margin-block-start: calc(var(--motion-distance-drift) / -2);
-  object-position: center top;
-}
-
-@keyframes dds-imagebanner-drift {
-  from {
-    translate: 0 calc(var(--motion-distance-drift) / -2);
-  }
-  to {
-    translate: 0 calc(var(--motion-distance-drift) / 2);
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-stack-on-phone] .dds-imagebanner__card {
+    min-block-size: 0;
   }
-}
 
-@supports (animation-timeline: view()) {
-  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__media {
-    view-timeline: --dds-imagebanner-frame block;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-stack-on-phone] .dds-imagebanner__media {
+    aspect-ratio: var(--aspect-landscape);
+    inset: auto;
+    position: relative;
   }
 
-  /* Only for a reader who has not asked for less motion — asked here, around the rule, rather than
-     undone after it: the drift's selector outweighs any plain reset, and a reset that loses to it
-     leaves the photograph moving for exactly the reader who asked it not to. */
-  @media (prefers-reduced-motion: no-preference) {
-    :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
-      animation: dds-imagebanner-drift linear both;
-      animation-range: cover;
-      animation-timeline: --dds-imagebanner-frame;
-    }
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-stack-on-phone] .dds-imagebanner__content::before {
+    content: none;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
-    animation: none;
-  }
-}
+/*
+ * `parallax`: the photograph drifts against the scroll as the card passes through the view — the
+ * reference design's ParallaxBanner, folded in as an option. The drift is the one every block's
+ * picture shares, in block-parallax.css: the component marks the frame and the picture is scaled
+ * and moved rather than resized.
+ *
+ * This card once drew its own, by making the photograph taller than the frame with `block-size`.
+ * A picture that sets its height inline — Next.js's Image with `fill` writes `height: 100%` on the
+ * element — beat that, so the photograph stayed the frame's height and the drift pulled its lower
+ * edge up off the card. `scale` is a property nothing sets inline, so the shared drift holds.
+ */

package/dist/components/blocks/laurel.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The reference design's laurel, the vector its Stats section draws, in one colour — shared by the
+ * blocks that frame an award with it, so an award looks the same wherever a page shows one.
+ *
+ * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
+ * branch is this one mirrored, by each block's stylesheet, so one drawing serves both sides and a
+ * right-to-left page can swap which side is mirrored without a second picture. The reference laid it
+ * at a fifth of its strength; here it takes the band's quieter ink instead, a colour role rather than
+ * an alpha, so it follows the ground the way every other quiet thing in the package does.
+ */
+export declare const LAUREL_PATHS: string[];
+/** One laurel branch, carrying the class of the block that draws it. Decoration: hidden from assistive technology and never focusable. */
+export declare function Laurel({ className, side }: {
+    className: string;
+    side: 'leading' | 'trailing';
+}): import("react").JSX.Element;

package/dist/components/blocks/laurel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The reference design's laurel, the vector its Stats section draws, in one colour — shared by the
+ * blocks that frame an award with it, so an award looks the same wherever a page shows one.
+ *
+ * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
+ * branch is this one mirrored, by each block's stylesheet, so one drawing serves both sides and a
+ * right-to-left page can swap which side is mirrored without a second picture. The reference laid it
+ * at a fifth of its strength; here it takes the band's quieter ink instead, a colour role rather than
+ * an alpha, so it follows the ground the way every other quiet thing in the package does.
+ */
+export const LAUREL_PATHS = [
+    'M20.8655 76.0151C21.3631 78.5487 22.4577 80.4673 23.4245 81.7447C23.7945 82.2337 24.145 82.6275 24.4343 82.9245C24.5003 81.0424 24.5392 77.0209 23.854 73.543C23.3836 71.2282 22.6189 69.4263 21.9723 68.1997C21.7486 67.7754 21.539 67.42 21.3608 67.1361C21.2158 67.6487 21.042 68.3446 20.8935 69.1718C20.5634 71.0111 20.3623 73.4782 20.8655 76.0151Z',
+    'M9.19518 69.4464C8.5612 69.2311 8.01354 69.0792 7.6041 68.9776C7.77674 69.5261 8.03563 70.2542 8.40971 71.0711C9.16156 72.713 10.3603 74.6729 12.1472 76.0342C13.9141 77.3864 15.8077 77.7752 17.2669 77.8239C17.9963 77.8483 18.6126 77.7873 19.0419 77.7209C18.3715 76.5307 16.6347 73.8279 14.0892 71.9349C12.4167 70.7081 10.6015 69.924 9.19518 69.4464Z',
+    'M14.1789 62.4853C14.1095 65.0056 14.7018 67.1343 15.3106 68.6265C15.5268 69.1563 15.7445 69.6045 15.9342 69.9597C16.0737 69.4242 16.2473 68.7196 16.4239 67.9038C16.8294 66.0308 17.2467 63.5892 17.309 61.2688C17.3584 58.9612 17.0322 57.019 16.6942 55.65C16.5809 55.1908 16.4663 54.7965 16.3643 54.4749C16.1414 54.8952 15.8702 55.4487 15.5956 56.1107C14.9268 57.7233 14.2444 59.9642 14.1789 62.4853Z',
+    'M6.16644 56.5363L5.92729 56.2113C4.18123 53.9739 2.10237 52.4221 0.99942 51.685C1.0448 52.2219 1.13195 52.9558 1.29599 53.7969C1.6458 55.5904 2.33816 57.834 3.68889 59.699C5.02796 61.5534 6.66938 62.5331 7.97363 63.0496C8.56984 63.2857 9.09434 63.4244 9.48448 63.5049C9.08235 62.1271 8.06278 59.1136 6.16644 56.5363Z',
+    'M12.9202 41.9556C12.9103 41.468 12.8857 41.0438 12.8578 40.6964C12.5852 41.0139 12.2554 41.4254 11.9043 41.9234C10.9787 43.2365 9.91222 45.1415 9.34811 47.5086L9.21888 48.0509C8.78948 50.2094 8.89878 52.2002 9.13088 53.6853C9.21855 54.2463 9.32345 54.7333 9.42253 55.1275C10.2101 53.5777 11.6117 50.5783 12.3444 47.5177C12.8519 45.3454 12.9491 43.3817 12.9202 41.9556Z',
+    'M4.26838 40.1575C3.16507 37.3338 1.55966 35.0449 0.658674 33.8839C0.595099 34.3962 0.53299 35.0674 0.509766 35.8425C0.454879 37.6743 0.618233 40.0556 1.46849 42.2871C2.30759 44.5064 3.60611 45.9871 4.68907 46.9107C5.12959 47.2864 5.53393 47.5694 5.85602 47.7717C5.82536 47.3041 5.77132 46.6715 5.67501 45.9295C5.46619 44.3205 5.06044 42.211 4.27156 40.1569L4.26838 40.1575Z',
+    'M12.6632 27.4606C11.6314 28.3597 10.3804 29.7129 9.40352 31.5834L9.20135 32.004C8.19489 34.0975 7.83678 36.2499 7.73379 37.8807C7.69736 38.4576 7.693 38.9667 7.70264 39.3814C7.98105 39.0479 8.31846 38.6306 8.68777 38.1462C9.68653 36.8365 10.9078 35.0512 11.829 33.1204C12.7356 31.1936 13.238 29.3215 13.5154 27.9233C13.6157 27.4178 13.6864 26.9753 13.7361 26.6158C13.4324 26.8302 13.0648 27.1106 12.6632 27.4606Z',
+    'M7.15889 23.0454L7.23043 22.5253C7.54518 19.6881 7.36017 17.0948 7.19664 15.6517C6.9244 16.0575 6.59747 16.5777 6.25738 17.1905C5.37216 18.7855 4.41002 20.986 4.07631 23.4177C3.74032 25.8399 4.108 27.8499 4.55657 29.25C4.7215 29.7648 4.89717 30.1965 5.05235 30.5349C5.64762 29.1157 6.71893 26.2445 7.15889 23.0454Z',
+    'M20.7056 14.8951C19.4372 15.269 17.7724 15.9875 16.1554 17.3693L16.021 17.4932C14.3576 18.9542 13.2217 20.7665 12.5041 22.2202C12.2403 22.7546 12.0346 23.2374 11.8812 23.6318C12.2297 23.4596 12.6507 23.2423 13.1195 22.9822C14.4495 22.2442 16.1506 21.1686 17.6705 19.808C19.177 18.446 20.3493 16.9414 21.1512 15.7693C21.4549 15.3255 21.7047 14.9307 21.8987 14.6109C21.5673 14.6707 21.1626 14.7604 20.7056 14.8951Z',
+    'M15.246 9.89451L15.3989 9.48769C16.3817 6.71545 16.8681 4.08928 17.0948 2.56556C16.7641 2.88544 16.3703 3.28963 15.9481 3.76978C14.7583 5.12276 13.3571 7.06214 12.4902 9.40367C11.6163 11.7394 11.483 13.8564 11.5665 15.3854C11.595 15.9081 11.6489 16.3613 11.7069 16.7298C11.9415 16.3768 12.2271 15.9318 12.5414 15.4103C13.3841 14.0121 14.4266 12.0747 15.246 9.89451Z',
+    'M24.236 2.86551C22.4046 4.24716 21.0854 6.09763 20.225 7.6144C19.8673 8.24502 19.5916 8.81333 19.3933 9.25894C19.765 9.11933 20.2233 8.93634 20.7396 8.70812C22.1292 8.09394 23.9267 7.15785 25.5896 5.86671C27.2408 4.56435 28.6049 3.04428 29.5633 1.84034C29.9762 1.32163 30.3123 0.863542 30.5622 0.509562C30.206 0.526204 29.7564 0.567871 29.2396 0.659382C27.8788 0.900297 26.0564 1.48555 24.236 2.86551Z',
+];
+/** One laurel branch, carrying the class of the block that draws it. Decoration: hidden from assistive technology and never focusable. */
+export function Laurel({ className, side }) {
+    return (_jsx("svg", { className: className, "data-side": side, viewBox: "0 0 32 84", fill: "none", "aria-hidden": "true", focusable: "false", children: LAUREL_PATHS.map((d) => (_jsx("path", { d: d, fill: "currentColor", stroke: "currentColor" }, d))) }));
+}

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

@@ -143,7 +143,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="strong"] .dds-logocolumns__logo {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="subtle"] {

package/dist/components/blocks/logo-columns/LogoColumns.types.d.ts

@@ -4,7 +4,7 @@ export interface LogoColumnsOwnProps {
     /**
      * `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 wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
      */
     ground?: 'page' | 'subtle' | 'strong';
     /**

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

@@ -108,7 +108,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-logorows[data-ground="strong"] .dds-logorows__logo {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-logorows[data-ground="subtle"] {

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

@@ -1,6 +1,7 @@
 import './LogoRows.css';
 import './logo-rows-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import { type LogoRowsProps } from './LogoRows.types.js';
 export type { LogoRowsProps };
 /**
@@ -17,4 +18,4 @@ export type { LogoRowsProps };
  * 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;
+export declare function LogoRows({ ground, background, title, description, link, logos, }: LogoRowsProps): import("react").JSX.Element | null;

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

@@ -4,8 +4,11 @@ import { useId } from 'react';
 import './LogoRows.css';
 import './logo-rows-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
+import { PATTERN_TONE } from '../pattern-tone.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
@@ -27,7 +30,7 @@ const SETS = 4;
  * 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, }) {
+export function LogoRows({ ground = logoRowsDefaults.ground, background, 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.
@@ -37,7 +40,7 @@ export function LogoRows({ ground = logoRowsDefaults.ground, title, description,
         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))) })] }) }));
+    return (_jsxs("section", { className: logoRowsParts.root, "data-ground": ground, "data-background": background, "aria-labelledby": titleId, children: [background ? _jsx(Background, { tone: PATTERN_TONE[ground], pattern: background, children: null }) : null, _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

@@ -4,9 +4,17 @@ 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
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, 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';
+    /**
+     * `halftone` — A field of coral dots that grow towards a soft glow at the band's foot and settle to a fine screen away from it.
+     * `aurora` — Curtains of the brand's light rising from the band's foot and swaying slowly.
+     * `mesh` — The band in the brand's reds folded into one another like a liquid — the loudest of the five, for a dark band.
+     * `grid` — Hairlines a pitch apart rising from a soft bloom at the band's foot — the quietest, and the one to reach for first.
+     * `rings` — Hairline circles spreading out from the middle of the band's foot.
+     */
+    background?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
     /** 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. */

package/dist/components/blocks/pattern-tone.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The Background tone that matches each ground, so the pattern is drawn on the ground the band paints.
+ *
+ * Shared because four blocks draw the page's one patterned band as their first layer — FeatureCards,
+ * Stats, TestimonialRow and LogoRows — and all of them have to pick the tone the same way.
+ */
+export declare const PATTERN_TONE: {
+    readonly page: "light";
+    readonly subtle: "subtle";
+    readonly strong: "dark";
+};

package/dist/components/blocks/pattern-tone.js

@@ -0,0 +1,7 @@
+/**
+ * The Background tone that matches each ground, so the pattern is drawn on the ground the band paints.
+ *
+ * Shared because four blocks draw the page's one patterned band as their first layer — FeatureCards,
+ * Stats, TestimonialRow and LogoRows — and all of them have to pick the tone the same way.
+ */
+export const PATTERN_TONE = { page: 'light', subtle: 'subtle', strong: 'dark' };

package/dist/components/blocks/product-hero/ProductHero.d.ts

@@ -33,4 +33,4 @@ export type { ProductHeroProps };
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export declare function ProductHero({ eyebrow, title, headingLevel, description, actions, image, media, backgroundImage, }: ProductHeroProps): import("react").JSX.Element;
+export declare function ProductHero({ eyebrow, title, headingLevel, description, actions, image, media, backgroundImage, shade, }: ProductHeroProps): import("react").JSX.Element;

package/dist/components/blocks/product-hero/ProductHero.js

@@ -37,11 +37,11 @@ import { productHeroDefaults, productHeroParts, } from './ProductHero.types.js';
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults.headingLevel, description, actions, image, media, backgroundImage, }) {
+export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults.headingLevel, description, actions, image, media, backgroundImage, shade = productHeroDefaults.shade, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h2' ? 'h2' : 'h1';
-    return (_jsx("section", { className: productHeroParts.root, "aria-labelledby": titleId, 
+    return (_jsx("section", { className: productHeroParts.root, "aria-labelledby": titleId, "data-shade": shade && given(backgroundImage) ? '' : undefined, 
         /* The one inline style here, and it is a value rather than a decision: which photograph,
            supplied by the page. How it is drawn — the cover fit and the position —
            is in the stylesheet, where it can be reasoned about. */

package/dist/components/blocks/product-hero/ProductHero.types.d.ts

@@ -18,10 +18,14 @@ export interface ProductHeroOwnProps {
     image?: BlockImage;
     /** A product picture in a shape the page fixes on purpose — an AspectRatio box, which keeps its ratio across the column. Prefer `image`, which keeps the picture's own shape and adapts to it. */
     media?: ReactNode;
-    /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
-    backgroundImage?: string;
 }
-export type ProductHeroProps = ProductHeroOwnProps;
+export type ProductHeroProps = ProductHeroOwnProps & ({
+    shade?: boolean;
+    backgroundImage: string;
+} | {
+    shade?: false;
+    backgroundImage?: string;
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const productHeroParts: {
     readonly root: "dds-producthero";
@@ -38,4 +42,5 @@ export declare const productHeroParts: {
 /** Generated so defaults cannot drift from the contract. */
 export declare const productHeroDefaults: {
     readonly headingLevel: "h1";
+    readonly shade: false;
 };

package/dist/components/blocks/product-hero/ProductHero.types.js

@@ -13,4 +13,4 @@ export const productHeroParts = {
     image: 'dds-producthero__image',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const productHeroDefaults = { headingLevel: 'h1' };
+export const productHeroDefaults = { headingLevel: 'h1', shade: false };