feat(list): refine empty-list CTA placeholder banners

Polishes the empty-state banners shown on the Lists page (Smart Lists /
My Lists) so they read as intentional promo cards rather than cramped
text:

- Smooth the artwork-to-background blend. The overlay gradient and image
  mask both gained eased multi-stop ramps (in both themes), removing the
  hard shoulder where the image met the flat background.
- Switch the banner CTA to the new `outline` button style with a
  purple-600 stroke and readable foreground text, replacing the very
  bright filled purple.
- Give the copy breathing room on the inline-start edge and widen the
  CTA button's inline padding.
- Break the placeholder copy across two rows (first two short sentences,
  then the rest), with a single-line fallback for locales without ". "
  sentence breaks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 2 people

projects/client/src/lib/sections/lists/components/cta/_internal/CtaButton.svelte

@@ -44,15 +44,23 @@
 </script>
 
 <trakt-cta-button>
-  <Button {href} {size} {icon} variant="primary" style="flat" {...buttonProps}>
+  <Button {href} {size} {icon} variant="primary" style="outline" {...buttonProps}>
     {intl.cta.text({ cta })}
   </Button>
 </trakt-cta-button>
 
 <style>
   trakt-cta-button {
+    --color-outline-stroke: var(--purple-600);
+    --color-outline-text: var(--color-foreground);
+
     :global(.trakt-button) {
       flex-direction: row-reverse;
     }
+
+    /* Extra breathing room on the inline edges (2 increments up from small) */
+    :global(.trakt-button[data-size="small"]) {
+      padding-inline: var(--ni-20);
+    }
   }
 </style>

projects/client/src/lib/sections/lists/components/cta/_internal/CtaContent.svelte

@@ -115,7 +115,13 @@
 
       object-fit: cover;
 
-      mask: linear-gradient(var(--cta-mask-dir), transparent 0%, black 30%);
+      mask: linear-gradient(
+        var(--cta-mask-dir),
+        transparent 0%,
+        rgba(0, 0, 0, 0.2) 30%,
+        rgba(0, 0, 0, 0.6) 55%,
+        black 85%
+      );
     }
   }
 </style>

projects/client/src/lib/sections/lists/components/cta/_internal/PlaceholderItem.svelte

@@ -18,6 +18,22 @@
 
   const defaultVariant = $derived(useCtaCardVariant(cta));
   const { cover } = $derived(usePlaceholderCover(cta));
+
+  // Keep the first two (short) sentences on one row and the remainder on the
+  // next. Locales that don't use ". " sentence breaks fall back to one line.
+  const text = $derived.by(() => {
+    const copy = intl.text({ cta });
+    const sentences = copy.split(/(?<=\.)\s+/);
+
+    if (sentences.length < 3) {
+      return copy;
+    }
+
+    const firstRow = sentences.slice(0, 2).join(" ");
+    const secondRow = sentences.slice(2).join(" ");
+
+    return `${firstRow}\n${secondRow}`;
+  });
 </script>
 
 {#snippet buttonIcon()}
@@ -32,7 +48,7 @@
   <div class="trakt-cta-placeholder">
     <div class="trakt-cta-description">
       <div class="trakt-cta-list-text">
-        <p>{intl.text({ cta })}</p>
+        <p>{text}</p>
       </div>
 
       <CtaButton {cta} {intl} icon={buttonIcon} size="small" />
@@ -51,6 +67,12 @@
     height: 100%;
 
     gap: var(--gap-m);
+
+    padding-inline-start: var(--gap-xl);
+
+    @include for-mobile {
+      padding-inline-start: 0;
+    }
   }
 
   .trakt-cta-description {
@@ -84,6 +106,10 @@
     max-width: var(--ni-520);
     gap: var(--gap-m);
 
+    p {
+      white-space: pre-line;
+    }
+
     :global(svg) {
       width: var(--ni-80);
       height: var(--ni-80);

projects/client/src/style/theme/modes.scss

@@ -57,8 +57,10 @@
    */
   --color-cta-background-gradient: linear-gradient(
     260deg,
-    color-mix(in srgb, var(--shade-10) 60%, transparent) 0%,
-    var(--shade-10) 65%
+    color-mix(in srgb, var(--shade-10) 45%, transparent) 0%,
+    color-mix(in srgb, var(--shade-10) 68%, transparent) 40%,
+    color-mix(in srgb, var(--shade-10) 88%, transparent) 72%,
+    var(--shade-10) 100%
   );
 
   /*
@@ -497,8 +499,10 @@
    */
   --color-cta-background-gradient: linear-gradient(
     260deg,
-    color-mix(in srgb, var(--shade-900) 60%, transparent) 0%,
-    var(--shade-900) 65%
+    color-mix(in srgb, var(--shade-900) 45%, transparent) 0%,
+    color-mix(in srgb, var(--shade-900) 68%, transparent) 40%,
+    color-mix(in srgb, var(--shade-900) 88%, transparent) 72%,
+    var(--shade-900) 100%
   );
 
   /*