/* ============================================================
Inter — bundled locally for offline reliability.
Was:
The WOFF2 files live in static/fonts/. CSS url() is
relative to this stylesheet (also static/), so the path
is fonts/inter--.woff2.
============================================================ */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===========================================================================
Trading Tracker — premium UI styles
Tailwind handles 95% of layout; this file adds polish, custom components,
and the design tokens that make the app feel like a serious product.
=========================================================================== */
:root {
/* ============================================================
Robinhood-inspired theme palette
------------------------------------------------------------
Brand color IS the up color — the signature neon green is
used both for primary CTAs and for positive P&L, which
is the trick that makes RH feel cohesive: gains, brand,
and "go" are all the same hue.
Down = RH's red-orange (#FF5000), not a generic red — the
warmer hue is part of why losses don't feel as "alarm"-y.
THEMING:
The :root block holds the DEFAULT (= dark) palette so the
app still works if data-theme is missing. [data-theme="dark"]
and [data-theme="light"] blocks below override the same
tokens. Toggle on by setting data-theme. The pre-paint
bootstrap script in index.html prevents FOUC by reading
localStorage before stylesheets evaluate.
============================================================ */
/* Brand — Robinhood neon green (same in both themes) */
--brand-50: #e6fff0;
--brand-100: #c7ffd9;
--brand-300: #33d65c;
--brand-500: #00c805; /* the iconic Robinhood green */
--brand-600: #00b104;
--brand-700: #009003;
/* Surfaces — DARK is the default. */
--bg: #000000;
--bg-elev-1: #0e0e10;
--bg-elev-2: #1a1a1c;
--bg-elev-3: #26262a;
--border: #1e1e22;
--border-strong: #2c2c32;
/* Text — high-contrast white on black, with cool muted grays */
--text: #ffffff;
--text-muted: #9094a3;
--text-dim: #6b6e78;
/* Status — RH up is the brand green; down is RH's warm red-orange */
--up: #00c805;
--up-soft: rgba(0, 200, 5, 0.13);
--down: #ff5000;
--down-soft: rgba(255, 80, 0, 0.13);
--warn: #ffb020;
--info: #33d65c;
/* Layout */
--sidebar-w: 250px;
--topbar-h: 56px;
/* ---- Design system tokens (added 2026-04-30) ---- */
/* Type scale — 7 steps, all in px so older browsers + email clients render correctly */
--text-2xs: 10.5px;
--text-xs: 11.5px;
--text-sm: 12.5px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 28px;
/* Spacing scale — multiples of 4 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
/* Radius */
--r-sm: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-pill: 999px;
/* Shadows — RH-style: deeper black, no colored glows.
The brand glow is a translucent green halo for the primary CTA. */
--sh-sm: 0 1px 2px rgba(0,0,0,0.40);
--sh-md: 0 4px 14px rgba(0,0,0,0.55);
--sh-lg: 0 10px 30px rgba(0,0,0,0.70);
--sh-glow-brand: 0 6px 22px rgba(0,200,5,0.28);
/* Semantic accent variants — re-tuned for RH's warmer palette
(success = brand green; warning = amber; danger = red-orange;
info collapses to the brand green so the whole UI sings one note). */
--acc-success-fg: #33d65c;
--acc-success-bg: rgba(0,200,5,0.12);
--acc-success-border: rgba(0,200,5,0.28);
--acc-warning-fg: #ffd166;
--acc-warning-bg: rgba(255,176,32,0.10);
--acc-warning-border: rgba(255,176,32,0.28);
--acc-danger-fg: #ff7849;
--acc-danger-bg: rgba(255,80,0,0.10);
--acc-danger-border: rgba(255,80,0,0.28);
--acc-info-fg: #33d65c;
--acc-info-bg: rgba(0,200,5,0.10);
--acc-info-border: rgba(0,200,5,0.25);
--acc-neutral-fg: var(--text-muted);
--acc-neutral-bg: rgba(255,255,255,0.04);
--acc-neutral-border: var(--border);
/* Surface levels — alternative names that read more semantically in markup */
--surface: var(--bg-elev-1);
--surface-2: var(--bg-elev-2);
--surface-3: var(--bg-elev-3);
--border-subtle: rgba(255,255,255,0.05);
--accent: var(--brand-300); /* generic brand accent for prose links/badges */
/* Editable-yellow defaults (dark-mode values — overridden in
[data-theme="light"]). Used by .editable inputs in P&L tracker. */
--editable-text: #fde68a;
--editable-bg: rgba(253, 224, 71, 0.06);
--editable-border: rgba(253, 224, 71, 0.20);
--editable-border-focus: rgba(253, 224, 71, 0.70);
--editable-bg-focus: rgba(253, 224, 71, 0.12);
/* Topbar surface + breadcrumb non-current text (dark-theme defaults). */
--topbar-bg: rgba(0, 0, 0, 0.72);
--crumb-color: #c8ccd2;
--focus-ring: rgba(0, 200, 5, 0.22);
/* Fullscreen overlay backdrop used by modals, prewarm progress, the
language picker, and the zoom modal. Dark with high opacity dims
whatever's underneath in either theme. The dark theme uses a
slightly blue-tinted black; the light theme override below uses
a softer translucent dark so the underlying white isn't fully
obscured (still readable that the modal is over your content). */
--modal-bg: rgba(8, 12, 24, 0.92);
}
/* ============================================================
Dark theme — explicit override of :root for [data-theme="dark"].
Identical to :root because dark IS the default; defining it
explicitly lets the toggle reset cleanly without relying on
"remove the attribute" semantics.
============================================================ */
[data-theme="dark"] {
--bg: #000000;
--bg-elev-1: #0e0e10;
--bg-elev-2: #1a1a1c;
--bg-elev-3: #26262a;
--border: #1e1e22;
--border-strong: #2c2c32;
--text: #ffffff;
--text-muted: #9094a3;
--text-dim: #6b6e78;
/* Accent for prose links, badges, and small-text emphasis. The pale
green works on near-black surfaces. */
--accent: #33d65c;
/* `--brand-300` is the lighter brand green — used as link / inline
accent color throughout. Pale green on near-black: perfect. */
--brand-300: #33d65c;
/* Editable-yellow affordance for in-place inputs (P&L tracker cells).
Soft yellow text on a faint yellow background reads on dark surfaces. */
--editable-text: #fde68a;
--editable-bg: rgba(253, 224, 71, 0.06);
--editable-border: rgba(253, 224, 71, 0.20);
--editable-border-focus: rgba(253, 224, 71, 0.70);
--editable-bg-focus: rgba(253, 224, 71, 0.12);
--acc-neutral-bg: rgba(255,255,255,0.04);
--border-subtle: rgba(255,255,255,0.05);
--sh-sm: 0 1px 2px rgba(0,0,0,0.40);
--sh-md: 0 4px 14px rgba(0,0,0,0.55);
--sh-lg: 0 10px 30px rgba(0,0,0,0.70);
/* Topbar surface + breadcrumb non-current text.
The previous translucent-black with backdrop-blur looked premium
but the muted breadcrumb text disappeared into the surface
("P&L Tracker / Invid Johannes" — the "P&L Tracker" was illegible).
Now: same dark surface but the crumb gets its own brighter slate
so the breadcrumb hierarchy still reads. */
--topbar-bg: rgba(0, 0, 0, 0.72);
--crumb-color: #c8ccd2;
}
/* ============================================================
Light theme — Robinhood's web app in light mode.
Surface palette: pure white canvas, light-gray secondary
surfaces, very subtle borders. Text is near-black on white
with muted gray for secondary, exactly like RH light mode.
============================================================ */
[data-theme="light"] {
/* Surfaces — pure white canvas; cards = same white but bordered;
elev-2 = a faint warm-gray for hover/secondary fills. RH light
mode is famously stark — it doesn't tint cards, it just bounds
them with hairlines. */
--bg: #ffffff;
--bg-elev-1: #ffffff;
--bg-elev-2: #f5f6f8;
--bg-elev-3: #ebedf0;
--border: #e4e6ea;
--border-strong: #c8ccd2;
/* Text — near-black headlines, slate-cool muted, dim hints */
--text: #14181f;
--text-muted: #5b616b;
--text-dim: #8a8f99;
/* Status — same brand greens/reds (the up green is iconic and
doesn't get diluted in light mode), but the soft tints get
stronger alpha so they read against white. */
--up: #00c805;
--up-soft: rgba(0, 200, 5, 0.12);
--down: #ff5000;
--down-soft: rgba(255, 80, 0, 0.10);
--warn: #c87800; /* deeper amber for legibility on white */
--info: #00b104;
/* Accent variants re-tuned for light surfaces — softer foregrounds
and slightly stronger borders so callouts stay visible without
screaming. */
--acc-success-fg: #008a04;
--acc-success-bg: rgba(0,200,5,0.10);
--acc-success-border: rgba(0,200,5,0.32);
--acc-warning-fg: #a8620a;
--acc-warning-bg: rgba(255,176,32,0.14);
--acc-warning-border: rgba(255,176,32,0.40);
--acc-danger-fg: #c43a00;
--acc-danger-bg: rgba(255,80,0,0.10);
--acc-danger-border: rgba(255,80,0,0.32);
--acc-info-fg: #008a04;
--acc-info-bg: rgba(0,200,5,0.09);
--acc-info-border: rgba(0,200,5,0.30);
--acc-neutral-fg: var(--text-muted);
--acc-neutral-bg: rgba(0,0,0,0.04);
--acc-neutral-border: var(--border);
--border-subtle: rgba(0,0,0,0.06);
/* Shadows are softer + cooler on light surfaces; pure-black drops
would look harsh. RH uses warm grays that read like elevation. */
--sh-sm: 0 1px 2px rgba(20,24,31,0.06);
--sh-md: 0 4px 14px rgba(20,24,31,0.08);
--sh-lg: 0 10px 30px rgba(20,24,31,0.12);
--sh-glow-brand: 0 6px 20px rgba(0,200,5,0.22);
/* Accent for prose links, badges, and small-text emphasis. The pale
dark-mode green (#33d65c) is ILLEGIBLE on white — we use a fully
saturated dark green (#008a04) on light surfaces so links and
accents have the contrast a sighted user can actually read. */
--accent: #008a04;
/* `--brand-300` everywhere else (links inside table rows, "log trades"
CTAs, etc.). Same logic as --accent: the dark-theme pale green
fails contrast on white, so we override to the same deep green
used for accent. ~5.6:1 against white = WCAG AA. */
--brand-300: #008a04;
/* Editable-yellow affordance — yellow text on near-white is unreadable.
In light mode we keep the warm-yellow background tint (still feels
"this is editable"), but switch the text/border to a deep amber
that has enough contrast to read. */
--editable-text: #6b4400;
--editable-bg: rgba(253, 224, 71, 0.18);
--editable-border: rgba(176, 130, 0, 0.40);
--editable-border-focus: rgba(176, 130, 0, 0.85);
--editable-bg-focus: rgba(253, 224, 71, 0.30);
/* `--text-dim` was #8a8f99 — a pale slate that fails WCAG (~2.7:1
against white) and made the OBJETIVO $ column unreadable in
the P&L tracker. Bumping to #4a4f57 gets it to ~6:1 contrast
while staying clearly less prominent than --text-muted (#5b616b
≈ 5.4:1) and the primary --text (#14181f ≈ 15:1). */
--text-dim: #4a4f57;
/* Topbar in light mode is near-white with a subtle blur — it should
blend with the canvas, not feel like a separate dark slab. The
breadcrumb non-current text uses the standard --text-muted because
it's now sitting on a light surface where slate-gray reads. */
--topbar-bg: rgba(255, 255, 255, 0.85);
--crumb-color: var(--text-muted);
--focus-ring: rgba(0, 138, 4, 0.18);
/* Modal backdrop — on a white canvas, a near-opaque navy would feel
like a hard slab dropping in. Use a softer, slightly translucent
dark so the underlying page is still faintly visible (the user
keeps spatial context that the modal is over their content) while
the modal itself sits on a clearly elevated surface. */
--modal-bg: rgba(20, 24, 31, 0.55);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: hidden; }
body {
background: var(--bg);
color: var(--text);
/* Robinhood's web app uses a custom face called "Capsule Sans Text"
that we can't ship without a license. The closest free stand-ins,
in order: SF Pro Text (macOS native — matches the RH iOS app
exactly), then Inter (which we bundle locally), then system-ui.
This keeps the typography feeling native on macOS where the app
is run, with Inter as the cross-platform safety net. */
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Inter", system-ui, "Segoe UI", Roboto, sans-serif;
/* Tabular nums + ss01 (default) + cv11 (single-story 'a' for a more
RH-feeling sans). RH numbers are tabular everywhere. */
font-feature-settings: "ss01", "cv11", "tnum";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em; /* slight tightening — RH default */
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection {
background: rgba(0, 200, 5, 0.28);
color: var(--text);
}
:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px var(--focus-ring);
}
/* ===========================================================================
Auth
=========================================================================== */
.auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
position: relative;
z-index: 1;
}
.auth-grid {
width: 100%;
max-width: 1060px;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
gap: 28px;
align-items: center;
}
.auth-guide {
min-height: 540px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background:
linear-gradient(135deg, rgba(0,200,5,0.08), rgba(0,0,0,0) 55%),
var(--bg-elev-1);
padding: 32px;
}
.auth-brand-row,
.auth-mobile-brand {
display: flex;
align-items: center;
gap: 12px;
}
.auth-page .brand-mark {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
/* Shield SVG provides its own fill + silhouette. Drop-shadow follows
the shield outline (not a rounded-square outline) for a clean glow. */
filter: drop-shadow(0 6px 18px rgba(0, 200, 5, 0.34));
}
.auth-page .brand-mark svg { width: 100%; height: 100%; display: block; }
.auth-brand-name {
font-weight: 800;
font-size: 18px;
letter-spacing: 0;
}
.auth-guide h1 {
font-size: 44px;
line-height: 1.05;
margin: 42px 0 14px;
letter-spacing: 0;
}
.auth-guide p {
max-width: 560px;
color: var(--text-muted);
line-height: 1.65;
font-size: var(--text-md);
margin: 0;
}
.auth-steps {
display: grid;
gap: 12px;
margin-top: 32px;
}
.auth-step {
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
align-items: flex-start;
padding: 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: rgba(255,255,255,0.025);
}
[data-theme="light"] .auth-step { background: rgba(0,0,0,0.025); }
.auth-step-num {
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brand-500);
color: #001a01;
font-weight: 800;
font-size: var(--text-sm);
}
.auth-step strong {
display: block;
color: var(--text);
font-size: var(--text-base);
margin-bottom: 4px;
}
.auth-step span:last-child {
color: var(--text-muted);
font-size: var(--text-sm);
line-height: 1.5;
}
.auth-trust {
color: var(--text-dim);
font-size: var(--text-xs);
margin-top: 28px;
}
.auth-card {
padding: 30px;
}
.auth-card-head {
margin-bottom: 22px;
}
.auth-mobile-brand {
display: none;
margin-bottom: 22px;
}
.auth-card h2 {
margin: 0;
font-size: var(--text-2xl);
line-height: 1.2;
letter-spacing: 0;
}
.auth-card-head p {
margin: 8px 0 0;
color: var(--text-muted);
font-size: var(--text-sm);
line-height: 1.55;
}
/* Robinhood is a flat-black canvas — no radial backdrop. The previous
blue/green sheen fought the brand-green-as-up-color signal. We
keep the ::before pseudo for future use (e.g. a subtle vignette
on tall pages) but currently render it transparent. */
body::before {
content: "";
position: fixed; inset: 0; pointer-events: none; z-index: 0;
background: transparent;
}
/* ===========================================================================
App shell — sidebar + main
=========================================================================== */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
position: relative;
z-index: 1;
}
.sidebar {
border-right: 1px solid var(--border);
/* Flat black to match the RH dark canvas — no gradient. */
background: var(--bg);
padding: 18px 14px 14px;
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar,
.hscroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.sidebar::-webkit-scrollbar-thumb,
.hscroll::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--r-pill);
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: 4px 6px 18px;
border-bottom: 1px solid var(--border);
}
.sidebar-brand .brand-mark {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
/* Tradorian shield SVG: the silhouette and color live in the inline