Modal — Card Flip

Features

• Centered hero with a Solstice-blue eyebrow, display heading, subline, and a single solid call-to-action
• One accessible dialog rendered as a two-faced payment card that reveals via the signature Card Flip
• The front is a Solstice Card face (brand mark, contactless glyph, chip, dot-masked number); the back is the dialog dressed as the card's reverse — magnetic stripe, signature strip, masked CVV
• On open the card enters front-first and holds while a holographic sheen sweeps across it, then turns rotateY(0deg)→rotateY(180deg) to the dialog back
• Front and back are two faces of one card via backface-visibility on a preserve-3d box; entrance opacity lives on an outer stack so it never flattens the 3D scene
• Modal content — signature row, title, text, actions — staggers in timed to land as the flip settles
• A persistent "Flip card" pill below the card turns it over either way at any time; tapping the front flips it too
• Closes via the × button, Not now, Add to Wallet, overlay click, or the Escape key
• Focus moves into the open dialog box and returns to the trigger on close, with a focus trap on Tab
• Responsive layout that stacks the dialog actions on small screens
• Fully respects prefers-reduced-motion

Accessibility

Dialog semantics

The dialog box carries role="dialog", aria-modal="true", and aria-labelledby pointing at its title

Decorative card front

The payment-card front (brand mark, chip, number, meta) is aria-hidden="true" — only the dialog back is announced; the accessible flip control is the labelled "Flip card" button

Hidden state

The closed dialog is aria-hidden="true" and inert; JS flips both when opening

Focus management

The dialog box (tabindex="-1") receives focus on open; focus returns to the trigger on close

Focus trap

Tab and Shift+Tab cycle within the dialog while it is open

Trigger semantics

Native <button> trigger with aria-haspopup="dialog" and an explicit aria-label

Button labels

Every button — close, flip, Not now, Add to Wallet — has an explicit aria-label; the flip label swaps between front/details

Escape hatch

Escape key, overlay click, and three buttons all dismiss the dialog

Focus indicators

Global :focus-visible outline using the --ring token

Reduced motion

prefers-reduced-motion: reduce disables all transitions and JS skips the front hold, flipping immediately

Customise it with AI

Open Modal — Card Flip in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the modal 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.