/* * dcrdata v2 — dark-glass design system (no build step). * * Matches the redesign mockup: a near-black navy base with two drifting ambient * glows behind glassy cards, a fixed 248px sidebar + sticky blurred topbar, and * the Space Grotesk / Manrope / JetBrains Mono type system. Authored as native * CSS with cascade @layers, custom-property tokens, and nesting. Served directly * by the Go binary and versioned by the asset cache-buster. */ @layer reset, tokens, base, layout, components, utilities; /* ---------------------------------------------------------------- reset -- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; } } /* --------------------------------------------------------------- tokens -- */ @layer tokens { :root { color-scheme: dark; /* Surfaces */ --bg: #05070e; --glow-turquoise: rgba(46, 214, 161, 0.16); --glow-blue: rgba(41, 112, 255, 0.14); --card: rgba(255, 255, 255, 0.022); --card-hover: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.07); --border-subtle: rgba(255, 255, 255, 0.05); /* Text */ --text: #eef1f8; --text-2: #9aa3b8; --muted: #8a93a8; --dim: #5e6680; /* Accents — modernized Decred palette */ --turquoise: #2ED6A1; --blue: #5BA8FF; --violet: #9B8CFF; --cyan: #36C5E0; --amber: #F5A623; --down: #FF6B8A; /* Transaction-type mapping */ --tx-regular: var(--blue); --tx-ticket: var(--violet); --tx-vote: var(--turquoise); --tx-revoke: var(--down); /* Type */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-ui: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Geometry */ --sidebar-w: 248px; --radius: 16px; --radius-sm: 10px; --gap: 18px; --content-max: 1240px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; } /* Light theme (the topbar toggle switches data-theme on ). */ [data-theme="light"] { color-scheme: light; --bg: #eef1f6; --glow-turquoise: rgba(46, 214, 161, 0.10); --glow-blue: rgba(41, 112, 255, 0.08); --card: rgba(255, 255, 255, 0.72); --card-hover: rgba(13, 22, 40, 0.04); --border: rgba(13, 22, 40, 0.10); --border-subtle: rgba(13, 22, 40, 0.07); --text: #0e1422; --text-2: #455065; --muted: #5d6779; --dim: #97a0b0; --turquoise: #12b888; --blue: #2f74e0; --violet: #7a66f0; --cyan: #1aa9c8; --amber: #c9820f; --down: #e0436a; } } /* ----------------------------------------------------------------- base -- */ @layer base { body { font-family: var(--font-ui); font-size: 14px; background: var(--bg); color: var(--text); min-height: 100vh; } /* Two ambient radial glows drifting slowly behind everything. */ body::before, body::after { content: ""; position: fixed; z-index: -1; width: 80vw; height: 80vh; border-radius: 50%; filter: blur(40px); pointer-events: none; } body::before { top: -25vh; left: -15vw; background: radial-gradient(circle at center, var(--glow-turquoise), transparent 60%); animation: drift-a 22s ease-in-out infinite alternate; } body::after { bottom: -25vh; right: -15vw; background: radial-gradient(circle at center, var(--glow-blue), transparent 60%); animation: drift-b 26s ease-in-out infinite alternate; } @keyframes drift-a { to { transform: translate(6vw, 5vh); } } @keyframes drift-b { to { transform: translate(-6vw, -4vh); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } a.link { color: var(--blue); } a.link:hover { text-decoration: underline; } } /* --------------------------------------------------------------- layout -- */ @layer layout { .app { min-height: 100vh; } /* Sidebar — fixed glass rail. */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); background: var(--card); backdrop-filter: blur(10px); border-right: 1px solid var(--border); z-index: 30; } .brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); } .brand .mark { width: 38px; height: 38px; flex: none; display: block; border-radius: 11px; } .brand .name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .brand .sub { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; font-weight: 500; } .nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; } .nav a:hover { background: var(--card-hover); color: var(--text); } .nav a.active { color: var(--turquoise); background: color-mix(in srgb, var(--turquoise) 10%, transparent); } /* Node status card pinned to the bottom of the sidebar. */ .node-status { margin-top: auto; padding: var(--sp-3) var(--sp-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; } .node-status .head { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); font-weight: 600; margin-bottom: var(--sp-2); } .node-status .row { display: flex; justify-content: space-between; color: var(--dim); padding: 2px 0; } .node-status .row .v { color: var(--text-2); font-family: var(--font-mono); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); position: relative; } .dot.syncing { background: var(--amber); } .dot.syncing::after { border-color: var(--amber); } .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--turquoise); opacity: 0; animation: ping 2s ease-out infinite; } @keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dot::after { animation: none; } } /* Main column. */ .main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .topbar .spacer { flex: 1; } .content { padding: var(--sp-6); max-width: var(--content-max); width: 100%; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); } .page-head { margin-bottom: var(--sp-5); } .page-head h1 { font-size: 34px; margin-top: var(--sp-2); } @media (max-width: 880px) { .sidebar { transform: translateX(-100%); transition: transform .2s; } .main { margin-left: 0; } } } /* ----------------------------------------------------------- components -- */ @layer components { .card, .panel { background: var(--card); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius); } /* Topbar search. */ .search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: var(--sp-2); padding: 9px var(--sp-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); } .search svg { width: 16px; height: 16px; stroke: var(--muted); flex: none; } .search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 14px; } .search input::placeholder { color: var(--dim); } .price { display: flex; align-items: baseline; gap: var(--sp-2); padding: 7px var(--sp-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; } .price .up { color: var(--turquoise); } .price .down { color: var(--down); } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--text-2); cursor: pointer; } .icon-btn:hover { color: var(--text); border-color: var(--turquoise); } /* Stat tile (sparkline added in the charts phase). */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); } .stat { padding: var(--sp-4) var(--sp-5); position: relative; overflow: clip; } .stat .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .stat .v { font-family: var(--font-display); font-size: 24px; margin-top: var(--sp-2); } .stat .sub { font-size: 12px; color: var(--dim); margin-top: 2px; } .delta-up { color: var(--turquoise); } .delta-down { color: var(--down); } /* Data table. */ .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius); } .data-table { font-size: 14px; } .data-table thead th { text-align: center; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); } .data-table thead th:first-child { text-align: start; padding-inline-start: var(--sp-5); } .data-table thead th:last-child { text-align: end; padding-inline-end: var(--sp-5); } .data-table tbody td { text-align: center; white-space: nowrap; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border-subtle); color: var(--text); } .data-table tbody td:first-child { text-align: start; padding-inline-start: var(--sp-5); } .data-table tbody td:last-child { text-align: end; padding-inline-end: var(--sp-5); color: var(--text-2); } .data-table tbody tr { transition: background .12s; } .data-table tbody tr:hover { background: var(--card-hover); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table .height-link { color: var(--blue); font-weight: 600; font-family: var(--font-mono); } .data-table .height-link:hover { color: var(--turquoise); } .data-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .data-table .muted { color: var(--dim); } /* Signed amounts in the address history. */ .amt-in { color: var(--turquoise); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .amt-out { color: var(--down); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Placeholder where a chart will render in the charts/motion phase. */ .chart-placeholder { height: 180px; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--border-subtle) 0 1px, transparent 1px 12px); display: grid; place-items: center; color: var(--dim); font-size: 13px; } .chip { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .chip[data-kind="votes"] { color: var(--turquoise); } .chip[data-kind="tickets"] { color: var(--violet); } .chip[data-kind="revoke"] { color: var(--down); } .badge { display: inline-block; padding: 1px var(--sp-2); border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--turquoise) 16%, transparent); color: var(--turquoise); } .warn { color: var(--down); } .tag { display: inline-block; padding: 1px var(--sp-2); border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); } .tag[data-kind="regular"] { color: var(--tx-regular); } .tag[data-kind="ticket"] { color: var(--tx-ticket); } .tag[data-kind="vote"] { color: var(--tx-vote); } .tag[data-kind="revoke"] { color: var(--tx-revoke); } /* Summary key/value card. */ .summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4) var(--sp-6); padding: var(--sp-5); } .kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kv .k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .kv .v { font-size: 16px; font-variant-numeric: tabular-nums; } .kv .v.mono { font-family: var(--font-mono); font-size: 13px; } .hash { font-family: var(--font-mono); display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; } .hash .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .copy { cursor: pointer; color: var(--dim); background: none; border: 0; padding: 0 2px; } .copy:hover { color: var(--turquoise); } .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 9px var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; } .btn:hover { border-color: var(--turquoise); } .btn-primary { background: var(--turquoise); color: #05221a; border-color: var(--turquoise); } .alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); font-size: 14px; } .alert-warn { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); background: color-mix(in srgb, var(--down) 8%, transparent); } .alert-ok { color: var(--turquoise); border-color: color-mix(in srgb, var(--turquoise) 40%, transparent); background: color-mix(in srgb, var(--turquoise) 8%, transparent); } /* Forms. */ .form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 720px; } .field { display: flex; flex-direction: column; gap: var(--sp-2); } .field > label { font-size: 13px; font-weight: 600; color: var(--text-2); } .field input, .field textarea, .field select { width: 100%; padding: 10px var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 14px; outline: none; transition: border-color .15s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--turquoise); } .field input::placeholder, .field textarea::placeholder { color: var(--dim); } .field textarea { resize: vertical; min-height: 120px; } .field .mono { font-family: var(--font-mono); } .field-hint { font-size: 12px; color: var(--muted); } /* Monospace output / decoded JSON block. */ .code-block { margin: 0; padding: var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: rgba(0, 0, 0, 0.22); font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 560px; } /* Attack-cost calculator. */ .ac-svg { width: 100%; height: 200px; display: block; } .ac-line { fill: none; stroke: var(--turquoise); stroke-width: 2; vector-effect: non-scaling-stroke; } .ac-grid { stroke: var(--border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; } .ac-51 { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } .ac-51-label { fill: var(--amber); } .ac-axis { fill: var(--dim); font-size: 10px; font-family: var(--font-ui); } .ac-marker { fill: var(--blue); stroke: var(--bg); stroke-width: 2; } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px; background: var(--border); outline: none; margin: var(--sp-3) 0; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--turquoise); cursor: pointer; border: 0; } .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--turquoise); cursor: pointer; border: 0; } .num-input { width: 7ch; padding: 4px var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-family: var(--font-mono); font-size: 13px; outline: none; } .num-input:focus { border-color: var(--turquoise); } select.num-input { width: auto; min-width: 9ch; font-family: var(--font-ui); cursor: pointer; } .ac-line-item { margin-top: var(--sp-2); font-size: 14px; color: var(--text-2); line-height: 1.6; } .ac-line-item .fw { font-weight: 700; color: var(--text); } .attack-total { position: sticky; bottom: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--turquoise) 8%, var(--card)); backdrop-filter: blur(12px); display: flex; align-items: baseline; justify-content: center; gap: var(--sp-3); font-size: 18px; } .attack-total .total-val { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--turquoise); } .attack-total .impossible, .attack-total .impossible .total-val { color: var(--down); } /* Visual blocks. */ .vblocks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); } .vblock { padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); transition: border-color .15s, transform .15s; } .vblock:hover { border-color: var(--turquoise); transform: translateY(-2px); } .vblock.is-mempool { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 6%, var(--card)); } .vblock-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .vblock-head .h { font-family: var(--font-display); font-size: 18px; } .vblock-head .t { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); } .vblock-age { font-size: 11px; color: var(--muted); } .vtrack { display: flex; gap: 2px; height: 12px; margin-top: 4px; border-radius: 4px; overflow: hidden; } .vtrack .seg { display: block; min-width: 2px; } .vtrack .seg.pow { background: var(--turquoise); } .vtrack .seg.pos { background: var(--violet); } .vtrack .seg.dev { background: var(--amber); } .vtrack .seg.fees { background: var(--blue); } .vtrack .cell { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--border); } .vtrack .cell.vote-yes { background: var(--blue); } .vtrack .cell.vote-no { background: var(--down); } .vtrack .cell.ticket { background: var(--violet); } .vtrack .cell.rev { background: var(--down); } .vtrack .cell.tx { flex-grow: 1; background: var(--turquoise); opacity: .85; } .vtrack-label { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin-top: var(--sp-3); } .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } /* Market. */ .price-hero { display: flex; align-items: baseline; gap: var(--sp-2); } .price-hero .lead { color: var(--text-2); font-size: 15px; } .price-hero .big { font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--turquoise); } .price-hero .idx { color: var(--muted); font-size: 14px; } .bin-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); } .bin-group button { padding: 4px var(--sp-3); border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 13px; cursor: pointer; } .bin-group button:hover { color: var(--text); } .bin-group button.active { background: var(--turquoise); color: #05221a; font-weight: 700; } .idx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--gap); } .idx-cell { text-align: center; } .idx-cell .name { font-size: 13px; color: var(--text-2); } .idx-cell .val { font-family: var(--font-mono); font-size: 20px; margin-top: 2px; } /* Pager. */ .pager { display: flex; gap: var(--sp-1); align-items: center; justify-content: flex-end; flex-wrap: wrap; } .pager a, .pager span { min-width: 32px; height: 32px; display: inline-grid; place-items: center; padding-inline: var(--sp-2); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-2); } .pager a:hover { background: var(--card-hover); color: var(--text); } .pager a.active { background: var(--turquoise); color: #05221a; font-weight: 700; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .section-title { font-family: var(--font-display); font-size: 16px; margin-block: var(--sp-6) var(--sp-3); } /* Transaction inputs -> outputs flow. */ .io-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: start; } .io-col { padding: var(--sp-4) var(--sp-5); } .io-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--sp-2); } .io-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); } .io-row:last-child { border-bottom: 0; } .io-id { min-width: 0; display: flex; align-items: center; gap: var(--sp-2); } .io-id a, .io-id .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .io-amt { flex: none; font-variant-numeric: tabular-nums; } .io-arrow { display: grid; place-items: center; color: var(--turquoise); align-self: center; } .io-arrow svg { width: 28px; height: 28px; } @media (max-width: 760px) { .io-flow { grid-template-columns: 1fr; } .io-arrow { transform: rotate(90deg); } } /* Charts. The SVG fills its container; the line draws itself in and the fill fades in behind it. */ .chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .chart-card { padding: var(--sp-4) var(--sp-5); } .chart-card .chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); } .chart-card .chart-head .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .chart-card .chart-head .v { font-family: var(--font-display); font-size: 20px; } .chart-card .chart-body, .chart-body { height: 130px; } .chart { width: 100%; height: 100%; display: block; } .chart-empty { display: grid; place-items: center; height: 100%; color: var(--dim); font-size: 12px; } .donut { width: auto; height: 100%; max-width: 100%; display: block; margin-inline: auto; } @media (max-width: 760px) { .chart-grid { grid-template-columns: 1fr; } } /* Governance proposal cards + vote bars. */ .prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); } .prop-card { padding: var(--sp-4) var(--sp-5); } .prop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-2); } .prop-name { font-weight: 600; } .votebar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--card-hover); margin: var(--sp-3) 0; } .votebar .yes { background: var(--turquoise); } .votebar .no { background: var(--down); } .prop-stats { display: flex; gap: var(--sp-4); font-size: 13px; } /* Gauge (staking pool vs target). */ .gauge { height: 12px; border-radius: 999px; background: var(--card-hover); overflow: hidden; } .gauge-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--turquoise)); } /* Dashboard. */ .chain-strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--gap); } .chain-strip .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .chain-strip .sub { font-size: 12px; color: var(--dim); margin-top: 4px; } .cs-height { font-family: var(--font-display); font-size: 42px; line-height: 1; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; } .cs-v { font-family: var(--font-display); font-size: 24px; margin-top: var(--sp-2); } .cs-col { border-left: 1px solid var(--border-subtle); padding-left: var(--sp-5); } .stat .spark { height: 36px; margin-top: var(--sp-2); } .dash-2col { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--gap); } .dash-donuts { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); } .donut-card { position: relative; padding: var(--sp-4); text-align: center; } .donut-card .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .donut-wrap { height: 120px; margin-top: var(--sp-2); } .donut-label { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 24px; font-family: var(--font-display); font-size: 20px; pointer-events: none; } @media (max-width: 980px) { .chain-strip { grid-template-columns: 1fr 1fr; } .cs-col { border-left: 0; padding-left: 0; } .dash-2col { grid-template-columns: 1fr; } } .chart-line { stroke-dasharray: var(--len, none); animation: chart-draw 1.4s ease forwards; } .chart-fill { opacity: 0; animation: chart-fade 1.2s ease forwards 0.25s; } .donut-ring { stroke-dashoffset: var(--dash); animation: donut-sweep 1.6s ease forwards; } @keyframes chart-draw { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } } @keyframes chart-fade { to { opacity: 1; } } @keyframes donut-sweep { to { stroke-dashoffset: var(--off); } } @media (prefers-reduced-motion: reduce) { .chart-line { animation: none; stroke-dashoffset: 0; } .chart-fill { animation: none; opacity: 1; } .donut-ring { animation: none; stroke-dashoffset: var(--off); } } } /* -------------------------------------------------------------- utility -- */ @layer utilities { .center { text-align: center; } .stack > * + * { margin-block-start: var(--sp-4); } .text-muted { color: var(--muted); } .rowcount { color: var(--muted); font-size: 13px; } .flash { animation: flash 1.2s ease-out; } @keyframes flash { from { background: color-mix(in srgb, var(--turquoise) 22%, transparent); } to { background: transparent; } } @media (max-width: 720px) { .hide-sm { display: none !important; } } }