---
summary: Landing page visual polish — dual-accent token system (--accent-2, --accent-glow), animated border beam on the connect card, brighter dark mode, and a new CSS-injection guard on landing.theme.accent
breaking: false
---

# 0.6.8 — 2026-04-22

Landing page gets a visual pass: secondary accent derived from the consumer's primary, an animated conic-gradient border beam on the connect card, and warmer dark-mode surfaces. Also adds a CSS-injection safety check on `landing.theme.accent` so consumer-supplied colors can't escape the custom-property declaration context.

## Added

- **`--accent-2` secondary accent token** — auto-derived from `--accent` via `oklch(from var(--accent) l c calc(h + 30))`, with a `color-mix` fallback for engines without relative-color syntax. Powers the dual-hue hairline gradient, the second radial ambient glow, and the animated border beam.
- **`--accent-glow` token** — reusable translucent accent shadow. Stronger in dark mode (via media-query override).
- **Animated border beam on the connect card** — pure CSS: `@property --beam-angle` registers the custom property as an `<angle>` so it tweens rather than jumping, driving a rotating `conic-gradient` clipped to the outer ring via `mask-composite: exclude`. 7-second sweep, respects `prefers-reduced-motion` through the existing global rule, degrades to the static 1px border on engines without `mask-composite`. No runtime JS, no dependency — sidestepped the `border-beam` npm package (React-only, mismatched our server-rendered HTML architecture).
- **`landing-theme-accent-format` lint rule** — validates `landing.theme.accent` against CSS-context injection. Rejects values containing `; { } \ < >`, CSS comment markers, empty strings, and overlong strings (>128 chars). HTML-escaping was the wrong defense for a value interpolated into a CSS custom-property declaration; this is the real guard. Structural shape check rather than a strict color grammar, so new color spaces (`oklch`, `color-mix`, future additions) pass without rule churn.
- **Accent-colored protocol version** in the hero status strip via new `.status-value-accent` modifier.
- **Accent bar prefix on section headings** — small 3px gradient bar (accent → accent-2) before each `h2`.

## Changed

- **Dark mode surfaces lifted** — `--bg` `#08090d` → `#0a0b12`, elevated/subtle/code surfaces nudged with a faint blue undertone for better depth.
- **Ambient glow strengthened** — `--glow-strength` 0.08 → 0.10 (light) and 0.12 → 0.17 (dark). Added a second radial glow top-right using `--accent-2`.
- **Top hairline now dual-accent** — `transparent → accent → accent-2 → transparent` gradient instead of single-hue.
- **Hero heading gradient picks up accent tint** — 3-stop gradient (`accent-tinted-fg → fg → faded-fg`) retains the fade-to-ink effect while warming the top toward the accent hue.
- **Card hover shadow is now accent-tinted** — `0 8px 28px -12px var(--accent-glow)` layered over the existing `--shadow-md` for a subtle colored lift.
