From 436f0d40739dcd20861ff10634ef9408389c0de4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 14 Sep 2026 17:12:07 +0000
Subject: [PATCH 1/4] Close every page on a gradient band instead of a pair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each of these surfaces carried two closing CTAs saying the same thing: a
flat block for anything below `glitch` — 1024px with a fine pointer —
and the LetterGlitch band above it, because a canvas cannot run on the
smaller screens. Visitors on a phone got the plainer of the two, and the
home page is where somebody decides whether to fork this theme.

The new band is a brand-500 to brand-900 gradient with a grid over it,
and it has no width or pointer gate, so one block now serves every
screen and the duplicate is gone. It closes the home, about and services
pages, the projects index and its paginated routes, every project page,
and every blog surface including single posts.

The light stop sits at -16%, outside the box, so the band opens an
eighth of the way down the ramp rather than at full brand-500. That is a
legibility fix for the narrow case: a phone renders the band short with
the content nearly filling it, which puts the description in the
brightest part of the gradient where a desktop's taller band puts it in
the middle.

The badge goes. It belonged to the flat block, and on a saturated field
a brand-tinted pill on brand ground is close to invisible.

Measured at the top line of each element — the lightest ground its text
touches — across all twelve colour themes, both colour modes, at 412px
and 1440px: the description holds 4.58:1 at worst against the 4.5 body
text needs, and the heading 4.14:1 against the 3:1 large text needs.

Dropping the canvas from the home page takes React with it: desktop
JavaScript there falls from 199.8 kB to 7.3 kB. Phones were already
paying nothing, since the island never hydrated below the breakpoint.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
---
 src/components/pages/views/AboutView.astro    |  25 +--
 src/components/pages/views/HomeView.astro     |  31 +---
 src/components/pages/views/ServicesView.astro |  31 +---
 src/components/patterns/CtaBand.astro         | 156 ++++++++++++++++++
 .../projects/views/ProjectsIndexView.astro    |  31 +---
 .../projects/views/ProjectsPageView.astro     |  31 +---
 src/layouts/ProjectLayout.astro               |  32 +---
 7 files changed, 174 insertions(+), 163 deletions(-)
 create mode 100644 src/components/patterns/CtaBand.astro

