|
15 | 15 | --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
16 | 16 | } |
17 | 17 |
|
| 18 | +/* Dark Theme Variables */ |
| 19 | +[data-theme="dark"] { |
| 20 | + --primary-color: #818cf8; |
| 21 | + --primary-dark: #6366f1; |
| 22 | + --secondary-color: #34d399; |
| 23 | + --accent-color: #fbbf24; |
| 24 | + --dark-bg: #0f172a; |
| 25 | + --darker-bg: #020617; |
| 26 | + --light-bg: #1e293b; |
| 27 | + --text-primary: #f1f5f9; |
| 28 | + --text-secondary: #cbd5e1; |
| 29 | + --border-color: #334155; |
| 30 | + --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); |
| 31 | + --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.4); |
| 32 | +} |
| 33 | + |
18 | 34 | * { |
19 | 35 | margin: 0; |
20 | 36 | padding: 0; |
@@ -100,46 +116,75 @@ body { |
100 | 116 | height: 80px; |
101 | 117 | } |
102 | 118 |
|
103 | | -/* Technology Logo Cards */ |
104 | | -.tech-logo-card { |
105 | | - background: white; |
106 | | - border-radius: 16px; |
107 | | - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
108 | | - transition: all 0.3s ease; |
109 | | - border: 1px solid var(--border-color); |
| 119 | +/* Modern Provider Cards */ |
| 120 | +.provider-card { |
| 121 | + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); |
| 122 | + border-radius: 20px; |
| 123 | + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| 124 | + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| 125 | + border: 2px solid transparent; |
110 | 126 | height: 100%; |
| 127 | + position: relative; |
| 128 | + overflow: hidden; |
111 | 129 | } |
112 | 130 |
|
113 | | -.tech-logo-card:hover { |
114 | | - transform: translateY(-5px); |
115 | | - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); |
| 131 | +.provider-card::before { |
| 132 | + content: ''; |
| 133 | + position: absolute; |
| 134 | + top: 0; |
| 135 | + left: 0; |
| 136 | + right: 0; |
| 137 | + height: 4px; |
| 138 | + background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color)); |
| 139 | + transform: scaleX(0); |
| 140 | + transition: transform 0.3s ease; |
| 141 | +} |
| 142 | + |
| 143 | +.provider-card:hover { |
| 144 | + transform: translateY(-8px) scale(1.02); |
| 145 | + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); |
116 | 146 | border-color: var(--primary-color); |
117 | 147 | } |
118 | 148 |
|
119 | | -.tech-logo { |
| 149 | +.provider-card:hover::before { |
| 150 | + transform: scaleX(1); |
| 151 | +} |
| 152 | + |
| 153 | +.provider-icon { |
120 | 154 | display: flex; |
121 | 155 | justify-content: center; |
122 | 156 | align-items: center; |
123 | | - margin-bottom: 1rem; |
| 157 | + margin-bottom: 1.5rem; |
| 158 | + height: 60px; |
124 | 159 | } |
125 | 160 |
|
126 | | -.tech-logo i { |
| 161 | +.provider-icon i { |
| 162 | + font-size: 2.5rem; |
| 163 | + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| 164 | + -webkit-background-clip: text; |
| 165 | + -webkit-text-fill-color: transparent; |
| 166 | + background-clip: text; |
127 | 167 | transition: all 0.3s ease; |
128 | 168 | } |
129 | 169 |
|
130 | | -.tech-logo-card:hover .tech-logo i { |
131 | | - transform: scale(1.1); |
| 170 | +.provider-card:hover .provider-icon i { |
| 171 | + transform: scale(1.1) rotate(5deg); |
132 | 172 | } |
133 | 173 |
|
134 | | -.tech-logo-card h6 { |
135 | | - font-weight: 600; |
| 174 | +.provider-card h6 { |
| 175 | + font-weight: 700; |
136 | 176 | color: var(--text-primary); |
137 | | - margin-bottom: 0.5rem; |
| 177 | + margin-bottom: 0.75rem; |
| 178 | + font-size: 1.1rem; |
| 179 | + text-align: center; |
138 | 180 | } |
139 | 181 |
|
140 | | -.tech-logo-card small { |
| 182 | +.provider-card small { |
141 | 183 | color: var(--text-secondary); |
142 | | - font-size: 0.85rem; |
| 184 | + font-size: 0.9rem; |
| 185 | + text-align: center; |
| 186 | + display: block; |
| 187 | + line-height: 1.4; |
143 | 188 | } |
144 | 189 | margin: 0 auto; |
145 | 190 | display: flex; |
@@ -222,61 +267,19 @@ body { |
222 | 267 | min-height: calc(100vh - 80px); |
223 | 268 | } |
224 | 269 |
|
225 | | -/* Sidebar */ |
226 | | -.sidebar { |
227 | | - background: white; |
228 | | - border-right: 1px solid var(--border-color); |
229 | | - min-height: calc(100vh - 80px); |
230 | | - position: sticky; |
231 | | - top: 80px; |
232 | | - box-shadow: var(--shadow); |
233 | | -} |
234 | | - |
235 | | -.sidebar-content { |
236 | | - padding: 2rem 1.5rem; |
237 | | -} |
238 | | - |
239 | | -.sidebar-header h5 { |
240 | | - color: var(--primary-color); |
241 | | - font-weight: 600; |
242 | | - margin-bottom: 1.5rem; |
243 | | - padding-bottom: 1rem; |
244 | | - border-bottom: 2px solid var(--border-color); |
245 | | -} |
246 | | - |
247 | | -.sidebar-nav .nav-link { |
248 | | - color: var(--text-secondary); |
249 | | - padding: 0.75rem 1rem; |
250 | | - margin: 0.25rem 0; |
251 | | - border-radius: 8px; |
252 | | - transition: all 0.3s ease; |
253 | | - font-weight: 500; |
254 | | - text-decoration: none; |
255 | | -} |
256 | | - |
257 | | -.sidebar-nav .nav-link:hover { |
258 | | - color: var(--primary-color); |
259 | | - background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1)); |
260 | | - transform: translateX(5px); |
261 | | -} |
262 | | - |
263 | | -.sidebar-nav .nav-link i { |
264 | | - width: 20px; |
265 | | - text-align: center; |
266 | | - margin-right: 0.5rem; |
267 | | -} |
268 | | - |
269 | | -/* Content Area */ |
270 | | -.content-area { |
271 | | - padding: 2rem; |
272 | | -} |
273 | | - |
| 270 | +/* Content Area - Full Width */ |
274 | 271 | .content-wrapper { |
275 | 272 | background: white; |
276 | 273 | border-radius: 16px; |
277 | 274 | padding: 2rem; |
278 | 275 | box-shadow: var(--shadow); |
279 | 276 | border: 1px solid var(--border-color); |
| 277 | + margin-top: 2rem; |
| 278 | +} |
| 279 | + |
| 280 | +/* Content Area - Full Width */ |
| 281 | +.content-area { |
| 282 | + padding: 2rem; |
280 | 283 | } |
281 | 284 |
|
282 | 285 | .page-header { |
@@ -420,13 +423,6 @@ body { |
420 | 423 |
|
421 | 424 | /* Responsive Design */ |
422 | 425 | @media (max-width: 991.98px) { |
423 | | - .sidebar { |
424 | | - position: static; |
425 | | - min-height: auto; |
426 | | - border-right: none; |
427 | | - border-bottom: 1px solid var(--border-color); |
428 | | - } |
429 | | - |
430 | 426 | .content-area { |
431 | 427 | padding: 1rem; |
432 | 428 | } |
|
0 commit comments