/* ─── MCoreBank Portal — shared design system ──────────────────────── Referenced by portal-customer.html (Overview), portal-accounts.html, portal-cards.html, portal-payments.html, portal-crypto-customer.html. ───────────────────────────────────────────────────────────────────── */ :root { --c-50: #f8fafc; --c-100: #f1f5f9; --c-200: #e2e8f0; --c-300: #cbd5e1; --c-400: #94a3b8; --c-500: #64748b; --c-600: #475569; --c-700: #334155; --c-800: #1e293b; --c-900: #0f172a; --ink: #0f172a; --ink-2: #1e293b; --text: #334155; --muted: #64748b; --line: #e2e8f0; --line-2: #cbd5e1; --canvas: #f8fafc; --surface: #ffffff; --brand: #0f172a; --brand-ink: #ffffff; --brand-soft: #f1f5f9; --ok: #047857; --ok-bg: #ecfdf5; --warn: #b45309; --warn-bg: #fffbeb; --bad: #b91c1c; --bad-bg: #fef2f2; --f-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --f-display: "Orbitron", "Eurostile", var(--f-sans); --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --t-fast: 150ms cubic-bezier(0.2, 0, 0, 1); --t-base: 220ms cubic-bezier(0.2, 0, 0, 1); } /* Dark theme — matches BOTH selectors. The static portal-*.html previews toggle `data-mode="dark"`; the React customer SPA toggles `data-theme="dark"` on . Listing both means every page that imports portal.css gets dark mode consistently regardless of which attribute is set, and we don't have to maintain two stylesheets. Palette below was retuned 2026-06-02 for AA contrast — the old `--canvas: #0b1220` / `--surface: #111827` sat within ~5% luminance of each other so panels disappeared into the page on iPhone. New hierarchy: canvas is the deepest, surface a clear step lighter, surface-alt (inputs / inner blocks) one step darker than surface. */ [data-mode="dark"], [data-theme="dark"] { --ink: #f8fafc; /* slate-50 — primary headings */ --ink-2: #e2e8f0; /* slate-200 */ --text: #e2e8f0; /* slate-200 — body text */ --muted: #cbd5e1; /* slate-300 — secondary */ --line: #475569; /* slate-600 — visible borders */ --line-2: #334155; /* slate-700 — subtle dividers */ --canvas: #020617; /* slate-950 — page background */ --surface: #1e293b; /* slate-800 — cards / panels */ --c-50: #0f172a; /* slate-900 — input / inner-surface bg */ --c-100: #1e293b; --c-200: #334155; --c-300: #475569; --c-400: #64748b; --c-500: #94a3b8; --c-600: #cbd5e1; --c-700: #e2e8f0; /* on-surface body — was too dim at #cbd5e1 */ --c-800: #f1f5f9; --c-900: #f8fafc; --brand: #f8fafc; --brand-ink: #0f172a; --brand-soft: rgba(248,250,252,0.10); --ok: #34d399; --ok-bg: rgba(52, 211, 153, 0.14); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.14); --bad: #fb7185; --bad-bg: rgba(251, 113, 133, 0.14); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--f-sans); background: var(--canvas); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } /* ─── APP SHELL ───────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } @media (max-width: 880px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } } /* ─── SIDEBAR ─────────────────────────────────────────────────────── */ .sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar-head { padding: 18px 20px; border-bottom: 1px solid var(--line); } .sidebar-head .brand { display: flex; align-items: center; gap: 10px; } .sidebar-head .brand img { height: 22px; width: auto; display: block; } /* In dark mode the sidebar surface is dark, so invert the ink logo to white. */ [data-mode="dark"] .sidebar-head .brand img { filter: brightness(0) invert(1); } .sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; } .sidebar-nav .nav-section { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 6px; margin-top: 8px; } .sidebar-nav .nav-section:first-child { margin-top: 0; } .sidebar-nav .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--c-600); transition: background var(--t-fast), color var(--t-fast); margin: 2px 0; } .sidebar-nav .nav-item:hover { background: var(--c-100); color: var(--ink); } .sidebar-nav .nav-item.active { background: var(--brand); color: var(--brand-ink); } .sidebar-nav .nav-item.active .ico { color: var(--brand-ink); } .sidebar-nav .nav-item .ico { width: 16px; height: 16px; flex-shrink: 0; } .sidebar-nav .nav-item .badge { margin-left: auto; background: var(--c-100); color: var(--c-700); font-family: var(--f-mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px; letter-spacing: 0.04em; } .sidebar-nav .nav-item.active .badge { background: rgba(255,255,255,0.18); color: var(--brand-ink); } .sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--line); } .user-chip { display: flex; align-items: center; gap: 10px; } .user-chip .avatar { width: 32px; height: 32px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 600; } .user-chip .meta { min-width: 0; flex: 1; } .user-chip .meta .nm { font-size: 13px; font-weight: 500; color: var(--ink); } .user-chip .meta .em { font-size: 11px; color: var(--muted); font-family: var(--f-mono); letter-spacing: 0.02em; } /* ─── HEADER ──────────────────────────────────────────────────────── */ .main { display: flex; flex-direction: column; min-width: 0; } .header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 10; } .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; } .crumbs a { color: var(--muted); transition: color var(--t-fast); } .crumbs a:hover { color: var(--ink); } .crumbs .sep { color: var(--line-2); } .crumbs .cur { color: var(--ink); font-weight: 500; } .search { flex: 1; max-width: 420px; margin-left: 24px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--c-100); border: 1px solid transparent; border-radius: var(--r-md); transition: border-color var(--t-fast), background var(--t-fast); } .search:focus-within { background: var(--surface); border-color: var(--line-2); } .search svg { color: var(--muted); flex-shrink: 0; } .search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 13px; color: var(--ink); } .search input::placeholder { color: var(--muted); } .search .kbd { font-family: var(--f-mono); font-size: 10px; color: var(--muted); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; letter-spacing: 0.04em; } @media (max-width: 640px) { .search .kbd { display: none; } } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .icon-btn { width: 32px; height: 32px; border-radius: var(--r-md); border: 0; background: transparent; color: var(--c-600); cursor: pointer; display: grid; place-items: center; position: relative; transition: background var(--t-fast), color var(--t-fast); } .icon-btn:hover { background: var(--c-100); color: var(--ink); } .icon-btn svg { width: 16px; height: 16px; stroke-width: 1.8; } .dot-notif { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 99px; background: var(--ok); border: 1.5px solid var(--surface); } /* ─── PAGE ────────────────────────────────────────────────────────── */ .page { padding: 28px 24px 64px; max-width: 1280px; width: 100%; margin: 0 auto; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .page-title { font-size: 28px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.02em; } .page-sub { font-size: 13px; color: var(--muted); margin-top: 6px; } .head-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ─── PRIMITIVES ──────────────────────────────────────────────────── */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; font-family: var(--f-sans); font-weight: 500; font-size: 13px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; transition: all var(--t-fast); text-decoration: none; white-space: nowrap; } .btn svg { width: 14px; height: 14px; stroke-width: 2; } .btn-primary { background: var(--brand); color: var(--brand-ink); } .btn-primary:hover { opacity: 0.92; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { background: var(--c-50); border-color: var(--line-2); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--c-100); } .btn-danger { background: var(--bad-bg); color: var(--bad); border-color: transparent; } .btn-danger:hover { background: var(--bad); color: white; } .btn-sm { min-height: 30px; padding: 0 10px; font-size: 12px; } .btn-lg { min-height: 44px; padding: 0 20px; font-size: 14px; } /* Panel — shared surface for everything */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .panel-title { font-size: 15px; font-weight: 600; color: var(--ink); } .panel-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .panel-body { padding: 16px 20px; } .panel-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); } /* Pill */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 99px; background: var(--c-100); color: var(--c-700); } .pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.bad { background: var(--bad-bg); color: var(--bad); } .pill .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } /* Tabs */ .tabs { display: flex; gap: 2px; padding: 2px; background: var(--c-100); border-radius: var(--r-md); } .tabs button { padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; transition: all var(--t-fast); } .tabs button:hover { color: var(--ink); } .tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,0.06); } /* Input */ .input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 14px; font-family: var(--f-sans); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,23,42,0.08); } .input::placeholder { color: var(--muted); } .field { display: grid; gap: 6px; } .field label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* KV grid (key-value pairs) */ .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .kv .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .kv .v { font-size: 14px; color: var(--ink); margin-top: 4px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; word-break: break-all; } .kv.full { grid-column: span 2; } @media (max-width: 540px) { .kv-grid { grid-template-columns: 1fr; } .kv.full { grid-column: span 1; } } /* ─── MODAL ───────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, 0.5); display: none; align-items: center; justify-content: center; padding: 20px; animation: modal-fade var(--t-fast); } .modal-overlay.open { display: flex; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px -16px rgba(15,23,42,0.4); animation: modal-rise var(--t-base); } .modal.lg { max-width: 640px; } @keyframes modal-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); } .modal-title { font-size: 17px; font-weight: 600; color: var(--ink); } .modal-sub { font-size: 12px; color: var(--muted); margin-top: 3px; } .modal-close { width: 30px; height: 30px; border-radius: var(--r-md); border: 0; background: var(--c-100); color: var(--c-600); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; line-height: 1; transition: background var(--t-fast), color var(--t-fast); } .modal-close:hover { background: var(--c-200); color: var(--ink); } .modal-body { padding: 24px; } .modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; } /* QR / receive block inside a modal */ .receive-qr { width: 150px; height: 150px; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; place-items: center; color: var(--muted); background: repeating-linear-gradient(0deg, var(--c-100) 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, var(--c-100) 0 6px, transparent 6px 12px); } /* Big number entry (top-up modal) */ .amount-entry { display: flex; align-items: baseline; gap: 8px; justify-content: center; padding: 16px 0 8px; } .amount-entry .cur { font-size: 28px; color: var(--muted); font-weight: 500; } .amount-entry input { border: 0; outline: 0; background: transparent; font-family: var(--f-sans); font-size: 48px; font-weight: 600; color: var(--ink); text-align: center; width: 220px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .amount-entry input::placeholder { color: var(--line-2); } .chip-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--c-700); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--t-fast); } .chip:hover, .chip.selected { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } /* ─── PRICE-GRAPH MODAL (crypto) ──────────────────────────────────── */ .chart-wrap { padding: 8px 0 0; } .chart-svg { width: 100%; height: 200px; display: block; } .chart-svg .area { fill: url(#chartGrad); } .chart-svg .line { fill: none; stroke: var(--brand); stroke-width: 2; } [data-mode="dark"] .chart-svg .line { stroke: #a3e635; } .range-row { display: flex; gap: 4px; margin: 16px 0 0; } .range-row button { flex: 1; padding: 7px 0; font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); } .range-row button.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .chart-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; } .chart-stat .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .chart-stat .v { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; } /* Preview banner — shown on each portal-* preview while these are mockups */ .preview-banner { position: fixed; bottom: 16px; right: 16px; z-index: 100; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 500; max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .preview-banner strong { color: #78350f; } .preview-banner button { background: transparent; border: 0; color: inherit; font-size: 16px; cursor: pointer; padding: 0 0 0 8px; line-height: 1; } /* Notifications dropdown (shared — built by portal.js, anchored to the bell) */ .header-actions { position: relative; } .notif-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.14); overflow: hidden; display: none; } .notif-panel.open { display: block; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .notif-head .t { font-size: 13px; font-weight: 600; color: var(--ink); } .notif-head button { background: transparent; border: 0; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--brand); padding: 0; } .notif-list { max-height: 380px; overflow-y: auto; } .notif-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast); } .notif-item:last-child { border-bottom: 0; } .notif-item:hover { background: var(--c-50); } .notif-item .ico { width: 32px; height: 32px; border-radius: 99px; background: var(--c-100); color: var(--c-700); display: grid; place-items: center; } .notif-item .ico svg { width: 15px; height: 15px; } .notif-item.unread .ico { background: var(--brand-soft); color: var(--brand); } .notif-item .nm { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35; } .notif-item .nm .un { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--brand); margin-left: 6px; vertical-align: middle; } .notif-item .sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .notif-item .when { font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-top: 4px; } .notif-foot { padding: 10px 16px; text-align: center; border-top: 1px solid var(--line); } .notif-foot a { font-size: 12px; font-weight: 500; color: var(--brand); text-decoration: none; } .notif-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--muted); } /* ── Real flag images (replace emoji) ── */ .flag { overflow: hidden; } .flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .flag-inline { /* Circular fiat flag, sized relative to the surrounding text so it stays proportional everywhere (small 11px lines → small flag, etc.). */ width: 1.15em; height: 1.15em; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: -0.22em; margin-right: 6px; box-shadow: 0 0 0 1px rgba(15,23,42,0.08); } /* ── Custom flag dropdown (enhances