@import "tailwindcss"; /* RareIndex design language (§160–§161): institutional market terminal × modern luxury house. Neutral base; accents reserved for gains / losses / index identity / rarity / alerts. Light and dark are first-class; `data-theme` on overrides the system preference. Rhythm: 4-pt spacing, hairline borders, 6 px radii, tabular numerals, 160 ms ease-out motion. */ :root { --ri-bg: #f7f7f5; --ri-bg-elevated: #ffffff; --ri-bg-sunken: #f1f1ef; --ri-bg-inset: #e9e9e6; --ri-fg: #0a0a0b; --ri-fg-muted: #4f4f56; --ri-fg-subtle: #7d7d86; --ri-border: #e3e3e0; --ri-border-strong: #c4c4bf; --ri-accent: #0a0a0b; --ri-accent-fg: #ffffff; --ri-gain: #0d7a42; --ri-gain-bg: #e3f3ea; --ri-loss: #bf2229; --ri-loss-bg: #fbe7e8; --ri-flat: #6b6b72; --ri-index: #1e3a8a; --ri-index-bg: #e6ebf9; --ri-rarity: #6d28d9; --ri-rarity-bg: #eee7fd; --ri-alert: #a34a06; --ri-alert-bg: #fdefe0; --ri-gold: #96620a; --ri-series-1: #2f5bd6; --ri-series-2: #c2410c; --ri-series-3: #0e9384; --ri-series-4: #7c3aed; --ri-series-muted: #b8b8bd; --ri-ring: rgba(10, 10, 11, 0.22); --ri-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04); --ri-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06); --ri-radius: 6px; --ri-radius-sm: 4px; --ri-radius-lg: 10px; --ri-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ri-dur: 160ms; --ri-header-h: 52px; --ri-tabbar-h: 56px; color-scheme: light; } html[data-theme="dark"] { --ri-bg: #0a0b0d; --ri-bg-elevated: #111215; --ri-bg-sunken: #070809; --ri-bg-inset: #191a1e; --ri-fg: #f3f3f1; --ri-fg-muted: #ababb1; --ri-fg-subtle: #75757d; --ri-border: #232429; --ri-border-strong: #3c3d44; --ri-accent: #f3f3f1; --ri-accent-fg: #0a0b0d; --ri-gain: #3ccb82; --ri-gain-bg: rgba(60, 203, 130, 0.13); --ri-loss: #f26065; --ri-loss-bg: rgba(242, 96, 101, 0.13); --ri-flat: #8b8b93; --ri-index: #86a3f7; --ri-index-bg: rgba(134, 163, 247, 0.13); --ri-rarity: #b19bfb; --ri-rarity-bg: rgba(177, 155, 251, 0.13); --ri-alert: #f2a852; --ri-alert-bg: rgba(242, 168, 82, 0.13); --ri-gold: #d9ad45; --ri-series-1: #5b7fe6; --ri-series-2: #cf7a1f; --ri-series-3: #199c8a; --ri-series-4: #8f6fe8; --ri-series-muted: #4a4b52; --ri-ring: rgba(243, 243, 241, 0.26); --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --ri-shadow-lg: 0 16px 44px -16px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4); color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --ri-bg: #0a0b0d; --ri-bg-elevated: #111215; --ri-bg-sunken: #070809; --ri-bg-inset: #191a1e; --ri-fg: #f3f3f1; --ri-fg-muted: #ababb1; --ri-fg-subtle: #75757d; --ri-border: #232429; --ri-border-strong: #3c3d44; --ri-accent: #f3f3f1; --ri-accent-fg: #0a0b0d; --ri-gain: #3ccb82; --ri-gain-bg: rgba(60, 203, 130, 0.13); --ri-loss: #f26065; --ri-loss-bg: rgba(242, 96, 101, 0.13); --ri-flat: #8b8b93; --ri-index: #86a3f7; --ri-index-bg: rgba(134, 163, 247, 0.13); --ri-rarity: #b19bfb; --ri-rarity-bg: rgba(177, 155, 251, 0.13); --ri-alert: #f2a852; --ri-alert-bg: rgba(242, 168, 82, 0.13); --ri-gold: #d9ad45; --ri-series-1: #5b7fe6; --ri-series-2: #cf7a1f; --ri-series-3: #199c8a; --ri-series-4: #8f6fe8; --ri-series-muted: #4a4b52; --ri-ring: rgba(243, 243, 241, 0.26); --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --ri-shadow-lg: 0 16px 44px -16px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4); color-scheme: dark; } } @theme inline { --color-bg: var(--ri-bg); --color-elevated: var(--ri-bg-elevated); --color-sunken: var(--ri-bg-sunken); --color-inset: var(--ri-bg-inset); --color-fg: var(--ri-fg); --color-muted: var(--ri-fg-muted); --color-subtle: var(--ri-fg-subtle); --color-border: var(--ri-border); --color-border-strong: var(--ri-border-strong); --color-accent: var(--ri-accent); --color-accent-fg: var(--ri-accent-fg); --color-gain: var(--ri-gain); --color-gain-bg: var(--ri-gain-bg); --color-loss: var(--ri-loss); --color-loss-bg: var(--ri-loss-bg); --color-flat: var(--ri-flat); --color-index: var(--ri-index); --color-index-bg: var(--ri-index-bg); --color-rarity: var(--ri-rarity); --color-rarity-bg: var(--ri-rarity-bg); --color-alert: var(--ri-alert); --color-alert-bg: var(--ri-alert-bg); --color-gold: var(--ri-gold); --color-series-1: var(--ri-series-1); --color-series-2: var(--ri-series-2); --color-series-3: var(--ri-series-3); --color-series-4: var(--ri-series-4); --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace; --radius-sm: var(--ri-radius-sm); --radius-md: var(--ri-radius); --radius-lg: var(--ri-radius-lg); --shadow-card: var(--ri-shadow); --shadow-pop: var(--ri-shadow-lg); --ease-out-soft: var(--ri-ease); } @layer base { html { height: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ri-header-h) + 8px); } body { min-height: 100%; background: var(--ri-bg); color: var(--ri-fg); font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-feature-settings: "cv11", "ss01", "tnum", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } ::selection { background: var(--ri-index-bg); } :focus-visible { outline: 2px solid var(--ri-ring); outline-offset: 2px; border-radius: var(--ri-radius-sm); } a, button { 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); } input, select, textarea { font-size: 16px; /* prevents iOS zoom */ } @media (min-width: 768px) { input, select, textarea { font-size: 13px; } } h1, h2, h3, h4 { letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } img, svg { display: inline-block; vertical-align: middle; } table { font-variant-numeric: tabular-nums; } @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; } } } /* ---------- Type scale ---------- */ @utility t-display { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; } @utility t-headline { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; } @utility t-title { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; } @utility t-subtitle { font-size: 0.875rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; } @utility t-body { font-size: 0.875rem; line-height: 1.5; } @utility t-small { font-size: 0.8125rem; line-height: 1.4; } @utility t-caption { font-size: 0.6875rem; line-height: 1.3; color: var(--ri-fg-subtle); } @utility t-label { font-size: 0.625rem; line-height: 1.2; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ri-fg-subtle); } /* ---------- Numbers ---------- */ @utility num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; } @utility mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ---------- Surfaces ---------- */ @utility hairline { border-color: var(--ri-border); } @utility card { background: var(--ri-bg-elevated); border: 1px solid var(--ri-border); border-radius: var(--ri-radius); box-shadow: var(--ri-shadow); } @utility card-hover { transition: border-color var(--ri-dur) var(--ri-ease), box-shadow var(--ri-dur) var(--ri-ease), transform var(--ri-dur) var(--ri-ease); &:hover { border-color: var(--ri-border-strong); box-shadow: var(--ri-shadow-lg); } &:active { transform: translateY(0.5px); } } @utility surface-sunken { background: var(--ri-bg-sunken); } @utility btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.25rem; padding-inline: 0.75rem; border-radius: var(--ri-radius); border: 1px solid var(--ri-border); background: var(--ri-bg-elevated); color: var(--ri-fg); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; &:hover { border-color: var(--ri-border-strong); background: var(--ri-bg-sunken); } } @utility btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.25rem; padding-inline: 0.875rem; border-radius: var(--ri-radius); border: 1px solid var(--ri-accent); background: var(--ri-accent); color: var(--ri-accent-fg); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; &:hover { opacity: 0.9; } } @utility btn-sm { height: 1.75rem; padding-inline: 0.5rem; font-size: 0.75rem; } @utility chip { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.625rem; padding-inline: 0.625rem; border-radius: 999px; border: 1px solid var(--ri-border); background: var(--ri-bg-elevated); color: var(--ri-fg-muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; &:hover { border-color: var(--ri-border-strong); color: var(--ri-fg); } } @utility chip-active { border-color: var(--ri-fg); background: var(--ri-accent); color: var(--ri-accent-fg); &:hover { color: var(--ri-accent-fg); } } /* ---------- Layout helpers ---------- */ @utility scrollbar-none { scrollbar-width: none; &::-webkit-scrollbar { display: none; } } @utility safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0.75rem); } /* Horizontal snap rail: full-bleed on mobile, gutters preserved. */ @utility rail { display: flex; gap: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; padding-inline: 1rem; margin-inline: -1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } & > * { scroll-snap-align: start; flex: 0 0 auto; } @media (min-width: 640px) { scroll-padding-inline: 1.5rem; padding-inline: 1.5rem; margin-inline: -1.5rem; } } /* Dense tables: sticky first column on narrow screens, hairline rows. */ @utility table-sticky { & th:first-child, & td:first-child { position: sticky; left: 0; z-index: 2; background: var(--ri-bg-elevated); box-shadow: inset -1px 0 0 var(--ri-border); } & thead th:first-child { z-index: 3; } & tbody tr:hover td:first-child { background: var(--ri-bg-sunken); } } /* Space for the mobile tab bar. */ @utility tabbar-pad { padding-bottom: calc(var(--ri-tabbar-h) + env(safe-area-inset-bottom) + 1rem); @media (min-width: 768px) { padding-bottom: 4rem; } } @utility line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Motion ---------- */ @keyframes ri-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tape-track { animation: ri-tape 70s linear infinite; will-change: transform; } .tape-track:hover, .tape-track:focus-within { animation-play-state: paused; } @keyframes ri-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .fade-up { animation: ri-fade-up 320ms var(--ri-ease) both; } @keyframes ri-sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .sheet-in { animation: ri-sheet-in 200ms var(--ri-ease) both; } @keyframes ri-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .live-dot { animation: ri-pulse-dot 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .tape-track, .fade-up, .sheet-in, .live-dot { animation: none; } } /* Native
caret hidden where we render our own. */ summary.plain { list-style: none; } summary.plain::-webkit-details-marker { display: none; }