From efc4355b015a20fc346f3c9d985b75ae8dfd45c0 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 5 Sep 2026 08:40:54 -0700 Subject: Account cards carry identity at a glance (user feedback): the Spending card wears ⚡ + the ark mark in violet beside its label with a violet hairline across the card's crown; Savings wears the bitcoin disc in its orange with an orange crown. The tint is an inset shadow stacked with the card's own — clips to the radius, zero layout shift, so the carousel's equal-height cards stay equal. Kind-locked and single-balance wallets keep their plain label. (Same feedback proposed vertical-only navigation and one global send/receive button — parked, not obviously better than the carousel + per-account model.) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz --- src/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 53f306f..a99212d 100644 --- a/src/style.css +++ b/src/style.css @@ -156,6 +156,15 @@ input { scroll-margin-top: 12px; } .card + .card { margin-top: 16px; } /* ---- balance card ---- */ +/* Account identity at a glance: a symbol beside the label and a colored + hairline across the card's crown — spending wears lightning + the ark + mark (violet), savings the bitcoin disc (orange). Inset shadow stacks + with the card's own and clips to the radius; no layout shift. */ +.face-ico { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; flex-shrink: 0; } +.face-ico.save { color: #f7931a; } +.face-ico.spend { color: #7c3aed; } +.balance.face-spending { box-shadow: inset 0 3px 0 rgba(124, 58, 237, .55), var(--shadow); } +.balance.face-savings { box-shadow: inset 0 3px 0 rgba(247, 147, 26, .6), var(--shadow); } .balance .amt { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--mono); } .balance .amt .unit { font-size: 18px; color: var(--muted); margin-left: 6px; font-weight: 600; } .balance .usd { color: var(--muted); margin-top: 2px; } -- cgit v1.2.3