jessikat29 commited on
Commit
5eb286b
·
verified ·
1 Parent(s): eec4949

I need total white background and transparent headers and footers. It should be dark and light mode supported

Browse files
Files changed (2) hide show
  1. index.html +75 -39
  2. style.css +132 -38
index.html CHANGED
@@ -15,24 +15,32 @@
15
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" />
16
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
17
  </head>
18
- <body class="bg-gradient-to-br from-slate-50 to-blue-50/30 min-h-screen">
19
  <!-- Header -->
20
- <header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-0">
21
- <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
22
  <div class="flex justify-between items-center h-16">
23
  <div class="flex items-center">
24
  <div class="flex-shrink-0">
25
- <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">OneSearch</h1>
26
- </div>
27
  </div>
28
  <div class="flex items-center space-x-6">
 
 
 
 
 
 
 
 
29
  <nav class="hidden md:flex items-center space-x-8">
30
- <a href="product.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Products</a>
31
- <a href="service.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Services</a>
32
- <a href="reviews.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Reviews</a>
33
- <a href="wallet.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Wallet</a>
34
  </nav>
35
- <button id="auth-button" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-2.5 rounded-full text-sm font-medium shadow-lg shadow-blue-500/25 transition-all duration-200 hover:shadow-xl hover:scale-105">
36
  Sign In
37
  </button>
38
  </div>
@@ -48,10 +56,10 @@
48
  <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-2xl mb-6">
49
  <i data-feather="search" class="h-10 w-10 text-white"></i>
50
  </div>
51
- <h1 class="text-7xl font-thin text-gray-900 mb-4 tracking-tight">OneSearch</h1>
52
- <h2 class="text-3xl font-light text-gray-600 mb-4">All you need is One Search</h2>
53
- <p class="text-lg text-gray-500 max-w-2xl mx-auto">Discover trusted products and services through our problem-first discovery engine powered by community recommendations</p>
54
- </div>
55
 
56
  <!-- Search Interface -->
57
  <div class="relative mb-12 max-w-2xl mx-auto">
@@ -60,26 +68,25 @@
60
  </div>
61
  <input
62
  type="text"
63
- id="search-input"
64
- class="block w-full pl-14 pr-6 py-5 bg-white/70 backdrop-blur-sm border border-gray-200 rounded-2xl text-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 shadow-xl transition-all duration-300 placeholder-gray-400"
65
- placeholder="Search for products, services, or solutions..."
66
  >
67
  <div class="absolute inset-y-0 right-0 pr-6 flex items-center">
68
  <button class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105">
69
- Search
70
  </button>
71
  </div>
72
  </div>
73
-
74
  <!-- Quick Actions -->
75
  <div class="flex justify-center items-center space-x-2 text-sm">
76
- <a href="product.html" class="inline-flex items-center px-4 py-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-all duration-200">Find Products</a>
77
- <span class="text-gray-300">•</span>
78
- <a href="service.html" class="inline-flex items-center px-4 py-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-all duration-200">Find Services</a>
79
- <span class="text-gray-300">•</span>
80
- <a href="reviews.html" class="inline-flex items-center px-4 py-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-all duration-200">Read Reviews</a>
81
  </div>
82
- </div>
83
 
84
  <!-- Features Section -->
85
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
@@ -108,26 +115,55 @@
108
  </div>
109
  </main>
110
  <!-- Footer -->
111
- <footer class="bg-gradient-to-r from-transparent via-white/50 to-transparent backdrop-blur-sm border-0">
112
- <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-8">
113
- <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
114
- <div class="flex space-x-8 text-sm text-gray-600">
115
- <a href="about.html" class="hover:text-gray-900 transition-colors duration-200">About</a>
116
- <a href="privacy.html" class="hover:text-gray-900 transition-colors duration-200">Privacy</a>
117
- <a href="terms.html" class="hover:text-gray-900 transition-colors duration-200">Terms</a>
118
- <a href="contact.html" class="hover:text-gray-900 transition-colors duration-200">Contact</a>
 
 
 
 
119
  </div>
