/* Staker dashboard - clean, professional, financial-portal styling. One accent hue (teal-green, evoking SOL/growth) used consistently; text in neutral ink tokens, never the accent, per data-viz rules. */ :root { --bg: #f4f6f9; --bg-2: #eef1f6; /* slightly deeper, for subtle panel contrast */ --surface: #ffffff; --surface-2: #fbfcfe; /* raised surfaces (tile hover, insets) */ --ink: #10141b; --ink-2: #4a5361; --ink-3: #828b99; --line: #e7eaf0; --line-2: #eef1f5; /* fainter divider */ /* Solana Company brand: purple -> teal gradient. Charts use the teal end as the single accent hue; the gradient itself is used for the brand mark and hero emphasis. */ --brand-purple: #9945ff; --brand-teal: #14b89a; --brand-grad: linear-gradient(120deg, #9945ff 0%, #7d5cf5 42%, #14c8a8 100%); --accent: #12b394; /* teal end - charts, buttons */ --accent-weak: #ddf3ee; --accent-ink: #0b7360; --pos: #1a7f5a; --warn: #b7791f; --radius: 14px; --radius-sm: 10px; /* layered, soft shadows for a premium material feel */ --shadow: 0 1px 2px rgba(16,20,27,.04), 0 4px 14px -4px rgba(16,20,27,.06); --shadow-lg: 0 2px 6px rgba(16,20,27,.05), 0 14px 40px -10px rgba(16,20,27,.14); --ring: 0 0 0 3px rgba(18,179,148,.18); /* focus ring */ --font-ui: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "PingFang TC", "Microsoft YaHei", sans-serif; --font-num: "Inter var", "Inter", ui-monospace, "SF Mono", "Segoe UI", system-ui, sans-serif; } /* Dark palette, shared by (a) system-dark when no explicit choice is set, and (b) an explicit data-theme="dark". The theme switcher stamps data-theme on ; when it's "system" we remove the attribute and fall back to the media query. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c0f14; --bg-2: #0f131a; --surface: #161b23; --surface-2: #222834; --ink: #eef1f6; --ink-2: #aeb8c6; --ink-3: #79828f; --line: #242b36; --line-2: #1d232d; --accent: #2fd0b3; --accent-weak: #123a35; --accent-ink: #74e6d6; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -6px rgba(0,0,0,.5); --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 18px 46px -12px rgba(0,0,0,.6); --ring: 0 0 0 3px rgba(47,208,179,.22); } } :root[data-theme="dark"] { --bg: #0c0f14; --bg-2: #0f131a; --surface: #161b23; --surface-2: #222834; --ink: #eef1f6; --ink-2: #aeb8c6; --ink-3: #79828f; --line: #242b36; --line-2: #1d232d; --accent: #2fd0b3; --accent-weak: #123a35; --accent-ink: #74e6d6; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -6px rgba(0,0,0,.5); --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 18px 46px -12px rgba(0,0,0,.6); --ring: 0 0 0 3px rgba(47,208,179,.22); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; letter-spacing: -0.006em; text-rendering: optimizeLegibility; } /* all tabular numbers get true monospaced-digit alignment + slashed zero */ .value, .num, td.num, .tile .value, [class*="tabular"], .valstats b { font-feature-settings: "tnum" 1, "zero" 1; font-variant-numeric: tabular-nums slashed-zero; } .hidden { display: none !important; } ::selection { background: var(--accent-weak); color: var(--accent-ink); } /* top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; } .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-grad); } /* logo: black variant on light theme, white on dark; hide the text label when a logo image is present so we don't double up. */ .brand .logo { height: 26px; width: auto; display: block; } .brand .logo-white { display: none; } /* system dark (no explicit light choice) -> white logo */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-black { display: none; } :root:not([data-theme="light"]) .brand .logo-white { display: block; } } /* explicit dark -> white logo; explicit light -> black logo (wins over system) */ :root[data-theme="dark"] .brand .logo-black { display: none; } :root[data-theme="dark"] .brand .logo-white { display: block; } :root[data-theme="light"] .brand .logo-black { display: block; } :root[data-theme="light"] .brand .logo-white { display: none; } .brand.has-logo .brand-text, .brand.has-logo .dot { display: none; } .valstats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); } .valstats b { color: var(--ink); font-variant-numeric: tabular-nums; } .wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; } /* ---- app shell with left sidebar ---- */ .shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 12px 10px; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; /* hide the scrollbar chrome but keep scrollability if it ever overflows */ scrollbar-width: none; -ms-overflow-style: none; } .sidebar::-webkit-scrollbar { width: 0; height: 0; } .sidebar .brand { padding: 4px 8px 12px; } .sidebar .brand .logo { height: 23px; } .navsection { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; padding: 14px 10px 5px; opacity: .85; } /* validator picker */ .valpicker { position: relative; margin: 4px 4px 10px; } .valpicker-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; } .valpicker-btn.single { cursor: default; } .valpicker-btn .vp-caret { margin-left: auto; color: var(--ink-3); font-size: 11px; } .valpicker-btn.single .vp-caret { display: none; } .vp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-grad); flex: none; } .valpicker-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 5px; box-shadow: var(--shadow); display: none; } .valpicker-menu.open { display: block; } .vp-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; background: none; color: var(--ink-2); font-size: 13px; border-radius: 7px; cursor: pointer; text-align: left; } .vp-item:hover { background: var(--bg); color: var(--ink); } .vp-item.on { color: var(--accent-ink); font-weight: 600; } .vp-item .vp-sub { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .navitem { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; text-decoration: none; /* force identical box metrics whether the item is a