Glow Footer

Features

• Newsletter CTA row with client-side email validation, an inline aria-live error line, a fake-latency "Subscribing…" state, and a green "Subscribed ✓" success morph that resets after 2.5s
• Three-stop gradient Atheros logo built at runtime from an SVG path, recolored per theme via <linearGradient> stops driven by CSS custom properties
• Populated-first render: the four nav columns and five social links ship in static HTML and are hydrated idempotently in place from the seed data — no loading skeleton, no empty first paint
• Four nav columns (Product, Resources, Company, Legal) rendered with createElement/textContent, null/empty-guarded per column — each an aria-labelled <nav> landmark
• Nav link hover paints the brand gradient onto the text and slides a gradient underline in via transform: scaleX
• Official Tabler brand social icons (Instagram, LinkedIn, X, YouTube, GitHub) built at runtime, with an accent wash, hairline ring, and gradient stroke swap on hover
• Stateful live-status capsule — uppercase JetBrains Mono chip in role="status", tinted ring/wash/text plus a glowing dot with a breathing halo, switchable between operational/degraded/outage via the setSystemStatus() API and data-status on the footer root
• Gradient-fade hairline dividers, interpunct legal line with auto-updating year, and multi-stop radial page halos — violet/rose in light, rose/orange/amber in dark

Accessibility

Landmarks

<footer> contentinfo, one aria-labelled <nav> per column, <main> page area

Form label

Visually-hidden <label for="subscribe-email"> plus placeholder

Validation

aria-live="polite" error line referenced by aria-describedby, aria-invalid on the input

Social links

aria-label + rel="noopener" per link, decorative SVGs aria-hidden="true"

Live status

role="status" capsule — state changes are announced; label stays real text, dot and halo aria-hidden

Skeleton

Placeholder columns and tiles are aria-hidden="true" while the fetch is in flight

Focus indicators

Global :focus-visible ring, accent glow ring on the input

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Glow Footer in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the footer is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.