chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: charcoal palette + sidebar drawer fixes

Browse Source 
- Switch from true-dark to charcoal palette (sidebar darkest, content lighter)
  Page #1a1c23, Sidebar #10121a, Card #22252e, Border #2e3240
- Update all Tailwind semantic mappings to match new palette
- Update landing page CSS hardcoded hex to new palette values
- Fix remaining hardcoded hex in SurveyResponsesPage, SessionsPanel, FlowPilotMessageBar
- Sidebar drawer starts below topbar (top: var(--topbar-h)) instead of viewport top
- Drawer section title uses amber (#fbbf24) for visual pop
- Unify all rail icons: white when inactive, cyan with bg-accent-dim when active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-22 21:39:05 +00:00
parent dfbb51b582
commit 8fd4207ee6
6 changed files with 63 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/styles/landing.css
View File

@@ -6,7 +6,7 @@
.landing-page {
font-family: 'IBM Plex Sans', sans-serif;
background: #0c0d10;
background: #1a1c23;
color: #e2e5eb;
line-height: 1.6;
overflow-x: hidden;
@@ -61,7 +61,7 @@
.landing-nav.scrolled {
background: rgba(12, 13, 16, 0.95);
border-bottom: 1px solid #1e2130;
border-bottom: 1px solid #2e3240;
}
.landing-nav-inner {
@@ -184,8 +184,8 @@
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
background: #14161d;
border: 1px solid #1e2130;
background: #22252e;
border: 1px solid #2e3240;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
font-weight: 500;
@@ -280,8 +280,8 @@
text-decoration: none;
padding: 0.85rem 2rem;
border-radius: 10px;
background: #14161d;
border: 1px solid #1e2130;
background: #22252e;
border: 1px solid #2e3240;
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
@@ -341,8 +341,8 @@
.landing-preview-window {
border-radius: 12px;
border: 1px solid #1e2130;
background: #14161d;
border: 1px solid #2e3240;
background: #22252e;
overflow: hidden;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
}
@@ -353,7 +353,7 @@
padding: 0 0 0 14px;
height: 40px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid #1e2130;
border-bottom: 1px solid #2e3240;
}
.landing-preview-tab {
@@ -365,7 +365,7 @@
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.7rem;
color: #848b9b;
border-right: 1px solid #1e2130;
border-right: 1px solid #2e3240;
background: rgba(255, 255, 255, 0.02);
position: relative;
}
@@ -409,7 +409,7 @@
padding: 4px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #1e2130;
border: 1px solid #2e3240;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.65rem;
color: #5a6170;
@@ -496,7 +496,7 @@
flex: 1;
background: rgba(255, 255, 255, 0.01);
border-radius: 12px;
border: 1px dashed #1e2130;
border: 1px dashed #2e3240;
display: flex;
align-items: center;
justify-content: center;
@@ -525,8 +525,8 @@
}
.landing-tree-node.decision {
background: #14161d;
border: 1px solid #1e2130;
background: #22252e;
border: 1px solid #2e3240;
color: #e2e5eb;
font-size: 0.7rem;
}
@@ -614,7 +614,7 @@
max-width: 1100px;
margin: 0 auto;
height: 1px;
background: #1e2130;
background: #2e3240;
}
/* ---- PROBLEM SECTION ---- */
@@ -629,7 +629,7 @@
.landing-problem-card {
padding: 2rem;
border-radius: 16px;
background: #14161d;
background: #22252e;
border: 1px solid #2a2f3d;
transition: border-color 0.3s, transform 0.3s;
}
@@ -712,8 +712,8 @@
.landing-eq-item {
padding: 0.5rem 1.25rem;
border-radius: 12px;
background: #14161d;
border: 1px solid #1e2130;
background: #22252e;
border: 1px solid #2e3240;
}
.landing-eq-operator {
@@ -747,7 +747,7 @@
.landing-step-card {
padding: 2rem;
border-radius: 16px;
background: #14161d;
background: #22252e;
border: 1px solid #2a2f3d;
position: relative;
counter-increment: landing-step;
@@ -787,8 +787,8 @@
height: 120px;
border-radius: 10px;
margin-top: 1.25rem;
background: #0c0d10;
border: 1px solid #1e2130;
background: #1a1c23;
border: 1px solid #2e3240;
display: flex;
align-items: center;
justify-content: center;
@@ -821,7 +821,7 @@
.landing-mock-node.step {
background: rgba(255, 255, 255, 0.03);
color: #848b9b;
border: 1px solid #1e2130;
border: 1px solid #2e3240;
}
.landing-mock-connector {
@@ -879,7 +879,7 @@
color: #67e8f9;
font-weight: 600;
padding-bottom: 0.35rem;
border-bottom: 1px solid #1e2130;
border-bottom: 1px solid #2e3240;
margin-bottom: 0.15rem;
}
@@ -911,7 +911,7 @@
.landing-feature-card {
padding: 2rem;
border-radius: 16px;
background: #14161d;
background: #22252e;
border: 1px solid #2a2f3d;
transition: border-color 0.3s ease, transform 0.3s ease;
}
@@ -949,7 +949,7 @@
.landing-feature-card.highlight {
border-color: rgba(34, 211, 238, 0.15);
background: #14161d;
background: #22252e;
grid-column: span 2;
}
@@ -965,7 +965,7 @@
.landing-pricing-card {
padding: 2.5rem 2rem;
border-radius: 16px;
background: #14161d;
background: #22252e;
border: 1px solid #2a2f3d;
transition: border-color 0.3s, transform 0.3s;
}
@@ -976,7 +976,7 @@
.landing-pricing-card.featured {
border-color: #22d3ee;
background: #14161d;
background: #22252e;
position: relative;
}
@@ -1210,8 +1210,8 @@
flex: 1;
padding: 0.85rem 1.25rem;
border-radius: 10px;
border: 1px solid #1e2130;
background: #14161d;
border: 1px solid #2e3240;
background: #22252e;
color: #e2e5eb;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
@@ -1248,7 +1248,7 @@
/* ---- FOOTER ---- */
.landing-footer {
border-top: 1px solid #1e2130;
border-top: 1px solid #2e3240;
padding: 3rem 2rem;
}
@@ -1376,7 +1376,7 @@
gap: 0;
padding: 0.5rem 1.5rem 1.5rem;
background: rgba(12, 13, 16, 0.98);
border-bottom: 1px solid #1e2130;
border-bottom: 1px solid #2e3240;
}
.landing-mobile-menu a {