@deriv-com/dds-marketing 1.1.3 → 1.2.0

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 };

package/dist/components/blocks/product-hero/product-hero-impl.css

@@ -383,3 +383,57 @@
     padding-block: var(--space-section-compact);
   }
 }
+
+/*
+ * `shade`: a shade behind the words, for a bright photograph.
+ *
+ * The photograph is shown as it is, and a bright one — the daylight sky the brand's heroes ask for —
+ * leaves the description and the actions below AA. Darkening the whole photograph fixes the number
+ * and loses the day. So the shade is drawn from the words themselves: a box of color.bg.overlay under
+ * the text and another under the actions, each reaching space.inset.2xl past the words and blurred by
+ * space.inset.xl, so it is full strength under every word and fades to clear in the margin round them.
+ * It follows the words wherever they sit — at the start on a phone, centred from the fold — and leaves
+ * the rest of the photograph its light.
+ *
+ * The two boxes meet rather than overlap: the text's runs down across the step to the actions, the
+ * actions' starts at their top edge. Overlapping, the two layers of shade doubled into a darker band
+ * between the words and the buttons; meeting, their blurred edges add back up to the one strength.
+ * A blur rather than a gradient because a gradient fills a box to its edge, and the edge then shows.
+ *
+ * Under the words, inside their own stacking context, so it can never be drawn over a word or a
+ * button.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] :is(.dds-producthero__text, .dds-producthero__actions) {
+  isolation: isolate;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] :is(.dds-producthero__text, .dds-producthero__actions)::before {
+  background-color: var(--color-bg-overlay);
+  content: '';
+  filter: blur(var(--space-inset-xl));
+  inset: calc(-1 * var(--space-inset-2xl));
+  pointer-events: none;
+  position: absolute;
+  z-index: -1;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] .dds-producthero__text:has(+ .dds-producthero__actions)::before {
+  inset-block-end: calc(-1 * var(--space-heading-description-actions));
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] .dds-producthero__actions::before {
+  inset-block-start: 0;
+}
+
+/*
+ * From the fold, where the words are centred, the text's box is the band's whole width while its
+ * balanced lines take much less of it, so a shade the box's width was a veil across the band. It is
+ * held to size.heading-group.max — the width a centred title and its line may run as a block — and
+ * the margin round that, centred with the words.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero[data-shade] .dds-producthero__text::before {
+    inset-inline: max(calc(-1 * var(--space-inset-2xl)), calc(50% - var(--size-heading-group-max) / 2 - var(--space-inset-2xl)));
+  }
+}

package/dist/components/blocks/resource-banner/ResourceBanner.css

@@ -91,7 +91,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="strong"] .dds-resourcebanner__panel {
-  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-resourcebanner[data-ground="subtle"] {

package/dist/components/blocks/scene-scroll/SceneScroll.css

@@ -68,7 +68,7 @@
   max-inline-size: var(--size-measure-description);
 }
 
-:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
   display: flex;
   position: relative;
   padding-block-end: var(--space-section-default);

package/dist/components/blocks/scene-scroll/SceneScroll.d.ts

@@ -24,13 +24,14 @@ export type { SceneScrollProps };
  * translate and keep in step. The second scene's title sits one level under it, as the second half
  * of the section the first one names.
  *
- * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
- * colour running black to white with the scroll: a colour that changes with the photograph has to
- * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
- * any photograph at every frame, a pale one included.
+ * The words sit straight on the photographs, as the reference's do, with nothing laid between: each
+ * scene names its ink — near-black over a daylight photograph, white over a night one — and the
+ * scene carries it as `data-ink`, so the stylesheet sets it. Each scene's words fade as a whole, so
+ * the two inks are never drawn over each other; what the reference ran as one colour interpolating
+ * with the scroll is here two sets of words, each in its own ink, one giving way to the other.
  *
  * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
  * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
  * make it — on these words it would fight the scrub. The change-over is this block's entrance.
  */
-export declare function SceneScroll({ first, second, link, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;
+export declare function SceneScroll({ first, second, action, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;

package/dist/components/blocks/scene-scroll/SceneScroll.js

@@ -29,26 +29,27 @@ const under = { h1: 'h2', h2: 'h3' };
  * translate and keep in step. The second scene's title sits one level under it, as the second half
  * of the section the first one names.
  *
- * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
- * colour running black to white with the scroll: a colour that changes with the photograph has to
- * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
- * any photograph at every frame, a pale one included.
+ * The words sit straight on the photographs, as the reference's do, with nothing laid between: each
+ * scene names its ink — near-black over a daylight photograph, white over a night one — and the
+ * scene carries it as `data-ink`, so the stylesheet sets it. Each scene's words fade as a whole, so
+ * the two inks are never drawn over each other; what the reference ran as one colour interpolating
+ * with the scroll is here two sets of words, each in its own ink, one giving way to the other.
  *
  * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
  * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
  * make it — on these words it would fight the scrub. The change-over is this block's entrance.
  */
-export function SceneScroll({ first, second, link, headingLevel = sceneScrollDefaults.headingLevel, }) {
+export function SceneScroll({ first, second, action, headingLevel = sceneScrollDefaults.headingLevel, }) {
     const titleId = useId();
     // Both scenes are required, but a record from a feed or an editor is not typed: one that never
     // arrived draws nothing rather than taking the page down, and a section with half its change-over
     // missing is not the section, so neither scene is drawn alone.
     if (!first || !second)
         return null;
-    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), link ? _jsx("div", { className: sceneScrollParts.link, children: link }) : null] }) }));
+    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), action ? _jsx("div", { className: sceneScrollParts.action, children: action }) : null] }) }));
 }
 function Scene({ which, scene, level, titleId, eager = false }) {
     const Title = level;
     const { image } = scene;
-    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
+    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, "data-ink": scene.ink ?? 'light', children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
 }

