# Card controls with frost freeze > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The card settings screen of an invented bank, Tidewell, in an iOS 26 language: a translucent sticky nav bar, inset grouped lists on a warm stone ground, 51×31 switches, SF-like type set in Instrument Sans. At the top sits the physical card drawn in CSS: copper gradient, engraved wave lines, a chip and contactless mark. Freezing the card does not just flip a switch; frost grows across the card from its top-right corner, six-armed crystals settle in with a stagger, and the card's print turns from cream to a deep ice-ink so it reads through the frost. Below: a monthly spending limit slider with a marker for what has already been spent, three where-it-works switches (online, ATM, abroad) and a short list of this week's declined payments with a one-tap fix. ## Reference behaviour 1. Initial state: the card is **frozen** (the hero look). Frost covers the card, four crystals are visible, the status line reads "**Frozen** since 2:41 pm. Nothing new can be charged." with a blue dot, the first row reads "Card frozen / Subscriptions and refunds still go through" and its switch is on. 2. Tap the switch, or tap the card itself: the frost retracts into the top-right corner as a shrinking circle (420ms), crystals fade and scale to 0.4, print colour returns to cream, the status line becomes "**Active.** Last used today, Corva Market, $18.40" with a green dot, and the row reads "Freeze card / Stops new purchases. Undo any time". 3. Tap again: frost grows as `circle(0% → 150% at 92% 8%)` over 720ms expo-out; crystals arrive 120ms later, staggered 0 / 90 / 160 / 220ms, each from `scale(.4) rotate(-20deg)` to rest. 4. Drag the spending-limit slider (0 to $5,000, step $100, starts at $2,400): the 28px output updates live; the sub-line reads "$1,186.40 spent since Oct 1 · $1,213.60 left"; drop below $1,186.40 and it reads "$1,186.40 spent. New purchases decline until Nov 1". At 0 the output reads "No spending". A 2×20px ink tick labelled "Spent" marks $1,186.40 on the track. 5. The three where-it-works switches toggle independently. "Payments abroad" starts off; its sub-line reads "Off. Turn on before you travel". 6. In "Declined this week", Halden Air ($412.00, Reykjavik) shows a rust tag "Payments abroad are off" and a filled button "Allow abroad for 24 hours". Tapping it turns the abroad switch on, the sub-line becomes "On until Oct 29, 2:41 pm" and the button disables to "Allowed until tomorrow, 2:41 pm". Turning the switch off by hand restores the button. 7. The second decline (Pellmore Games, $59.99, "Card was frozen") is informational only. ## Structure ``` 390 × 844 (54px status area drawn by the Lounge) ┌──────────────────────────────────────┐ │ 54 safe area (bar padding) │ │ ‹ Cards Card controls ··· │ 44 sticky glass bar ├──────────────────────────────────────┤ │ ┌──────────────────────────────────┐ │ 16 side gutter │ │ Tidewell DEBIT │ │ card 358 × 226 (1.586:1), r16 │ │ [chip] ))) │ │ │ │ ···· 2290 Valid thru│ │ │ │ NOOR HALVORSEN 08/29 │ │ │ └──────────────────────────────────┘ │ │ ● Frozen since 2:41 pm … │ status, live │ ┌ [*] Card frozen (● ) ┐ │ group r14 │ SPENDING LIMIT │ │ ┌ Per month $2,400 ┐ │ │ │ $1,186.40 spent … $1,213.60 left │ │ │ │ ━━━━━━━━|━━━━━○──────────────── │ │ 6px track, 28px thumb │ │ $0 Spent $5,000│ │ │ WHERE IT WORKS │ │ ┌ Online and in apps (● ) ┐ │ 60px cells │ │ ATM withdrawals (● ) │ │ │ └ Payments abroad ( ○) ┘ │ │ DECLINED THIS WEEK │ │ ┌ (HA) Halden Air $412.00 ┐ │ │ │ [Payments abroad are off] │ │ │ │ [Allow abroad for 24 hours] │ │ │ └ (PG) Pellmore Games $59.99 ┘ │ │ footnote │ └──────────────────────────────────────┘ ``` - `
` sticky, `padding-top: 54px`, `backdrop-filter: blur(18px) saturate(1.6)` over `rgba(239,237,232,.78)`; a 3-column grid with a back `