/* =============================================================================
TANIT · WARM MINIMAL — Shared Design System (system.css)
wallet.tanit.uk · card-first borderless USD account + Visa card
-----------------------------------------------------------------------------
The ONE shared stylesheet for every screen in deliverables/tanit-redesign-v2/.
Language = "Warm Minimal": linen-light, airy, soft warm depth. Apple-Wallet
calm × the modern iOS fintech idiom — large titles, soft continuous-corner
cards, a real rising bottom-sheet motif, generous air. Restraint is the luxury.
FOUNDER LOCKS honoured here:
• The "Sign of Tanit" glyph is used BARE — as ![]()
or as a CSS mask over a
solid fill. NEVER inside a circle / disc / ring / badge / coin / seal /
medallion / container. Functional UI uses plain icon glyphs, never the
brand logo in a badge.
• Primary identity = the wordmark "Tanit" (clean, premium, confident).
Nothing sits beside the name (no tagline / ®/™ / decoration).
• Palette LOCKED: Cream #F5E6C8 · Gold (a metallic GRADIENT, never flat) ·
Ink #0A0A0C · Linen #F5F3F0. Gold is NEVER a generic button fill.
• No gamified Seal coin / mint / medallion anywhere. Confirmations are a
calm check + text.
• No "bank/banking" framing in body copy (CSS only — copy lives in screens).
PATHS: this file lives in assets/, so logo PNGs are referenced by BARE
filename here (same directory): url("tanit-mark-obsidian.png"). Screens that
link this file use the "assets/" prefix for their own ![]()
/ tags.
STRUCTURE
1. Tokens (:root) — surfaces, palette, gold/platinum, type,
spacing, radii, shadows, motion, z-index
2. Reset + base typography
3. Utilities — .shell, .sr-only, .skip, focus ring,
.gold-text, .num, .wordmark, .glyph
4. Components — nav, tab bar, buttons, account/balance card,
platinum Visa card (+ states), quick tiles,
ledger rows, forms, segmented, keypad,
bottom-sheet / modal / scrim, receipt rows,
pills/badges/trust, status/empty/skeleton/toast,
icon conventions
5. Dark theme (optional) — [data-theme="dark"] / prefers-color-scheme
6. RTL safety — logical properties throughout + flips
7. prefers-reduced-motion — full fallback pinning final states
========================================================================== */
/* =============================================================================
1 · TOKENS
========================================================================== */
:root {
/* --- Locked brand atoms --------------------------------------------------*/
--cream: #F5E6C8;
--linen: #F5F3F0; /* page base */
--ink: #0A0A0C;
/* --- Warm surface ladder — built on linen, never clinical white ----------*/
--paper: #FBFAF8; /* raised card */
--paper-2: #FFFFFF; /* highest float (sheets, modals) */
--sand: #EFEBE3; /* recessed wells, inputs, segmented track */
--sand-line: #E7E1D4; /* hairline on linen */
--sand-line-2: #DCD5C3; /* stronger hairline / grab-handle */
/* --- Gold = raking light on metal: a GRADIENT, never a flat fill ---------*/
--gold-lo: #8E6A2C; /* LIGHT: richer, saturated gold so it reads on cream */
--gold-mid: #C6993F;
--gold-hi: #ECCC7E;
--gold-spark: #F8E4A8;
--gold-grad: linear-gradient(150deg, #F2D589 0%, #DDB35E 38%, #C0913F 70%, #8E6A2C 100%);
--gold-soft: linear-gradient(135deg, #E6C06A, #C0913F);
--gold-text: #7A5612; /* AA-passing gold-family TEXT on linen + gold wash */
/* --- Platinum — the CARD METAL only (never UI chrome) --------------------*/
--plat-lo: #C7CBD0;
--plat-hi: #FCFDFE;
--plat-grad: linear-gradient(152deg, #ECEFF2 0%, var(--plat-hi) 24%, #DCE0E4 54%, var(--plat-lo) 76%, #ABB1B7 100%);
/* --- Text ladder (warm near-blacks) -------------------------------------*/
--tx-1: #16140E; /* primary */
--tx-2: #514B40; /* secondary */
--tx-3: #6E695C; /* tertiary / hints (AA >=4.5:1 on linen/sand/paper) */
--on-ink: #F6F1E6; /* warm white on ink surfaces */
--on-gold: #2A1E07; /* deep ink text/icon on gold accents */
/* --- Semantic (kept warm/calm; money in/out cues) -----------------------*/
--pos: #2E7D55; /* money in / success text (AA on paper) */
--pos-soft: #E4F0E8; /* success well */
--neg: #B23A2E; /* declined / danger text */
--neg-soft: #F6E3E0; /* danger well */
--info: #3A5A8A; /* neutral info text */
--scrim: rgba(20,16,8,.42); /* dim behind sheets/modals */
/* --- Type families — system stacks only, no remote fonts ----------------*/
--font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-num: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", monospace;
/* --- Type scale — 1.25 major third, large-title led ---------------------*/
--t-mega: clamp(2.9rem, 1.2rem + 5.7vw, 5.1rem); /* hero */
--t-h1: clamp(2rem, 1.4rem + 2vw, 2.6rem); /* iOS large-title */
--t-h2: 1.5rem;
--t-h3: 1.25rem;
--t-lead: clamp(1.06rem, 0.99rem + 0.42vw, 1.24rem);
--t-body: 1rem;
--t-sm: 0.875rem;
--t-xs: 0.75rem;
--t-2xs: 0.6875rem; /* card labels, eyebrow micro */
/* --- Brand wordmark — the readable name is the anchor (founder directive)*/
--t-wordmark: 1.4rem;
/* --- Spacing — 8pt soft grid --------------------------------------------*/
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
/* --- Radii — generously soft, iOS continuous-corner feel ----------------*/
--r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
/* --- Soft depth — layered, low-contrast, WARM-tinted shadows ------------*/
--sh-1: 0 1px 2px rgba(58,46,22,.05), 0 2px 8px rgba(58,46,22,.05);
--sh-2: 0 2px 6px rgba(58,46,22,.06), 0 14px 34px rgba(58,46,22,.085);
--sh-3: 0 8px 18px rgba(58,46,22,.09), 0 44px 90px rgba(40,30,12,.17);
--ring: 0 0 0 2px var(--linen), 0 0 0 4px var(--gold-mid); /* focus ring */
/* --- Brand glyph sizing (BARE mark; no container) -----------------------*/
--brand-glyph-nav: 28px; /* glyph height in pill nav / app bar */
--brand-glyph-lockup: 34px; /* larger step for hero / auth / gallery lockups */
/* --- Motion system ------------------------------------------------------*/
--e-calm: cubic-bezier(.22,.61,.36,1); /* default settle */
--e-spring: cubic-bezier(.34,1.32,.5,1); /* sheets/cards arriving */
--e-soft: cubic-bezier(.4,0,.2,1); /* micro hover states */
--e-glide: cubic-bezier(.45,0,.55,1); /* long ambient drift (sheen) */
--d-fast: .18s; --d-base: .34s; --d-slow: .62s; --d-amb: 9s;
/* --- z-index ladder -----------------------------------------------------*/
--z-base: 0; --z-raised: 1; --z-sticky: 30; --z-nav: 40;
--z-scrim: 80; --z-sheet: 90; --z-modal: 95; --z-toast: 100; --z-skip: 110;
color-scheme: light;
}
/* =============================================================================
2 · RESET + BASE TYPOGRAPHY
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-text);
font-size: var(--t-body);
color: var(--tx-1);
line-height: 1.5;
min-height: 100svh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Two soft warm light-wells over linen — airy depth, never busy */
background:
radial-gradient(116% 86% at 90% -12%, #FCF7EC 0%, rgba(252,247,236,0) 48%),
radial-gradient(92% 78% at -10% 6%, #F8F1E1 0%, rgba(248,241,225,0) 42%),
var(--linen);
background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--tx-1); }
h1 { font-size: var(--t-h1); line-height: 1.06; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold-hi); color: var(--ink); }
/* Mono numerals — money, card numbers, codes. Tabular for clean alignment. */
.num, .mono {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
/* =============================================================================
3 · UTILITIES
========================================================================== */
/* Centered marketing container */
.shell { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.shell-narrow { max-width: 720px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); }
/* Screen-reader only */
.sr-only {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Skip link */
.skip, .skip-link {
position: absolute; inset-inline-start: -999px; top: 0;
background: var(--ink); color: var(--on-ink);
padding: 10px 16px; border-radius: var(--r-sm); z-index: var(--z-skip);
}
.skip:focus, .skip-link:focus { inset-inline-start: 16px; top: 16px; }
/* Global focus ring — calm linen halo + gold edge. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
/* Gold TEXT clip helper — gradient text where decorative; falls back to AA gold. */
.gold-text {
color: var(--gold-text); /* AA fallback for body-size text */
background: var(--gold-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* For small text where the gradient would fail contrast, force the solid gold-text */
.gold-text--solid { background: none; -webkit-text-fill-color: var(--gold-text); color: var(--gold-text); }
/* Hairline rules */
.hairline, .rule-line { border: 0; height: 1px; background: var(--sand-line); }
.rule-gold { border: 0; height: 1px; background: var(--gold-grad); opacity: .7; }
/* ---- BRAND --------------------------------------------------------------- */
/* Wordmark "Tanit" = primary identity. Add nothing beside it. */
.wordmark {
font-family: var(--font-display);
font-size: var(--t-wordmark); font-weight: 600;
letter-spacing: -.012em; color: var(--tx-1); line-height: 1;
}
/* The bare Sign-of-Tanit glyph — a solid fill MASKED by the mark (tintable).
Never wrap in a container shape. Obsidian default; .glyph--light for dark
surfaces. Size via --brand-glyph-nav or override width/height. */
.glyph, .brand-glyph {
display: inline-block; flex: none;
width: calc(var(--brand-glyph-nav) * 0.785); /* glyph aspect ≈ 22:28 */
height: var(--brand-glyph-nav);
background: var(--ink);
-webkit-mask: url("tanit-mark-obsidian.png") center / contain no-repeat;
mask: url("tanit-mark-obsidian.png") center / contain no-repeat;
}
.glyph--light, .brand-glyph--light { background: var(--on-ink); }
.glyph--dark, .brand-glyph--dark { background: var(--ink); }
.glyph--gold { background: var(--gold-mid); }
/* Larger lockup step — hero / auth / gallery; bare mark, still no container */
.glyph--lockup, .brand-glyph--lockup {
width: calc(var(--brand-glyph-lockup) * 0.785);
height: var(--brand-glyph-lockup);
}
/* The lockup: small bare glyph + wordmark. */
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
/* Generic warm raised surface (compose anything on it) */
.surface { background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.surface-2{ background: var(--paper-2); border: 1px solid var(--sand-line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.well { background: var(--sand); border-radius: var(--r-md); }
/* Stacks */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-6); }
.cluster { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* Section heads */
.section-head, .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); }
.sec-head--center { justify-content: center; text-align: center; }
.sec-head .edit-link, .group-head .edit-link { font-size: var(--t-sm); color: var(--gold-text); font-weight: 600; }
/* =============================================================================
4 · COMPONENTS
========================================================================== */
/* --------------------------------------------------------------------- NAV --
Glass pill nav (marketing / web). Blurred warm paper, hairline, pill radius. */
header.nav { position: sticky; top: 0; z-index: var(--z-nav); }
.nav-inner {
margin-top: var(--s-6);
display: flex; align-items: center; gap: var(--s-4);
padding: 10px 14px 10px 20px;
background: rgba(251,250,248,.74);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border: 1px solid var(--sand-line);
border-radius: var(--r-pill);
box-shadow: var(--sh-1);
}
.nav-links { display: flex; gap: var(--s-2); margin-inline-start: var(--s-4); }
.nav-actions { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--s-3); }
.nav-links a {
font-size: var(--t-sm); color: var(--tx-2); white-space: nowrap;
padding: 9px 12px; border-radius: var(--r-pill);
transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.nav-links a:hover { background: var(--sand); color: var(--tx-1); }
.nav-links a[aria-current="page"] { color: var(--tx-1); background: var(--sand); }
.nav-cta {
font-size: var(--t-sm); font-weight: 600; color: var(--on-ink);
background: var(--ink); padding: 10px 20px; border-radius: var(--r-pill);
box-shadow: var(--sh-1); white-space: nowrap; flex: none;
transition: transform var(--d-fast) var(--e-calm), box-shadow var(--d-fast) var(--e-calm);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
@media (max-width: 1024px) { .nav-links { display: none; } }
/* ------------------------------------------------------ iOS APP CHROME -----
App screens render inside an iPhone frame. Status bar, large-title nav,
bottom tab bar, dynamic island, home indicator. */
.ios-status {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 26px 4px; font-size: var(--t-sm); font-weight: 600; color: var(--tx-1);
}
.ios-status__time { font-variant-numeric: tabular-nums; }
.ios-status__right { display: inline-flex; align-items: center; gap: 6px; }
.dynamic-island {
position: absolute; inset-block-start: 10px; inset-inline-start: 50%;
transform: translateX(-50%);
width: 116px; height: 33px; border-radius: var(--r-pill);
background: var(--ink); z-index: var(--z-sticky);
}
.home-indicator {
position: absolute; inset-block-end: 7px; inset-inline-start: 50%;
transform: translateX(-50%);
width: 134px; height: 5px; border-radius: var(--r-pill);
background: rgba(20,16,8,.32);
}
/* App bar — large title that condenses. */
.appbar {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-2) var(--s-4);
}
.appbar__title, .ios-nav__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-body); }
.ios-largetitle, .ios-largetitle h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 700; letter-spacing: -.022em; padding: var(--s-2) var(--s-4) var(--s-3); }
.ios-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 6px var(--s-3); min-height: 44px; }
.ios-nav__side { display: inline-flex; align-items: center; gap: 4px; min-width: 64px; }
.ios-nav__side--end { justify-content: flex-end; }
.ios-nav__back { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-text); font-size: var(--t-body); font-weight: 500; }
.ios-nav__back svg { width: 18px; height: 18px; }
/* Icon-only round control (functional — uses a plain icon, NEVER the brand logo) */
.icon-btn, .iconbtn, .ios-nav__icon-btn {
display: inline-grid; place-items: center;
width: 40px; height: 40px; border-radius: var(--r-pill);
background: var(--paper); border: 1px solid var(--sand-line);
color: var(--tx-1); box-shadow: var(--sh-1); cursor: pointer;
transition: background var(--d-fast) var(--e-soft), transform var(--d-fast) var(--e-calm);
}
.icon-btn:hover, .iconbtn:hover, .ios-nav__icon-btn:hover { background: var(--paper-2); transform: translateY(-1px); }
.icon-btn svg, .iconbtn svg, .ios-nav__icon-btn svg { width: 20px; height: 20px; }
.ios-nav__icon-btn--avatar { padding: 0; overflow: hidden; }
/* Bottom tab bar — blurred glass, plain icon set + label. Active = gold-text. */
.tabbar, .ios-tabbar {
display: flex; align-items: stretch; justify-content: space-around;
padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
background: rgba(251,250,248,.82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-top: 1px solid var(--sand-line);
}
.tab, .ios-tab {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 0; font-size: var(--t-2xs); font-weight: 500; color: var(--tx-3);
background: none; border: 0; cursor: pointer;
transition: color var(--d-fast) var(--e-soft);
}
.tab svg, .ios-tab svg { width: 24px; height: 24px; }
.tab.is-active, .ios-tab.is-active,
.tab[aria-current="page"], .ios-tab[aria-current="page"] { color: var(--gold-text); }
/* ----------------------------------------------------------------- BUTTONS --
Ink pill = primary. Paper ghost = secondary. Gold-gradient ACCENT pill =
reserved for "Add money"-class moments — gold is NOT a generic button fill;
it is a deliberate, sparing accent that reads as metal (inner light). */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-text); font-size: var(--t-body); font-weight: 600;
padding: 15px 27px; border-radius: var(--r-pill); border: 0; cursor: pointer;
text-align: center; white-space: nowrap;
transition: transform var(--d-fast) var(--e-calm),
box-shadow var(--d-base) var(--e-calm),
background var(--d-fast) var(--e-soft);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { color: var(--on-ink); background: var(--ink); box-shadow: var(--sh-2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.btn-primary svg { transition: transform var(--d-base) var(--e-spring); }
.btn-primary:hover svg { transform: translateX(4px); }
[dir="rtl"] .btn-primary:hover svg { transform: scaleX(-1) translateX(-4px); }
.btn-ghost, .btn-secondary {
color: var(--tx-1); background: var(--paper);
border: 1px solid var(--sand-line); box-shadow: var(--sh-1);
}
.btn-ghost:hover, .btn-secondary:hover { background: var(--paper-2); transform: translateY(-1px); }
/* Gold accent pill — gold gradient as a deliberate accent, ink text/icon on it.
Inner light keeps it reading as metal, not a flat fill. Use sparingly. */
.btn-gold {
color: var(--on-gold); background: var(--gold-grad);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), var(--sh-1);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), var(--sh-2); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 10px 17px; font-size: var(--t-sm); }
/* ---------------------------------------------------- ACCOUNT / BALANCE -----
The headline balance block. Large-title number, mono cents, currency chip. */
.account, .balance-head {
display: flex; flex-direction: column; gap: 2px;
padding: var(--s-4) var(--s-4) var(--s-5);
}
.account__label { font-size: var(--t-sm); color: var(--tx-3); letter-spacing: .02em; }
.account__amount {
font-family: var(--font-num); font-variant-numeric: tabular-nums;
font-size: clamp(2.4rem, 1.4rem + 5vw, 3.2rem); font-weight: 600;
letter-spacing: -.02em; color: var(--tx-1); line-height: 1.02;
display: inline-flex; align-items: baseline; gap: 2px;
}
.account__cents { font-size: .56em; color: var(--tx-2); }
.account__currency { font-size: .5em; color: var(--tx-3); margin-inline-start: 8px; font-family: var(--font-text); }
/* ----------------------------------------------- PLATINUM VISA CARD ---------
The signature object. Platinum metal, bare obsidian mark, gold chip, mono
number, drifting sheen. Apple-Wallet stack via .card--back peeking behind. */
.card-stage { position: relative; display: grid; place-items: center; }
.card-stack { position: relative; width: min(440px, 86vw); }
.card, .card--platinum {
position: relative; width: 100%; aspect-ratio: 1.586 / 1;
border-radius: var(--r-lg);
background: var(--plat-grad); color: var(--ink);
box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.06);
overflow: hidden;
padding: clamp(20px, 4.6vw, 28px);
display: flex; flex-direction: column; justify-content: space-between;
}
/* engraved hairlines — craft, not ornament */
.card::before, .card--platinum::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(118deg, rgba(255,255,255,.18) 0 1px, transparent 1px 10px);
mix-blend-mode: overlay; opacity: .5;
}
/* raking-light sheen drifting across the metal */
.card .sheen, .card__rake, .card__frost {
position: absolute; inset: -40% -60%; pointer-events: none;
background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,.14) 50%, transparent 56%);
transform: translateX(-8%); mix-blend-mode: screen;
}
.card__top, .card-top { display: flex; align-items: flex-start; justify-content: space-between; }
/* obsidian BARE mark on the light platinum surface — no container */
.card-mark, .card__glyph {
width: 21px; height: 28px; background: var(--ink);
-webkit-mask: url("tanit-mark-obsidian.png") center / contain no-repeat;
mask: url("tanit-mark-obsidian.png") center / contain no-repeat;
}
.card-chip {
width: 42px; height: 31px; border-radius: 7px; position: relative;
background: var(--gold-grad);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -3px 6px rgba(120,84,20,.35);
}
.card-chip::after {
content: ""; position: absolute; inset: 7px 5px; border-radius: 2px;
background:
linear-gradient(90deg, transparent 48%, rgba(120,84,20,.5) 49% 51%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(120,84,20,.5) 49% 51%, transparent 52%);
}
.card-num, .card__number {
font-family: var(--font-num); font-variant-numeric: tabular-nums;
font-size: clamp(.96rem, 2.6vw, 1.14rem); letter-spacing: .16em; color: #2A2723;
display: flex; gap: 14px;
}
.card-bottom, .card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.card-bottom .label, .card__label { font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase; color: #5A554D; }
.card-bottom .val, .card__name { font-family: var(--font-display); font-size: .94rem; font-weight: 600; margin-top: 2px; }
.visa, .card__scheme { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.18rem; letter-spacing: .02em; color: #2A2723; }
.card__magstripe { position: absolute; inset-inline: 0; inset-block-start: 22px; height: 42px; background: #23211C; }
.card__cvv-row, .card__cvv-strip { display: flex; align-items: center; gap: 8px; }
.card__cvv-strip { background: #EFEDE7; height: 34px; border-radius: 4px; padding-inline: 10px; }
/* peeking gold-edge card behind the platinum one (Apple-Wallet stack) */
.card--back, .card-back {
position: absolute; inset-inline-start: 50%; inset-block-start: -34px;
width: 91%; aspect-ratio: 1.586 / 1;
transform: translateX(-50%) rotate(-2.4deg);
border-radius: var(--r-lg);
background: var(--gold-soft);
box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.5);
z-index: var(--z-base);
}
/* CARD STATES */
.card.is-virtual::after, .card--platinum.is-virtual::after {
content: "Virtual"; position: absolute; inset-block-start: 14px; inset-inline-end: 16px;
font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
color: #5A554D; background: rgba(255,255,255,.55); padding: 3px 9px; border-radius: var(--r-pill);
}
.card.is-frozen, .card--platinum.is-frozen { filter: grayscale(.5) brightness(1.04); }
.card.is-frozen::after, .card--platinum.is-frozen::after {
content: ""; position: absolute; inset: 0; backdrop-filter: blur(2px);
background: rgba(214,222,228,.34); pointer-events: none;
}
/* Flip (front/back reveal of CVV) — pair with .card--front / .card--back-face */
.flip { perspective: 1500px; }
.flip__inner { position: relative; transition: transform var(--d-slow) var(--e-calm); transform-style: preserve-3d; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip .card--front, .flip .card--back-face { backface-visibility: hidden; }
.flip .card--back-face { position: absolute; inset: 0; transform: rotateY(180deg); }
/* ----------------------------------------------------- QUICK ACTION TILES ---
Row of quick actions (Add / Send / Request / Card). Plain icon glyph, label.*/
.quick-actions, .quick { display: flex; gap: var(--s-3); }
.quick-actions { justify-content: space-between; }
.quick__btn, .quick-actions > li > a, .quick-actions > li > button {
display: flex; flex-direction: column; align-items: center; gap: 7px;
flex: 1; padding: var(--s-3) var(--s-2);
background: var(--paper); border: 1px solid var(--sand-line);
border-radius: var(--r-md); box-shadow: var(--sh-1);
color: var(--tx-1); font-size: var(--t-sm); font-weight: 600; cursor: pointer;
transition: transform var(--d-fast) var(--e-calm), box-shadow var(--d-fast) var(--e-calm), background var(--d-fast) var(--e-soft);
}
.quick__btn:hover, .quick-actions > li > a:hover, .quick-actions > li > button:hover {
transform: translateY(-2px); box-shadow: var(--sh-2); background: var(--paper-2);
}
/* icon inside the tile — plain glyph, gold-tinted stroke; NOT the brand logo */
.quick__btn svg, .quick__ico svg { width: 22px; height: 22px; color: var(--gold-text); }
.quick__lbl { font-size: var(--t-sm); font-weight: 600; }
/* ----------------------------------------------------- LEDGER / TX ROWS -----
Transaction rows. Leading icon is a DIRECTIONAL ARROW glyph in a soft well —
never a logo badge. is-in = money in (positive), default = out. */
.rail-list, .row-list { display: flex; flex-direction: column; }
.row-item, .wallet-row {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-2);
border-block-end: 1px solid var(--sand-line);
}
.row-item:last-child, .wallet-row:last-child { border-block-end: 0; }
.row-item__icon, .rail-tile__ico {
flex: none; display: grid; place-items: center;
width: 40px; height: 40px; border-radius: var(--r-pill);
background: var(--sand); color: var(--tx-2);
}
.row-item__icon svg { width: 20px; height: 20px; }
.row-item__icon.is-in { background: var(--pos-soft); color: var(--pos); }
.row-item__icon.is-out { background: var(--sand); color: var(--tx-2); }
.row-item__body, .rail-tile__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-item__title { font-size: var(--t-body); font-weight: 600; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-item__sub { font-size: var(--t-sm); color: var(--tx-3); }
.row-item__alt { color: var(--tx-3); font-weight: 400; } /* RTL alt label */
.row-item__amt {
font-family: var(--font-num); font-variant-numeric: tabular-nums;
font-size: var(--t-body); font-weight: 600; color: var(--tx-1); flex: none;
}
.row-item__amt.is-in { color: var(--pos); }
.row-item__amt.is-out { color: var(--tx-1); }
/* Recipient / selectable tile rows (send/receive) */
.rail-tile, .recip {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3); width: 100%; text-align: start;
background: var(--paper); border: 1px solid var(--sand-line);
border-radius: var(--r-md); box-shadow: var(--sh-1); cursor: pointer;
transition: background var(--d-fast) var(--e-soft), transform var(--d-fast) var(--e-calm);
}
.rail-tile:hover, .recip:hover { background: var(--paper-2); transform: translateY(-1px); }
.recip-chevron { margin-inline-start: auto; color: var(--tx-3); }
.recipient__avatar, .identity__avatar {
flex: none; display: grid; place-items: center;
width: 44px; height: 44px; border-radius: var(--r-pill);
background: var(--gold-soft); color: var(--on-gold);
font-family: var(--font-display); font-weight: 600; box-shadow: var(--sh-1);
}
/* ---------------------------------------------------------- FORMS / INPUTS --
Recessed sand fields, warm hairline, soft radius, gold focus ring. */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field__label { font-size: var(--t-sm); font-weight: 600; color: var(--tx-2); }
.field__hint { font-size: var(--t-xs); color: var(--tx-3); }
.field__hint.is-error { color: var(--neg); }
.input, .field input, .field select, .field textarea, .search {
width: 100%; font: inherit; font-size: var(--t-body); color: var(--tx-1);
background: var(--sand); border: 1px solid var(--sand-line);
border-radius: var(--r-md); padding: 14px 16px;
transition: border-color var(--d-fast) var(--e-soft), background var(--d-fast) var(--e-soft);
}
.input::placeholder, .field input::placeholder { color: var(--tx-3); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus, .search:focus {
outline: none; background: var(--paper-2); border-color: var(--gold-mid); box-shadow: var(--ring);
}
.input:disabled { opacity: .55; }
/* Affixed input (currency symbol prefix) */
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix__sym { position: absolute; inset-inline-start: 16px; color: var(--tx-3); font-family: var(--font-num); pointer-events: none; }
.input-affix .input { padding-inline-start: 34px; }
/* Search field with leading icon */
.search { padding-inline-start: 42px; }
/* ----------------------------------------------------------- SEGMENTED ------
iOS-style segmented control — recessed sand track, raised paper thumb. */
.segment, .ios-segment, .auth-segment {
display: inline-flex; padding: 3px; gap: 2px;
background: var(--sand); border-radius: var(--r-pill);
border: 1px solid var(--sand-line);
}
.segment__btn, .ios-segment > * {
flex: 1; border: 0; background: none; cursor: pointer;
font-size: var(--t-sm); font-weight: 600; color: var(--tx-2);
padding: 9px 18px; border-radius: var(--r-pill);
transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft), box-shadow var(--d-fast) var(--e-soft);
}
.segment__btn.is-active, .segment__btn[aria-selected="true"],
.ios-segment > .is-active, .ios-segment > [aria-selected="true"] {
background: var(--paper-2); color: var(--tx-1); box-shadow: var(--sh-1);
}
/* Toggle switch — gold-gradient track when on. */
.switch, .ios-switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input, .ios-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
width: 51px; height: 31px; border-radius: var(--r-pill);
background: var(--sand-line-2); position: relative;
transition: background var(--d-base) var(--e-calm);
}
.switch__thumb {
position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
width: 27px; height: 27px; border-radius: var(--r-pill);
background: var(--paper-2); box-shadow: var(--sh-1);
transition: transform var(--d-base) var(--e-spring);
}
.switch.is-on .switch__track, .ios-switch.is-on .switch__track { background: var(--gold-grad); }
.switch.is-on .switch__thumb, .ios-switch.is-on .switch__thumb { transform: translateX(20px); }
[dir="rtl"] .switch.is-on .switch__thumb, [dir="rtl"] .ios-switch.is-on .switch__thumb { transform: translateX(-20px); }
/* ----------------------------------------------------------- AMOUNT KEYPAD --
Big mono amount display + 3×4 keypad. Calm, generous, no gold fill on keys. */
.amount-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-4); }
.amount {
font-family: var(--font-num); font-variant-numeric: tabular-nums;
font-size: clamp(2.8rem, 1.6rem + 6vw, 3.8rem); font-weight: 600;
letter-spacing: -.02em; color: var(--tx-1); line-height: 1;
}
.amount-avail { font-size: var(--t-sm); color: var(--tx-3); }
.amount-to { font-size: var(--t-sm); color: var(--tx-2); }
.amount-quick { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
.amount-quick > button, .amount-quick > .chip {
font-family: var(--font-num); font-size: var(--t-sm); font-weight: 600;
padding: 8px 16px; border-radius: var(--r-pill);
background: var(--paper); border: 1px solid var(--sand-line); color: var(--tx-1); cursor: pointer;
}
.amount-quick > button:hover { background: var(--paper-2); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.key {
display: grid; place-items: center; height: 58px;
font-family: var(--font-num); font-size: 1.5rem; font-weight: 500; color: var(--tx-1);
background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--r-md);
cursor: pointer; box-shadow: var(--sh-1);
transition: background var(--d-fast) var(--e-soft), transform var(--d-fast) var(--e-calm);
}
.key:active { transform: scale(.97); }
.key:hover { background: var(--paper-2); }
.key--util { background: var(--sand); box-shadow: none; }
.key svg { width: 24px; height: 24px; }
/* ---------------------------------------- BOTTOM SHEET / MODAL / SCRIM -------
The SIGNATURE motif: a sheet that rises from the bottom on a gentle spring.
Scrim dims behind it. Modal is the centered variant. */
.scrim {
position: fixed; inset: 0; z-index: var(--z-scrim);
background: var(--scrim);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden;
transition: opacity var(--d-base) var(--e-calm), visibility var(--d-base);
}
.scrim.is-open, .scrim[aria-hidden="false"] { opacity: 1; visibility: visible; }
.sheet, .ios-sheet {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sheet);
background: var(--paper-2);
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: var(--sh-3);
padding: var(--s-3) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform var(--d-slow) var(--e-spring);
max-height: 92svh; overflow-y: auto;
}
.sheet.is-open, .sheet.is-in, .sheet[aria-hidden="false"],
.ios-sheet.is-open, .ios-sheet[aria-hidden="false"] { transform: translateY(0); }
.sheet__grip, .ios-sheet__grip, .sheet .handle, .is-handle {
width: 38px; height: 5px; border-radius: var(--r-pill);
background: var(--sand-line-2); margin: 0 auto var(--s-4);
}
.sheet__title, .ios-sheet__title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; margin-block-end: var(--s-3); }
.sheet-content { display: flex; flex-direction: column; gap: var(--s-4); }
.sheet-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-block-start: var(--s-4); }
.ios-sheet__dim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); }
/* Centered modal variant */
.modal {
position: fixed; inset-block-start: 50%; inset-inline-start: 50%; z-index: var(--z-modal);
transform: translate(-50%, -48%) scale(.98); opacity: 0; visibility: hidden;
width: min(420px, calc(100% - 32px));
background: var(--paper-2); border-radius: var(--r-lg); box-shadow: var(--sh-3);
padding: var(--s-5);
transition: opacity var(--d-base) var(--e-calm), transform var(--d-base) var(--e-spring), visibility var(--d-base);
}
.modal.is-open, .modal[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
[dir="rtl"] .modal { transform: translate(50%, -48%) scale(.98); }
[dir="rtl"] .modal.is-open, [dir="rtl"] .modal[aria-hidden="false"] { transform: translate(50%, -50%) scale(1); }
/* ---------------------------------------------- RECEIPT / REVIEW ROWS -------
Shared key→value rows for review screens, sealed receipts, settings groups.*/
.receipt, .review, .review-card { display: flex; flex-direction: column; }
.receipt__rows, .review-rows { display: flex; flex-direction: column; }
.receipt-row, .review-row, .review__row, .ios-group__row {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-3) 0; border-block-end: 1px solid var(--sand-line);
}
.receipt-row:last-child, .review-row:last-child, .review__row:last-child { border-block-end: 0; }
.review__k, .receipt-row .k, .review-row .k { font-size: var(--t-sm); color: var(--tx-3); }
.review__v, .receipt-row .v, .review-row .v { font-size: var(--t-body); font-weight: 600; color: var(--tx-1); text-align: end; }
.review__total, .review-row.is-total { padding-block-start: var(--s-3); border-block-start: 1px solid var(--sand-line-2); }
.review__total .review__v, .review-row.is-total .review__v { font-size: var(--t-h3); }
/* Self-sufficient success-receipt parts — so topup/send can drop local copies.
.receipt__head = single consistent head padding above the rows.
.receipt__divider = dashed separator between head and rows.
.receipt-row .v.is-text = the ONE canonical plain-text value modifier
(use on a .v that holds a label/string instead of a tabular numeral —
drops mono/tabular weight cues so words read as normal body text). */
.receipt__head { padding: var(--s-4) 0 var(--s-3); }
.receipt__divider {
border: 0; height: 0; margin: 0;
border-block-start: 1px dashed var(--sand-line-2);
}
.receipt-row .v.is-text {
font-family: var(--font-text);
font-variant-numeric: normal;
letter-spacing: normal;
}
/* Copy-to-clipboard row (account number / IBAN on receive) */
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); background: var(--sand); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); border: 0; }
.copy-row__body { display: flex; flex-direction: column; gap: 2px; }
.copy-row__k { font-size: var(--t-xs); color: var(--tx-3); }
.copy-row__v { font-family: var(--font-num); font-weight: 600; color: var(--tx-1); }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-text); font-size: var(--t-sm); font-weight: 600; background: none; border: 0; cursor: pointer; }
/* Settings group + rows */
.ios-group, .group__panel, .group {
background: var(--paper); border: 1px solid var(--sand-line);
border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden;
}
.group__label, .group-head, .ios-group__label--head { font-size: var(--t-sm); color: var(--tx-3); font-weight: 600; padding: 0 var(--s-2) 6px; }
.set-row {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4); width: 100%; text-align: start;
border-block-end: 1px solid var(--sand-line); color: var(--tx-1);
background: none; cursor: pointer;
}
.set-row:last-child { border-block-end: 0; }
.set-row__icon, .ios-group__ico {
flex: none; display: grid; place-items: center;
width: 32px; height: 32px; border-radius: var(--r-sm);
background: var(--sand); color: var(--tx-2);
}
.set-row__icon svg, .ios-group__ico svg { width: 18px; height: 18px; }
.set-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-row__title { font-size: var(--t-body); font-weight: 500; color: var(--tx-1); }
.set-row__sub { font-size: var(--t-sm); color: var(--tx-3); }
.set-row__trail, .set-row__val, .ios-group__val { margin-inline-start: auto; color: var(--tx-3); font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; }
.set-row__chev { color: var(--tx-3); }
.set-row__chev svg, .recip-chevron svg { width: 18px; height: 18px; }
.set-row--danger .set-row__title { color: var(--neg); }
.set-row--danger .set-row__icon { background: var(--neg-soft); color: var(--neg); }
/* chevrons + back arrows auto-flip in RTL */
[dir="rtl"] .set-row__chev svg, [dir="rtl"] .recip-chevron svg, [dir="rtl"] .ios-nav__back svg { transform: scaleX(-1); }
/* ----------------------------------------------- PILLS / BADGES / TRUST -----*/
.eyebrow {
display: inline-flex; align-items: center; gap: 9px;
font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
color: var(--gold-text); font-weight: 600;
background: var(--paper); border: 1px solid var(--sand-line);
padding: 7px 15px 7px 11px; border-radius: var(--r-pill); box-shadow: var(--sh-1);
}
.eyebrow .dot, .badge-dot {
width: 15px; height: 15px; border-radius: var(--r-pill);
background: var(--gold-grad); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); flex: none;
}
/* Status badges */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em;
padding: 4px 11px; border-radius: var(--r-pill);
background: var(--sand); color: var(--tx-2); border: 1px solid var(--sand-line);
}
.badge--ok, .badge.is-active { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.badge--warn { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.badge--gold { background: rgba(214,166,86,.16); color: var(--gold-text); border-color: transparent; }
/* Trust line — verified-by partner disclosure (footer only) */
.trust-line, .auth-trust, .safety {
display: flex; align-items: center; gap: 8px;
font-size: var(--t-xs); color: var(--tx-3); line-height: 1.5;
}
.trust-line svg, .safety svg { width: 16px; height: 16px; color: var(--gold-text); flex: none; }
.trust-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.trust-card { display: flex; flex-direction: column; gap: 8px; padding: var(--s-4); background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.trust-card__ico { width: 32px; height: 32px; color: var(--gold-text); }
/* Disclosure footnote (partner / Visa trademark line) */
.disclosure, .auth-legal {
font-size: var(--t-xs); color: var(--tx-3); line-height: 1.6;
padding-block-start: var(--s-4); border-block-start: 1px solid var(--sand-line);
}
/* ------------------------------------ STATUS / EMPTY / SKELETON / TOAST -----*/
/* Calm confirmation check — a tick, NEVER a coin/seal. */
.confirm, .success { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding: var(--s-6) var(--s-4); }
.confirm__check, .check, .success__ico {
width: 64px; height: 64px; border-radius: var(--r-pill);
display: grid; place-items: center; color: var(--pos);
background: var(--pos-soft);
animation: tnt-pop var(--d-base) var(--e-spring) both;
}
.confirm__check svg, .check svg { width: 30px; height: 30px; }
@keyframes tnt-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm__title, .success__amt { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; }
/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding: var(--s-7) var(--s-4); color: var(--tx-3); }
.empty__title { font-family: var(--font-display); font-size: var(--t-h3); color: var(--tx-1); }
.empty svg { width: 40px; height: 40px; color: var(--sand-line-2); }
/* Skeleton — warm shimmer placeholder */
.skeleton, .qr-skeleton {
background: linear-gradient(100deg, var(--sand) 30%, var(--paper) 50%, var(--sand) 70%);
background-size: 200% 100%;
border-radius: var(--r-sm);
animation: tnt-shimmer 1.4s var(--e-glide) infinite;
}
@keyframes tnt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Canonical pending spinner — shared so screens stop defining their own.
A bare ring with a gold-leading arc; inherits size via font-size/em or
explicit width/height. Color follows currentColor (e.g. on-ink inside a btn).
Reduced-motion fallback pins it static below. */
.spin {
display: inline-block; flex: none;
width: 1.15em; height: 1.15em; vertical-align: -.16em;
border: 2px solid currentColor; border-block-start-color: transparent;
border-radius: var(--r-pill); opacity: .9;
animation: tnt-spin .7s linear infinite;
}
@keyframes tnt-spin { to { transform: rotate(360deg); } }
/* Toast — floating calm confirmation, rises bottom-center, auto-fades */
.toast {
position: fixed; inset-block-end: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
inset-inline-start: 50%; transform: translateX(-50%) translateY(16px);
z-index: var(--z-toast);
display: inline-flex; align-items: center; gap: 10px;
background: var(--ink); color: var(--on-ink);
padding: 13px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-3);
font-size: var(--t-sm); font-weight: 600;
opacity: 0; visibility: hidden;
transition: opacity var(--d-base) var(--e-calm), transform var(--d-base) var(--e-spring), visibility var(--d-base);
}
.toast.is-open, .toast[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--gold-mid); }
/* --------------------------------------------------- ICON CONVENTIONS -------
All functional icons are inline