/* ========================================================================== TsaraPay merchant panel theme — Phase 0/1 (design tokens + shell + dashboard) Tokens copied verbatim from the tsarapay.com landing page :root block. Loaded after cryptency/css/style.css and fo/css/platform.css: it only overrides colour/typography/surface rules on existing selectors, it does not touch layout mechanics (position, flex, grid, widths, transitions) those selectors already carry, since JS (mobile menu, popups) depends on them. ========================================================================== */ :root { /* Contrast between page background and panel surfaces is deliberately wider than the landing page's own verbatim values (see below). A marketing page is viewed briefly, at full brightness, surrounded by imagery/motion that gives the eye extra depth cues. A back-office app is used for long sessions at whatever brightness the merchant's screen happens to be at - and two near-black grays that read as "distinct enough" at full brightness compress toward indistinguishable once luminosity drops, because both are heading toward the same 0. Fixed by widening the actual gap (not just a few points) AND leaning on the gold border as a hue/chroma cue instead of a luminance-only one - a colored line stays visible under dimming far better than gray-on-gray ever does. */ --tsp-obsidian: #06060A; --tsp-obsidian-2: #08090E; --tsp-panel: #1C1E29; --tsp-panel-2: #262838; --tsp-gold: #C9A24B; --tsp-gold-bright: #E4C87E; --tsp-gold-deep: #A6813A; --tsp-grad-gold: linear-gradient(135deg, #E9CE87 0%, #C9A24B 55%, #A6813A 100%); --tsp-platinum: #F1EFE9; --tsp-silver: #AEB0BE; --tsp-silver-dim: #6B6E7D; --tsp-line: rgba(201, 162, 75, .40); --tsp-line-soft: rgba(255, 255, 255, .14); --tsp-up: #59C08A; --tsp-down: #E2685C; --tsp-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(233, 206, 135, .10); /* the landing page never fills a card with flat --tsp-panel - it always uses this top-lit gradient (panel-2 -> panel). That gradient, not a stronger border, is what actually separates a card from the near-black page background there. Our flat-fill cards were missing this and read as nearly invisible against the background - same root cause on every page, not a login-page-only bug. */ --tsp-panel-grad: linear-gradient(180deg, var(--tsp-panel-2), var(--tsp-panel)); /* dedicated input-field surface, one token used everywhere on the site. Reusing --tsp-panel-2 for fields was the bug: --tsp-panel-2 is also the lighter end of --tsp-panel-grad, so a field near the top of a card's gradient was nearly the same colour as the card itself. This is fixed, flat, and clearly lighter than both --tsp-panel and --tsp-panel-2 no matter where on a card it sits. */ --tsp-input-bg: #333650; --tsp-radius: 16px; --tsp-radius-sm: 10px; /* shifted up by the same delta as --tsp-panel-2 so zebra-striped table rows stay visibly distinct from the new, lighter panel surfaces */ --tsp-row-alt: #313443; /* Public Sans: Binance's own publicly-documented, openly-licensed UI typeface (their wordmark font, BinancePlex, is proprietary/unlicensed for third-party use). Used for both body and display - dropped the decorative serif entirely, since Binance's own UI is all-sans. */ --tsp-f-serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tsp-f-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tsp-f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- base / page shell ---------------------------------------------- */ body { background-color: var(--tsp-obsidian); font-family: var(--tsp-f-sans); } #content { background: var(--tsp-obsidian); } /* cryptency/style.css sets html{background:#fff} and nothing ever overrode the element itself (only body/#content were covered). On pages where #contenu loses its flex context (see body#invoice #contenu below) a child's margin-top can collapse straight through every ancestor up to - that hardcoded white is what was exposed as a band at the top of the Accounts/Operators tabs. Root-caused here instead of chasing every page that could trigger the collapse. */ html { background: var(--tsp-obsidian); } p, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, strong, em, b, i, a, quote { font-family: var(--tsp-f-sans); color: var(--tsp-platinum); } .num { font-family: var(--tsp-f-mono); } .title, .title2, .title3, .title4, .title5, .title6, .subtitle { color: var(--tsp-gold-bright); font-family: var(--tsp-f-serif); } /* ---- sidebar (#menu) -------------------------------------------------- */ #menu { background: var(--tsp-panel); border-right: 1px solid var(--tsp-line-soft); } #menu #logo { color: var(--tsp-gold); } #menu ul li a { color: var(--tsp-silver); } #menu ul li a.open, #menu ul li a:hover, #menu ul li a:focus { color: var(--tsp-platinum); background: var(--tsp-panel-2); } #menu ul li a.open::before { background: var(--tsp-grad-gold); filter: none; } #menu ul li a.btn { color: var(--tsp-obsidian); } #menu .link { color: var(--tsp-silver-dim); } #menu .link:hover { color: var(--tsp-gold-bright); } #closemenu { color: var(--tsp-silver); } /* ---- content wrapper / cards ------------------------------------------ */ #contenu { background: var(--tsp-obsidian-2); } #contenu .bloc { background: var(--tsp-panel-grad); border: 1px solid var(--tsp-line-soft); box-shadow: var(--tsp-shadow); } #contenu hr { border-bottom-color: var(--tsp-line-soft); } .btxt { color: var(--tsp-silver); } .little { color: var(--tsp-silver-dim); opacity: 1; } /* stat tiles (moduletriple): unify the old flat purple/violet/blue blocs into consistent dark surfaces with a gold accent, instead of three different solid colours */ #contenu .moduletriple .bloc, #contenu .moduletriple .bloc:first-child, #contenu .moduletriple .bloc:last-child { background: var(--tsp-panel-grad); border: 1px solid var(--tsp-line); border-top: 2px solid var(--tsp-gold); } #contenu .moduletriple .bloc p { color: var(--tsp-silver); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } #contenu .moduletriple .bloc h5 { color: var(--tsp-platinum); font-family: var(--tsp-f-mono); } #contenu .moduletriple .bloc .exp-count { color: var(--tsp-silver-dim); } .contenttable table th, .contenttable table td { color: var(--tsp-silver); border-color: var(--tsp-line-soft); } /* zebra-stripe was a light lavender (#f7f6fb) leftover from the light theme - stood out as a stark white row against the dark background. --tsp-row-alt is a deliberately more noticeable lightening than the panel surface tokens, since the first attempt (--tsp-panel-2) was too close in value to read as alternating rows at all. */ .contenttable table tr:nth-child(2n+1) { background: var(--tsp-row-alt); } .contenttable table td a { color: var(--tsp-gold-bright); } .contenttable table td a:hover { color: var(--tsp-gold); } /* "Balance payout" widget: separate white card, not a .bloc, with its own hardcoded background + purple-tinted shadow */ .etiquette-elt { background: var(--tsp-panel-2); box-shadow: none; border: 1px solid var(--tsp-line); } .title-etiquette { color: var(--tsp-silver); } .value-etiquette { color: var(--tsp-platinum); font-family: var(--tsp-f-mono); } /* hover/click popover ("bulle") used on several stat blocs, e.g. the net revenue per-currency breakdown - still hardcoded white in the original */ .dashboard-bulle { background: var(--tsp-panel-2); border: 1px solid var(--tsp-line); box-shadow: var(--tsp-shadow); } .dashboard-bulle .bulle-elt { color: var(--tsp-platinum); } .dashboard-bulle label.underline { color: var(--tsp-silver); } /* ---- buttons ------------------------------------------------------------ */ /* base .btn (design/cryptency/css/style.css) ships border-radius:35px on a 40px-tall button - a near-full pill/capsule. Same story for .btn-small (design/bo/css/platform.css, also 35px). Softened sitewide to the same subtle corner radius already used on input fields, rather than the pronounced pill shape - !important since several BO/FO pages carry their own inline