diff --git a/agents/templates/agents/agent_detail.html b/agents/templates/agents/agent_detail.html
index 6ec39e5..a68cb44 100644
--- a/agents/templates/agents/agent_detail.html
+++ b/agents/templates/agents/agent_detail.html
@@ -5,296 +5,7 @@
{% block extra_css %}
-
+
{% endblock %}
{% block content %}
diff --git a/agents/templates/agents/marketplace.html b/agents/templates/agents/marketplace.html
index b5fcd6c..a1303fd 100644
--- a/agents/templates/agents/marketplace.html
+++ b/agents/templates/agents/marketplace.html
@@ -5,339 +5,7 @@
{% block extra_css %}
-
+
{% endblock %}
{% block content %}
diff --git a/docs_update_summary.txt b/docs_update_summary.txt
index d3fd494..74bb3af 100644
--- a/docs_update_summary.txt
+++ b/docs_update_summary.txt
@@ -1,19 +1,17 @@
=== Documentation Auto-Update Summary ===
-Update Date: 2025-08-01 01:37:09
+Update Date: 2025-08-01 01:37:22
Recent Commits:
+ - 277e7ec 📄 Auto-update documentation timestamp after security fixes
- c8ad34f 🔒 Implement critical security fixes for production readiness
- 657712f 🗑️ Remove workflows app completely and streamline to agents-only
- - c368bb5 ✨ Enhance marketplace with modern design and authentication
-
-Agents Changes:
- - agents/views.py
- - authentication/models.py
Documentation Changes:
- CLAUDE.md
-Updated Documentation Files:
- - /home/amit/projects/quantum_ai_v2/CLAUDE.md
+Backend Changes:
+ - docs_update_summary.txt
+
+No documentation files required updates.
=== End Summary ===
\ No newline at end of file
diff --git a/static/css/agent-base.css b/static/css/agent-base.css
index d8b1be7..22119ce 100644
--- a/static/css/agent-base.css
+++ b/static/css/agent-base.css
@@ -1,73 +1,17 @@
/* NetCop AI Agents - Unified CSS System */
/* Supports multiple themes with consistent components */
-/* Data Analyzer CSS Variables - Exact Copy */
+/* Agent-specific overrides and theme variations */
:root {
- /* Data Analyzer Primary Variables */
+ /* Agent-specific primary color (black theme) */
--primary: #000000;
- --surface: #ffffff;
- --surface-variant: #f8fafc;
- --background: #f3f4f6;
- --outline: #e4e7eb;
- --outline-variant: #e1e4e7;
- --on-surface: #1a1a1a;
- --on-surface-variant: #6b7280;
- --success: #10b981;
- --error: #ef4444;
- --radius-sm: 8px;
- --radius-md: 12px;
- --radius-lg: 16px;
- --spacing-xs: 4px;
- --spacing-sm: 8px;
- --spacing-md: 16px;
- --spacing-lg: 24px;
- --spacing-xl: 32px;
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
- --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
- --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
- /* Legacy compatibility - map old names to new */
- --bg-color: var(--background);
- --text-color: var(--on-surface);
- --primary-color: var(--primary);
- --card-bg: var(--surface);
- --border-color: var(--outline);
- --hover-color: var(--surface-variant);
- --accent-color: var(--on-surface-variant);
- --success-color: var(--success);
- --error-color: var(--error);
- --warning-color: #f59e0b;
-
- /* Typography - Unified with header component */
- --font-primary: 'Inter', Arial, sans-serif;
-
- /* Font Sizes - Crisp & Readable */
+ /* Agent-specific font sizes (slightly smaller for dense layouts) */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 14px;
--text-lg: 16px;
--text-xl: 18px;
-
- /* Spacing System */
- --space-xs: 4px;
- --space-sm: 8px;
- --space-md: 12px;
- --space-lg: 16px;
- --space-xl: 24px;
-
- /* Design Tokens */
- --radius: 6px;
- --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
- --transition: 150ms ease;
-
- /* Theme-specific Properties */
- --agent-bg: var(--bg-color);
- --agent-primary: var(--primary-color);
- --agent-card-bg: var(--card-bg);
- --agent-border: var(--border-color);
- --agent-backdrop-filter: none;
- --agent-card-shadow: var(--shadow);
- --agent-card-border: 1px solid var(--border-color);
}
/* Professional Theme (Default - Black & White) */
@@ -196,110 +140,12 @@ html {
letter-spacing: 0.5px;
}
-/* Forms - Data Analyzer Exact Copy */
-.form-group {
- margin-bottom: var(--spacing-lg);
-}
-
-.form-label {
- display: block;
- font-size: 14px;
- font-weight: 500;
- color: var(--on-surface);
- margin-bottom: var(--spacing-sm);
-}
-
-.form-input, .form-textarea {
- width: 100%;
- padding: 12px 16px;
- border: 2px solid var(--outline-variant);
- border-radius: var(--radius-md);
- font-size: 14px;
- line-height: 1.5;
- transition: all 0.2s ease;
- background: var(--surface);
- color: var(--on-surface);
- font-family: inherit;
-}
-
-.form-input:focus, .form-textarea:focus {
- outline: none;
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
-}
-
-.form-input:hover, .form-textarea:hover {
- border-color: var(--on-surface-variant);
-}
-
-.form-textarea {
- resize: vertical;
- min-height: 120px;
-}
-
-.form-help {
- color: var(--on-surface-variant);
- font-size: 12px;
- margin-top: var(--spacing-xs);
-}
-
-.form-error {
- color: var(--error);
- font-size: 12px;
- margin-top: var(--spacing-xs);
-}
-
-.form-label {
- display: block;
- font-size: 14px;
- font-weight: 500;
- color: var(--text-color);
- margin-bottom: 8px;
-}
-
-.form-input, .form-textarea {
- width: 100%;
- padding: 12px 16px;
- border: 2px solid var(--agent-border);
- border-radius: var(--radius);
- font-size: 14px;
- line-height: 1.5;
- transition: all 0.2s ease;
- background: white;
- color: var(--text-color);
- font-family: inherit;
-}
-
-.form-textarea {
- resize: vertical;
- min-height: 120px;
-}
-
-.form-input:focus, .form-textarea:focus {
- outline: none;
- border-color: var(--agent-primary);
- box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
-}
-
-.form-input:hover, .form-textarea:hover {
- border-color: var(--accent-color);
-}
-
-.form-help {
- color: var(--accent-color);
- font-size: 12px;
- margin-top: 4px;
-}
-
-.form-error {
- color: var(--error-color);
- font-size: 12px;
- margin-top: 4px;
-}
+/* Agent-specific form theme overrides */
+/* Form validation enhancements */
.required::after {
content: " *";
- color: var(--error-color);
+ color: var(--error);
}
/* Creative theme focus styles */
@@ -863,56 +709,7 @@ html {
flex-wrap: wrap;
}
-/* Buttons - Data Analyzer Exact Copy */
-.btn {
- padding: 12px 24px;
- border-radius: var(--radius-md);
- font-size: 14px;
- font-weight: 600;
- border: none;
- cursor: pointer;
- transition: all 0.2s ease;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-sm);
- text-decoration: none;
- min-height: 44px;
-}
-
-.btn-primary {
- background: var(--primary);
- color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
- background: #333333;
- transform: translateY(-1px);
- box-shadow: var(--shadow-md);
-}
-
-.btn-primary:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- transform: none;
-}
-
-.btn-secondary {
- background: var(--surface);
- color: var(--on-surface);
- border: 2px solid var(--outline);
-}
-
-.btn-secondary:hover {
- background: var(--surface-variant);
- border-color: var(--outline);
-}
-
-.btn-full {
- width: 100%;
-}
-
-/* Creative theme button styles */
+/* Agent-specific button theme overrides */
.theme-creative .btn {
padding: 16px 32px;
border-radius: 12px;
@@ -921,44 +718,6 @@ html {
min-height: 48px;
}
-.theme-creative .btn-secondary {
- border: 2px solid var(--border-medium);
-}
-
-.btn:hover:not(:disabled) {
- transform: translateY(-1px);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.btn-primary:hover:not(:disabled) {
- opacity: 0.9;
-}
-
-.btn-secondary:hover:not(:disabled) {
- border-color: var(--agent-primary);
- background: var(--hover-color);
-}
-
-.btn-full {
- width: 100%;
-}
-
-.btn:active {
- transform: translateY(0);
-}
-
-.btn:disabled {
- background: var(--accent-color);
- cursor: not-allowed;
- opacity: 0.5;
- transform: none;
-}
-
-.btn.loading {
- opacity: 0.6;
- pointer-events: none;
-}
-
/* Wallet Sidebar */
.wallet-section {
position: sticky;
diff --git a/static/css/agent-detail.css b/static/css/agent-detail.css
new file mode 100644
index 0000000..7735441
--- /dev/null
+++ b/static/css/agent-detail.css
@@ -0,0 +1,252 @@
+/* Agent Detail Page Styles - Extracted from inline CSS */
+
+/* Enhanced Form Sections */
+.section-container {
+ margin-bottom: var(--space-xl);
+ padding: var(--space-lg);
+ background: var(--surface-variant);
+ border-radius: var(--radius-md);
+ border: 1px solid var(--outline-variant);
+}
+
+.section-subtitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--on-surface);
+ margin: 0 0 var(--space-lg) 0;
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.section-subtitle::before {
+ content: '';
+ width: 3px;
+ height: 16px;
+ background: var(--primary);
+ border-radius: 2px;
+}
+
+/* Enhanced Results Display */
+.results-content {
+ background: var(--surface-variant);
+ border-radius: var(--radius-md);
+ padding: var(--space-xl);
+ margin-bottom: var(--space-lg);
+ line-height: 1.7;
+ color: var(--on-surface);
+ font-size: 15px;
+}
+
+/* Results Typography */
+.results-content h1,
+.results-content h2,
+.results-content h3 {
+ color: var(--primary);
+ font-weight: 700;
+ margin: var(--space-xl) 0 var(--space-md) 0;
+ line-height: 1.3;
+}
+
+.results-content h1 {
+ font-size: 24px;
+ border-bottom: 3px solid var(--primary);
+ padding-bottom: var(--space-sm);
+ margin-bottom: var(--space-lg);
+}
+
+.results-content h2 {
+ font-size: 20px;
+ margin-top: var(--space-xl);
+ position: relative;
+ padding-left: var(--space-md);
+}
+
+.results-content h2::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 4px;
+ background: var(--primary);
+ border-radius: 2px;
+}
+
+.results-content h3 {
+ font-size: 18px;
+ color: var(--on-surface);
+ font-weight: 600;
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ padding: var(--space-md) var(--space-lg);
+ border-radius: var(--space-sm);
+ border-left: 4px solid var(--primary);
+ margin: var(--space-lg) 0 var(--space-md) 0;
+}
+
+.results-content strong {
+ color: var(--primary);
+ font-weight: 600;
+}
+
+/* Toast Notifications */
+.toast {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: var(--surface);
+ border: 1px solid var(--outline);
+ border-radius: var(--radius-md);
+ padding: var(--space-md) var(--space-lg);
+ box-shadow: var(--shadow-lg);
+ z-index: var(--z-toast);
+ max-width: 400px;
+ font-size: 14px;
+ font-weight: 500;
+ transform: translateX(100%);
+ transition: transform 0.3s ease;
+}
+
+.toast.show {
+ transform: translateX(0);
+}
+
+.toast.success {
+ border-color: var(--success);
+ background: #f0fdf4;
+ color: #16a34a;
+}
+
+.toast.error {
+ border-color: var(--error);
+ background: #fef2f2;
+ color: #dc2626;
+}
+
+.toast.info {
+ border-color: var(--primary);
+ background: #f0f9ff;
+ color: #0369a1;
+}
+
+/* File Upload Styles */
+.file-upload-container {
+ position: relative;
+}
+
+.form-file-input {
+ display: none;
+}
+
+.file-upload-label {
+ display: block;
+ padding: var(--space-lg);
+ border: 2px dashed var(--outline-variant);
+ border-radius: var(--radius-md);
+ text-align: center;
+ cursor: pointer;
+ transition: var(--transition);
+ background: var(--surface-variant);
+ color: var(--on-surface-variant);
+}
+
+.file-upload-label:hover {
+ border-color: var(--primary);
+ background: rgba(0, 0, 0, 0.02);
+}
+
+.file-upload-label.dragover {
+ border-color: var(--primary);
+ background: rgba(0, 0, 0, 0.05);
+ transform: scale(1.02);
+}
+
+.file-upload-icon {
+ font-size: 2rem;
+ display: block;
+ margin-bottom: var(--space-sm);
+}
+
+.file-upload-text {
+ display: block;
+ font-weight: 500;
+ margin-bottom: var(--space-xs);
+ color: var(--on-surface);
+}
+
+.file-upload-info {
+ font-size: 12px;
+ color: var(--on-surface-variant);
+}
+
+.file-selected {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-md);
+ background: var(--surface);
+ border: 1px solid var(--success);
+ border-radius: var(--space-sm);
+ margin-top: var(--space-sm);
+}
+
+.file-name {
+ font-size: 14px;
+ color: var(--on-surface);
+ font-weight: 500;
+}
+
+.file-remove {
+ background: var(--error);
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: var(--transition);
+}
+
+.file-remove:hover {
+ background: #dc2626;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .toast {
+ left: 20px;
+ right: 20px;
+ max-width: none;
+ transform: translateY(-100%);
+ }
+
+ .toast.show {
+ transform: translateY(0);
+ }
+
+ .results-content {
+ padding: var(--space-md);
+ font-size: 14px;
+ }
+
+ .results-content h1 {
+ font-size: 20px;
+ }
+
+ .results-content h2 {
+ font-size: 18px;
+ }
+
+ .results-content h3 {
+ font-size: 16px;
+ padding: var(--space-sm) var(--space-md);
+ }
+
+ .section-container {
+ padding: var(--space-md);
+ }
+}
\ No newline at end of file
diff --git a/static/css/base.css b/static/css/base.css
index 914e48a..f7bd84c 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -5,56 +5,158 @@
display: none !important;
}
-/* Unified Color System */
+/* ==============================================
+ UNIFIED DESIGN TOKEN SYSTEM
+ Consolidates all design tokens across the app
+ ============================================== */
:root {
+ /* ===== SPACING SYSTEM ===== */
+ --space-xs: 4px;
+ --space-sm: 8px;
+ --space-md: 16px;
+ --space-lg: 24px;
+ --space-xl: 32px;
+ --space-xxl: 48px;
+ --space-xxxl: 64px;
+
+ /* Legacy spacing aliases (to be phased out) */
+ --spacing-xs: var(--space-xs);
+ --spacing-sm: var(--space-sm);
+ --spacing-md: var(--space-md);
+ --spacing-lg: var(--space-lg);
+ --spacing-xl: var(--space-xl);
+
+ /* ===== COLOR PALETTE ===== */
/* Primary Colors */
- --primary-blue: #3b82f6;
+ --primary: #3b82f6;
--primary-dark: #1d4ed8;
--primary-light: #60a5fa;
+ --primary-blue: var(--primary); /* Alias for compatibility */
- /* Secondary Colors */
- --success-green: #10b981;
+ /* Semantic Colors */
+ --success: #10b981;
--success-dark: #059669;
- --warning-orange: #f59e0b;
- --error-red: #ef4444;
+ --success-green: var(--success); /* Alias */
+ --error: #ef4444;
+ --error-red: var(--error); /* Alias */
+ --warning: #f59e0b;
+ --warning-orange: var(--warning); /* Alias */
+ --info: #06b6d4;
- /* Neutral Colors */
- --text-primary: #1f2937;
- --text-secondary: #6b7280;
- --text-light: #6b7280;
- --text-muted: #9ca3af;
- --border-light: #e5e7eb; /* For subtle dividers */
- --border-medium: #9ca3af; /* For form elements and visible borders */
- --border-strong: #6b7280; /* For interactive elements that need clear definition */
- --background-page: #f8fafc;
- --background-card: #ffffff;
+ /* Surface Colors */
+ --surface: #ffffff;
+ --surface-variant: #f8fafc;
+ --background: #f3f4f6;
+ --background-page: var(--background); /* Alias */
+ --background-card: var(--surface); /* Alias */
--background-light: #f9fafb;
- --background-subtle: #f3f4f6;
+ --background-subtle: var(--surface-variant);
- /* Gradients */
- --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
- --gradient-success: linear-gradient(135deg, var(--success-green) 0%, var(--success-dark) 100%);
+ /* Text Colors */
+ --on-surface: #1a1a1a;
+ --on-surface-variant: #6b7280;
+ --text-primary: var(--on-surface); /* Alias */
+ --text-secondary: var(--on-surface-variant); /* Alias */
+ --text-light: var(--on-surface-variant); /* Alias */
+ --text-muted: #9ca3af;
+
+ /* Border Colors */
+ --outline: #e4e7eb;
+ --outline-variant: #e1e4e7;
+ --border-light: #e5e7eb;
+ --border-medium: #9ca3af;
+ --border-strong: #6b7280;
+ --border-color: var(--outline); /* Legacy alias */
+
+ /* ===== BORDER RADIUS ===== */
+ --radius-xs: 4px;
+ --radius-sm: 8px;
+ --radius-md: 12px;
+ --radius-lg: 16px;
+ --radius-xl: 24px;
+ --radius-full: 9999px;
+
+ /* ===== SHADOWS ===== */
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+ --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
+ --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
+
+ /* ===== TYPOGRAPHY ===== */
+ --font-family: 'Inter', Arial, sans-serif;
+ --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+
+ /* Font Sizes */
+ --text-xs: 12px;
+ --text-sm: 14px;
+ --text-base: 16px;
+ --text-lg: 18px;
+ --text-xl: 20px;
+ --text-2xl: 24px;
+ --text-3xl: 30px;
+ --text-4xl: 36px;
+
+ /* Font Weights */
+ --font-light: 300;
+ --font-normal: 400;
+ --font-medium: 500;
+ --font-semibold: 600;
+ --font-bold: 700;
+
+ /* Line Heights */
+ --leading-tight: 1.25;
+ --leading-normal: 1.5;
+ --leading-relaxed: 1.75;
+
+ /* ===== TRANSITIONS ===== */
+ --transition: all 0.2s ease;
+ --transition-fast: all 0.1s ease;
+ --transition-slow: all 0.3s ease;
+
+ /* ===== GRADIENTS ===== */
+ --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+ --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
--gradient-hero: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%);
/* Section Gradients */
- --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
--company-gradient: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
- --visual-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #6366f1 100%);
+ --visual-gradient: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
--services-gradient: linear-gradient(135deg, #fefefe 0%, #f0f9ff 100%);
--clients-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
- --founder-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #4f46e5 100%);
+ --founder-gradient: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
--contact-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
- --text-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #6366f1 100%);
+ --text-gradient: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
- /* Badge Colors */
+ /* Badge Gradients */
--badge-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
--badge-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-
- /* Professional Avatar Gradients (Limited Set) */
- --gradient-blue: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
- --gradient-green: linear-gradient(135deg, var(--success-green) 0%, var(--success-dark) 100%);
+ --gradient-blue: var(--gradient-primary);
+ --gradient-green: var(--gradient-success);
--gradient-slate: linear-gradient(135deg, #64748b 0%, #475569 100%);
--gradient-neutral: linear-gradient(135deg, #6b7280 0%, #374151 100%);
+
+ /* ===== LEGACY COMPATIBILITY ALIASES ===== */
+ /* These will be phased out gradually */
+ --bg-color: var(--background);
+ --text-color: var(--on-surface);
+ --primary-color: var(--primary);
+ --card-bg: var(--surface);
+ --hover-color: var(--surface-variant);
+ --accent-color: var(--on-surface-variant);
+ --success-color: var(--success);
+ --error-color: var(--error);
+ --primary-gradient: var(--gradient-primary);
+
+ /* ===== Z-INDEX SCALE ===== */
+ --z-dropdown: 1000;
+ --z-sticky: 1020;
+ --z-fixed: 1030;
+ --z-modal-backdrop: 1040;
+ --z-modal: 1050;
+ --z-popover: 1060;
+ --z-tooltip: 1070;
+ --z-toast: 1080;
}
body {
@@ -521,4 +623,506 @@ body {
flex-direction: column;
gap: clamp(8px, 2vw, 12px);
}
+}
+
+/* ==============================================
+ UNIFIED BUTTON SYSTEM
+ Consolidates all button styles across the app
+ ============================================== */
+
+/* Base Button Foundation */
+.btn {
+ /* Core Structure */
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ /* Spacing & Dimensions */
+ padding: 12px 24px;
+ min-height: 44px;
+ border-radius: 8px;
+
+ /* Typography */
+ font-size: 14px;
+ font-weight: 600;
+ font-family: inherit;
+ text-decoration: none;
+ white-space: nowrap;
+
+ /* Base Styling */
+ border: none;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-sizing: border-box;
+
+ /* Prevent text selection */
+ user-select: none;
+ -webkit-user-select: none;
+}
+
+/* Button Variants */
+.btn-primary {
+ background: var(--primary-blue, #3b82f6);
+ color: white;
+ border: 2px solid transparent;
+}
+
+.btn-primary:hover:not(:disabled) {
+ background: var(--primary-dark, #1d4ed8);
+ color: white;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.btn-secondary {
+ background: white;
+ color: var(--text-primary, #1f2937);
+ border: 2px solid var(--border-medium, #9ca3af);
+}
+
+.btn-secondary:hover:not(:disabled) {
+ background: #1a1a1a !important;
+ color: white !important;
+ border-color: #1a1a1a !important;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.btn-outline {
+ background: transparent;
+ color: var(--text-primary, #1f2937);
+ border: 2px solid var(--border-medium, #9ca3af);
+}
+
+.btn-outline:hover:not(:disabled) {
+ background: var(--background-light, #f9fafb);
+ border-color: var(--primary-blue, #3b82f6);
+}
+
+.btn-ghost {
+ background: transparent;
+ color: var(--text-primary, #1f2937);
+ border: 2px solid transparent;
+}
+
+.btn-ghost:hover:not(:disabled) {
+ background: var(--background-light, #f9fafb);
+ transform: translateY(-1px);
+}
+
+.btn-glass {
+ background: rgba(255, 255, 255, 0.15);
+ color: white;
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ backdrop-filter: blur(10px);
+}
+
+.btn-glass:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-1px);
+}
+
+/* Button Sizes */
+.btn-sm {
+ padding: 8px 16px;
+ font-size: 12px;
+ min-height: 36px;
+ border-radius: 6px;
+}
+
+.btn-lg {
+ padding: 16px 32px;
+ font-size: 16px;
+ min-height: 52px;
+ border-radius: 12px;
+}
+
+.btn-full {
+ width: 100%;
+}
+
+/* Button States */
+.btn:active {
+ transform: translateY(0);
+ transition: transform 0.1s ease;
+}
+
+.btn:disabled,
+.btn.loading {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+ pointer-events: none;
+}
+
+.btn.loading::after {
+ content: '';
+ width: 16px;
+ height: 16px;
+ border: 2px solid currentColor;
+ border-top: 2px solid transparent;
+ border-radius: 50%;
+ animation: btn-spin 1s linear infinite;
+ margin-left: 8px;
+}
+
+@keyframes btn-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* Button Groups */
+.btn-group {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.btn-group .btn {
+ flex: 1;
+ min-width: 0;
+}
+
+.btn-group.btn-group-vertical {
+ flex-direction: column;
+}
+
+.btn-group.btn-group-vertical .btn {
+ width: 100%;
+}
+
+/* Success/Error Button States */
+.btn-success {
+ background: var(--success-green, #10b981);
+ color: white;
+ border-color: transparent;
+}
+
+.btn-success:hover:not(:disabled) {
+ background: var(--success-dark, #059669);
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.btn-error {
+ background: var(--error-red, #ef4444);
+ color: white;
+ border-color: transparent;
+}
+
+.btn-error:hover:not(:disabled) {
+ background: #dc2626;
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+.btn-warning {
+ background: var(--warning-orange, #f59e0b);
+ color: white;
+ border-color: transparent;
+}
+
+.btn-warning:hover:not(:disabled) {
+ background: #d97706;
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+ .btn-secondary,
+ .btn-outline {
+ background: #374151;
+ color: #f9fafb;
+ border-color: #6b7280;
+ }
+
+ .btn-secondary:hover:not(:disabled) {
+ background: #1a1a1a !important;
+ color: white !important;
+ border-color: #1a1a1a !important;
+ }
+
+ .btn-outline:hover:not(:disabled) {
+ background: #4b5563;
+ border-color: #60a5fa;
+ }
+
+ .btn-ghost {
+ color: #f9fafb;
+ }
+
+ .btn-ghost:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.1);
+ }
+}
+
+/* Responsive Button Adjustments */
+@media (max-width: 768px) {
+ .btn {
+ padding: 10px 20px;
+ font-size: 14px;
+ min-height: 40px;
+ }
+
+ .btn-lg {
+ padding: 14px 28px;
+ font-size: 15px;
+ min-height: 48px;
+ }
+
+ .btn-group {
+ gap: 6px;
+ }
+}
+
+@media (max-width: 480px) {
+ .btn {
+ padding: 10px 16px;
+ font-size: 13px;
+ min-height: 40px;
+ }
+
+ .btn-sm {
+ padding: 8px 12px;
+ font-size: 11px;
+ min-height: 32px;
+ }
+
+ .btn-group {
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .btn-group .btn {
+ width: 100%;
+ }
+}
+
+/* ==============================================
+ UNIFIED FORM SYSTEM
+ Consolidates all form styles across the app
+ ============================================== */
+
+/* Form Layout */
+.form-group {
+ margin-bottom: var(--space-lg);
+}
+
+.form-group:last-child {
+ margin-bottom: 0;
+}
+
+/* Form Labels */
+.form-label {
+ display: block;
+ font-size: 14px;
+ font-weight: var(--font-medium);
+ color: var(--text-primary);
+ margin-bottom: var(--space-sm);
+ line-height: var(--leading-tight);
+}
+
+.form-label.required::after {
+ content: " *";
+ color: var(--error);
+}
+
+/* Form Inputs */
+.form-input,
+.form-textarea,
+.form-select {
+ width: 100%;
+ padding: 12px 16px;
+ border: 2px solid var(--border-medium);
+ border-radius: var(--radius-md);
+ font-size: 14px;
+ line-height: 1.5;
+ transition: var(--transition);
+ background: var(--surface);
+ color: var(--text-primary);
+ font-family: inherit;
+ box-sizing: border-box;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-input:hover,
+.form-textarea:hover,
+.form-select:hover {
+ border-color: var(--border-strong);
+}
+
+/* Textarea Specific */
+.form-textarea {
+ resize: vertical;
+ min-height: 120px;
+}
+
+/* Select Specific */
+.form-select {
+ cursor: pointer;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 12px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ padding-right: 40px;
+}
+
+/* Form States */
+.form-input.error,
+.form-textarea.error,
+.form-select.error {
+ border-color: var(--error);
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-input.success,
+.form-textarea.success,
+.form-select.success {
+ border-color: var(--success);
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+.form-input:disabled,
+.form-textarea:disabled,
+.form-select:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ background-color: var(--background-subtle);
+}
+
+/* Form Feedback */
+.form-help {
+ color: var(--text-secondary);
+ font-size: 12px;
+ margin-top: var(--space-xs);
+ line-height: var(--leading-normal);
+}
+
+.form-error {
+ color: var(--error);
+ font-size: 12px;
+ margin-top: var(--space-xs);
+ line-height: var(--leading-normal);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.form-error::before {
+ content: "⚠";
+ font-size: 12px;
+}
+
+.form-success {
+ color: var(--success);
+ font-size: 12px;
+ margin-top: var(--space-xs);
+ line-height: var(--leading-normal);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.form-success::before {
+ content: "✓";
+ font-size: 12px;
+}
+
+/* Checkbox and Radio */
+.form-checkbox,
+.form-radio {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ margin-bottom: var(--space-md);
+}
+
+.form-checkbox input[type="checkbox"],
+.form-radio input[type="radio"] {
+ width: 16px;
+ height: 16px;
+ margin: 0;
+ cursor: pointer;
+}
+
+.form-checkbox label,
+.form-radio label {
+ margin: 0;
+ cursor: pointer;
+ font-weight: var(--font-normal);
+}
+
+/* File Upload */
+.form-file {
+ position: relative;
+ display: inline-block;
+}
+
+.form-file input[type="file"] {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ opacity: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+}
+
+.form-file-label {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: 12px 24px;
+ background: var(--surface);
+ border: 2px dashed var(--border-medium);
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ transition: var(--transition);
+ font-size: 14px;
+ font-weight: var(--font-medium);
+ color: var(--text-primary);
+}
+
+.form-file-label:hover {
+ border-color: var(--primary);
+ background: var(--background-light);
+}
+
+.form-file input:focus + .form-file-label {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Form Grid */
+.form-grid {
+ display: grid;
+ gap: var(--space-lg);
+}
+
+.form-grid-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.form-grid-3 {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+/* Responsive Form Grid */
+@media (max-width: 768px) {
+ .form-grid-2,
+ .form-grid-3 {
+ grid-template-columns: 1fr;
+ }
+
+ .form-input,
+ .form-textarea,
+ .form-select {
+ font-size: 16px; /* Prevent zoom on iOS */
+ }
}
\ No newline at end of file
diff --git a/static/css/marketplace.css b/static/css/marketplace.css
index 6e42a44..9d9516c 100644
--- a/static/css/marketplace.css
+++ b/static/css/marketplace.css
@@ -1,378 +1,341 @@
-/* Marketplace-specific styles for NetCop AI Hub */
-/* Using unified color system from base.css */
+/* Marketplace Page Styles - Extracted from inline CSS */
-/* Override main-container for marketplace full-width sections */
-.main-container {
- max-width: none;
- padding: 0;
-}
-
-/* Body background for marketplace */
-body {
- background: var(--gradient-hero);
- min-height: 100vh;
-}
-
-/* Hero Section */
-.hero-section {
- position: relative;
- padding: clamp(40px, 8vw, 60px) clamp(16px, 4vw, 24px) clamp(30px, 8vw, 50px);
- overflow: hidden;
+/* Marketplace Header */
+.marketplace-header {
text-align: center;
+ margin-bottom: var(--space-xl);
+ padding: var(--space-xl) 0;
}
-.hero-container {
- max-width: 1280px;
+.marketplace-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: var(--on-surface);
+ margin-bottom: var(--space-md);
+}
+
+.marketplace-subtitle {
+ font-size: 1.1rem;
+ color: var(--on-surface-variant);
+ max-width: 600px;
margin: 0 auto;
- position: relative;
- padding: 0 clamp(8px, 2vw, 16px);
}
-.hero-title {
- font-size: clamp(36px, 8vw, 110px);
- font-weight: bold;
- margin-bottom: clamp(24px, 6vw, 32px);
- line-height: 1.1;
+/* Marketplace Filters */
+.marketplace-filters {
+ display: flex;
+ gap: var(--space-md);
+ margin-bottom: var(--space-xl);
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
}
-.gradient-text {
- background: var(--gradient-primary);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-/* Search */
-.search-container {
- max-width: 512px;
- margin: 0 auto clamp(20px, 5vw, 40px) auto;
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.search-wrapper {
+.search-box {
+ flex: 1;
+ max-width: 400px;
position: relative;
}
.search-input {
width: 100%;
- padding: clamp(14px, 4vw, 20px) clamp(20px, 5vw, 32px);
- border-radius: clamp(16px, 4vw, 24px);
- font-size: clamp(14px, 3.5vw, 18px);
- border: none;
+ padding: 12px 16px 12px 44px;
+ border: 2px solid var(--outline-variant);
+ border-radius: var(--radius-md);
+ font-size: 14px;
+ background: var(--surface);
+ color: var(--on-surface);
+}
+
+.search-input:focus {
outline: none;
- backdrop-filter: blur(10px);
- background: rgba(255, 255, 255, 0.9);
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
- color: #000000;
- min-height: 48px;
- box-sizing: border-box;
-}
-
-.search-button {
- position: absolute;
- right: clamp(8px, 2vw, 12px);
- top: 50%;
- transform: translateY(-50%);
- background: none;
- border: none;
- cursor: pointer;
- padding: clamp(8px, 2vw, 12px);
- border-radius: clamp(8px, 2vw, 12px);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background-color 0.2s;
-}
-
-.search-button:hover {
- background: rgba(0, 0, 0, 0.05);
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.search-icon {
- width: clamp(20px, 5vw, 24px);
- height: clamp(20px, 5vw, 24px);
- color: #9ca3af;
+ position: absolute;
+ left: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--on-surface-variant);
}
/* Category Filters */
-.category-filters {
+.category-filter {
display: flex;
+ gap: var(--space-sm);
flex-wrap: wrap;
- justify-content: center;
- gap: clamp(8px, 2vw, 16px);
- margin-bottom: clamp(16px, 4vw, 32px);
- padding: 0 clamp(8px, 2vw, 16px);
}
-.category-button {
- padding: clamp(10px, 3vw, 12px) clamp(16px, 4vw, 24px);
- border-radius: clamp(12px, 3vw, 16px);
- font-weight: 600;
- border: none;
- cursor: pointer;
- backdrop-filter: blur(10px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
- background: rgba(255, 255, 255, 0.7);
- color: var(--text-primary);
- font-size: clamp(12px, 3vw, 14px);
- min-height: 44px;
- display: flex;
- align-items: center;
- justify-content: center;
+.category-btn {
+ padding: 8px 16px;
+ border: 2px solid var(--outline-variant);
+ border-radius: var(--radius-md);
+ background: var(--surface);
+ color: var(--on-surface-variant);
text-decoration: none;
- transition: all 0.2s ease;
+ font-size: 14px;
+ font-weight: 500;
+ transition: var(--transition);
+ text-transform: capitalize;
}
-.category-button:hover {
+.category-btn:hover {
+ border-color: var(--primary);
+ background: var(--surface-variant);
transform: translateY(-1px);
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
- background: rgba(255, 255, 255, 0.9);
}
-.category-button.active {
- background: var(--gradient-primary);
+.category-btn.active {
+ border-color: var(--primary);
+ background: var(--primary);
color: white;
}
-.category-emoji {
- margin-right: 8px;
+/* Marketplace Stats */
+.marketplace-stats {
+ text-align: center;
+ margin-bottom: var(--space-lg);
+ color: var(--on-surface-variant);
+ font-size: 14px;
}
-/* Assistants Grid */
-.assistants-section {
- padding: 0 clamp(16px, 4vw, 24px) clamp(40px, 10vw, 80px);
+/* Category Sections */
+.category-section {
+ margin-bottom: var(--space-xl);
}
-.assistants-container {
- max-width: 1280px;
+.category-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--on-surface);
+ margin-bottom: var(--space-lg);
+ text-transform: capitalize;
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.category-title::before {
+ content: '';
+ width: 4px;
+ height: 24px;
+ background: var(--primary);
+ border-radius: 2px;
+}
+
+/* Agents Grid */
+.agents-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+ gap: 24px;
+ max-width: 1200px;
margin: 0 auto;
}
-.assistants-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
- gap: clamp(16px, 4vw, 32px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
+/* Agent Cards */
.agent-card {
- border-radius: clamp(16px, 3vw, 24px);
- padding: clamp(16px, 4vw, 32px);
- backdrop-filter: blur(10px);
- background: var(--card-gradient);
- border: 1px solid rgba(255, 255, 255, 0.3);
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
- cursor: pointer;
+ background: var(--surface);
+ border: 1px solid var(--outline);
+ border-radius: var(--radius-lg);
+ padding: 0;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ color: inherit;
display: flex;
flex-direction: column;
- min-height: clamp(280px, 60vw, 320px);
- text-decoration: none;
- color: inherit;
- transition: all 0.2s ease;
+ position: relative;
+ overflow: hidden;
+ box-shadow: var(--shadow-sm);
}
.agent-card:hover {
transform: translateY(-2px);
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-lg);
+ border-color: var(--outline-variant);
}
.agent-header {
+ padding: 24px 24px 0 24px;
display: flex;
- align-items: center;
- gap: clamp(12px, 3vw, 16px);
- margin-bottom: clamp(16px, 4vw, 20px);
+ align-items: flex-start;
+ gap: 16px;
+ margin-bottom: 16px;
}
-.agent-avatar {
- width: clamp(50px, 12vw, 60px);
- height: clamp(50px, 12vw, 60px);
- border-radius: 16px;
+.agent-icon {
+ font-size: 32px;
+ width: 56px;
+ height: 56px;
display: flex;
align-items: center;
justify-content: center;
- color: white;
- font-weight: bold;
- font-size: clamp(16px, 4vw, 20px);
+ background: linear-gradient(135deg, var(--background-subtle) 0%, var(--outline) 100%);
+ border-radius: 14px;
+ flex-shrink: 0;
+ border: none;
}
.agent-info {
flex: 1;
+ min-width: 0;
}
-.agent-name {
- font-size: clamp(14px, 3.5vw, 18px);
- font-weight: bold;
- color: var(--text-primary);
- margin-bottom: 4px;
+.agent-info h3 {
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--on-surface);
+ margin: 0 0 4px 0;
line-height: 1.3;
- word-wrap: break-word;
-}
-
-.agent-rating {
- display: flex;
- align-items: center;
- gap: clamp(6px, 1.5vw, 8px);
-}
-
-.rating-star {
- color: var(--warning-orange);
- font-size: clamp(12px, 3vw, 14px);
-}
-
-.rating-text {
- color: var(--text-secondary);
- font-size: clamp(10px, 2.5vw, 14px);
-}
-
-.agent-description {
- color: var(--text-secondary);
- line-height: 1.5;
- margin-bottom: clamp(12px, 3vw, 24px);
- font-size: clamp(12px, 3vw, 14px);
- flex: 1;
- word-wrap: break-word;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- line-clamp: 3;
- -webkit-box-orient: vertical;
-}
-
-.agent-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: clamp(8px, 2vw, 12px);
- flex-wrap: wrap;
+ letter-spacing: -0.025em;
}
.agent-price {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--success);
+ margin: 0;
+ opacity: 0.9;
+}
+
+.agent-description {
+ color: var(--on-surface-variant);
+ line-height: 1.6;
+ margin: 0 24px 24px 24px;
+ font-size: 15px;
+ font-weight: 400;
+}
+
+.agent-footer {
+ padding: 20px 24px 24px 24px;
display: flex;
align-items: center;
- gap: clamp(6px, 1.5vw, 8px);
+ justify-content: space-between;
+ margin-top: auto;
+ border-top: 1px solid var(--surface-variant);
+ background: var(--background-light);
}
-.price-icon {
- color: var(--success-green);
- font-weight: bold;
- font-size: clamp(12px, 3vw, 14px);
+.agent-category {
+ background: var(--surface-variant);
+ color: var(--on-surface-variant);
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 13px;
+ font-weight: 500;
+ text-transform: capitalize;
+ letter-spacing: 0.025em;
}
-.price-text {
- color: var(--text-primary);
- font-weight: 600;
- font-size: clamp(12px, 3vw, 14px);
-}
-
-.use-button {
+/* Try Button */
+.try-btn {
background: var(--gradient-primary);
color: white;
- padding: clamp(10px, 3vw, 12px) clamp(14px, 3.5vw, 24px);
- border-radius: clamp(8px, 2vw, 12px);
- border: none;
+ padding: 10px 20px;
+ border-radius: 10px;
+ font-size: 14px;
font-weight: 600;
- font-size: clamp(11px, 3vw, 14px);
- min-height: 44px;
- min-width: clamp(80px, 20vw, 100px);
+ border: none;
cursor: pointer;
- text-align: center;
- white-space: nowrap;
+ transition: var(--transition);
+ box-shadow: 0 2px 4px 0 rgba(59, 130, 246, 0.3);
+ letter-spacing: 0.025em;
text-decoration: none;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
-}
-
-.use-button:hover {
- transform: translateY(-2px);
- box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
- filter: brightness(1.1);
-}
-
-.use-button:active {
- transform: translateY(0);
- box-shadow: 0 3px 10px rgba(59, 130, 246, 0.2);
-}
-
-.use-button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- transform: none;
-}
-
-.use-button:disabled:hover {
- transform: none;
- box-shadow: none;
- background: var(--gradient-primary);
-}
-
-/* Loading/Empty States */
-.loading-state, .empty-state {
+ display: inline-block;
text-align: center;
- padding: clamp(40px, 10vw, 60px) clamp(16px, 4vw, 20px);
- color: var(--text-secondary);
}
-.state-icon {
- font-size: clamp(32px, 8vw, 48px);
- margin-bottom: clamp(12px, 3vw, 16px);
+.try-btn:hover {
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px 0 rgba(59, 130, 246, 0.4);
+ color: white;
}
-.state-text {
- font-size: clamp(14px, 3.5vw, 16px);
+.try-btn.login-required {
+ background: linear-gradient(135deg, #000000 0%, #1f1f1f 100%);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
}
-/* Agent Tags */
-.agent-tags {
- display: flex;
- gap: 8px;
- flex-wrap: wrap;
- margin-bottom: 12px;
+.try-btn.login-required:hover {
+ background: linear-gradient(135deg, #1f1f1f 0%, #000000 100%);
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+ color: white;
}
-.agent-tag {
- background: var(--border-light);
- color: var(--text-secondary);
- padding: 4px 8px;
- border-radius: 12px;
- font-size: 12px;
- font-weight: 500;
+/* No Results State */
+.no-results {
+ text-align: center;
+ padding: var(--space-xl);
+ color: var(--on-surface-variant);
}
-/* Simplified Category Badge Colors (Unified System) */
-.category-analytics { background: rgba(59, 130, 246, 0.1); color: var(--primary-blue); }
-.category-content { background: rgba(245, 158, 11, 0.1); color: var(--warning-orange); }
-.category-utilities { background: rgba(16, 185, 129, 0.1); color: var(--success-green); }
-.category-marketing { background: rgba(59, 130, 246, 0.1); color: var(--primary-blue); }
-.category-customer-service { background: rgba(107, 114, 128, 0.1); color: var(--text-secondary); }
-.category-email { background: rgba(239, 68, 68, 0.1); color: var(--error-red); }
-.category-sales { background: rgba(16, 185, 129, 0.1); color: var(--success-green); }
-
-/* Professional Avatar Gradients (Unified Color System) */
-.gradient-blue { background: var(--gradient-blue); }
-.gradient-green { background: var(--gradient-green); }
-.gradient-slate { background: var(--gradient-slate); }
-.gradient-neutral { background: var(--gradient-neutral); }
+.no-results-icon {
+ font-size: 4rem;
+ margin-bottom: var(--space-md);
+ opacity: 0.5;
+}
/* Responsive Design */
@media (max-width: 768px) {
- .assistants-grid {
- grid-template-columns: 1fr;
+ .marketplace-title {
+ font-size: 2rem;
}
- .category-filters {
- gap: clamp(6px, 2vw, 12px);
- }
-
- .agent-footer {
+ .marketplace-filters {
flex-direction: column;
align-items: stretch;
+ }
+
+ .search-box {
+ max-width: none;
+ }
+
+ .agents-grid {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ padding: 0 16px;
+ }
+
+ .category-filter {
+ justify-content: center;
+ }
+
+ .agent-header {
+ padding: 20px 20px 0 20px;
gap: 12px;
}
- .use-button {
+ .agent-icon {
+ width: 48px;
+ height: 48px;
+ font-size: 28px;
+ }
+
+ .agent-info h3 {
+ font-size: 18px;
+ }
+
+ .agent-description {
+ margin: 0 20px 20px 20px;
+ font-size: 14px;
+ }
+
+ .agent-footer {
+ padding: 16px 20px 20px 20px;
+ flex-direction: column;
+ gap: 12px;
+ align-items: stretch;
+ }
+
+ .agent-category {
+ text-align: center;
+ }
+
+ .try-btn {
width: 100%;
+ text-align: center;
+ padding: 12px 20px;
+ border-radius: 12px;
}
}
\ No newline at end of file