[VatsalSy]

Summary

In dark mode the gradient Talks heading on comphy-lab.org/talks was barely readable. h1.hero-title still clipped the light-theme four-stop brand gradient (#ff6b6b → #68236d → #4c6ef5 → #2d1b69) onto the real page paper (#1b1814 from the shared header shell), so the purple and indigo ends disappeared. Light mode already looks right and is unchanged (index 1440 and 390 screenshots are byte-identical before/after).

This copies comphy-lab/comphy-design-system#3 (tokens.css at 0d70847) into site/vendor/ds/tokens.css. The vendored file is byte-identical to that head. Runtime HTML ?v= fingerprints were refreshed so the new CSS is what pages load.

Individual talk pages use h1.talk-head__title (solid --fg-strong), not the hero gradient. No other gradient titles exist on those pages.

Changes

Inside :root[data-theme="dark"]:

  --hero-grad-1: #ff8a8a;
  --hero-grad-2: #d99adc;
  --hero-grad-3: #8aa0ff;
  --hero-grad-4: #9b8cff;

• .hero-title default colour is var(--hero-grad-2).
• Gradient, background-clip: text, and -webkit-text-fill-color: transparent apply only inside @supports ((-webkit-background-clip: text) or (background-clip: text)).
• Light-theme --hero-grad-* values are unchanged.

Contrast on the real dark background

Live computed --c-paper / body background in dark mode is #1b1814 (rgb(27, 24, 20)), because site/vendor/comphy-lab/header.css lifts the DS token #12100d to match comphy-lab.org. WCAG 2 relative luminance. Every sampled point of the 90deg sRGB interpolation (stops at 0%, 45%, 55%, 100%) must be ≥4.5:1.

Token	Before (on #1b1814)	After (on #1b1814)
--hero-grad-1	#ff6b6b 6.373	#ff8a8a 7.794
--hero-grad-2	#68236d 1.726 FAIL	#d99adc 8.090
--hero-grad-3	#4c6ef5 4.090 FAIL	#8aa0ff 7.203
--hero-grad-4	#2d1b69 1.240 FAIL	#9b8cff 6.391
Worst interpolated point	1.240 at t=1.00 #2d1b69 (175/201 points fail)	6.391 at t=0.99 #9b8cff (0 fail)

Same stops vs the unused DS paper token #12100d: before 6.844 / 1.854 / 4.392 / 1.332; after 8.370 / 8.688 / 7.736 / 6.864.

Live computed tokens after the change: light #ff6b6b #68236d #4c6ef5 #2d1b69 on #f3efe8; dark #ff8a8a #d99adc #8aa0ff #9b8cff on #1b1814.

Testing

• Served site/ with python3 -m http.server -d site 8000.
• Chromium screenshots of the index and singular-bursting-bubbles, light and dark, 1440 and 390, before and after.
• Index light 1440 and 390 are byte-identical. Talk light 1440/390 and talk dark 1440 are byte-identical. Talk dark 390 differed only below the title (slide/controls), not the heading.
• cd tools && uv run pytest -q -m "not slow and not export" — 123 passed, 24 deselected.
• python -m talks_build refresh-assets --check — clean.
• GitHub Actions: validate success; deploy skipped on the PR; CodeRabbit success.

Index — dark

Desktop 1440. The indigo end of Talks disappears into the paper; after it holds.

Mobile 390.

Index — light (pixel-identical)

Desktop 1440.

Mobile 390.

Talk page — no gradient title

h1.talk-head__title stays solid --fg-strong. Dark and light, desktop 1440 and mobile 390.

  

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: Repository: comphy-lab/talks/.coderabbit.yaml
• Review profile: CHILL
• Plan: Essentials
• Run ID: 3845ed1d-9c0b-44b5-96a5-f4a7db9fe901

---

📥 Commits

Reviewing files that changed from the base of the PR and between ebacd9c and 3e110ac.

---

⛔ Files ignored due to path filters (1)

• site/vendor/ds/tokens.css is excluded by !site/vendor/**

---

📒 Files selected for processing (3)

• site/index.html
• site/player/talk.template.html
• site/singular-bursting-bubbles/index.html

---

 _____________________________________________________________________________________________________________________________________
< Prototype to learn. Prototyping is a learning experience. Its value lies not in the code you produce, but in the lessons you learn. >
 -------------------------------------------------------------------------------------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}