From ccb37f721ae01e93b11592142b69f70aae61ab60 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 18 Sep 2026 13:01:59 +0000
Subject: [PATCH] Fill the hero badge so the grid stops crossing it

The pill on a gridded hero is Badge variant="brand", which fills at
bg-brand-500/10, and the hero behind it draws a 56px lattice. A 1px
line read straight through the pill and cut it in half.

Both colour modes carry a grid, from two different components:
HeroGrid in light, hero-beam__grid inside HeroBeam in dark. What
differs is how much of it shows. The line sits at a far lower contrast
against near-black than against white, so in dark mode it was close to
invisible before it ever reached the pill.

The fix mixes the same 10% of the brand into the section's own ground,
which the hero paints as bg-background in both modes. That gives the
colour the pill already renders as, with nothing left to see through,
and it reads the brand and background tokens, so one rule covers all
eight colour themes and both modes with no second value to keep in
step. Checked on the built pages: eight distinct pill colours across
the eight themes, in both modes.

In sRGB, not OKLCH. --color-background in light is oklch(100% 0 0),
whose hue is powerless, so mixing toward it in OKLCH pulls the hue away
from the brand and the pill comes out the wrong colour. sRGB is also
what the browser composites the translucent fill in, so the result
lands on the pill's current colour.

Scoped by showHeroHalo, which already gates both grid layers, so it
names exactly the heroes that need this. Verified against the built
HTML in both modes: /about/, /blog/, /contact/ and /projects/ carry it;
the home and components heroes draw no grid and are untouched, as are
the badges elsewhere that use the same variant away from a grid.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
---
 src/components/hero/Hero.astro | 35 +++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/hero/Hero.astro b/src/components/hero/Hero.astro
index 78e6cdc06..68cf76d64 100644
--- a/src/components/hero/Hero.astro
+++ b/src/components/hero/Hero.astro
@@ -74,6 +74,10 @@ const sectionClasses = cn(
   // Floored bottom slot (e.g. the homepage tech-stack marquee): flex column so the
   // slot floats to the floor with a guaranteed minimum gap above it.
   isFlooredBottom && 'flex flex-col gap-[var(--hero-floor-gap,4rem)]',
+  // Marks the heroes that draw a grid. `showHeroHalo` gates both grid layers
+  // below, so it already names exactly the heroes whose badge needs an opaque
+  // fill; the rule is at the foot of this file.
+  showHeroHalo && 'hero-gridded',
   className
 );
 
@@ -150,7 +154,7 @@ const gridClasses = cn(
     <div class={cn(contentClasses, 'order-1 lg:order-none animate-hero-stagger')}>
       {/* Badge Slot */}
       {hasBadgeSlot && (
-        <div class="mb-[var(--space-heading-gap)]">
+        <div class="hero-badge-slot mb-[var(--space-heading-gap)]">
           <slot name="badge" />
         </div>
       )}
@@ -216,6 +220,35 @@ const gridClasses = cn(
 </section>
 
 <style>
+  /* The badge on a gridded hero, filled rather than tinted.
+
+     `Badge variant="brand"` fills at `bg-brand-500/10`, and the hero behind it
+     draws a 56px lattice — `HeroGrid` in light mode, `hero-beam__grid` in dark
+     — so a 1px line reads straight through the pill and cuts it in half.
+
+     Mixing the same 10% of the brand into the section's own ground gives the
+     colour the pill already renders as, with nothing left to see through. It
+     reads the brand and the background token, so one rule covers all eight
+     colour themes and both modes with no second value to keep in step.
+
+     In sRGB, not OKLCH. `--color-background` in light mode is `oklch(100% 0 0)`,
+     whose hue is powerless, so mixing toward it in OKLCH interpolates the hue
+     away from the brand and the pill comes out the wrong colour. sRGB is also
+     what the browser composites the translucent fill in, so this lands on the
+     colour the pill has today.
+
+     Dark mode gets it too. The line there sits at a far lower contrast against
+     its ground than in light, so it was close to invisible to begin with and
+     this changes nothing you can see — it keeps one rule for both rather than
+     two that can drift.
+
+     Scoped to the badge slot's own child: every hero badge in the theme is a
+     brand-variant pill. A badge of another variant slotted here would be
+     repainted brand, and would need the rule narrowed. */
+  .hero-gridded .hero-badge-slot > :global(*) {
+    background-color: color-mix(in srgb, var(--color-brand-500) 10%, var(--color-background));
+  }
+
   /* Desktop only: hide on landscape mobile (phones max out ~430px tall) */
   .scroll-indicator-wrapper {
     display: none;