Redesign: phosphor-terminal identity and simplified 4-page structure
Information architecture (6 nav destinations -> 4): - New Overview home: metric strip (live setups, high confidence, hit rate, expectancy), top-5 setups, watchlist pulse - Market = Watchlist + Rankings merged as tabs; scoring weights moved into a collapsible disclosure - Signals = Scanner + Performance merged as tabs (Setups | Track Record) with actions inside the panels - Legacy routes redirect (/watchlist, /rankings, /scanner, /performance) Visual identity: - Warm ash-green dark palette replaces cold navy; citron lime accent replaces blue (Tailwind gray/blue remapped at config level so all components reskin) - Primary buttons: lime with ink text; long/short stays emerald/red - Typography: Bricolage Grotesque display, Instrument Sans body, IBM Plex Mono for all numerals incl. chart canvas labels - Atmosphere: graph-paper grid + citron glow + film grain; pulsing brand dot; mono-numbered nav Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,11 +4,15 @@
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
background: #0a0e1a;
|
||||
background: #0e120f;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Mesh gradient background */
|
||||
h1, h2, h3 {
|
||||
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Atmosphere: faint graph-paper grid + citron signal glow + film grain */
|
||||
#root {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
@@ -18,80 +22,108 @@
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
z-index: -2;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 10% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 10%, rgba(139, 92, 246, 0.07) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 50% 40% at 50% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
|
||||
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;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Film grain — keeps large dark areas from feeling flat */
|
||||
#root::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Glass card — the core building block */
|
||||
/* Panel — the core building block (kept class names so all components reskin) */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 1rem;
|
||||
background: rgba(238, 240, 233, 0.035);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(223, 242, 178, 0.09);
|
||||
border-radius: 0.875rem;
|
||||
}
|
||||
|
||||
.glass-sm {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(238, 240, 233, 0.028);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(223, 242, 178, 0.07);
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.glass-hover {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.glass-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(238, 240, 233, 0.06);
|
||||
border-color: rgba(214, 242, 92, 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(135deg, #38bdf8, #60a5fa);
|
||||
background: linear-gradient(120deg, #d6f25c, #6ee7b7);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Primary button — single blue accent */
|
||||
/* Primary button — luminous citron with ink text. The signature element. */
|
||||
.btn-primary {
|
||||
background: rgba(59, 130, 246, 0.85);
|
||||
color: white;
|
||||
border: 1px solid rgba(96, 165, 250, 0.35);
|
||||
background: #c3e82e;
|
||||
color: #16190a;
|
||||
border: 1px solid rgba(214, 242, 92, 0.5);
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: rgb(59, 130, 246);
|
||||
box-shadow: 0 0 16px rgba(59, 130, 246, 0.25);
|
||||
background: #d6f25c;
|
||||
box-shadow: 0 0 20px rgba(196, 232, 46, 0.35);
|
||||
}
|
||||
|
||||
/* Glass input */
|
||||
/* Inputs */
|
||||
.input-glass {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(238, 240, 233, 0.04);
|
||||
border: 1px solid rgba(223, 242, 178, 0.12);
|
||||
border-radius: 0.5rem;
|
||||
color: #e2e8f0;
|
||||
color: #eef0e9;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.input-glass::placeholder {
|
||||
color: rgba(148, 163, 184, 0.5);
|
||||
color: rgba(149, 157, 135, 0.55);
|
||||
}
|
||||
.input-glass:focus {
|
||||
outline: none;
|
||||
border-color: rgba(99, 102, 241, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.1);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
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);
|
||||
}
|
||||
|
||||
/* Numbers — every metric reads in tabular mono */
|
||||
.num {
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Section index label, e.g. "01 / Watchlist" */
|
||||
.section-index {
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: #6e7562;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
@@ -103,10 +135,10 @@
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(223, 242, 178, 0.12);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(223, 242, 178, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user