120
- <p class="text-sm text-gray-500">
121
- © 2025 OneSearch. Built with trust and transparency.
122
- </p>
123
- </div>
124
- </div>
125
  </footer>
126
  <!-- Scripts -->
127
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
128
  <script>
129
  feather.replace();
130
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
131
  // Simple search functionality
132
  document.getElementById('search-input').addEventListener('keypress', function(e) {
133
  if (e.key === 'Enter') {
@@ -150,6 +186,6 @@
150
  this.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium';
151
  }
152
  });
153
- </script>
154
  </body>
155
  </html>
 
15
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" />
16
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
17
  </head>
18
+ <body class="bg-white dark:bg-gray-900 min-h-screen transition-colors duration-300">
19
  <!-- Header -->
20
+ <header class="fixed top-0 left-0 right-0 z-50 bg-transparent backdrop-blur-md border-0">
21
+ <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
22
  <div class="flex justify-between items-center h-16">
23
  <div class="flex items-center">
24
  <div class="flex-shrink-0">
25
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent dark:from-blue-400 dark:to-purple-400">OneSearch</h1>
26
+ </div>
27
  </div>
28
  <div class="flex items-center space-x-6">
29
+ <button id="theme-toggle" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
30
+ <svg id="sun-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20">
31
+ <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
32
+ </svg>
33
+ <svg id="moon-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
34
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
35
+ </svg>
36
+ </button>
37
  <nav class="hidden md:flex items-center space-x-8">
38
+ <a href="product.html" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Products</a>
39
+ <a href="service.html" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Services</a>
40
+ <a href="reviews.html" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Reviews</a>
41
+ <a href="wallet.html" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200">Wallet</a>
42
  </nav>
43
+ <button id="auth-button" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-2.5 rounded-full text-sm font-medium shadow-lg shadow-blue-500/25 transition-all duration-200 hover:shadow-xl hover:scale-105">
44
  Sign In
45
  </button>
46
  </div>
 
56
  <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-2xl mb-6">
57
  <i data-feather="search" class="h-10 w-10 text-white"></i>
58
  </div>
59
+ <h1 class="text-7xl font-thin text-gray-900 dark:text-white mb-4 tracking-tight">OneSearch</h1>
60
+ <h2 class="text-3xl font-light text-gray-600 dark:text-gray-300 mb-4">All you need is One Search</h2>
61
+ <p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">Discover trusted products and services through our problem-first discovery engine powered by community recommendations</p>
62
+ </div>
63
 
64
  <!-- Search Interface -->
65
  <div class="relative mb-12 max-w-2xl mx-auto">
 
68
  </div>
69
  <input
70
  type="text"
71
+ id="search-input"
72
+ class="block w-full pl-14 pr-6 py-5 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border border-gray-200 dark:border-gray-600 rounded-2xl text-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 shadow-xl transition-all duration-300 placeholder-gray-400 dark:placeholder-gray-500 dark:text-white"
73
+ placeholder="Search for products, services, or solutions..."
74
  >
75
  <div class="absolute inset-y-0 right-0 pr-6 flex items-center">
76
  <button class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105">
77
+ Search
78
  </button>
79
  </div>
80
  </div>
 
81
  <!-- Quick Actions -->
82
  <div class="flex justify-center items-center space-x-2 text-sm">
83
+ <a href="product.html" class="inline-flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all duration-200">Find Products</a>
84
+ <span class="text-gray-300 dark:text-gray-600">•</span>
85
+ <a href="service.html" class="inline-flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all duration-200">Find Services</a>
86
+ <span class="text-gray-300 dark:text-gray-600">•</span>
87
+ <a href="reviews.html" class="inline-flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all duration-200">Read Reviews</a>
88
  </div>
