/* |-------------------------------------------------------------------------- | Jeepney.io Wallet Design Tokens (single source of truth) |-------------------------------------------------------------------------- | Load this on every wallet surface (Personal / Merchant / Driver) so all | three share one look. Utilities are namespaced .jw-* and never collide | with the existing .jmw-* / .jdw-* styles, so you can adopt them gradually. | | Standalone pages (merchant-wallet.php, driver-wallet.php) add in : | |-------------------------------------------------------------------------- */ :root { /* Brand + AI accents */ --jw-brand: #d71920; --jw-brand-strong: #e00000; --jw-ai: #3dd6f5; /* cyan = "live / AI" signal */ --jw-ai-deep: #0fa9cc; /* Ink + surfaces */ --jw-ink: #08111f; --jw-ink-2: #11203a; --jw-text: #0f172a; --jw-muted: #64748b; --jw-bg: #f5f7fb; --jw-surface: #ffffff; --jw-line: rgba(8, 17, 31, 0.08); /* Status */ --jw-up: #047857; --jw-down: #b42318; --jw-warn: #c2410c; /* Radii */ --jw-r-sm: 13px; --jw-r: 18px; --jw-r-lg: 24px; --jw-r-pill: 999px; /* Shadows */ --jw-shadow: 0 10px 26px rgba(8, 17, 31, 0.06); --jw-shadow-lg: 0 18px 45px rgba(8, 17, 31, 0.10); --jw-glow: 0 0 0 1px rgba(61, 214, 245, 0.25), 0 14px 40px rgba(8, 17, 31, 0.35); /* Type scale */ --jw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --jw-fs-label: 11px; --jw-fs-body: 14px; --jw-fs-h3: 18px; --jw-fs-h2: 22px; --jw-fs-h1: 30px; --jw-fs-mega: 46px; } /* ---- Surfaces ---- */ .jw-card { background: var(--jw-surface); border: 1px solid var(--jw-line); border-radius: var(--jw-r-lg); box-shadow: var(--jw-shadow); padding: 24px; } /* Dark "glass" hero - the tech-grade balance/feature card */ .jw-card--hero { position: relative; overflow: hidden; color: #fff; border: 0; border-radius: var(--jw-r-lg); padding: 26px; background: radial-gradient(120% 140% at 100% 0%, rgba(61, 214, 245, 0.18) 0%, rgba(61, 214, 245, 0) 45%), linear-gradient(135deg, var(--jw-ink) 0%, var(--jw-ink-2) 100%); box-shadow: var(--jw-shadow-lg); } .jw-card--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); pointer-events: none; } /* ---- Balance typography ---- */ .jw-balance-label { font-size: var(--jw-fs-label); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); margin: 0 0 10px; } .jw-balance-amount { font-size: var(--jw-fs-mega); font-weight: 950; letter-spacing: -0.04em; line-height: 1; margin: 0; } /* ---- AI accent label + live dot ---- */ .jw-ai-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--jw-fs-label); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jw-ai); } .jw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jw-ai); box-shadow: 0 0 0 0 rgba(61, 214, 245, 0.6); animation: jw-pulse 1.8s infinite; } @keyframes jw-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 214, 245, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(61, 214, 245, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 214, 245, 0); } } /* ---- Delta pills ---- */ .jw-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--jw-r-pill); font-size: 12px; font-weight: 900; background: rgba(255, 255, 255, 0.10); color: #fff; } .jw-pill--up { background: rgba(4, 120, 87, 0.16); color: #34d399; } .jw-pill--down { background: rgba(180, 35, 24, 0.16); color: #f87171; } /* ---- Unified tabs (drop-in for .jp-ctx-tabs look) ---- */ .jw-tabs { display: flex; gap: 8px; padding: 6px; background: var(--jw-surface); border: 1px solid var(--jw-line); border-radius: var(--jw-r); box-shadow: var(--jw-shadow); } .jw-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: var(--jw-r-sm); text-decoration: none; color: var(--jw-muted); transition: background .15s, color .15s; } .jw-tab strong { font-size: var(--jw-fs-body); font-weight: 900; line-height: 1.1; } .jw-tab small { font-size: 10.5px; font-weight: 700; opacity: .8; } .jw-tab:hover { background: #f1f5f9; color: var(--jw-ink); } .jw-tab--active { background: var(--jw-ink); color: #fff; } .jw-tab--active small { color: #aeb6c4; } .jw-muted { color: var(--jw-muted); } @media (prefers-reduced-motion: reduce) { .jw-dot { animation: none; } } /* ---- Secondary stat cards (Followers/Following) — match hero card system ---- */ .jw-card--stat { background: var(--jw-ink) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--jw-r-lg) !important; } .jw-card--stat .jp-cd-stat-label { color: rgba(255,255,255,0.66) !important; letter-spacing: 0.08em !important; } .jw-card--stat .jp-cd-stat-value { color: #ffffff !important; font-weight: 950 !important; }