CTA Footer

Features

• Focal conversion card that straddles the footer's top edge — the footer surface rises behind the card's lower half via a real layout band (no transforms or negative margins), so the card visually breaks out of the footer into the page above. Filled edge-to-edge with the brand violet gradient, layered with two radial sheens, a violet ambient shadow, and a {rounded.lg} 20px radius
• Cursor-tracked interactions on the card: a radial spotlight follows the pointer via --cft-mx/--cft-my custom properties on a ::after layer, and the whole card tilts up to ±1.4° with rAF-eased perspective rotation that settles smoothly on leave
• CTA copy stack — uppercase "Altitude Academy" eyebrow chip, 28px Sora "Elevate your tech skills" headline, supporting line, and a "Free 7-day trial" microcopy note aligned to the capsule's input text
• Fused email capsule — input and button share one glassy pill with a white :focus-within ring; the note and the aria-live error occupy the same grid slot so validation swaps them with zero layout shift
• Magnetic white "Start learning" submit — the button eases a few px toward the cursor inside its reach zone and springs back, with fake-latency "Signing up…" and a green "You are in ✓" success morph that resets after 2.5s
• Official Tabler comet logomark built at runtime and stroked with the three-stop brand gradient, recolored per theme via <linearGradient> stops driven by CSS custom properties
• Four nav columns (Product, Resources, Company, Legal) rendered from a data array with createElement/textContent — each an aria-labelled <nav> landmark
• Nav link hover paints the brand gradient onto the text and sweeps a gradient underline in with a springy overshoot transform: scaleX
• Official Tabler brand social icons (Instagram, LinkedIn, X, YouTube, GitHub) built at runtime with a calm accent-tint hover — no movement, no layout shift
• Edge-faded hairline divider between the nav grid and the bottom bar, plus a copyright line and social row that reverse into a centered column on small screens
• Skeleton loading on boot — the brand mark, four nav columns, and social row render shimmering placeholder bars via a fetchFooter fake-latency seam (~800ms), then real content rises in with a per-column stagger (is-loaded opacity/transform reveal)
• Multi-stop radial page halos behind the footer — violet/fuchsia/indigo in both themes

Accessibility

Landmarks

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

CTA heading

<section aria-labelledby="cta-title"> tying the card to its <h2>

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"

Focus indicators

Global :focus-visible ring, white ring replacement on the on-card input

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open CTA 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.