/* =========================================================================
JUPPITR10 — Operations Terminal
v3 · Editorial fintech · Tiempos/Söhne analog with Fraunces + Inter Tight
Light + dark themes via [data-theme] attribute on
FONT IMPORTS — add to of the page template:
To swap to real Tiempos + Söhne later, change only the three font-family
variables below and load your licensed faces.
========================================================================= */
:root {
/* Type — Fraunces (Tiempos analog) for editorial, Inter Tight (Söhne analog) for UI */
--serif: 'Fraunces', 'Tiempos Headline', Georgia, serif;
--sans: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'JetBrains Mono', 'GT America Mono', ui-monospace, Menlo, monospace;
}
/* ── LIGHT THEME (default) ─────────────────────────────────────────── */
:root, [data-theme="light"] {
--bg-page: #f7f6f3; /* warm off-white, FT-paper */
--bg-card: #fffefb; /* paper */
--bg-soft: #f1efea;
--bg-deep: #e8e5dd;
--bg-inset: #faf9f5;
--bg-marquee:#0c0a09; /* the marquee block (chart) inverts to dark even in light mode */
--bg-marquee-text: #f7f6f3;
--ink-strong: #0a0908;
--ink: #1c1917;
--ink-soft: #44403c;
--ink-muted: #78716c;
--ink-faint: #a8a29e;
--ink-ghost: #d6d3d1;
--rule: #d6d3d1;
--rule-soft: #e7e5e1;
--rule-faint: #ede9e3;
--brand: #d40400;
--pos: #1f6e3a;
--pos-soft: #2e8b50;
--pos-bg: rgba(31, 110, 58, 0.07);
--neg: #a8231a;
--neg-soft: #c0392b;
--neg-bg: rgba(168, 35, 26, 0.06);
--warn: #8a5a00;
--warn-bg: rgba(138, 90, 0, 0.07);
--chart-line: #0a0908;
--chart-bench:#a8a29e;
--chart-band: rgba(168, 35, 26, 0.10);
--s-industrials: #6b5d54;
--s-materials: #7c5f50;
--s-energy: #8a5a00;
--s-defense: #3d556e;
--s-healthcare: #4d6b3f;
--s-tech: #2c5560;
--s-cash: #c8c4ba;
}
/* ── DARK THEME ────────────────────────────────────────────────────── */
[data-theme="dark"] {
--bg-page: #0a0908;
--bg-card: #121110;
--bg-soft: #1a1816;
--bg-deep: #24211e;
--bg-inset: #161413;
--bg-marquee:#000000;
--bg-marquee-text: #f5f4f1;
--ink-strong: #f5f4f1;
--ink: #e7e4dd;
--ink-soft: #b8b3a8;
--ink-muted: #8a847a;
--ink-faint: #5e584f;
--ink-ghost: #3a3631;
--rule: #2a2724;
--rule-soft: #1f1d1a;
--rule-faint: #181614;
--brand: #ff3d33;
--pos: #4ade80;
--pos-soft: #22c55e;
--pos-bg: rgba(74, 222, 128, 0.10);
--neg: #f87171;
--neg-soft: #ef4444;
--neg-bg: rgba(248, 113, 113, 0.10);
--warn: #fbbf24;
--warn-bg: rgba(251, 191, 36, 0.10);
--chart-line: #f5f4f1;
--chart-bench:#5e584f;
--chart-band: rgba(248, 113, 113, 0.12);
--s-industrials: #a89485;
--s-materials: #b08770;
--s-energy: #c89540;
--s-defense: #6b8aaa;
--s-healthcare: #7d9c66;
--s-tech: #4f8896;
--s-cash: #4a4640;
}
/* ── BASE ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--sans);
background: var(--bg-page);
color: var(--ink);
font-size: 12.5px;
line-height: 1.5;
font-feature-settings: "kern" 1, "ss01" 1, "cv11" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 200ms, color 200ms;
}
.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
/* ── MARQUEE (top scrolling ticker bar) ─────────────────────────────── */
.marquee {
background: var(--bg-marquee);
color: var(--bg-marquee-text);
border-bottom: 1px solid var(--rule);
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.02em;
overflow: hidden;
white-space: nowrap;
padding: 6px 0;
}
.marquee__track {
display: inline-flex; gap: 28px;
animation: marquee-scroll 60s linear infinite;
padding-left: 32px;
}
.marquee__item { display: inline-flex; align-items: center; gap: 6px; }
.marquee__ticker { font-weight: 700; color: var(--bg-marquee-text); }
.marquee__price { color: rgba(245,244,241,0.7); }
.marquee__delta { font-size: 10px; }
.marquee__delta.pos { color: #4ade80; }
.marquee__delta.neg { color: #f87171; }
.marquee__sep { color: rgba(245,244,241,0.25); }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── TOP BAR ───────────────────────────────────────────────────────── */
.topbar {
background: var(--bg-card);
border-bottom: 1px solid var(--rule);
}
.topbar__inner {
max-width: 1320px; margin: 0 auto;
padding: 18px 32px 16px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand__name {
font-family: var(--sans);
font-weight: 700; font-size: 22px;
letter-spacing: -0.045em;
color: var(--ink-strong);
line-height: 1;
}
.brand__name--ten { color: var(--brand); }
.brand__divider { width: 1px; height: 28px; background: var(--rule); }
.brand__sub { display: flex; flex-direction: column; gap: 2px; }
.brand__sub-name {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: -0.005em;
line-height: 1;
}
.brand__sub-tag {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--ink-muted);
}
.topbar__center {
display: flex; align-items: center; justify-content: center; gap: 28px;
}
.topbar__stat { display: flex; flex-direction: column; gap: 2px; }
.topbar__stat-label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
}
.topbar__stat-val {
font-family: var(--mono);
font-size: 12.5px; font-weight: 600;
color: var(--ink-strong);
}
.topbar__right { display: flex; align-items: center; gap: 16px; }
.theme-toggle {
background: transparent;
border: 1px solid var(--rule);
border-radius: 4px;
padding: 5px 8px;
cursor: pointer;
display: flex; align-items: center; gap: 6px;
font: inherit;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.10em;
color: var(--ink-muted);
transition: all 100ms;
}
.theme-toggle:hover { color: var(--ink-strong); border-color: var(--ink-soft); }
.theme-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-strong); }
.snapshot { text-align: right; }
.snapshot__label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
}
.snapshot__date {
font-family: var(--mono);
font-size: 13px; font-weight: 600;
color: var(--ink-strong);
margin-top: 2px;
}
.snapshot__detail { font-size: 11px; color: var(--ink-muted); }
/* ── NAV ───────────────────────────────────────────────────────────── */
.nav {
background: var(--bg-card);
border-bottom: 1px solid var(--rule);
position: sticky; top: 0; z-index: 10;
}
.nav__inner {
max-width: 1320px; margin: 0 auto;
padding: 0 32px;
display: flex; align-items: center; gap: 0;
}
.nav__spacer { flex: 1; }
.nav__link {
padding: 13px 18px 12px;
font-size: 12px; font-weight: 500;
color: var(--ink-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 100ms;
cursor: pointer;
letter-spacing: -0.005em;
}
.nav__link:first-child { padding-left: 0; }
.nav__link:hover { color: var(--ink-strong); }
.nav__link.is-active {
color: var(--ink-strong);
border-bottom-color: var(--ink-strong);
font-weight: 600;
}
.nav__admin {
display: inline-flex; align-items: center;
padding: 3px 8px;
font-size: 9px; font-weight: 700;
background: var(--ink-strong); color: var(--bg-card);
border-radius: 3px;
letter-spacing: 0.10em;
margin-right: 14px;
}
.nav__signout {
font-size: 11px; color: var(--ink-muted);
cursor: pointer; padding: 4px 0;
}
.nav__signout:hover { color: var(--ink-strong); }
/* ── PAGE CONTAINER ────────────────────────────────────────────────── */
.page {
max-width: 1320px; margin: 0 auto;
padding: 14px 32px 48px;
}
/* ── MOMENT (the dashboard hero — chart + metrics block) ──────────── */
.moment {
background: var(--bg-marquee);
color: var(--bg-marquee-text);
border-radius: 4px;
padding: 18px 24px 16px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: stretch;
}
.moment__left {
display: flex; flex-direction: column;
gap: 16px;
padding-right: 24px;
border-right: 1px solid rgba(245,244,241,0.10);
}
.moment__kicker {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em;
color: rgba(245,244,241,0.5);
margin-bottom: 6px;
}
.moment__title {
font-family: var(--serif);
font-weight: 500;
font-size: 20px;
letter-spacing: -0.022em;
color: var(--bg-marquee-text);
line-height: 1.2;
margin: 0;
}
.moment__title em {
font-style: italic; font-weight: 400;
color: rgba(245,244,241,0.85);
}
.moment__metrics {
display: flex; flex-direction: column;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(245,244,241,0.10);
}
.moment__metric {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
}
.moment__metric-label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(245,244,241,0.55);
white-space: nowrap;
}
.moment__metric-val {
font-family: var(--serif);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.025em;
color: var(--bg-marquee-text);
line-height: 1;
}
.moment__metric-val.pos { color: #6ee597; }
.moment__metric-val.neg { color: #ff8a8a; }
.moment__metric-sub {
font-family: var(--mono);
font-size: 10px; color: rgba(245,244,241,0.45);
margin-left: 6px;
}
.moment__right { display: flex; flex-direction: column; min-width: 0; }
.moment__chart { position: relative; height: 200px; margin: 0; flex: 1; }
.moment__chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.moment__legend {
display: flex;
gap: 24px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(245,244,241,0.10);
font-family: var(--mono);
font-size: 10.5px;
color: rgba(245,244,241,0.6);
}
.moment__legend-item { display: flex; align-items: center; gap: 7px; }
.moment__legend-line { width: 18px; height: 2px; }
.moment__legend-line--bench {
border-top: 1.5px dashed rgba(245,244,241,0.4);
height: 0;
}
.moment__legend-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--bg-marquee-text);
}
/* ── KPI BAR (status strip below moment) ──────────────────────────── */
.kpi-bar {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
margin-bottom: 14px;
}
.kpi {
padding: 10px 14px 12px;
border-right: 1px solid var(--rule-soft);
}
.kpi:last-child { border-right: 0; }
.kpi__label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
}
.kpi__value {
font-family: var(--serif);
font-size: 18px; font-weight: 500;
color: var(--ink-strong);
margin-top: 5px;
letter-spacing: -0.02em;
line-height: 1.1;
}
.kpi__value--mono {
font-family: var(--mono);
font-size: 14px; font-weight: 500;
letter-spacing: 0;
}
.kpi__sub {
font-family: var(--mono);
font-size: 10px; color: var(--ink-muted);
margin-top: 2px;
}
/* ── SECTION HEAD (rule-bordered titles between major blocks) ────── */
.section-head {
display: flex; align-items: baseline; justify-content: space-between;
margin: 14px 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--rule);
}
.section-head h2 {
font-family: var(--sans);
font-size: 11px; font-weight: 600;
margin: 0;
color: var(--ink-strong);
text-transform: uppercase;
letter-spacing: 0.14em;
}
.section-head__rule {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 13px;
color: var(--ink-muted);
letter-spacing: -0.005em;
}
/* ── CORE / SLEEVE CARDS ──────────────────────────────────────────── */
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 14px 18px 14px;
position: relative;
}
.cs__head {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 10px;
}
.cs__type {
font-family: var(--mono);
font-size: 10px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-muted);
}
.cs__name {
font-family: var(--serif);
font-size: 22px; font-weight: 500;
color: var(--ink-strong);
letter-spacing: -0.022em;
margin-top: 2px;
line-height: 1.1;
}
.cs__return {
font-family: var(--serif);
font-size: 26px; font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
}
.cs__return.pos { color: var(--pos); }
.cs__return.neg { color: var(--neg); }
.cs__sectors {
font-size: 12px; color: var(--ink-soft);
line-height: 1.5;
font-style: italic;
font-family: var(--serif);
font-weight: 400;
}
.cs__meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--rule-soft);
}
.cs__meta-cell {
border-right: 1px solid var(--rule-soft);
padding-right: 12px;
}
.cs__meta-cell:last-child { border-right: 0; padding-right: 0; }
.cs__meta-label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
}
.cs__meta-val {
font-family: var(--mono);
font-size: 13px; font-weight: 600;
color: var(--ink-strong);
margin-top: 3px;
}
.cs__bar-row {
display: flex; gap: 1px;
margin-top: 14px;
height: 5px;
}
.cs__bar-seg { height: 100%; border-radius: 1px; }
/* ── MILESTONES ───────────────────────────────────────────────────── */
.mile-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
.mile {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 14px 18px 14px;
display: flex;
flex-direction: column;
}
/* Push the visualization (cells or progress bar) to the bottom so labels and
values align horizontally across all three milestone cards. */
.mile__cells, .mile .progress-bar { margin-top: auto; }
.mile__top {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 14px;
}
.mile__label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
}
.mile__progress-text {
font-family: var(--mono);
font-size: 10px; font-weight: 600;
color: var(--ink-faint);
}
.mile__value-row { display: flex; align-items: baseline; gap: 8px; }
.mile__value {
font-family: var(--serif);
font-size: 36px; font-weight: 500;
color: var(--ink-strong);
letter-spacing: -0.03em;
line-height: 0.95;
}
.mile__target {
font-family: var(--mono);
font-size: 13px; color: var(--ink-faint);
font-weight: 500;
}
.mile__sub {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-muted);
margin-top: 4px;
}
.mile__cells {
display: grid; gap: 2px;
margin-top: 16px;
}
.mile__cells--6 { grid-template-columns: repeat(6, 1fr); }
.mile__cells--18 { grid-template-columns: repeat(18, 1fr); }
.cell {
height: 22px;
border: 1px solid var(--rule);
border-radius: 2px;
display: flex; align-items: center; justify-content: center;
position: relative;
background: var(--bg-card);
}
.cell--won { background: var(--pos); border-color: var(--pos); }
.cell--won::before {
content: '';
width: 5px; height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(-45deg) translateY(-1px);
}
.cell--lost { background: var(--neg); border-color: var(--neg); }
.cell--lost::before, .cell--lost::after {
content: '';
position: absolute;
width: 6px; height: 1.5px;
background: #fff;
}
.cell--lost::before { transform: rotate(45deg); }
.cell--lost::after { transform: rotate(-45deg); }
.cell--pending {
background: transparent;
border-style: dashed;
border-color: var(--rule);
}
.mile__cell-labels {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2px;
margin-top: 4px;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-faint);
}
.mile__cell-labels span { text-align: center; }
.mile__cell-labels--18 { grid-template-columns: repeat(6, 1fr); }
.mile__cell-labels--18 span:nth-child(n+5) { display: none; }
/* Progress bar (for cumulative outperformance metric) */
.progress-bar {
height: 22px;
background: var(--bg-soft);
border: 1px solid var(--rule);
border-radius: 2px;
overflow: hidden;
position: relative;
margin-top: 16px;
}
.progress-bar__fill {
height: 100%;
background: var(--ink-strong);
position: relative;
}
.progress-scale {
display: flex; justify-content: space-between;
margin-top: 4px;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-faint);
}
/* ── ALLOCATION ───────────────────────────────────────────────────── */
.alloc-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.alloc {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 20px 24px;
}
.alloc__head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 18px;
}
.alloc__title {
font-family: var(--sans);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-strong);
}
.alloc__sub {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-muted);
}
/* Sector bar (horizontal stacked) */
.sector-bar {
height: 40px;
display: flex;
border-radius: 2px;
overflow: hidden;
border: 1px solid var(--rule);
}
.sector-bar__seg {
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: 10px; font-weight: 600;
color: rgba(255,255,255,0.95);
position: relative;
border-right: 1px solid rgba(255,255,255,0.15);
}
.sector-bar__seg:last-child { border-right: 0; }
/* Sector detail strip beneath the bar */
.sector-detail {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
margin-top: 14px;
border-top: 1px solid var(--rule-soft);
}
.sector-cell {
padding: 12px 12px 0;
border-right: 1px solid var(--rule-soft);
}
.sector-cell:last-child { border-right: 0; }
.sector-cell__swatch { width: 100%; height: 2px; margin-bottom: 8px; }
.sector-cell__name {
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-muted);
}
.sector-cell__pct {
font-family: var(--serif);
font-size: 18px; font-weight: 500;
color: var(--ink-strong);
margin-top: 4px;
letter-spacing: -0.02em;
line-height: 1;
}
.sector-cell__amt {
font-family: var(--mono);
font-size: 10px; color: var(--ink-muted);
margin-top: 3px;
}
.sector-cell__band {
height: 3px;
background: var(--bg-soft);
border-radius: 1px;
margin-top: 10px;
position: relative;
overflow: hidden;
}
.sector-cell__band-target {
position: absolute;
top: 0; bottom: 0;
background: var(--ink-faint);
opacity: 0.3;
}
.sector-cell__band-actual {
position: absolute;
top: 0; bottom: 0;
width: 1.5px;
background: var(--ink-strong);
}
/* Cash composition card */
.cash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: 8px;
}
.cash-cell {
padding-right: 16px;
border-right: 1px solid var(--rule-soft);
}
.cash-cell:last-child { border-right: 0; padding-right: 0; padding-left: 16px; }
.cash-cell__label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
}
.cash-cell__val {
font-family: var(--serif);
font-size: 26px; font-weight: 500;
color: var(--ink-strong);
margin-top: 6px;
letter-spacing: -0.025em;
line-height: 1;
}
.cash-cell__sub {
font-family: var(--mono);
font-size: 10px; color: var(--ink-muted);
margin-top: 4px;
}
.cash-bar {
margin-top: 18px;
height: 6px;
background: var(--bg-soft);
border-radius: 1px;
overflow: hidden;
display: flex;
}
.cash-bar__deployed { background: var(--ink-strong); }
.cash-bar__cash { background: var(--ink-ghost); }
.cash-note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--rule-soft);
font-family: var(--serif);
font-style: italic;
font-size: 12px;
line-height: 1.55;
color: var(--ink-soft);
}
/* ── TOP MOVERS GRID ──────────────────────────────────────────────── */
.movers {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
}
.movers__head {
padding: 14px 22px;
border-bottom: 1px solid var(--rule-soft);
display: flex; justify-content: space-between; align-items: center;
}
.movers__title {
font-family: var(--sans);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-strong);
}
.movers__tabs { display: flex; gap: 0; font-size: 11px; }
.movers__tab {
padding: 4px 12px;
cursor: pointer;
color: var(--ink-muted);
font-weight: 500;
border-right: 1px solid var(--rule-soft);
}
.movers__tab:last-child { border-right: 0; }
.movers__tab.is-active { color: var(--ink-strong); font-weight: 600; }
.movers__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.mover {
padding: 16px 18px 14px;
border-right: 1px solid var(--rule-soft);
border-top: 1px solid var(--rule-soft);
position: relative;
}
.mover:nth-child(5n) { border-right: 0; }
.mover:nth-child(-n+5) { border-top: 0; }
.mover__row1 {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 4px;
}
.mover__ticker {
font-family: var(--mono);
font-weight: 700;
font-size: 13px;
color: var(--ink-strong);
letter-spacing: -0.005em;
}
.mover__gain { font-family: var(--mono); font-weight: 600; font-size: 12px; }
.mover__gain.pos { color: var(--pos); }
.mover__gain.neg { color: var(--neg); }
.mover__name {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 11px;
color: var(--ink-muted);
margin-bottom: 8px;
letter-spacing: -0.005em;
}
.mover__spark { height: 28px; margin: 6px 0 4px; }
.mover__spark svg { width: 100%; height: 100%; }
.mover__foot {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--mono);
font-size: 9px; color: var(--ink-muted);
margin-top: 4px;
}
/* ── INTRO BLOCK (xSPI Board page header) ─────────────────────────── */
.intro {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 32px 36px;
margin-bottom: 20px;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 40px;
align-items: end;
}
.intro__kicker {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--ink-muted);
margin-bottom: 10px;
}
.intro h1 {
font-family: var(--serif);
font-size: 38px; font-weight: 500;
letter-spacing: -0.030em;
margin: 0 0 14px;
color: var(--ink-strong);
line-height: 1.05;
}
.intro h1 em { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.intro p {
margin: 0;
font-family: var(--serif);
font-size: 14px;
font-weight: 400;
color: var(--ink-soft);
line-height: 1.6;
max-width: 540px;
}
.intro__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
border-left: 1px solid var(--rule);
padding-left: 28px;
}
.intro__stat-label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
}
.intro__stat-val {
font-family: var(--serif);
font-size: 20px; font-weight: 500;
color: var(--ink-strong);
margin-top: 3px;
letter-spacing: -0.02em;
line-height: 1.05;
}
.intro__stat-sub {
font-family: var(--mono);
font-size: 10px; color: var(--ink-muted);
margin-top: 2px;
}
/* ── TOOL CARDS (xSPI scoring forms) ──────────────────────────────── */
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.tool {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 22px 26px;
}
.tool__head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rule-soft);
}
.tool__title {
font-family: var(--serif);
font-size: 18px; font-weight: 500;
color: var(--ink-strong);
letter-spacing: -0.018em;
}
.tool__meta { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.field-row--single { grid-template-columns: 1fr; }
.label {
display: block;
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
margin-bottom: 5px;
}
.input {
width: 100%;
padding: 9px 12px;
font: inherit; font-size: 13px;
border: 1px solid var(--rule);
background: var(--bg-card);
border-radius: 3px;
color: var(--ink-strong);
font-family: var(--mono);
font-weight: 500;
transition: border-color 100ms;
}
.input:focus { outline: none; border-color: var(--ink-strong); }
.input::placeholder { color: var(--ink-faint); font-family: var(--mono); }
.tool__action-row {
display: flex; gap: 12px; align-items: center;
margin-top: 4px;
}
.tool__check {
flex: 1;
font-size: 12px; color: var(--ink-soft);
display: flex; align-items: center; gap: 7px;
font-family: var(--serif);
font-style: italic;
}
.tool__check input { margin: 0; accent-color: var(--ink-strong); }
/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn {
padding: 9px 18px;
font: inherit; font-size: 11px; font-weight: 600;
border: 1px solid var(--brand);
background: var(--brand);
color: #fff;
border-radius: 3px;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
transition: opacity 100ms;
}
.btn:hover { opacity: 0.88; }
.btn--small {
padding: 4px 10px;
font-size: 10px;
background: transparent;
color: var(--ink-strong);
border-color: var(--rule);
}
.btn--small:hover { background: var(--bg-soft); }
.btn--full { width: 100%; }
.btn--ghost {
background: transparent;
color: var(--ink-strong);
border-color: var(--rule);
}
.btn--ghost:hover { background: var(--bg-soft); }
/* ── HOLDINGS TABLE CARD ──────────────────────────────────────────── */
.table-card {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
}
.table-card__head {
padding: 16px 24px 14px;
border-bottom: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: center;
}
.table-card__title-block {
display: flex; align-items: baseline; gap: 14px;
}
.table-card__title {
font-family: var(--serif);
font-size: 18px; font-weight: 500;
letter-spacing: -0.018em;
color: var(--ink-strong);
}
.table-card__count {
font-family: var(--mono);
font-size: 10px; color: var(--ink-muted);
}
.table-card__filters {
display: flex; gap: 1px;
background: var(--rule-soft);
border-radius: 3px;
padding: 2px;
}
.table-card__filter {
padding: 4px 11px;
font-size: 11px; font-weight: 500;
color: var(--ink-muted);
cursor: pointer;
border-radius: 2px;
}
.table-card__filter.is-active {
background: var(--bg-card);
color: var(--ink-strong);
font-weight: 600;
}
/* ── TABLE ────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
text-align: left;
padding: 9px 12px;
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
background: var(--bg-inset);
border-bottom: 1px solid var(--rule);
white-space: nowrap;
}
.table td {
padding: 11px 12px;
border-bottom: 1px solid var(--rule-soft);
vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-inset); }
.table th:first-child, .table td:first-child { padding-left: 24px; }
.table th:last-child, .table td:last-child { padding-right: 24px; }
.t-ticker {
font-family: var(--mono);
font-weight: 700;
color: var(--ink-strong);
font-size: 12.5px;
letter-spacing: -0.005em;
}
.t-name {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 12.5px;
color: var(--ink);
}
.t-sector { color: var(--ink-muted); font-size: 11px; }
.t-num { font-family: var(--mono); text-align: right; font-weight: 500; }
.t-num.pos { color: var(--pos); }
.t-num.neg { color: var(--neg); }
.t-date { font-family: var(--mono); color: var(--ink-muted); font-size: 11px; }
/* ── XSPI SCORE PILL ──────────────────────────────────────────────── */
.score {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono);
font-weight: 700;
justify-content: flex-end;
padding: 3px 8px 3px 6px;
border-radius: 3px;
border: 1px solid transparent;
}
.score__val {
font-size: 13px;
letter-spacing: -0.01em;
min-width: 32px;
text-align: right;
}
.score--top {
background: var(--pos-bg);
border-color: rgba(31, 110, 58, 0.25);
}
.score--top .score__val { color: var(--pos); }
.score--pass .score__val { color: var(--ink-strong); }
.score--watch {
background: var(--neg-bg);
border-color: rgba(168, 35, 26, 0.25);
}
.score--watch .score__val { color: var(--neg); }
.score--fail {
background: var(--neg-bg);
border-color: rgba(168, 35, 26, 0.4);
}
.score--fail .score__val { color: var(--neg); }
.score__bar {
width: 44px; height: 4px;
background: var(--bg-deep);
border-radius: 1px;
position: relative;
overflow: hidden;
}
.score__bar-fill { position: absolute; top: 0; left: 0; height: 100%; }
.score--top .score__bar-fill { background: var(--pos); }
.score--pass .score__bar-fill { background: var(--ink-strong); }
.score--watch .score__bar-fill { background: var(--neg); }
.score--fail .score__bar-fill { background: var(--neg); }
.score__bar-floor {
position: absolute; top: 0; bottom: 0;
left: 75%;
width: 1px;
background: var(--neg-soft);
opacity: 0.5;
}
/* ── PILLS ────────────────────────────────────────────────────────── */
.sleeve-pill {
display: inline-flex; padding: 2px 7px;
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.10em;
border-radius: 2px;
font-family: var(--sans);
}
.sleeve-pill--core { background: var(--pos-bg); color: var(--pos); }
.sleeve-pill--sleeve { background: var(--bg-deep); color: var(--ink-soft); }
.tier-pill {
display: inline-flex;
padding: 1px 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
border-radius: 2px;
letter-spacing: 0.04em;
}
.tier-pill--locked { background: var(--pos-bg); color: var(--pos); }
.tier-pill--watch { background: var(--neg-bg); color: var(--neg); }
.state-pill {
display: inline-flex; padding: 4px 10px;
font-family: var(--mono);
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.10em;
border-radius: 2px;
}
.state-pill--active { background: var(--pos-bg); color: var(--pos); }
.state-pill--pending { background: var(--bg-deep); color: var(--ink-soft); }
/* ── ABOUT PAGE ───────────────────────────────────────────────────── */
.about-hero {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 32px 36px 28px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.about-hero__inner { max-width: 760px; position: relative; z-index: 2; }
.about-hero__kicker {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--ink-muted);
margin-bottom: 10px;
}
.about-hero h1 {
font-family: var(--serif);
font-size: 36px; font-weight: 500;
letter-spacing: -0.030em;
margin: 0 0 12px;
color: var(--ink-strong);
line-height: 1.05;
}
.about-hero h1 em { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.about-hero__lede {
font-family: var(--serif);
font-size: 14.5px;
font-weight: 400;
color: var(--ink-soft);
line-height: 1.55;
margin: 0;
max-width: 600px;
}
.about-hero__meta {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--rule);
}
.about-hero__cell { padding-right: 18px; border-right: 1px solid var(--rule-soft); }
.about-hero__cell:last-child { border-right: 0; }
.about-hero__cell-label {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
}
.about-hero__cell-val {
font-family: var(--serif);
font-size: 18px; font-weight: 500;
color: var(--ink-strong);
letter-spacing: -0.02em;
margin-top: 4px;
line-height: 1.05;
}
.about-hero__cell-val--mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.about-hero__cell-sub {
font-family: var(--mono);
font-size: 10px; color: var(--ink-muted);
margin-top: 3px;
}
/* About sections */
.about-section {
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 24px 32px 22px;
margin-bottom: 12px;
}
.about-section__head {
display: grid;
grid-template-columns: 140px 1fr;
gap: 24px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--rule-soft);
}
.about-section__num {
font-family: var(--mono);
font-size: 11px; font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0.14em;
}
.about-section h2 {
font-family: var(--serif);
font-size: 22px; font-weight: 500;
letter-spacing: -0.025em;
margin: 0 0 4px;
color: var(--ink-strong);
line-height: 1.1;
}
.about-section h2 em { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.about-section__sub {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-muted);
margin: 0;
line-height: 1.45;
max-width: 600px;
}
.about-cols {
display: grid;
grid-template-columns: 140px 1fr 1fr 1fr;
gap: 24px;
}
.about-col h3 {
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
margin: 0 0 6px;
}
.about-col p {
margin: 0;
font-family: var(--serif);
font-size: 13px;
color: var(--ink);
line-height: 1.55;
}
.about-col__lead {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0.14em;
}
/* Phase trigger table */
.phase-table { width: 100%; border-collapse: collapse; }
.phase-table th, .phase-table td {
padding: 12px 0;
border-bottom: 1px solid var(--rule-soft);
vertical-align: top;
text-align: left;
}
.phase-table th {
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
padding-bottom: 10px;
border-bottom: 1px solid var(--rule);
}
.phase-table tr:last-child td { border-bottom: 0; }
.phase-num {
width: 50px;
font-family: var(--mono);
color: var(--ink-faint);
font-size: 11px;
padding-top: 16px !important;
}
.phase-name {
font-family: var(--serif);
font-size: 18px; font-weight: 500;
color: var(--ink-strong);
letter-spacing: -0.02em;
width: 160px;
line-height: 1.15;
}
.phase-trigger {
font-family: var(--serif);
font-size: 13px; color: var(--ink);
line-height: 1.55;
padding-right: 20px;
}
.phase-state-cell { width: 110px; text-align: right; }
/* Rules grid (xSPI screening rules on About page) */
.rules-grid {
display: grid;
grid-template-columns: 180px 1fr;
gap: 0 28px;
align-items: baseline;
}
.rule-row { display: contents; }
.rule-row > .rule-label {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
padding: 12px 0;
border-bottom: 1px solid var(--rule-soft);
}
.rule-row > .rule-text {
font-family: var(--serif);
font-size: 13px; color: var(--ink);
line-height: 1.55;
padding: 12px 0;
border-bottom: 1px solid var(--rule-soft);
}
.rule-row:last-child > * { border-bottom: 0; }
.rule-text strong {
font-family: var(--mono);
font-weight: 600;
font-size: 12.5px;
color: var(--ink-strong);
}
/* ── FOOTER ───────────────────────────────────────────────────────── */
.footer {
border-top: 1px solid var(--rule);
background: var(--bg-card);
margin-top: 60px;
}
.footer__inner {
max-width: 1320px; margin: 0 auto;
padding: 18px 32px;
font-size: 10.5px;
color: var(--ink-muted);
display: flex; justify-content: space-between;
font-family: var(--mono);
letter-spacing: 0.04em;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.kpi-bar { grid-template-columns: repeat(4, 1fr); }
.kpi:nth-child(4) { border-right: 0; }
.kpi:nth-child(n+5) { border-top: 1px solid var(--rule-soft); }
.moment { grid-template-columns: 1fr; }
.moment__left {
border-right: 0;
padding-right: 0;
border-bottom: 1px solid rgba(245,244,241,0.10);
padding-bottom: 16px;
}
.alloc-row, .tool-row, .cs-row { grid-template-columns: 1fr; }
/* .mile-row stays 3 columns until true mobile (handled below) */
.about-hero__meta { grid-template-columns: 1fr 1fr; }
.about-cols { grid-template-columns: 1fr; }
.about-section__head { grid-template-columns: 1fr; }
.intro { grid-template-columns: 1fr; }
.intro__stats {
border-left: 0; padding-left: 0;
padding-top: 24px;
border-top: 1px solid var(--rule);
}
.sector-detail { grid-template-columns: repeat(4, 1fr); }
.movers__grid { grid-template-columns: repeat(3, 1fr); }
.mover:nth-child(5n) { border-right: 1px solid var(--rule-soft); }
.mover:nth-child(3n) { border-right: 0; }
.mover:nth-child(-n+5) { border-top: 1px solid var(--rule-soft); }
.mover:nth-child(-n+3) { border-top: 0; }
}
@media (max-width: 640px) {
.topbar__inner { grid-template-columns: 1fr; gap: 12px; }
.topbar__center { justify-content: flex-start; }
.snapshot { text-align: left; }
.kpi-bar { grid-template-columns: repeat(2, 1fr); }
.kpi:nth-child(2n) { border-right: 0; }
.kpi:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
.movers__grid { grid-template-columns: repeat(2, 1fr); }
.mover:nth-child(2n) { border-right: 0; }
.about-hero__meta { grid-template-columns: 1fr; }
.about-hero__cell { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding-bottom: 12px; padding-top: 12px; }
.mile-row { grid-template-columns: 1fr; }
}