diff --git a/src/components/pages/views/AboutView.astro b/src/components/pages/views/AboutView.astro
index 8b77c0db7..da5fe4b20 100644
--- a/src/components/pages/views/AboutView.astro
+++ b/src/components/pages/views/AboutView.astro
@@ -21,7 +21,7 @@ import { Hero } from '@/components/hero';
 import ProjectImageSVG from '@/components/projects/ProjectImageSVG.astro';
 import TypingEffect from '@/components/ui/TypingEffect.astro';
 import TechStack from '@/components/landing/TechStack.astro';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import { t, tData, defaultLocale } from '@/i18n';
 
 interface Props {
@@ -286,26 +286,7 @@ const cta = tData<{ badge: string; heading: string; description: string; button:
 
   <!-- CTA -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background border-t border-border">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="rocket" size="sm" />
-        {cta.badge}
-      </Badge>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {cta.heading}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {cta.description}
-      </p>
-      <Button size="lg" href={GITHUB_URL} target="_blank" rel="noopener noreferrer" class="cta-btn-brand">
-        {cta.button}
-        <Icon name="arrow-right" size="sm" />
-      </Button>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {cta.heading}
       </h2>
@@ -316,7 +297,7 @@ const cta = tData<{ badge: string; heading: string; description: string; button:
         {cta.button}
         <Icon name="arrow-right" size="sm" />
       </Button>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 </PageLayout>
 
diff --git a/src/components/pages/views/HomeView.astro b/src/components/pages/views/HomeView.astro
index e1cf21a86..1c87392f4 100644
--- a/src/components/pages/views/HomeView.astro
+++ b/src/components/pages/views/HomeView.astro
@@ -18,7 +18,7 @@ import Card from '@/components/ui/data-display/Card/Card.astro';
 import ProofTile from '@/components/ui/data-display/ProofTile/ProofTile.astro';
 import Icon from '@/components/ui/primitives/Icon/Icon.astro';
 import BlogCard from '@/components/blog/BlogCard.astro';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import StackMarquee from '@/components/landing/StackMarquee.astro';
 import { getCollection } from 'astro:content';
 import siteConfig from '@/config/site.config';
@@ -474,32 +474,7 @@ const basedInDisplay = `${city ?? 'Your City'}${country ? `, ${country}` : ''}`;
 
  <!-- CTA — `secondary` so it alternates with the `background` Blog section above and the `background` Footer below. -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background-secondary border-t border-border">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="message-circle" size="sm" />
-        {cta.badge}
-      </Badge>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {cta.heading}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {cta.description}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="cta-btn-brand">
-          {cta.primary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-        <Button size="lg" variant="brand-outline" href={aboutUrl}>
-          {cta.secondary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {cta.heading}
       </h2>
@@ -516,7 +491,7 @@ const basedInDisplay = `${city ?? 'Your City'}${country ? `, ${country}` : ''}`;
           <Icon name="arrow-right" size="sm" />
         </Button>
       </div>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 
 <script>
diff --git a/src/components/pages/views/ServicesView.astro b/src/components/pages/views/ServicesView.astro
index 4be174717..11ac96b29 100644
--- a/src/components/pages/views/ServicesView.astro
+++ b/src/components/pages/views/ServicesView.astro
@@ -15,7 +15,7 @@ import Card from '@/components/ui/data-display/Card/Card.astro';
 import ProofTile from '@/components/ui/data-display/ProofTile/ProofTile.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import { Hero } from '@/components/hero';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import { t, tData, defaultLocale, localizedPath } from '@/i18n';
 
 interface Props {
@@ -318,32 +318,7 @@ const aboutUrl = localizedPath('/about', locale);
 
   <!-- CTA -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background border-t border-border">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="message-circle" size="sm" />
-        {cta.badge}
-      </Badge>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {cta.heading}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {cta.description}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="cta-btn-brand">
-          {cta.primary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-        <Button size="lg" variant="brand-outline" href={aboutUrl}>
-          {cta.secondary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {cta.heading}
       </h2>
@@ -360,7 +335,7 @@ const aboutUrl = localizedPath('/about', locale);
           <Icon name="arrow-right" size="sm" />
         </Button>
       </div>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 </PageLayout>
 
diff --git a/src/components/patterns/CtaBand.astro b/src/components/patterns/CtaBand.astro
new file mode 100644
index 000000000..8f1cc6d14
--- /dev/null
+++ b/src/components/patterns/CtaBand.astro
@@ -0,0 +1,156 @@
+---
+/**
+ * CtaBand — the block that closes a page.
+ *
+ * The ground runs brand-500 into brand-900, top to bottom, with a grid over
+ * it. One hue, so it gives depth rather than a colour change.
+ *
+ * It is not the home hero's gradient. That one runs brand-500 to black, and
+ * black has no chroma: across 62 points of lightness a band carrying it has a
+ * dead end. The hero survives that because it is a screen tall and the black
+ * end sits below the fold, so the two ends are never on screen together. A
+ * band a few hundred pixels tall shows the whole ramp at once and reads as a
+ * hole. brand-900 keeps the band in the brand's own hue at the bottom and
+ * still leaves it somewhere to travel.
+ *
+ * Top to bottom rather than on a diagonal. A diagonal puts the light end in
+ * one corner, which on a band this wide reads as a corner that has been lit.
+ * Vertical is also what lets the light stop be the brand at all: the heading
+ * sits near the top where the ground is lightest and is large and bold, which
+ * WCAG scores at 3:1, while the description sits lower on darker ground where
+ * it has the 4.5 it needs.
+ *
+ * One ground in both colour modes, on purpose. `.invert-section` remaps the
+ * foreground tokens underneath, so the colour mode shows in the page around
+ * the band rather than inside it.
+ *
+ * Nothing sits between the content and the gradient. The LetterGlitch band
+ * this replaces carried an inner glass panel, which was there to hold text off
+ * a moving canvas; nothing moves here, and two nested rounded boxes read busy.
+ *
+ * No border. The LetterGlitch band was near-black and needed an edge to
+ * separate it from a dark page. A saturated field defines its own edge.
+ *
+ * No pointer or width gate. LetterGlitch is a canvas effect, so it ran only
+ * above `glitch` (1024px and a fine pointer) and every screen below that got a
+ * second, flat CTA block saying the same thing. A gradient costs nothing, so
+ * one band serves every width and the duplicate is gone.
+ */
+interface Props {
+  /** Max width of the band wrapper. Defaults to 6xl, matching the section
+   *  containers; surfaces running full-bleed content above their CTA pass
+   *  7xl, as they did to the band this replaces. */
+  maxWidth?: '6xl' | '7xl';
+  /** Draw the grid. On by default.
+   *
+   *  Turn it off behind see-through content: the grid's lines read straight
+   *  through a translucent pill and a line crossing one cuts it in half. A
+   *  band closing on an opaque button has nothing to show through. */
+  grid?: boolean;
+  /** Extra classes for the outer wrapper. */
+  class?: string;
+}
+
+const { maxWidth = '6xl', grid = true, class: className } = Astro.props;
+const widthClass = maxWidth === '7xl' ? 'max-w-7xl' : 'max-w-6xl';
+---
+
+<div class:list={['mx-auto px-6', widthClass, className]}>
+  <div class="relative isolate">
+    <div class="cta-band invert-section relative overflow-hidden rounded-3xl">
+      {grid && <div class="cta-grid absolute inset-0" aria-hidden="true" />}
+      <div class="relative z-10 px-6 py-20 sm:py-32" data-reveal>
+        <div class="mx-auto max-w-2xl text-center">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* The light stop sits at -16%, outside the box, so the visible band starts
+     about an eighth of the way down the ramp rather than at full brand-500.
+
+     A legibility fix, and one that only surfaces on the narrow case. A phone
+     renders the band short with the content nearly filling it, so the
+     description sits in the brightest part of the gradient, where a desktop's
+     taller band puts it in the middle. At 0% the worst case fell under the
+     4.5 WCAG asks of body text.
+
+     -16% rather than further: on one hue the band has only lightness to work
+     with, so the brightness at the top is what keeps it from reading as a flat
+     slab, and every percent of head start spends some of it. */
+  .cta-band {
+    background: linear-gradient(
+      180deg,
+      var(--color-brand-500) -16%,
+      var(--color-brand-900) 100%
+    );
+  }
+
+  /* The grid — 60px squares, radial-masked so the lines fade out before they
+     reach the corners rather than stopping at them.
+
+     White at 9% rather than a brand tint: brand-500 IS the top stop here, so a
+     brand-coloured line is invisible against it. White holds across the whole
+     travel from brand-500 down to brand-900, and does so in all twelve
+     palettes because it carries no hue of its own.
+
+     1px lines on a 60px square, so the ground under any text row barely
+     moves. */
+  .cta-grid {
+    background-image:
+      linear-gradient(to right, rgb(255 255 255 / 0.09) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(255 255 255 / 0.09) 1px, transparent 1px);
+    background-size: 60px 60px;
+    -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 100%);
+    mask-image: radial-gradient(ellipse at center, #000 45%, transparent 100%);
+  }
+
+  /* The band is a saturated field, so the theme's shadow tiers — a low-opacity
+     grey wash — cannot register against its edge. Light mode gets a heavy drop
+     shadow, which is where it earns its keep: the band sits on a near-white
+     page and the shadow is what lifts it off.
+
+     Dark mode gets nothing. A glow was inherited from the LetterGlitch band,
+     on the reasoning that a dark shadow cannot show on a dark page but a glow
+     can. It can, and that is the objection — a lit halo around a card reads as
+     an effect rather than as depth. On a near-black page the band's own edge
+     is the contrast. */
+  .cta-band {
+    box-shadow:
+      0 32px 64px -12px rgb(0 0 0 / 0.55),
+      0 0 32px -4px rgb(0 0 0 / 0.25);
+  }
+  :global(html.dark) .cta-band {
+    box-shadow: none;
+  }
+
+  /* Body copy on the gradient. `invert-section` resolves
+     `.text-foreground-muted` to `--on-invert-muted`, which is pitched for a
+     near-black section and goes dim on a saturated field.
+
+     Lifted to 89%, and tinted from the active brand hue rather than a fixed
+     one, so the lift lands the same way in all twelve palettes. The token is
+     the fallback where relative colour syntax is missing — hue-correct but
+     lighter, so the text stays readable there too. This mirrors what
+     `.hero-dark-gradient` does for the same reason. */
+  .cta-band :global(.text-foreground-muted) {
+    color: var(--on-invert-secondary);
+  }
+  @supports (color: oklch(from red 50% 0.1 h)) {
+    .cta-band :global(.text-foreground-muted) {
+      color: oklch(from var(--color-brand-500) 89% 0.012 h);
+    }
+  }
+
+  /* The content column is max-w-2xl — 672px — which a large heading wants for
+     its own line breaks. The description does not: one line running the width
+     of the band under a heading half its length leaves nothing overflowing for
+     `text-balance` to work on. 34rem holds it to a two-line block. */
+  .cta-band :global(p) {
+    max-width: 34rem;
+    margin-inline: auto;
+  }
+</style>
diff --git a/src/components/projects/views/ProjectsIndexView.astro b/src/components/projects/views/ProjectsIndexView.astro
index fc6348011..262067bef 100644
--- a/src/components/projects/views/ProjectsIndexView.astro
+++ b/src/components/projects/views/ProjectsIndexView.astro
@@ -13,7 +13,7 @@ import Icon from '@/components/ui/primitives/Icon/Icon.astro';
 import Badge from '@/components/ui/data-display/Badge/Badge.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import { Hero } from '@/components/hero';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import ProjectCard from '@/components/projects/ProjectCard.astro';
 import ProjectTagList from '@/components/projects/ProjectTagList.astro';
 import Pagination from '@/components/blog/Pagination.astro';
@@ -91,32 +91,7 @@ const aboutUrl = localizedPath('/about', locale);
 
  <!-- CTA -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="message-circle" size="sm" />
-        {t('projects.ctaBadge', locale)}
-      </Badge>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {t('projects.ctaHeading', locale)}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {t('projects.ctaLead', locale)}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="cta-btn-brand">
-          {t('projects.ctaPrimary', locale)}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-        <Button size="lg" variant="brand-outline" href={aboutUrl}>
-          {t('projects.ctaSecondary', locale)}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {t('projects.ctaHeading', locale)}
       </h2>
@@ -133,6 +108,6 @@ const aboutUrl = localizedPath('/about', locale);
           <Icon name="arrow-right" size="sm" />
         </Button>
       </div>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 </PageLayout>
diff --git a/src/components/projects/views/ProjectsPageView.astro b/src/components/projects/views/ProjectsPageView.astro
index e6c27a8ea..d73c38d96 100644
--- a/src/components/projects/views/ProjectsPageView.astro
+++ b/src/components/projects/views/ProjectsPageView.astro
@@ -12,7 +12,7 @@ import Icon from '@/components/ui/primitives/Icon/Icon.astro';
 import Badge from '@/components/ui/data-display/Badge/Badge.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import { Hero } from '@/components/hero';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import ProjectCard from '@/components/projects/ProjectCard.astro';
 import ProjectTagList from '@/components/projects/ProjectTagList.astro';
 import Pagination from '@/components/blog/Pagination.astro';
@@ -99,32 +99,7 @@ const aboutUrl = localizedPath('/about', locale);
 
   <!-- CTA -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="message-circle" size="sm" />
-        {t('projects.ctaBadge', locale)}
-      </Badge>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {t('projects.ctaHeading', locale)}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {t('projects.ctaLead', locale)}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="cta-btn-brand">
-          {t('projects.ctaPrimary', locale)}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-        <Button size="lg" variant="brand-outline" href={aboutUrl}>
-          {t('projects.ctaSecondary', locale)}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {t('projects.ctaHeading', locale)}
       </h2>
@@ -141,6 +116,6 @@ const aboutUrl = localizedPath('/about', locale);
           <Icon name="arrow-right" size="sm" />
         </Button>
       </div>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 </PageLayout>
diff --git a/src/layouts/ProjectLayout.astro b/src/layouts/ProjectLayout.astro
index 702ebc07f..614b8a445 100644
--- a/src/layouts/ProjectLayout.astro
+++ b/src/layouts/ProjectLayout.astro
@@ -8,9 +8,8 @@ import Footer from '@/components/layout/Footer.astro';
 import Breadcrumbs from '@/components/seo/Breadcrumbs.astro';
 import ProjectHero from '@/components/projects/ProjectHero.astro';
 import TableOfContents from '@/components/blog/TableOfContents.astro';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import ProjectCard from '@/components/projects/ProjectCard.astro';
-import Badge from '@/components/ui/data-display/Badge/Badge.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import Icon from '@/components/ui/primitives/Icon/Icon.astro';
 import siteConfig from '@/config/site.config';
@@ -228,32 +227,7 @@ const languageAlternates = Object.fromEntries(
 
     <!-- Closing CTA -->
     <section class="relative z-10 py-[var(--space-section-md)] bg-background border-t border-border">
-      <!-- Mobile: flat section, no glitch band -->
-      <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-        <Badge variant="brand" pill class="mb-6">
-          <Icon name="message-circle" size="sm" />
-          {t('projects.ctaBadge', locale)}
-        </Badge>
-        <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-          {t('projects.closingHeading', locale)}
-        </h2>
-        <p class="text-lg text-foreground-muted mb-8 text-balance">
-          {t('projects.closingLead', locale)}
-        </p>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <Button size="lg" href={contactUrl} class="cta-btn-brand">
-            {t('projects.ctaPrimary', locale)}
-            <Icon name="arrow-right" size="sm" />
-          </Button>
-          <Button size="lg" variant="brand-outline" href={projectsHref}>
-            {t('projects.allProjects', locale)}
-            <Icon name="arrow-right" size="sm" />
-          </Button>
-        </div>
-      </div>
-
-      <!-- Desktop: LetterGlitch band with glass card -->
-      <LetterGlitchBand maxWidth="7xl">
+      <CtaBand maxWidth="7xl">
         <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
           {t('projects.closingHeading', locale)}
         </h2>
@@ -270,7 +244,7 @@ const languageAlternates = Object.fromEntries(
             <Icon name="arrow-right" size="sm" />
           </Button>
         </div>
-      </LetterGlitchBand>
+      </CtaBand>
     </section>
   </div>
 

From 3a32eda9abf12b28478cfe66cbf55a96a96e086f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 14 Sep 2026 17:12:07 +0000
Subject: [PATCH 2/4] Keep LetterGlitch on the post that documents it

The canvas now runs in one place on the demo: the end of the post that
explains how it is built. A reader there is there for the effect, so it
is the one page where it is the subject rather than decoration, and the
post's opening line stays true of what the demo shows.

Below `glitch` the canvas cannot run, so those screens keep the gradient
band and the post still closes on something. The two are a pair on this
one page only, which is a demonstration rather than an inconsistency.

BlogCta's props follow the block it renders. It used to take a class for
the phone CTA and another for the desktop band's section, because there
were two; now there is one section and one band, so it takes
`sectionClass`, `maxWidth`, and the `glitch` switch this post sets.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
---
 src/components/blog/BlogCta.astro             | 78 +++++++++++--------
 src/components/blog/views/BlogIndexView.astro |  3 +-
 src/components/blog/views/BlogPageView.astro  |  3 +-
 src/components/blog/views/BlogTagView.astro   |  3 +-
 src/layouts/BlogLayout.astro                  |  6 +-
 5 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/components/blog/BlogCta.astro b/src/components/blog/BlogCta.astro
index a550a1732..8e1f7c487 100644
--- a/src/components/blog/BlogCta.astro
+++ b/src/components/blog/BlogCta.astro
@@ -12,11 +12,12 @@
  * the same invitation wherever someone meets it; the copy is `blog.cta` in the
  * locale files, which makes changing it a content change.
  *
- * The arrangement is the one the old block used — a plain CTA on a phone, the
- * LetterGlitch band from `md` up — because that was already carrying this slot
- * on every blog page and there is no reason to move it.
+ * One band at every width. It used to be a pair — a flat CTA on a phone and
+ * the LetterGlitch band from `glitch` up — because the canvas cannot run below
+ * that breakpoint. A gradient has no such limit, so the duplicate is gone and
+ * every screen gets the same block.
  */
-import CTA from '@/components/ui/marketing/CTA/CTA.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import Icon from '@/components/ui/primitives/Icon/Icon.astro';
@@ -25,17 +26,22 @@ import { t } from '@/i18n';
 
 interface Props {
   locale: string;
-  /** Render the desktop LetterGlitch band beneath the mobile CTA. */
-  glitchBand?: boolean;
-  /** Classes for the mobile CTA element. */
-  ctaClass?: string;
-  /** Classes for the section wrapping the desktop band. */
-  bandSectionClass?: string;
-  /** Inner width of the desktop band. Matches LetterGlitchBand's own prop. */
-  bandMaxWidth?: '6xl' | '7xl';
+  /** Classes for the section wrapping the band — background, spacing. */
+  sectionClass?: string;
+  /** Inner width of the band. Matches CtaBand's own prop. */
+  maxWidth?: '6xl' | '7xl';
+  /**
+   * Swap the gradient band for the LetterGlitch canvas on desktop.
+   *
+   * Off everywhere but the post that documents the effect, which is the one
+   * page where a reader is there for it. Below `glitch` — 1024px and a fine
+   * pointer — the canvas cannot run, so those screens keep the gradient band
+   * and the page still closes on something.
+   */
+  glitch?: boolean;
 }
 
-const { locale, glitchBand = true, ctaClass, bandSectionClass, bandMaxWidth } = Astro.props;
+const { locale, sectionClass, maxWidth = '6xl', glitch = false } = Astro.props;
 
 /**
  * The repo, taken from the site's own links so a fork points at its own rather
@@ -46,27 +52,31 @@ const repoUrl =
   'https://github.com/hansmartensdev/astro-rocket';
 ---
 
-<CTA variant="default" size="md" maxWidth="lg" glow={false} data-reveal class={ctaClass}>
-  <h2 slot="heading" class="!text-4xl">{t('blog.cta.heading', locale)}</h2>
-  <p slot="description" class="!text-lg text-balance">{t('blog.cta.description', locale)}</p>
+<section class={sectionClass}>
+  <CtaBand maxWidth={maxWidth} class={glitch ? 'glitch:hidden' : undefined}>
+    <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
+      {t('blog.cta.heading', locale)}
+    </h2>
+    <p class="text-lg text-foreground-muted mb-8 text-balance">
+      {t('blog.cta.description', locale)}
+    </p>
 
-  <div class="flex justify-center">
-    <Button
-      size="lg"
-      href={repoUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="gap-2 cta-btn-brand"
-    >
-      <Icon name="github" size="sm" />
-      {t('blog.cta.button', locale)}
-    </Button>
-  </div>
-</CTA>
+    <div class="flex justify-center">
+      <Button
+        size="lg"
+        href={repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="gap-2 hero-btn-brand"
+      >
+        <Icon name="github" size="sm" />
+        {t('blog.cta.button', locale)}
+      </Button>
+    </div>
+  </CtaBand>
 
-{glitchBand && (
-  <section class={bandSectionClass}>
-    <LetterGlitchBand maxWidth={bandMaxWidth}>
+  {glitch && (
+    <LetterGlitchBand maxWidth={maxWidth}>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {t('blog.cta.heading', locale)}
       </h2>
@@ -87,5 +97,5 @@ const repoUrl =
         </Button>
       </div>
     </LetterGlitchBand>
-  </section>
-)}
+  )}
+</section>
diff --git a/src/components/blog/views/BlogIndexView.astro b/src/components/blog/views/BlogIndexView.astro
index b652804f8..e88e6b5bc 100644
--- a/src/components/blog/views/BlogIndexView.astro
+++ b/src/components/blog/views/BlogIndexView.astro
@@ -148,7 +148,6 @@ const topTags = collectTopTags(posts, BLOG_TAG_CLOUD_LIMIT);
   <!-- Closing CTA -->
   <BlogCta
     locale={locale}
-    ctaClass={['glitch:hidden', featuredPosts.length > 0 && '!bg-background-secondary'].filter(Boolean).join(' ')}
-    bandSectionClass={`hidden glitch:block relative z-10 py-[var(--space-section-md)] ${featuredPosts.length > 0 ? 'bg-background-secondary' : 'bg-background'}`}
+    sectionClass={`relative z-10 py-[var(--space-section-md)] ${featuredPosts.length > 0 ? 'bg-background-secondary' : 'bg-background'}`}
   />
 </PageLayout>
diff --git a/src/components/blog/views/BlogPageView.astro b/src/components/blog/views/BlogPageView.astro
index 4dd8b6753..756d07e62 100644
--- a/src/components/blog/views/BlogPageView.astro
+++ b/src/components/blog/views/BlogPageView.astro
@@ -110,7 +110,6 @@ const topTags = collectTopTags(posts, BLOG_TAG_CLOUD_LIMIT);
 
   <BlogCta
     locale={locale}
-    ctaClass="glitch:hidden"
-    bandSectionClass="hidden glitch:block relative z-10 py-[var(--space-section-md)] bg-background"
+    sectionClass="relative z-10 py-[var(--space-section-md)] bg-background"
   />
 </PageLayout>
diff --git a/src/components/blog/views/BlogTagView.astro b/src/components/blog/views/BlogTagView.astro
index fd47115cb..dc0aacebc 100644
--- a/src/components/blog/views/BlogTagView.astro
+++ b/src/components/blog/views/BlogTagView.astro
@@ -112,7 +112,6 @@ const countKey = posts.length === 1 ? 'blog.tagCountOne' : 'blog.tagCountOther';
 
   <BlogCta
     locale={locale}
-    ctaClass="glitch:hidden"
-    bandSectionClass="hidden glitch:block relative z-10 py-[var(--space-section-md)] bg-background"
+    sectionClass="relative z-10 py-[var(--space-section-md)] bg-background"
   />
 </PageLayout>
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 716779a0c..e05f31afd 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -284,9 +284,9 @@ const languageAlternates = Object.fromEntries(
   <!-- Closing CTA -->
   <BlogCta
     locale={locale}
-    ctaClass="glitch:hidden bg-background-secondary"
-    bandSectionClass="hidden glitch:block relative z-10 py-[var(--space-section-md)] bg-background-secondary"
-    bandMaxWidth="7xl"
+    sectionClass="relative z-10 py-[var(--space-section-md)] bg-background-secondary"
+    maxWidth="7xl"
+    glitch={slug.endsWith('letter-glitch-astro-7')}
   />
   </div>
 

From 8bf9522b0e23cc3af8981a0609073a0cdf9669b0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 14 Sep 2026 17:12:07 +0000
Subject: [PATCH 3/4] Show both closing bands on the components page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The showcase catalogues what the theme offers, so it is where somebody
choosing between the two bands will look. It now carries each as its own
entry, next to the `CTA` variants that were already there.

The LetterGlitch entry needs a stand-in. The band renders nothing below
`glitch`, so dropped into a showcase slot as-is it is an empty box on
every phone, which reads as broken rather than as deliberate. A note
takes that space and says what the constraint is — which is the thing
worth knowing when picking between this band and the gradient one.

Neither is a registry component: both are patterns, so the count stays
at 44 and the README names them alongside `Callout`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
---
 README.md                                 |  2 +-
 src/content/blog/en/newsletter-signup.mdx |  4 +-
 src/pages/components.astro                | 66 +++++++++++++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 57728f54f..b3fe094e5 100644
--- a/README.md
+++ b/README.md
@@ -682,7 +682,7 @@ Astro Rocket includes 44 components across four categories. All UI components us
 | Layout | 2 | Header (with scroll progress bar), Footer |
 | Hero | 1 | Hero section with centered/split layouts, grid pattern, and typing effect |
 
-`src/components/` also holds components built for this site's own pages — blog, landing, SEO and theme-switching pieces, the `YouTube` embed for MDX, and the `Callout` and `LetterGlitchBand` patterns. They are outside the 44 that `component-registry.json` counts.
+`src/components/` also holds components built for this site's own pages — blog, landing, SEO and theme-switching pieces, the `YouTube` embed for MDX, and the `Callout`, `CtaBand` and `LetterGlitchBand` patterns. They are outside the 44 that `component-registry.json` counts.
 
 ### Usage Example
 
diff --git a/src/content/blog/en/newsletter-signup.mdx b/src/content/blog/en/newsletter-signup.mdx
index 681fd01ec..2cc4f0b34 100644
--- a/src/content/blog/en/newsletter-signup.mdx
+++ b/src/content/blog/en/newsletter-signup.mdx
@@ -123,7 +123,7 @@ So a complete block in one tag:
 <NewsletterForm layout="stacked" size="sm" />
 ```
 
-### Inside a CTA or a LetterGlitch band
+### Inside a CTA or a band
 
 The primary button takes a light fill in dark mode, which is right on a normal page and wrong inside a dark band. Pass the theme's own brand-button class so the submit matches the actions beside it in both colour modes:
 
@@ -131,7 +131,7 @@ The primary button takes a light fill in dark mode, which is right on a normal p
 <NewsletterForm buttonClass="hero-btn-brand" />
 ```
 
-Use `cta-btn-brand` inside a `CTA` section and `hero-btn-brand` inside a `LetterGlitchBand`. Both give a brand-700 fill with white label text.
+Use `cta-btn-brand` inside a `CTA` section and `hero-btn-brand` inside a band — `CtaBand` or `LetterGlitchBand`. Both give a brand-700 fill with white label text.
 
 ## Changing the wording
 
diff --git a/src/pages/components.astro b/src/pages/components.astro
index f7b81581a..607430014 100644
--- a/src/pages/components.astro
+++ b/src/pages/components.astro
@@ -34,6 +34,8 @@ import Separator from '@/components/ui/layout/Separator/Separator.astro';
 import Icon from '@/components/ui/primitives/Icon/Icon.astro';
 // Marketing Components
 import CTA from '@/components/ui/marketing/CTA/CTA.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
+import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
 import SocialProof from '@/components/ui/marketing/SocialProof/SocialProof.astro';
 // Other Components
 import { Hero } from '@/components/hero';
@@ -845,6 +847,70 @@ import StackMarquee from '@/components/landing/StackMarquee.astro';
             </div>
           </div>
         </div>
+
+        <!-- CTA Band — the gradient pattern -->
+        <div class="component-showcase">
+          <div class="showcase-header">
+            <span class="showcase-label">CTA Band - Gradient</span>
+            <span class="showcase-hint">Brand gradient with a grid over it. Closes every page in this demo; works at any width</span>
+          </div>
+          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
+            <div class="py-10">
+              <CtaBand>
+                <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
+                  Ready to build?
+                </h2>
+                <p class="text-lg text-foreground-muted mb-8 text-balance">
+                  Clone Astro Rocket and start shipping faster.
+                </p>
+                <div class="flex justify-center">
+                  <Button size="lg" class="hero-btn-brand">
+                    <Icon name="github" size="sm" />
+                    Clone Repository
+                  </Button>
+                </div>
+              </CtaBand>
+            </div>
+          </div>
+        </div>
+
+        <!-- CTA Band — the LetterGlitch pattern -->
+        <div class="component-showcase">
+          <div class="showcase-header">
+            <span class="showcase-label">CTA Band - LetterGlitch</span>
+            <span class="showcase-hint">Animated canvas behind a glass card. Desktop only — see the note below</span>
+          </div>
+          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
+            <div class="py-10">
+              {/* The band renders nothing below `glitch` — 1024px with a fine
+                  pointer — because the canvas is built for a mouse-shaped
+                  reading distance. Without a stand-in this slot would be an
+                  empty box on every phone, which reads as broken rather than
+                  as deliberate. The note is what the slot shows instead, and
+                  it is the constraint worth knowing when choosing between
+                  this band and the gradient one above. */}
+              <p class="glitch:hidden mx-auto max-w-md px-6 text-center text-sm text-foreground-muted">
+                This band runs only at 1024px and up, with a fine pointer. On
+                this screen it renders nothing — use the gradient band above
+                where a CTA has to work at every width.
+              </p>
+              <LetterGlitchBand>
+                <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
+                  Ready to build?
+                </h2>
+                <p class="text-lg text-foreground-muted mb-8 text-balance">
+                  Clone Astro Rocket and start shipping faster.
+                </p>
+                <div class="flex justify-center">
+                  <Button size="lg" class="hero-btn-brand">
+                    <Icon name="github" size="sm" />
+                    Clone Repository
+                  </Button>
+                </div>
+              </LetterGlitchBand>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
 

From acedd660cbf39814f3e54e860582879680e943d9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 14 Sep 2026 17:47:51 +0000
Subject: [PATCH 4/4] Pair the band with a near-white primary and a brand
 secondary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The band's buttons were a brand fill and a transparent outline, and the
grid decided both. Lines read straight through anything transparent, so
the outline was cut across; and the brand fill sat close enough to the
ground's own value that it never became a surface of its own.

The primary is now the near-white pill the home hero already uses on its
own gradient, and the secondary is `.cta-btn-brand`, unchanged — an
opaque brand fill with an opaque brand hover. `.hero-btn-brand` would
look the same at rest but fades to `opacity: 0.85` on hover, which turns
the whole button translucent and shows the grid through it.

The primary's label is brand-700 rather than a near-black. brand-700 is
the step that clears 4.5:1 on a near-white fill across all twelve
palettes; brand-500 fails in ten and brand-600 still fails on emerald,
teal, cyan and sky.

Measured in all twelve palettes, both colour modes: the primary's label
holds 5.07:1 at worst and the secondary's 6.03:1, against the 4.5 body
text needs.

The secondary's fill sits at about 1.5:1 against the band behind it,
under the 3:1 a control's own edge would want. No brand step does
better — brand-800 measures 1.05 and brand-900 1.33, both worse than
brand-700 — so a border is the only thing that would carry that edge,
and the design keeps the borderless pair. The label, not the fill, is
what identifies the control here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
---
 src/components/blog/BlogCta.astro             |  2 +-
 src/components/pages/views/AboutView.astro    |  2 +-
 src/components/pages/views/HomeView.astro     |  4 +-
 src/components/pages/views/ServicesView.astro |  4 +-
 .../projects/views/ProjectsIndexView.astro    |  4 +-
 .../projects/views/ProjectsPageView.astro     |  4 +-
 src/layouts/ProjectLayout.astro               |  4 +-
 src/pages/components.astro                    |  2 +-
 src/styles/global.css                         | 40 +++++++++++++++++++
 9 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/blog/BlogCta.astro b/src/components/blog/BlogCta.astro
index 8e1f7c487..3f4631387 100644
--- a/src/components/blog/BlogCta.astro
+++ b/src/components/blog/BlogCta.astro
@@ -67,7 +67,7 @@ const repoUrl =
         href={repoUrl}
         target="_blank"
         rel="noopener noreferrer"
-        class="gap-2 hero-btn-brand"
+        class="gap-2"
       >
         <Icon name="github" size="sm" />
         {t('blog.cta.button', locale)}
diff --git a/src/components/pages/views/AboutView.astro b/src/components/pages/views/AboutView.astro
index da5fe4b20..420881de6 100644
--- a/src/components/pages/views/AboutView.astro
+++ b/src/components/pages/views/AboutView.astro
@@ -293,7 +293,7 @@ const cta = tData<{ badge: string; heading: string; description: string; button:
       <p class="text-lg text-foreground-muted mb-8 text-balance">
         {cta.description}
       </p>
-      <Button size="lg" href={GITHUB_URL} target="_blank" rel="noopener noreferrer" class="hero-btn-brand">
+      <Button size="lg" href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
         {cta.button}
         <Icon name="arrow-right" size="sm" />
       </Button>
diff --git a/src/components/pages/views/HomeView.astro b/src/components/pages/views/HomeView.astro
index 1c87392f4..48384bb9a 100644
--- a/src/components/pages/views/HomeView.astro
+++ b/src/components/pages/views/HomeView.astro
@@ -482,11 +482,11 @@ const basedInDisplay = `${city ?? 'Your City'}${country ? `, ${country}` : ''}`;
         {cta.description}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="hero-btn-brand">
+        <Button size="lg" href={contactUrl}>
           {cta.primary}
           <Icon name="arrow-right" size="sm" />
         </Button>
-        <Button size="lg" variant="outline" href={aboutUrl}>
+        <Button size="lg" variant="outline" class="cta-btn-brand" href={aboutUrl}>
           {cta.secondary}
           <Icon name="arrow-right" size="sm" />
         </Button>
diff --git a/src/components/pages/views/ServicesView.astro b/src/components/pages/views/ServicesView.astro
index 11ac96b29..cd8e3b49c 100644
--- a/src/components/pages/views/ServicesView.astro
+++ b/src/components/pages/views/ServicesView.astro
@@ -326,11 +326,11 @@ const aboutUrl = localizedPath('/about', locale);
         {cta.description}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="hero-btn-brand">
+        <Button size="lg" href={contactUrl}>
           {cta.primary}
           <Icon name="arrow-right" size="sm" />
         </Button>
-        <Button size="lg" variant="outline" href={aboutUrl}>
+        <Button size="lg" variant="outline" class="cta-btn-brand" href={aboutUrl}>
           {cta.secondary}
           <Icon name="arrow-right" size="sm" />
         </Button>
diff --git a/src/components/projects/views/ProjectsIndexView.astro b/src/components/projects/views/ProjectsIndexView.astro
index 262067bef..225e9908b 100644
--- a/src/components/projects/views/ProjectsIndexView.astro
+++ b/src/components/projects/views/ProjectsIndexView.astro
@@ -99,11 +99,11 @@ const aboutUrl = localizedPath('/about', locale);
         {t('projects.ctaLead', locale)}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="hero-btn-brand">
+        <Button size="lg" href={contactUrl}>
           {t('projects.ctaPrimary', locale)}
           <Icon name="arrow-right" size="sm" />
         </Button>
-        <Button size="lg" variant="outline" href={aboutUrl}>
+        <Button size="lg" variant="outline" class="cta-btn-brand" href={aboutUrl}>
           {t('projects.ctaSecondary', locale)}
           <Icon name="arrow-right" size="sm" />
         </Button>
diff --git a/src/components/projects/views/ProjectsPageView.astro b/src/components/projects/views/ProjectsPageView.astro
index d73c38d96..4605f4b82 100644
--- a/src/components/projects/views/ProjectsPageView.astro
+++ b/src/components/projects/views/ProjectsPageView.astro
@@ -107,11 +107,11 @@ const aboutUrl = localizedPath('/about', locale);
         {t('projects.ctaLead', locale)}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="hero-btn-brand">
+        <Button size="lg" href={contactUrl}>
           {t('projects.ctaPrimary', locale)}
           <Icon name="arrow-right" size="sm" />
         </Button>
-        <Button size="lg" variant="outline" href={aboutUrl}>
+        <Button size="lg" variant="outline" class="cta-btn-brand" href={aboutUrl}>
           {t('projects.ctaSecondary', locale)}
           <Icon name="arrow-right" size="sm" />
         </Button>
diff --git a/src/layouts/ProjectLayout.astro b/src/layouts/ProjectLayout.astro
index 614b8a445..674fa0dac 100644
--- a/src/layouts/ProjectLayout.astro
+++ b/src/layouts/ProjectLayout.astro
@@ -235,11 +235,11 @@ const languageAlternates = Object.fromEntries(
           {t('projects.closingLead', locale)}
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <Button size="lg" href={contactUrl} class="hero-btn-brand">
+          <Button size="lg" href={contactUrl}>
             {t('projects.ctaPrimary', locale)}
             <Icon name="arrow-right" size="sm" />
           </Button>
-          <Button size="lg" variant="outline" href={projectsHref}>
+          <Button size="lg" variant="outline" class="cta-btn-brand" href={projectsHref}>
             {t('projects.allProjects', locale)}
             <Icon name="arrow-right" size="sm" />
           </Button>
diff --git a/src/pages/components.astro b/src/pages/components.astro
index 607430014..5be1998d1 100644
--- a/src/pages/components.astro
+++ b/src/pages/components.astro
@@ -864,7 +864,7 @@ import StackMarquee from '@/components/landing/StackMarquee.astro';
                   Clone Astro Rocket and start shipping faster.
                 </p>
                 <div class="flex justify-center">
-                  <Button size="lg" class="hero-btn-brand">
+                  <Button size="lg">
                     <Icon name="github" size="sm" />
                     Clone Repository
                   </Button>
diff --git a/src/styles/global.css b/src/styles/global.css
index 4803fd5a0..026da7dd9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1358,6 +1358,46 @@
   background-color: oklch(47% 0.18 25);
 }
 
+/* ── The CTA band's button pair ─────────────────────────────────────────
+   The band is a saturated brand field with a grid over it, and the grid
+   decides both buttons: anything transparent lets the lines read straight
+   through it. So the pair is a near-white primary and an opaque brand
+   secondary, and neither has a see-through state — including on hover.
+
+   Primary: the near-white pill the home hero already uses on its own
+   gradient. Two rules have to be beaten for it. Button.astro paints
+   `.btn-primary` a brand fill in light mode, which on a brand field is a
+   duller patch of the same colour rather than a button; and
+   `.invert-section .btn-primary` forces a white label, which was right for
+   the brand fill it was written for and would be white-on-white here. Both
+   are answered below, with `!important` for the reason the hero's copy
+   gives: Button's own rule otherwise wins `background-color` back on hover.
+
+   The label is brand-700, not the near-black `--color-background` the pill
+   started with. brand-700 is the step that clears 4.5:1 on a near-white fill
+   in all twelve palettes: brand-500 fails in ten of them and brand-600 still
+   fails on emerald, teal, cyan and sky — the same four the tag pill had to
+   move past.
+
+   Secondary: `.cta-btn-brand`, unchanged — an opaque brand fill with an
+   opaque brand hover and no border. `.hero-btn-brand` would look the same at
+   rest but fades to `opacity: 0.85` on hover, which makes the whole button
+   translucent and shows the grid through it. */
+.cta-band.invert-section .btn-primary {
+  background-color: var(--color-foreground) !important;
+  background-image: linear-gradient(
+    180deg,
+    var(--color-foreground) 0%,
+    color-mix(in oklch, var(--color-foreground) 55%, var(--color-foreground-secondary)) 100%
+  ) !important;
+  border: 1px solid var(--color-foreground-secondary) !important;
+  color: var(--color-brand-700) !important;
+}
+.cta-band.invert-section .btn-primary:hover {
+  background-image: none !important;
+  background-color: color-mix(in oklch, var(--color-foreground) 90%, white) !important;
+}
+
 .hero-btn-learn {
   background-color: transparent !important;
   background-image: none !important;