feat(ui): electric Bat-Computer redesign — cyan→magenta theme
build-and-deploy / build (push) Failing after 11m29s

Cinematic full-page backdrop: per-theme Bat-Computer board image,
scroll-panned (S→E→SE→NE) via CSS scroll-driven animation behind a
legibility scrim — replaces the grid/aura motif.

- Accent retuned royal-blue → the board's cyan→magenta; headline runs a
  cyan→magenta electric sweep; gradient primary CTA + scroll-progress line.
- Display face: self-hosted Chakra Petch (OFL) on hero + section titles.
- Skill chips reworked as circuit-node chips (glowing via + gradient hover
  outline); frosted-glass cards with a cyan→magenta hover hairline; section
  eyebrows get a gradient tick.
- Remove unused BackgroundGrid component + grid assets.

All CSS-only / zero external requests / no inline JS — strict CSP and A+
security headers preserved.
This commit is contained in:
2026-06-27 20:31:48 +10:00
parent d64f528ff7
commit 03b0cf7c7f
12 changed files with 400 additions and 91 deletions
+16
View File
@@ -25,11 +25,27 @@ const { id, eyebrow, title, index } = Astro.props;
.section__head {
margin-bottom: var(--space-6);
}
/* A short cyan→magenta tick leads each section eyebrow — board palette. */
.section__head .eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.section__head .eyebrow::before {
content: "";
width: 1.7rem;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
box-shadow: 0 0 8px var(--accent-glow);
}
.section__index {
color: var(--text-faint);
margin-right: 0.6rem;
}
.section__title {
font-family: var(--font-display);
letter-spacing: -0.01em;
margin-top: var(--space-3);
font-size: var(--step-3);
max-width: 22ch;