89
+ </div>
90
 
91
  <!-- Features Section -->
92
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
 
115
  </div>
116
  </main>
117
  <!-- Footer -->
118
+ <footer class="bg-transparent backdrop-blur-sm border-0">
119
+ <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-8">
120
+ <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
121
+ <div class="flex space-x-8 text-sm text-gray-600 dark:text-gray-400">
122
+ <a href="about.html" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About</a>
123
+ <a href="privacy.html" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Privacy</a>
124
+ <a href="terms.html" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Terms</a>
125
+ <a href="contact.html" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact</a>
126
+ </div>
127
+ <p class="text-sm text-gray-500 dark:text-gray-400">
128
+ © 2025 OneSearch. Built with trust and transparency.
129
+ </p>
130
  </div>
131
+ </div>
 
 
 
 
132
  </footer>
133
  <!-- Scripts -->
134
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
135
  <script>
136
  feather.replace();
137
 
138
+ // Theme toggle functionality
139
+ const themeToggle = document.getElementById('theme-toggle');
140
+ const sunIcon = document.getElementById('sun-icon');
141
+ const moonIcon = document.getElementById('moon-icon');
142
+ const html = document.documentElement;
143
+
144
+ // Check for saved theme preference or default to light
145
+ const currentTheme = localStorage.getItem('theme') || 'light';
146
+ if (currentTheme === 'dark') {
147
+ html.classList.add('dark');
148
+ sunIcon.classList.remove('hidden');
149
+ moonIcon.classList.add('hidden');
150
+ }
151
+
152
+ themeToggle.addEventListener('click', () => {
153
+ html.classList.toggle('dark');
154
+ const isDark = html.classList.contains('dark');
155
+
156
+ if (isDark) {
157
+ sunIcon.classList.remove('hidden');
158
+ moonIcon.classList.add('hidden');
159
+ localStorage.setItem('theme', 'dark');
160
+ } else {
161
+ sunIcon.classList.add('hidden');
162
+ moonIcon.classList.remove('hidden');
163
+ localStorage.setItem('theme', 'light');
164
+ }
165
+ });
166
+
167
  // Simple search functionality
168
  document.getElementById('search-input').addEventListener('keypress', function(e) {
169
  if (e.key === 'Enter') {
 
186
  this.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium';
187
  }
188
  });
189
+ </script>
190
  </body>
191
  </html>
style.css CHANGED
@@ -1,5 +1,5 @@
1
 
2
- /* OneSearch Custom Styles with shadcn/ui Inspiration */
3
 
4
  /* Color Variables */
5
  :root {
@@ -7,16 +7,16 @@
7
  --secondary-color: #10b981; /* green-500 */
8
  --primary-hover: #2563eb; /* blue-600 */
9
  --secondary-hover: #059669; /* green-600 */
10
- --gray-50: #f9fafb;
11
- --gray-100: #f3f4f6;
12
- --gray-200: #e5e7eb;
13
- --gray-300: #d1d5db;
14
- --gray-400: #9ca3af;
15
- --gray-500: #6b7280;
16
- --gray-600: #4b5563;
17
- --gray-700: #374151;
18
- --gray-800: #1f2937;
19
- --gray-900: #111827;
20
  --border-radius: 0.75rem;
21
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
22
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -26,6 +26,27 @@
26
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
27
  }
