/* Trueearnings — clean light-theme finance UI. */
:root {
--bg: #ffffff;
--bg-soft: #f7f8fb;
--bg-tint: #eef2ff;
--surface: #ffffff;
--line: #e6e9ef;
--line-strong: #d4d9e2;
--fg: #0b1220;
--fg-soft: #3b4252;
--muted: #6b7280;
--muted-soft: #9aa3b2;
/* Brand accent is monochrome (black on white) — the old bright green
(#00E838) was removed app-wide. Everything that reads var(--accent*)
(links, toggles, buttons, badges, focus rings, score bars, the onboarding
funnel) recolors from this one block. NOTE: --good/--bad (gains/losses) and
the risk-band colors are intentionally left as-is — that green/red encodes
data direction, not branding. */
--accent: #0b1220;
--accent-soft: #eef0f4;
--accent-deep: #000000;
--accent-fg: #ffffff;
--accent-glow: rgba(11, 18, 32, 0.22);
--good: #16a34a;
--good-soft: #dcfce7;
--bad: #dc2626;
--bad-soft: #fee2e2;
--low-bg: #ecfdf5; --low-fg: #047857;
--mid-bg: #fffbeb; --mid-fg: #b45309;
--high-bg: #fef2f2; --high-fg: #b91c1c;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
--shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
--shadow-lg: 0 10px 30px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: "SF Mono", "SFMono-Regular", "Roboto Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
/* ── Top navigation ─────────────────────────────────────────────────────── */
.site-header {
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, .85);
backdrop-filter: saturate(180%) blur(10px);
position: sticky; top: 0; z-index: 10;
}
.site-header-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.5rem;
max-width: 1120px; margin: 0 auto;
min-height: 56px;
}
.brand {
display: inline-flex; align-items: center;
padding: 0.25rem 0;
max-width: min(58vw, 240px);
}
.brand:hover { text-decoration: none; opacity: 0.85; }
.brand-logo {
display: block;
height: auto;
width: auto;
flex-shrink: 0;
}
.brand-logo--sm { height: 1.15rem; }
.brand-logo--md { height: 2.18rem; }
.brand-logo--lg { height: 1.75rem; }
.brand-logo--sidebar { width: auto; height: auto; max-width: none; object-fit: contain; }
.brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--dark { display: block; }
.brand-wordmark {
font-family: "Inter Tight", var(--font);
font-weight: 800;
letter-spacing: -0.03em;
white-space: nowrap;
flex-shrink: 0;
color: var(--fg);
line-height: 1;
}
/* Brand green accent on the "True" — echoes the old logo's green mark. */
.brand-wm-a { color: #16c47f; }
.brand-wordmark--sm { font-size: 1.2rem; }
.brand-wordmark--md { font-size: 1.6rem; }
.brand-wordmark--lg { font-size: 1.6rem; }
.brand-wordmark--sidebar { font-size: 1.45rem; }
.site-brand-inline {
display: inline-flex; align-items: center;
}
.brand-mark {
width: 22px; height: 22px; border-radius: 0;
background: none;
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg);
}
.brand-mark svg { width: 18px; height: 22px; }
.nav {
display: flex; align-items: center; gap: 0.5rem;
}
/* `:not(.btn)` so button-styled anchors like the Sign up CTA keep their
own color + padding. Otherwise this generic .nav a rule wins on
specificity and bleeds dark-on-dark text into the button. */
.nav a:not(.btn) {
color: var(--fg-soft); padding: 0.5rem 0.85rem; border-radius: 8px;
font-size: 0.94rem; font-weight: 500;
}
.nav a:not(.btn):hover { background: var(--bg-soft); text-decoration: none; }
.nav a.active:not(.btn) { color: var(--fg); background: var(--bg-soft); }
/* Theme toggle — sun/moon icon swap driven by */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; margin: 0 0.15rem;
background: transparent; border: 1px solid var(--line);
border-radius: 8px; cursor: pointer; color: var(--fg-soft);
transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
}
.theme-toggle:hover {
background: var(--bg-soft); border-color: var(--line-strong);
color: var(--fg);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.theme-toggle .theme-toggle-icon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* Fallback when JS hasn't set data-theme yet — default is light, show moon */
html:not([data-theme]) .theme-toggle .icon-moon { display: block; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
padding: 0.6rem 1.1rem; border-radius: 999px;
font-weight: 600; font-size: 0.95rem; line-height: 1;
border: 1px solid transparent; cursor: pointer;
transition: background-color 80ms ease, transform 80ms ease, box-shadow 80ms ease;
text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-deep); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-soft); text-decoration: none; }
.btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
main.container { padding-top: 0; padding-bottom: 4rem; }
/* Real footer styles live further down — see "Site footer" block. The
small declarations here are kept light-weight so nothing depends on the
short-footer reset. */
.site-footer { color: var(--muted); font-size: 0.9rem; }
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
padding: 5rem 0 3.5rem; text-align: center;
}
.hero .eyebrow {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.82rem; font-weight: 600; color: var(--accent);
background: var(--accent-soft); padding: 0.35rem 0.85rem; border-radius: 999px;
margin-bottom: 1.5rem;
}
.hero h1 {
font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05;
margin: 0 auto 1rem; max-width: 22ch;
letter-spacing: -0.02em; font-weight: 700;
}
.hero .tagline {
font-size: 1.15rem; color: var(--muted);
max-width: 38rem; margin: 0 auto 2.25rem;
}
.search-form {
display: flex; gap: 0.5rem; max-width: 36rem; margin: 0 auto 0.75rem;
background: var(--surface);
border: 1px solid var(--line); border-radius: 999px;
padding: 0.35rem; box-shadow: var(--shadow);
}
.search-form input {
flex: 1; padding: 0.75rem 1rem; font-size: 1rem;
border: none; background: transparent; color: var(--fg);
outline: none;
}
.search-form input::placeholder { color: var(--muted-soft); }
.search-form button {
padding: 0.75rem 1.4rem;
}
.search-error { color: var(--bad); margin-top: 0.75rem; }
/* ── Search home (Google-style `/`) ─────────────────────────────────────── */
.search-home {
position: relative;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--bg);
}
.search-home-top {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
padding: 1rem 1.25rem;
}
.search-home-top-inner {
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
}
.search-home-nav {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.search-home-nav-link {
font-size: 0.9rem;
font-weight: 500;
color: var(--muted);
text-decoration: none;
}
.search-home-nav-link:hover { color: var(--fg); }
.search-home-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem 3rem;
}
.search-home-center {
width: 100%;
max-width: 584px;
text-align: center;
}
.search-home-logo {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.search-home-mark {
display: inline-flex;
justify-content: center;
}
.search-home-mark .brand-logo {
height: clamp(3.25rem, 7.8vw, 4.55rem);
width: auto;
}
.search-home-form { margin: 0; }
.search-home-combobox {
position: relative;
text-align: left;
}
.search-home-combobox.is-open .search-home-input-wrap {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom-color: transparent;
box-shadow: none;
}
.search-home-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
margin-top: 0;
padding: 0.35rem 0 0.5rem;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
background: var(--surface);
border: 1px solid var(--line-strong);
border-top: none;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
max-height: min(380px, 52vh);
overflow-y: auto;
overscroll-behavior: contain;
}
.search-home-dropdown:empty { display: none; }
.search-home-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55rem 1rem 0.35rem;
}
.search-home-section-title {
font-size: 0.8125rem;
font-weight: 500;
color: var(--muted);
letter-spacing: -0.01em;
}
.search-home-section-clear {
background: none;
border: none;
padding: 0.25rem 0;
cursor: pointer;
font: inherit;
font-size: 0.8125rem;
font-weight: 500;
color: var(--muted);
transition: color 0.12s ease;
}
.search-home-section-clear:hover { color: var(--fg); }
.search-home-section-clear:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.search-home-result {
align-items: center;
gap: 0.85rem;
min-height: 44px;
padding: 0.55rem 1rem;
font-size: 0.9375rem;
transition: background 0.12s ease;
}
.search-home-result:hover,
.search-home-result:focus-visible {
background: var(--bg-soft);
outline: none;
}
.search-home-result-img {
width: 28px;
height: 28px;
border-radius: 6px;
object-fit: contain;
flex-shrink: 0;
background: var(--bg-soft);
}
.search-home-result-img--avatar { border-radius: 50%; object-fit: cover; }
.search-home-result-img--placeholder {
display: inline-block;
border: 1px solid var(--line);
}
.search-home-result-body {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
flex: 1;
}
.search-home-result-primary {
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.25;
color: var(--fg);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.search-home-result-secondary {
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.35;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-home-result--cta .search-home-result-action {
margin-left: auto;
flex-shrink: 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
.search-home-input-wrap {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.85rem 0.65rem 1rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-home-input-wrap:focus-within {
border-color: var(--line-strong);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.search-home-input-icon {
width: 18px;
height: 18px;
color: var(--muted);
flex-shrink: 0;
}
.search-home-field {
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.search-home-typewriter {
position: absolute;
inset: 0;
display: flex;
align-items: center;
pointer-events: none;
text-align: left;
font-size: 1rem;
line-height: 1.4;
color: var(--muted-soft);
white-space: nowrap;
overflow: hidden;
transition: opacity 0.12s ease;
}
.search-home-typewriter.is-hidden { opacity: 0; }
.search-home-type-cursor::after {
content: '|';
margin-left: 1px;
font-weight: 300;
animation: search-home-cursor-blink 1s step-end infinite;
}
@keyframes search-home-cursor-blink { 50% { opacity: 0; } }
.search-home-input-wrap input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
font-size: 1rem;
line-height: 1.4;
color: var(--fg);
outline: none;
}
.search-home-input-wrap input::placeholder { color: var(--muted-soft); }
.search-home-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
border-radius: 999px;
background: var(--accent);
color: var(--bg);
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.15s ease, transform 0.12s ease;
}
.search-home-submit svg { width: 18px; height: 18px; }
.search-home-submit:hover { opacity: 0.92; }
.search-home-submit:active { transform: scale(0.96); }
.search-home-error {
margin: 0.85rem 0 0;
color: var(--bad);
font-size: 0.92rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.search-home-input-wrap,
.search-home-submit { transition: none; }
.search-home-type-cursor::after { animation: none; }
}
.hero-foot {
color: var(--muted); margin-top: 1.5rem; font-size: 0.95rem;
}
/* ── Section banding ─────────────────────────────────────────────────────── */
.section {
padding: 4rem 0;
}
.section.tinted {
background: var(--bg-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section-head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.section-head h2 {
font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; font-weight: 700;
}
.section-head p { color: var(--muted); margin: 0.35rem 0 0; }
/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1.35rem 1.5rem;
box-shadow: var(--shadow-sm);
}
.card-lg {
padding: 2rem; border-radius: var(--radius-lg);
}
/* Preview cards (homepage): mini leaderboard tiles */
.preview-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.preview-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.1rem 1.2rem;
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 0.5rem;
color: inherit; text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
a.preview-card:hover {
transform: translateY(-1px);
border-color: var(--accent, #2563eb);
box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08));
}
.preview-card .pc-rank {
font-size: 0.75rem; font-weight: 600; color: var(--muted);
letter-spacing: 0.05em; text-transform: uppercase;
}
.preview-card .pc-profile {
display: flex; align-items: center; gap: 0.6rem;
}
.preview-card .pc-avatar {
width: 36px; height: 36px; border-radius: 50%;
object-fit: cover; background: var(--line);
flex-shrink: 0;
}
.preview-card .pc-handle {
font-weight: 600; font-size: 1.05rem; color: var(--fg);
}
.preview-card .pc-stats {
display: flex; justify-content: space-between; margin-top: auto; padding-top: 0.75rem;
border-top: 1px solid var(--line);
font-variant-numeric: tabular-nums;
}
.preview-card .pc-stats span { color: var(--muted); font-size: 0.85rem; }
.preview-card .pc-stats strong { color: var(--fg); font-weight: 600; }
/* ── Page heads ──────────────────────────────────────────────────────────── */
.page-head {
padding: 3rem 0 1.5rem;
}
.page-head h1 {
font-size: 2rem; margin: 0 0 0.35rem; letter-spacing: -0.015em; font-weight: 700;
}
.page-head .meta { color: var(--muted); }
/* ── Sort filter tabs ────────────────────────────────────────────────────── */
.filter-tabs {
display: inline-flex; align-items: center; gap: 0.25rem;
background: var(--bg-soft); border: 1px solid var(--line);
padding: 0.25rem; border-radius: 999px;
}
.filter-tabs a {
padding: 0.4rem 0.85rem; border-radius: 999px;
font-size: 0.88rem; font-weight: 500; color: var(--fg-soft);
}
.filter-tabs a:hover { text-decoration: none; color: var(--fg); }
.filter-tabs a.active {
background: var(--surface); color: var(--fg);
box-shadow: var(--shadow-sm);
}
/* ── Leaderboard table ───────────────────────────────────────────────────── */
.leaderboard-wrap {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm);
}
.leaderboard {
width: 100%; border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.leaderboard th, .leaderboard td {
padding: 0.85rem 1.1rem; text-align: left;
border-bottom: 1px solid var(--line);
}
.leaderboard thead th {
background: var(--bg-soft);
font-weight: 600; font-size: 0.78rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.leaderboard tbody tr:last-child td { border-bottom: none; }
.leaderboard tbody tr:hover { background: var(--bg-soft); }
.leaderboard tbody tr.clickable-row { cursor: pointer; }
.leaderboard .col-rank { width: 3rem; color: var(--muted-soft); font-weight: 600; }
.leaderboard .col-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.leaderboard .col-tickers { min-width: 7rem; }
.leaderboard .col-sortable {
cursor: pointer; user-select: none; white-space: nowrap;
}
.leaderboard .col-sortable:hover { color: var(--fg); }
.leaderboard .col-sortable .sort-icon {
font-size: 0.7em; opacity: 0.4; margin-left: 2px;
}
.leaderboard .col-sortable.sorted { color: var(--fg); font-weight: 700; }
.leaderboard .col-sortable.sorted .sort-icon { opacity: 1; }
.leaderboard a { color: inherit; }
/* Universal client-side sortable headers (progressive enhancement applied by
the table-sort script in base.html). Mirrors .col-sortable so the affordance
reads identically whether a column sorts server-side or in the browser. */
.leaderboard th.js-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.leaderboard th.js-sortable:hover { color: var(--fg); }
.leaderboard th.js-sortable .js-sort-ind { font-size: 0.7em; opacity: 0.35; margin-left: 2px; font-weight: 600; }
.leaderboard th.js-sortable.js-sorted { color: var(--fg); font-weight: 700; }
.leaderboard th.js-sortable.js-sorted .js-sort-ind { opacity: 1; }
.ticker-stack {
display: flex; align-items: center;
}
.ticker-logo-wrap {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--bg-soft); border: 2px solid var(--surface);
overflow: hidden; flex-shrink: 0;
}
.ticker-logo-wrap::before {
content: attr(data-letter);
font-size: 0.65rem; font-weight: 700; color: var(--muted);
text-transform: uppercase;
}
.ticker-logo-wrap > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
border-radius: inherit; z-index: 1;
}
.ticker-logo-wrap.ticker-logo-stacked { margin-left: -8px; }
.ticker-logo-wrap.ticker-logo-stacked:first-child { margin-left: 0; }
.ticker-stack .ticker-more {
margin-left: 4px; font-size: 0.72rem; font-weight: 600;
color: var(--muted); white-space: nowrap;
}
.empty-row { text-align: center; color: var(--muted); padding: 2.5rem; }
.pagination-row td { text-align: center; padding: 1rem; }
.pagination-row a { margin: 0 0.75rem; color: var(--fg-soft); font-weight: 500; }
.infinite-scroll-sentinel td { text-align: center; padding: 1.5rem; color: var(--muted); }
.infinite-loading { text-align: center; padding: 1.25rem; color: var(--muted); font-size: 0.85rem; }
.loading-dots::after {
content: '';
animation: dots 1.2s steps(3, end) infinite;
}
@keyframes dots {
0% { content: ''; }
33% { content: '.'; }
66% { content: '..'; }
100% { content: '...'; }
}
.handle { font-weight: 600; color: var(--fg); }
.handle:hover { color: var(--accent); }
.col-firm { white-space: nowrap; }
.firm-name { color: var(--muted); font-size: 0.86rem; font-weight: 500; }
.handle-with-avatar {
display: inline-flex; align-items: center; gap: 0.6rem;
text-decoration: none;
}
.handle-with-avatar:hover { text-decoration: none; }
.handle-with-avatar:hover span { color: var(--accent); }
.row-avatar {
width: 28px; height: 28px; border-radius: 50%;
object-fit: cover;
border: 1px solid var(--line);
background: var(--bg-soft);
flex-shrink: 0;
}
/* ── Pct + risk pill ─────────────────────────────────────────────────────── */
.pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.pct-pos { color: var(--good); }
.pct-neg { color: var(--bad); }
.pct-zero { color: var(--muted); }
.risk-pill {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.25rem 0.7rem; border-radius: 999px;
font-size: 0.78rem; font-weight: 600;
}
.risk-pill::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; opacity: 0.7;
}
.risk-low { background: var(--low-bg); color: var(--low-fg); }
.risk-medium { background: var(--mid-bg); color: var(--mid-fg); }
.risk-high { background: var(--high-bg); color: var(--high-fg); }
/* ── Profile ─────────────────────────────────────────────────────────────── */
.profile-head {
display: flex; gap: 1.5rem; align-items: center;
padding: 2.5rem 0 2rem;
}
.avatar {
width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
border: 1px solid var(--line); background: var(--bg-soft);
box-shadow: var(--shadow-sm);
}
.profile-id h1 { margin: 0 0 0.25rem; font-size: 1.85rem; letter-spacing: -0.015em; }
.profile-id .meta { color: var(--muted); margin: 0 0 0.75rem; }
.metric-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1rem; margin-bottom: 2rem;
}
.metric { padding: 1.5rem 1.6rem; }
.metric-label {
font-size: 0.78rem; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.05em; font-weight: 600;
}
.metric-value { font-size: 2rem; margin: 0.5rem 0 0.25rem; letter-spacing: -0.02em; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-foot { color: var(--muted); font-size: 0.9rem; }
.risk-card { margin-bottom: 2rem; }
.risk-card h2 { margin-top: 0; font-size: 1.25rem; }
/* ── Latest calls card ──────────────────────────────────────────────────── */
.latest-calls-card { margin-bottom: 2rem; }
.latest-calls-card h2 { margin-top: 0; font-size: 1.25rem; }
.latest-calls-card .tweet-list { margin-top: 1rem; }
.ticker-pill {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
padding: 0.15em 0.5em;
border-radius: 4px;
background: var(--accent-bg, rgba(59, 130, 246, 0.08));
color: var(--accent, #3b82f6);
}
.rationale { padding-left: 1.1rem; margin: 0.75rem 0; }
.rationale li { margin-bottom: 0.4rem; }
.components { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.components li {
display: flex; justify-content: space-between;
padding: 0.45rem 0; border-bottom: 1px solid var(--line);
font-variant-numeric: tabular-nums;
}
.components li:last-child { border-bottom: none; }
.components span { color: var(--muted); text-transform: capitalize; }
.bests {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;
}
.bests h2 { margin-top: 0; font-size: 1.15rem; }
.pick-list { padding: 0; margin: 0.5rem 0 0; list-style: none; }
.pick-list li {
display: grid; grid-template-columns: 5rem 1fr auto;
gap: 1rem; padding: 0.5rem 0; align-items: center;
border-bottom: 1px solid var(--line);
}
.pick-list li:last-child { border-bottom: none; }
.ticker {
font-family: ui-monospace, "SF Mono", Consolas, monospace;
font-weight: 600; color: var(--fg);
}
.perf-table {
width: 100%; border-collapse: collapse;
font-variant-numeric: tabular-nums;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-sm);
}
.perf-table th, .perf-table td {
padding: 0.75rem 1.1rem; text-align: left;
border-bottom: 1px solid var(--line);
}
.perf-table tr:last-child td { border-bottom: none; }
.perf-table th {
color: var(--muted); font-size: 0.78rem; text-transform: uppercase;
letter-spacing: 0.05em; background: var(--bg-soft);
}
.perf-table td:nth-child(n+2), .perf-table th:nth-child(n+2) { text-align: right; }
/* ── Pricing (legacy classes removed — see px-* in the marketing section) ─ */
/* ── Checkout page (/billing/checkout) ────────────────────────────────────── */
.ck-page {
background: #0a0a0a;
color: #e5e5e5;
min-height: 100vh;
padding: 2rem 2rem 4rem;
}
.ck-back {
display: inline-block;
font-size: 0.88rem; color: #999; text-decoration: none;
margin-bottom: 2rem;
transition: color 120ms ease;
}
.ck-back:hover { color: #fff; }
.ck-grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 3rem;
align-items: start;
max-width: 1100px; margin: 0 auto;
}
.ck-form-col {
min-height: 480px;
}
#checkout-mount {
border-radius: var(--radius-lg);
overflow: hidden;
}
.ck-summary {
background: #161616;
border: 1px solid #2a2a2a;
border-radius: var(--radius-lg);
padding: 2.25rem;
position: sticky; top: 2rem;
}
.ck-summary-name {
font-family: var(--font);
font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em;
color: #fff; margin: 0 0 0.5rem;
}
.ck-summary-logo {
display: block;
height: 34px; width: auto; max-width: 100%;
}
.ck-summary-tagline {
font-size: 0.95rem; color: #aaa; line-height: 1.55;
margin: 0 0 1.5rem;
}
.ck-summary-features {
list-style: none; padding: 0; margin: 0 0 1.75rem;
display: flex; flex-direction: column; gap: 0.6rem;
}
.ck-summary-features li {
padding-left: 1.75rem; position: relative;
font-size: 0.9rem; color: #e5e5e5; line-height: 1.5;
}
.ck-summary-features li::before {
content: ""; position: absolute; left: 0; top: 0.3rem;
width: 16px; height: 16px;
background-color: var(--good);
mask: url("data:image/svg+xml;utf8, at a time. */
.status-rotate {
position: relative;
height: 1.4em;
overflow: hidden;
color: var(--muted);
font-size: 0.92rem;
margin: 0.6rem auto 0;
max-width: 560px;
}
.status-rotate span {
position: absolute; inset: 0;
text-align: center;
opacity: 0; transform: translateY(6px);
transition: opacity 220ms ease, transform 220ms ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-rotate span::after {
content: "\2026"; margin-left: 0.05em;
}
.status-rotate span.on {
opacity: 1; transform: translateY(0);
}
/* Scrolling feed of classified mentions — shows multiple cards at once,
newest at top, older cards push down. */
.analyzing-stream {
list-style: none; padding: 0;
display: flex; flex-direction: column; gap: 0.5rem;
margin: 1.5rem auto 0; max-width: 560px;
max-height: 380px; overflow-y: hidden;
text-align: left;
}
.mini-tweet {
display: flex; gap: 0.65rem;
padding: 0.65rem 0.85rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
animation: cardSlideIn 350ms ease both;
flex-shrink: 0;
}
@keyframes cardSlideIn {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.mini-avatar {
width: 32px; height: 32px; border-radius: 50%;
flex-shrink: 0;
border: 1px solid var(--line);
object-fit: cover; background: var(--bg-soft);
}
.mini-body { flex: 1; min-width: 0; }
.mini-head {
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
font-size: 0.8rem; color: var(--muted);
}
.mini-head strong { color: var(--fg); font-weight: 600; }
.mini-dot { color: var(--muted-soft); }
.mini-pill {
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.12rem 0.45rem; border-radius: 999px;
background: var(--bg-soft); color: var(--fg-soft);
}
.mini-ticker {
font-family: ui-monospace, "SF Mono", Consolas, monospace;
letter-spacing: 0;
background: var(--bg-tint); color: var(--accent);
}
.mini-pill-bullish { background: var(--low-bg); color: var(--low-fg); }
.mini-pill-bearish { background: var(--high-bg); color: var(--high-fg); }
.mini-pill-neutral { background: var(--bg-soft); color: var(--muted); }
.mini-text {
margin: 0.3rem 0 0;
color: var(--fg-soft);
font-size: 0.88rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
text-align: center; padding: 3rem 2rem; color: var(--muted);
}
.empty-state h2 { margin: 0 0 0.5rem; color: var(--fg); }
/* Inline variant: sits between the stock chart/stats and the options-flow
intelligence as a quiet note, not a full-page takeover. */
.empty-state--inline {
text-align: left; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.empty-state--inline h2 { font-size: 1.05rem; }
.empty-state--inline p { margin: 0; max-width: 60ch; }
.empty-state code {
background: var(--bg-soft); border: 1px solid var(--line);
padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em;
}
/* ── Ticker explorer (profile body) ──────────────────────────────────────── */
.ticker-explorer {
display: grid;
grid-template-columns: 260px 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
align-items: start;
}
.ticker-sidebar {
position: sticky; top: 80px;
max-height: calc(100vh - 100px);
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 0.75rem;
box-shadow: var(--shadow-sm);
}
.ticker-sidebar h2 {
font-size: 0.78rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
margin: 0.25rem 0.75rem 0.75rem; font-weight: 600;
}
.ticker-sidebar ul { list-style: none; padding: 0; margin: 0; }
.ticker-sidebar li { margin: 0; }
.ticker-sidebar li a {
display: flex; flex-direction: column; gap: 0.15rem;
padding: 0.55rem 0.75rem; border-radius: 8px;
color: var(--fg); text-decoration: none;
border-left: 3px solid transparent;
}
.ticker-sidebar li a:hover { background: var(--bg-soft); text-decoration: none; }
.ticker-sidebar li.active a {
background: var(--bg-soft);
border-left-color: var(--line-strong);
}
.ticker-sidebar .ticker { font-weight: 600; }
.ticker-sidebar .ticker-row-top {
display: flex; align-items: baseline; justify-content: space-between;
gap: 0.5rem;
}
.ticker-sidebar .sidebar-ago {
font-size: 0.7rem; color: var(--muted-soft);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.ticker-sidebar li.active .sidebar-ago { color: var(--fg-soft); }
.ticker-sidebar .sidebar-meta {
font-size: 0.8rem; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.ticker-sidebar li.hide { display: none; }
.sidebar-search {
padding: 0 0.5rem 0.6rem;
}
.sidebar-search input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.88rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--fg);
outline: none;
transition: border-color 80ms ease, background-color 80ms ease;
}
.sidebar-search input::placeholder { color: var(--muted-soft); }
.sidebar-search input:focus {
border-color: var(--accent);
background: var(--surface);
}
/* Native search-input clear button — show in WebKit only; default browser
chrome is fine. */
.sidebar-search input::-webkit-search-cancel-button { cursor: pointer; }
.sidebar-empty {
margin: 0.5rem 0.75rem 0;
font-size: 0.85rem;
color: var(--muted);
}
.sidebar-empty.hide { display: none; }
.ticker-panel {
padding: 1.5rem 1.75rem;
min-width: 0; /* lets the inner canvas shrink in the grid */
}
.ticker-panel-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.ticker-panel-id h2 {
margin: 0 0 0.25rem; font-size: 1.6rem; letter-spacing: -0.01em;
}
.ticker-panel-id .meta { color: var(--muted); margin: 0; }
.metric-strip {
display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.metric-cell {
display: flex; flex-direction: column; align-items: flex-end;
text-align: right;
}
.metric-cell label {
font-size: 0.72rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.metric-cell span {
font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.metric-cell small { color: var(--muted); font-size: 0.8rem; }
.chart-wrap {
position: relative;
height: 360px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.75rem;
}
.chart-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 0.95rem;
pointer-events: none;
}
/* Ticker hero chart: left-to-right shimmer while /history JSON loads. */
.chart-overlay--loading {
align-items: stretch; justify-content: stretch;
padding: 0;
}
.skel-chart--hero {
display: block; width: 100%; height: 100%;
border-radius: 10px;
}
/* Robinhood-style "live" price dot at the end of the 1D line. JS positions it
at the last point and sets --live-dot-color to match the line. */
.live-dot {
position: absolute; z-index: 3; pointer-events: none;
width: 0; height: 0;
--live-dot-color: var(--accent);
}
.live-dot-core, .live-dot-ring {
position: absolute; top: 0; left: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.live-dot-core {
width: 9px; height: 9px;
background: var(--live-dot-color);
box-shadow: 0 0 0 2px var(--surface);
}
.live-dot-ring {
width: 9px; height: 9px;
background: var(--live-dot-color);
opacity: 0.65;
animation: live-dot-pulse 1.6s ease-out infinite;
}
@keyframes live-dot-pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
70% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot-ring { animation: none; opacity: 0; }
}
.marker-legend {
display: flex; gap: 1.25rem; align-items: center;
list-style: none; padding: 0; margin: 1rem 0 0;
font-size: 0.85rem; color: var(--muted);
}
.marker-legend li.dot {
display: inline-flex; align-items: center; gap: 0.45rem;
}
.marker-legend li.dot::before {
content: ""; width: 9px; height: 9px; border-radius: 50%;
display: inline-block;
}
.dot-bullish::before { background: var(--good); }
.dot-bearish::before { background: var(--bad); }
.dot-neutral::before { background: var(--muted-soft); }
/* Tweet-card tooltip — shown on chart-marker hover */
.tweet-card-tooltip {
position: absolute;
z-index: 9999;
width: 340px;
max-width: calc(100vw - 24px);
background: var(--surface);
color: var(--fg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 0.85rem 1rem 0.75rem;
opacity: 0;
pointer-events: none;
transition: opacity 90ms ease;
font-family: var(--font);
font-size: 0.92rem;
line-height: 1.45;
}
.tcc-head {
display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.55rem;
}
.tcc-profile-link {
display: flex; align-items: center; gap: 0.65rem;
flex: 1; min-width: 0;
color: inherit; text-decoration: none;
}
.tcc-profile-link:hover .tcc-id strong { color: var(--accent); }
.tcc-avatar {
width: 36px; height: 36px; border-radius: 50%;
object-fit: cover; background: var(--bg-soft); flex-shrink: 0;
border: 1px solid var(--line);
}
.tcc-id {
display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.tcc-id strong { color: var(--fg); font-weight: 600; font-size: 0.95rem; }
.tcc-id time { color: var(--muted); font-size: 0.78rem; }
.tcc-pill {
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 999px;
flex-shrink: 0;
}
.tcc-bullish { background: var(--low-bg); color: var(--low-fg); }
.tcc-bearish { background: var(--high-bg); color: var(--high-fg); }
.tcc-body {
margin: 0 0 0.75rem;
white-space: pre-wrap;
word-wrap: break-word;
color: var(--fg);
}
.tcc-foot {
display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
padding-top: 0.55rem; border-top: 1px solid var(--line);
font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.tcc-meta { color: var(--muted); }
.tcc-link { margin-left: auto; color: var(--accent); font-weight: 600; }
.tcc-link:hover { text-decoration: underline; }
/* Compact price readout — shown while scrubbing the price line (Robinhood-style) */
.tweet-card-tooltip--price {
width: auto;
min-width: 0;
padding: 0.45rem 0.7rem;
pointer-events: none;
}
.tcc-price { display: flex; flex-direction: column; gap: 0.1rem; }
.tcc-price-value {
font-weight: 700;
font-size: 1rem;
font-variant-numeric: tabular-nums;
color: var(--fg);
line-height: 1.2;
}
.tcc-price-date {
font-size: 0.78rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Tweet list under the chart */
.tweet-list { margin-top: 2rem; }
.tweet-list h3 {
font-size: 1.05rem; margin: 0 0 0.85rem;
color: var(--fg);
}
.tweet-list ol { list-style: none; padding: 0; margin: 0; }
.tweet-row {
display: flex; gap: 0.85rem;
padding: 1rem 1.15rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 0.65rem;
transition: border-color 100ms ease, box-shadow 100ms ease;
}
.tweet-row:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-sm);
}
.tweet-avatar {
width: 44px; height: 44px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid var(--line);
object-fit: cover;
background: var(--bg-soft);
}
.tweet-body {
flex: 1;
min-width: 0; /* allows long lines / URLs to wrap inside the flex child */
}
.tweet-row-head {
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.92rem;
color: var(--muted);
}
.tweet-author {
color: var(--fg);
font-weight: 600;
font-size: 0.95rem;
}
.tweet-dot {
color: var(--muted-soft);
}
.tweet-date {
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.tweet-sentiment {
margin-left: auto;
text-transform: uppercase;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
padding: 0.18rem 0.55rem; border-radius: 999px;
}
.tweet-row.tweet-bullish .tweet-sentiment { background: var(--low-bg); color: var(--low-fg); }
.tweet-row.tweet-bearish .tweet-sentiment { background: var(--high-bg); color: var(--high-fg); }
.tweet-row.tweet-neutral .tweet-sentiment { background: var(--bg-tint); color: var(--accent); }
.tweet-text {
margin: 0.45rem 0 0.65rem;
color: var(--fg);
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
}
.tweet-row-foot {
display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
padding-top: 0.65rem;
border-top: 1px solid var(--line);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.tweet-meta { color: var(--muted); }
/* "Now $X" price value — directional color (red down / grey flat / green up)
vs the entry/post price, tabular figures so digits don't jitter. */
.tweet-price-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tweet-price-val.pct-pos { color: var(--good); }
.tweet-price-val.pct-neg { color: var(--bad); }
.tweet-price-val.pct-zero { color: var(--muted); }
.tweet-link {
margin-left: auto;
font-size: 0.85rem; color: var(--accent); font-weight: 600;
}
@media (max-width: 720px) {
.ticker-explorer { grid-template-columns: 1fr; }
.ticker-sidebar { position: static; max-height: 240px; }
.ticker-panel { padding: 1.1rem 1.1rem; }
.ticker-panel-head { flex-direction: column; gap: 0.75rem; }
.metric-strip { gap: 1rem; }
.metric-cell { align-items: flex-start; text-align: left; }
.chart-wrap { height: 280px; }
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
.nav a:not(.btn) { padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.hero { padding: 3rem 0 2rem; }
.metric-grid, .bests { grid-template-columns: 1fr; }
.profile-head { flex-direction: column; align-items: flex-start; }
.avatar { width: 72px; height: 72px; }
.leaderboard th, .leaderboard td { padding: 0.7rem 0.6rem; }
/* Legacy public-leaderboard mobile trim. Scoped OFF the Most Bought matrix
(.sentiment-matrix) AND the Latest Trades feed (.trades-feed) — those
tables have their own mobile handling (horizontal scroll + sticky header)
and these positional nth-child hides would blank arbitrary headers
(Win rate / Entry) while leaving their body cells, shifting every column
label one cell to the left. */
.leaderboard:not(.sentiment-matrix):not(.trades-feed):not(.uw-mini-table) .col-tickers,
.leaderboard:not(.sentiment-matrix):not(.trades-feed):not(.uw-mini-table) th:nth-child(3),
.leaderboard:not(.sentiment-matrix):not(.trades-feed):not(.uw-mini-table) .col-num:nth-child(6),
.leaderboard:not(.sentiment-matrix):not(.trades-feed):not(.uw-mini-table) th:nth-child(6) { display: none; }
/* Tweet cards on a 375-414px phone — tighter padding, smaller avatar,
and a flex-wrap on the row head so the sentiment pill drops to a new
line instead of getting cropped past the right edge. */
.tweet-row { gap: 0.6rem; padding: 0.75rem 0.85rem; }
.tweet-avatar { width: 36px; height: 36px; }
.avatar-wrap.tweet-avatar { font-size: 36px; }
.tweet-row-head {
flex-wrap: wrap;
row-gap: 0.25rem;
font-size: 0.85rem;
}
.tweet-date { white-space: nowrap; }
.tweet-sentiment {
/* Stop the pill being margin-left:auto'd off the right edge — let it
wrap onto its own line on small screens. */
margin-left: 0;
order: 4;
flex-basis: 100%;
align-self: flex-start;
width: max-content;
}
.tweet-text { font-size: 0.95rem; }
.tweet-row-foot {
gap: 0.5rem; font-size: 0.8rem;
padding-top: 0.55rem;
}
.tweet-link { margin-left: 0; flex-basis: 100%; }
}
/* Narrow phones (≤480px): hide text nav links, keep only the primary CTA
so the header stays a single clean row. */
@media (max-width: 480px) {
.site-header-inner {
padding: 0.7rem 1rem;
}
.nav a:not(.btn),
.nav .nav-account,
.nav .nav-logout-form { display: none; }
.container { padding: 0 1rem; }
}
/* ── Homepage: stats strip ───────────────────────────────────────────────── */
.stats-strip {
padding: 1.75rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1.25rem;
}
.stat-tile {
display: flex; flex-direction: column; gap: 0.25rem;
text-align: left;
}
.stat-tile .stat-num {
font-family: "Inter Tight", var(--font);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700; letter-spacing: -0.01em;
color: var(--fg); line-height: 1;
}
.stat-tile .stat-label {
font-size: 0.85rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
/* ── Homepage: smart-money spotlight ─────────────────────────────────────── */
.spotlight-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.spotlight-card {
display: flex; flex-direction: column; gap: 0.75rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.4rem;
color: inherit; text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.spotlight-card:hover {
transform: translateY(-1px);
border-color: var(--accent);
box-shadow: var(--shadow);
text-decoration: none;
}
.spot-eyebrow {
font-size: 0.75rem; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.06em;
}
.spotlight-card h3 {
font-size: 1.15rem; line-height: 1.3; margin: 0;
letter-spacing: -0.005em; color: var(--fg);
}
.spot-hero {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.6rem 0; border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.spot-hero-meta {
display: flex; flex-direction: column; gap: 0.2rem;
}
.spot-handle { font-weight: 600; color: var(--fg); }
.spot-pct {
font-variant-numeric: tabular-nums;
font-size: 0.9rem; color: var(--muted);
}
.spot-cta {
margin-top: auto; color: var(--accent); font-weight: 600;
font-size: 0.9rem;
}
/* ── Homepage: feature grid ──────────────────────────────────────────────── */
.feature-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.35rem 1.4rem;
display: flex; flex-direction: column; gap: 0.5rem;
}
.feature-num {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.8rem; color: var(--muted);
letter-spacing: 0.05em;
}
.feature h3 {
margin: 0; font-size: 1.05rem; color: var(--fg);
letter-spacing: -0.005em;
}
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }
/* ── Homepage: versus grid (FinTwit vs Trueearnings) ────────────────────────── */
.versus-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.versus-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
}
.versus-card h3 {
margin: 0 0 0.85rem; font-size: 1.1rem; color: var(--fg);
}
.versus-card ul {
margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 0.6rem;
}
.versus-card li {
position: relative; padding-left: 1.55rem;
color: var(--fg-soft); font-size: 0.95rem; line-height: 1.45;
}
.versus-card li::before {
position: absolute; left: 0; top: 0;
width: 1.15rem; height: 1.15rem; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 700;
}
.versus-bad li::before {
content: "×"; color: var(--bad);
background: var(--bad-soft);
}
.versus-good li::before {
content: "✓"; color: var(--good);
background: var(--good-soft);
}
.versus-good { border-color: var(--good); }
/* ── Homepage: FAQ ───────────────────────────────────────────────────────── */
.faq-list {
display: flex; flex-direction: column; gap: 0.5rem;
max-width: 780px;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
}
.faq-item > summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.25rem;
font-weight: 600; font-size: 1rem; color: var(--fg);
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "+";
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 1.1rem; color: var(--muted);
transition: transform 150ms ease;
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item[open] > summary { border-bottom: 1px solid var(--line); }
.faq-body {
padding: 0.9rem 1.25rem 1.1rem;
color: var(--fg-soft); font-size: 0.95rem; line-height: 1.55;
}
.faq-body p { margin: 0; }
.faq-body code {
background: var(--bg-soft); border-radius: 4px;
padding: 0.05rem 0.35rem; font-size: 0.9em;
}
/* ── Homepage: bottom CTA band ───────────────────────────────────────────── */
.cta-band {
border-top: 1px solid var(--line);
background: var(--bg-soft);
padding: 3.5rem 0;
}
.cta-inner {
display: grid; gap: 1.5rem;
grid-template-columns: 1fr; align-items: center;
}
.cta-inner h2 {
margin: 0 0 0.35rem; font-size: clamp(1.4rem, 3vw, 1.9rem);
letter-spacing: -0.01em; color: var(--fg);
}
.cta-inner .muted { margin: 0; }
.cta-form { margin: 0; max-width: 540px; }
@media (min-width: 820px) {
.cta-inner { grid-template-columns: 1fr auto; gap: 2.5rem; }
}
/* ── Site footer ─────────────────────────────────────────────────────────────
Editorial four-column footer with a giant "FOLLOW THE SMART MONEY"
watermark that fades into the page bottom. Colors flow from theme tokens
so light/dark both work without overrides.
────────────────────────────────────────────────────────────────────────── */
.site-footer {
margin-top: 4rem;
background: var(--bg-soft);
border-top: 1px solid var(--line);
color: var(--muted); font-size: 0.92rem;
overflow: hidden; /* clip the watermark's bleed */
position: relative;
}
.site-footer-inner {
max-width: 1120px; margin: 0 auto;
padding: 4rem 1.5rem 0;
}
/* — Top: brand + link columns ———————————————————————————————————————— */
.footer-grid {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: 3rem;
align-items: start;
padding-bottom: 3rem;
border-bottom: 1px solid var(--line);
}
.footer-brand-block {
display: flex; flex-direction: column; gap: 1rem;
max-width: 22rem;
}
.footer-brand {
display: inline-flex; align-items: center;
text-decoration: none;
padding: 0.25rem 0;
}
.footer-brand:hover { text-decoration: none; opacity: 0.85; }
.footer-brand .brand-logo--lg { height: 1.85rem; }
.footer-brand-name {
font-family: "Inter Tight", var(--font);
}
.footer-tagline {
margin: 0;
font-family: "Inter Tight", var(--font);
font-size: 1.15rem; line-height: 1.35;
letter-spacing: -0.01em;
color: var(--fg); font-weight: 600;
}
.footer-tagline .muted {
display: block; font-weight: 400; font-size: 0.98rem;
color: var(--muted); letter-spacing: 0;
}
.footer-social {
display: inline-flex; align-items: center; gap: 0.5rem;
align-self: flex-start;
padding: 0.45rem 0.85rem; border-radius: 999px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--fg-soft); font-size: 0.88rem; font-weight: 500;
font-variant-numeric: tabular-nums;
transition: color 100ms ease, border-color 100ms ease, background-color 100ms ease;
}
.footer-social:hover {
color: var(--fg); border-color: var(--fg);
text-decoration: none; background: var(--surface);
}
.footer-social svg { display: block; opacity: 0.9; }
/* — Link columns —————————————————————————————————————————————————— */
.footer-col {
display: flex; flex-direction: column; gap: 0.85rem;
}
.footer-col-h {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--muted);
margin: 0; font-weight: 500;
}
.footer-col ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.5rem;
}
.footer-col a,
.footer-inline-button {
color: var(--fg-soft);
font-size: 0.94rem;
text-decoration: none;
transition: color 80ms ease;
background: none; border: none; padding: 0; cursor: pointer;
font: inherit; font-size: 0.94rem;
text-align: left;
}
.footer-col a:hover,
.footer-inline-button:hover {
color: var(--accent); text-decoration: none;
}
.footer-inline-form { margin: 0; }
/* — Giant watermark ——————————————————————————————————————————————— */
.footer-watermark {
display: block;
font-family: "Inter Tight", var(--font);
font-size: clamp(3rem, 13vw, 10.5rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.88;
text-align: center;
white-space: nowrap;
margin: 2.5rem 0 -1.5rem;
background: linear-gradient(180deg,
color-mix(in srgb, var(--fg) 14%, transparent) 0%,
color-mix(in srgb, var(--fg) 4%, transparent) 55%,
transparent 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
user-select: none; pointer-events: none;
}
/* — Bottom strip: regulatory disclosure ——————————————————————————— */
.footer-bottom {
position: relative; z-index: 1;
padding: 1.75rem 0 2.25rem;
border-top: 1px solid var(--line);
}
.footer-disclosure {
display: flex; flex-direction: column; gap: 0.85rem;
font-size: 0.78rem; line-height: 1.65;
color: var(--muted);
}
.footer-disclosure p { margin: 0; }
.footer-disclosure strong {
color: var(--fg-soft); font-weight: 600;
}
.footer-disclosure a {
color: var(--muted);
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.footer-disclosure a:hover {
color: var(--fg);
text-decoration-color: var(--fg);
}
/* — Responsive ————————————————————————————————————————————————————— */
@media (max-width: 880px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem 2rem;
}
.footer-brand-block { grid-column: 1 / -1; }
.footer-watermark { margin: 1.5rem 0 -0.75rem; }
.footer-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.site-footer-inner { padding: 3rem 1.25rem 0; }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-brand-block { max-width: none; }
}
/* ── Legal pages (privacy + terms) ───────────────────────────────────────── */
.legal-page {
max-width: 760px;
margin: 0 auto;
padding: 3rem 0 4rem;
color: var(--fg-soft);
font-size: 1rem; line-height: 1.65;
}
.legal-head { margin-bottom: 2rem; }
.legal-kicker {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.75rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
margin: 0 0 0.5rem;
}
.legal-page h1 {
font-size: clamp(2rem, 4vw, 2.6rem);
letter-spacing: -0.02em; margin: 0 0 0.5rem;
color: var(--fg); font-weight: 700;
}
.legal-effective {
margin: 0 0 1.5rem; color: var(--muted); font-size: 0.92rem;
}
.legal-intro { color: var(--fg-soft); margin: 0; }
.legal-section { margin-top: 2.2rem; }
.legal-section h2 {
font-size: 1.25rem; margin: 0 0 0.75rem;
color: var(--fg); letter-spacing: -0.005em;
}
.legal-section h3 {
font-size: 1rem; margin: 1.1rem 0 0.4rem;
color: var(--fg); font-weight: 600;
}
.legal-section p { margin: 0 0 0.85rem; }
.legal-section ul {
margin: 0 0 0.85rem; padding-left: 1.25rem;
}
.legal-section li { margin-bottom: 0.4rem; }
.legal-callout {
border-left: 3px solid var(--accent);
background: var(--bg-soft);
padding: 1.25rem 1.5rem;
border-radius: var(--radius);
}
.legal-callout-warn {
border-left-color: var(--bad);
background: var(--bad-soft);
}
.legal-callout-warn h2 { color: var(--bad); }
.legal-footnote {
margin-top: 2.5rem; padding-top: 1.25rem;
border-top: 1px solid var(--line);
color: var(--muted); font-size: 0.88rem;
}
/* ── Nav additions: account chip + logout form ───────────────────────────── */
.nav-account {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.5rem 0.85rem; border-radius: 8px;
font-size: 0.94rem; font-weight: 500;
color: var(--fg-soft);
}
.nav-account:hover { background: var(--bg-soft); text-decoration: none; color: var(--fg); }
.nav-account-dot {
width: 8px; height: 8px; border-radius: 999px;
background: var(--good); display: inline-block;
}
.nav-logout-form { margin: 0; display: inline; }
.nav-logout-form button { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
/* ── Auth pages (signup, login) ──────────────────────────────────────────── */
.auth-shell {
display: flex; align-items: center; justify-content: center;
min-height: calc(100vh - 200px);
padding: 2rem 1rem;
background: var(--bg-soft);
}
.auth-card {
width: 100%; max-width: 380px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem 2rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.auth-head { margin-bottom: 1.75rem; text-align: center; }
.auth-brand {
display: flex; justify-content: center;
margin: 0 0 1.25rem;
}
.auth-brand .site-brand-inline { display: inline-flex; align-items: center; }
.auth-brand .brand-logo--lg { height: 1.85rem; }
.auth-kicker {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
margin: 0 0 0.4rem;
}
.auth-head h1 {
font-size: 1.35rem;
letter-spacing: -0.01em; font-weight: 700;
margin: 0 0 0.35rem; color: var(--fg);
}
.auth-sub { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.auth-form {
display: flex; flex-direction: column; gap: 0.75rem;
}
.auth-field {
display: flex; flex-direction: column; gap: 0.3rem;
}
.auth-label {
font-size: 0.82rem; font-weight: 500; color: var(--fg);
}
.auth-field input[type="date"] {
padding: 0.7rem 0.9rem; border-radius: var(--radius);
border: 1px solid var(--line-strong);
background: var(--surface); color: var(--fg);
font: inherit; font-size: 1rem;
font-family: var(--font);
outline: none;
transition: border-color 100ms ease, box-shadow 100ms ease;
}
.auth-field input[type="date"]:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-hint { font-size: 0.82rem; color: var(--muted); margin: 0; }
.auth-error {
background: var(--bad-soft); color: var(--bad-fg, var(--bad));
border: 1px solid var(--bad);
border-radius: var(--radius);
padding: 0.6rem 0.8rem; font-size: 0.88rem;
margin: 0;
}
.auth-success {
background: #f0fdf4; color: #166534;
border: 1px solid #bbf7d0;
border-radius: var(--radius);
padding: 0.7rem 0.9rem; font-size: 0.9rem;
margin: 0;
line-height: 1.5;
}
.auth-hint {
color: var(--muted); font-size: 0.82rem; margin: 0;
}
.auth-input {
width: 100%;
padding: 0.65rem 0.85rem; border-radius: var(--radius);
border: 1px solid var(--line-strong);
background: var(--bg); color: var(--fg);
font: inherit; font-size: 0.95rem;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
box-sizing: border-box;
}
.auth-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-input::placeholder { color: var(--muted); opacity: 0.5; }
.btn-auth-email {
width: 100%;
padding: 0.7rem 1rem; font-size: 0.95rem; font-weight: 600;
border-radius: var(--radius) !important;
margin-top: 0.35rem;
}
.auth-form .btn-auth-email.btn-ghost {
padding: 0.55rem 1rem; font-size: 0.88rem;
margin-top: 0;
border-radius: var(--radius) !important;
}
#email-form .auth-field { margin-bottom: 0.75rem; }
.auth-tos {
margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted);
line-height: 1.45; text-align: center;
}
.auth-tos a { color: var(--muted); text-decoration: underline; }
.auth-tos a:hover { color: var(--fg); }
.auth-alt {
margin: 1.5rem 0 0; text-align: center;
color: var(--muted); font-size: 0.93rem;
}
/* ── Account page meta list ──────────────────────────────────────────────── */
.account-meta {
margin: 0; display: grid; gap: 0.5rem 1rem;
grid-template-columns: max-content 1fr;
font-size: 0.95rem;
}
.account-meta dt {
color: var(--muted); font-weight: 500;
}
.account-meta dd {
margin: 0; color: var(--fg); font-variant-numeric: tabular-nums;
}
/* ── Homepage: locked preview cards (blur tease) ─────────────────────────── */
.preview-card-locked {
position: relative;
}
.locked-value {
display: inline-block;
filter: blur(7px);
color: var(--fg);
user-select: none;
letter-spacing: 0.02em;
transition: filter 200ms ease;
}
.preview-card-locked:hover .locked-value { filter: blur(9px); }
.locked-pill {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.2rem 0.6rem; border-radius: 999px;
background: color-mix(in srgb, var(--fg) 7%, transparent);
border: 1px solid var(--line);
color: var(--fg-soft);
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase;
}
.locked-pill svg { opacity: 0.85; }
/* ── Homepage: horizontal scrolling strip ────────────────────────────────── */
.scroll-section { padding-bottom: 3.5rem; }
.scroll-strip {
display: flex;
gap: 0.9rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: max(1.5rem, calc((100vw - 1120px) / 2));
padding: 1rem max(1.5rem, calc((100vw - 1120px) / 2)) 1.5rem;
/* Hide scrollbar on macOS-style trackpads; keep functional. */
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
/* Soft fade on left + right edges to hint at more content. */
-webkit-mask-image: linear-gradient(90deg,
transparent 0,
#000 32px,
#000 calc(100% - 32px),
transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0,
#000 32px,
#000 calc(100% - 32px),
transparent 100%);
}
.scroll-strip::-webkit-scrollbar { height: 6px; }
.scroll-strip::-webkit-scrollbar-thumb {
background: var(--line-strong); border-radius: 3px;
}
.scroll-strip::-webkit-scrollbar-track { background: transparent; }
.strip-card {
flex: 0 0 220px;
scroll-snap-align: start;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 1.1rem 1.1rem;
display: flex; flex-direction: column; gap: 0.75rem;
color: inherit; text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.strip-card:hover {
transform: translateY(-1px);
border-color: var(--accent);
box-shadow: var(--shadow);
text-decoration: none;
}
.strip-card-head {
display: flex; align-items: center; gap: 0.6rem;
}
.strip-avatar {
width: 40px; height: 40px; border-radius: 50%;
object-fit: cover; background: var(--line);
flex-shrink: 0;
}
.strip-meta {
display: flex; flex-direction: column; gap: 0.1rem;
min-width: 0;
}
.strip-handle {
font-weight: 600; font-size: 0.95rem; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip-rank {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.7rem; letter-spacing: 0.05em;
color: var(--muted); text-transform: uppercase;
}
.strip-stats {
display: flex; align-items: baseline; gap: 0.45rem;
padding-top: 0.6rem; border-top: 1px solid var(--line);
font-variant-numeric: tabular-nums;
}
.strip-ytd {
font-family: "Inter Tight", var(--font);
font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em;
color: var(--fg);
}
.strip-ytd-label {
font-size: 0.7rem; color: var(--muted); font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
}
.strip-card .pct-pos { color: var(--good); }
.strip-card .pct-neg { color: var(--bad); }
.strip-card .strip-ytd .pct {
/* Inherit when wrapped in */
color: inherit;
}
/* ── Avatar with first-letter fallback ───────────────────────────────────
unavatar.io is rate-limited by X and occasionally 404s. The macro emits
a span.avatar-wrap[data-letter] with the . */
.screener-wrap > .section-title {
margin: 0;
padding: 1.1rem 1.25rem 0.6rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
.screener-wrap > .tracker-perf-head {
padding: 1.1rem 1.25rem 0.6rem;
margin-bottom: 0;
}
.screener-wrap > .tracker-perf-head .section-title {
padding: 0;
}
/* When a description follows the title, tuck it close and let it own the
bottom gap before the table/chart. */
.screener-wrap > .meta {
margin: -0.35rem 0 0;
padding: 0 1.25rem 0.9rem;
color: var(--muted);
}
.screener-table .col-ticker { min-width: 8rem; }
.screener-table .col-num { font-feature-settings: "tnum"; font-weight: 600; }
.screener-table .col-sentiment { min-width: 8.5rem; width: 10.5rem; }
.screener-table .col-chg7d { min-width: 5rem; }
.screener-table .col-mcap { min-width: 6.5rem; }
.screener-table .col-pe { min-width: 4.5rem; }
.screener-table .col-since { min-width: 5.5rem; white-space: nowrap; }
.screener-table .col-pickers { min-width: 14rem; }
.screener-table .col-pick { max-width: 260px; }
.screener-row { cursor: pointer; }
.screener-table td { padding-top: 0.5rem; padding-bottom: 0.5rem; vertical-align: middle; }
.screener-table .picker-chip-row { flex-wrap: nowrap; overflow: hidden; }
/* Ticker cell — logo + symbol with monospace styling for $TICKER */
.ticker-link {
display: inline-flex; align-items: center; gap: 0.55rem;
color: var(--fg); font-weight: 700; font-size: 0.92rem;
font-family: "JetBrains Mono", "Fira Mono", "SF Mono", Menlo, monospace;
letter-spacing: -0.01em;
}
.ticker-link:hover { color: var(--accent); text-decoration: none; }
.ticker-link .ticker-logo {
width: 22px; height: 22px; border-radius: 50%;
border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft);
margin: 0;
}
.ticker-link .ticker-logo-wrap {
width: 22px; height: 22px;
border: 1px solid var(--line);
}
.ticker-link .ticker-logo-wrap::before {
font-size: 0.6rem;
}
/* Sentiment bar — wider, with always-visible labels */
.sentiment-cell {
display: flex; flex-direction: column; gap: 0.3rem;
min-width: 11rem;
}
.sentiment-bar {
display: flex; height: 5px; border-radius: 999px; overflow: hidden;
background: var(--bg-soft);
}
.sentiment-bar-lg { height: 8px; margin-bottom: 0.5rem; }
.sentiment-bar-bull { background: var(--good); }
.sentiment-bar-bear { background: var(--bad); }
.sentiment-bar-label {
display: inline-flex; gap: 0.45rem; align-items: center;
font-size: 0.76rem;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
/* Sentiment gauge — bull/bear take on the Smart Bets consensus gauge.
Reuses .consensus-gauge / .gauge-track / .gauge-dot (defined with the
sports table) and swaps the win/lose fills for green/red bull/bear. */
.sentiment-gauge-cell { gap: 0.32rem; }
.sentiment-gauge { max-width: 150px; }
/* Smart Investors column — overlapping avatar stack of the smart-money pickers
covering a ticker. Each avatar gets a sentiment-coded ring. When falling back
to the broader picker set (no smart-money call yet) the stack is dimmed. */
.smart-avatars { display: inline-flex; align-items: center; }
.smart-avatar {
display: inline-block; margin-left: -8px; border-radius: 50%;
transition: transform 0.12s ease, z-index 0s;
}
.smart-avatar:first-child { margin-left: 0; }
.smart-avatar:hover { transform: translateY(-2px) scale(1.08); z-index: 2; }
.smart-avatar .pc-avatar {
width: 28px; height: 28px; font-size: 28px;
border: 2px solid var(--surface); border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.smart-avatar--bullish .pc-avatar { border-color: var(--good); }
.smart-avatar--bearish .pc-avatar { border-color: var(--bad); }
.sentiment-gauge-label {
font-size: 0.78rem; font-weight: 600;
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.sentiment-gauge-count { font-size: 0.7rem; font-weight: 500; color: var(--muted); }
.gauge-fill--bull {
height: 100%; background: var(--good);
transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-fill--bear {
height: 100%; background: var(--bad);
transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-team--bull { color: var(--good); width: 26px; }
.gauge-team--bear { color: var(--bad); width: 26px; }
/* Extra breathing room between the gauge track and the BEAR label (scoped to
the sentiment gauge so the sports consensus gauge is unaffected). */
.sentiment-gauge .gauge-team--bear { margin-left: 8px; }
/* Picker chips — compact, clickable, sentiment-coded border accent */
.picker-chip-row {
display: flex; gap: 0.3rem; flex-wrap: wrap;
}
.picker-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.2rem 0.55rem 0.2rem 0.25rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.75rem; font-weight: 500;
color: var(--fg-soft);
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.picker-chip:hover {
background: var(--surface);
border-color: var(--accent);
color: var(--fg);
text-decoration: none;
}
.picker-chip .chip-avatar {
width: 18px; height: 18px; font-size: 9px;
border-radius: 50%;
}
.picker-chip-bullish { border-color: var(--good-soft); }
.picker-chip-bearish { border-color: var(--bad-soft); }
.chip-handle { line-height: 1; }
/* Smart-money leaderboard inside the app shell — same density treatment */
.app-content .leaderboard-wrap {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
/* `clip` (not `hidden`) so this card is NOT a scroll container and the
sticky `thead th` resolves against the page — see the sticky-header block
further down. Clips to the rounded box exactly like `hidden`. */
overflow: clip;
box-shadow: var(--shadow-sm);
}
.app-content .leaderboard {
font-size: 0.875rem;
}
.app-content .leaderboard thead th {
background: var(--bg-soft);
font-size: 0.7rem;
padding: 0.55rem 0.85rem;
}
.app-content .leaderboard td {
padding: 0.6rem 0.85rem;
}
.app-content .leaderboard tbody tr {
transition: background-color 120ms ease;
}
.app-content .leaderboard tbody tr:hover { background: var(--bg-tint); }
/* Ticker drill-down (/app/tickers/{ticker}) */
.ticker-detail-head {
display: flex; align-items: center; gap: 1rem;
}
.ticker-detail-logo {
width: 56px; height: 56px; border-radius: 50%;
border: 1px solid var(--line); object-fit: cover; background: var(--bg-soft);
}
.ticker-detail-head h1 { margin: 0; }
.ticker-detail-head-body { flex: 1 1 auto; min-width: 0; }
.ticker-detail-name {
margin: 0.15rem 0 0; color: var(--muted); font-size: 0.95rem; font-weight: 500;
}
.ticker-price-hero { text-align: left; flex: 0 0 auto; }
.ticker-price-hero-value {
font-size: 2.8rem; font-weight: 700; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* Robinhood-style rolling-digit price. Each numeric character is a fixed-height
window onto a stacked 0–9 strip; a live update translateY-rolls the strip to
the new digit. Non-digit chars ($ . ,) sit static between the reels. A brief
color flash on the whole value cues that it just ticked. */
/* Aligned by flex box-edges, NOT text baselines: each reel and separator is the
same integer-pixel-tall box, flex-end aligned, and its glyph is vertically
centered inside that box via line-height == box height. This sidesteps the
per-reel baseline rounding that made overflow:hidden inline-blocks land a
hair off after a roll. */
.ticker-price-hero-value.odo {
display: inline-flex; align-items: flex-end; line-height: 1; white-space: nowrap;
}
.ticker-price-hero-value .odo-digit {
display: block; flex: 0 0 auto; overflow: hidden; height: var(--odo-h, 1em);
}
.ticker-price-hero-value .odo-strip {
display: block;
transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ticker-price-hero-value .odo-strip > span {
display: block; height: var(--odo-h, 1em); line-height: var(--odo-h, 1em);
text-align: center;
}
.ticker-price-hero-value .odo-sep {
display: block; flex: 0 0 auto; height: var(--odo-h, 1em);
line-height: var(--odo-h, 1em); text-align: center;
}
.ticker-price-hero-value.odo-noanim .odo-strip { transition: none; }
.ticker-price-hero-value.odo-flash { animation: odoFlash 0.6s ease-out; }
@keyframes odoFlash {
0% { color: var(--accent); }
100% { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
.ticker-price-hero-value .odo-strip { transition: none; }
.ticker-price-hero-value.odo-flash { animation: none; }
}
/* Rolling-digit odometer reused across the Most Bought matrix — price, 24h
change, mention counts, velocity, and the consensus % all roll their digits
with the same slot-machine roll + accent flash as the stock-page hero,
scaled to the table cell (height pinned to an integer px via --odo-h).
Generic `.odo` selector so any numeric cell can opt in. */
.odo {
display: inline-flex; align-items: flex-end; line-height: 1; white-space: nowrap;
/* Center the reel box on the text midline instead of its synthesized flex
baseline (= the box's bottom edge). The reel box is shorter than the line
of text it replaces, so baseline alignment let it drift up/down a few px
vs the row's other content once the real mono font loaded; middle
alignment is height-independent and stays consistent across rows. */
vertical-align: middle;
}
.odo .odo-digit {
display: block; flex: 0 0 auto; overflow: hidden; height: var(--odo-h, 1em);
}
.odo .odo-strip {
display: block;
transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.odo .odo-strip > span {
display: block; height: var(--odo-h, 1em); line-height: var(--odo-h, 1em);
text-align: center;
}
/* `pre` keeps separator whitespace (e.g. the space in "56% bullish") from
collapsing when each non-digit char is rendered in its own flex box. */
.odo .odo-sep {
display: block; flex: 0 0 auto; height: var(--odo-h, 1em);
line-height: var(--odo-h, 1em); text-align: center; white-space: pre;
}
.odo.odo-noanim .odo-strip { transition: none; }
.odo.odo-flash { animation: odoFlash 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
.odo .odo-strip { transition: none; }
.odo.odo-flash { animation: none; }
}
.ticker-price-hero-change {
font-size: 0.95rem; font-weight: 600; margin-top: 0.2rem;
font-variant-numeric: tabular-nums;
}
.ticker-price-hero-change.pct-pos { color: var(--good); }
.ticker-price-hero-change.pct-neg { color: var(--bad); }
.ticker-price-hero-change.pct-zero { color: var(--muted); }
.ticker-price-hero-foot {
font-size: 0.75rem; color: var(--muted); font-weight: 500; margin-left: 0.4rem;
}
/* Robinhood-style hero: chart (2/3) + sentiment doughnut (1/3) */
.ticker-hero-grid {
display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;
margin-bottom: 1.5rem;
}
/* No tracked calls → no sentiment card; the chart takes the full width so
the hero doesn't render a lopsided 2-col grid with an empty right column. */
.ticker-hero-grid--solo { grid-template-columns: 1fr; }
.chart-card-head { margin-bottom: 0.75rem; }
.ticker-sentiment-card {
display: flex; flex-direction: column; align-items: center;
padding: 1.25rem 1.5rem;
/* Subtle blue tint (not off-white) plus an accent border + soft halo ring so
the Smart Money card reads as a distinct, highlighted element next to the
plain white cards around it. */
background: var(--bg-tint);
border: 1px solid var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}
.ticker-sentiment-title {
align-self: flex-start; margin: 0 0 0.5rem; font-size: 1.15rem;
}
.sentiment-pie-wrap {
position: relative; width: 100%; max-width: 220px;
aspect-ratio: 1 / 1; margin: 0.5rem auto 1rem;
}
.sentiment-pie-center {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; pointer-events: none;
line-height: 1.1;
}
.sentiment-pie-pct {
font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em;
}
.sentiment-pie-word {
font-size: 0.8rem; font-weight: 600; color: var(--muted);
text-transform: lowercase;
}
.sentiment-pie-legend {
list-style: none; padding: 0; margin: 0 0 1rem;
display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
font-size: 0.85rem; font-weight: 600;
}
.sentiment-pie-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.legend-dot--bull { background: var(--good); }
.legend-dot--bear { background: var(--bad); }
.sentiment-pie-foot {
width: 100%; margin-top: auto; padding-top: 0.75rem;
border-top: 1px solid var(--line);
display: flex; align-items: baseline; justify-content: space-between;
}
.sentiment-pie-foot-label { font-size: 0.8rem; color: var(--muted); }
.sentiment-pie-foot-value { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Smart-money consensus verdict + coverage stats (fills the card) */
.sentiment-consensus { width: 100%; text-align: center; margin-bottom: 1rem; }
.consensus-label {
display: block; font-size: 0.7rem; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
margin-bottom: 0.4rem;
}
.consensus-verdict {
display: inline-block; padding: 0.32rem 0.85rem; border-radius: 999px;
font-weight: 700; font-size: 0.98rem; line-height: 1.1;
}
.consensus-verdict--bull { background: var(--good-soft); color: var(--good); }
.consensus-verdict--bear { background: var(--bad-soft); color: var(--bad); }
.consensus-verdict--mixed {
background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line);
}
.consensus-sub {
display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted);
}
.sentiment-stats { width: 100%; margin: 0 0 0.25rem; }
.sentiment-stat {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.85rem;
}
.sentiment-stat dt { margin: 0; color: var(--muted); }
.sentiment-stat dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Per-source sentiment bars — same directional pressure bar as the Most Bought
matrix (.mx-bar/.mx-bar-fill), stacked vertically with a label + dominant %. */
/* Hero consensus: a distinct headline block (big dominant % + direction word)
over a full-width proportional bar, set apart from the per-source rows by a
hairline divider. The card title already says "Smart Money Sentiment", so the
old "Smart-money consensus" sub-label is dropped — show the number, not a
redundant label. */
.sentiment-consensus--hero {
width: 100%; text-align: left; margin: 0 0 1.25rem;
padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.consensus-headline {
display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.consensus-pct {
font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em;
line-height: 1; font-variant-numeric: tabular-nums;
}
.consensus-word {
font-size: 1rem; font-weight: 600; text-transform: lowercase;
}
.consensus-bar { display: block; width: 100%; margin-top: 0.7rem; height: 10px; }
.consensus-bar .mx-bar-fill { height: 100%; }
.sentiment-source-bars {
list-style: none; padding: 0; margin: 0 0 1rem; width: 100%;
display: flex; flex-direction: column; gap: 0.85rem;
/* Grow to fill the card's remaining height (the chart card next to it is
taller) and spread the rows evenly so there's no dead white space at the
bottom. gap acts as the minimum row spacing. */
flex: 1 1 auto; justify-content: space-between;
}
.ssb-row {
display: grid; grid-template-columns: 84px 1fr 62px;
align-items: center; gap: 0.6rem;
}
/* Rows that map to a detail section below act as jump links: pointer cursor,
a hover tint that bleeds slightly past the grid so the affordance reads, and
a chevron hint appended after the value. */
.ssb-row--link {
cursor: pointer;
border-radius: 10px;
/* Enlarge the hit target well beyond the bar itself: pull the row out to the
card padding on both sides and pad generously top/bottom. Negative margins
are offset by equal padding so layout/alignment is unchanged. */
margin: -0.42rem -0.85rem; padding: 0.42rem 0.85rem;
transition: background 0.12s ease;
}
.ssb-row--link:hover,
.ssb-row--link:focus-visible {
background: var(--accent-soft);
outline: none;
}
.ssb-bar .mx-bar, .ssb-bar .mx-bar-fill { height: 10px; }
/* Smart Money card: loading skeleton (cold off-universe ticker, on-demand
source fetch still in flight) + empty + social-feed loading states. */
.sentiment-loading { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; flex: 1 1 auto; }
.sentiment-loading-head {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.82rem; font-weight: 600; color: var(--fg-soft);
}
.sentiment-spinner {
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid var(--border); border-top-color: var(--accent);
animation: spin 0.7s linear infinite; flex: none;
}
.sentiment-source-bars--skeleton { margin-top: 0.2rem; }
.ssb-row--skeleton { opacity: 0.7; }
.skel {
display: block; border-radius: 6px;
/* NOTE: the theme token is --line, not --border (an invalid var() makes the
whole gradient compute to none and the skeleton renders invisible). */
background: linear-gradient(90deg, var(--line) 25%, var(--bg-soft) 37%, var(--line) 63%);
background-size: 400% 100%; animation: skelShimmer 1.4s ease infinite;
}
.skel-label { width: 60px; height: 12px; }
.skel-bar { width: 100%; height: 10px; border-radius: 999px; }
.skel-val { width: 48px; height: 12px; margin-left: auto; }
@keyframes skelShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Unknown metric in a Latest Trades cell — left-to-right shimmer instead of "--". */
.skel-cell {
display: inline-block; width: 52px; height: 12px;
border-radius: 6px; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
/* Social / intel loading shells — reuse .skel shimmer, no spinners. */
.social-loading-section { min-height: 0; display: block; }
.ticker-social-section--skeleton { pointer-events: none; }
.social-col-sentiment--skeleton {
display: flex; flex-direction: column; gap: 0.55rem;
margin: 0.35rem 0 0.85rem;
}
.social-consensus-skeleton {
display: flex; align-items: baseline; gap: 0.45rem;
}
.skel-social-icon { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.skel-social-title { width: 148px; height: 18px; }
.skel-social-pct { width: 52px; height: 1.6rem; border-radius: 8px; }
.skel-social-word { width: 64px; height: 1rem; border-radius: 6px; }
.skel-social-bar { width: 100%; height: 10px; border-radius: 999px; }
.tweet-row--skeleton {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
.social-feed--skeleton > li:last-child .tweet-row--skeleton { border-bottom: none; }
.skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.tweet-body--skeleton {
flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.45rem;
min-width: 0; padding-top: 0.15rem;
}
.skel-line { width: 100%; height: 12px; }
.skel-line--meta { width: 42%; height: 11px; }
.skel-line--short { width: 68%; }
.sentiment-consensus--skeleton {
display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.15rem;
}
.uw-intel-skeleton { display: flex; flex-direction: column; gap: 1.5rem; margin: 1rem 0; }
.uw-intel-skeleton-block { display: flex; flex-direction: column; gap: 0.85rem; }
.skel-section-title { width: 168px; height: 18px; border-radius: 6px; }
.uw-trends-grid--skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.uw-trend-card--skeleton {
border: 1px solid var(--line); border-radius: var(--radius);
padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.skel-chart { width: 100%; height: 180px; border-radius: 10px; }
.skel-earnings { width: 100%; height: 220px; border-radius: 10px; }
.skel-table { width: 100%; height: 140px; border-radius: 10px; }
@media (max-width: 900px) {
.uw-trends-grid--skeleton { grid-template-columns: 1fr; }
}
.sentiment-empty {
width: 100%; color: var(--fg-soft); font-size: 0.85rem;
display: flex; align-items: center; justify-content: center;
flex: 1 1 auto; text-align: center; padding: 1.5rem 0;
}
.social-loading {
display: flex; align-items: center; gap: 0.5rem;
color: var(--fg-soft); font-size: 0.85rem; padding: 1rem 0;
}
.uw-intel-loading {
display: flex; align-items: center; gap: 0.5rem;
color: var(--fg-soft); font-size: 0.9rem;
padding: 1.5rem; margin: 1rem 0;
border: 1px solid var(--border); border-radius: 14px; background: var(--card);
}
.uw-intel-empty {
color: var(--fg-soft); font-size: 0.85rem;
padding: 1.25rem; margin: 1rem 0;
border: 1px dashed var(--border); border-radius: 14px; text-align: center;
}
.ssb-label {
font-size: 0.82rem; font-weight: 600; color: var(--fg-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center;
}
/* Brand sources (X / StockTwits) render their logo tile instead of a text
label, matching the stocks matrix header. No off-white tile background — the
X tile keeps its black brand square, StockTwits sits on the card directly. */
.ssb-label .src-tile {
width: 22px; height: 22px; border-radius: 6px;
background: transparent; border: none;
}
.ssb-label .src-tile--x { background: #000; }
.ssb-label .src-icon { width: 16px; height: 16px; }
.ssb-label .src-tile--x .src-icon { width: 100%; height: 100%; padding: 4px; }
.ssb-bar { display: flex; align-items: center; width: 100%; }
.ssb-val {
font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 900px) {
.ticker-hero-grid { grid-template-columns: 1fr; }
.sentiment-pie-wrap { max-width: 200px; }
}
/* Range selector sits below the chart, Robinhood-style */
.ticker-detail-chart .chart-range-row { margin: 0.9rem 0 0; }
.chart-range-row {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 0.5rem 1rem;
}
.chart-range-tabs {
display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0;
}
.chart-legend--avwap {
position: relative;
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.78rem; font-weight: 600; color: var(--muted);
white-space: nowrap; cursor: help;
border-radius: 6px;
outline: none;
}
.chart-legend--avwap[hidden] { display: none; }
.chart-legend--avwap:focus-visible {
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--earnings-avwap, var(--chart-line, #2563eb));
}
.chart-legend-swatch {
width: 20px; height: 2px; border-radius: 1px; flex-shrink: 0;
background: var(--earnings-avwap, var(--chart-line, #2563eb));
}
.chart-legend-tip {
position: absolute; right: 0; bottom: calc(100% + 0.55rem);
z-index: 12; width: max-content; max-width: min(288px, calc(100vw - 2rem));
padding: 0.65rem 0.75rem;
background: var(--surface); color: var(--fg);
border: 1px solid var(--line); border-radius: 10px;
box-shadow: var(--shadow-lg);
font-size: 0.76rem; font-weight: 500; line-height: 1.45;
text-align: left; white-space: normal;
pointer-events: none; opacity: 0; visibility: hidden;
transform: translateY(4px);
transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.chart-legend--avwap:hover .chart-legend-tip,
.chart-legend--avwap:focus .chart-legend-tip,
.chart-legend--avwap:focus-within .chart-legend-tip {
opacity: 1; visibility: visible; transform: translateY(0);
}
.chart-legend-tip-title {
display: block; font-weight: 700; color: var(--fg);
margin-bottom: 0.35rem; font-size: 0.8rem;
}
.chart-legend-tip-lead {
margin: 0; color: var(--fg-soft);
}
.chart-range-tab {
appearance: none; border: 1px solid var(--line); background: var(--bg-soft);
color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600;
padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.chart-range-tab:hover { color: var(--text); border-color: var(--line-strong); }
.chart-range-tab.is-active {
background: var(--fg); border-color: var(--fg); color: var(--bg);
}
/* Key-stats grid (high-level company metrics) */
.ticker-stats { margin-bottom: 1.5rem; }
.ticker-stats h2 { margin: 0 0 1rem; font-size: 1.15rem; }
/* Flat, borderless grid that matches the About facts grid exactly — no card
box / rounded corners / interior gridlines; spacing comes from the grid gap
so the two sections read as one consistent treatment on the flat page. */
.ticker-stats-grid {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 1rem 1.25rem; margin: 0;
}
.ticker-stat { padding: 0; }
.ticker-stat dt {
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.72rem; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.04em; font-weight: 600; margin: 0 0 0.25rem;
}
.ticker-stat .stat-icon {
width: 15px; height: 15px; flex: 0 0 auto;
color: inherit; opacity: 0.65;
}
.ticker-stat dd {
margin: 0; font-size: 0.95rem; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.ticker-stats-foot {
margin: 0.85rem 0 0; font-size: 0.75rem; color: var(--muted);
}
/* Match the About facts' 2-column mobile reflow so both grids stay in sync. */
@media (max-width: 720px) {
.ticker-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* About / company description card (Robinhood-style) */
.ticker-about { margin-bottom: 1.5rem; }
.ticker-about h2 { margin: 0 0 0.85rem; font-size: 1.15rem; }
.about-summary { margin-bottom: 1.1rem; }
.about-text {
margin: 0; color: var(--fg); line-height: 1.6; font-size: 0.95rem;
}
.about-summary[data-collapsed="true"] .about-text {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.about-toggle {
appearance: none; border: none; background: none; padding: 0;
margin-top: 0.4rem; cursor: pointer;
color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 600;
}
.about-toggle:hover { text-decoration: underline; color: var(--fg); }
.about-facts {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1rem 1.25rem; margin: 0;
padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.about-fact dt {
font-size: 0.72rem; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.04em; font-weight: 600; margin: 0 0 0.25rem;
}
.about-fact dd {
margin: 0; font-size: 0.95rem; font-weight: 600; word-break: break-word;
}
.about-fact dd a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); }
@media (max-width: 720px) {
.about-facts { grid-template-columns: repeat(2, 1fr); }
}
.ticker-detail-metrics {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1rem; margin-bottom: 1.5rem;
}
.metric-sentiment { display: flex; flex-direction: column; }
.sentiment-hero {
display: flex; align-items: baseline; gap: 0.35rem;
margin: 0.5rem 0 0.75rem; line-height: 1;
}
.sentiment-hero .sentiment-hero-pct {
font-size: 2rem; font-weight: 700; letter-spacing: -0.02em;
}
.sentiment-hero-word {
font-size: 0.95rem; font-weight: 600; text-transform: lowercase;
}
.sentiment-hero-word--bullish { color: var(--good); }
.sentiment-hero-word--bearish { color: var(--bad); }
.sentiment-tug-track {
display: flex; height: 10px; border-radius: 999px; overflow: hidden;
background: var(--bg-soft);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
margin-bottom: 0.75rem;
}
.sentiment-tug-bull {
background: linear-gradient(90deg, var(--good-soft), var(--good));
}
.sentiment-tug-bear {
background: linear-gradient(90deg, var(--bad), var(--bad-soft));
}
.sentiment-tug-counts {
display: flex; justify-content: space-between; gap: 0.5rem;
}
.sentiment-tug-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.25rem 0.55rem; border-radius: 999px;
font-size: 0.76rem; font-weight: 600;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sentiment-tug-chip--bull { background: var(--good-soft); color: var(--good); }
.sentiment-tug-chip--bear { background: var(--bad-soft); color: var(--bad); }
.sentiment-tug-arrow { font-size: 0.85em; opacity: 0.85; line-height: 1; }
.ticker-detail-chart { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; }
/* ── Robinhood-flat ticker page ─────────────────────────────────────────────
The /app/tickers/{T} page reads as one continuous white surface (à la
Robinhood): the content panel is pure white, every section drops its card
chrome (border / shadow / fill / box-radius), and blocks are separated by
whitespace + a single hairline rule rather than nested boxes. Scoped to the
ticker page via :has(.ticker-detail-head) so other /app/* pages keep cards. */
/* 1. Pure-white content panel — no off-white tint behind the page. */
.app-main:has(.ticker-detail-head) { background: var(--bg); }
/* 2. Strip card chrome from every section card + nested data card / table box. */
.app-content:has(.ticker-detail-head) .card,
.app-content:has(.ticker-detail-head) .screener-wrap {
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
.ticker-detail-chart .chart-wrap {
background: transparent;
border: none;
padding: 0;
height: 340px;
position: relative;
}
@media (max-width: 640px) { .ticker-detail-chart .chart-wrap { height: 260px; } }
/* 3. Section rhythm: one hairline divider + even vertical space between blocks,
flush to the panel edge (no side padding) for the full-width RH look. */
.app-content:has(.ticker-detail-head) > .ticker-detail-chart { margin: 0 0 1.75rem; padding: 0; }
.app-content:has(.ticker-detail-head) > .ticker-about,
.app-content:has(.ticker-detail-head) > .ticker-stats,
.app-content:has(.ticker-detail-head) > .ticker-detail-pickers,
.app-content:has(.ticker-detail-head) > .ticker-detail-similar,
.app-content:has(.ticker-detail-head) > .ticker-detail-calls,
.app-content:has(.ticker-detail-head) .ticker-section {
border-top: 1px solid var(--line);
margin: 0;
padding: 1.75rem 0;
}
/* The price chart is the lead block — no divider rule above it. */
.app-content:has(.ticker-detail-head) .ticker-detail-chart.ticker-section {
border-top: none;
padding-top: 0;
}
.ticker-smart-money-stack {
display: flex;
flex-direction: column;
gap: 0;
}
.ticker-smart-money-stack > .ticker-sentiment-card {
margin-bottom: 0;
}
/* ── Redesigned ticker page: uniform standalone sections ────────────────────
Trading activity = three same-size graph panels (2-up on desktop), each its
own self-contained block. Social = two stacked standalone sections. */
.uw-trends-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
/* Re-add light panel chrome so each side-by-side graph reads as standalone
(the page otherwise strips card chrome for the flat look). */
.app-content:has(.ticker-detail-head) .uw-trend-card.card {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.1rem 1.25rem;
}
.uw-trend-card-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 0.75rem; margin-bottom: 0.75rem;
}
.uw-trend-card-head h2 { font-size: 1.02rem; margin: 0; letter-spacing: -0.01em; }
.uw-trend-sub {
margin: 0.15rem 0 0; font-size: 0.72rem; font-weight: 500;
color: var(--muted); letter-spacing: 0.01em;
}
.uw-trend-card .uw-trend-chart-wrap { height: 220px; position: relative; }
.uw-trend-card .uw-trend-toggle { margin-top: 0.6rem; }
/* Per-ticker earnings card (full-width above the trends grid). */
:root {
--earnings-est: rgba(22, 163, 74, 0.42);
--earnings-est-border: rgba(22, 163, 74, 0.88);
}
.uw-earnings-card {
margin-bottom: 1rem;
--ot-earnings-dot: 14px;
--ot-earnings-dot-border: 2px;
}
.uw-earnings-chart-wrap {
height: 220px; position: relative; overflow: hidden;
padding: 0 0.5rem 0 0.35rem;
}
.uw-earnings-card .uw-earnings-legend--est::before,
.uw-earnings-card .uw-earnings-legend--act::before,
.uw-earnings-card .uw-earnings-dot {
width: var(--ot-earnings-dot);
height: var(--ot-earnings-dot);
border-radius: 50%;
flex-shrink: 0;
box-sizing: border-box;
}
.uw-earnings-card .uw-earnings-legend--est::before,
.uw-earnings-card .uw-earnings-legend--act::before {
content: '';
display: inline-block;
margin-right: 0.35rem;
vertical-align: middle;
}
.uw-earnings-card .uw-earnings-legend--est::before,
.uw-earnings-card .uw-earnings-dot--est {
background: var(--earnings-est);
border: var(--ot-earnings-dot-border) solid var(--earnings-est-border);
}
.uw-earnings-card .uw-earnings-legend--act::before,
.uw-earnings-card .uw-earnings-dot--act {
background: var(--good, #16a34a);
border: var(--ot-earnings-dot-border) solid var(--good, #16a34a);
}
.uw-earnings-foot {
display: flex; flex-wrap: wrap; gap: 1.25rem;
margin-top: 0.85rem; padding-top: 0.75rem;
border-top: 1px solid var(--line);
}
.uw-earnings-foot-item {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
font-size: 0.82rem;
}
.uw-earnings-foot-item .uw-earnings-dot { align-self: center; }
.uw-earnings-foot-label { font-weight: 700; color: var(--fg); }
.uw-earnings-foot-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.uw-earnings-foot-item--expected .uw-earnings-foot-val { color: var(--fg); }
@media (max-width: 720px) {
.uw-earnings-card.card { padding: 1rem; }
.uw-earnings-card .uw-trend-card-head {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.uw-earnings-card .uw-trend-legend {
flex-wrap: wrap;
gap: 0.65rem 1rem;
}
.uw-earnings-chart-wrap { height: 240px; }
.uw-earnings-foot {
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
.uw-earnings-foot-item {
width: 100%;
flex-wrap: nowrap;
gap: 0.4rem 0.5rem;
}
.uw-earnings-foot-val {
min-width: 0;
overflow-wrap: anywhere;
}
}
/* Earnings Drift Grade — standalone ticker section above #uw-earnings */
.edg-section.card {
padding: 1rem 1.1rem;
}
.edg-title {
margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
}
.edg-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem;
}
.edg-sub {
margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.4;
}
.edg-head-grade {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
}
.edg-badge { font-size: 0.95rem; }
.edg-score {
font-size: 0.72rem; font-weight: 700; color: var(--muted);
font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}
.edg-meta {
margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--muted); line-height: 1.45;
}
.edg-meta strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.edg-partial-note {
margin: 0 0 0.75rem;
padding: 0.55rem 0.7rem;
font-size: 0.78rem;
line-height: 1.45;
color: var(--fg-soft);
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-sm, 6px);
}
.edg-components {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.55rem;
}
.edg-row { margin: 0; }
.edg-row-top {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.5rem 0.65rem;
align-items: baseline;
font-size: 0.84rem;
}
.edg-row-label { font-weight: 600; color: var(--fg); }
.edg-row-weight {
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase;
}
.edg-row-score {
min-width: 2rem; text-align: right; font-weight: 800;
font-variant-numeric: tabular-nums;
}
.edg-row-score--hi { color: var(--good); }
.edg-row-score--mid { color: #92600a; }
.edg-row-score--lo { color: var(--bad); }
.edg-row-score--na { color: var(--muted); font-weight: 500; }
.edg-bar {
height: 6px; border-radius: 999px; background: var(--bg-soft);
overflow: hidden; margin-top: 0.25rem;
}
.edg-bar-fill {
display: block; height: 100%; border-radius: 999px;
transition: width 0.25s ease;
}
.edg-bar-fill--hi { background: var(--good); }
.edg-bar-fill--mid { background: #fbbf24; }
.edg-bar-fill--lo { background: var(--bad); }
.edg-bar-fill--na { background: var(--line-strong); width: 0 !important; }
.edg-row-note {
margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--fg-soft); line-height: 1.4;
}
.edg-summary {
margin: 0.75rem 0 0; font-size: 0.84rem; color: var(--fg); line-height: 1.45;
}
.edg-transcript {
margin-top: 0.85rem;
padding: 0.75rem 0.85rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-sm, 6px);
}
.edg-transcript-title {
margin: 0 0 0.4rem;
font-size: 0.72rem;
font-weight: 700;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.edg-transcript-body {
margin: 0;
font-size: 0.86rem;
line-height: 1.5;
color: var(--fg);
}
.edg-transcript-guidance {
margin: 0.5rem 0 0;
font-size: 0.84rem;
line-height: 1.45;
color: var(--fg-soft);
}
.edg-transcript-k {
font-weight: 700;
color: var(--muted);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.35rem;
}
.edg-foot {
margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4;
}
.edg-foot a { font-weight: 600; }
/* Grade components as square tiles (Earnings-Whisper-style module strip):
each component is a titled square with a circular score ring instead of a
full-width progress bar. Used by _ticker_earnings_grade.html + the
earnings-grade landing sample. */
.edg-grid {
list-style: none; margin: 0.5rem 0 0; padding: 0;
display: grid; gap: 0.6rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 560px) { .edg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.edg-tile {
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
text-align: center; padding: 0.8rem 0.6rem 0.85rem;
border: 1px solid var(--line); border-radius: var(--radius-sm, 10px);
background: var(--bg-soft);
--ring-c: var(--muted); --num-c: var(--fg); --track: var(--line-strong);
}
.edg-tile--hi { --ring-c: var(--good); --num-c: var(--good); }
.edg-tile--mid { --ring-c: #f5b301; --num-c: #92600a; }
.edg-tile--lo { --ring-c: var(--bad); --num-c: var(--bad); }
.edg-tile--na { --ring-c: var(--line-strong); --num-c: var(--muted); }
.edg-tile-label { font-size: 0.8rem; font-weight: 700; color: var(--fg); line-height: 1.2; letter-spacing: -0.01em; }
.edg-tile-weight {
font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.edg-tile-ring {
position: relative; width: 68px; height: 68px; border-radius: 50%;
margin: 0.1rem 0;
background: conic-gradient(var(--ring-c) calc(var(--p, 0) * 3.6deg), var(--track) 0);
}
.edg-tile-ring::before {
content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg-soft);
}
.edg-tile-ring-val {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--num-c);
}
.edg-tile-note {
margin: 0; font-size: 0.7rem; color: var(--fg-soft); line-height: 1.32;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Two standalone social sections (X / StockTwits), stacked full-width. */
.ticker-social-section .social-col-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.ticker-social-section .social-col-title {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -0.01em;
}
.social-col-tools { display: inline-flex; align-items: center; gap: 0.9rem; }
/* 4. Tweet/call rows: borderless, separated by a single hairline divider. */
.app-content:has(.ticker-detail-head) .tweet-list { margin-top: 1rem; }
.app-content:has(.ticker-detail-head) .tweet-row {
background: transparent;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--line);
padding: 1rem 0;
}
.app-content:has(.ticker-detail-head) .tweet-list > li:last-child .tweet-row,
.app-content:has(.ticker-detail-head) .tweet-list li:last-child .tweet-row {
border-bottom: none;
}
/* 5. Flatten the UW sub-cards so options/flow/dark-pool blocks sit flush. */
.app-content:has(.ticker-detail-head) .uw-stat,
.app-content:has(.ticker-detail-head) .uw-gex-card,
.app-content:has(.ticker-detail-head) .uw-feed-card { padding-left: 0; padding-right: 0; }
.ticker-detail-pickers { margin-bottom: 1.5rem; }
.ticker-detail-pickers h2 { margin: 0 0 1rem; font-size: 1.15rem; }
/* Per-picker table (trends/screener styled) */
.picker-table .col-stance,
.picker-table .col-position { text-align: left; }
.picker-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
.picker-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.picker-name strong { font-weight: 600; }
.picker-name .picker-handle { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.stance-chips { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.stance-chip {
display: inline-flex; align-items: center;
padding: 0.2rem 0.5rem; border-radius: 999px;
font-size: 0.76rem; font-weight: 600;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stance-chip--bull { background: var(--good-soft); color: var(--good); }
.stance-chip--bear { background: var(--bad-soft); color: var(--bad); }
.stance-chip--neutral { background: var(--bg-soft); color: var(--muted); }
/* Unusual Whales per-ticker enrichment sections. */
.ticker-uw { margin: 1.5rem 0; }
.ticker-uw-title { font-size: 1.15rem; margin: 0 0 0.75rem; }
/* Analysts per-ticker section — shares .uw-feed-card chrome with options flow. */
.ticker-analysts { margin-bottom: 0; }
/* ── Live social feed (X + StockTwits) ──────────────────────────────────────
Two side-by-side chatter columns that htmx self-polls every 30s. Each column
reuses the .tweet-row language; the feed list is height-capped + scrollable so
the section stays compact while still streaming the latest posts. */
.ticker-social { margin: 1.5rem 0; }
.social-section-title {
display: flex; align-items: center; gap: 0.6rem;
}
.social-live {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--bad);
}
.social-live-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
box-shadow: 0 0 0 0 var(--bad-soft);
animation: social-pulse 1.8s ease-out infinite;
}
@keyframes social-pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
.social-live-dot { animation: none; }
}
.social-feed-controls {
margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
}
.social-refresh-btn,
.social-live-toggle {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.3rem 0.65rem; border-radius: 999px;
border: 1px solid var(--line); background: var(--card, #fff);
color: var(--fg); cursor: pointer;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
line-height: 1; white-space: nowrap;
}
.social-refresh-btn:hover,
.social-live-toggle:hover { border-color: var(--accent); color: var(--accent); }
.social-refresh-ico { display: inline-block; }
.social-refresh-btn.htmx-request { opacity: 0.6; pointer-events: none; }
.social-refresh-btn.htmx-request .social-refresh-ico { animation: social-spin 0.6s linear infinite; }
@keyframes social-spin { to { transform: rotate(360deg); } }
.social-live-toggle-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
}
.social-live-toggle.is-live {
border-color: var(--bad); color: var(--bad); background: var(--bad-soft);
}
.social-live-toggle.is-live .social-live-toggle-dot {
background: var(--bad); animation: social-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.social-refresh-btn.htmx-request .social-refresh-ico,
.social-live-toggle.is-live .social-live-toggle-dot { animation: none; }
}
/* One-shot flash on a post that just arrived via a live refresh. */
.tweet-row.tweet-new { animation: tweet-new-flash 1.8s ease-out; }
@keyframes tweet-new-flash {
0% { background: var(--accent-soft, rgba(37, 99, 235, 0.12)); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.tweet-row.tweet-new { animation: none; }
}
.ticker-social-cols {
display: flex; flex-direction: column; gap: 1rem;
}
.ticker-social-col {
margin: 0; padding: 1rem 1.1rem;
background: var(--card, #fff); border: 1px solid var(--line);
border-radius: 14px; min-width: 0;
}
.social-col-head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.6rem; margin-bottom: 0.75rem;
}
.social-col-title {
display: flex; align-items: center; gap: 0.5rem;
font-size: 1rem; font-weight: 700;
}
.social-col-title .src-tile {
width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
}
.social-col-title .src-tile--x { background: #000; }
.social-col-title .src-icon { width: 16px; height: 16px; }
.social-col-title .src-tile--x .src-icon { width: 100%; height: 100%; padding: 4px; }
.social-col-meta {
font-size: 0.74rem; font-weight: 600; color: var(--muted);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.social-col-sentiment {
padding-bottom: 0.85rem; margin-bottom: 0.4rem;
border-bottom: 1px solid var(--line);
}
.social-col-sentiment .consensus-pct { font-size: 1.6rem; }
.social-counts { font-size: 0.82rem; color: var(--muted); margin: 0.45rem 0 0; }
.social-feed {
margin-top: 0.4rem; max-height: 520px; overflow-y: auto;
padding-right: 0.35rem;
scrollbar-width: thin;
}
.social-feed .tweet-row { padding: 0.7rem 0; }
.social-feed > li:first-child .tweet-row { padding-top: 0.35rem; }
.social-empty {
font-size: 0.88rem; color: var(--muted); margin: 0.6rem 0 0.2rem;
}
/* "+12% since" chip in the Latest-calls row header — the return measured from
the price when the call was posted to now. Pushed to the right edge of the
header so it reads as the headline number for each call. */
.tweet-return {
font-family: var(--font-mono);
font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.uw-stat-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem; margin-bottom: 1rem;
}
.uw-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem 1rem; }
.uw-stat-label {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--muted);
}
.uw-stat-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uw-gex-card, .uw-feed-card { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.uw-feed-card h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.85rem; line-height: 1.2; }
/* Recent options flow: show only the first 10 rows; the expand button reveals
the rest. */
.uw-feed-card .uw-flow-row--extra { display: none; }
.uw-feed-card.is-expanded .uw-flow-row--extra { display: table-row; }
/* Unified expand / contract control — one clean, static pill shared by the
options-flow "Show all", the Trading Trends "Expand" (chart modal), and the
per-tab "Show details" buttons so every bottom section reads identically.
No transitions/animations anywhere (hover state applies instantly). */
.uw-flow-expand,
.uw-trend-expand,
.uw-trend-toggle {
appearance: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
padding: 0.35rem 0.85rem;
border: 1px solid var(--line); border-radius: 999px;
background: var(--bg-soft); color: var(--fg-soft);
font: inherit; font-size: 0.8rem; font-weight: 600;
}
.uw-flow-expand:hover,
.uw-trend-expand:hover,
.uw-trend-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* Contextual placement only (shared visual chrome above): show-all sits under
its table; show-details sits centered under the chart. */
.uw-flow-expand { margin-top: 0.85rem; }
.uw-gex-card h3, .uw-feed-card h3 { font-size: 1rem; margin: 0 0 0.75rem; }
.uw-gex-sub { font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-left: 0.4rem; }
.uw-gex-wrap { position: relative; height: 280px; }
.uw-mini-table { font-size: 0.85rem; }
.uw-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -0.15rem;
padding: 0 0.15rem;
}
.uw-table-scroll .uw-mini-table { min-width: 36rem; }
.uw-table-scroll .trades-feed { min-width: 42rem; }
.uw-table-scroll .trades-feed:has(.mx-firm-col) { min-width: 52rem; }
.uw-table-scroll .trades-feed:has(.num-bar-cell) { min-width: 58rem; }
/* Ticker intel detail tables reuse Latest Trades picker typography. */
.uw-trend-detail .trades-feed .col-picker { min-width: 210px; }
.uw-trend-detail .trades-feed .mx-picker { max-width: 260px; }
.uw-trend-detail .trades-feed .mx-picker-handle {
white-space: normal;
text-overflow: clip;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.uw-trend-detail .trades-feed .mx-firm-col { min-width: 130px; max-width: 200px; }
/* Inline pill for an insider-trade attribute (e.g. Rule 10b5-1 planned sale). */
.uw-tag {
display: inline-block;
margin-left: 0.4rem;
padding: 0.05rem 0.4rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 4px;
color: var(--muted);
background: var(--bg-soft);
vertical-align: middle;
}
/* Single-letter party badge (D / R / I) beside a politician's name. */
.uw-party {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 0.35rem;
font-size: 0.62rem;
font-weight: 700;
border-radius: 50%;
color: #fff;
vertical-align: middle;
}
.uw-party--d { background: #2563eb; }
.uw-party--r { background: #dc2626; }
.uw-party--i { background: #6b7280; }
/* Premium cell: dollar value with a scaled green/red bar beneath it (scaled to
the largest premium in the table) so relative trade size reads at a glance.
Same .mx-bar language as the stocks Most Bought matrix. */
.uw-prem-cell { vertical-align: middle; }
.uw-prem-val { display: block; }
.uw-prem-bar {
display: block; width: 100%; max-width: 120px; height: 6px;
margin: 0.3rem 0 0 auto;
}
.uw-prem-bar .mx-bar-fill { height: 100%; }
/* Generic "value + scaled bar" numeric cell (e.g. institution holdings Change):
the dollar/share value with a green/red bar beneath it scaled to the largest
magnitude in the column, so relative buy/sell size reads at a glance. Same
.mx-bar language as the stocks matrix. */
.num-bar-cell { vertical-align: middle; }
.num-bar-val { display: block; }
.num-bar {
display: block; width: 100%; max-width: 120px; height: 6px;
margin: 0.3rem 0 0 auto;
}
.num-bar .mx-bar-fill { height: 100%; }
/* Trading Trends — Robinhood-style text tabs over Institutions/Insiders/Congress. */
.uw-trend-tabs {
display: inline-flex; align-items: center; gap: 0.5rem;
margin-bottom: 0.85rem; border-bottom: 1px solid var(--line);
}
.uw-trend-tab {
appearance: none; background: none; border: none; cursor: pointer;
padding: 0.4rem 0.1rem; margin-bottom: -1px;
font-size: 0.9rem; font-weight: 600; color: var(--fg-soft);
border-bottom: 2px solid transparent;
}
.uw-trend-tab:hover { color: var(--fg); }
.uw-trend-tab.is-active { color: var(--fg); border-bottom-color: var(--fg); }
.uw-trend-panel { display: none; }
.uw-trend-panel.is-active { display: block; }
.uw-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.uw-trend-head h3 { margin: 0; }
.uw-trend-chart-wrap { position: relative; height: 240px; margin-bottom: 0.85rem; }
.uw-trend-chart-wrap--lg { height: min(60vh, 480px); margin-bottom: 0; }
.uw-trend-empty {
color: var(--muted); font-size: 0.9rem; text-align: center;
padding: 1.75rem 0.5rem; margin: 0;
}
.uw-trend-legend {
display: flex; gap: 1rem; justify-content: center;
padding: 0.25rem 0 0.5rem; font-size: 0.8rem; color: var(--muted);
}
.uw-trend-legend-item { display: flex; align-items: center; gap: 0.3rem; }
.uw-trend-legend-item::before {
content: ''; display: inline-block; width: 10px; height: 10px;
border-radius: 2px;
}
.uw-trend-legend--buy::before { background: var(--good, #16a34a); }
.uw-trend-legend--sell::before { background: var(--bad, #dc2626); }
/* Centered under the chart (shared pill chrome defined with .uw-flow-expand).
width:fit-content keeps the pill shrink-wrapped while margin auto centers it. */
.uw-trend-toggle { display: flex; width: fit-content; margin: 0.85rem auto 0; }
.uw-trend-detail { margin-top: 0.75rem; }
/* Expand modal */
.uw-trend-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.uw-trend-modal[hidden] { display: none; }
.uw-trend-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.uw-trend-modal-card {
position: relative; z-index: 1; width: min(900px, 92vw);
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-lg, var(--shadow-sm));
padding: 1.25rem 1.5rem;
}
.uw-trend-modal-title { margin: 0 2rem 1rem 0; font-size: 1.05rem; }
.uw-trend-modal-close {
position: absolute; top: 0.6rem; right: 0.85rem;
appearance: none; background: none; border: none; cursor: pointer;
font-size: 1.6rem; line-height: 1; color: var(--muted);
}
.uw-trend-modal-close:hover { color: var(--fg); }
/* Market Tide sentiment strip atop the Dark Pool feed. */
.market-tide-strip {
display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
padding: 0.85rem 1.1rem; margin-bottom: 1rem;
}
.market-tide-label {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted);
}
.market-tide-verdict { font-size: 1.05rem; font-weight: 700; }
.market-tide-detail {
font-size: 0.85rem; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.position-pill {
display: inline-flex; align-items: center;
padding: 0.2rem 0.6rem; border-radius: 999px;
font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
border: 1px solid transparent;
}
.position-pill--long { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.position-pill--short { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.position-pill--mixed { background: var(--bg-soft); color: var(--muted); border-color: var(--line); }
.ticker-detail-calls h2 {
margin: 1.25rem 0 0.75rem; font-size: 1.15rem;
}
/* ── Call feed (Home) ──────────────────────────────────────────────────────── */
.call-feed {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.call-card {
background: var(--card-bg, #fff);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
border-left: 4px solid var(--line);
}
.call-card--win { border-left-color: var(--green, #16a34a); }
.call-card--loss { border-left-color: var(--red, #dc2626); }
.call-card--pending { border-left-color: var(--muted, #94a3b8); }
.call-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--line);
font-size: 0.8rem;
}
.call-card-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.dot-scored { background: var(--green, #16a34a); }
.dot-pending { background: var(--muted, #94a3b8); }
.call-card-label { font-weight: 600; color: var(--fg); }
.call-card-subtitle { color: var(--muted); margin-left: auto; }
.call-card-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
}
.call-card-body > * {
background: var(--card-bg, #fff);
padding: 1.25rem;
}
.call-card-post-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.call-card-profile-link {
display: flex; align-items: center; gap: 0.5rem;
flex: 1; min-width: 0;
color: inherit; text-decoration: none;
}
.call-card-profile-link:hover .call-card-handle { color: var(--accent); }
.call-card-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.call-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.call-card-author { display: flex; flex-direction: column; }
.call-card-handle { font-weight: 600; font-size: 0.9rem; }
.call-card-meta { font-size: 0.75rem; color: var(--muted); }
.call-card-view {
margin-left: auto;
font-size: 0.75rem; font-weight: 500;
color: var(--accent); text-decoration: none;
}
.call-card-view:hover { text-decoration: underline; }
.call-card-text {
font-size: 0.85rem; line-height: 1.5;
color: var(--fg);
margin: 0 0 0.5rem;
word-break: break-word;
}
.call-card-time { font-size: 0.72rem; color: var(--muted); }
.call-card-parsed { display: flex; flex-direction: column; gap: 0.75rem; }
.call-card-parsed-head {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--muted); font-weight: 600;
display: flex; align-items: center; gap: 0.4rem;
}
.call-card-parsed-head::before {
content: "⚡"; font-size: 0.8rem;
}
.call-card-asset, .call-card-stance, .call-card-hit-rate {
display: flex; align-items: baseline; gap: 0.5rem;
}
.call-card-asset-label, .call-card-stance-label, .call-card-hit-rate-label {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--muted); min-width: 50px;
}
.call-card-ticker {
font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
color: inherit; text-decoration: none;
}
.call-card-ticker:hover { text-decoration: underline; }
.sentiment-pill {
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.2rem 0.6rem; border-radius: 4px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
}
.sentiment-pill--bullish {
background: #dcfce7; color: #166534;
}
.sentiment-pill--bearish {
background: #fee2e2; color: #991b1b;
}
/* Generic stat pill — same shape as .sentiment-pill so secondary metrics
sit alongside the stance chip without visual whiplash. Tier modifier
tints by threshold so a low hit rate reads as a warning at a glance. */
.stat-pill {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.2rem 0.6rem; border-radius: 4px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stat-pill--good { background: var(--low-bg); color: var(--low-fg); }
.stat-pill--mid { background: var(--mid-bg); color: var(--mid-fg); }
.stat-pill--bad { background: var(--high-bg); color: var(--high-fg); }
.stat-pill--neutral {
background: var(--bg-soft); color: var(--fg-soft);
border: 1px solid var(--line);
}
.call-card-snippet {
font-size: 0.82rem; color: var(--fg); line-height: 1.45;
margin: 0;
}
.call-card-tag {
display: inline-block;
font-size: 0.7rem; color: var(--muted);
border: 1px solid var(--line); border-radius: 4px;
padding: 0.15rem 0.45rem;
}
.call-card-outcome {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--line);
background: var(--bg-subtle, #f8fafc);
}
.call-card-outcome-section {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem;
}
.call-card-outcome-label {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--muted); font-weight: 600;
}
.call-card-price { font-size: 1.1rem; font-weight: 600; font-family: var(--font-mono, monospace); }
.call-card-pct { font-size: 0.75rem; }
.call-card-outcome-arrow { font-size: 1.2rem; color: var(--muted); }
.call-card-result { margin-left: auto; text-align: right; }
.call-card-result-value {
font-size: 1.2rem; font-weight: 700; font-family: var(--font-mono, monospace);
padding: 0.3rem 0.7rem; border-radius: 6px;
}
.call-card-result-value.pct-pos { background: #dcfce7; color: #166534; }
.call-card-result-value.pct-neg { background: #fee2e2; color: #991b1b; }
.call-card-pending { color: var(--muted); font-style: italic; }
.call-feed-pagination {
display: flex; justify-content: center; padding: 1rem 0;
}
/* Call-feed table rows */
.call-row--win td:first-child { box-shadow: inset 3px 0 0 var(--green, #16a34a); }
.call-row--loss td:first-child { box-shadow: inset 3px 0 0 var(--red, #dc2626); }
.call-row--pending td:first-child { box-shadow: inset 3px 0 0 var(--muted, #94a3b8); }
.col-snippet { max-width: 260px; }
.call-row-tweet {
font-size: 0.8rem; line-height: 1.4;
color: var(--fg-soft); text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.call-row-tweet:hover { color: var(--accent); }
.call-price { font-family: var(--font-mono, monospace); font-size: 0.85rem; }
.col-when { white-space: nowrap; font-size: 0.8rem; color: var(--muted); }
/* Mobile: 4 quick tabs + More → left drawer with full sidebar nav. */
@media (max-width: 840px) {
.app-shell { grid-template-columns: 1fr; }
/* The drawer shows full labels on mobile; collapse toggle is desktop-only. */
.app-sidebar-toggle { display: none; }
/* On the blur (locked) paywall page the marketing footer just pushes the
paywall sheet down and adds clutter on a small screen — drop it on mobile. */
.app-shell--locked ~ .site-footer { display: none; }
.app-sidebar {
position: fixed; bottom: 0; left: 0; right: 0;
top: auto; height: auto;
z-index: 1000;
padding: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
border: none;
background: transparent;
box-shadow: none;
overflow: visible;
pointer-events: none;
}
.app-mobile-tabbar {
display: flex;
pointer-events: auto;
position: relative;
z-index: 1003;
flex-direction: row;
align-items: stretch;
width: 100%;
border-top: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
}
.app-mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding: 0.45rem 0 0.35rem;
border: none;
background: transparent;
color: var(--muted);
font-size: 0.65rem;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.app-mobile-tab svg {
width: 22px;
height: 22px;
flex-shrink: 0;
color: var(--muted);
}
/* Source-channel tabs use the shared source_icon macro (svg logos + a
StockTwits and the window may
be a scroll container. The card wrappers are `overflow: clip` (clips like
`hidden` but is NOT a scroll container), and the horizontal-scroll guards
(`.tracker-table-scroll`, `.picks-table-wrap`) are only needed on phones, so
we relax them to `visible` on desktop (these tables fit the panel at
>=841px).
The Most Bought matrix is the one exception (see the matrix block lower in
this file): it is genuinely wider than the panel and MUST keep a horizontal
scrollbar — which is necessarily a scroll container — so it becomes a
self-contained frozen-header grid instead of a page-scroll sticky header.
Scoped to desktop: on phones the top-bar wraps to a variable height and the
horizontal guards must stay live, so headers render static there. */
@media (min-width: 841px) {
.tracker-table-scroll,
.picks-table-wrap { overflow: visible; }
.app-content .leaderboard thead th,
.app-content .picks-table thead th,
.screener-wrap .leaderboard thead th {
position: sticky;
top: 56px; /* clears the 56px sticky .app-topbar */
z-index: 2; /* above body rows, below the topbar (z-index:9) */
}
/* `.picks-table` headers are transparent by default — give them the same
opaque fill as the leaderboard headers so rows never bleed through the
header when it sticks. */
.app-content .picks-table thead th { background: var(--bg-soft); }
}
/* The generic `@media (max-width:720px) .leaderboard th:nth-child(3)/(6)` rule
(~line 1128) is tuned for the PUBLIC leaderboard's fixed columns and would
desync the tracker tables' headers from their cells (it hides only specific
header/`.col-num` cells by position). Neutralize it for the tracker tables —
their column priority is owned by the `.tracker-col-*` classes below. Scoped
to `.tracker-table-scroll` so it outranks the generic rule by specificity. */
@media (max-width: 720px) {
.tracker-table-scroll .leaderboard .col-tickers,
.tracker-table-scroll .leaderboard th:nth-child(3),
.tracker-table-scroll .leaderboard th:nth-child(6),
.tracker-table-scroll .leaderboard .col-num:nth-child(6) { display: table-cell; }
}
/* Mobile column-priority: keep the core story on a 375px screen —
Ticker · Trade size · Return · Date (trades) and
Ticker · Est. value · Latest trade · Date (holdings) — and drop the
secondary price/weight columns. Cells stay in the DOM (display:none) so the
header→cell sort mapping is unaffected. */
@media (max-width: 540px) {
/* (0,4,0) — outranks the ≤720 neutralizer's nth-child re-show (0,3,1) above,
so the low-value columns hide cleanly on BOTH the th and td (the class sits
on both, keeping header↔cell alignment + sort mapping intact). */
.tracker-table-scroll .leaderboard.screener-table .tracker-col-entry,
.tracker-table-scroll .leaderboard.screener-table .tracker-col-current,
.tracker-table-scroll .leaderboard.screener-table .tracker-col-target,
.tracker-table-scroll .leaderboard.screener-table .tracker-col-price,
.tracker-table-scroll .leaderboard.screener-table .tracker-col-weight { display: none; }
/* The big metric values (+202%) overwhelm a single-column phone card.
Descendant selectors (0,2,0) outrank the top-level .metric-value/.metric
rules in cursor_light.css (0,1,0), which load after this sheet. */
.metric-grid .metric { padding: 1.1rem 1.15rem; }
.metric-grid .metric-value { font-size: 1.5rem; }
/* Keep charts from dominating the fold. */
.perf-chart { min-height: 220px; height: 240px; }
.tracker-donut-wrap { height: 220px; }
.tracker-volume .uw-trend-chart-wrap { height: 220px; }
/* Range buttons become full-width, 44px-tall touch targets. */
.tracker-range { width: 100%; justify-content: space-between; }
.tracker-range-btn { flex: 1; padding: 0.75rem 0.5rem; min-height: 44px; }
/* Sortable headers + rows get comfortable tap height. */
.tracker-table-scroll .screener-table th,
.tracker-table-scroll .screener-table td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
}
/* ── Sentiment matrix (Most Bought) ──────────────────────────────── */
.sentiment-matrix-head {
display: flex; flex-direction: column; gap: 0.7rem; margin: 0 0 1rem;
}
.sentiment-matrix-head .meta { margin: 0; }
/* Toolbar row: Filters menu pinned to the far right above the table. */
.matrix-toolbar {
display: flex; align-items: center; justify-content: flex-end;
flex-wrap: wrap; gap: 0.75rem;
}
/* Titled variant (single "Latest Picks" matrix): page title sits on the left,
Filters on the right — one clean header row directly above the table, instead
of a standalone heading with a lonely Filters button floating below it. */
.matrix-toolbar--titled { justify-content: space-between; }
.matrix-title {
margin: 0; gap: 0.55rem;
font-size: 1.5rem; font-weight: 700; line-height: 1.15;
letter-spacing: -0.01em; color: var(--fg);
}
.matrix-title-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
background: var(--accent-soft); color: var(--accent);
}
.matrix-title-ico svg { width: 18px; height: 18px; }
.period-chips {
display: inline-flex; align-items: center; gap: 0.4rem;
}
.matrix-legend {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.72rem; color: var(--muted); white-space: nowrap;
}
.matrix-legend .mx-bar { width: 40px; }
.legend-sep { width: 1px; height: 14px; background: var(--line); margin: 0 0.2rem; }
/* ── Filters menu (funnel button → popover) ──────────────────────── */
.filter-menu { position: relative; }
.filter-menu > summary { list-style: none; cursor: pointer; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.4rem 0.8rem; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface);
font-size: 0.8rem; font-weight: 600; color: var(--fg-soft);
transition: border-color 0.12s ease, color 0.12s ease;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn svg { width: 15px; height: 15px; }
.filter-btn.has-active { border-color: var(--accent); color: var(--accent); }
.filter-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--accent); color: #fff;
font-size: 0.66rem; font-weight: 700;
}
.filter-menu[open] > summary .filter-btn,
.filter-menu[open] .filter-btn { border-color: var(--accent); color: var(--accent); }
.filter-pop {
position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30;
min-width: 260px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.85rem;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.filter-pop-group { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-pop-label {
font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--muted-soft);
}
.filter-pop-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* The matrix has many source columns — size to content and scroll
horizontally rather than squishing every column to fit. */
.app-content .leaderboard-wrap.matrix-wrap { overflow-x: auto; }
.sentiment-matrix { width: max-content; min-width: 100%; }
/* The Latest Trades feed lives in the same .matrix-wrap (scrolls horizontally),
so size its columns to content + fill at minimum — like the matrix — instead
of stretching the last column to fill leftover width. */
.trades-feed { width: max-content; min-width: 100%; }
/* Most Bought matrix → frozen-header grid on desktop. It can't use the
page-scroll sticky header (it needs a horizontal scrollbar, which is also a
vertical scroll container), so instead the whole grid pins under the top-bar
and scrolls its rows INTERNALLY with the header frozen at the grid's own top.
Result: the source-column headers stay visible while you scroll the rows,
same as every other table. (Placed after the base rule above so it wins on
source order.) */
@media (min-width: 841px) {
.app-content .leaderboard-wrap.matrix-wrap {
position: sticky;
top: 56px; /* pin just under the .app-topbar */
overflow: auto; /* both axes: keeps horizontal scroll */
max-height: calc(100vh - 56px); /* fill the viewport below the top-bar */
}
.app-content .leaderboard-wrap.matrix-wrap thead th {
top: 0; /* freeze at the grid's own top, not the page top */
z-index: 3;
}
}
/* Mobile (Most Bought board): mirror the desktop frozen-header grid so the
"Latest Picks" toolbar + Filters AND the column titles stay pinned while the
rows scroll. Phones can't use a window-scroll sticky (the matrix needs a
horizontal scrollbar, which is necessarily a vertical scroll container too),
so the toolbar pins under the sticky top-bar and the matrix becomes its own
internal scroller with the header frozen at its top. Offsets are the live
element heights, fed in as CSS vars by the measurer in app/base.html. */
@media (max-width: 840px) {
.app-content .sentiment-matrix-head {
position: sticky;
top: calc(var(--ot-topbar-h, 50px) - 1px); /* sit flush under the top-bar */
z-index: 7; /* above rows; popover sits above this; BELOW .app-topbar (9) so the search dropdown wins */
background: var(--bg); /* opaque so rows don't bleed through */
margin: 0 -1rem; /* bleed to the panel edges */
padding: 0.7rem 1rem;
}
.app-content .leaderboard-wrap.matrix-wrap {
position: sticky;
top: calc(var(--ot-topbar-h, 50px) + var(--ot-mhead-h, 56px) - 1px);
overflow: auto; /* both axes: keeps horizontal swipe */
max-height: calc(100vh - var(--ot-topbar-h, 50px) - var(--ot-mhead-h, 56px) - var(--ot-tabbar-mh, 56px));
max-height: calc(100dvh - var(--ot-topbar-h, 50px) - var(--ot-mhead-h, 56px) - var(--ot-tabbar-mh, 56px));
-webkit-overflow-scrolling: touch;
}
.app-content .leaderboard-wrap.matrix-wrap thead th {
position: sticky;
top: 0; /* freeze at the grid's own top */
z-index: 3;
}
}
.sentiment-matrix th.heat-col {
text-align: center; width: 110px; min-width: 110px;
white-space: nowrap; vertical-align: middle;
padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.sentiment-matrix th.chg-col {
text-align: center; width: 72px; min-width: 72px;
white-space: nowrap; vertical-align: middle;
padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.sentiment-matrix td.chg-cell { text-align: right; white-space: nowrap; }
.src-word--chg { font-size: 0.7rem; color: var(--fg-soft); letter-spacing: 0.02em; }
.sentiment-matrix td.heat-cell {
text-align: center; vertical-align: middle; padding: 0.55rem 0.7rem;
}
/* Consistent square app-icon tile for every source logo. */
.src-tile {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
background: var(--bg-soft); border: 1px solid var(--line);
overflow: hidden; flex-shrink: 0; transition: box-shadow 0.12s ease;
}
.src-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--fg-soft); }
.src-tile img.src-icon { width: 100%; height: 100%; }
.src-logo--img { object-fit: contain; }
.src-logo--avatar { object-fit: cover; }
.src-tile--x { background: #000; }
.src-logo--x { color: #fff; }
.src-tile--reddit { background: #ff4500; }
.src-logo--reddit { color: #fff; }
/* Header: logo tile (brand) or text word (non-brand) + a sort caret. */
.heat-col-inner { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.3rem; }
.src-word {
display: inline-flex; align-items: center; justify-content: center;
min-height: 30px; max-width: 92px; font-size: 0.66rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-soft);
line-height: 1.15; text-align: center;
}
.sort-caret { width: 12px; height: 13px; opacity: 0.45; vertical-align: middle; }
.col-sortable:hover .sort-caret,
.sort-caret.on { opacity: 1; }
/* Active sort direction: highlight the relevant caret half */
.sort-caret.on.sort-caret--asc polyline:first-child { stroke: var(--fg); stroke-width: 3; }
.sort-caret.on.sort-caret--asc polyline:last-child { opacity: 0.25; }
.sort-caret.on.sort-caret--desc polyline:last-child { stroke: var(--fg); stroke-width: 3; }
.sort-caret.on.sort-caret--desc polyline:first-child { opacity: 0.25; }
/* Single % Chg column. */
/* Live-board flash: brief green/red highlight when a value ticks. */
@keyframes mxFlashUp {
0% { background-color: color-mix(in srgb, var(--good) 28%, transparent); }
100% { background-color: transparent; }
}
@keyframes mxFlashDown {
0% { background-color: color-mix(in srgb, var(--bad) 28%, transparent); }
100% { background-color: transparent; }
}
.mx-flash-up { animation: mxFlashUp 0.9s ease; border-radius: 4px; }
.mx-flash-down { animation: mxFlashDown 0.9s ease; border-radius: 4px; }
/* On-brand hover tooltip for the sentiment-matrix bars. */
.mx-tooltip {
position: fixed; top: 0; left: 0; z-index: 200;
background: var(--surface); color: var(--fg);
border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
padding: 0.5rem 0.65rem; max-width: 240px;
font-size: 0.78rem; line-height: 1.35;
pointer-events: none; opacity: 0; transform: translateY(3px);
transition: opacity 0.12s ease, transform 0.12s ease;
}
.mx-tooltip.on { opacity: 1; transform: translateY(0); }
.mx-tooltip.below.on { transform: translateY(0); }
.mx-tt-src { display: block; font-weight: 700; margin-bottom: 2px; }
.mx-tt-row { display: flex; align-items: center; gap: 0.4rem; color: var(--fg-soft); white-space: nowrap; }
.mx-tt-row strong { color: var(--fg); font-weight: 700; }
.mx-tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mx-tt-dot.is-long { background: var(--good); }
.mx-tt-dot.is-short { background: var(--bad); }
/* Single-source view: source logo beside the page heading. */
.page-head-title { display: inline-flex; align-items: center; gap: 0.55rem; }
.page-head-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.page-head-logo .src-icon { width: 26px; height: 26px; }
/* Single-source view: bullish / bearish mention counts. */
.src-count-col { min-width: 96px; text-align: right; white-space: nowrap; }
.sentiment-matrix td.src-count-col { text-align: right; }
.src-count { font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; }
.src-count--bull { color: var(--good); }
.src-count--bear { color: var(--bad); }
/* Stocks glyph leading the Mentions group header. */
.src-win-head { display: inline-flex; align-items: center; gap: 0.3rem; justify-content: flex-end; white-space: nowrap; }
.src-count-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--fg-soft); }
/* The chatter matrix carries five narrow windowed columns — tighten them so
the wider table stays readable (the .matrix-wrap scrolls if needed). */
.src-matrix .src-count-col { min-width: 64px; }
.mx-chg-col { min-width: 84px; white-space: nowrap; }
.mx-winrate-col { min-width: 78px; text-align: right; white-space: nowrap; }
.mx-ytd-col { min-width: 92px; text-align: right; white-space: nowrap; }
.mx-winrate { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; }
.mx-ytd { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; }
/* "Picker" column — one placeholder owning handle per ticker. */
.col-picker { min-width: 150px; }
.mx-picker {
display: inline-flex; align-items: center; gap: 0.5rem;
color: var(--fg); text-decoration: none; max-width: 168px;
}
.mx-picker:hover { text-decoration: none; }
.mx-picker:hover .mx-picker-handle { color: var(--accent); }
.mx-picker-avatar {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
font-size: 26px; overflow: hidden;
}
.mx-picker-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* ── Liquid-glass placeholder avatars ──────────────────────────────────────
`.lg-avatar` (a marked `.avatar-wrap`) renders its placeholder state as a
frosted white/black glass disc. The `.lg-av-visual` layer paints a
white→black gradient + soft highlight blobs, and — once OTGlass has installed
the shared SVG displacement filter (`html.lg-glass-ready`) — that layer is
REFRACTED by `#ot-avatar-glass`, the vendored engine's displacement map
reused as one global, static, size-independent filter (no per-element engine,
so it survives the matrix's row cloning + htmx swaps with zero JS lifecycle).
The data-letter initial floats crisp on top; a loaded profile