/* ==========================================================================
editorial-overrides.css
--------------------------------------------------------------------------
The "editorial financial terminal" elevation layer for the SpeedSignal
dashboard mockup. Applied LAST in the cascade so it trumps the legacy
SaaS look without rewriting every component. Goal: kill the AI-slop
tropes (Inter, overly rounded cards, flat backgrounds, generic
green/dark) and pull the dashboard toward a Bloomberg-terminal-meets-
financial-magazine feel.
To install:
1. Save this file alongside dashboard.html
2. In dashboard.html , add the Google Fonts import (Instrument
Serif + IBM Plex Sans/Mono) — see EDITORIAL-PASS-README.md
3. Add right
AFTER design-tokens.css (it must override the legacy tokens).
4. Run apply-editorial-pass.js for the JS-side changes (helpers +
emoji-to-SVG replacements + render function patches).
Direction:
• typography: IBM Plex Sans body, IBM Plex Mono numerals, Instrument
Serif available for display (currently overridden to sans-bold)
• surfaces: tighter radii, hairline borders, no candy shadows
• atmosphere: very faint dot-grid + grain (NO gradient mesh — that's
the #1 AI-slop tell). Numbers in tabular mono = trader feel.
• motion: one orchestrated reveal on tab switch; no scattered juice.
========================================================================== */
:root {
--ed-display: 'Instrument Serif', 'Source Serif Pro', Georgia, serif;
--ed-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
--ed-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;
/* [scoped] radii movidos a body.view-app (no global, no toca landing) */
--ed-paper: #ECE7DD; --ed-paper-dim: #B8B0A0;
--ed-paper-faint: #6E6862;
--ed-rule: rgba(236,231,221,0.08);
--ed-rule-strong: rgba(236,231,221,0.16);
--ed-bg: #0A0E1A;
}
body.view-app { font-family: var(--ed-sans); --ss-r-sm:4px; --ss-r-md:6px; --ss-r-lg:8px; --ss-r-xl:10px; }
body.view-app {
background:
radial-gradient(circle at 1px 1px, rgba(236,231,221,0.025) 1px, transparent 0) 0 0 / 24px 24px,
url("data:image/svg+xml;utf8,"),
var(--ed-bg);
color: var(--ed-paper);
}
/* Numbers — trader-terminal feel via Plex Mono on tabular-numeric. */
body.view-app [style*="tabular-nums"], body.view-app .num, body.view-app .ss-conv-box {
font-family: var(--ed-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* Page headers — match the Daily Brief h2 (IBM Plex Sans 800 32px) so all
four tabs share one editorial sans-bold treatment. Earlier we tried serif
italic here, but the user prefers the sans-bold across the board. */
.sb-page-header h1, #wl-shell h1, #al-shell h1 {
font-family: var(--ed-sans) !important;
/* [C] user feedback: IBM Plex Sans 800 renders too heavy — dropped to 700.
Daily Brief inline h2 dropped to 700 too so all four headers match. */
font-weight: 700 !important;
font-style: normal !important;
letter-spacing: -0.02em !important;
font-size: 32px !important;
line-height: 1.05 !important;
color: var(--ss-text) !important;
}
.sb-page-header, #wl-shell > div:first-child, #al-shell > div:first-child {
border-bottom: 1px solid var(--ed-rule);
padding-bottom: 16px !important;
margin-bottom: 20px !important;
}
/* Cards — hairline borders, no candy shadows. */
.db-card-wrap, .td-card, .sb-kpi-card,
.al-preset-card, #al-builder, #al-activity, #al-settings,
[id^="sb-table"], #sb-side-panel,
.wl-kpi-grid > div {
border-color: var(--ed-rule) !important;
box-shadow: none !important;
background-image: none;
}
/* Phase pills — now rendered via _uiPhasePill helper which sets its own
canonical sizing (uppercase + glyph + fixed min-width). No CSS overrides
needed here, just leaving a placeholder rule for the data-phase attr
in case future selectors hook into it. */
.ss-phase-pill { font-family: var(--ed-sans); }
/* Chips + filter tabs — terminal-style sharp rect with hairline border.
Active chip = thin green border + tinted bg (no thick fill). */
.sb-chip, .wl-filter-tab {
border-radius: 4px !important;
letter-spacing: 0.02em;
padding: 6px 12px !important;
font-size: 11.5px !important;
border-color: var(--ed-rule) !important;
}
.sb-chip:hover, .wl-filter-tab:hover {
border-color: var(--ed-rule-strong) !important;
}
/* Active chip: keep the original green tint but with tighter border. */
.sb-chip[data-chip][style*="rgba(34,197,94"] {
border-color: rgba(34,197,94,0.45) !important;
}
/* Advanced Filters toggle button (same chip family) */
#sb-adv-toggle {
border-radius: 4px !important;
padding: 6px 12px !important;
font-size: 11.5px !important;
border-color: var(--ed-rule) !important;
}
/* Top nav tabs — underline-on-active. */
.tab-btn.active {
border-radius: 0 !important;
background: transparent !important;
border-bottom: 2px solid var(--ss-green) !important;
color: var(--ss-text) !important;
}
.tab-btn { border-radius: 0 !important; }
/* Ticker Detail subtabs (Overview / Technicals / Fundamentals) — same
underline-on-active editorial treatment as the top nav. The sip-tabs
container reuses .tab-active / .tab-inactive (the landing alert preview
classes), so scope the override to #sip-tabs only. */
#sip-tabs button.tab-active,
#sip-tabs button.tab-inactive {
background: transparent !important;
color: var(--ss-text-muted) !important;
border-radius: 0 !important;
padding: 8px 4px !important;
margin-right: 18px;
border-bottom: 2px solid transparent !important;
font-weight: 500 !important;
}
#sip-tabs button.tab-active {
color: var(--ss-text) !important;
border-bottom-color: var(--ss-green) !important;
font-weight: 600 !important;
}
#sip-tabs button.tab-inactive:hover {
color: var(--ss-text-secondary) !important;
background: transparent !important;
}
#sip-tabs {
gap: 0 !important;
border-bottom: 1px solid var(--ed-rule);
margin-bottom: 16px !important;
padding-bottom: 0 !important;
}
/* Tables — financial-paper feel. */
.ss-rtable thead tr {
background: transparent !important;
border-bottom: 1px solid var(--ed-rule-strong) !important;
}
.ss-rtable thead th {
letter-spacing: 0.1em !important;
font-weight: 500 !important;
color: var(--ed-paper-faint) !important;
font-size: 9.5px !important;
padding-top: 12px !important; padding-bottom: 12px !important;
}
.ss-rtable tbody tr {
border-bottom: 1px solid var(--ed-rule) !important;
transition: background 0.18s ease;
}
.ss-rtable tbody tr:hover { background: rgba(236,231,221,0.02) !important; }
.ss-rtable tbody tr:last-child { border-bottom: none !important; }
/* Conviction box — terminal numeric cell. */
.ss-conv-box {
font-family: var(--ed-mono) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
border-radius: 3px !important;
}
/* Ticker Detail subtab cards (Overview / Technicals / Fundamentals grids).
The dCard/sipCard markup uses inline styles, so we target the rows + values
to align with the editorial system. Hairline dividers, mono numerals. */
.detail-row {
border-color: var(--ed-rule) !important;
padding: 8px 0 !important;
}
.detail-row .detail-label { letter-spacing: 0.01em; }
.detail-row .detail-value {
font-family: var(--ed-mono) !important;
font-variant-numeric: tabular-nums;
}
/* KPI tiles — strip the candy (transparent + vertical hairline divider). */
.sb-kpi-card {
background: transparent !important;
border: none !important;
border-top: none !important;
border-left: 1px solid var(--ed-rule-strong) !important;
border-radius: 0 !important;
padding: 4px 20px !important;
box-shadow: none !important;
}
.sb-kpi-card:first-child { border-left: none !important; padding-left: 0 !important; }
.sb-kpi-card p:nth-child(1) {
font-family: var(--ed-sans) !important;
color: var(--ed-paper-faint) !important;
letter-spacing: 0.12em !important;
font-size: 10px !important;
}
.sb-kpi-card p:nth-child(2) {
font-family: var(--ed-mono) !important;
font-weight: 500 !important;
font-size: 36px !important;
color: var(--ss-text) !important;
}
.sb-kpi-card p:nth-child(3) {
color: var(--ed-paper-faint) !important;
font-size: 10.5px !important;
}
/* The KPI grid wrapper — give it a hairline above + below to read as a
single data-strip rather than four floating cards. */
#sb-kpis {
gap: 0 !important;
border-top: 1px solid var(--ed-rule);
border-bottom: 1px solid var(--ed-rule);
padding: 18px 0 !important;
margin: 8px 0 20px !important;
}
/* Page reveal — single unified fade, identical across all tabs.
Removed the per-child stagger that gave each tab a different rhythm
(tabs have different number of root children → different stagger end).
Also overrides the legacy .tab-content.active tabReveal so only ONE
animation runs no matter which tab is shown. */
@keyframes edReveal {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-content.active {
animation: edReveal 0.28s cubic-bezier(0.2,0.7,0.2,1) both !important;
}
/* Kill any per-child or inner animations that might still fire on tab content. */
.tab-content.active > *,
.tab-content.active .reveal,
.tab-content.active [data-anim] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.tab-content.active { animation: none !important; }
}
/* Live-data dot pulse — DISABLED per user feedback (was affecting the KPI
icon badges too because they share .db-snap-card class). */
@keyframes edPulse {
0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.85; }
70% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
100% { box-shadow: 0 0 0 0 transparent; opacity: 0.85; }
}
/* .db-snap-card > div:first-child > span:last-child {
animation: edPulse 2.4s ease-out infinite;
} */
/* Hamburger button + dropdown menu — editorial system. */
.ed-icon-btn {
border: 1px solid var(--ed-rule);
border-radius: 6px !important;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ed-icon-btn:hover {
border-color: var(--ed-rule-strong);
background: rgba(236,231,221,0.04);
}
.ed-icon-btn[aria-expanded="true"] {
border-color: rgba(34,197,94,0.45);
color: var(--ss-green-light);
background: rgba(34,197,94,0.06);
}
.ed-menu {
background: var(--ss-bg-elevated);
border: 1px solid var(--ed-rule-strong);
border-radius: 6px;
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.3);
overflow: hidden;
animation: edMenuIn 0.18s cubic-bezier(0.2,0.7,0.2,1);
}
html[data-theme="light"] .ed-menu {
background: #FFFFFF;
border-color: rgba(26,24,20,0.14);
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18), 0 2px 6px -2px rgba(0,0,0,0.08);
}
@keyframes edMenuIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ed-menu-section-label {
padding: 10px 14px 6px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ed-paper-faint);
font-family: var(--ed-sans);
}
.ed-menu-section-label:not(:first-child) {
border-top: 1px solid var(--ed-rule);
margin-top: 4px;
}
.ed-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-size: 12.5px;
font-family: var(--ed-sans);
color: var(--ss-text-body);
background: transparent;
border: none;
cursor: pointer;
text-align: left;
text-decoration: none;
transition: background 0.12s, color 0.12s;
line-height: 1.2;
}
.ed-menu-item:hover {
background: rgba(236,231,221,0.04);
color: var(--ss-text);
}
.ed-menu-icon {
display: inline-flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
color: var(--ed-paper-faint);
flex-shrink: 0;
}
.ed-menu-item:hover .ed-menu-icon {
color: var(--ss-text);
}
/* Alert presets grid — 7-up on wide desktop, collapses down. The JS sets
grid-template-columns:repeat(7,...) inline; override per breakpoint so
cards stay readable (each preset card has min-height:148px). */
@media (max-width: 1280px) {
.al-presets-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) {
.al-presets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
.al-presets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
.al-presets-grid { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE RESPONSIVE — editorial system stays coherent on phones.
Targets:
• portrait phone ≤ 640px
• landscape phone ≤ 932px + landscape + short height
• narrow desktop ≤ 1023px (already partially handled by legacy)
Each rule below has a "why" so we don't accidentally undo it. */
@media (max-width: 768px) {
/* Page headers — 32px is too dominant on a 390px viewport. */
.sb-page-header h1, #wl-shell h1, #al-shell h1,
#db-shell h2 {
font-size: 24px !important;
letter-spacing: -0.015em !important;
}
.sb-page-header, #wl-shell > div:first-child, #al-shell > div:first-child {
padding-bottom: 12px !important;
margin-bottom: 16px !important;
}
/* KPI strip — when Signal Board collapses to 2-col on mobile, the
"vertical hairline divider" reads weird. Switch to a grid with cell
padding + a single bottom hairline per row instead. */
#sb-kpis {
gap: 12px !important;
padding: 14px 0 !important;
margin: 8px 0 16px !important;
}
.sb-kpi-card {
border-left: none !important;
padding: 4px 0 !important;
}
.sb-kpi-card p:nth-child(2) { font-size: 28px !important; }
/* Watchlist KPI row — 5 cards in 1fr each is unreadable on phone.
Already 2-col by Tailwind grid; tighten gap + cap font sizes. */
.wl-kpi-grid { gap: 8px !important; }
.wl-kpi-grid > div { padding: 10px 12px !important; }
.wl-kpi-grid > div p:nth-child(2) { font-size: 20px !important; }
/* Daily Brief KPI row also already handled by legacy media query
(repeat(2,...) under 680px), just normalize gap + font. */
.db-kpi-row { gap: 10px !important; }
/* Hamburger dropdown — keep aligned under button but cap width so it
doesn't overflow the viewport on a 320px-wide phone. */
.ed-menu { min-width: 200px !important; max-width: calc(100vw - 24px); }
/* Top nav tabs underline-on-active — tighten so 4 tabs + Learn fit. */
.tab-btn.active, .tab-btn { padding: 6px 8px !important; font-size: 12px !important; }
}
@media (max-width: 480px) {
/* Phone portrait — single-column everywhere. */
.wl-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* KPI strip stacks vertically with hairlines between rows. */
#sb-kpis { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
/* Sub-tabs (Overview/Technicals/Fundamentals) — let them scroll horizontally. */
#sip-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
#sip-tabs button { white-space: nowrap; flex-shrink: 0; margin-right: 10px !important; }
}
/* Landscape phone — chart is already constrained by legacy rule, but the
Ticker Detail header card stacks awkwardly. Force horizontal stack. */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
.sb-page-header h1, #wl-shell h1, #al-shell h1, #db-shell h2 {
font-size: 22px !important;
}
/* Page body padding gets a bit tighter so the chart isn't cramped. */
#db-shell, #wl-shell, #al-shell { padding-top: 4px !important; }
}
/* Toggle switches (Alerts presets + Notification settings) — editorial
refit: sharp rounded-rect (matches conviction box / phase pill geometry)
with hairline border + soft green tint when ON. The inline left/top
positions from the JS markup are overridden via !important so the
same `aria-checked` JS state machine drives the new visual. */
.al-prefs-toggle, .al-preset-toggle {
border-radius: 4px !important;
background: transparent !important;
border: 1px solid var(--ed-rule-strong) !important;
width: 32px !important;
height: 18px !important;
transition: background 0.18s, border-color 0.18s !important;
}
.al-prefs-toggle[aria-checked="true"], .al-preset-toggle[aria-checked="true"] {
background: rgba(34,197,94,0.12) !important;
border-color: rgba(34,197,94,0.5) !important;
}
.al-prefs-toggle > span, .al-preset-toggle > span {
border-radius: 2px !important;
width: 10px !important;
height: 10px !important;
top: 3px !important;
background: var(--ed-paper-faint) !important;
box-shadow: none !important;
transition: left 0.18s, background 0.18s !important;
}
.al-prefs-toggle[aria-checked="true"] > span, .al-preset-toggle[aria-checked="true"] > span {
background: var(--ss-green-light) !important;
left: 19px !important;
}
.al-prefs-toggle[aria-checked="false"] > span, .al-preset-toggle[aria-checked="false"] > span {
left: 3px !important;
}
/* ═══════════════════════════════════════════════════════════════════
ADVANCED FILTERS PANEL (#sb-advanced-drawer)
The legacy filter drawer was authored with Tailwind utilities + inline
styles before the editorial pass. Bring it into the system:
hairline borders, sharp 4px corners on toggle pills, terminal-style
uppercase labels, conviction colors consistent with the rest. */
#sb-advanced-drawer .rounded-xl {
border-radius: var(--ss-r-lg) !important;
border-color: var(--ed-rule) !important;
}
#sb-advanced-drawer .border-white\/\[0\.04\] {
border-color: var(--ed-rule) !important;
}
/* Section eyebrows — Status / Tier / Risk Flags / Eligibility Thresholds. */
#sb-advanced-drawer p.uppercase {
letter-spacing: 0.12em !important;
color: var(--ed-paper-faint) !important;
font-weight: 600 !important;
}
/* Status / Tier / Anomaly toggle pills — same geometry as phase pills:
4px radius, hairline border, uppercase, tighter padding. */
#status-toggles .status-toggle,
#tier-toggles .tier-toggle,
#anomaly-toggles .anomaly-toggle {
border-radius: 4px !important;
padding: 4px 10px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
/* Conviction conf-pills inside the drawer — same geometry. */
#sb-advanced-drawer .conf-pill .conf-pill-inner {
border-radius: 4px !important;
padding: 4px 10px !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-color: var(--ed-rule) !important;
}
/* Threshold inputs — tighter editorial styling. */
#sb-advanced-drawer .threshold-input {
border-radius: 4px !important;
border-color: var(--ed-rule-strong) !important;
font-family: var(--ed-mono) !important;
font-size: 11px !important;
}
#sb-advanced-drawer .step-btn {
border-radius: 4px !important;
border-color: var(--ed-rule) !important;
font-family: var(--ed-mono) !important;
}
/* Clear All button → editorial green-outline style (matches Save / Create Alert). */
#sb-advanced-drawer #f-reset {
border-radius: 4px !important;
border-color: var(--ed-rule-strong) !important;
font-size: 11px !important;
letter-spacing: 0.04em !important;
}
/* Hint paragraph at the top of the drawer. */
#sb-advanced-drawer > p:first-child {
color: var(--ed-paper-faint) !important;
font-style: normal !important;
letter-spacing: 0.01em !important;
}
/* Light mode preservation. */
html[data-theme="light"] body.view-app {
--ed-paper: #1A1814; --ed-paper-dim: #5C564E; --ed-paper-faint: #8A847A;
--ed-rule: rgba(26,24,20,0.10);
--ed-rule-strong: rgba(26,24,20,0.20);
--ed-bg: #F6F2EA;
background:
radial-gradient(circle at 1px 1px, rgba(26,24,20,0.04) 1px, transparent 0) 0 0 / 24px 24px,
var(--ed-bg);
color: var(--ed-paper);
}