28
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  /* Global Styles */
30
  * {
31
  box-sizing: border-box;
@@ -36,16 +57,28 @@ body {
36
  line-height: 1.6;
37
  -webkit-font-smoothing: antialiased;
38
  -moz-osx-font-smoothing: grayscale;
 
39
  }
40
 
 
 
 
 
 
 
 
 
41
  /* Header Styles */
42
  header {
43
  backdrop-filter: blur(20px);
44
  -webkit-backdrop-filter: blur(20px);
45
- background-color: rgba(255, 255, 255, 0.8);
46
  border: 0 !important;
47
  }
48
 
 
 
 
49
  /* Glassmorphism effects */
50
  .glass {
51
  background: rgba(255, 255, 255, 0.25);
@@ -54,10 +87,8 @@ header {
54
  border: 1px solid rgba(255, 255, 255, 0.18);
55
  }
56
 
57
- .glass-dark {
58
- background: rgba(0, 0, 0, 0.25);
59
- backdrop-filter: blur(10px);
60
- -webkit-backdrop-filter: blur(10px);
61
  border: 1px solid rgba(255, 255, 255, 0.1);
62
  }
63
  /* Trust Score Styling */
@@ -126,12 +157,15 @@ header {
126
  /* Mind Map Styles */
127
  #mindmap-container {
128
  position: relative;
129
- background: linear-gradient(135deg, rgba(243, 244, 246, 0.8), rgba(229, 231, 235, 0.6));
130
  border-radius: var(--border-radius);
131
  overflow: hidden;
132
  box-shadow: var(--shadow-lg);
133
  }
134
 
 
 
 
135
  .mindmap-node {
136
  cursor: pointer;
137
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -154,13 +188,18 @@ header {
154
  color: white;
155
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
156
  }
157
-
158
  .mindmap-node.tertiary {
159
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
160
  color: var(--gray-700);
161
  border: 1px solid var(--gray-300);
162
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
163
  }
 
 
 
 
 
 
164
  /* Search Results Styling */
165
  .search-result {
166
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -171,22 +210,32 @@ header {
171
  overflow: hidden;
172
  }
173
 
 
 
 
 
174
  .search-result:hover {
175
  border-left-color: var(--primary-color);
176
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(249, 250, 251, 0.9));
177
  transform: translateX(4px);
178
  box-shadow: var(--shadow-lg);
179
  }
180
 
 
 
 
181
  .search-result-item {
182
  padding: 2rem;
183
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
184
  }
185
 
 
 
 
 
186
  .search-result-item:last-child {
187
  border-bottom: none;
188
  }
189
-
190
  .result-score {
191
  display: flex;
192
  align-items: center;
@@ -281,11 +330,20 @@ header {
281
  box-shadow: var(--shadow);
282
  }
283
 
 
 
 
 
 
284
  .review-card:hover {
285
  box-shadow: var(--shadow-xl);
286
  transform: translateY(-2px);
287
  background: rgba(255, 255, 255, 0.95);
288
  }
 
 
 
 
289
  .review-header {
290
  display: flex;
291
  justify-content: space-between;
@@ -310,7 +368,6 @@ header {
310
  font-weight: 600;
311
  font-size: 14px;
312
  }
313
-
314
  .review-dimensions {
315
  display: grid;
316
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -321,6 +378,9 @@ header {
321
  border-radius: 6px;
322
  }
323
 
 
 
 
324
  .dimension-item {
325
  text-align: center;
326
  }
@@ -340,7 +400,6 @@ header {
340
  .dimension-negative {
341
  color: #ef4444;
342
  }
343
-
344
  .review-actions {
345
  display: flex;
346
  justify-content: space-between;
@@ -349,6 +408,9 @@ header {
349
  border-top: 1px solid var(--gray-200);
350
  }
351
 
 
 
 
352
  .peer-agreements {
353
  display: flex;
354
  gap: 16px;
@@ -366,20 +428,31 @@ header {
366
  cursor: pointer;
367
  transition: background-color 0.2s ease;
368
  }
369
-
370
  .agreement-btn:hover {
371
  background-color: var(--gray-100);
372
  }
373
 
 
 
 
 
374
  .agreement-agree:hover {
375
  background-color: rgba(16, 185, 129, 0.1);
376
  color: #10b981;
377
  }
378
 
 
 
 
 
379
  .agreement-disagree:hover {
380
  background-color: rgba(239, 68, 68, 0.1);
381
  color: #ef4444;
382
  }
 
 
 
 
383
  /* Wallet Styles */
384
  .wallet-card {
385
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
@@ -526,12 +599,20 @@ header {
526
  border-bottom: 1px solid var(--gray-200);
527
  }
528
 
 
 
 
 
529
  .modal-title {
530
  font-size: 1.25rem;
531
  font-weight: 600;
532
  color: var(--gray-900);
533
  }
534
 
 
 
 
 
535
  .modal-close {
536
  background: none;
537
  border: none;
@@ -546,6 +627,9 @@ header {
546
  color: var(--gray-600);
547
  }
548
 
 
 
 
549
  .modal-content {
550
  padding: 1.5rem;
551
  }
@@ -571,6 +655,15 @@ header {
571
  font-size: 14px;
572
  transition: all 0.2s ease;
573
  background: rgba(255, 255, 255, 0.8);
 
 
 
 
 
 
 
 
 
574
  }
575
 
576
  .form-input:focus,
@@ -582,16 +675,31 @@ header {
582
  background: white;
583
  }
584
 
 
 
 
 
 
 
585
  .form-input::placeholder,
586
  .form-textarea::placeholder {
587
  color: var(--gray-400);
588
  }
 
 
 
 
 
589
  .modal-actions {
590
  display: flex;
591
  gap: 12px;
592
  padding: 1.5rem;
593
  border-top: 1px solid var(--gray-200);
594
  }
 
 
 
 
595
  .btn {
596
  padding: 12px 20px;
597
  border-radius: calc(var(--border-radius) - 2px);
@@ -809,18 +917,4 @@ textarea:focus {
809
  ::-webkit-scrollbar-thumb:hover {
810
  background: var(--gray-400);
811
  }
812
- /* Dark mode support (future enhancement) */
813
- @media (prefers-color-scheme: dark) {
814
- :root {
815
- --gray-50: #1f2937;
816
- --gray-100: #374151;
817
- --gray-200: #4b5563;
818
- --gray-300: #6b7280;
819
- --gray-400: #9ca3af;
820
- --gray-500: #d1d5db;
821
- --gray-600: #e5e7eb;
822
- --gray-700: #f3f4f6;
823
- --gray-800: #f9fafb;
824
- --gray-900: #ffffff;
825
- }
826
- }
 
1
 
2
+ /* OneSearch Custom Styles with shadcn/ui Inspiration and Dark Mode Support */
3
 
4
  /* Color Variables */
5
  :root {
 
7
  --secondary-color: #10b981; /* green-500 */
8
  --primary-hover: #2563eb; /* blue-600 */
9
  --secondary-hover: #059669; /* green-600 */
10
+ --gray-50: #ffffff;
11
+ --gray-100: #f9fafb;
12
+ --gray-200: #f3f4f6;
13
+ --gray-300: #e5e7eb;
14
+ --gray-400: #d1d5db;
15
+ --gray-500: #9ca3af;
16
+ --gray-600: #6b7280;
17
+ --gray-700: #4b5563;
18
+ --gray-800: #374151;
19
+ --gray-900: #1f2937;
20
  --border-radius: 0.75rem;
21
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
22
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
26
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
27
  }
28
 
29
+ /* Dark mode variables */
30
+ .dark {
31
+ --gray-50: #111827;
32
+ --gray-100: #1f2937;
33
+ --gray-200: #374151;
34
+ --gray-300: #4b5563;
35
+ --gray-400: #6b7280;
36
+ --gray-500: #9ca3af;
37
+ --gray-600: #d1d5db;
38
+ --gray-700: #e5e7eb;
39
+ --gray-800: #f3f4f6;
40
+ --gray-900: #ffffff;
41
+
42
+ /* Dark mode shadow adjustments */
43
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
44
+ --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
45
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
46
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
47
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
48
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
49
+ }
50
  /* Global Styles */
51
  * {
52
  box-sizing: border-box;
 
57
  line-height: 1.6;
58
  -webkit-font-smoothing: antialiased;
59
  -moz-osx-font-smoothing: grayscale;
60
+ background-color: white;
61
  }
62
 
63
+ /* Dark mode transitions */
64
+ * {
65
+ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
66
+ }
67
+
68
+ .dark body {
69
+ background-color: #111827;
70
+ }
71
  /* Header Styles */
72
  header {
73
  backdrop-filter: blur(20px);
74
  -webkit-backdrop-filter: blur(20px);
75
+ background-color: rgba(255, 255, 255, 0.6);
76
  border: 0 !important;
77
  }
78
 
79
+ .dark header {
80
+ background-color: rgba(17, 24, 39, 0.6);
81
+ }
82
  /* Glassmorphism effects */
83
  .glass {
84
  background: rgba(255, 255, 255, 0.25);
 
87
  border: 1px solid rgba(255, 255, 255, 0.18);
88
  }
89
 
90
+ .dark .glass {
91
+ background: rgba(17, 24, 39, 0.25);
 
 
92
  border: 1px solid rgba(255, 255, 255, 0.1);
93
  }
94
  /* Trust Score Styling */
 
157
  /* Mind Map Styles */
158
  #mindmap-container {
159
  position: relative;
160
+ background: rgba(255, 255, 255, 0.8);
161
  border-radius: var(--border-radius);
162
  overflow: hidden;
163
  box-shadow: var(--shadow-lg);
164
  }
165
 
166
+ .dark #mindmap-container {
167
+ background: rgba(31, 41, 55, 0.8);
168
+ }
169
  .mindmap-node {
170
  cursor: pointer;
171
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
188
  color: white;
189
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
190
  }
 
191
  .mindmap-node.tertiary {
192
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
193
  color: var(--gray-700);
194
  border: 1px solid var(--gray-300);
195
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
196
  }
197
+
198
+ .dark .mindmap-node.tertiary {
199
+ background: linear-gradient(135deg, var(--gray-800), var(--gray-700));
200
+ color: var(--gray-200);
201
+ border: 1px solid var(--gray-600);
202
+ }
203
  /* Search Results Styling */
204
  .search-result {
205
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
210
  overflow: hidden;
211
  }
212
 
213
+ .dark .search-result {
214
+ background: #1f2937;
215
+ }
216
+
217
  .search-result:hover {
218
  border-left-color: var(--primary-color);
219
+ background: rgba(255, 255, 255, 0.95);
220
  transform: translateX(4px);
221
  box-shadow: var(--shadow-lg);
222
  }
223
 
224
+ .dark .search-result:hover {
225
+ background: rgba(31, 41, 55, 0.95);
226
+ }
227
  .search-result-item {
228
  padding: 2rem;
229
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
230
  }
231
 
232
+ .dark .search-result-item {
233
+ border-bottom-color: rgba(75, 85, 99, 0.5);
234
+ }
235
+
236
  .search-result-item:last-child {
237
  border-bottom: none;
238
  }
 
239
  .result-score {
240
  display: flex;
241
  align-items: center;
 
330
  box-shadow: var(--shadow);
331
  }
332
 
333
+ .dark .review-card {
334
+ background: rgba(31, 41, 55, 0.9);
335
+ border-color: var(--gray-700);
336
+ }
337
+
338
  .review-card:hover {
339
  box-shadow: var(--shadow-xl);
340
  transform: translateY(-2px);
341
  background: rgba(255, 255, 255, 0.95);
342
  }
343
+
344
+ .dark .review-card:hover {
345
+ background: rgba(31, 41, 55, 0.95);
346
+ }
347
  .review-header {
348
  display: flex;
349
  justify-content: space-between;
 
368
  font-weight: 600;
369
  font-size: 14px;
370
  }
 
371
  .review-dimensions {
372
  display: grid;
373
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 
378
  border-radius: 6px;
379
  }
380
 
381
+ .dark .review-dimensions {
382
+ background-color: var(--gray-800);
383
+ }
384
  .dimension-item {
385
  text-align: center;
386
  }
 
400
  .dimension-negative {
401
  color: #ef4444;
402
  }
 
403
  .review-actions {
404
  display: flex;
405
  justify-content: space-between;
 
408
  border-top: 1px solid var(--gray-200);
409
  }
410
 
411
+ .dark .review-actions {
412
+ border-top-color: var(--gray-700);
413
+ }
414
  .peer-agreements {
415
  display: flex;
416
  gap: 16px;
 
428
  cursor: pointer;
429
  transition: background-color 0.2s ease;
430
  }
 
431
  .agreement-btn:hover {
432
  background-color: var(--gray-100);
433
  }
434
 
435
+ .dark .agreement-btn:hover {
436
+ background-color: var(--gray-700);
437
+ }
438
+
439
  .agreement-agree:hover {
440
  background-color: rgba(16, 185, 129, 0.1);
441
  color: #10b981;
442
  }
443
 
444
+ .dark .agreement-agree:hover {
445
+ background-color: rgba(16, 185, 129, 0.2);
446
+ }
447
+
448
  .agreement-disagree:hover {
449
  background-color: rgba(239, 68, 68, 0.1);
450
  color: #ef4444;
451
  }
452
+
453
+ .dark .agreement-disagree:hover {
454
+ background-color: rgba(239, 68, 68, 0.2);
455
+ }
456
  /* Wallet Styles */
457
  .wallet-card {
458
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
 
599
  border-bottom: 1px solid var(--gray-200);
600
  }
601
 
602
+ .dark .modal-header {
603
+ border-bottom-color: var(--gray-700);
604
+ }
605
+
606
  .modal-title {
607
  font-size: 1.25rem;
608
  font-weight: 600;
609
  color: var(--gray-900);
610
  }
611
 
612
+ .dark .modal-title {
613
+ color: var(--gray-100);
614
+ }
615
+
616
  .modal-close {
617
  background: none;
618
  border: none;
 
627
  color: var(--gray-600);
628
  }
629
 
630
+ .dark .modal-close:hover {
631
+ color: var(--gray-300);
632
+ }
633
  .modal-content {
634
  padding: 1.5rem;
635
  }
 
655
  font-size: 14px;
656
  transition: all 0.2s ease;
657
  background: rgba(255, 255, 255, 0.8);
658
+ color: var(--gray-900);
659
+ }
660
+
661
+ .dark .form-input,
662
+ .dark .form-select,
663
+ .dark .form-textarea {
664
+ background: rgba(31, 41, 55, 0.8);
665
+ border-color: var(--gray-600);
666
+ color: var(--gray-100);
667
  }
668
 
669
  .form-input:focus,
 
675
  background: white;
676
  }
677
 
678
+ .dark .form-input:focus,
679
+ .dark .form-select:focus,
680
+ .dark .form-textarea:focus {
681
+ background: rgba(31, 41, 55, 1);
682
+ }
683
+
684
  .form-input::placeholder,
685
  .form-textarea::placeholder {
686
  color: var(--gray-400);
687
  }
688
+
689
+ .dark .form-input::placeholder,
690
+ .dark .form-textarea::placeholder {
691
+ color: var(--gray-500);
692
+ }
693
  .modal-actions {
694
  display: flex;
695
  gap: 12px;
696
  padding: 1.5rem;
697
  border-top: 1px solid var(--gray-200);
698
  }
699
+
700
+ .dark .modal-actions {
701
+ border-top-color: var(--gray-700);
702
+ }
703
  .btn {
704
  padding: 12px 20px;
705
  border-radius: calc(var(--border-radius) - 2px);
 
917
  ::-webkit-scrollbar-thumb:hover {
918
  background: var(--gray-400);
919
  }
920
+ /* Remove old media query since we now use proper dark mode classes */