/* Dark is the default (owner, 2026-09-16); light is opt-in through the switch in the header, which writes data-theme on and remembers it. */ :root { --bg: #0b0e11; --card: #161a1e; --ink: #eaecef; --muted: #848e9c; --line: #252a30; --soft: #1e2329; --buy: #0ecb81; --sell: #f6465d; --buy-bg: rgba(14, 203, 129, .13); --sell-bg: rgba(246, 70, 93, .13); --accent: #5b8cff; --warn: #f0c04a; --warn-bg: #2b2412; --danger-bg: #2d1614; --ok-bg: #10281d; --gold: #f5c542; --gold-hi: #ffd76b; --gold-ink: #241a00; } :root[data-theme="light"] { --bg: #f4f5f7; --card: #ffffff; --ink: #14181d; --muted: #6b7480; --line: #e3e6ea; --soft: #f0f2f5; --buy: #0f9d63; --sell: #e0463a; --buy-bg: rgba(15, 157, 99, .12); --sell-bg: rgba(224, 70, 58, .12); --accent: #2b59c3; --warn: #8a5a00; --warn-bg: #fff4d6; --danger-bg: #fde8e6; --ok-bg: #e3f6ec; --gold: #f0a800; --gold-hi: #ffc22e; --gold-ink: #2b1f00; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [hidden] { display: none !important; } .muted { color: var(--muted); } .small { font-size: .8rem; } .up { color: var(--buy); } .down { color: var(--sell); } .top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; padding: .6rem 1rem; background: var(--card); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; } .mark { width: 1.8rem; height: 1.8rem; border-radius: 8px; flex: none; } /* "Exchange" carries the gradient, the way "market" does on market.pc.am. */ .brand b { font-weight: 750; background: linear-gradient(135deg, var(--accent), #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; } .ticker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; flex: 1; min-width: 0; } .tk-pair b { font-size: 1.05rem; } .tk-pair span { color: var(--muted); margin-left: .2rem; } .tk-price { display: flex; flex-direction: column; line-height: 1.15; } .tk-last { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } .tk-basis { font-size: .72rem; color: var(--muted); } .tk { display: flex; flex-direction: column; line-height: 1.25; } .tk span { color: var(--muted); font-size: .72rem; } .tk b { font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; } .who { display: flex; align-items: center; gap: .6rem; margin-left: auto; } /* The account menu. A round button with your initial, the way every other site you use puts your account -- so the three pages behind it are where you would already look for them, instead of being cards you scroll past to trade. */ .account { position: relative; } .avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-weight: 700; font-size: .9rem; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; } .avatar:hover { border-color: var(--accent); } .avatar[aria-expanded="true"] { border-color: var(--accent); } .menu { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 40; min-width: 14rem; padding: .35rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .menu-who { padding: .45rem .6rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; overflow-wrap: anywhere; } .menu-item { display: block; width: 100%; text-align: left; padding: .5rem .6rem; background: none; border: 0; border-radius: 7px; color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; } .menu-item:hover { background: var(--soft); } .menu-item.danger { color: var(--sell); } .menu-sep { height: 1px; background: var(--line); margin: .3rem .2rem; } /* Deposit and Withdraw are errands you arrive intending to do, so they sit at the top of every page rather than inside a card you have to find first. */ .top-actions { display: flex; gap: .6rem; margin-bottom: .9rem; } .top-actions .btn { min-width: 8rem; } .page[hidden] { display: none; } .back { margin-bottom: .8rem; } /* What you hold, where you look first. */ .me-bal { display: flex; gap: 1.2rem; padding: .25rem .8rem; border-radius: 8px; background: var(--soft); } #btn-theme { min-width: 4.2rem; } /* --- phones and small tablets ---------------------------------------------- The header is a wrapping flex row. On a narrow screen the ticker wraps into a tall column and align-items: center then floats the logo into the middle of it, which is what it was doing on every phone. So below this width the header becomes three stacked rows instead: brand and account, then your balances, then the ticker as an even grid that keeps its own columns lined up. Six figures, so the column count always divides six: three on a tablet, two on a phone. auto-fit was tried first and picked five on a tablet, which left price.pc.am stranded on a row of its own. */ /* Two labels for one button: the long one has no room in a phone header, and a sentence truncated mid-word reads as a bug. Declared HERE, before the media query that flips them -- these have equal specificity, so whichever comes last wins, and having the base rule last hid both and produced an empty button. */ .narrow-only { display: none; } @media (max-width: 48rem) { .top { align-items: center; padding: .55rem .85rem; column-gap: .6rem; row-gap: .55rem; } .brand { order: 1; } .who { order: 2; margin-left: auto; gap: .4rem; } .me-bal { order: 3; flex-basis: 100%; justify-content: space-between; padding: .35rem .7rem; } .ticker { order: 4; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .9rem; } .tk-pair { grid-column: 1 / -1; } .tk-last { font-size: 1.5rem; } .wide-only { display: none; } .narrow-only { display: inline; } /* The email is inside the menu now, where it has a whole row to itself. */ .menu { min-width: min(16rem, calc(100vw - 1.6rem)); } .top-actions .btn { flex: 1; min-width: 0; } /* A finger is not a mouse: nothing meant to be pressed stays under ~34px. */ .btn.small, .seg button, .pcts button { min-height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; } .seg button { padding: .3rem .6rem; } .foot a { display: inline-block; padding: .55rem .8rem; } .ohlc { font-size: .72rem; } .ohlc b { margin: 0 .5rem 0 .12rem; } } /* Narrower than this, the header row fits the logo and the two account buttons and nothing else, and open/high/low are usually the close repeated. */ @media (max-width: 30rem) { /* The email used to be hidden here because the header had no room for it. It lives inside the account menu now, which has a whole row for it, so the old rule would blank the one place that identifies whose account this is. */ /* Two columns: at this width three would be narrower than the price itself. */ .ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ohlc .f-o, .ohlc .f-h, .ohlc .f-l { display: none; } } main { max-width: 88rem; margin: 0 auto; padding: .9rem 1rem 2rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .9rem; min-width: 0; } .card.narrow { max-width: 26rem; } h2 { font-size: .95rem; margin: 0 0 .6rem; font-weight: 650; } h3 { font-size: .9rem; margin: .9rem 0 .3rem; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; } .card-head h2 { margin: 0; } .terminal { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "chart book" "trade trades"; margin-bottom: .9rem; } .terminal > .card { margin: 0; } .chart-card { grid-area: chart; } .book-card { grid-area: book; } .trade-card { grid-area: trade; } .trades-card { grid-area: trades; } @media (max-width: 62rem) { .terminal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "book" "trade" "trades"; } } .seg { display: flex; gap: .15rem; background: var(--soft); padding: .15rem; border-radius: 7px; } .seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; padding: .25rem .55rem; border-radius: 5px; cursor: pointer; } .seg button.active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); } .ohlc { font-size: .78rem; color: var(--muted); min-height: 1.3em; font-variant-numeric: tabular-nums; } .ohlc b { font-weight: 500; margin: 0 .7rem 0 .15rem; } .ohlc .f { white-space: nowrap; } .chart-card { display: flex; flex-direction: column; } .chart-wrap { position: relative; flex: 1; min-height: 25rem; } @media (max-width: 40rem) { .chart-wrap { min-height: 17rem; } } #chart { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; } .chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); } .cols, .lvl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; font-variant-numeric: tabular-nums; } .cols { color: var(--muted); font-size: .72rem; padding: 0 .35rem .25rem; } .cols span:not(:first-child), .lvl span:not(:first-child) { text-align: right; } .lvl { font-size: .8rem; padding: .12rem .35rem; border-radius: 3px; cursor: pointer; } .lvl:hover { background-color: var(--soft); } .lvl.ask { background-image: linear-gradient(to left, var(--sell-bg) var(--depth, 0%), transparent var(--depth, 0%)); } .lvl.bid { background-image: linear-gradient(to left, var(--buy-bg) var(--depth, 0%), transparent var(--depth, 0%)); } .lvl.ask span:first-child { color: var(--sell); } .lvl.bid span:first-child { color: var(--buy); } .levels.scroll { max-height: 17rem; overflow: auto; } .trades-card .lvl { cursor: default; } .mid { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .45rem .35rem; margin: .25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mid b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .empty-side { color: var(--muted); font-size: .8rem; padding: .3rem .35rem; } .empty-side .empty-hint { margin-top: .35rem; opacity: .85; line-height: 1.45; } .forms { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; } @media (max-width: 40rem) { .forms { grid-template-columns: 1fr; } } .order-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .order-head h2 { margin: 0; } label { display: block; margin: .5rem 0; color: var(--muted); font-size: .8rem; } .unit { float: right; } input, select { display: block; width: 100%; margin-top: .2rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; } input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .pcts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; } .pcts button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 5px; padding: .2rem; font: inherit; font-size: .75rem; cursor: pointer; } .pcts button:hover { color: var(--ink); border-color: var(--muted); } .btn { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; } .btn.ghost { background: transparent; color: var(--accent); } .btn.small { padding: .25rem .55rem; font-size: .8rem; font-weight: 500; } .btn.wide { width: 100%; margin-top: .3rem; padding: .6rem; } .btn.buy { background: var(--buy); border-color: var(--buy); } .btn.sell { background: var(--sell); border-color: var(--sell); } .btn:disabled { opacity: .55; cursor: default; } .signed-out { text-align: center; padding: 2rem 1rem; color: var(--muted); } /* The referral card. Its own accent, because it is an offer rather than a reading: everything else on this page tells you what is true, this one asks you to do something. */ /* The one thing on this page that ASKS rather than reports, so it is the one thing that does not use the page's blue. Dark ink on gold, not white: gold is a light colour and white on it fails contrast in both themes. */ .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; } .btn.gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); } .gold-ink { color: var(--gold); } #dlg-bounty { border-color: var(--gold); } #dlg-bounty .signed-out { padding: .6rem 0; text-align: left; } .rf-link { margin: .6rem 0 .3rem; } .rf-link input { flex: 1; min-width: 0; font-family: Consolas, "Courier New", monospace; font-size: .85rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); color: var(--ink); } body.authed .signed-out { display: none; } body:not(.authed) .needs-auth { display: none; } .grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; margin-bottom: .9rem; } .grid > .card { margin: 0; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .85rem; } th, td { text-align: left; padding: .35rem .45rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 500; font-size: .75rem; } .kv th { width: 60%; } /* A cancelled order is finished business: grey, including the side, which is otherwise green or red. */ tr.cancelled td, tr.cancelled td.up, tr.cancelled td.down { color: var(--muted); } .row { display: flex; gap: .5rem; flex-wrap: wrap; } .row input { flex: 1 1 9rem; width: auto; margin: 0; } .banner { padding: .7rem .9rem; border-radius: 8px; margin-bottom: .9rem; border: 1px solid var(--line); background: var(--card); display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; } .banner.warn { background: var(--warn-bg); color: var(--warn); } .banner.danger { background: var(--danger-bg); } .banner.ok { background: var(--ok-bg); } .est { color: var(--muted); font-size: .8rem; min-height: 1.3em; margin: .4rem 0; } .toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; max-width: min(26rem, calc(100vw - 2rem)); } .toast { padding: .65rem .85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .85rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); cursor: pointer; transition: opacity .2s ease, transform .2s ease; } .toast.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); } .toast.ok { background: var(--ok-bg); border-color: var(--buy); } .toast.leaving { opacity: 0; transform: translateY(6px); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } .note { color: var(--muted); font-size: .8rem; margin: .3rem 0; } .warn-text { color: var(--warn); } .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } details.card summary { cursor: pointer; font-weight: 650; } details.card[open] summary { margin-bottom: .5rem; } .facts { margin: 0; padding-left: 1.1rem; } .facts li { margin: .25rem 0; } .foot { text-align: center; padding: 1rem; } .foot a { color: var(--muted); } dialog { max-width: 40rem; width: calc(100% - 2rem); border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); } dialog::backdrop { background: rgba(0, 0, 0, .5); } .ask { max-width: 27rem; padding: 1.1rem 1.2rem; } /* The deposit and withdraw sheets: the same dialog shell as the confirm box, a little wider because they hold forms rather than a sentence. */ .sheet { max-width: 30rem; width: calc(100vw - 2rem); padding: 1.1rem 1.2rem; } .sheet h3 { margin-top: 1rem; } .row-tight { display: flex; gap: .4rem; } .ask h2 { margin: 0 0 .5rem; font-size: 1rem; } .ask-text { color: var(--muted); font-size: .88rem; margin: 0 0 .7rem; } .ask-rows { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0 0 .7rem; font-size: .88rem; } .ask-rows dt { color: var(--muted); } .ask-rows dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .ask-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .9rem; } .ask-actions .btn { min-width: 7.5rem; } @media (max-width: 26rem) { .ask-actions { flex-direction: column-reverse; } .ask-actions .btn { width: 100%; } } .policy-body { white-space: pre-wrap; max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .8rem; margin-bottom: .8rem; } .status-held { color: var(--warn); } /* ── two-factor enrolment sheet ────────────────────────────────────────── The QR is the whole point of this dialog, so it gets the room. White plate behind it regardless of theme: a dark-on-dark QR is unreadable to a phone camera, and this is the one image that has to scan first time. */ .qr-holder { display: flex; justify-content: center; background: #fff; border-radius: 12px; padding: 14px; margin: 14px 0; } .qr-holder svg { display: block; width: 100%; height: auto; max-width: 260px; } .tf-manual { margin: 6px 0 12px; } .tf-manual > summary { cursor: pointer; color: var(--muted); font-size: .9rem; } .tf-manual > summary:hover { color: var(--text); } .tf-key { word-break: break-all; user-select: all; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 1.02rem; letter-spacing: .04em; } #form-2fa-modal { display: flex; gap: 8px; margin: 10px 0; } #form-2fa-modal input { flex: 1 1 auto; font-size: 1.1rem; letter-spacing: .12em; text-align: center; } @media (max-width: 30rem) { .qr-holder { padding: 10px; } .qr-holder svg { max-width: 220px; } #form-2fa-modal { flex-direction: column; } }