refactor: replace cyan accent with ember orange across entire frontend
Swap accent color from cyan (#22d3ee) to ember orange (#f97316) site-wide. Cyan caused contrast issues and felt generic — orange brings warmth and urgency fitting for a troubleshooting tool. Changes: - CSS variables: accent, accent-hover, accent-dim, accent-text, primary, ring - Warning color shifted from amber (#fbbf24) to yellow (#eab308) for semantic separation from orange accent - Brand SVGs: logo gradient updated to orange - 50+ component files: all hardcoded cyan hex values, Tailwind cyan-* classes, and rgba(34,211,238,...) glow values replaced - landing.css: all 45+ cyan references + 5 old border color fixes - DESIGN-SYSTEM.md bumped to v5 with decisions log - CLAUDE.md: all color references synced to charcoal palette + orange accent - PWA theme-color meta tag updated to match sidebar (#10121a) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -22,7 +22,7 @@
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 60%);
|
||||
background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.12) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.landing-ambient-glow::before,
|
||||
@@ -84,7 +84,7 @@
|
||||
.landing-nav-logo-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -105,7 +105,7 @@
|
||||
}
|
||||
|
||||
.landing-nav-wordmark span {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.landing-nav-links {
|
||||
@@ -159,7 +159,7 @@
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 1.25rem;
|
||||
border-radius: 8px;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
letter-spacing: -0.01em;
|
||||
border: none;
|
||||
@@ -190,7 +190,7 @@
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
margin-bottom: 2rem;
|
||||
letter-spacing: 0.03em;
|
||||
animation: landingFadeInDown 0.8s ease-out;
|
||||
@@ -201,7 +201,7 @@
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
animation: landingPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -228,7 +228,7 @@
|
||||
}
|
||||
|
||||
.landing-gradient-text {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.landing-hero-sub {
|
||||
@@ -256,7 +256,7 @@
|
||||
text-decoration: none;
|
||||
padding: 0.85rem 2rem;
|
||||
border-radius: 10px;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
letter-spacing: -0.01em;
|
||||
border: none;
|
||||
@@ -323,7 +323,7 @@
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.landing-proof-stat .label {
|
||||
@@ -378,14 +378,14 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.landing-tab-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -482,9 +482,9 @@
|
||||
}
|
||||
|
||||
.landing-preview-sidebar-item.active {
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
color: #67e8f9;
|
||||
border-left: 3px solid #22d3ee;
|
||||
background: rgba(249, 115, 22, 0.08);
|
||||
color: #fdba74;
|
||||
border-left: 3px solid #f97316;
|
||||
}
|
||||
|
||||
.landing-preview-sidebar-item .dot {
|
||||
@@ -521,7 +521,7 @@
|
||||
}
|
||||
|
||||
.landing-tree-node.root {
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -535,7 +535,7 @@
|
||||
.landing-tree-connector {
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
background: rgba(34, 211, 238, 0.2);
|
||||
background: rgba(249, 115, 22, 0.2);
|
||||
}
|
||||
|
||||
.landing-tree-branch {
|
||||
@@ -552,7 +552,7 @@
|
||||
width: calc(100% - 100px);
|
||||
transform: translateX(-50%);
|
||||
height: 2px;
|
||||
background: rgba(34, 211, 238, 0.15);
|
||||
background: rgba(249, 115, 22, 0.15);
|
||||
}
|
||||
|
||||
.landing-tree-branch-arm {
|
||||
@@ -568,7 +568,7 @@
|
||||
.landing-tree-label {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 0.6rem;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
margin-bottom: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -587,7 +587,7 @@
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
@@ -631,7 +631,7 @@
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
background: #22252e;
|
||||
border: 1px solid #2a2f3d;
|
||||
border: 1px solid #2e3240;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
@@ -718,12 +718,12 @@
|
||||
}
|
||||
|
||||
.landing-eq-operator {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.landing-eq-result {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -749,14 +749,14 @@
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
background: #22252e;
|
||||
border: 1px solid #2a2f3d;
|
||||
border: 1px solid #2e3240;
|
||||
position: relative;
|
||||
counter-increment: landing-step;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.landing-step-card:hover {
|
||||
border-color: rgba(34, 211, 238, 0.2);
|
||||
border-color: rgba(249, 115, 22, 0.2);
|
||||
}
|
||||
|
||||
.landing-step-card::before {
|
||||
@@ -764,7 +764,7 @@
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
opacity: 0.6;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@@ -814,9 +814,9 @@
|
||||
}
|
||||
|
||||
.landing-mock-node.start {
|
||||
background: rgba(34, 211, 238, 0.15);
|
||||
color: #67e8f9;
|
||||
border: 1px solid rgba(34, 211, 238, 0.2);
|
||||
background: rgba(249, 115, 22, 0.15);
|
||||
color: #fdba74;
|
||||
border: 1px solid rgba(249, 115, 22, 0.2);
|
||||
}
|
||||
|
||||
.landing-mock-node.step {
|
||||
@@ -852,7 +852,7 @@
|
||||
}
|
||||
|
||||
.landing-mock-chat-line .label {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
font-weight: 600;
|
||||
min-width: 55px;
|
||||
}
|
||||
@@ -879,7 +879,7 @@
|
||||
.landing-mock-ticket-header {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 0.6rem;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
font-weight: 600;
|
||||
padding-bottom: 0.35rem;
|
||||
border-bottom: 1px solid #2e3240;
|
||||
@@ -915,12 +915,12 @@
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
background: #22252e;
|
||||
border: 1px solid #2a2f3d;
|
||||
border: 1px solid #2e3240;
|
||||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.landing-feature-card:hover {
|
||||
border-color: rgba(34, 211, 238, 0.2);
|
||||
border-color: rgba(249, 115, 22, 0.2);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
@@ -928,12 +928,12 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
background: rgba(249, 115, 22, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.25rem;
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.landing-feature-card h3 {
|
||||
@@ -951,7 +951,7 @@
|
||||
}
|
||||
|
||||
.landing-feature-card.highlight {
|
||||
border-color: rgba(34, 211, 238, 0.15);
|
||||
border-color: rgba(249, 115, 22, 0.15);
|
||||
background: #22252e;
|
||||
grid-column: span 2;
|
||||
}
|
||||
@@ -969,7 +969,7 @@
|
||||
padding: 2.5rem 2rem;
|
||||
border-radius: 16px;
|
||||
background: #22252e;
|
||||
border: 1px solid #2a2f3d;
|
||||
border: 1px solid #2e3240;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
@@ -978,7 +978,7 @@
|
||||
}
|
||||
|
||||
.landing-pricing-card.featured {
|
||||
border-color: #22d3ee;
|
||||
border-color: #f97316;
|
||||
background: #22252e;
|
||||
position: relative;
|
||||
}
|
||||
@@ -991,7 +991,7 @@
|
||||
transform: translateX(-50%);
|
||||
padding: 4px 14px;
|
||||
border-radius: 100px;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
@@ -1029,7 +1029,7 @@
|
||||
}
|
||||
|
||||
.landing-pricing-card.featured .landing-pricing-price .amount {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.landing-pricing-price .period {
|
||||
@@ -1062,7 +1062,7 @@
|
||||
|
||||
.landing-pricing-features li::before {
|
||||
content: '\2713';
|
||||
color: #22d3ee;
|
||||
color: #f97316;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 2px;
|
||||
@@ -1083,7 +1083,7 @@
|
||||
|
||||
.landing-pricing-btn.outline {
|
||||
color: #e2e5eb;
|
||||
border: 1px solid #2a2f3d;
|
||||
border: 1px solid #2e3240;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -1094,7 +1094,7 @@
|
||||
|
||||
.landing-pricing-btn.filled {
|
||||
color: #fff;
|
||||
background: #22d3ee;
|
||||
background: #f97316;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1111,7 +1111,7 @@
|
||||
}
|
||||
|
||||
.landing-pricing-enterprise a {
|
||||
color: #67e8f9;
|
||||
color: #fdba74;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1142,7 +1142,7 @@
|
||||
.landing-testimonial-quote::before {
|
||||
content: '\201C';
|
||||
font-size: 4rem;
|
||||
color: #22d3ee;
|
||||
color: #f97316;
|
||||
opacity: 0.3;
|
||||
vertical-align: super;
|
||||
margin-right: 1rem;
|
||||
@@ -1154,7 +1154,7 @@
|
||||
.landing-testimonial-quote::after {
|
||||
content: '\201D';
|
||||
font-size: 4rem;
|
||||
color: #22d3ee;
|
||||
color: #f97316;
|
||||
opacity: 0.3;
|
||||
vertical-align: sub;
|
||||
margin-left: 1rem;
|
||||
@@ -1227,8 +1227,8 @@
|
||||
}
|
||||
|
||||
.landing-cta-email-input:focus {
|
||||
border-color: #22d3ee;
|
||||
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
|
||||
border-color: #f97316;
|
||||
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
|
||||
}
|
||||
|
||||
.landing-cta-fine-print {
|
||||
|
||||
Reference in New Issue
Block a user