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

merge: integrate fix/color-audit-cleanup into dashboard redesign

Browse Source 
Resolve focus ring conflict in StartSessionInput — keep explicit
rgba values over Tailwind primary/20 for consistency with design system.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-27 06:09:33 +00:00
parent 4be8388a44 34b0f2ade9
commit b7a126299a
51 changed files with 209 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/assistant/ConcludeSessionModal.tsx
View File

@@ -152,7 +152,7 @@ export function ConcludeSessionModal({
{/* Header */}
<div
className="flex items-center justify-between px-6 py-4 border-b shrink-0"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-accent-dim flex items-center justify-center">
@@ -178,7 +178,7 @@ export function ConcludeSessionModal({
{/* Step indicator */}
<div
className="px-6 py-3 border-b shrink-0 flex items-center gap-2"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
{(['select-outcome', 'add-notes', 'summary'] as ModalStep[]).map((s, i) => (
<div key={s} className="flex items-center gap-2">
@@ -283,7 +283,7 @@ export function ConcludeSessionModal({
}
rows={4}
className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
/>
</div>
@@ -309,7 +309,7 @@ export function ConcludeSessionModal({
{/* Generated summary */}
<div
className="rounded-xl border p-5 bg-card"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
<div className="flex items-center justify-between mb-3">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
@@ -328,7 +328,7 @@ export function ConcludeSessionModal({
{/* Footer actions */}
<div
className="px-6 py-4 border-t shrink-0 flex items-center justify-between gap-3"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
{step === 'select-outcome' && (
<>

2
frontend/src/components/common/BrandLogo.tsx
View File

@@ -6,7 +6,7 @@ interface BrandLogoProps {
}
/**
* Brand logo mark: gradient cyan square with rounded corners
* Brand logo mark: gradient orange square with rounded corners
* containing a white lightning bolt.
*/
export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {

2
frontend/src/components/common/RichTextInput.tsx
View File

@@ -234,7 +234,7 @@ export function RichTextInput({
disabled={disabled}
className={cn(
'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
'focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none transition-colors',
isDragOver && 'border-primary/50 bg-primary/5',
disabled && 'opacity-50 cursor-not-allowed'
)}

8
frontend/src/components/copilot/CopilotPanel.tsx
View File

@@ -96,13 +96,13 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
background: 'rgba(16, 17, 20, 0.95)',
backdropFilter: 'var(--glass-blur)',
WebkitBackdropFilter: 'var(--glass-blur)',
borderColor: 'var(--glass-border)',
borderColor: 'var(--color-border-default)',
}}
>
{/* Header */}
<div
className="flex items-center justify-between px-4 py-3 border-b shrink-0"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
<div className="flex items-center gap-2">
<Sparkles size={16} className="text-primary" />
@@ -155,7 +155,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
</div>
{/* Input */}
<div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
<div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
<div className="flex items-end gap-2">
<textarea
ref={inputRef}
@@ -165,7 +165,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
placeholder="Ask about this step..."
rows={1}
className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
disabled={loading || initializing}
/>
<button

4
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
View File

@@ -23,7 +23,7 @@ export function KnowledgeBaseCards() {
<div className="card-flat">
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
style={{ borderBottom: '1px solid var(--color-border-default)' }}
>
<h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
<button
@@ -33,7 +33,7 @@ export function KnowledgeBaseCards() {
Browse <ArrowRight size={10} />
</button>
</div>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
{items.map((item) => (
<button
key={item.label}

4
frontend/src/components/dashboard/OpenSessions.tsx
View File

@@ -18,7 +18,7 @@ interface OpenSessionsProps {
export function OpenSessions({ sessions }: OpenSessionsProps) {
return (
<div className="card-flat flex flex-col h-full">
<div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
View All
@@ -35,7 +35,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
key={session.id}
className="flex items-center gap-3 px-5 py-3"
style={{
borderBottom: i < sessions.length - 1 ? '1px solid var(--glass-border)' : undefined,
borderBottom: i < sessions.length - 1 ? '1px solid var(--color-border-default)' : undefined,
}}
>
<span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />

4
frontend/src/components/dashboard/PendingEscalations.tsx
View File

@@ -33,7 +33,7 @@ export function PendingEscalations() {
>
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
style={{ borderBottom: '1px solid var(--color-border-default)' }}
>
<div className="flex items-center gap-2">
<AlertTriangle size={14} className="text-amber-400" />
@@ -58,7 +58,7 @@ export function PendingEscalations() {
className="flex items-center gap-3 px-5 py-3"
style={{
borderBottom: i < Math.min(escalations.length, 3) - 1
? '1px solid var(--glass-border)'
? '1px solid var(--color-border-default)'
: undefined,
}}
>

2
frontend/src/components/dashboard/QuickActions.tsx
View File

@@ -13,7 +13,7 @@ export function QuickActions() {
return (
<div className="card-flat flex flex-col h-full">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
</div>
<div className="flex-1 flex flex-col justify-between p-3 gap-2">

4
frontend/src/components/dashboard/RecentActivity.tsx
View File

@@ -25,7 +25,7 @@ const DEFAULT_ACTIVITIES: ActivityItem[] = [
export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
return (
<div className="card-flat">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
</div>
<div>
@@ -35,7 +35,7 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
className="flex items-start gap-3 px-5 py-3 fade-in"
style={{
animationDelay: `${750 + i * 40}ms`,
borderBottom: i < activities.length - 1 ? '1px solid var(--glass-border)' : undefined,
borderBottom: i < activities.length - 1 ? '1px solid var(--color-border-default)' : undefined,
}}
>
<span

2
frontend/src/components/dashboard/SessionsPanel.tsx
View File

@@ -22,7 +22,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
return (
<div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
View All

2
frontend/src/components/dashboard/StartSessionInput.tsx
View File

@@ -278,7 +278,7 @@ export function StartSessionInput() {
onChange={(e) => setLogContent(e.target.value)}
placeholder="Paste event viewer logs, error messages, PowerShell output..."
rows={4}
className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
/>
</div>
)}

4
frontend/src/components/dashboard/TeamSummary.tsx
View File

@@ -28,7 +28,7 @@ export function TeamSummary() {
<div className="card-flat">
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
style={{ borderBottom: '1px solid var(--color-border-default)' }}
>
<h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
<button
@@ -38,7 +38,7 @@ export function TeamSummary() {
Manage <ArrowRight size={10} />
</button>
</div>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
{items.map((item) => (
<button
key={item.label}

6
frontend/src/components/dashboard/WeeklyCalendar.tsx
View File

@@ -35,7 +35,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
return (
<div className="card-flat flex flex-col h-full">
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<Calendar size={16} className="text-muted-foreground" />
<h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
</div>
@@ -47,13 +47,13 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
key={day.dateStr}
className="flex-1 flex flex-col min-h-0"
style={{
borderRight: i < 4 ? '1px solid var(--glass-border)' : undefined,
borderRight: i < 4 ? '1px solid var(--color-border-default)' : undefined,
}}
>
<div
className="px-2 py-2 text-center"
style={{
borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--glass-border)',
borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--color-border-default)',
}}
>
<span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-orange-400' : 'text-muted-foreground'}`}>

4
frontend/src/components/editor-ai/ChatTab.tsx
View File

@@ -68,7 +68,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
</div>
{/* Input */}
<div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
<div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
<div className="flex items-end gap-2">
<textarea
ref={inputRef}
@@ -78,7 +78,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
placeholder="Ask AI to help..."
rows={1}
className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
disabled={isLoading}
/>
<button

6
frontend/src/components/editor-ai/EditorAIPanel.tsx
View File

@@ -50,14 +50,14 @@ export function EditorAIPanel({
background: 'rgba(16, 17, 20, 0.95)',
backdropFilter: 'var(--glass-blur)',
WebkitBackdropFilter: 'var(--glass-blur)',
borderColor: 'var(--glass-border)',
borderColor: 'var(--color-border-default)',
animation: 'slideInRight 200ms ease-out',
}}
>
{/* Header */}
<div
className="flex items-center justify-between px-4 py-3 border-b shrink-0"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
<div className="flex items-center gap-2">
<Sparkles size={16} className="text-primary" />
@@ -74,7 +74,7 @@ export function EditorAIPanel({
<NodeSummary node={focalNode} flowName={flowName} flowType={flowType} nodeCount={nodeCount} />
{/* Tabs */}
<div className="flex border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
<div className="flex border-b shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
<button
onClick={() => setActiveTab('chat')}
className={cn(

4
frontend/src/components/editor-ai/NodeSummary.tsx
View File

@@ -22,7 +22,7 @@ const NODE_COLORS: Record<string, string> = {
export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummaryProps) {
if (!node) {
return (
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--color-border-default)' }}>
<div className="flex items-center gap-2">
<Layout className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium text-foreground truncate">
@@ -41,7 +41,7 @@ export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummary
const colorClass = NODE_COLORS[node.type] || 'text-muted-foreground'
return (
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--color-border-default)' }}>
<div className="flex items-center gap-2">
<Icon className={`h-3.5 w-3.5 ${colorClass}`} />
<span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">

4
frontend/src/components/flowpilot/FlowPilotIntake.tsx
View File

@@ -166,7 +166,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
value={additionalContext}
onChange={(e) => setAdditionalContext(e.target.value)}
placeholder="Add extra context (optional) — e.g. 'User called back and said it's also affecting their second monitor'"
className="mt-3 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
className="mt-3 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
rows={3}
/>
</div>
@@ -229,7 +229,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
value={logContent}
onChange={(e) => setLogContent(e.target.value)}
placeholder="Paste log output, error messages, or Event Viewer entries here..."
className="w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
className="w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
rows={6}
/>
)}

4
frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
View File

@@ -194,7 +194,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
? 'border-border/50 opacity-50'
: isDragOver
? 'border-primary/50 bg-primary/5'
: 'border-border focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
: 'border-border focus-within:border-[rgba(249,115,22,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
)}
style={{ background: 'var(--color-bg-card)' }}
>
@@ -275,7 +275,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
onChange={(e) => setLogContent(e.target.value)}
placeholder="Paste event viewer logs, error messages, PowerShell output..."
rows={3}
className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
/>
</div>
)}

2
frontend/src/components/flowpilot/FlowPilotOptions.tsx
View File

@@ -29,7 +29,7 @@ export function FlowPilotOptions({ options, onSelect, disabled }: FlowPilotOptio
disabled={disabled}
className={cn(
'group relative rounded-xl border p-3 sm:p-4 text-left transition-all min-h-[44px]',
'hover:border-[rgba(6,182,212,0.3)] hover:shadow-[0_0_20px_rgba(6,182,212,0.08)]',
'hover:border-[rgba(249,115,22,0.3)] hover:shadow-[0_0_20px_rgba(249,115,22,0.08)]',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',
isSelected
? 'border-primary/40 bg-accent-dim'

2
frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
View File

@@ -96,7 +96,7 @@ export function InSessionScriptGenerator({
<input
value={value}
onChange={(e) => setParams(prev => ({ ...prev, [key]: e.target.value }))}
className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
/>
</div>
))}

4
frontend/src/components/flowpilot/ProposalDetail.tsx
View File

@@ -60,7 +60,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
return (
<div className="flex h-full flex-col">
{/* Header */}
<div className="border-b px-6 py-4" style={{ borderColor: 'var(--glass-border)' }}>
<div className="border-b px-6 py-4" style={{ borderColor: 'var(--color-border-default)' }}>
<h2 className="font-heading text-lg font-semibold text-foreground">{proposal.title}</h2>
{proposal.description && (
<p className="mt-1 text-sm text-muted-foreground">{proposal.description}</p>
@@ -187,7 +187,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
value={reviewNotes}
onChange={(e) => setReviewNotes(e.target.value)}
placeholder="Reviewer notes (optional)"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
/>
{/* Action buttons */}

2
frontend/src/components/flowpilot/SessionBriefing.tsx
View File

@@ -145,7 +145,7 @@ export function SessionBriefing({
value={freshContext}
onChange={(e) => setFreshContext(e.target.value)}
placeholder="What additional information do you have, or what would you like to investigate first?"
className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
rows={3}
autoFocus
/>

2
frontend/src/components/kb-accelerator/ReviewScreen.tsx
View File

@@ -89,7 +89,7 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
{/* Nodes panel */}
<div className="flex flex-col card-flat overflow-hidden">
<div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
<div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
<span className="text-sm font-medium text-foreground">Generated Flow</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
{kbImport.target_type === 'troubleshooting' ? 'Troubleshooting' : 'Project'}

2
frontend/src/components/kb-accelerator/SourcePanel.tsx
View File

@@ -25,7 +25,7 @@ export function SourcePanel({ sourceText, sourceFormat, highlightExcerpt }: Sour
return (
<div className="card-flat flex flex-col h-full">
<div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
<div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
<FileText size={16} className="text-muted-foreground" />
<span className="text-sm font-medium text-foreground">Source Document</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">

4
frontend/src/components/script-builder/ScriptBuilderInput.tsx
View File

@@ -44,7 +44,7 @@ export function ScriptBuilderInput({
const canSend = value.trim().length > 0 && !disabled
return (
<div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--glass-border)' }}>
<div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
<textarea
ref={textareaRef}
value={value}
@@ -56,7 +56,7 @@ export function ScriptBuilderInput({
className={cn(
"flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
"bg-card border border-border text-foreground placeholder:text-muted-foreground",
"focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors",
"focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors",
"disabled:opacity-50"
)}
style={{ maxHeight: 120 }}

2
frontend/src/components/script-editor/ParameterCard.tsx
View File

@@ -104,7 +104,7 @@ export function ParameterCard({
value={param.type}
onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
disabled={disabled}
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
>
{PARAM_TYPES.map(t => (
<option key={t.value} value={t.value}>{t.label}</option>

2
frontend/src/components/script-editor/ParameterDetectorStepper.tsx
View File

@@ -174,7 +174,7 @@ export function ParameterDetectorStepper({
<select
value={type}
onChange={e => setType(e.target.value as ScriptParameter['type'])}
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)]"
>
{PARAM_TYPES.map(t => (
<option key={t.value} value={t.value}>{t.label}</option>

2
frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
View File

@@ -159,7 +159,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
onChange={e => { setJsonText(e.target.value); setJsonError(null) }}
disabled={disabled}
spellCheck={false}
className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-card border border-border rounded-xl p-4 text-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-card border border-border rounded-xl p-4 text-foreground focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
placeholder='{ "parameters": [...] }'
/>
{jsonError && (

4
frontend/src/components/script-editor/ScriptTemplateEditor.tsx
View File

@@ -356,7 +356,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<select
value={form.category_id}
onChange={e => updateField('category_id', e.target.value)}
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)]"
>
<option value="">Select category…</option>
{categories.map(c => (
@@ -369,7 +369,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<select
value={form.complexity}
onChange={e => updateField('complexity', e.target.value as FormState['complexity'])}
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)]"
>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>

2
frontend/src/components/script-editor/ScriptTemplateListView.tsx
View File

@@ -105,7 +105,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
placeholder="Search templates…"
className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)]"
className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(249,115,22,0.3)] focus:ring-1 focus:ring-[rgba(249,115,22,0.2)]"
/>
</div>

2
frontend/src/components/scripts/ScriptParameterField.tsx
View File

@@ -93,7 +93,7 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
value={value}
onChange={handleChange}
disabled={disabled}
className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="">Select…</option>
{(param.options ?? []).map(opt => (

4
frontend/src/components/session/AddSupportingDataModal.tsx
View File

@@ -166,7 +166,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
'focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
</div>
@@ -186,7 +186,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
className={cn(
'w-full resize-y rounded-md border border-border bg-card px-3 py-2 text-sm',
'font-mono text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
'focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
</div>

2
frontend/src/components/settings/BrandingSettings.tsx
View File

@@ -154,7 +154,7 @@ export function BrandingSettings({ teamId }: BrandingSettingsProps) {
className={cn(
'mt-2 w-full max-w-md rounded-md border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
'focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
</div>

2
frontend/src/components/sidebar/ActivityItem.tsx
View File

@@ -49,7 +49,7 @@ export function ActivityItem({
className={cn(
'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors',
'hover:bg-[rgba(255,255,255,0.03)]',
isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-text-primary text-[0.8rem]'
)}
title={`${treeName}${ticketNumber ? ` (${ticketNumber})` : ''} — click to resume`}
aria-label={

6
frontend/src/components/tree-editor/GlowEdge.tsx
View File

@@ -52,7 +52,7 @@ export function GlowEdgeDefs() {
<stop offset="100%" stopColor="rgba(255,255,255,0.08)" />
</linearGradient>
{/* Downstream: cyan brand */}
{/* Downstream: accent brand */}
<linearGradient id="edge-gradient-downstream" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#ea580c" />
<stop offset="100%" stopColor="#f97316" />
@@ -72,7 +72,7 @@ export function GlowEdgeDefs() {
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="glow-cyan" x="-30%" y="-30%" width="160%" height="160%">
<filter id="glow-accent" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
@@ -120,7 +120,7 @@ function GlowEdgeComponent({
const filterId = edgeState === 'default' ? 'glow-default'
: edgeState === 'upstream' ? 'glow-amber'
: 'glow-cyan'
: 'glow-accent'
return (
<>

2
frontend/src/constants/categoryColors.ts
View File

@@ -4,7 +4,7 @@ export const CATEGORY_COLORS = [
'#f59e0b', // amber
'#ef4444', // red
'#8b5cf6', // violet
'#ea580c', // cyan
'#ea580c', // deep orange
'#ec4899', // pink
'#f97316', // orange
'#14b8a6', // teal

4
frontend/src/pages/AssistantChatPage.tsx
View File

@@ -593,7 +593,7 @@ export default function AssistantChatPage() {
'relative rounded-xl border transition-all',
loading ? 'border-border/50 opacity-50' :
isDragOver ? 'border-primary/50 bg-primary/5' :
'border-border focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
'border-border focus-within:border-[rgba(249,115,22,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
)} style={{ background: 'var(--color-bg-card)' }}>
{/* Drag overlay */}
{isDragOver && (
@@ -663,7 +663,7 @@ export default function AssistantChatPage() {
onChange={(e) => setLogContent(e.target.value)}
placeholder="Paste event viewer logs, error messages, PowerShell output..."
rows={3}
className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
/>
</div>
)}

16
frontend/src/pages/FlowPilotAnalyticsPage.tsx
View File

@@ -256,16 +256,16 @@ export default function FlowPilotAnalyticsPage() {
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
<XAxis
dataKey="date"
tick={{ fill: '#8891a0', fontSize: 10 }}
tick={{ fill: '#848b9b', fontSize: 10 }}
tickFormatter={(d) => new Date(d).toLocaleDateString([], { month: 'short', day: 'numeric' })}
/>
<YAxis
tick={{ fill: '#8891a0', fontSize: 10 }}
tick={{ fill: '#848b9b', fontSize: 10 }}
tickFormatter={(v) => `${Math.round(v)}m`}
/>
<Tooltip
contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
labelStyle={{ color: '#f8fafc' }}
contentStyle={{ background: 'var(--color-bg-card)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
labelStyle={{ color: '#f0f2f5' }}
formatter={(v: number | undefined) => [`${Math.round(v ?? 0)}m`, 'MTTR']}
/>
<Area
@@ -299,16 +299,16 @@ export default function FlowPilotAnalyticsPage() {
<ResponsiveContainer width="100%" height={220}>
<BarChart data={dashboard.sessions_by_domain} layout="vertical">
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
<XAxis type="number" tick={{ fill: '#8891a0', fontSize: 10 }} />
<XAxis type="number" tick={{ fill: '#848b9b', fontSize: 10 }} />
<YAxis
type="category"
dataKey="domain"
tick={{ fill: '#8891a0', fontSize: 10 }}
tick={{ fill: '#848b9b', fontSize: 10 }}
width={100}
/>
<Tooltip
contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
labelStyle={{ color: '#f8fafc' }}
contentStyle={{ background: 'var(--color-bg-card)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
labelStyle={{ color: '#f0f2f5' }}
/>
<Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
<Bar dataKey="escalated" name="Escalated" fill="#eab308" radius={[0, 4, 4, 0]} />

2
frontend/src/pages/FlowPilotSessionPage.tsx
View File

@@ -158,7 +158,7 @@ export default function FlowPilotSessionPage() {
{/* Header */}
<div
className="flex items-center gap-3 border-b px-5 py-3 shrink-0"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
>
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-500/10">
<Sparkles size={14} className="text-amber-400" />

2
frontend/src/pages/GuideDetailPage.tsx
View File

@@ -46,7 +46,7 @@ export default function GuideDetailPage() {
<p className="text-sm text-muted-foreground">{guide.summary}</p>
</div>
</div>
<div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--glass-border)' }}>
<div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
{guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
</span>

26
frontend/src/pages/LoginPage.tsx
View File

@@ -44,32 +44,6 @@ export function LoginPage() {
<>
<PageMeta title="Sign In" description="Sign in to your ResolutionFlow account" />
<div className="flex min-h-screen items-center justify-center bg-background px-4">
{/* Atmosphere orbs */}
<div
className="pointer-events-none fixed z-0"
style={{
top: '-120px',
right: '-80px',
width: '600px',
height: '600px',
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%)',
filter: 'blur(60px)',
}}
/>
<div
className="pointer-events-none fixed z-0"
style={{
bottom: '-100px',
left: '-60px',
width: '500px',
height: '500px',
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%)',
filter: 'blur(60px)',
}}
/>
<div className="relative z-10 w-full max-w-md space-y-8">
<div className="text-center">
<div className="mb-4 flex justify-center sm:mb-6">

12
frontend/src/pages/PublicTemplatesPage.tsx
View File

@@ -157,17 +157,11 @@ export default function PublicTemplatesPage() {
/>
<div className="min-h-screen bg-background text-foreground">
{/* Ambient orbs */}
{/* Subtle ambient glow */}
<div
className="fixed top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
style={{
background: 'radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%)',
}}
/>
<div
className="fixed bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
style={{
background: 'radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 70%)',
background: 'radial-gradient(circle, rgba(249,115,22,0.05) 0%, transparent 70%)',
}}
/>
@@ -217,7 +211,7 @@ export default function PublicTemplatesPage() {
placeholder="Search templates..."
value={searchQuery}
onChange={(e) => handleSearchChange(e.target.value)}
className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors"
/>
</div>
</div>

2
frontend/src/pages/ReviewQueuePage.tsx
View File

@@ -87,7 +87,7 @@ export default function ReviewQueuePage() {
return (
<div className="flex h-full flex-col lg:flex-row overflow-hidden">
{/* Left panel — Proposal list */}
<div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
<div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--color-border-default)' }}>
{/* Header */}
<div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', }}>
<div className="flex items-center justify-between">

2
frontend/src/pages/ScriptBuilderPage.tsx
View File

@@ -124,7 +124,7 @@ export default function ScriptBuilderPage() {
return (
<div className="flex flex-col h-full min-h-0">
{/* Header with language selector */}
<div className="shrink-0 px-6 py-4 border-b" style={{ borderColor: 'var(--glass-border)' }}>
<div className="shrink-0 px-6 py-4 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="flex items-center justify-center w-9 h-9 rounded-xl bg-[rgba(232,121,249,0.1)]">

48
frontend/src/pages/SurveyPage.tsx
View File

@@ -275,11 +275,11 @@ export default function SurveyPage() {
<div className="min-h-screen bg-background text-foreground">
<div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
<div className="absolute -top-32 right-0 h-[500px] w-[500px] rounded-full opacity-[0.03]" style={{ background: 'radial-gradient(circle, var(--color-primary), transparent 70%)' }} />
<div className="absolute -bottom-32 left-0 h-[400px] w-[400px] rounded-full opacity-[0.02]" style={{ background: 'radial-gradient(circle, #a855f7, transparent 70%)' }} />
<div className="absolute -bottom-32 left-0 h-[400px] w-[400px] rounded-full opacity-[0.02]" style={{ background: 'radial-gradient(circle, var(--color-accent), transparent 70%)' }} />
</div>
<div className="relative z-10 mx-auto max-w-[680px] px-4 sm:px-5">
<div className="text-center pt-20 sm:pt-32 animate-fade-in-up">
<div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(6, 182, 212, 0.1)' }}>
<div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(249, 115, 22, 0.10)' }}>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
</div>
<h2 className="font-heading text-2xl font-bold mb-2.5">Already Submitted</h2>
@@ -309,20 +309,8 @@ export default function SurveyPage() {
title="Product Survey"
description="Help shape the future of ResolutionFlow by sharing your feedback"
/>
{/* Atmosphere orbs */}
<div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
<div
className="absolute"
style={{ top: '-200px', left: '-100px', width: '600px', height: '600px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.03) 40%, transparent 70%)', filter: 'blur(80px)' }}
/>
<div
className="absolute"
style={{ bottom: '-150px', right: '-100px', width: '500px', height: '500px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%)', filter: 'blur(80px)' }}
/>
</div>
{/* Top bar */}
<div className="sticky top-0 z-50" style={{ WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
<div className="sticky top-0 z-50" style={{ background: 'rgba(26, 28, 35, 0.95)', borderBottom: '1px solid var(--color-border-default)' }}>
<div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-4 py-3 sm:px-5 sm:py-3.5">
<a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2 sm:gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline shrink-0">
<BrandLogo size="sm" />
@@ -341,7 +329,7 @@ export default function SurveyPage() {
{/* Hero — visible only on first slide */}
{currentSlide === 0 && !isComplete && (
<div className="text-center pt-10 pb-8 sm:pt-[72px] sm:pb-10 animate-fade-in-up">
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-semibold font-sans text-xs uppercase tracking-widest mb-4 sm:mb-5" style={{ background: 'rgba(6, 182, 212, 0.1)', border: '1px solid rgba(6, 182, 212, 0.15)', color: 'var(--color-primary)' }}>
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-semibold font-sans text-xs uppercase tracking-widest mb-4 sm:mb-5" style={{ background: 'rgba(249, 115, 22, 0.10)', border: '1px solid rgba(249, 115, 22, 0.15)', color: 'var(--color-primary)' }}>
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
FlowPilot Research
</div>
@@ -444,9 +432,9 @@ export default function SurveyPage() {
onChange={e => setEmailInput(e.target.value)}
placeholder="your@email.com"
className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-foreground placeholder:text-text-muted focus:outline-hidden"
style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)' }}
style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--color-border-default)' }}
onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)' }}
onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)' }}
onBlur={e => { e.currentTarget.style.borderColor = 'var(--color-border-default)' }}
disabled={emailSending}
/>
<button
@@ -519,7 +507,7 @@ export default function SurveyPage() {
function ScenarioBox({ scenario }: { scenario: { title: string; symptom: string; details: string } }) {
return (
<div className="rounded-lg p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.03))', border: '1px solid color-mix(in srgb, var(--color-primary) 12%, transparent)' }}>
<div className="rounded-lg p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'rgba(249, 115, 22, 0.04)', border: '1px solid color-mix(in srgb, var(--color-primary) 12%, transparent)' }}>
<div className="font-sans text-xs text-[10px] uppercase tracking-widest mb-2 font-semibold" style={{ color: 'var(--color-primary)' }}>{scenario.title}</div>
<div className="sm:flex gap-2 mb-1">
<span className="text-muted-foreground font-medium whitespace-nowrap">Symptom:</span>
@@ -549,12 +537,12 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
onClick={() => setAnswer(q.id, opt)}
className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none"
style={{
background: answer === opt ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
border: `1px solid ${answer === opt ? 'var(--color-primary)' : 'var(--glass-border)'}`,
background: answer === opt ? 'rgba(249, 115, 22, 0.10)' : 'rgba(16, 17, 20, 0.6)',
border: `1px solid ${answer === opt ? 'var(--color-primary)' : 'var(--color-border-default)'}`,
color: answer === opt ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
}}
>
<div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? 'var(--color-primary)' : 'var(--glass-border)'}` }}>
<div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? 'var(--color-primary)' : 'var(--color-border-default)'}` }}>
{answer === opt && <div className="w-2 h-2 rounded-full" style={{ background: 'var(--color-primary)' }} />}
</div>
<span className="leading-snug">{opt}</span>
@@ -576,12 +564,12 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
}}
className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none"
style={{
background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`,
background: selected ? 'rgba(249, 115, 22, 0.10)' : 'rgba(16, 17, 20, 0.6)',
border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--color-border-default)'}`,
color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
}}
>
<div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`, background: selected ? 'var(--color-primary)' : 'transparent', color: selected ? 'white' : 'transparent' }}>
<div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? 'var(--color-primary)' : 'var(--color-border-default)'}`, background: selected ? 'var(--color-primary)' : 'transparent', color: selected ? 'white' : 'transparent' }}>
{'\u2713'}
</div>
<span className="leading-snug">{opt}</span>
@@ -603,10 +591,10 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-foreground leading-relaxed resize-y transition-all duration-200 placeholder:text-text-muted focus:outline-hidden"
style={{
background: 'rgba(16, 17, 20, 0.6)',
border: '1px solid var(--glass-border)',
border: '1px solid var(--color-border-default)',
}}
onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(6, 182, 212, 0.1)' }}
onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)'; e.currentTarget.style.boxShadow = 'none' }}
onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(249, 115, 22, 0.10)' }}
onBlur={e => { e.currentTarget.style.borderColor = 'var(--color-border-default)'; e.currentTarget.style.boxShadow = 'none' }}
/>
)}
@@ -729,8 +717,8 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
onTouchStart={() => handleTouchStart(idx)}
className="flex items-center gap-2.5 sm:gap-3 px-3 py-3 sm:px-4 sm:py-2.5 rounded-[9px] text-[13px] sm:text-sm transition-all duration-150 select-none"
style={{
background: overIdx === idx ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
border: `1px solid ${overIdx === idx || draggingIdx === idx ? 'var(--color-primary)' : 'var(--glass-border)'}`,
background: overIdx === idx ? 'rgba(249, 115, 22, 0.10)' : 'rgba(16, 17, 20, 0.6)',
border: `1px solid ${overIdx === idx || draggingIdx === idx ? 'var(--color-primary)' : 'var(--color-border-default)'}`,
opacity: draggingIdx === idx ? 0.5 : 1,
cursor: 'grab',
color: 'var(--color-muted-foreground)',

18
frontend/src/pages/SurveyThankYouPage.tsx
View File

@@ -6,20 +6,8 @@ export default function SurveyThankYouPage() {
<>
<PageMeta title="Thank You" description="Thank you for your feedback on ResolutionFlow" />
<div className="min-h-screen bg-background text-foreground">
{/* Atmosphere orbs */}
<div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
<div
className="absolute"
style={{ top: '-200px', left: '-100px', width: '600px', height: '600px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.03) 40%, transparent 70%)', filter: 'blur(80px)' }}
/>
<div
className="absolute"
style={{ bottom: '-150px', right: '-100px', width: '500px', height: '500px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0.02) 40%, transparent 70%)', filter: 'blur(80px)' }}
/>
</div>
{/* Top bar */}
<div className="sticky top-0 z-50" style={{ WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
<div className="sticky top-0 z-50" style={{ background: 'rgba(26, 28, 35, 0.95)', borderBottom: '1px solid var(--color-border-default)' }}>
<div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-5 py-3.5">
<a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline">
<BrandLogo size="sm" />
@@ -31,7 +19,7 @@ export default function SurveyThankYouPage() {
<div className="relative z-10 mx-auto max-w-[680px] px-5">
<div className="text-center pt-[120px] animate-fade-in-up">
{/* Success icon */}
<div className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ background: 'rgba(52, 211, 153, 0.1)', border: '1px solid rgba(52, 211, 153, 0.15)' }}>
<div className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ background: 'var(--color-success-dim)', border: '1px solid rgba(52, 211, 153, 0.15)' }}>
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="oklch(0.76 0.15 163)" strokeWidth="2">
<path d="M20 6L9 17l-5-5"/>
</svg>
@@ -48,7 +36,7 @@ export default function SurveyThankYouPage() {
</p>
{/* Divider */}
<div className="mx-auto w-12 h-px mb-10" style={{ background: 'var(--glass-border)' }} />
<div className="mx-auto w-12 h-px mb-10" style={{ background: 'var(--color-border-default)' }} />
{/* Feedback callout */}
<div

4
frontend/src/pages/account/ChatRetentionSettingsPage.tsx
View File

@@ -74,7 +74,7 @@ export default function ChatRetentionSettingsPage() {
min={1}
max={365}
className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
/>
<p className="text-xs text-muted-foreground mt-1">
Chats older than this will be automatically deleted (1-365 days)
@@ -92,7 +92,7 @@ export default function ChatRetentionSettingsPage() {
min={10}
max={10000}
className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
style={{ borderColor: 'var(--color-border-default)' }}
/>
<p className="text-xs text-muted-foreground mt-1">
When this limit is exceeded, oldest unpinned chats are deleted

4
frontend/src/pages/account/IntegrationsPage.tsx
View File

@@ -813,7 +813,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
className={cn(
'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
'border-border focus:border-[rgba(249,115,22,0.3)] focus:outline-none',
!currentMapping && 'text-muted-foreground'
)}
>
@@ -1084,7 +1084,7 @@ function SettingSelect({
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none disabled:opacity-50"
>
{options.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option>

4
frontend/src/pages/admin/GalleryManagementPage.tsx
View File

@@ -90,7 +90,7 @@ function SortOrderInput({
}}
className={cn(
'w-20 rounded-[8px] border border-border bg-card px-2 py-1 text-sm text-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
'focus:border-[rgba(249,115,22,0.3)] focus:outline-none',
disabled && 'cursor-not-allowed opacity-50',
)}
/>
@@ -125,7 +125,7 @@ function FilterBar({
onChange={e => onSearchChange(e.target.value)}
className={cn(
'w-full rounded-lg border border-border bg-card pl-9 pr-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
'focus:border-[rgba(249,115,22,0.3)] focus:outline-none',
)}
/>
</div>

10
frontend/src/pages/admin/SurveyResponsesPage.tsx
View File

@@ -91,7 +91,7 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
className="px-6 py-5"
style={{
background: 'rgba(0, 0, 0, 0.15)',
borderTop: '1px solid rgba(6, 182, 212, 0.1)',
borderTop: '1px solid rgba(249, 115, 22, 0.1)',
}}
>
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
@@ -101,7 +101,7 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
className="rounded-lg p-4"
style={{
background: 'var(--color-bg-card)',
border: '1px solid var(--glass-border)',
border: '1px solid var(--color-border-default)',
}}
>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-primary mb-1">
@@ -223,7 +223,7 @@ function ResponseRow({
<div className="fixed inset-0 z-40" onClick={() => setShowMenu(false)} />
<div
className="absolute right-3 top-full z-50 mt-1 w-44 rounded-xl py-1 shadow-xl"
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--glass-border)', }}
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)', }}
>
<button
onClick={() => { onMarkRead(); setShowMenu(false) }}
@@ -239,7 +239,7 @@ function ResponseRow({
{response.archived_at ? <ArchiveRestore className="h-3.5 w-3.5" /> : <Archive className="h-3.5 w-3.5" />}
{response.archived_at ? 'Unarchive' : 'Archive'}
</button>
<div className="my-1 border-t" style={{ borderColor: 'var(--glass-border)' }} />
<div className="my-1 border-t" style={{ borderColor: 'var(--color-border-default)' }} />
<button
onClick={() => { onDelete(); setShowMenu(false) }}
className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-rose-400 hover:bg-rose-500/10 transition-colors"
@@ -500,7 +500,7 @@ export default function SurveyResponsesPage() {
{selectedIds.size > 0 && (
<div
className="flex items-center gap-3 rounded-xl px-4 py-2.5"
style={{ background: 'rgba(6, 182, 212, 0.08)', border: '1px solid rgba(6, 182, 212, 0.15)' }}
style={{ background: 'rgba(249, 115, 22, 0.08)', border: '1px solid rgba(249, 115, 22, 0.15)' }}
>
<span className="text-sm text-primary font-medium">
{selectedIds.size} selected

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

@@ -6,8 +6,8 @@
.landing-page {
font-family: 'IBM Plex Sans', sans-serif;
background: #1a1c23;
color: #e2e5eb;
background: var(--color-bg-page);
color: var(--color-text-primary);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
@@ -61,8 +61,8 @@
}
.landing-nav.scrolled {
background: rgba(12, 13, 16, 0.95);
border-bottom: 1px solid #2e3240;
background: rgba(26, 28, 35, 0.95);
border-bottom: 1px solid var(--color-border-default);
}
.landing-nav-inner {
@@ -84,7 +84,7 @@
.landing-nav-logo-icon {
width: 36px;
height: 36px;
background: #f97316;
background: var(--color-accent);
border-radius: 10px;
display: flex;
align-items: center;
@@ -100,12 +100,12 @@
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: #e2e5eb;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
.landing-nav-wordmark span {
color: #fdba74;
color: var(--color-accent-text);
}
.landing-nav-links {
@@ -120,7 +120,7 @@
.landing-nav-links a {
font-size: 0.875rem;
font-weight: 500;
color: #848b9b;
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s;
letter-spacing: 0.01em;
@@ -128,7 +128,7 @@
}
.landing-nav-links a:hover {
color: #e2e5eb;
color: var(--color-text-primary);
}
.landing-nav-cta {
@@ -140,7 +140,7 @@
.landing-btn-ghost {
font-size: 0.875rem;
font-weight: 500;
color: #848b9b;
color: var(--color-text-secondary);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -148,7 +148,7 @@
}
.landing-btn-ghost:hover {
color: #e2e5eb;
color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.06);
}
@@ -159,7 +159,7 @@
text-decoration: none;
padding: 0.55rem 1.25rem;
border-radius: 8px;
background: #f97316;
background: var(--color-accent);
transition: opacity 0.25s, transform 0.25s;
letter-spacing: -0.01em;
border: none;
@@ -185,12 +185,12 @@
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #fdba74;
color: var(--color-accent-text);
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: #f97316;
background: var(--color-accent);
animation: landingPulse 2s ease-in-out infinite;
}
@@ -228,13 +228,13 @@
}
.landing-gradient-text {
color: #fdba74;
color: var(--color-accent-text);
}
.landing-hero-sub {
font-size: 1.2rem;
font-weight: 400;
color: #848b9b;
color: var(--color-text-secondary);
line-height: 1.7;
max-width: 600px;
margin: 0 auto 2.5rem;
@@ -256,7 +256,7 @@
text-decoration: none;
padding: 0.85rem 2rem;
border-radius: 10px;
background: #f97316;
background: var(--color-accent);
transition: opacity 0.3s, transform 0.3s;
letter-spacing: -0.01em;
border: none;
@@ -277,19 +277,19 @@
.landing-btn-hero-secondary {
font-size: 1rem;
font-weight: 500;
color: #848b9b;
color: var(--color-text-secondary);
text-decoration: none;
padding: 0.85rem 2rem;
border-radius: 10px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.landing-btn-hero-secondary:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
color: #e2e5eb;
color: var(--color-text-primary);
}
/* ---- SOCIAL PROOF BAR ---- */
@@ -323,7 +323,7 @@
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.75rem;
font-weight: 700;
color: #fdba74;
color: var(--color-accent-text);
}
.landing-proof-stat .label {
@@ -342,8 +342,8 @@
.landing-preview-window {
border-radius: 12px;
border: 1px solid #2e3240;
background: #22252e;
border: 1px solid var(--color-border-default);
background: var(--color-bg-card);
overflow: hidden;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
}
@@ -354,7 +354,7 @@
padding: 0 0 0 14px;
height: 40px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid #2e3240;
border-bottom: 1px solid var(--color-border-default);
}
.landing-preview-tab {
@@ -365,8 +365,8 @@
height: 100%;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.7rem;
color: #848b9b;
border-right: 1px solid #2e3240;
color: var(--color-text-secondary);
border-right: 1px solid var(--color-border-default);
background: rgba(255, 255, 255, 0.02);
position: relative;
}
@@ -378,14 +378,14 @@
left: 0;
right: 0;
height: 2px;
background: #f97316;
background: var(--color-accent);
}
.landing-tab-icon {
width: 14px;
height: 14px;
border-radius: 3px;
background: #f97316;
background: var(--color-accent);
flex-shrink: 0;
}
@@ -410,14 +410,14 @@
padding: 4px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2e3240;
border: 1px solid var(--color-border-default);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.65rem;
color: #5a6170;
}
.landing-lock-icon {
color: #22c55e;
color: var(--color-success);
font-size: 0.6rem;
}
@@ -475,7 +475,7 @@
padding: 8px 12px;
border-radius: 8px;
font-size: 0.8rem;
color: #848b9b;
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: 8px;
@@ -483,8 +483,8 @@
.landing-preview-sidebar-item.active {
background: rgba(249, 115, 22, 0.08);
color: #fdba74;
border-left: 3px solid #f97316;
color: var(--color-accent-text);
border-left: 3px solid var(--color-accent);
}
.landing-preview-sidebar-item .dot {
@@ -497,7 +497,7 @@
flex: 1;
background: rgba(255, 255, 255, 0.01);
border-radius: 12px;
border: 1px dashed #2e3240;
border: 1px dashed var(--color-border-default);
display: flex;
align-items: center;
justify-content: center;
@@ -521,14 +521,14 @@
}
.landing-tree-node.root {
background: #f97316;
background: var(--color-accent);
color: #fff;
}
.landing-tree-node.decision {
background: #22252e;
border: 1px solid #2e3240;
color: #e2e5eb;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
color: var(--color-text-primary);
font-size: 0.7rem;
}
@@ -568,7 +568,7 @@
.landing-tree-label {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.6rem;
color: #fdba74;
color: var(--color-accent-text);
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: #fdba74;
color: var(--color-accent-text);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1rem;
@@ -605,7 +605,7 @@
.landing-section-desc {
font-size: 1.1rem;
color: #848b9b;
color: var(--color-text-secondary);
line-height: 1.7;
max-width: 580px;
}
@@ -615,7 +615,7 @@
max-width: 1100px;
margin: 0 auto;
height: 1px;
background: #2e3240;
background: var(--color-bg-elevated);
}
/* ---- PROBLEM SECTION ---- */
@@ -630,8 +630,8 @@
.landing-problem-card {
padding: 2rem;
border-radius: 16px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
transition: border-color 0.3s, transform 0.3s;
}
@@ -653,7 +653,7 @@
.landing-problem-icon.red {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
color: var(--color-danger);
}
.landing-problem-icon.amber {
@@ -681,7 +681,7 @@
.landing-problem-card p {
font-size: 0.9rem;
color: #848b9b;
color: var(--color-text-secondary);
line-height: 1.65;
}
@@ -713,24 +713,24 @@
.landing-eq-item {
padding: 0.5rem 1.25rem;
border-radius: 12px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
}
.landing-eq-operator {
color: #fdba74;
color: var(--color-accent-text);
font-size: 2rem;
}
.landing-eq-result {
color: #fdba74;
color: var(--color-accent-text);
padding: 0;
}
/* ---- EQUATION DESC ---- */
.landing-equation-desc {
font-size: 1.1rem;
color: #848b9b;
color: var(--color-text-secondary);
max-width: 550px;
margin: 0 auto;
line-height: 1.7;
@@ -748,8 +748,8 @@
.landing-step-card {
padding: 2rem;
border-radius: 16px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
position: relative;
counter-increment: landing-step;
transition: border-color 0.3s, transform 0.3s;
@@ -764,7 +764,7 @@
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.7rem;
font-weight: 600;
color: #fdba74;
color: var(--color-accent-text);
opacity: 0.6;
letter-spacing: 0.05em;
}
@@ -779,7 +779,7 @@
.landing-step-card p {
font-size: 0.9rem;
color: #848b9b;
color: var(--color-text-secondary);
line-height: 1.65;
}
@@ -788,8 +788,8 @@
height: 120px;
border-radius: 10px;
margin-top: 1.25rem;
background: #1a1c23;
border: 1px solid #2e3240;
background: var(--color-bg-page);
border: 1px solid var(--color-border-default);
display: flex;
align-items: center;
justify-content: center;
@@ -815,14 +815,14 @@
.landing-mock-node.start {
background: rgba(249, 115, 22, 0.15);
color: #fdba74;
color: var(--color-accent-text);
border: 1px solid rgba(249, 115, 22, 0.2);
}
.landing-mock-node.step {
background: rgba(255, 255, 255, 0.03);
color: #848b9b;
border: 1px solid #2e3240;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-default);
}
.landing-mock-connector {
@@ -852,19 +852,19 @@
}
.landing-mock-chat-line .label {
color: #fdba74;
color: var(--color-accent-text);
font-weight: 600;
min-width: 55px;
}
.landing-mock-chat-line .text {
color: #848b9b;
color: var(--color-text-secondary);
overflow-wrap: anywhere;
min-width: 0;
}
.landing-mock-chat-line.doc .label {
color: #22c55e;
color: var(--color-success);
}
/* Mock ticket */
@@ -879,17 +879,17 @@
.landing-mock-ticket-header {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.6rem;
color: #fdba74;
color: var(--color-accent-text);
font-weight: 600;
padding-bottom: 0.35rem;
border-bottom: 1px solid #2e3240;
border-bottom: 1px solid var(--color-border-default);
margin-bottom: 0.15rem;
}
.landing-mock-ticket-line {
font-size: 0.55rem;
font-family: 'IBM Plex Sans', sans-serif;
color: #848b9b;
color: var(--color-text-secondary);
display: flex;
gap: 6px;
}
@@ -900,7 +900,7 @@
}
.landing-mock-ticket-line .check {
color: #22c55e;
color: var(--color-success);
}
/* ---- FEATURES GRID ---- */
@@ -914,8 +914,8 @@
.landing-feature-card {
padding: 2rem;
border-radius: 16px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
transition: border-color 0.3s ease, transform 0.3s ease;
}
@@ -933,7 +933,7 @@
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
color: #fdba74;
color: var(--color-accent-text);
}
.landing-feature-card h3 {
@@ -946,13 +946,13 @@
.landing-feature-card p {
font-size: 0.875rem;
color: #848b9b;
color: var(--color-text-secondary);
line-height: 1.6;
}
.landing-feature-card.highlight {
border-color: rgba(249, 115, 22, 0.15);
background: #22252e;
background: var(--color-bg-card);
grid-column: span 2;
}
@@ -968,8 +968,8 @@
.landing-pricing-card {
padding: 2.5rem 2rem;
border-radius: 16px;
background: #22252e;
border: 1px solid #2e3240;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
transition: border-color 0.3s, transform 0.3s;
}
@@ -979,7 +979,7 @@
.landing-pricing-card.featured {
border-color: #f97316;
background: #22252e;
background: var(--color-bg-card);
position: relative;
}
@@ -991,7 +991,7 @@
transform: translateX(-50%);
padding: 4px 14px;
border-radius: 100px;
background: #f97316;
background: var(--color-accent);
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: #fdba74;
color: var(--color-accent-text);
}
.landing-pricing-price .period {
@@ -1054,7 +1054,7 @@
.landing-pricing-features li {
font-size: 0.875rem;
color: #848b9b;
color: var(--color-text-secondary);
display: flex;
align-items: flex-start;
gap: 0.6rem;
@@ -1082,8 +1082,8 @@
}
.landing-pricing-btn.outline {
color: #e2e5eb;
border: 1px solid #2e3240;
color: var(--color-text-primary);
border: 1px solid var(--color-border-default);
background: transparent;
}
@@ -1094,7 +1094,7 @@
.landing-pricing-btn.filled {
color: #fff;
background: #f97316;
background: var(--color-accent);
border: none;
}
@@ -1111,7 +1111,7 @@
}
.landing-pricing-enterprise a {
color: #fdba74;
color: var(--color-accent-text);
text-decoration: none;
}
@@ -1133,7 +1133,7 @@
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.01em;
color: #e2e5eb;
color: var(--color-text-primary);
font-style: italic;
margin-bottom: 1.5rem;
position: relative;
@@ -1170,7 +1170,7 @@
}
.landing-testimonial-author strong {
color: #848b9b;
color: var(--color-text-secondary);
font-weight: 600;
}
@@ -1196,7 +1196,7 @@
.landing-cta-section>p {
font-size: 1.1rem;
color: #848b9b;
color: var(--color-text-secondary);
max-width: 500px;
margin: 0 auto 2rem;
line-height: 1.7;
@@ -1213,9 +1213,9 @@
flex: 1;
padding: 0.85rem 1.25rem;
border-radius: 10px;
border: 1px solid #2e3240;
background: #22252e;
color: #e2e5eb;
border: 1px solid var(--color-border-default);
background: var(--color-bg-card);
color: var(--color-text-primary);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
outline: none;
@@ -1239,19 +1239,19 @@
.landing-cta-success {
font-size: 0.85rem;
color: #22c55e;
color: var(--color-success);
margin-top: 0.75rem;
}
.landing-cta-error {
font-size: 0.85rem;
color: #ef4444;
color: var(--color-danger);
margin-top: 0.75rem;
}
/* ---- FOOTER ---- */
.landing-footer {
border-top: 1px solid #2e3240;
border-top: 1px solid var(--color-border-default);
padding: 3rem 2rem;
}
@@ -1292,7 +1292,7 @@
}
.landing-footer-links a:hover {
color: #848b9b;
color: var(--color-text-secondary);
}
/* ---- ANIMATIONS ---- */
@@ -1379,7 +1379,7 @@
gap: 0;
padding: 0.5rem 1.5rem 1.5rem;
background: rgba(12, 13, 16, 0.98);
border-bottom: 1px solid #2e3240;
border-bottom: 1px solid var(--color-border-default);
}
.landing-mobile-menu a {
@@ -1387,14 +1387,14 @@
padding: 0.875rem 0;
font-size: 1rem;
font-weight: 500;
color: #848b9b;
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.landing-mobile-menu a:hover {
color: #e2e5eb;
color: var(--color-text-primary);
}
.landing-mobile-menu a:last-child {