@@ -95,17 +103,19 @@ export function MakeDefaultContent({ advance, updateSystemValue }) {
/>
-
+
-
- {skipButtonMounted && (
-
);
diff --git a/special-pages/pages/onboarding/app/v4/components/MakeDefaultContent.module.css b/special-pages/pages/onboarding/app/v4/components/MakeDefaultContent.module.css
index 8e7b6051b2..c177d99804 100644
--- a/special-pages/pages/onboarding/app/v4/components/MakeDefaultContent.module.css
+++ b/special-pages/pages/onboarding/app/v4/components/MakeDefaultContent.module.css
@@ -4,6 +4,7 @@
.titleContainer {
position: relative;
+ align-self: stretch;
}
.title {
@@ -22,6 +23,15 @@
}
}
+.content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-self: stretch;
+ gap: var(--sp-8); /* 32px — match Container gap */
+ animation: stagger-fade-in 267ms cubic-bezier(0.66, 0, 0.34, 1) var(--stagger-delay, 650ms) backwards;
+}
+
.actions {
position: relative;
display: flex;
@@ -38,3 +48,14 @@
.skipButton {
flex: 1;
}
+
+@keyframes stagger-fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .content {
+ animation: none;
+ }
+}
diff --git a/special-pages/pages/onboarding/app/v4/components/SingleStep.js b/special-pages/pages/onboarding/app/v4/components/SingleStep.js
index 4d968e5c27..0568d581a1 100644
--- a/special-pages/pages/onboarding/app/v4/components/SingleStep.js
+++ b/special-pages/pages/onboarding/app/v4/components/SingleStep.js
@@ -8,6 +8,9 @@ import styles from './SingleStep.module.css';
/** @type {string|null} */
const bubbleWidthOverride = new URLSearchParams(window.location.search).get('bubbleWidth');
+/** @type {string|null} */
+const bubbleFadeInDelayOverride = new URLSearchParams(window.location.search).get('bubbleFadeInDelay');
+
/**
* Main layout component for v4 steps.
* Steps with bubbles use absolute positioning; the layout measures bubble heights.
@@ -67,6 +70,16 @@ export function SingleStep() {
exiting={globalState.exiting}
onExitComplete={topBubble ? undefined : advance}
progress={showProgress && !topBubble ? progress : undefined}
+ fadeInDelay={
+ topBubble
+ ? (() => {
+ const defaultTopDelay = 400; // Default fade-in delay from CSS
+ const defaultOffset = 250; // Default 250ms offset between top and bottom
+ const offset = bubbleFadeInDelayOverride ? Number.parseInt(bubbleFadeInDelayOverride, 10) : defaultOffset;
+ return defaultTopDelay + (Number.isNaN(offset) ? defaultOffset : offset);
+ })()
+ : undefined
+ }
>
{bottomBubble?.content}
diff --git a/special-pages/pages/onboarding/app/v4/components/StepHeader.module.css b/special-pages/pages/onboarding/app/v4/components/StepHeader.module.css
index edeb99a6f5..b7d1696e0d 100644
--- a/special-pages/pages/onboarding/app/v4/components/StepHeader.module.css
+++ b/special-pages/pages/onboarding/app/v4/components/StepHeader.module.css
@@ -16,7 +16,7 @@
font-size: var(--sp-6); /* 24px */
font-weight: 700;
line-height: var(--sp-7); /* 28px */
- text-align: center;
+ text-align: left;
white-space: pre-line;
color: var(--ds-text-primary);
margin: 0;
@@ -29,7 +29,7 @@
font-size: calc(18 * var(--px-in-rem));
font-weight: 400;
line-height: calc(22 * var(--px-in-rem));
- text-align: center;
+ text-align: left;
white-space: pre-line;
color: var(--ds-text-primary);
margin: 0;
diff --git a/special-pages/pages/onboarding/app/v4/components/Title.module.css b/special-pages/pages/onboarding/app/v4/components/Title.module.css
index 0028cdf121..aae9ce8e65 100644
--- a/special-pages/pages/onboarding/app/v4/components/Title.module.css
+++ b/special-pages/pages/onboarding/app/v4/components/Title.module.css
@@ -3,7 +3,7 @@
font-size: var(--sp-6); /* 24px */
font-weight: 700;
line-height: var(--sp-7); /* 28px */
- text-align: center;
+ text-align: left;
color: var(--ds-text-primary);
word-wrap: break-word;
text-box-trim: trim-both;
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-dark-darwin.png
index c88359512c..36127e179a 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-light-darwin.png
index fdf28fd271..2cf2a243a5 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-macos-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-dark-darwin.png
index cf9bfed610..a30ac7d0b2 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-light-darwin.png
index c422ca501c..a9370674c6 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-2-getStarted-onboarding-screenshots-windows-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-dark-darwin.png
index 067c9c8519..8e3bc067fb 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-light-darwin.png
index 79d5767361..9eedef701f 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-macos-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-dark-darwin.png
index 19456fe0bf..ba2a18f458 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-light-darwin.png
index 287c2ddade..594049307c 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-3-makeDefaultSingle-onboarding-screenshots-windows-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-dark-darwin.png
index 021b779554..6c90816bdf 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-light-darwin.png
index bb48c02dfe..4d1c9a4a82 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-macos-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-dark-darwin.png
index 2654e69979..9e76ad946b 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-light-darwin.png
index 563475c208..82742fe0d9 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-4-systemSettings-onboarding-screenshots-windows-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-dark-darwin.png
index a83d2db669..3da16bbe51 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-light-darwin.png
index 284182a750..fc269dd03f 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-macos-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-dark-darwin.png
index e68e834bb9..7b286b7724 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-light-darwin.png
index 4ab373c676..cb6af0c83e 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-5-duckPlayerSingle-onboarding-screenshots-windows-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-dark-darwin.png
index 9b274d3f0b..85d647bf5b 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-light-darwin.png
index a90c939a2b..d789125131 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-macos-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-dark-darwin.png
index a23e81ba9d..b2a605f578 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-light-darwin.png
index d4cbfbe7c0..4e367ab966 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-6-customize-onboarding-screenshots-windows-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-dark-darwin.png
index 71d9a7ad0c..4dfe95529c 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-light-darwin.png
index 0552235df6..9f57430ca4 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-macos-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-dark-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-dark-darwin.png
index abc7a1d0d2..cc93820232 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-dark-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-dark-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-light-darwin.png b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-light-darwin.png
index 9aac6e41f9..26a3303803 100644
Binary files a/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-light-darwin.png and b/special-pages/pages/onboarding/integration-tests/onboarding.screenshots.spec.js-snapshots/v4-7-addressBarMode-onboarding-screenshots-windows-light-darwin.png differ
diff --git a/special-pages/pages/onboarding/integration-tests/onboarding.v4.spec.js b/special-pages/pages/onboarding/integration-tests/onboarding.v4.spec.js
index 6826537c87..79c9b4f34b 100644
--- a/special-pages/pages/onboarding/integration-tests/onboarding.v4.spec.js
+++ b/special-pages/pages/onboarding/integration-tests/onboarding.v4.spec.js
@@ -238,7 +238,7 @@ test.describe('onboarding v4', () => {
// Simulate disabled video ending → reducer plays enabled video (toWithDuckPlayer)
await disabledVideo.dispatchEvent('ended');
await expect(enabledVideo).toBeVisible();
- await expect(disabledVideo).not.toBeVisible();
+ await expect(disabledVideo).toHaveCSS('opacity', '0');
await expect(page.getByRole('button', { name: 'See Without Duck Player' })).toBeVisible();
// Simulate enabled video ending → withDuckPlayer