/* ═══════════════════════════════════════════════════════════════════════════ BCMonster Design System Overlay — bcm-design.css Loaded LAST on every page. Presentation-only: unifies typography and adds foundational polish sitewide. Never changes layout, data, or behavior. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted fonts (/static/fonts/, official @fontsource builds) ── No third-party requests: previously every page waited on render-blocking CSS from fonts.googleapis.com. Same-origin woff2 + font-display:swap means text paints immediately in the fallback and swaps when ready. ── */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/static/fonts/inter-latin-800-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('/static/fonts/inter-latin-900-normal.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); } /* ── Typography backbone ── Every page renders in Inter (index was the only page loading it before; the rest silently fell back to Segoe UI / system fonts). NOTE: no text-rendering:optimizeLegibility — it forces kerning/ligature shaping on every text layout, which cripples pages with live-updating cells and charts (index). Antialiasing below is cheap; that was not. */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Tabular (fixed-width) numerals: hashrates, shares, and prices align in columns and don't jitter as live values tick. Signature stats-site touch. */ font-variant-numeric: tabular-nums; } /* Form controls inherit the page font instead of the OS default widget font. */ button, input, select, textarea { font-family: inherit; } /* Subtle display tracking on headings that don't set their own. */ h1, h2, h3, h4 { letter-spacing: -0.015em; } /* Code-ish elements in the brand mono. */ code, pre, kbd, samp { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ── Text selection in brand blue ── */ ::selection { background: rgba(65, 105, 225, 0.4); color: #fff; } [data-theme="light"] ::selection { background: rgba(65, 105, 225, 0.22); color: #0f172a; } /* ── Keyboard focus rings (accessibility; invisible to mouse users) ── */ :focus-visible { outline: 2px solid rgba(96, 165, 250, 0.75); outline-offset: 2px; border-radius: 4px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; } /* ── Branded thin scrollbars sitewide ── */ * { scrollbar-width: thin; scrollbar-color: rgba(65, 105, 225, 0.45) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(65, 105, 225, 0.38); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(65, 105, 225, 0.65); } ::-webkit-scrollbar-corner { background: transparent; } /* ── Micro-interactions ── */ a { transition: color 0.15s ease, opacity 0.15s ease; } /* ── Respect users who turn off animation at the OS level ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Shared components — the .stat-card family used by blocks / payments / workers / bestshare / leaderboard. Additive only: rides each page's own CSS variables (--card / --border / --radius) and theme handling. ═══════════════════════════════════════════════════════════════════════════ */ /* Layered elevation: tight contact shadow + faint top edge-light, and a lift on hover. Reads as depth, not glow. */ .stat-card { transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(3, 8, 20, 0.38), 0 0 0 1px rgba(65, 105, 225, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="light"] .stat-card { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } [data-theme="light"] .stat-card:hover { box-shadow: 0 12px 26px rgba(30, 64, 175, 0.14), 0 0 0 1px rgba(65, 105, 225, 0.2); } /* Stat labels in the brand mono — same identity as the wallet panel section labels and Quick Connect column headers. */ .stat-label, .stat-lbl { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.1em; } /* Stat values: display tightening for large numerals. */ .stat-val { letter-spacing: -0.01em; }