TypeScript 61.9%
HTML 37.2%
SQL 0.7%
1@import "tailwindcss";23/*4 RareIndex design language (§160–§161): institutional market terminal × modern luxury house.5 Neutral base; accents reserved for gains / losses / index identity / rarity / alerts.6 Light and dark are first-class; `data-theme` on <html> overrides the system preference.7 Rhythm: 4-pt spacing, hairline borders, 6 px radii, tabular numerals, 160 ms ease-out motion.8*/910:root {11 --ri-bg: #f7f7f5;12 --ri-bg-elevated: #ffffff;13 --ri-bg-sunken: #f1f1ef;14 --ri-bg-inset: #e9e9e6;15 --ri-fg: #0a0a0b;16 --ri-fg-muted: #4f4f56;17 --ri-fg-subtle: #7d7d86;18 --ri-border: #e3e3e0;19 --ri-border-strong: #c4c4bf;20 --ri-accent: #0a0a0b;21 --ri-accent-fg: #ffffff;22 --ri-gain: #0d7a42;23 --ri-gain-bg: #e3f3ea;24 --ri-loss: #bf2229;25 --ri-loss-bg: #fbe7e8;26 --ri-flat: #6b6b72;27 --ri-index: #1e3a8a;28 --ri-index-bg: #e6ebf9;29 --ri-rarity: #6d28d9;30 --ri-rarity-bg: #eee7fd;31 --ri-alert: #a34a06;32 --ri-alert-bg: #fdefe0;33 --ri-gold: #96620a;34 --ri-series-1: #2f5bd6;35 --ri-series-2: #c2410c;36 --ri-series-3: #0e9384;37 --ri-series-4: #7c3aed;38 --ri-series-muted: #b8b8bd;39 --ri-ring: rgba(10, 10, 11, 0.22);40 --ri-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04);41 --ri-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);42 --ri-radius: 6px;43 --ri-radius-sm: 4px;44 --ri-radius-lg: 10px;45 --ri-ease: cubic-bezier(0.2, 0.7, 0.2, 1);46 --ri-dur: 160ms;47 --ri-header-h: 52px;48 --ri-tabbar-h: 56px;49 color-scheme: light;50}5152html[data-theme="dark"] {53 --ri-bg: #0a0b0d;54 --ri-bg-elevated: #111215;55 --ri-bg-sunken: #070809;56 --ri-bg-inset: #191a1e;57 --ri-fg: #f3f3f1;58 --ri-fg-muted: #ababb1;59 --ri-fg-subtle: #75757d;60 --ri-border: #232429;61 --ri-border-strong: #3c3d44;62 --ri-accent: #f3f3f1;63 --ri-accent-fg: #0a0b0d;64 --ri-gain: #3ccb82;65 --ri-gain-bg: rgba(60, 203, 130, 0.13);66 --ri-loss: #f26065;67 --ri-loss-bg: rgba(242, 96, 101, 0.13);68 --ri-flat: #8b8b93;69 --ri-index: #86a3f7;70 --ri-index-bg: rgba(134, 163, 247, 0.13);71 --ri-rarity: #b19bfb;72 --ri-rarity-bg: rgba(177, 155, 251, 0.13);73 --ri-alert: #f2a852;74 --ri-alert-bg: rgba(242, 168, 82, 0.13);75 --ri-gold: #d9ad45;76 --ri-series-1: #5b7fe6;77 --ri-series-2: #cf7a1f;78 --ri-series-3: #199c8a;79 --ri-series-4: #8f6fe8;80 --ri-series-muted: #4a4b52;81 --ri-ring: rgba(243, 243, 241, 0.26);82 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);83 --ri-shadow-lg: 0 16px 44px -16px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);84 color-scheme: dark;85}8687@media (prefers-color-scheme: dark) {88 html:not([data-theme="light"]) {89 --ri-bg: #0a0b0d;90 --ri-bg-elevated: #111215;91 --ri-bg-sunken: #070809;92 --ri-bg-inset: #191a1e;93 --ri-fg: #f3f3f1;94 --ri-fg-muted: #ababb1;95 --ri-fg-subtle: #75757d;96 --ri-border: #232429;97 --ri-border-strong: #3c3d44;98 --ri-accent: #f3f3f1;99 --ri-accent-fg: #0a0b0d;100 --ri-gain: #3ccb82;101 --ri-gain-bg: rgba(60, 203, 130, 0.13);102 --ri-loss: #f26065;103 --ri-loss-bg: rgba(242, 96, 101, 0.13);104 --ri-flat: #8b8b93;105 --ri-index: #86a3f7;106 --ri-index-bg: rgba(134, 163, 247, 0.13);107 --ri-rarity: #b19bfb;108 --ri-rarity-bg: rgba(177, 155, 251, 0.13);109 --ri-alert: #f2a852;110 --ri-alert-bg: rgba(242, 168, 82, 0.13);111 --ri-gold: #d9ad45;112 --ri-series-1: #5b7fe6;113 --ri-series-2: #cf7a1f;114 --ri-series-3: #199c8a;115 --ri-series-4: #8f6fe8;116 --ri-series-muted: #4a4b52;117 --ri-ring: rgba(243, 243, 241, 0.26);118 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);119 --ri-shadow-lg: 0 16px 44px -16px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);120 color-scheme: dark;121 }122}123124@theme inline {125 --color-bg: var(--ri-bg);126 --color-elevated: var(--ri-bg-elevated);127 --color-sunken: var(--ri-bg-sunken);128 --color-inset: var(--ri-bg-inset);129 --color-fg: var(--ri-fg);130 --color-muted: var(--ri-fg-muted);131 --color-subtle: var(--ri-fg-subtle);132 --color-border: var(--ri-border);133 --color-border-strong: var(--ri-border-strong);134 --color-accent: var(--ri-accent);135 --color-accent-fg: var(--ri-accent-fg);136 --color-gain: var(--ri-gain);137 --color-gain-bg: var(--ri-gain-bg);138 --color-loss: var(--ri-loss);139 --color-loss-bg: var(--ri-loss-bg);140 --color-flat: var(--ri-flat);141 --color-index: var(--ri-index);142 --color-index-bg: var(--ri-index-bg);143 --color-rarity: var(--ri-rarity);144 --color-rarity-bg: var(--ri-rarity-bg);145 --color-alert: var(--ri-alert);146 --color-alert-bg: var(--ri-alert-bg);147 --color-gold: var(--ri-gold);148 --color-series-1: var(--ri-series-1);149 --color-series-2: var(--ri-series-2);150 --color-series-3: var(--ri-series-3);151 --color-series-4: var(--ri-series-4);152 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;153 --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;154 --radius-sm: var(--ri-radius-sm);155 --radius-md: var(--ri-radius);156 --radius-lg: var(--ri-radius-lg);157 --shadow-card: var(--ri-shadow);158 --shadow-pop: var(--ri-shadow-lg);159 --ease-out-soft: var(--ri-ease);160}161162@layer base {163 html {164 height: 100%;165 -webkit-text-size-adjust: 100%;166 scroll-behavior: smooth;167 scroll-padding-top: calc(var(--ri-header-h) + 8px);168 }169 body {170 min-height: 100%;171 background: var(--ri-bg);172 color: var(--ri-fg);173 font-family: var(--font-sans);174 font-size: 14px;175 line-height: 1.45;176 font-feature-settings: "cv11", "ss01", "tnum", "calt";177 text-rendering: optimizeLegibility;178 -webkit-font-smoothing: antialiased;179 -moz-osx-font-smoothing: grayscale;180 overflow-x: clip;181 }182 ::selection {183 background: var(--ri-index-bg);184 }185 :focus-visible {186 outline: 2px solid var(--ri-ring);187 outline-offset: 2px;188 border-radius: var(--ri-radius-sm);189 }190 a,191 button {192 transition: color var(--ri-dur) var(--ri-ease), background-color var(--ri-dur) var(--ri-ease), border-color var(--ri-dur) var(--ri-ease), box-shadow var(--ri-dur) var(--ri-ease), opacity var(--ri-dur) var(--ri-ease);193 }194 input,195 select,196 textarea {197 font-size: 16px; /* prevents iOS zoom */198 }199 @media (min-width: 768px) {200 input,201 select,202 textarea {203 font-size: 13px;204 }205 }206 h1, h2, h3, h4 {207 letter-spacing: -0.02em;208 text-wrap: balance;209 }210 p {211 text-wrap: pretty;212 }213 img,214 svg {215 display: inline-block;216 vertical-align: middle;217 }218 table {219 font-variant-numeric: tabular-nums;220 }221 @media (prefers-reduced-motion: reduce) {222 *,223 *::before,224 *::after {225 animation-duration: 0.01ms !important;226 animation-iteration-count: 1 !important;227 transition-duration: 0.01ms !important;228 scroll-behavior: auto !important;229 }230 }231}232233/* ---------- Type scale ---------- */234@utility t-display {235 font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);236 line-height: 1.02;237 font-weight: 600;238 letter-spacing: -0.035em;239}240@utility t-headline {241 font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);242 line-height: 1.1;243 font-weight: 600;244 letter-spacing: -0.025em;245}246@utility t-title {247 font-size: 1.0625rem;248 line-height: 1.3;249 font-weight: 600;250 letter-spacing: -0.015em;251}252@utility t-subtitle {253 font-size: 0.875rem;254 line-height: 1.35;255 font-weight: 600;256 letter-spacing: -0.01em;257}258@utility t-body {259 font-size: 0.875rem;260 line-height: 1.5;261}262@utility t-small {263 font-size: 0.8125rem;264 line-height: 1.4;265}266@utility t-caption {267 font-size: 0.6875rem;268 line-height: 1.3;269 color: var(--ri-fg-subtle);270}271@utility t-label {272 font-size: 0.625rem;273 line-height: 1.2;274 font-weight: 600;275 letter-spacing: 0.08em;276 text-transform: uppercase;277 color: var(--ri-fg-subtle);278}279280/* ---------- Numbers ---------- */281@utility num {282 font-variant-numeric: tabular-nums lining-nums;283 font-feature-settings: "tnum", "lnum";284}285@utility mono-num {286 font-family: var(--font-mono);287 font-variant-numeric: tabular-nums;288 letter-spacing: -0.01em;289}290291/* ---------- Surfaces ---------- */292@utility hairline {293 border-color: var(--ri-border);294}295@utility card {296 background: var(--ri-bg-elevated);297 border: 1px solid var(--ri-border);298 border-radius: var(--ri-radius);299 box-shadow: var(--ri-shadow);300}301@utility card-hover {302 transition: border-color var(--ri-dur) var(--ri-ease), box-shadow var(--ri-dur) var(--ri-ease), transform var(--ri-dur) var(--ri-ease);303 &:hover {304 border-color: var(--ri-border-strong);305 box-shadow: var(--ri-shadow-lg);306 }307 &:active {308 transform: translateY(0.5px);309 }310}311@utility surface-sunken {312 background: var(--ri-bg-sunken);313}314@utility btn {315 display: inline-flex;316 align-items: center;317 justify-content: center;318 gap: 0.375rem;319 height: 2.25rem;320 padding-inline: 0.75rem;321 border-radius: var(--ri-radius);322 border: 1px solid var(--ri-border);323 background: var(--ri-bg-elevated);324 color: var(--ri-fg);325 font-size: 0.8125rem;326 font-weight: 500;327 white-space: nowrap;328 &:hover {329 border-color: var(--ri-border-strong);330 background: var(--ri-bg-sunken);331 }332}333@utility btn-primary {334 display: inline-flex;335 align-items: center;336 justify-content: center;337 gap: 0.375rem;338 height: 2.25rem;339 padding-inline: 0.875rem;340 border-radius: var(--ri-radius);341 border: 1px solid var(--ri-accent);342 background: var(--ri-accent);343 color: var(--ri-accent-fg);344 font-size: 0.8125rem;345 font-weight: 600;346 white-space: nowrap;347 &:hover {348 opacity: 0.9;349 }350}351@utility btn-sm {352 height: 1.75rem;353 padding-inline: 0.5rem;354 font-size: 0.75rem;355}356@utility chip {357 display: inline-flex;358 align-items: center;359 gap: 0.25rem;360 height: 1.625rem;361 padding-inline: 0.625rem;362 border-radius: 999px;363 border: 1px solid var(--ri-border);364 background: var(--ri-bg-elevated);365 color: var(--ri-fg-muted);366 font-size: 0.75rem;367 font-weight: 500;368 white-space: nowrap;369 &:hover {370 border-color: var(--ri-border-strong);371 color: var(--ri-fg);372 }373}374@utility chip-active {375 border-color: var(--ri-fg);376 background: var(--ri-accent);377 color: var(--ri-accent-fg);378 &:hover {379 color: var(--ri-accent-fg);380 }381}382383/* ---------- Layout helpers ---------- */384@utility scrollbar-none {385 scrollbar-width: none;386 &::-webkit-scrollbar {387 display: none;388 }389}390@utility safe-bottom {391 padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);392}393/* Horizontal snap rail: full-bleed on mobile, gutters preserved. */394@utility rail {395 display: flex;396 gap: 0.5rem;397 overflow-x: auto;398 overscroll-behavior-x: contain;399 scroll-snap-type: x mandatory;400 scroll-padding-inline: 1rem;401 padding-inline: 1rem;402 margin-inline: -1rem;403 scrollbar-width: none;404 -webkit-overflow-scrolling: touch;405 &::-webkit-scrollbar {406 display: none;407 }408 & > * {409 scroll-snap-align: start;410 flex: 0 0 auto;411 }412 @media (min-width: 640px) {413 scroll-padding-inline: 1.5rem;414 padding-inline: 1.5rem;415 margin-inline: -1.5rem;416 }417}418/* Dense tables: sticky first column on narrow screens, hairline rows. */419@utility table-sticky {420 & th:first-child,421 & td:first-child {422 position: sticky;423 left: 0;424 z-index: 2;425 background: var(--ri-bg-elevated);426 box-shadow: inset -1px 0 0 var(--ri-border);427 }428 & thead th:first-child {429 z-index: 3;430 }431 & tbody tr:hover td:first-child {432 background: var(--ri-bg-sunken);433 }434}435/* Space for the mobile tab bar. */436@utility tabbar-pad {437 padding-bottom: calc(var(--ri-tabbar-h) + env(safe-area-inset-bottom) + 1rem);438 @media (min-width: 768px) {439 padding-bottom: 4rem;440 }441}442@utility line-clamp-2 {443 display: -webkit-box;444 -webkit-line-clamp: 2;445 -webkit-box-orient: vertical;446 overflow: hidden;447}448449/* ---------- Motion ---------- */450@keyframes ri-tape {451 from {452 transform: translateX(0);453 }454 to {455 transform: translateX(-50%);456 }457}458.tape-track {459 animation: ri-tape 70s linear infinite;460 will-change: transform;461}462.tape-track:hover,463.tape-track:focus-within {464 animation-play-state: paused;465}466@keyframes ri-fade-up {467 from {468 opacity: 0;469 transform: translateY(6px);470 }471 to {472 opacity: 1;473 transform: none;474 }475}476.fade-up {477 animation: ri-fade-up 320ms var(--ri-ease) both;478}479@keyframes ri-sheet-in {480 from {481 opacity: 0;482 transform: translateY(12px);483 }484 to {485 opacity: 1;486 transform: none;487 }488}489.sheet-in {490 animation: ri-sheet-in 200ms var(--ri-ease) both;491}492@keyframes ri-pulse-dot {493 0%,494 100% {495 opacity: 1;496 }497 50% {498 opacity: 0.35;499 }500}501.live-dot {502 animation: ri-pulse-dot 1.6s ease-in-out infinite;503}504@media (prefers-reduced-motion: reduce) {505 .tape-track,506 .fade-up,507 .sheet-in,508 .live-dot {509 animation: none;510 }511}512513/* Native <details> caret hidden where we render our own. */514summary.plain {515 list-style: none;516}517summary.plain::-webkit-details-marker {518 display: none;519}520