/* ========================================================================== CoinPlus — application stylesheet Dark-first fintech UI, light theme via ========================================================================== */ :root { --bg: #070b14; --bg-2: #0b1220; --panel: #0e1526; --panel-2: #131c31; --line: #1e2942; --line-soft: #17203333; --txt: #e9eefa; --txt-2: #a6b3c9; --muted: #6f7d95; --brand: #f7931a; --brand-2: #ffb648; --ok: #34d399; --bad: #f87171; --warn: #fbbf24; --info: #60a5fa; --radius: 16px; --radius-sm: 10px; --shadow: 0 18px 40px -24px rgba(0,0,0,.9); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } html[data-theme="light"] { --bg: #f6f8fc; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f7f9fc; --line: #e7ecf3; --line-soft: #eef2f8; --txt: #0c1424; --txt-2: #48566f; --muted: #76839c; --shadow: 0 1px 2px rgba(13,22,41,.04), 0 14px 30px -20px rgba(13,22,41,.28); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--txt); background: radial-gradient(900px 520px at 12% -8%, rgba(247,147,26,.10), transparent 62%), radial-gradient(760px 460px at 96% 4%, rgba(96,165,250,.08), transparent 60%), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 .9em; } hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; } code, .mono { font-family: var(--mono); font-size: .86em; } .ic { flex: none; vertical-align: -3px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .trunc { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:26px} .mb0{margin-bottom:0}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:26px} .flex { display: flex; gap: 12px; } .flex.mid { align-items: center; } .flex.between { justify-content: space-between; } .flex.wrap { flex-wrap: wrap; } .grid { display: grid; gap: 16px; } /* A grid track sized `1fr` has an automatic minimum of its content's min-content width, so one wide table or unbroken address stretches the entire row past the viewport. Zeroing the min-width of children is what makes the layout shrink. */ .grid > * { min-width: 0; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .span-2 { grid-column: span 2; } .hide { display: none !important; } /* ------------------------------------------------------------------ layout */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 258px; flex: none; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%), var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .sidebar.admin-sidebar { background: linear-gradient(180deg, rgba(247,147,26,.06), transparent 26%), var(--bg-2); } .brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; } .brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #12100b; background: linear-gradient(140deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 22px -12px rgba(247,147,26,.9); } .brand-mark.admin { background: linear-gradient(140deg, #6f7dff, #9f7bff); color: #fff; } .brand-text { display: flex; flex-direction: column; font-weight: 700; letter-spacing: -.01em; } .brand-text small { font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .side-nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 16px 10px 6px; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--txt-2); font-weight: 550; font-size: 14px; transition: .16s; border: 1px solid transparent; } .nav-link:hover { background: rgba(255,255,255,.045); color: var(--txt); } html[data-theme="light"] .nav-link:hover { background: #f2f5fa; } .nav-link.active { background: linear-gradient(90deg, rgba(247,147,26,.16), rgba(247,147,26,.03)); color: var(--txt); border-color: rgba(247,147,26,.28); } .nav-link.active .ic { color: var(--brand); } .nav-link.nav-admin.active { background: linear-gradient(90deg, rgba(111,125,255,.18), transparent); border-color: rgba(111,125,255,.3); } .nav-link.nav-admin.active .ic { color: #9f9bff; } .nav-link.logout:hover { color: var(--bad); } .nav-badge { margin-left: auto; background: var(--brand); color: #12100b; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; } .side-foot { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .balance-mini { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .balance-mini .bm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .balance-mini .bm-head span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .balance-mini strong { font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; } .balance-mini em { display: block; margin-top: 2px; font-size: 11px; color: var(--warn); font-style: normal; } .balance-mini .tier-line { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: nowrap; } .balance-mini .tier-line .pill { font-size: 10px; padding: 2px 7px; white-space: nowrap; } .balance-mini .tier-cta { font-size: 11px; font-weight: 600; white-space: nowrap; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 16px; padding: 16px 26px; border-bottom: 1px solid var(--line); background: rgba(7,11,20,.72); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; } html[data-theme="light"] .topbar { background: rgba(255,255,255,.86); } html[data-theme="light"] .sidebar { background: var(--bg-2); border-right-color: var(--line); } html[data-theme="light"] .sidebar.admin-sidebar { background: linear-gradient(180deg, rgba(247,147,26,.05), transparent 22%), var(--bg-2); } html[data-theme="light"] .card { background: var(--panel); } html[data-theme="light"] body { background-attachment: scroll; } html[data-theme="light"] .doc-thumb { background: #eef2f8; } html[data-theme="light"] .code, html[data-theme="light"] pre { background: #f7f9fc; } .page-title h1 { margin: 0; font-size: 1.24rem; } .page-title p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); } .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: linear-gradient(140deg, #26365e, #1b2540); color: #cfdaf2; } html[data-theme="light"] .avatar { background: linear-gradient(140deg, #e8ecf7, #d6deef); color: #31405f; } .user-chip-txt { display: flex; flex-direction: column; line-height: 1.15; } .user-chip-txt strong { font-size: 13px; } .user-chip-txt small { color: var(--muted); font-size: 11.5px; } .content { padding: 26px; flex: 1; max-width: 1320px; width: 100%; } .app-footer { padding: 18px 26px 30px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ------------------------------------------------------------------- cards */ .card { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card.tight { padding: 14px; } .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .card-head h2, .card-head h3 { margin: 0; } .card-head .spacer { margin-left: auto; } .card-sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .stat-label { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .stat-value { display: block; font-size: 25px; letter-spacing: -.02em; margin: 4px 0 2px; } .stat-sub { font-size: 12.5px; color: var(--txt-2); } .stat.brand { border-color: rgba(247,147,26,.34); background: linear-gradient(180deg, rgba(247,147,26,.09), transparent 55%), var(--panel); } .stat.ok { border-color: rgba(52,211,153,.3); } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: .16s; white-space: nowrap; background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: #14100a; } .btn:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn:active { transform: none; } .btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; } .btn-ghost { background: transparent; border-color: var(--line); color: var(--txt); } .btn-ghost:hover { background: rgba(255,255,255,.05); } html[data-theme="light"] .btn-ghost:hover { background: #f2f5fa; } .btn-soft { background: var(--panel-2); border-color: var(--line); color: var(--txt); } .btn-ok { background: linear-gradient(140deg, #22c55e, #4ade80); color: #06170d; } .btn-danger { background: linear-gradient(140deg, #ef4444, #f87171); color: #1a0606; } .btn-info { background: linear-gradient(140deg, #3b82f6, #60a5fa); color: #041020; } .btn-warn { background: linear-gradient(140deg, #d97706, #fbbf24); color: #1a1204; } .btn-xs { padding: 6px 10px; font-size: 12px; border-radius: 8px; } .btn-sm { padding: 8px 13px; font-size: 13px; } .btn-lg { padding: 13px 22px; font-size: 15.5px; } .btn-block { width: 100%; } .icon-btn { background: var(--panel); border: 1px solid var(--line); color: var(--txt); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; } .icon-btn:hover { background: var(--panel-2); } .only-mobile { display: none; } form.inline { display: inline; } /* -------------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--txt-2); } .chip-live { color: var(--ok); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); } .chip-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: pulse 2.2s infinite; } .chip-warn { color: var(--warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); } .chip-info { color: var(--info); border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.08); } .chip-bad { color: var(--bad); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; border: 1px solid var(--line); color: var(--txt-2); background: var(--panel-2); } .pill-ok { color: var(--ok); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.1); } .pill-bad { color: var(--bad); border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.1); } .pill-warn { color: var(--warn); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); } .pill-info { color: var(--info); border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.1); } .pill-muted { color: var(--muted); } .badge-method { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt-2); } .up { color: var(--ok); } .down { color: var(--bad); } .flat { color: var(--muted); } .up-bg { background: rgba(52,211,153,.1); color: var(--ok); border-color: rgba(52,211,153,.3); } /* ------------------------------------------------------------------- tables */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); max-width: 100%; -webkit-overflow-scrolling: touch; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tbl th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.tbl td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.tbl tbody tr:hover { background: rgba(255,255,255,.022); } html[data-theme="light"] table.tbl tbody tr:hover { background: #f8fafd; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl .num { font-family: var(--mono); font-size: 12.8px; } .amount-in { color: var(--ok); font-weight: 650; } .amount-out { color: var(--bad); font-weight: 650; } .row-actions { display: flex; gap: 6px; } /* -------------------------------------------------------------------- forms */ label.field { display: block; margin-bottom: 14px; } label.field > span.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--txt-2); margin-bottom: 6px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=date], select, textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-2); color: var(--txt); font: inherit; font-size: 14.5px; transition: .15s; } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #fff; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(247,147,26,.16); } input::placeholder { color: #5d6a82; } textarea { min-height: 96px; resize: vertical; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .field-hint { display: block; font-size: 11.8px; color: var(--muted); margin-top: 5px; } .field-error { display: block; font-size: 12.2px; color: var(--bad); margin-top: 5px; } input.invalid, select.invalid { border-color: var(--bad); } .input-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 14px; } .input-group { display: flex; align-items: stretch; } .input-group input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group .addon { display: grid; place-items: center; padding: 0 13px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel-2); color: var(--txt-2); font-weight: 600; font-size: 14px; } .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--txt-2); margin-bottom: 14px; } .check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); flex: none; } .amount-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .amount-quick button { background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-2); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .amount-quick button:hover { border-color: var(--brand); color: var(--txt); } /* ------------------------------------------------------------------- alerts */ .alert { display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13.8px; border: 1px solid var(--line); background: var(--panel); } .alert .ic { margin-top: 2px; } .alert-ok, .alert-success { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.09); color: #b8f2d8; } .alert-error { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: #ffc9c9; } .alert-warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); color: #ffe6ae; } .alert-info { border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.09); color: #c9ddff; } html[data-theme="light"] .alert { color: var(--txt); } .alert a { text-decoration: underline; font-weight: 600; } /* ------------------------------------------------------------------ ticker */ .ticker { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; } .ticker-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--txt-2); } .ticker-head .spacer { margin-left: auto; } .ticker-track { display: flex; gap: 26px; padding: 12px 15px; overflow-x: auto; scrollbar-width: thin; } .tick { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; } .tick b { font-family: var(--mono); font-weight: 600; } .coin-badge { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #0d1526; background: #8ea2c9; text-transform: uppercase; } .coin-badge.coin-btc { background: linear-gradient(140deg,#f7931a,#ffbd5c); color: #241503; } .coin-badge.coin-eth { background: linear-gradient(140deg,#8a92b2,#c0c8e0); } .coin-badge.coin-usdt { background: linear-gradient(140deg,#26a17b,#4ccfa4); color: #04231a; } .coin-badge.coin-bnb { background: linear-gradient(140deg,#f0b90b,#ffd84d); color: #2a1f00; } .coin-badge.coin-sol { background: linear-gradient(140deg,#9945ff,#14f195); color: #06070f; } .coin-badge.coin-xrp { background: linear-gradient(140deg,#23292f,#5b6b7d); color: #e6eef8; } .coin-badge.coin-ada { background: linear-gradient(140deg,#0d1e30,#2f6ca8); color: #e6f0fb; } .coin-badge.coin-doge { background: linear-gradient(140deg,#c2a633,#e8d588); color: #2b2403; } .coin-badge.coin-trx { background: linear-gradient(140deg,#eb0029,#ff6b81); color: #2a0208; } .coin-badge.coin-ltc { background: linear-gradient(140deg,#345d9d,#8fb7f0); color: #05101f; } .coin-badge.coin-link { background: linear-gradient(140deg,#2a5ada,#8fb2ff); color: #040d20; } .coin-badge.coin-avax { background: linear-gradient(140deg,#e84142,#ff8b8c); color: #2a0405; } .coin-badge.coin-dot { background: linear-gradient(140deg,#e6007a,#ff7cc0); color: #2a0317; } .coin-badge.coin-matic{ background: linear-gradient(140deg,#8247e5,#b58cff); color: #0d042a; } .market-row { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1.1fr 1.4fr; gap: 12px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); } .market-row:last-child { border-bottom: 0; } .market-row:hover { background: rgba(255,255,255,.022); } html[data-theme="light"] .market-row:hover { background: #f8fafd; } .coin-cell { display: flex; align-items: center; gap: 11px; min-width: 0; } .coin-cell .name { font-weight: 600; font-size: 14px; } .coin-cell .sym { color: var(--muted); font-size: 11.5px; letter-spacing: .04em; } .spark { width: 100%; height: 34px; display: block; } .price-cell { text-align: right; font-family: var(--mono); font-size: 14px; font-weight: 600; } .change-cell { text-align: right; font-weight: 650; font-size: 13px; } /* -------------------------------------------------------------- auth pages */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .auth-aside { padding: 46px 48px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(600px 420px at 20% 10%, rgba(247,147,26,.16), transparent 60%), linear-gradient(160deg, #0a1020, #070b14); border-right: 1px solid var(--line); } .auth-form-side { display: grid; place-items: center; padding: 40px 24px; } .auth-card { width: 100%; max-width: 430px; } .auth-card h1 { font-size: 1.6rem; } .auth-lead { color: var(--txt-2); font-size: 14px; } .auth-foot { margin-top: 18px; font-size: 13px; color: var(--muted); } .auth-list { display: grid; gap: 14px; margin: 26px 0; } .auth-list div { display: flex; gap: 12px; align-items: flex-start; color: var(--txt-2); font-size: 14px; } .auth-list .ic { color: var(--brand); margin-top: 3px; } .trust-row { display: flex; gap: 20px; color: var(--muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; } .quote { border-left: 2px solid var(--brand); padding-left: 16px; color: var(--txt-2); font-size: 14px; } /* the aside stays dark in every theme, so its text is pinned to light tones */ .auth-aside h1 { color: #fff; } .auth-aside .brand-text { color: #fff; } .auth-aside .brand-text small { color: rgba(255,255,255,.55); } .auth-aside .auth-lead { color: rgba(255,255,255,.74); } .auth-aside .auth-list div { color: rgba(255,255,255,.82); } .auth-aside .auth-list strong { color: #fff; } .auth-aside .trust-row { color: rgba(255,255,255,.6); } .auth-aside .quote { color: rgba(255,255,255,.82); } .auth-aside .quote .muted { color: rgba(255,255,255,.58); } /* ------------------------------------------------------------------ deposit */ .method-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; } .method-tab { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: .15s; } .method-tab input { display: none; } .method-tab.active { border-color: var(--brand); background: linear-gradient(180deg, rgba(247,147,26,.1), transparent 70%), var(--panel); } .method-tab strong { display: block; font-size: 14px; } .method-tab small { color: var(--muted); font-size: 11.8px; } .cc-visual { position: relative; border-radius: 18px; padding: 22px; color: #f4f8ff; overflow: hidden; margin-bottom: 20px; background: linear-gradient(130deg, #1d2a4a, #0f1729 60%, #241a0f); border: 1px solid #2b3860; box-shadow: var(--shadow); } .cc-visual::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px; background: radial-gradient(circle, rgba(247,147,26,.3), transparent 62%); } .cc-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; position: relative; } .cc-chip { width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(140deg, #d9b45e, #f7dd9a); } .cc-num { font-family: var(--mono); font-size: 20px; letter-spacing: .12em; margin: 26px 0 18px; position: relative; } .cc-meta { display: flex; gap: 34px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9fb0cf; position: relative; } .cc-meta b { display: block; font-size: 13px; letter-spacing: .04em; color: #eaf1ff; margin-top: 2px; } .secure-note { display: flex; gap: 9px; align-items: center; font-size: 12.3px; color: var(--muted); margin-top: 12px; } .addr-box { display: flex; gap: 10px; align-items: center; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 12px 14px; } .addr-box code { font-size: 13px; word-break: break-all; } .steps { counter-reset: step; display: grid; gap: 14px; } .steps li { list-style: none; display: flex; gap: 13px; align-items: flex-start; } .steps li::before { counter-increment: step; content: counter(step); width: 25px; height: 25px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--brand); font-size: 12px; font-weight: 700; } .copy-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-2); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .copy-btn:hover { border-color: var(--brand); color: var(--txt); } /* -------------------------------------------------------- wallets / assets */ /* ---------------------------------------------- declutter helpers (info dots) */ .bar-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); /* --soft does not exist: the old #f7f9fc fallback made this strip light-on-light in the dark theme */ } .bar-note .spacer { flex: 1; } .lead-short { font-size: 1.02rem; line-height: 1.5; color: var(--muted); } .lbl-row { display: inline-flex; align-items: center; gap: 6px; } .asset-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .asset-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text, var(--txt)); text-decoration: none; font-size: 13px; line-height: 1.15; } .asset-chip strong { display: block; font-size: 13.5px; } .asset-chip small { color: var(--muted); font-size: 11.5px; } .asset-chip:hover { border-color: var(--brand); } .asset-chip.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); } .asset-chip.unavailable { opacity: .55; cursor: not-allowed; } .asset-chip .tiny { padding: 1px 5px; font-size: 10px; } .chip.tiny { padding: 2px 7px; font-size: 10.5px; } .wallet-pay { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .wallet-pay-main { flex: 1; min-width: 260px; } .kv-inline { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .kv-inline strong { color: var(--txt); } .wallet-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); } .wallet-row:last-child { border-bottom: 0; } .wallet-row strong { display: block; font-size: 13.5px; } .wallet-row .spacer { flex: 1; } .side-col { display: grid; gap: 16px; align-content: start; } .acc-list { display: grid; gap: 10px; } .acc { border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); overflow: hidden; } .acc > summary { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; list-style: none; } .acc > summary::-webkit-details-marker { display: none; } .acc[open] > summary { border-bottom: 1px solid var(--line); } .acc-name strong { display: block; font-size: 14px; } .acc-name small { color: var(--muted); font-size: 12px; } .acc .spacer { flex: 1; } .acc > form { padding: 14px; } /* The large balance reading (deposit and withdraw side columns). It used to be written as .balance-mini, which also matched the sidebar's little widget and blew it up to 1.9rem. Kept deliberately separate now. */ .balance-mini-lg { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 14px; } .balance-mini-lg strong { font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.1; } /* ------------------------------------------------------------- bank transfer */ .bank-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel-2); } .bank-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%); } .bank-head strong { display: block; font-size: 15px; } .bank-head small { color: var(--muted); font-size: 12.5px; } .bank-logo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--brand); color: #14100a; flex: 0 0 auto; } .bank-rows { margin: 0; padding: 4px 16px 14px; } .bank-rows > div { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); } .bank-rows > div:last-child { border-bottom: 0; } .bank-rows dt { flex: 0 0 42%; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .bank-rows dd { margin: 0; flex: 1; font-weight: 600; display: flex; align-items: center; gap: 10px; justify-content: space-between; } .bank-rows .hl { background: color-mix(in srgb, var(--brand) 8%, transparent); margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom: 0; } .bank-rows .hl dt { color: var(--txt); font-weight: 700; } .bank-rows .hl dd { font-size: 15px; } .bank-note { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 12px 16px 15px; color: var(--muted); font-size: 13px; } .mini-panel { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel-2); } .mini-panel strong { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 13.5px; } .method-tab.unavailable { opacity: .62; } .method-tab.unavailable strong::after { content: ' · unavailable'; font-weight: 500; color: var(--warn); } /* --------------------------------------------------------------- info dots The "i" that keeps screens short: the fact stays on the page, the reasoning lives in the popover. Hover, focus and tap all open it. */ .info-wrap { position: relative; display: inline-flex; vertical-align: middle; } .info-dot { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: 0 0 auto; } .info-dot:hover, .info-dot:focus-visible, .info-wrap.open .info-dot { border-color: var(--brand); color: var(--brand); } .info-pop { position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 320px; padding: 10px 12px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.22); color: var(--txt-2); font-size: 12.5px; line-height: 1.5; font-weight: 500; text-align: left; opacity: 0; visibility: hidden; transition: opacity .14s ease, transform .14s ease; pointer-events: none; } .info-wrap:hover .info-pop, .info-wrap:focus-within .info-pop, .info-wrap.open .info-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .info-pop strong { color: var(--txt); } .info-pop a { color: var(--brand); } /* keep popovers inside the viewport on narrow screens */ @media (max-width: 620px) { .info-pop { left: auto; right: -12px; transform: translateX(0) translateY(4px); max-width: 76vw; } .info-wrap:hover .info-pop, .info-wrap:focus-within .info-pop, .info-wrap.open .info-pop { transform: translateX(0) translateY(0); } } /* label + info on one line */ .lbl-row { display: flex; align-items: center; gap: 6px; } .lead-short { color: var(--muted); font-size: 13.5px; margin: -2px 0 14px; } /* ------------------------------------------------------------------ widgets */ .pager { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .page-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--txt-2); } .page-btn:hover { border-color: var(--brand); color: var(--txt); } .page-btn.active { background: var(--brand); color: #14100a; border-color: var(--brand); } .page-btn.disabled { opacity: .4; pointer-events: none; } .empty { text-align: center; padding: 34px 20px; color: var(--muted); } .empty h3 { color: var(--txt); margin: 10px 0 4px; } .empty .btn { margin-top: 10px; } .progress { height: 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .kv { display: grid; grid-template-columns: 168px 1fr; gap: 10px 16px; font-size: 13.8px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 550; word-break: break-word; } .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; } .tab { padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .tab.active { color: var(--txt); border-color: var(--brand); } .strength { display: flex; gap: 5px; margin-top: 7px; } .strength i { height: 4px; flex: 1; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); } .strength i.on-1 { background: var(--bad); border-color: var(--bad); } .strength i.on-2 { background: var(--warn); border-color: var(--warn); } .strength i.on-3 { background: #a3e635; border-color: #a3e635; } .strength i.on-4 { background: var(--ok); border-color: var(--ok); } .toast-host { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 90; } .toast { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 10px; padding: 11px 15px; font-size: 13.5px; box-shadow: var(--shadow); animation: rise .25s ease; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } .skeleton { background: linear-gradient(90deg, var(--panel-2), var(--panel), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } @keyframes shimmer { to { background-position: -200% 0; } } .fade-in { animation: fade .3s ease; } @keyframes fade { from { opacity: 0; } } .ticket-note { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.28); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px; color: var(--txt-2); } .admin-note { background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.28); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px; } /* ------------------------------------------------------------- responsive */ @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .market-row { grid-template-columns: 2fr 1fr 1fr; } .market-row .col-cap, .market-row .col-spark { display: none; } } @media (max-width: 1100px) { /* tablet: equal columns, and shrinkable — the ratio columns are dropped */ .grid-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } } @media (max-width: 900px) { /* Pages set their column ratios inline (style="grid-template-columns:1.2fr 1fr"). An inline declaration outranks any stylesheet rule, so these have to carry !important to actually stack on a phone. */ .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr) !important; } .kv { grid-template-columns: minmax(0,1fr) !important; gap: 3px 0; } .kv dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; } .input-row { grid-template-columns: minmax(0,1fr) !important; } .act-checklist { grid-template-columns: 1fr; } .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-104%); transition: transform .22s ease; box-shadow: 0 0 60px rgba(0,0,0,.6); } .sidebar.open { transform: none; } .only-mobile { display: grid; } .span-2 { grid-column: auto; } .content { padding: 18px 16px; } .topbar { padding: 13px 16px; } .user-chip-txt { display: none; } } @media (max-width: 620px) { .content { padding: 14px 12px 20px; } .topbar { padding: 11px 12px; gap: 10px; } /* the top bar carries status chips that matter more than the name and the price badge on a phone; keep the tier, drop the rest */ .topbar-right .chip-live { display: none; } .user-chip { padding: 4px; border-radius: 50%; border-color: transparent; background: transparent; } .page-title h1 { font-size: 1.15rem; } .page-title p { display: none; } .card { padding: 15px; } .card-head { margin-bottom: 12px; } .card-head h2, .card-head h3 { font-size: 1.02rem; } .market-row { grid-template-columns: 1.8fr 1fr; } .market-row .col-change { display: none; } .cc-num { font-size: 16px; letter-spacing: .08em; } .stat-value { font-size: 21px; } .tbl th, .tbl td { padding-left: 9px; padding-right: 9px; } /* Some tables are not inside a .table-wrap. Rather than wrap them one by one, let the table itself become the scroll container on small screens — the column layout is preserved, it simply scrolls sideways. */ table.tbl { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .btn { padding: 10px 14px; } .btn-lg { padding: 13px 18px; font-size: 15px; } .app-footer { padding: 14px 12px 24px; font-size: 11.5px; } .addr-box code { font-size: 12px; word-break: break-all; } .bank-rows dt { flex: 0 0 46%; font-size: 11px; } } @media print { .sidebar, .topbar, .app-footer { display: none; } .layout { display: block; } } /* ========================================================================== KYC / activation ========================================================================== */ .chip-ok { color: var(--ok); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); } .tier-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .tier-line .pill { font-size: 10.5px; } .tier-cta { font-size: 11.5px; font-weight: 650; color: var(--brand); } /* dashboard banner ---------------------------------------------------------- */ .activation-banner { border-color: rgba(251,191,36,.35); background: linear-gradient(180deg, rgba(251,191,36,.07), transparent 55%), var(--panel); } .activation-banner.is-active { border-color: rgba(96,165,250,.32); background: linear-gradient(180deg, rgba(96,165,250,.07), transparent 55%), var(--panel); } .act-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .act-checklist li { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; } .act-checklist .ic { margin-top: 2px; } /* activation hero ---------------------------------------------------------- */ .activation-hero { border-color: rgba(247,147,26,.3); background: linear-gradient(180deg, rgba(247,147,26,.06), transparent 45%), var(--panel); } .activation-progress { min-width: 220px; } /* stage cards -------------------------------------------------------------- */ .step-card { display: block; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); transition: .16s; height: 100%; } .step-card:hover { transform: translateY(-2px); border-color: rgba(247,147,26,.45); } .step-card.done, .step-card.approved { border-color: rgba(52,211,153,.35); background: linear-gradient(180deg, rgba(52,211,153,.06), transparent 55%), var(--panel); } .step-card.available { border-color: rgba(247,147,26,.5); } .step-card.pending { border-color: rgba(96,165,250,.4); } .step-card.rejected { border-color: rgba(248,113,113,.45); } .step-card.more_info { border-color: rgba(251,191,36,.45); } .step-card.locked { opacity: .62; } .step-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--brand); } .step-card.done .step-num, .step-card.approved .step-num { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); color: var(--ok); } /* uploads ------------------------------------------------------------------ */ .upload-field { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: var(--bg-2); } .upload-field.has-file { border-style: solid; border-color: rgba(52,211,153,.4); } .upload-field input[type=file] { padding: 9px; font-size: 13px; } .upload-field input[type=file]::file-selector-button { background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; margin-right: 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .upload-field input[type=file]::file-selector-button:hover { border-color: var(--brand); } /* admin review ------------------------------------------------------------- */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; } .doc-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel-2); } .doc-thumb { display: grid; place-items: center; height: 118px; background: #0c1striped; background: #0c1322; } .doc-thumb img { width: 100%; height: 118px; object-fit: cover; display: block; } .doc-file { color: var(--muted); font-size: 11px; text-align: center; } .doc-card figcaption { padding: 10px; display: grid; gap: 2px; } .decision-row { display: flex; gap: 8px; flex-wrap: wrap; } .is-locked { opacity: .6; pointer-events: none; } /* ========================================================================== Landing page (public marketing site) Deliberately light-first: this is the shop window, it should read as a clean professional financial product rather than a dark app shell. ========================================================================== */ .lp { --lp-ink: #0b1220; --lp-muted: #5a6a84; --lp-line: #e7ecf3; --lp-soft: #f7f9fc; --lp-navy: #0f2039; --lp-radius: 18px; background: #fff; color: var(--lp-ink); font-size: 16px; line-height: 1.6; } .lp *, .lp *::before, .lp *::after { box-sizing: border-box; } .lp a { color: inherit; } .lp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .lp-section { padding: clamp(56px, 7vw, 104px) 0; } .lp-section.alt { background: var(--lp-soft); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); } .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b4600a; } .lp-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--brand); } .lp-h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.16; letter-spacing: -.025em; margin: 14px 0 12px; font-weight: 750; } .lp-lead { color: var(--lp-muted); font-size: 1.06rem; max-width: 60ch; margin: 0; } .lp-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); } .lp-head.center { margin-left: auto; margin-right: auto; text-align: center; } .lp-head.center .lp-lead { margin-inline: auto; } /* ---------------------------------------------------------------------- nav */ .lp-nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--lp-line); } .lp-nav-in { display: flex; align-items: center; gap: 26px; height: 70px; } .lp-logo { display: flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -.02em; font-size: 1.06rem; } .lp-logo-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #1a1206; background: linear-gradient(140deg, #ffb648, #f7931a); box-shadow: 0 8px 18px -10px rgba(247,147,26,.85); } .lp-logo small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--lp-muted); } .lp-links { display: flex; align-items: center; gap: 4px; margin-left: 10px; } .lp-links a { padding: 9px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 550; color: var(--lp-muted); } .lp-links a:hover { color: var(--lp-ink); background: var(--lp-soft); } .lp-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; } .btn.lp-ghost { background: #fff; border-color: var(--lp-line); color: var(--lp-ink); } .btn.lp-ghost:hover { background: var(--lp-soft); border-color: #d8e0ec; } .lp-menu-toggle { display: none; margin-left: auto; } .lp-menu-only { display: none; } /* only shown inside the phone menu panel */ /* --------------------------------------------------------------------- hero */ .lp-hero { padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 6vw, 76px); background: radial-gradient(1200px 460px at 78% -10%, rgba(247,147,26,.10), transparent 66%), radial-gradient(900px 420px at 6% 4%, rgba(15,32,57,.055), transparent 62%), #fff; } .lp-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(30px, 5vw, 62px); align-items: center; } .lp-h1 { font-size: clamp(2.15rem, 5.1vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; margin: 18px 0 18px; font-weight: 780; } .lp-h1 em { font-style: normal; background: linear-gradient(180deg, transparent 62%, rgba(247,147,26,.24) 0); } .lp-hero .lp-lead { font-size: 1.12rem; } .lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; } .lp-facts { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 22px; border-top: 1px solid var(--lp-line); } .lp-fact { display: flex; flex-direction: column; gap: 1px; } .lp-fact b { font-size: 1.16rem; letter-spacing: -.02em; } .lp-fact span { font-size: 12.5px; color: var(--lp-muted); } /* product mock ------------------------------------------------------------- */ .lp-mock { position: relative; } .lp-mock-card { background: #fff; border: 1px solid var(--lp-line); border-radius: 22px; padding: 20px; box-shadow: 0 2px 4px rgba(13,22,41,.03), 0 34px 60px -34px rgba(13,22,41,.32); } .lp-mock-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--lp-line); } .lp-mock-dots { display: flex; gap: 5px; } .lp-mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e4e9f1; display: block; } .lp-mock-tag { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0b7a4b; background: #e8f8f0; border: 1px solid #c9eede; border-radius: 999px; padding: 3px 9px; } .lp-quote { display: flex; align-items: flex-end; gap: 14px; padding: 16px 0 6px; } .lp-quote .sym { display: flex; align-items: center; gap: 9px; font-weight: 700; } .lp-quote .price { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; margin-left: auto; font-variant-numeric: tabular-nums; } .lp-spark { padding: 6px 0 12px; } .lp-coinrows { display: grid; gap: 2px; } .lp-coinrow { display: grid; grid-template-columns: 1.5fr 1fr .8fr 66px; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; font-size: 13.5px; } .lp-coinrow:hover { background: var(--lp-soft); } .lp-coinrow .nm { display: flex; align-items: center; gap: 9px; font-weight: 600; } .lp-coinrow .pr { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .lp-coinrow .ch { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; } .lp-mock-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 14px; border-radius: 14px; background: var(--lp-soft); border: 1px solid var(--lp-line); font-size: 13px; color: var(--lp-muted); } .lp-mock-foot b { color: var(--lp-ink); } .lp-badge { position: absolute; right: -10px; top: 74px; background: #0f2039; color: #fff; border-radius: 14px; padding: 11px 15px; font-size: 12.5px; line-height: 1.35; box-shadow: 0 20px 40px -24px rgba(13,22,41,.7); display: flex; align-items: center; gap: 10px; } .lp-badge .ic { color: #7ee2b0; } /* -------------------------------------------------------------------- trust */ .lp-trust { border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); background: var(--lp-soft); } .lp-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 26px 0; } .lp-trust-item { display: flex; align-items: flex-start; gap: 11px; font-size: 13.6px; color: var(--lp-muted); } .lp-trust-item .ic { color: #b4600a; margin-top: 2px; } .lp-trust-item b { display: block; color: var(--lp-ink); font-size: 14px; } /* -------------------------------------------------------------------- steps */ .lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } .lp-step { position: relative; padding-top: 30px; } .lp-step::before { content: ""; position: absolute; top: 12px; left: 34px; right: -10px; height: 2px; background: var(--lp-line); } .lp-step:last-child::before { display: none; } .lp-step-n { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--brand); color: #b4600a; font-weight: 750; font-size: 14px; } .lp-step h3 { margin: 14px 0 6px; font-size: 1.02rem; letter-spacing: -.015em; } .lp-step p { margin: 0; color: var(--lp-muted); font-size: 13.8px; } /* ----------------------------------------------------------------- features */ .lp-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lp-feat { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 22px; box-shadow: 0 1px 2px rgba(13,22,41,.03); transition: .18s; } .lp-feat:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -26px rgba(13,22,41,.42); border-color: #dde5f0; } .lp-feat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: #fff4e6; color: #b4600a; border: 1px solid #ffe1bd; } .lp-feat h3 { margin: 0 0 7px; font-size: 1.04rem; letter-spacing: -.015em; } .lp-feat p { margin: 0; color: var(--lp-muted); font-size: 13.9px; } /* ------------------------------------------------------------------ markets */ .lp-table-wrap { border: 1px solid var(--lp-line); border-radius: var(--lp-radius); overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(13,22,41,.03); } .lp-table { width: 100%; border-collapse: collapse; font-size: 14px; } .lp-table th { text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--lp-muted); font-weight: 700; padding: 13px 18px; background: var(--lp-soft); border-bottom: 1px solid var(--lp-line); } .lp-table td { padding: 13px 18px; border-bottom: 1px solid var(--lp-line); font-variant-numeric: tabular-nums; } .lp-table tr:last-child td { border-bottom: 0; } .lp-table .r { text-align: right; } .lp-coin { display: flex; align-items: center; gap: 10px; font-weight: 600; } .lp-up { color: #0b7a4b; font-weight: 650; } .lp-down { color: #c02b2b; font-weight: 650; } /* --------------------------------------------------------------------- tiers */ .lp-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .lp-tier { border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 20px; background: #fff; } .lp-tier.active { border-color: #f7ce9c; box-shadow: 0 20px 40px -30px rgba(247,147,26,.7); } .lp-tier .tnum { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted); } .lp-tier h3 { margin: 8px 0 4px; font-size: 1.05rem; } .lp-tier .desc { color: var(--lp-muted); font-size: 13.4px; min-height: 40px; margin: 0 0 14px; } .lp-tier dl { margin: 0; display: grid; gap: 7px; font-size: 13.4px; } .lp-tier dl div { display: flex; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid var(--lp-line); } .lp-tier dt { color: var(--lp-muted); } .lp-tier dd { margin: 0; font-weight: 650; } .lp-note { margin: 16px 0 0; color: var(--lp-muted); font-size: 12.8px; } /* ------------------------------------------------------------------ security */ .lp-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 52px); align-items: center; } .lp-checks { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; } .lp-checks li { display: flex; gap: 12px; font-size: 14.5px; color: var(--lp-muted); } .lp-checks .ic { color: #0b7a4b; margin-top: 2px; flex: none; } .lp-checks b { color: var(--lp-ink); } .lp-flow { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 22px; box-shadow: 0 24px 48px -34px rgba(13,22,41,.4); } .lp-flow h3 { margin: 0 0 4px; font-size: 1.02rem; } .lp-flow .sub { color: var(--lp-muted); font-size: 13px; margin: 0 0 18px; } .lp-flow-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lp-line); font-size: 14px; } .lp-flow-row:first-of-type { border-top: 0; } .lp-flow-row .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #eef2f8; color: #48566f; font-size: 12px; font-weight: 700; } .lp-flow-row.done .dot { background: #e8f8f0; color: #0b7a4b; } .lp-flow-row.wait .dot { background: #fff4e6; color: #b4600a; } .lp-flow-row b { display: block; } .lp-flow-row span { color: var(--lp-muted); font-size: 13px; } /* ----------------------------------------------------------------------- faq */ .lp-faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; } .lp-faq details { background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; padding: 4px 20px; } .lp-faq details[open] { border-color: #dde5f0; box-shadow: 0 18px 34px -30px rgba(13,22,41,.5); } .lp-faq summary { cursor: pointer; list-style: none; font-weight: 650; font-size: 15px; padding: 15px 0; display: flex; align-items: center; gap: 12px; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--lp-muted); } .lp-faq details[open] summary::after { content: "–"; } .lp-faq p { color: var(--lp-muted); font-size: 14px; margin: 0 0 16px; } /* ----------------------------------------------------------------------- cta */ .lp-cta { background: linear-gradient(135deg, #12233c 0%, #0d1b2f 60%, #17293f 100%); color: #fff; } .lp-cta .lp-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: clamp(48px, 6vw, 78px); padding-bottom: clamp(48px, 6vw, 78px); } .lp-cta h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); letter-spacing: -.028em; margin: 0 0 12px; } .lp-cta p { color: #b7c3d4; margin: 0; max-width: 52ch; } .lp-cta .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; } .lp-cta small { display: block; grid-column: 1 / -1; color: #8ea0b8; font-size: 12.5px; } .btn.lp-light { background: #fff; color: #0f2039; } .btn.lp-outline { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; } .btn.lp-outline:hover { background: rgba(255,255,255,.1); } /* -------------------------------------------------------------------- footer */ .lp-footer { background: #fff; border-top: 1px solid var(--lp-line); padding: 52px 0 28px; color: var(--lp-muted); font-size: 13.6px; } .lp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } .lp-footer h4 { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--lp-ink); margin: 0 0 12px; } .lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .lp-footer a:hover { color: var(--lp-ink); text-decoration: underline; } .lp-footer .about { max-width: 34ch; margin: 12px 0 0; } .lp-footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-top: 1px solid var(--lp-line); margin-top: 36px; padding-top: 20px; font-size: 12.6px; } /* --------------------------------------------------------------- responsive */ @media (max-width: 1080px) { /* Below this width the section links become a panel that drops under the bar rather than a squeezed inline row. */ .lp-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px 18px 16px; background: #fff; border-bottom: 1px solid var(--lp-line); box-shadow: 0 20px 34px -26px rgba(13,22,41,.5); } .lp-links a { padding: 12px 10px; border-radius: 10px; font-size: 15px; } .lp-links a + a { border-top: 1px solid var(--lp-line); } .lp-menu-only { display: flex; color: var(--lp-ink) !important; font-weight: 650; } .lp-menu-toggle { display: grid; } .lp-trust-grid { grid-template-columns: repeat(2, 1fr); } .lp-steps { grid-template-columns: repeat(2, 1fr); } .lp-steps .lp-step::before { display: none; } .lp-feats { grid-template-columns: repeat(2, 1fr); } .lp-tiers { grid-template-columns: repeat(2, 1fr); } .lp-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 980px) { .lp-hero-grid, .lp-split, .lp-cta .lp-wrap { grid-template-columns: 1fr; } .lp-badge { display: none; } .lp-cta .btns { justify-content: flex-start; } .lp-quote .price { font-size: 1.6rem; } } @media (max-width: 700px) { .lp-wrap { padding: 0 18px; } /* Phones: the logo, one action and the menu button are all that fit. The "Sign in" link moves into the menu panel. */ .lp-nav-in { gap: 10px; height: 62px; } .lp-nav-cta { margin-left: auto; gap: 6px; } .lp-nav-cta .lp-ghost { display: none; } .lp-nav-cta .btn-sm { padding: 9px 13px; font-size: 13px; } .lp-logo small { display: none; } .lp-hero { padding-top: 34px; } .lp-facts { gap: 18px; } .lp-trust-grid, .lp-steps, .lp-feats, .lp-tiers, .lp-footer-grid { grid-template-columns: 1fr; } .lp-coinrow { grid-template-columns: 1.4fr 1fr .9fr; } .lp-coinrow .spk { display: none; } .lp-table th:nth-child(3), .lp-table td:nth-child(3) { display: none; } .lp-menu-only { display: flex; } } /* the landing page ships its own light canvas, so neutralise the app body paint */ body.lp-body { background: #fff; background-image: none; } body.lp-body .app-footer { display: none; } .asset-all { margin-top: 10px; } .asset-all > summary { cursor: pointer; font-size: .84rem; color: var(--muted); padding: 4px 0; list-style: none; } .asset-all > summary::-webkit-details-marker { display: none; } .asset-all > summary::before { content: "▸ "; color: var(--muted); } .asset-all[open] > summary::before { content: "▾ "; } .asset-all > summary:hover { color: var(--brand); } /* ------------------------------------------------------------ compact pills */ .pill { white-space: nowrap; } .kv dt, .kv dd { min-width: 0; } /* --------------------------------------------------------------- danger zone */ .danger-card { border-color: rgba(239,68,68,.35); background: linear-gradient(180deg, rgba(239,68,68,.05), transparent 40%), var(--panel); } .danger-form { border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 4px; display: grid; gap: 12px; } .danger-form .btn-danger { justify-self: start; } input[data-match].bad { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(239,68,68,.12); } input[data-match].ok { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(52,211,153,.12); } .btn .rv-label { white-space: nowrap; } .danger-link { color: var(--bad); border-color: rgba(239,68,68,.28); } .danger-link:hover { background: rgba(239,68,68,.1); color: var(--bad); } /* ================================================================ investments */ /* The ratchet is the story: the market line swings, the locked line only steps up, and the dashed floor is the money the customer cannot lose. */ .ratchet-wrap { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px 10px; background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); overflow: hidden; } .ratchet { display: block; width: 100%; height: auto; } .ratchet-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 4px 2px; font-size: 12.5px; color: var(--muted); } .ratchet-legend span { display: inline-flex; align-items: center; gap: 7px; } .ratchet-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; } .ratchet-legend .lg-lock { background: linear-gradient(90deg, var(--brand), var(--brand-2)); height: 4px; } .ratchet-legend .lg-market { background: var(--muted); opacity: .7; } .ratchet-legend .lg-floor { height: 0; border-top: 3px dashed var(--ok); border-radius: 0; } /* --- the four-step explainer ------------------------------------------------ */ .ratchet-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ratchet-step { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 13px 13px 14px; background: var(--panel-2); } .ratchet-step .rs-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ratchet-step .rs-value { font-size: 1.28rem; font-weight: 750; margin: 7px 0 6px; letter-spacing: -.01em; } .ratchet-step .rs-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .ratchet-step.up { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); } .ratchet-step.up .rs-value { color: var(--ok); } .ratchet-step.hold { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); } .ratchet-step.hold .rs-value { color: var(--brand); } .ratchet-step.floor { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); } .ratchet-step:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; opacity: .5; } /* --- asset + term pickers --------------------------------------------------- */ .asset-chip { cursor: pointer; } .asset-chip:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); } .term-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .term-chip { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); cursor: pointer; transition: border-color .15s, box-shadow .15s; } .term-chip strong { font-size: 14.5px; } .term-chip small { color: var(--muted); font-size: 11.5px; } .term-chip input { position: absolute; opacity: 0; pointer-events: none; } .term-chip:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); } .term-chip:has(input:checked) { border-color: var(--brand); background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 14%, transparent), var(--panel-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); } @media (max-width: 900px) { .ratchet-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ratchet-step:nth-child(2)::after, .ratchet-step:nth-child(4)::after { content: none; } } @media (max-width: 620px) { .ratchet-steps { grid-template-columns: minmax(0, 1fr) !important; } .ratchet-step::after { content: none !important; } .ratchet-wrap { padding: 10px 6px 8px; border-radius: 14px; } .ratchet-legend { font-size: 12px; gap: 6px 12px; } .term-picker { grid-template-columns: minmax(0, 1fr); } } /* swap estimate panel */ .quote-box { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: 12px 14px; } .quote-box > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; } .quote-box strong { font-size: 1.05rem; overflow-wrap: anywhere; text-align: right; }