spb/market-atlas
Public
TypeScript 96.7%
SQL 1.6%
CSS 0.8%
JavaScript 0.5%
1@import "tailwindcss";23/*4 Market Atlas design tokens. Institutional, dense but breathable. Two themes on <html data-theme>.5 Light: cool paper canvas, near-black ink, atlas blue accent. Dark: graphite (never pure black), off-white ink.6 Semantic colours: positive / negative / neutral / stale / warning — always paired with text or an icon.7*/8:root,9[data-theme="light"] {10 color-scheme: light;11 --canvas: #f5f6f4;12 --surface: #ffffff;13 --surface-2: #edeeeb;14 --surface-3: #e1e3de;15 --ink: #0f1217;16 --ink-2: #4a5062;17 --ink-3: #7b8294;18 --rule: rgba(15, 18, 23, 0.1);19 --rule-strong: rgba(15, 18, 23, 0.22);20 --accent: #1d4fd8;21 --accent-ink: #ffffff;22 --accent-soft: rgba(29, 79, 216, 0.1);23 --positive: #167a48;24 --positive-soft: rgba(22, 122, 72, 0.12);25 --negative: #c0323c;26 --negative-soft: rgba(192, 50, 60, 0.12);27 --warning: #b16d0b;28 --warning-soft: rgba(212, 130, 22, 0.14);29 --stale: #7b8294;30 --stale-soft: rgba(123, 130, 148, 0.14);31 --map-land: #e1e3de;32 --map-stroke: #ffffff;33 --brand-plate: #0f1217;34 --brand-ink: #f5f6f4;35 --series-1: #1d4fd8;36 --series-2: #c2560f;37 --series-3: #167a48;38 --series-4: #6d3fc7;39 --series-5: #0d7c86;40 --series-6: #b6337e;41 --series-7: #7b8294;42 --series-8: #c0323c;43 --header-h: 56px;44 --tabbar-h: 58px;45 --radius: 4px;46 --radius-lg: 8px;47}48[data-theme="dark"] {49 color-scheme: dark;50 --canvas: #0c0f14;51 --surface: #12161d;52 --surface-2: #191e27;53 --surface-3: #222834;54 --ink: #e8eaef;55 --ink-2: #a2a8b7;56 --ink-3: #6e7587;57 --rule: rgba(190, 200, 225, 0.11);58 --rule-strong: rgba(190, 200, 225, 0.26);59 --accent: #6b93ff;60 --accent-ink: #061024;61 --accent-soft: rgba(107, 147, 255, 0.14);62 --positive: #43c37d;63 --positive-soft: rgba(67, 195, 125, 0.14);64 --negative: #ff6b74;65 --negative-soft: rgba(255, 107, 116, 0.14);66 --warning: #f2b04a;67 --warning-soft: rgba(242, 176, 74, 0.14);68 --stale: #8b92a5;69 --stale-soft: rgba(139, 146, 165, 0.16);70 --map-land: #222834;71 --map-stroke: #0c0f14;72 --brand-plate: #e8eaef;73 --brand-ink: #0c0f14;74 --series-1: #6b93ff;75 --series-2: #ff9a4d;76 --series-3: #43c37d;77 --series-4: #b08cff;78 --series-5: #3fc3cf;79 --series-6: #ff7ab6;80 --series-7: #9aa3b8;81 --series-8: #ff6b74;82}8384@theme inline {85 --color-canvas: var(--canvas);86 --color-surface: var(--surface);87 --color-surface-2: var(--surface-2);88 --color-surface-3: var(--surface-3);89 --color-ink: var(--ink);90 --color-ink-2: var(--ink-2);91 --color-ink-3: var(--ink-3);92 --color-rule: var(--rule);93 --color-rule-strong: var(--rule-strong);94 --color-accent: var(--accent);95 --color-accent-ink: var(--accent-ink);96 --color-accent-soft: var(--accent-soft);97 --color-positive: var(--positive);98 --color-positive-soft: var(--positive-soft);99 --color-negative: var(--negative);100 --color-negative-soft: var(--negative-soft);101 --color-warning: var(--warning);102 --color-warning-soft: var(--warning-soft);103 --color-stale: var(--stale);104 --color-stale-soft: var(--stale-soft);105 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;106 --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;107 --radius-sm: var(--radius);108 --radius-md: var(--radius-lg);109}110111html {112 background: var(--canvas);113 color: var(--ink);114 font-size: 15px;115 -webkit-text-size-adjust: 100%;116 scroll-padding-top: calc(var(--header-h) + 12px);117}118body {119 font-family: var(--font-sans);120 font-feature-settings: "cv11", "ss01";121 overflow-x: hidden;122}123.tnum {124 font-variant-numeric: tabular-nums;125}126.mono {127 font-family: var(--font-mono);128 font-variant-numeric: tabular-nums;129}130131/* Surfaces & rules */132.panel {133 background: var(--surface);134 border: 1px solid var(--rule);135 border-radius: var(--radius-lg);136}137.rule-b {138 border-bottom: 1px solid var(--rule);139}140.rule-t {141 border-top: 1px solid var(--rule);142}143144/* Price flash — subtle, directional, 600 ms */145@keyframes flash-up {146 0% {147 background-color: var(--positive-soft);148 }149 100% {150 background-color: transparent;151 }152}153@keyframes flash-down {154 0% {155 background-color: var(--negative-soft);156 }157 100% {158 background-color: transparent;159 }160}161.flash-up {162 animation: flash-up 0.6s ease-out;163}164.flash-down {165 animation: flash-down 0.6s ease-out;166}167168/* Live dot */169@keyframes pulse-dot {170 0%,171 100% {172 opacity: 1;173 }174 50% {175 opacity: 0.35;176 }177}178.live-dot {179 animation: pulse-dot 1.6s ease-in-out infinite;180}181182/* Dense tables */183.table-dense {184 width: 100%;185 border-collapse: separate;186 border-spacing: 0;187 font-size: 0.8125rem;188}189.table-dense th {190 position: sticky;191 top: 0;192 z-index: 1;193 background: var(--surface);194 color: var(--ink-3);195 font-weight: 500;196 font-size: 0.6875rem;197 letter-spacing: 0.04em;198 text-transform: uppercase;199 text-align: left;200 padding: 0.5rem 0.625rem;201 border-bottom: 1px solid var(--rule-strong);202 white-space: nowrap;203}204.table-dense td {205 padding: 0.45rem 0.625rem;206 border-bottom: 1px solid var(--rule);207 white-space: nowrap;208 vertical-align: middle;209}210.table-dense tbody tr:hover {211 background: var(--surface-2);212}213.table-dense .num {214 text-align: right;215 font-family: var(--font-mono);216 font-variant-numeric: tabular-nums;217}218219/* Scrollbars */220* {221 scrollbar-width: thin;222 scrollbar-color: var(--rule-strong) transparent;223}224225/* Prose (methodology, developers…) */226.prose-ma h2 {227 font-size: 1.125rem;228 font-weight: 600;229 margin-top: 2rem;230 margin-bottom: 0.5rem;231}232.prose-ma h3 {233 font-size: 0.95rem;234 font-weight: 600;235 margin-top: 1.25rem;236 margin-bottom: 0.35rem;237}238.prose-ma p,239.prose-ma li {240 color: var(--ink-2);241 line-height: 1.6;242 margin-bottom: 0.6rem;243}244.prose-ma ul {245 list-style: disc;246 padding-left: 1.25rem;247}248.prose-ma code {249 font-family: var(--font-mono);250 font-size: 0.8em;251 background: var(--surface-2);252 padding: 0.1em 0.35em;253 border-radius: 3px;254}255.prose-ma pre {256 font-family: var(--font-mono);257 font-size: 0.78rem;258 background: var(--surface-2);259 border: 1px solid var(--rule);260 border-radius: var(--radius-lg);261 padding: 0.85rem 1rem;262 overflow-x: auto;263 margin: 0.75rem 0 1rem;264 line-height: 1.5;265}266.prose-ma pre code {267 background: none;268 padding: 0;269}270.prose-ma table {271 width: 100%;272 font-size: 0.85rem;273 margin: 0.5rem 0 1rem;274 display: block;275 overflow-x: auto;276}277.prose-ma table code {278 white-space: nowrap;279}280.prose-ma td code {281 white-space: normal;282 word-break: break-word;283}284.prose-ma th,285.prose-ma td {286 text-align: left;287 padding: 0.4rem 0.6rem;288 border-bottom: 1px solid var(--rule);289 vertical-align: top;290}291292@media (prefers-reduced-motion: reduce) {293 .flash-up,294 .flash-down,295 .live-dot {296 animation: none;297 }298}299