Horizon redesign: space theme, visual dashboard, chart reskin
Replaces the citron/green glass theme with the Horizon direction (mockup at /design-horizon): space-void background, starfield, dim Mars horizon, rim-cyan accent, rose for negative. Palette validated for CVD separation and contrast on the dark surface. - tailwind.config: gray -> cool space neutrals, blue/emerald -> cyan scale, red -> rose; display font Space Grotesk - globals.css: Horizon tokens, atmosphere, denser glass, cyan buttons/inputs, price-rail / R-bar / radar chart CSS - Dashboard rebuilt: verdict hero, top-pick card with spatial price rail, KPI tiles, open positions as diverging R-bars with expandable detail + trade chart (OHLCV since entry, entry/stop/target levels), radar list with per-setup disqualify reason, watchlist chips - OpenTradesPanel: table replaced by R-bar rows; all fields kept in the drill-down (shares, P&L, alpha, trailing stop, sell) - qualification: disqualifyReason() mirrors qualifiesSetup rule order - CandlestickChart: canvas colors moved to Horizon palette; S/R now cyan/neutral so rose stays reserved for the stop level - ScoreCard: radar score fingerprint with hover values - Design mockup pages included (routed in App.tsx) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
+178
-33
@@ -3,13 +3,30 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Horizon theme tokens — chart colors validated on the dark surface */
|
||||
--void: #0a0b11;
|
||||
--surface: #11131c;
|
||||
--panel-glass: rgba(15, 17, 26, 0.72);
|
||||
--panel-line: rgba(226, 231, 245, 0.085);
|
||||
--grid: rgba(226, 231, 245, 0.07);
|
||||
--ink: #edeef3;
|
||||
--ink-2: #9aa0b0;
|
||||
--ink-3: #5d6373;
|
||||
--up: #2f9db2;
|
||||
--up-text: #6ec9db;
|
||||
--down: #e36a58;
|
||||
--down-text: #ef9182;
|
||||
--ember: #ff6a45; /* reserved: horizon, wordmark, top-pick */
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0e120f;
|
||||
background: var(--void);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Number inputs: drop the native spinner arrows app-wide — they don't fit the
|
||||
@@ -25,7 +42,7 @@
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
/* Atmosphere: faint graph-paper grid + citron signal glow + film grain */
|
||||
/* Atmosphere: faint starfield + soft rim-cyan / ember glows + film grain */
|
||||
#root {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
@@ -36,12 +53,21 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background:
|
||||
radial-gradient(ellipse 70% 50% at 15% 0%, rgba(196, 232, 46, 0.06) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 50% 40% at 90% 90%, rgba(52, 211, 153, 0.04) 0%, transparent 50%),
|
||||
linear-gradient(rgba(223, 242, 178, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(223, 242, 178, 0.025) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
|
||||
background-image:
|
||||
radial-gradient(ellipse 60% 40% at 85% 0%, rgba(47, 157, 178, 0.05) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 70% 30% at 50% 100%, rgba(228, 87, 61, 0.04) 0%, transparent 60%),
|
||||
radial-gradient(1px 1px at 12% 18%, rgba(237, 238, 243, 0.5) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 68% 8%, rgba(237, 238, 243, 0.35) 50%, transparent 51%),
|
||||
radial-gradient(1.5px 1.5px at 84% 32%, rgba(159, 216, 232, 0.45) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 33% 44%, rgba(237, 238, 243, 0.3) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 91% 64%, rgba(237, 238, 243, 0.28) 50%, transparent 51%),
|
||||
radial-gradient(1.5px 1.5px at 22% 71%, rgba(237, 238, 243, 0.4) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 55% 27%, rgba(255, 150, 120, 0.3) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 45% 87%, rgba(237, 238, 243, 0.28) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 76% 82%, rgba(159, 216, 232, 0.3) 50%, transparent 51%),
|
||||
radial-gradient(1px 1px at 5% 55%, rgba(237, 238, 243, 0.3) 50%, transparent 51%);
|
||||
background-size: 100% 100%, 100% 100%, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px, 900px 700px;
|
||||
background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -58,20 +84,57 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Panel — the core building block (kept class names so all components reskin) */
|
||||
/* Mars horizon — fixed at the viewport bottom, atmosphere only, never data */
|
||||
.app-horizon {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 22vh;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-horizon-planet {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58%;
|
||||
width: 300vw;
|
||||
height: 300vw;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(ellipse 55% 14% at 50% 0.4%, rgba(255, 120, 80, 0.22), transparent 60%),
|
||||
radial-gradient(ellipse 120% 26% at 50% 0%, #3f130b 0%, #260a06 32%, #130504 58%, #0a0b11 86%);
|
||||
}
|
||||
.app-horizon-rim {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(58% - 2px);
|
||||
width: 300vw;
|
||||
height: 300vw;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, rgba(213, 240, 250, 0.55), rgba(159, 216, 232, 0.16) 40%, transparent 60%);
|
||||
filter: blur(1px);
|
||||
box-shadow: 0 -14px 50px rgba(159, 216, 232, 0.1), 0 -50px 140px rgba(228, 87, 61, 0.08);
|
||||
}
|
||||
|
||||
/* Panel — the core building block (kept class names so all components reskin).
|
||||
Denser than plain glass so the horizon glows between panels, not through them. */
|
||||
.glass {
|
||||
background: rgba(238, 240, 233, 0.035);
|
||||
background: var(--panel-glass);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(223, 242, 178, 0.09);
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 0.875rem;
|
||||
}
|
||||
|
||||
.glass-sm {
|
||||
background: rgba(238, 240, 233, 0.028);
|
||||
background: rgba(15, 17, 26, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(223, 242, 178, 0.07);
|
||||
border: 1px solid rgba(226, 231, 245, 0.07);
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
@@ -79,49 +142,49 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.glass-hover:hover {
|
||||
background: rgba(238, 240, 233, 0.06);
|
||||
border-color: rgba(214, 242, 92, 0.22);
|
||||
background: rgba(21, 24, 35, 0.8);
|
||||
border-color: rgba(110, 201, 219, 0.22);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Gradient text — reserved for the brand wordmark only */
|
||||
.text-gradient {
|
||||
background: linear-gradient(120deg, #d6f25c, #6ee7b7);
|
||||
background: linear-gradient(120deg, #9fd8e8, #6ec9db);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Primary button — luminous citron with ink text. The signature element. */
|
||||
/* Primary button — luminous rim-cyan with ink text. */
|
||||
.btn-primary {
|
||||
background: #c3e82e;
|
||||
color: #16190a;
|
||||
border: 1px solid rgba(214, 242, 92, 0.5);
|
||||
background: #2f9db2;
|
||||
color: #06181c;
|
||||
border: 1px solid rgba(110, 201, 219, 0.5);
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #d6f25c;
|
||||
box-shadow: 0 0 20px rgba(196, 232, 46, 0.35);
|
||||
background: #4ab3c8;
|
||||
box-shadow: 0 0 20px rgba(79, 182, 203, 0.35);
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.input-glass {
|
||||
background: rgba(238, 240, 233, 0.04);
|
||||
border: 1px solid rgba(223, 242, 178, 0.12);
|
||||
background: rgba(226, 231, 245, 0.04);
|
||||
border: 1px solid rgba(226, 231, 245, 0.12);
|
||||
border-radius: 0.5rem;
|
||||
color: #eef0e9;
|
||||
color: #edeef3;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.input-glass::placeholder {
|
||||
color: rgba(149, 157, 135, 0.55);
|
||||
color: rgba(154, 160, 176, 0.55);
|
||||
}
|
||||
.input-glass:focus {
|
||||
outline: none;
|
||||
border-color: rgba(214, 242, 92, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(196, 232, 46, 0.12);
|
||||
background: rgba(238, 240, 233, 0.06);
|
||||
border-color: rgba(110, 201, 219, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(47, 157, 178, 0.14);
|
||||
background: rgba(226, 231, 245, 0.06);
|
||||
}
|
||||
|
||||
/* Numbers — every metric reads in tabular mono */
|
||||
@@ -135,10 +198,92 @@
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: #6e7562;
|
||||
color: #5d6373;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- Horizon chart primitives (components/charts/horizon.tsx) --- */
|
||||
|
||||
/* Price rail: stop → entry → now → target laid out spatially */
|
||||
.hz-rail { position: relative; height: 108px; margin: 34px 8px 4px; }
|
||||
.hz-rail-track {
|
||||
position: absolute; left: 0; right: 0; top: 50%; height: 1px;
|
||||
background: var(--grid);
|
||||
}
|
||||
.hz-rail-risk {
|
||||
position: absolute; top: calc(50% - 2px); height: 4px;
|
||||
background: rgba(227, 106, 88, 0.16); border-radius: 2px;
|
||||
}
|
||||
.hz-rail-progress {
|
||||
position: absolute; top: calc(50% - 2px); height: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.hz-rail-mark { position: absolute; top: 0; bottom: 0; width: 0; }
|
||||
.hz-rail-tick {
|
||||
position: absolute; top: calc(50% - 7px); left: -1px;
|
||||
width: 2px; height: 14px; border-radius: 1px;
|
||||
}
|
||||
.hz-rail-dot {
|
||||
position: absolute; top: calc(50% - 6px); left: -6px;
|
||||
width: 12px; height: 12px; border-radius: 50%;
|
||||
border: 2px solid var(--surface);
|
||||
box-shadow: 0 0 0 1px var(--up), 0 0 14px rgba(110, 201, 219, 0.45);
|
||||
}
|
||||
.hz-rail-ring {
|
||||
position: absolute; top: calc(50% - 6px); left: -6px;
|
||||
width: 12px; height: 12px; border-radius: 50%;
|
||||
border: 2px solid var(--up); background: var(--void);
|
||||
}
|
||||
.hz-rail-label {
|
||||
position: absolute; top: calc(50% + 16px); left: 0; transform: translateX(-50%);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hz-rail-label-top { top: auto; bottom: calc(50% + 16px); }
|
||||
.hz-rail-label em {
|
||||
font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
|
||||
}
|
||||
.hz-rail-label b {
|
||||
font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 13px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.hz-rail-label i {
|
||||
font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* Diverging R-multiple bar */
|
||||
.hz-rbar { position: relative; height: 10px; }
|
||||
.hz-rbar-zero {
|
||||
position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
|
||||
background: var(--panel-line);
|
||||
}
|
||||
.hz-rbar-fill { position: absolute; top: 0; bottom: 0; }
|
||||
|
||||
/* SVG level labels (trade chart) */
|
||||
.hz-tradechart { width: 100%; height: auto; display: block; }
|
||||
.hz-lvl { fill: var(--ink-3); font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
|
||||
.hz-lvl-up { fill: var(--up-text); }
|
||||
.hz-lvl-down { fill: var(--down-text); }
|
||||
|
||||
/* Radar fingerprint */
|
||||
.hz-radar-wrap { position: relative; display: inline-block; }
|
||||
.hz-radar-axis {
|
||||
fill: var(--ink-3); font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
|
||||
letter-spacing: 0.04em; text-transform: capitalize;
|
||||
}
|
||||
.hz-radar-axisval { fill: var(--ink-2); font-weight: 600; }
|
||||
.hz-radar-tip {
|
||||
position: absolute; transform: translate(-50%, calc(-100% - 12px));
|
||||
background: rgba(21, 24, 35, 0.96); border: 1px solid var(--panel-line);
|
||||
border-radius: 8px; padding: 6px 10px; white-space: nowrap;
|
||||
pointer-events: none; z-index: 5; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
.hz-radar-tip b { display: block; color: var(--ink); font-weight: 600; text-transform: capitalize; }
|
||||
.hz-radar-tip span { display: block; color: var(--up-text); font-size: 11px; margin-top: 1px; }
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -148,10 +293,10 @@
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(223, 242, 178, 0.12);
|
||||
background: rgba(226, 231, 245, 0.12);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(223, 242, 178, 0.22);
|
||||
background: rgba(226, 231, 245, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user