package/dist/components/blocks/scene-scroll/SceneScroll.types.d.ts

@@ -6,12 +6,12 @@ export interface SceneScrollOwnProps {
      * `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
      */
     headingLevel?: 'h2' | 'h1';
-    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give the photograph's width and height; `alt` empty unless it shows something the words do not. */
+    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give its `ink` — `dark` over a light photograph, `light` over a dark one — and the photograph's width and height; `alt` empty unless it shows something the words do not. */
     first: SceneScrollScene;
-    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. */
+    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. Its `ink` is its own, so a daylight first scene in dark words can change over to a night one in white. */
     second: SceneScrollScene;
-    /** A way on for the reader who wants more — "See trading hours", "Learn more". A standalone Link under the words, and it stays put through the change-over: it belongs to the section rather than to either scene, so it never fades while the reader is reaching for it. */
-    link?: ReactNode;
+    /** One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. It belongs to the section rather than to either scene, so it holds still through the change-over and never fades while the reader is reaching for it. A primary Button, or a standalone Link at its brand tone: either reads over both photographs, where a Link taking the ink around it would take the band's white over a light photograph. */
+    action?: ReactNode;
 }
 export type SceneScrollProps = SceneScrollOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -24,7 +24,7 @@ export declare const sceneScrollParts: {
     readonly content: "dds-scenescroll__content";
     readonly title: "dds-scenescroll__title";
     readonly description: "dds-scenescroll__description";
-    readonly link: "dds-scenescroll__link";
+    readonly action: "dds-scenescroll__action";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const sceneScrollDefaults: {

package/dist/components/blocks/scene-scroll/SceneScroll.types.js

@@ -9,7 +9,7 @@ export const sceneScrollParts = {
     content: 'dds-scenescroll__content',
     title: 'dds-scenescroll__title',
     description: 'dds-scenescroll__description',
-    link: 'dds-scenescroll__link',
+    action: 'dds-scenescroll__action',
 };
 /** Generated so defaults cannot drift from the contract. */
 export const sceneScrollDefaults = { headingLevel: 'h2' };

package/dist/components/blocks/scene-scroll/scene-scroll-impl.css

@@ -50,23 +50,19 @@
 }
 
 /*
- * The scrim, the same over the whole scene.
+ * The words sit straight on the photograph, in the ink the scene names.
  *
- * color.bg.overlay is ImageBanner cover's scrim, held here across the whole photograph rather than
- * fading to clear: the words are centred over the scene from the fold and run its width on a phone,
- * so there is no clear side to leave. White over it keeps AA over any photograph, a pale one
- * included — a white photograph comes out a mid grey, which white words clear comfortably — so the
- * words never depend on the photograph being dark, and neither scene's words change colour.
+ * No scrim: the photograph is shown as it was taken, and the words are drawn in whichever ink it
+ * leaves room for — color.fg.on-media-light, near-black in both modes, over a light photograph such
+ * as a daylight sky, and the section's own color.fg.on-brand-strong, white, over a dark one. The
+ * photograph does not change with the theme, so neither ink does. The block cannot see the
+ * photograph, so the scene says which, and the author answers for the contrast.
  *
- * A pseudo-element of the photograph's frame, so it dissolves in with the second photograph rather
- * than being laid over the first a second time.
+ * On the scene, so its title and its line take it together, and inherited through the scene even
+ * where the scroll lays the scenes out as `display: contents`.
  */
-:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media::after {
-  background-color: var(--color-bg-overlay);
-  content: '';
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-ink="dark"] {
+  color: var(--color-fg-on-media-light);
 }
 
 /*
@@ -81,10 +77,11 @@
  *
  * Below 62rem — the reference's 992px, the same bound FeatureCards takes from it — the words are at
  * the top of the stage and start at the edge, under the room a navigation bar takes: size.bar-height
- * and the section's own step over it, about the reference's 112. From 62rem they are centred in
- * the stage, across and down — a centred title wraps to ragged lines whose edge the eye loses on a
- * narrow screen, which is the section-title rule's reason too. The group and its line are capped
- * narrower than the column, so `margin-inline: auto` centres those boxes as well as their words.
+ * and the section's own step over it, about the reference's 112. From 62rem they are centred down
+ * the stage and still start at the edge, in a column capped at the heading group's measure: the
+ * reference design's later arrangement, which leaves the far side of the photograph to its subject
+ * rather than writing over the middle of it. On either side of the bound the words start, so the
+ * eye finds the same edge on every line and a photograph composed for one width holds at the other.
  *
  * Longhand because `var()` is not permitted in a container query condition; `61.9375rem` is the last
  * width below that bound. The section declares the container, and these are rules on what is inside
@@ -97,16 +94,26 @@
   }
 }
 
-@container (min-width: 62rem) {
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
-    align-items: center;
-    margin-inline: auto;
-    text-align: center;
-  }
 
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__description {
-    margin-inline: auto;
-  }
+/*
+ * The words keep to the page's content column.
+ *
+ * They start, from 62rem as below it, so on a wide window they would otherwise sit at the page's
+ * gutter while every section around them starts at the edge of size.content.max. The photograph
+ * still fills the band edge to edge; only the words and the action are inset, by the page's gutter or
+ * by however much the window is wider than the content column on each side, whichever is more —
+ * where the column starts in ImageBanner, FeatureCards and the rest.
+ *
+ * Named once on the section, because three boxes take it: each scene and the action in the plain
+ * fallback, and the stage, which carries the insets while the scroll drives the change-over.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll {
+  --dds-scenescroll-column-inset: max(var(--space-inset-page), calc((100% - var(--size-content-max)) / 2));
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene,
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
+  padding-inline: var(--dds-scenescroll-column-inset);
 }
 
 /*
@@ -129,7 +136,7 @@
  * The section names a view timeline, and three things run down it over `contain` — the stretch in
  * which the track covers the whole window, which is exactly the stretch the stage is pinned for:
  *
- *   the second photograph, and its scrim with it, dissolves in from 20% to 80%;
+ *   the second photograph dissolves in from 20% to 80%;
  *   the first scene's words fade out from 20% to 45%;
  *   the second scene's words fade in from 55% to 80%.
  *
@@ -200,39 +207,33 @@
 }
 
 /*
- * The link sits right under the words, whichever scene's words are showing.
+ * The action sits right under the words, whichever scene's words are showing.
  *
  * It belongs to the section rather than to a scene, so it does not fade with either. While the
  * scenes change over, both scenes' words are laid into one grid area of the stage — the scenes
  * themselves step out of the way (`display: contents`), so their photographs and their words become
- * the stage's own items — and that area is as tall as the taller of the two. The link is the row
+ * the stage's own items — and that area is as tall as the taller of the two. The action is the row
  * under it, at space.heading.description-actions, the step from words to what a reader can do: under
  * the text on every screen, and still while the text changes over it.
  *
- * Below 62rem the words and the link sit at the top of the stage, under the room a navigation bar
+ * Below 62rem the words and the action sit at the top of the stage, under the room a navigation bar
  * takes; from 62rem they are centred down the stage, the empty rows above and below sharing what is
- * left. The stage carries the section's insets here, since the scenes that held them are contents.
+ * left, and start at the edge with the words on both sides of the bound. The stage carries the section's insets here, since the scenes that held them are contents.
  *
- * In the plain fallback, where the scenes stack, the link is the stage's last row, under the second
+ * In the plain fallback, where the scenes stack, the action is the stage's last row, under the second
  * scene, on the band's own ground, with its own insets.
  */
-@container (min-width: 62rem) {
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
-    justify-content: center;
-  }
-}
-
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
       grid-template-areas:
         'words'
-        'link'
+        'action'
         '.';
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: auto auto 1fr;
       padding-block: calc(var(--size-bar-height) + var(--space-section-default)) var(--space-section-default);
-      padding-inline: var(--space-inset-page);
+      padding-inline: var(--dds-scenescroll-column-inset);
     }
 
     :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
@@ -249,8 +250,8 @@
       z-index: 1;
     }
 
-    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
-      grid-area: link;
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
+      grid-area: action;
       margin-block-start: var(--space-heading-description-actions);
       padding: 0;
       z-index: 1;
@@ -265,7 +266,7 @@
         grid-template-areas:
           '.'
           'words'
-          'link'
+          'action'
           '.';
         grid-template-rows: 1fr auto auto 1fr;
         padding-block: var(--space-section-default);
@@ -273,3 +274,19 @@
     }
   }
 }
+
+/*
+ * From 62rem the words keep to half the stage.
+ *
+ * The words start at the edge and the photograph's subject is on the far side, but the heading
+ * group's measure alone is most of a laptop's width: a title in a few words ran three quarters of
+ * the way across and over the face it was meant to sit beside. Held to half the stage, or the
+ * heading group's measure where that is narrower, the title wraps in the words' own half and the
+ * other half is the subject's — the reference design's left column. Below 62rem the words run the
+ * width, at the top of a photograph whose subject is below them.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+    max-inline-size: min(var(--size-heading-group-max), 50%);
+  }
+}