feat(ui): electric Bat-Computer redesign — cyan→magenta theme

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.
2026-06-27 20:31:48 +10:00
parent d64f528ff7
commit 03b0cf7c7f
12 changed files with 400 additions and 91 deletions
@@ -56,6 +56,14 @@ const ogImage = new URL(site.ogImage, site.url).href;
    <script is:inline src="/site.js"></script>
  </head>
  <body>
+    <!-- PRO scroll UI (CSS-only, CSP-safe): a top progress line + a page-wide
+         flowing aurora that drifts continuously and parallaxes on scroll. -->
+    <div class="scroll-progress" aria-hidden="true"></div>
+    <div class="site-bg" aria-hidden="true">
+      <img class="site-bg__img site-bg__img--dark" src="/batcore-dark.webp" alt="" decoding="async" />
+      <img class="site-bg__img site-bg__img--light" src="/batcore-light.webp" alt="" decoding="async" />
+      <div class="site-bg__scrim"></div>
+    </div>
    <a class="skip-link" href="#main">Skip to content</a>
    <Nav />
    <main id="main">