Select service
Option 1 · Collapsing rowsImvent's idea, done our way. Style: Swiss hairline, monochrome + one accent · Components: four 64 px tactile-light rows (name, one-line includes, price), one open at a time, a "Choose" pill inside the open row, live total bar · Art: none · Motion: the row opens in place (height, 260 ms ease-brand), chevron turns 180°, chosen row takes the 2 px stroke + check · Material: top-lit light rows, flat in darkbutton[aria-expanded] + region · grid-template-rows 0fr → 1fr · closed panels inert · one primary (Continue) in the bar
Option 2 · Radio cardsStyle: monochrome + one accent · Components: four compact radio cards (name, price per unit, two include chips), a "Details" link that opens a bottom sheet with the full description and "Choose this service" · Art: none · Motion: one tap selects (dot fills, stroke draws), the sheet rises 260 ms ease-brand · Material: flat cards, the sheet liftedrole=radiogroup · roving tabindex + arrows · role=dialog sheet: focus in, trapped, Esc / scrim / ✕ close, focus returns
Option 3 · Segmented + detailStyle: iOS-calm segmented control · Components: four segments with the short names, one detail card below (price, includes, description, Choose) · Art: none · Motion: the thumb glides 260 ms; the card slides in from the side you moved toward (mirrored in Arabic) · Material: sunken track, raised thumb, white cardrole=tablist / tab / tabpanel (viewing ≠ choosing) · the chosen service keeps a check on its segment · arrow keys mirrored in RTL
Option 4 · Compare tableStyle: Swiss grid · Components: 2 × 2 comparison columns, the price in a pill, ticks and dashes for what is included, "Show all details" opens every column at once · Art: none · Motion: tap a column to choose (stroke + "Selected"); details unfold together 260 ms · Material: flat columns on hairlinesrole=radiogroup of whole-column radios · not-included = dash glyph + muted + "not included" for screen readers (never colour alone)
Option 5 · Glass stackStyle: frosted glass on the control layer over the real room · Components: four glass cards stacked like a wallet over the Aura photo, the chosen one in front and open · Art: Aura studio photo · Motion: tap a card behind, it travels to the front (FLIP, 400 ms ease-brand) and opens; the deck re-fans · Material: frost (blur 18 px, saturate 160 %) with a solid fallbackflex order + FLIP via Web Animations on translate · fan = individual scale / rotate properties · role=radiogroup