/* ========================================================================= Veltrix Meta — Dark-first theme + crypto-wallet typography Loaded after the PayApp template stylesheet so it can override it. ========================================================================= */ :root { /* Typography ---------------------------------------------------------- */ --ob-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ob-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ob-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; /* Surface ramp --------------------------------------------------------- */ --ob-bg: #07080C; --ob-bg-soft: #0B0D13; --ob-surface: #12151E; --ob-surface-2: #191D29; --ob-surface-3: #222736; --ob-border: rgba(255, 255, 255, .07); --ob-border-strong: rgba(255, 255, 255, .14); --ob-text: #EDEFF5; --ob-text-dim: #97A0B5; --ob-text-faint: #656E85; --ob-accent: #4A89DC; --ob-accent-soft: #5D9CEC; --ob-violet: #7C5CFF; --ob-up: #16C784; --ob-down: #F6465D; } /* ========================================================================= 1. Typography — the wallet voice ========================================================================= */ /* The PayApp stylesheet pins Roboto / Source Sans Pro with !important, so every selector it uses has to be answered here in kind. */ body, .font-sans, input, select, textarea, button, .btn, .form-control, .form-select, .form-label label, .accordion-button, .list-group *, .list-group strong, .list-menu-large a div, .list-menu-small a div, .list-group-item, .dropdown-menu, .offcanvas, .modal-content, .page-title p, .tabs .tab-controls, .font-text, .offline-message, .online-message, #footer-bar a:not(.btn) span { font-family: var(--ob-font-ui) !important; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, h7, .h1, .h2, .h3, .h4, .h5, .h6, .page-title h1, .header-title, .font-title, .icon, .exchange-value, .exchange-value::placeholder, .ob-display { font-family: var(--ob-font-display) !important; letter-spacing: -.02em; } h1, .h1 { letter-spacing: -.035em; } /* Numbers read like a ledger: fixed width, no ambiguity between 0 and O. */ .ob-num, .ob-balance, .card-center h2, .ob-asset-amount, .ob-asset-value, .ob-tx-amount { font-family: var(--ob-font-display) !important; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; letter-spacing: -.02em; } /* Addresses, hashes, seed words, account ids. */ .ob-mono, .ob-account-id, code, kbd, pre, samp { font-family: var(--ob-font-mono) !important; font-feature-settings: 'zero' 1; letter-spacing: 0; } /* Tailwind-side pages (auth, guest) — the `dark` class lives on there. These rules are plain CSS so they never depend on a Tailwind rebuild. */ html.dark, html.dark body { background-color: var(--ob-bg-soft); color: var(--ob-text); } /* ========================================================================= 2. Dark theme — deepen the template's default greys ========================================================================= */ /* The template sets `body { color:#747474 !important }` for the light theme; on a near-black ground that grey is unreadable, so it has to be answered. */ body.theme-dark { background-color: var(--ob-bg); color: var(--ob-text) !important; } .theme-dark #page { background-color: var(--ob-bg); } .theme-dark #preloader, .theme-dark .card { background-color: var(--ob-surface); } .theme-dark .card-style { border: 1px solid var(--ob-border); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); } .theme-dark .bg-theme { background-color: var(--ob-surface) !important; } .theme-dark .color-theme { color: var(--ob-text) !important; } .theme-dark .border-theme { border-color: var(--ob-border) !important; } .theme-dark p { color: var(--ob-text-dim); } .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: var(--ob-text); } .theme-dark .divider { background-color: var(--ob-border); } .theme-dark .list-group * { border-color: var(--ob-border); } /* Detached bottom bar. It sits on a near-black page, so it has to be a clearly LIFTED surface — a ground close to the page colour makes the whole nav disappear. Lighter fill + a readable border + a lip of shadow underneath. */ .theme-dark #footer-bar { background: rgba(28, 33, 46, .94) !important; border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 -2px 0 0 rgba(255, 255, 255, .04) inset, 0 16px 34px -10px rgba(0, 0, 0, 1) !important; } .theme-dark #footer-bar a:not(.btn) { color: var(--ob-text-dim); } .theme-dark #footer-bar a:not(.btn) i { opacity: .95; } .theme-dark #footer-bar a:not(.btn) span { opacity: .9; } .theme-dark #footer-bar a.active-nav, .theme-dark #footer-bar a.active-nav i, .theme-dark #footer-bar a.active-nav span { color: var(--ob-accent-soft); opacity: 1; } .theme-dark .offcanvas, .theme-dark .dropdown-menu > .card, .theme-dark .modal-content { background-color: var(--ob-surface); } .theme-dark .offcanvas-detached { border: 1px solid var(--ob-border); } /* Inputs need real contrast on a near-black ground. */ .theme-dark .form-control, .theme-dark .form-select { background-color: var(--ob-surface-2); border-color: var(--ob-border); color: var(--ob-text); } .theme-dark .form-control:focus, .theme-dark .form-select:focus { background-color: var(--ob-surface-2); border-color: var(--ob-accent); color: var(--ob-text); box-shadow: 0 0 0 3px rgba(74, 137, 220, .18); } .theme-dark .form-control::placeholder { color: var(--ob-text-faint); } .theme-dark .input-style label, .theme-dark .form-label { color: var(--ob-text-dim); } .theme-dark .badge.bg-gray-dark { background-color: var(--ob-surface-3) !important; } /* ========================================================================= 3. Dashboard components ========================================================================= */ /* Badge-ish elements are so they stay inline inside anchors — kill the italic. */ .ob-chip, .ob-status, .ob-dot, .ob-alloc-legend i { font-style: normal; } /* --- Top bar ------------------------------------------------------------ */ .ob-topbar { display: flex; align-items: center; gap: 12px; padding: 18px 16px 6px 16px; } .ob-topbar-avatar { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; border: 1px solid var(--ob-border-strong); flex: 0 0 auto; } .ob-topbar-greeting, .theme-dark .ob-topbar-greeting { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-text-faint); margin: 0 0 1px 0; line-height: 1; } .ob-topbar-name { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .ob-topbar-actions { margin-left: auto; display: flex; gap: 8px; } .ob-icon-btn { position: relative; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--ob-surface-2); border: 1px solid var(--ob-border); color: var(--ob-text); font-size: 17px; transition: transform 140ms ease, border-color 140ms ease; } .ob-icon-btn:hover { transform: translateY(-1px); border-color: var(--ob-border-strong); color: var(--ob-text); } .theme-light .ob-icon-btn { background: #fff; border-color: rgba(0, 0, 0, .08); color: #1f1f1f; } .ob-icon-btn .ob-dot { position: absolute; top: 7px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ob-down); color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; } /* --- Hero balance card -------------------------------------------------- */ .ob-hero { position: relative; margin: 10px 15px 18px 15px; padding: 20px; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 120% at 0% 0%, rgba(124, 92, 255, .35) 0%, rgba(124, 92, 255, 0) 55%), radial-gradient(120% 120% at 100% 10%, rgba(74, 137, 220, .38) 0%, rgba(74, 137, 220, 0) 60%), linear-gradient(150deg, #171B29 0%, #0D1017 60%, #0A0C12 100%); border: 1px solid var(--ob-border-strong); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .95); color: #fff; } .ob-hero::after { /* faint grid, the "cold storage" texture */ content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(80% 80% at 70% 20%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(80% 80% at 70% 20%, #000 0%, transparent 75%); pointer-events: none; } .ob-hero > * { position: relative; z-index: 1; } .ob-hero-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } /* The hero is always a dark surface, in either theme — pin its ink to white with enough specificity to beat the blanket `.theme-dark p / h1` rules. */ .ob-hero h1, .ob-hero h2, .ob-hero h3, .ob-hero p, .ob-hero a, .theme-dark .ob-hero h1, .theme-dark .ob-hero h2, .theme-dark .ob-hero h3, .theme-dark .ob-hero p { color: #fff; } .ob-hero-label, .theme-dark .ob-hero .ob-hero-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0; } .ob-hero-eye { margin-left: auto; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 14px; } .ob-hero-eye:hover { background: rgba(255, 255, 255, .16); color: #fff; } .ob-balance { font-size: 38px; font-weight: 700; line-height: 1.05; color: #fff; margin: 0; display: flex; align-items: baseline; gap: 2px; } .ob-balance .ob-balance-cents { font-size: 24px; color: rgba(255, 255, 255, .6); } .ob-balance-hidden { letter-spacing: .12em; } .ob-change { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .ob-change-up { background: rgba(22, 199, 132, .16); color: #3BE0A0; } .ob-change-down { background: rgba(246, 70, 93, .16); color: #FF7183; } .ob-change-flat { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); } .ob-hero-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); } .ob-account-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 12px; } .ob-account-pill:hover { background: rgba(255, 255, 255, .14); color: #fff; } .ob-account-pill .ob-account-id { font-weight: 600; letter-spacing: .04em; } .ob-hero-secure { margin-left: auto; font-size: 10.5px; color: rgba(255, 255, 255, .5) !important; display: inline-flex; align-items: center; gap: 5px; text-align: right; } /* --- Quick actions ------------------------------------------------------ */ .ob-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 15px 20px 15px; } .ob-action { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px 4px; border-radius: 18px; background: var(--ob-surface); border: 1px solid var(--ob-border); color: var(--ob-text); transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; } .theme-light .ob-action { background: #fff; border-color: rgba(0, 0, 0, .07); color: #1f1f1f; } .ob-action:hover { transform: translateY(-2px); border-color: var(--ob-border-strong); color: var(--ob-text); } .theme-light .ob-action:hover { color: #1f1f1f; } .ob-action-icon { width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; } .ob-action-label { font-size: 11.5px; font-weight: 500; letter-spacing: .01em; } .ob-grad-send { background: linear-gradient(140deg, #FF6A7B, #E23D50); } .ob-grad-receive { background: linear-gradient(140deg, #3BE0A0, #10A972); } .ob-grad-buy { background: linear-gradient(140deg, #6FA8FF, #3D6FE0); } .ob-grad-swap { background: linear-gradient(140deg, #A98CFF, #6C46E8); } /* --- Section headers ---------------------------------------------------- */ .ob-section-head { display: flex; align-items: baseline; margin: 0 20px 10px 20px; } .ob-section-title { font-size: 15px; font-weight: 600; margin: 0; } .ob-section-link { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ob-accent-soft); } /* --- Allocation bar ----------------------------------------------------- */ .ob-alloc { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ob-surface-3); margin-bottom: 12px; } .theme-light .ob-alloc { background: rgba(0, 0, 0, .06); } .ob-alloc span { display: block; height: 100%; } .ob-alloc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--ob-text-dim); } .ob-alloc-legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; } /* --- Asset rows --------------------------------------------------------- */ .ob-asset { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-radius: 14px; color: inherit; transition: background 140ms ease; } .ob-asset:hover { background: rgba(255, 255, 255, .035); color: inherit; } .theme-light .ob-asset:hover { background: rgba(0, 0, 0, .03); } .ob-asset + .ob-asset { border-top: 1px solid var(--ob-border); border-radius: 0; } .theme-light .ob-asset + .ob-asset { border-top-color: rgba(0, 0, 0, .06); } .ob-asset-icon { position: relative; flex: 0 0 auto; width: 42px; height: 42px; } .ob-asset-icon > img:first-child { width: 42px; height: 42px; border-radius: 50%; background: var(--ob-surface-3); } .ob-asset-icon .ob-asset-chain { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ob-surface); background: var(--ob-surface); } .theme-light .ob-asset-icon .ob-asset-chain { border-color: #fff; background: #fff; } .ob-asset-main { min-width: 0; flex: 1 1 auto; } .ob-asset-symbol { font-size: 15px; font-weight: 600; margin: 0 0 2px 0; display: flex; align-items: center; gap: 6px; } .ob-chip { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--ob-surface-3); color: var(--ob-text-dim); } .theme-light .ob-chip { background: rgba(0, 0, 0, .06); color: #6b7280; } .ob-asset-meta { font-size: 11.5px; color: var(--ob-text-faint); margin: 0; font-variant-numeric: tabular-nums; } .ob-up { color: var(--ob-up); } .ob-down { color: var(--ob-down); } .ob-asset-side { text-align: right; flex: 0 0 auto; } .ob-asset-amount { font-size: 14.5px; font-weight: 600; margin: 0 0 2px 0; } .ob-asset-value { font-size: 11.5px; color: var(--ob-text-faint); margin: 0; } /* --- Activity rows ------------------------------------------------------ */ .ob-tx { display: flex; align-items: center; gap: 12px; padding: 11px 4px; color: inherit; } .ob-tx + .ob-tx { border-top: 1px solid var(--ob-border); } .theme-light .ob-tx + .ob-tx { border-top-color: rgba(0, 0, 0, .06); } .ob-tx-icon { width: 38px; height: 38px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex: 0 0 auto; } .ob-tx-main { min-width: 0; flex: 1 1 auto; } .ob-tx-title { font-size: 14px; font-weight: 600; margin: 0 0 1px 0; } .ob-tx-time { font-size: 11px; color: var(--ob-text-faint); margin: 0; } .ob-tx-side { text-align: right; flex: 0 0 auto; } .ob-tx-amount { font-size: 14px; font-weight: 600; margin: 0 0 2px 0; } .ob-status { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; } .ob-status-completed { background: rgba(22, 199, 132, .16); color: var(--ob-up); } .ob-status-pending { background: rgba(240, 185, 11, .16); color: #F0B90B; } .ob-status-failed { background: rgba(246, 70, 93, .16); color: var(--ob-down); } /* --- Banners ------------------------------------------------------------ */ .ob-banner { display: flex; align-items: center; gap: 14px; margin: 0 15px 18px 15px; padding: 16px; border-radius: 20px; border: 1px solid var(--ob-border); color: var(--ob-text); } .ob-banner-warn { background: linear-gradient(135deg, rgba(240, 185, 11, .16), rgba(240, 185, 11, .04)); border-color: rgba(240, 185, 11, .3); } .ob-banner-ok { background: linear-gradient(135deg, rgba(22, 199, 132, .14), rgba(22, 199, 132, .03)); border-color: rgba(22, 199, 132, .28); } .ob-banner-icon { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; } .ob-banner-warn .ob-banner-icon { background: rgba(240, 185, 11, .18); color: #F0B90B; } .ob-banner-ok .ob-banner-icon { background: rgba(22, 199, 132, .18); color: var(--ob-up); } .ob-banner-title { font-size: 14px; font-weight: 600; margin: 0 0 2px 0; } .ob-banner-text { font-size: 11.5px; color: var(--ob-text-dim); margin: 0; } /* The tinted banner grounds are pale in the light theme — darken the ink. */ .theme-light .ob-banner { color: #1f1f1f; } .theme-light .ob-banner-text { color: #6b7280; } /* --- Empty states ------------------------------------------------------- */ .ob-empty { text-align: center; padding: 26px 10px; } .ob-empty i { font-size: 34px; color: var(--ob-text-faint); opacity: .5; display: block; margin-bottom: 10px; } .ob-empty h6 { font-size: 14px; margin: 0 0 4px 0; } .ob-empty p { font-size: 12px; color: var(--ob-text-faint); margin: 0 0 12px 0; } .ob-btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 600; background: var(--ob-surface-2); border: 1px solid var(--ob-border-strong); color: var(--ob-text); } .ob-btn-ghost:hover { background: var(--ob-surface-3); color: var(--ob-text); } .theme-light .ob-btn-ghost { background: #fff; border-color: rgba(0, 0, 0, .1); color: #1f1f1f; } /* --- Search box --------------------------------------------------------- */ /* The template ships no `.search-box` rules at all, so the markup rendered as a raw square browser input. Style it as one rounded field with the icon inside. */ .search-box { display: flex; align-items: center; border-radius: 18px; background: var(--ob-surface); border: 1px solid var(--ob-border); overflow: hidden; transition: border-color 140ms ease, box-shadow 140ms ease; } .theme-light .search-box { background: #fff; border-color: rgba(0, 0, 0, .08); } .search-box:focus-within { border-color: var(--ob-accent); box-shadow: 0 0 0 3px rgba(74, 137, 220, .16); } .search-box > i, .search-box .bi { flex: 0 0 auto; color: var(--ob-text-faint); padding-left: 16px; padding-right: 4px; } .search-box input, .search-box input.border-0, .search-box input[type="text"], .search-box input[type="search"] { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px 0 8px; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 18px; color: var(--ob-text); font-size: 13.5px; } .theme-light .search-box input { color: #1f1f1f; } .search-box input::placeholder { color: var(--ob-text-faint); opacity: 1; } .search-box input::-webkit-search-cancel-button { filter: invert(60%); } /* --- Misc --------------------------------------------------------------- */ .ob-trust { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 18px 0 18px; } .ob-trust img { height: 30px; border-radius: 8px; object-fit: contain; opacity: .85; } .ob-card { margin: 0 15px 22px 15px; padding: 6px 14px; border-radius: 22px; background: var(--ob-surface); border: 1px solid var(--ob-border); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); } .theme-light .ob-card { background: #fff; border-color: rgba(0, 0, 0, .06); box-shadow: rgba(0, 0, 0, .04) 0 20px 25px -5px; } @media (max-width: 360px) { .ob-balance { font-size: 32px; } .ob-action-label { font-size: 10.5px; } }