/* ============================================================ taler-explorer — modern dark glassmorphism theme. Accent is set inline on from config (--accent). ============================================================ */ :root { --bg-0: #0b0d12; --bg-1: #10131b; --bg-2: #161a25; --fg: #e8ecf4; --fg-muted: #8a93a6; --border: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.12); --glass: rgba(22, 26, 37, 0.55); --glass-blur: 14px; --good: #3cc98a; --warn: #f4b860; --danger:#ea5a74; --accent: #c9a24b; --accent-soft: color-mix(in oklab, var(--accent) 35%, #10131b); --shadow: 0 10px 30px rgba(0,0,0,0.5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Inter", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95em; } .bold { font-weight: 600; } /* ---------- Animated aurora background ---------- */ .aurora { position: fixed; inset: -10vh -10vw auto -10vw; height: 70vh; z-index: -1; background: radial-gradient(closest-side at 20% 20%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%), radial-gradient(closest-side at 80% 10%, rgba(90, 140, 255, 0.12), transparent 70%), radial-gradient(closest-side at 50% 80%, rgba(60, 201, 138, 0.08), transparent 70%); filter: blur(40px); animation: aurora-drift 24s ease-in-out infinite alternate; pointer-events: none; } @keyframes aurora-drift { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(3%, 4%, 0) scale(1.07); } } /* ---------- Header / nav ---------- */ .site-header { display: flex; flex-direction: column; gap: 12px; padding: 14px 32px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .site-header-top { display: grid; grid-template-columns: auto auto 1fr auto; /* brand · lang · nav · search */ align-items: center; gap: 16px; } /* Language switcher (between brand and nav) */ .lang-switch { position: relative; } .lang-current { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--fg); font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s; } .lang-current:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); } .lang-caret { font-size: 9px; opacity: .6; } .lang-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px; list-style: none; margin: 0; box-shadow: var(--shadow); z-index: 30; min-width: 160px; } .lang-menu li { margin: 0; } .lang-menu button { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: transparent; border: 0; color: var(--fg); padding: 6px 10px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; transition: background .12s; } .lang-menu button:hover { background: rgba(255,255,255,0.06); } .lang-menu button.active { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); } .lang-menu .lang-native { color: var(--fg-muted); font-size: 11px; font-weight: 500; } /* Search form */ .search-form { display: flex; align-items: stretch; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; min-width: 260px; max-width: 420px; transition: border-color .15s, box-shadow .15s; } .search-form:focus-within { border-color: color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); } .search-form input[type="search"] { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); padding: 8px 12px; font: inherit; font-size: 13px; min-width: 0; } .search-form input[type="search"]::placeholder { color: var(--fg-muted); } .search-form button { background: transparent; border: 0; color: var(--fg-muted); padding: 0 12px; font-size: 18px; cursor: pointer; transition: color .15s; } .search-form button:hover { color: var(--accent); } @media (max-width: 900px) { .site-header-top { grid-template-columns: auto 1fr; row-gap: 10px; } .search-form { grid-column: 1 / -1; min-width: 0; max-width: none; width: 100%; } .nav { justify-self: start; flex-wrap: wrap; } } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; } .brand:hover { text-decoration: none; } .brand-mark { width: 44px; height: 44px; border-radius: 50%; display: block; transform: perspective(500px) rotateY(0deg); transform-origin: center center; will-change: transform; transition: transform .35s cubic-bezier(.2,.7,.2,1); } /* Desktop: spin continuously while the mouse sits over the brand. */ @media (hover: hover) { .brand:hover .brand-mark { animation: coin-spin 2s linear infinite; } } /* Tap / click: two crisp turns then stop. This class overrides the hover animation via specificity and is removed on `animationend`. */ .brand-mark.spin-once { animation: coin-spin-once 1.2s cubic-bezier(.22,.61,.36,1) both; } @keyframes coin-spin { from { transform: perspective(500px) rotateY(0deg); } to { transform: perspective(500px) rotateY(360deg); } } @keyframes coin-spin-once { from { transform: perspective(500px) rotateY(0deg); } to { transform: perspective(500px) rotateY(720deg); } } .brand-name { display: inline-flex; flex-direction: column; line-height: 1.05; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); } .brand-line { display: block; } .brand-line:last-child { color: var(--accent); font-weight: 600; } .nav { display: flex; gap: 18px; justify-self: end; } .nav a { color: var(--fg-muted); font-weight: 500; padding: 6px 10px; border-radius: 8px; transition: color .2s, background .2s; } .nav a:hover { color: var(--fg); background: rgba(255,255,255,0.04); text-decoration: none; } .nav a.active { color: var(--fg); background: color-mix(in oklab, var(--accent) 14%, transparent); } .nav a { display: inline-flex; align-items: center; gap: 6px; } .nav-icon { flex-shrink: 0; vertical-align: middle; opacity: 0.85; } .nav a.active .nav-icon { color: var(--accent); opacity: 1; } .nav a:hover .nav-icon { opacity: 1; } /* Six-tile header: - 6 × 1 on very wide screens (>= 1600px) — each tile still has room for the sparkline + numeric value without ellipsis-truncating. - 3 × 2 on typical laptops/desktops (>= 700px). - 2 × 3 on very narrow viewports (default). */ .header-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: stretch; width: 100%; } @media (min-width: 700px) { .header-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (min-width: 1600px) { .header-stats { grid-template-columns: repeat(6, 1fr); gap: 10px; } } .tile { /* Opaque fill — tiles must stay readable when header overlaps page content. */ background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px 12px; min-width: 0; box-shadow: var(--shadow); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 62px; } .tile.small { padding: 8px 12px; } .tile.tile-empty { background: color-mix(in oklab, var(--bg-2) 80%, transparent); } .tile.tile-empty .stat-value { color: var(--fg-muted); } .tile.stale { border-color: rgba(234, 90, 116, 0.35); } .tile.stale::after { content: "stale"; position: absolute; top: 6px; right: 10px; font-size: 10px; color: var(--danger); letter-spacing: .06em; text-transform: uppercase; } .stat-label { color: var(--fg-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .stat-value { font-size: 18px; font-weight: 700; color: var(--fg); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-value.muted { color: var(--fg-muted); font-weight: 500; } .stat-sub { color: var(--fg-muted); font-size: 10px; margin-top: 1px; } .quote-chip { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .06em; background: rgba(255,255,255,0.05); color: var(--fg-muted); border: 1px solid var(--border-strong); } /* Split PoW / PoS difficulty tile — both visible at once, no toggle. */ .diff-split { display: grid; gap: 1px; margin-top: 1px; } .diff-line { display: flex; align-items: baseline; gap: 6px; } .diff-tag { font-size: 9px; color: var(--fg-muted); background: rgba(255,255,255,0.04); border-radius: 3px; padding: 1px 5px; letter-spacing: .08em; font-weight: 700; min-width: 28px; text-align: center; } .diff-val { font-size: 13px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } /* Clickable tile (price, market cap) */ .tile-link { text-decoration: none; color: var(--fg); transition: border-color .15s, background .15s, transform .15s; cursor: pointer; } .tile-link::after { content: "↗"; position: absolute; top: 6px; right: 8px; font-size: 10px; color: var(--fg-muted); opacity: .55; transition: opacity .15s, color .15s; } .tile-link:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 6%, var(--glass)); text-decoration: none; } .tile-link:hover::after { opacity: 1; color: var(--accent); } .price-value { letter-spacing: -0.01em; } .price-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .trend { font-size: 10px; font-weight: 700; letter-spacing: .02em; } .trend.up { color: var(--good); } .trend.down { color: var(--danger); } .trend.flat { color: var(--fg-muted); } /* ---------- Main layout ---------- */ .container { max-width: 1200px; margin: 32px auto 0; padding: 0 24px 80px; } .hero { margin: 8px 0 22px; } .hero h1 { font-size: 30px; margin: 0 0 4px; letter-spacing: -0.02em; } .hero .subtitle { color: var(--fg-muted); margin: 0; } .chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); margin: 0 2px; } /* ---------- Card ---------- */ .card { background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } .summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; } .summary { padding: 16px 18px; } .kpi { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(180deg, var(--fg), color-mix(in oklab, var(--accent) 30%, var(--fg))); -webkit-background-clip: text; background-clip: text; color: transparent; } .kpi-label { color: var(--fg-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .version-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; } .version-list li { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--fg-muted); } .version-list .version-tag { color: var(--fg); font-weight: 500; } .version-list .version-count { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; } .version-list.compact { gap: 2px; } .version-list.compact li { line-height: 1.3; padding: 0; } /* Small subscript next to a KPI label, e.g. "Countries (12)" */ .kpi-sub { color: var(--fg-muted); font-size: 0.85em; font-weight: 500; letter-spacing: 0; } /* "See all" overflow button at the bottom of the Countries / Versions cards. */ .see-all-btn { margin-top: 8px; background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px; cursor: pointer; align-self: flex-start; transition: background .15s, border-color .15s; } .see-all-btn:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); } /* ----- Modal: full-viewport overlay teleported to ------------------ */ .m-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 16, 0.72); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); padding: 24px; } .m-card { width: 100%; max-width: 560px; max-height: min(86vh, 720px); background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; overflow: hidden; } .m-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .m-title { font-size: 18px; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .m-x { background: transparent; border: 0; color: var(--fg-muted); width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, transform .15s; } .m-x:hover { background: rgba(255,255,255,0.06); color: var(--fg); transform: rotate(90deg); } .m-body { overflow-y: auto; padding: 6px 12px 18px; /* Custom scrollbar matching the dark theme */ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .m-body::-webkit-scrollbar { width: 8px; } .m-body::-webkit-scrollbar-track { background: transparent; } .m-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } .m-body::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--accent) 60%, var(--border-strong)); background-clip: content-box; } .m-list { list-style: none; margin: 0; padding: 0; } .m-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px; border-radius: 10px; transition: background .12s; } .m-row + .m-row { border-top: 1px solid var(--border); border-radius: 0; } .m-row:hover { background: rgba(255,255,255,0.04); } .m-row-label { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .m-row-name { color: var(--fg); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-row-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--fg-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.04em; } .m-row-count { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--accent); min-width: 32px; text-align: right; } /* Alpine x-transition classes — fade + scale */ .m-anim-enter { transition: opacity .18s ease-out, transform .18s ease-out; } .m-anim-enter-from { opacity: 0; } .m-anim-enter-to { opacity: 1; } .m-anim-leave { transition: opacity .14s ease-in; } .m-anim-leave-from { opacity: 1; } .m-anim-leave-to { opacity: 0; } .m-anim-enter .m-card, .m-anim-leave .m-card { transition: transform .2s ease-out; } .m-anim-enter-from .m-card { transform: scale(0.94) translateY(6px); } .m-anim-enter-to .m-card { transform: scale(1) translateY(0); } .m-anim-leave-from .m-card { transform: scale(1); } .m-anim-leave-to .m-card { transform: scale(0.96); } @media (max-width: 600px) { .m-overlay { padding: 12px; } .m-card { max-height: 92vh; border-radius: 14px; } .m-head { padding: 14px 16px; } .m-title { font-size: 16px; } } /* Total-count pill rendered next to a KPI label (Countries, Versions, etc.) */ .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: 0; vertical-align: middle; margin-left: 6px; } /* Total Peers card — bigger numeric, with synced / not-synced breakdown underneath so the card doesn't look empty next to the version/country lists. */ .peers-summary { display: flex; flex-direction: column; gap: 4px; } .peers-summary .peers-kpi { font-size: 56px; line-height: 1; margin: 4px 0; letter-spacing: -0.03em; } .peers-breakdown { display: flex; flex-direction: column; gap: 4px; margin-top: auto; } .peers-breakdown-row { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); } .peers-breakdown-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .peers-breakdown-row .dot.ok { background: var(--good); } .peers-breakdown-row .dot.bad { background: var(--fg-muted); opacity: 0.5; } .peers-breakdown-row .num { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; } .peers-breakdown-row .lbl { color: var(--fg-muted); } /* Map peer markers — small drop shadow + slight transition for hover */ .leaflet-marker-icon.peer-marker-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition: transform .15s; } .leaflet-marker-icon.peer-marker-icon:hover { transform: scale(1.25); } .version-tag { color: var(--fg); } .version-count { color: var(--accent); font-weight: 700; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); } .data-table th { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); background: rgba(255,255,255,0.02); position: sticky; top: 0; } .data-table td.num, .data-table th.num { text-align: right; } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background .2s, transform .2s; } .data-table tbody tr:hover { background: rgba(255,255,255,0.03); } /* Gentle fade for new rows on HTMX swap. No transform = no layout jump. */ @keyframes row-fade { from { opacity: 0; background: color-mix(in oklab, var(--accent) 12%, transparent); } to { opacity: 1; background: transparent; } } .row-in { animation: row-fade 500ms ease-out both; } .badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--border-strong); margin-right: 4px; } .badge.confirmed { color: var(--good); border-color: color-mix(in oklab, var(--good) 40%, transparent); } .badge.mempool { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, transparent); } .badge.pow { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); } .badge.pos, .badge.coinstake { color: #7ea8ff; border-color: rgba(126, 168, 255, 0.4); } .badge.direction.in { color: #7ea8ff; border-color: rgba(126, 168, 255, 0.4); } .badge.direction.out { color: var(--good); border-color: color-mix(in oklab, var(--good) 40%, transparent); } a.badge { text-decoration: none; } a.badge:hover { text-decoration: underline; } /* Secondary decimals — integer portion prominent, decimals smaller & dimmer */ .tlr-dec { font-size: 0.78em; color: var(--fg-muted); font-weight: 500; letter-spacing: 0.01em; } /* Amount color tiers */ .amount-blue { color: #5bb6ff; } .amount-green { color: var(--good); } .amount-yellow { color: var(--warn); } .amount-red { color: var(--danger); } .amount-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; margin: 0 2px; border: 1px solid currentColor; opacity: .9; } /* Clickable rows — cursor + focus style, but don't swallow inner links */ tbody tr[role="link"] { cursor: pointer; } tbody tr[role="link"]:focus { outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: -2px; } .cell-link { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in oklab, var(--accent) 40%, transparent); } .cell-link:hover { color: var(--accent); text-decoration: none; } .small-time { font-size: 12px; color: var(--fg-muted); white-space: nowrap; } .break-all { word-break: break-all; } /* Movement tiers */ tr.tier-low td.bold { color: var(--warn); } tr.tier-mid td.bold { color: #f28c4e; } tr.tier-high td.bold { color: var(--danger); } tr.tier-high { background: color-mix(in oklab, var(--danger) 8%, transparent); } tr.tier-mid { background: color-mix(in oklab, var(--warn) 6%, transparent); } .copy-btn { background: transparent; border: none; color: var(--fg-muted); font-size: 15px; cursor: pointer; padding: 0 2px; transition: color .2s, transform .2s; } .copy-btn:hover { color: var(--accent); transform: scale(1.15); } .flag { font-size: 18px; vertical-align: middle; margin-right: 6px; } .flag-bywr { vertical-align: middle; display: inline-block; border: 1px solid rgba(0,0,0,.15); border-radius: 1px; } .country-name { color: var(--fg); } .country-name.muted { color: var(--fg-muted); } .subver { color: var(--fg-muted); } .last-seen { color: var(--fg-muted); font-size: 12px; } /* IP-mask: server replaces the first 2 IPv4 octets / non-trailing IPv6 groups with placeholder chars and wraps them in this span. CSS adds a static blur for visual flourish. The masked text never reveals the real IP — selecting / copying gives only the placeholder characters. */ .ip-mask { filter: blur(2.5px); user-select: none; opacity: 0.85; letter-spacing: 0.02em; } [x-cloak] { display: none !important; } /* Card toolbar + refresh button */ .card-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 14px; margin-bottom: 4px; } /* List/Map switcher */ .view-switch { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; } .view-switch button { background: transparent; border: 0; color: var(--fg-muted); padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .view-switch button:hover { color: var(--fg); } .view-switch button.active { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent); } /* Peer world map */ .peer-map { height: 460px; border-radius: 0 0 16px 16px; overflow: hidden; background: #0f1218; } .peer-map .leaflet-tile-pane { filter: grayscale(60%) brightness(0.7) invert(0); } .peer-map .leaflet-container { background: #0f1218; } .peer-map .leaflet-popup-content-wrapper, .peer-map .leaflet-popup-tip { background: var(--bg-2); color: var(--fg); border: 1px solid var(--border-strong); } .peer-map .leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.45; } .peer-map .leaflet-control-attribution { background: rgba(11,13,18,0.7); color: var(--fg-muted); } .peer-map .leaflet-control-attribution a { color: var(--accent); } .btn-refresh { background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .15s, border-color .15s; } .btn-refresh:hover { background: rgba(255,255,255,0.08); border-color: color-mix(in oklab, var(--accent) 50%, transparent); } .btn-refresh .refresh-glyph { font-size: 15px; line-height: 1; } .htmx-indicator { opacity: 0; transition: opacity .15s; color: var(--fg-muted); } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } .htmx-request .refresh-glyph { animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Pagination */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--border); align-items: center; } .page-link { display: inline-block; padding: 6px 10px; min-width: 32px; text-align: center; font-size: 13px; font-weight: 600; color: var(--fg); background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong); border-radius: 8px; text-decoration: none; transition: background .15s, border-color .15s; } .page-link:hover { background: rgba(255,255,255,0.07); text-decoration: none; } .page-link.current { background: color-mix(in oklab, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent); } .page-link.disabled { opacity: .4; pointer-events: none; } .page-info { margin-left: auto; color: var(--fg-muted); font-size: 12px; } /* Detail pages */ .section-h { padding: 14px 18px 0; margin: 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); } .section-note { padding: 4px 18px 0; margin: 0; font-size: 12px; color: var(--fg-muted); } .muted { color: var(--fg-muted); } .center { text-align: center; } .detail-card { padding: 18px; } .kv-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; } .kv-list dt { color: var(--fg-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .kv-list dd { margin: 0; word-break: break-all; } /* ---------- 404 page ---------- */ .nf-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 20px 40px; } .nf-code { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 140px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(180deg, var(--fg), color-mix(in oklab, var(--accent) 40%, var(--fg-muted))); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; filter: drop-shadow(0 8px 30px color-mix(in oklab, var(--accent) 25%, transparent)); } .nf-coin { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; } .nf-coin img { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 40px color-mix(in oklab, var(--accent) 35%, transparent); animation: nf-coin-wobble 3.5s ease-in-out infinite; transform-origin: center center; transform-style: preserve-3d; } @keyframes nf-coin-wobble { 0% { transform: perspective(600px) rotateY( 0deg) translateY(0); } 25% { transform: perspective(600px) rotateY(-22deg) translateY(-6px); } 50% { transform: perspective(600px) rotateY( 0deg) translateY(0); } 75% { transform: perspective(600px) rotateY( 22deg) translateY(-6px); } 100% { transform: perspective(600px) rotateY( 0deg) translateY(0); } } .nf-digit { display: inline-block; } .nf-d4 { transform: rotate(-3deg); } .nf-d4:last-child { transform: rotate(3deg); } .nf-title { font-size: 28px; margin: 30px 0 8px; letter-spacing: -0.01em; } .nf-sub { color: var(--fg-muted); max-width: 540px; line-height: 1.5; margin: 0 0 28px; } .nf-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; } .nf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; } .nf-btn:hover { background: rgba(255,255,255,0.06); border-color: color-mix(in oklab, var(--accent) 50%, transparent); text-decoration: none; transform: translateY(-1px); } .nf-btn-primary { background: color-mix(in oklab, var(--accent) 18%, var(--bg-2)); border-color: color-mix(in oklab, var(--accent) 55%, transparent); color: var(--accent); } .nf-quote { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--fg-muted); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65; border-top: 1px solid var(--border); padding-top: 16px; width: 100%; max-width: 360px; } @media (max-width: 600px) { .nf-code { font-size: 84px; gap: 2px; } .nf-coin, .nf-coin img { width: 72px; height: 72px; } .nf-title { font-size: 22px; } } /* ---------- Footer ---------- */ .site-footer { max-width: 1200px; margin: 0 auto; padding: 24px; color: var(--fg-muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .site-footer .sep { opacity: .4; } .site-footer .gh-link { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-muted); } .site-footer .gh-link:hover { color: var(--accent); text-decoration: none; } .site-footer .gh-icon { vertical-align: middle; } .site-footer .version-tag-footer { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--fg-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); padding: 1px 6px; border-radius: 999px; letter-spacing: 0; } .site-footer .version-tag-footer:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); text-decoration: none; } /* ---------- Network tile: label/value on the left, 24h sparkline on the right ---------- */ .network-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 110px); gap: 8px; align-items: center; padding: 8px 10px 8px 12px; } .network-tile .tile-content { min-width: 0; } .tile-spark { height: 38px; min-width: 60px; position: relative; pointer-events: none; /* chart is decorative */ } .tile-spark .u-wrap, .tile-spark canvas { display: block; } /* Shrink the inline sparkline as the header grid narrows, and hide it entirely at the 2-col breakpoint so the hashrate value always fits. Thresholds match the header-stats grid breakpoints above. */ @media (max-width: 1599px) { .network-tile { grid-template-columns: minmax(0, 1fr) minmax(50px, 80px); } } @media (max-width: 699px) { .network-tile { grid-template-columns: 1fr; } .network-tile .tile-spark { display: none; } } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .site-header { padding: 12px 16px; } .container { padding: 0 14px 60px; } .stat-value { font-size: 16px; } .diff-val { font-size: 12px; } .sparkline-mount { display: none; } .data-table th, .data-table td { padding: 10px 12px; } .nav a { padding: 6px 8px; font-size: 14px; } }