vectra-client 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop.yml +77 -37
  3. data/CHANGELOG.md +49 -6
  4. data/README.md +52 -393
  5. data/docs/Gemfile +9 -0
  6. data/docs/_config.yml +37 -0
  7. data/docs/_layouts/default.html +14 -0
  8. data/docs/_layouts/home.html +187 -0
  9. data/docs/_layouts/page.html +82 -0
  10. data/docs/_site/api/overview/index.html +145 -0
  11. data/docs/_site/assets/main.css +649 -0
  12. data/docs/_site/assets/main.css.map +1 -0
  13. data/docs/_site/assets/minima-social-icons.svg +33 -0
  14. data/docs/_site/assets/style.css +295 -0
  15. data/docs/_site/community/contributing/index.html +110 -0
  16. data/docs/_site/examples/basic-usage/index.html +117 -0
  17. data/docs/_site/examples/index.html +58 -0
  18. data/docs/_site/feed.xml +1 -0
  19. data/docs/_site/guides/getting-started/index.html +106 -0
  20. data/docs/_site/guides/installation/index.html +82 -0
  21. data/docs/_site/index.html +92 -0
  22. data/docs/_site/providers/index.html +119 -0
  23. data/docs/_site/providers/pgvector/index.html +155 -0
  24. data/docs/_site/providers/pinecone/index.html +121 -0
  25. data/docs/_site/providers/qdrant/index.html +124 -0
  26. data/docs/_site/providers/weaviate/index.html +123 -0
  27. data/docs/_site/robots.txt +1 -0
  28. data/docs/_site/sitemap.xml +39 -0
  29. data/docs/api/overview.md +126 -0
  30. data/docs/assets/style.css +927 -0
  31. data/docs/community/contributing.md +89 -0
  32. data/docs/examples/basic-usage.md +102 -0
  33. data/docs/examples/index.md +54 -0
  34. data/docs/guides/getting-started.md +90 -0
  35. data/docs/guides/installation.md +67 -0
  36. data/docs/guides/performance.md +200 -0
  37. data/docs/index.md +37 -0
  38. data/docs/providers/index.md +81 -0
  39. data/docs/providers/pgvector.md +95 -0
  40. data/docs/providers/pinecone.md +72 -0
  41. data/docs/providers/qdrant.md +73 -0
  42. data/docs/providers/weaviate.md +72 -0
  43. data/lib/vectra/batch.rb +148 -0
  44. data/lib/vectra/cache.rb +261 -0
  45. data/lib/vectra/configuration.rb +6 -1
  46. data/lib/vectra/pool.rb +256 -0
  47. data/lib/vectra/streaming.rb +153 -0
  48. data/lib/vectra/version.rb +1 -1
  49. data/lib/vectra.rb +4 -0
  50. data/netlify.toml +12 -0
  51. metadata +58 -5
  52. data/IMPLEMENTATION_GUIDE.md +0 -686
  53. data/NEW_FEATURES_v0.2.0.md +0 -459
  54. data/RELEASE_CHECKLIST_v0.2.0.md +0 -383
  55. data/USAGE_EXAMPLES.md +0 -787
@@ -0,0 +1,927 @@
1
+ /* ============================================
2
+ Vectra Documentation - Clean Dark Theme
3
+ ============================================ */
4
+
5
+ /* CSS Custom Properties */
6
+ :root {
7
+ /* Color Palette - Clean Green Accent */
8
+ --tma-color-bg-primary: #0a0a0f;
9
+ --tma-color-bg-secondary: #111118;
10
+ --tma-color-bg-tertiary: #1a1a22;
11
+ --tma-color-bg-elevated: #222230;
12
+ --tma-color-bg-hover: #2a2a3a;
13
+
14
+ /* Accent Colors - Based on #05df72 */
15
+ --tma-color-accent-primary: #05df72;
16
+ --tma-color-accent-light: #2ee889;
17
+ --tma-color-accent-dark: #04b85e;
18
+ --tma-color-accent-muted: rgba(5, 223, 114, 0.15);
19
+
20
+ /* Text Colors */
21
+ --tma-color-text-primary: #f4f4f5;
22
+ --tma-color-text-secondary: #a1a1aa;
23
+ --tma-color-text-muted: #71717a;
24
+ --tma-color-text-accent: #05df72;
25
+
26
+ /* Border Colors */
27
+ --tma-color-border: rgba(255, 255, 255, 0.08);
28
+ --tma-color-border-hover: rgba(5, 223, 114, 0.4);
29
+
30
+ /* Shadows */
31
+ --tma-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
32
+ --tma-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
33
+ --tma-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
34
+ --tma-shadow-glow: 0 0 30px rgba(5, 223, 114, 0.2);
35
+
36
+ /* Typography */
37
+ --tma-font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
38
+ --tma-font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
39
+
40
+ /* Spacing */
41
+ --tma-spacing-xs: 0.25rem;
42
+ --tma-spacing-sm: 0.5rem;
43
+ --tma-spacing-md: 1rem;
44
+ --tma-spacing-lg: 1.5rem;
45
+ --tma-spacing-xl: 2rem;
46
+ --tma-spacing-2xl: 3rem;
47
+ --tma-spacing-3xl: 4rem;
48
+
49
+ /* Border Radius */
50
+ --tma-radius-sm: 6px;
51
+ --tma-radius-md: 10px;
52
+ --tma-radius-lg: 16px;
53
+ --tma-radius-xl: 24px;
54
+
55
+ /* Transitions */
56
+ --tma-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
57
+ --tma-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
58
+ --tma-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
59
+
60
+ /* Layout */
61
+ --tma-max-width: 1400px;
62
+ --tma-sidebar-width: 240px;
63
+ --tma-header-height: 64px;
64
+ }
65
+
66
+ /* Base Reset */
67
+ *, *::before, *::after {
68
+ margin: 0;
69
+ padding: 0;
70
+ box-sizing: border-box;
71
+ }
72
+
73
+ /* Font Import */
74
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
75
+
76
+ /* Base Styles */
77
+ html {
78
+ scroll-behavior: smooth;
79
+ -webkit-font-smoothing: antialiased;
80
+ -moz-osx-font-smoothing: grayscale;
81
+ }
82
+
83
+ body {
84
+ font-family: var(--tma-font-family-primary);
85
+ font-size: 16px;
86
+ line-height: 1.7;
87
+ color: var(--tma-color-text-primary);
88
+ background: var(--tma-color-bg-primary);
89
+ min-height: 100vh;
90
+ }
91
+
92
+ /* ============================================
93
+ Header & Navigation
94
+ ============================================ */
95
+ .tma-header {
96
+ position: fixed;
97
+ top: 0;
98
+ left: 0;
99
+ right: 0;
100
+ height: var(--tma-header-height);
101
+ background: rgba(10, 10, 15, 0.95);
102
+ backdrop-filter: blur(12px);
103
+ border-bottom: 1px solid var(--tma-color-border);
104
+ z-index: 1000;
105
+ }
106
+
107
+ .tma-nav {
108
+ max-width: var(--tma-max-width);
109
+ margin: 0 auto;
110
+ padding: 0 var(--tma-spacing-xl);
111
+ height: 100%;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: space-between;
115
+ }
116
+
117
+ .tma-nav__brand {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: var(--tma-spacing-sm);
121
+ text-decoration: none;
122
+ font-size: 1.5rem;
123
+ font-weight: 800;
124
+ color: var(--tma-color-accent-primary);
125
+ letter-spacing: -0.02em;
126
+ }
127
+
128
+ .tma-nav__brand::before {
129
+ content: '◆';
130
+ font-size: 1.2rem;
131
+ }
132
+
133
+ .tma-nav__menu {
134
+ display: flex;
135
+ align-items: center;
136
+ gap: var(--tma-spacing-xs);
137
+ list-style: none;
138
+ }
139
+
140
+ .tma-nav__link {
141
+ display: flex;
142
+ align-items: center;
143
+ gap: var(--tma-spacing-xs);
144
+ padding: var(--tma-spacing-sm) var(--tma-spacing-md);
145
+ color: var(--tma-color-text-secondary);
146
+ text-decoration: none;
147
+ font-weight: 500;
148
+ font-size: 0.9rem;
149
+ border-radius: var(--tma-radius-sm);
150
+ transition: all var(--tma-transition-fast);
151
+ }
152
+
153
+ .tma-nav__link:hover {
154
+ color: var(--tma-color-text-primary);
155
+ background: var(--tma-color-bg-hover);
156
+ }
157
+
158
+ .tma-nav__link--github {
159
+ background: var(--tma-color-bg-tertiary);
160
+ border: 1px solid var(--tma-color-border);
161
+ }
162
+
163
+ .tma-nav__link--github:hover {
164
+ border-color: var(--tma-color-border-hover);
165
+ }
166
+
167
+ /* ============================================
168
+ Hero Section
169
+ ============================================ */
170
+ .tma-hero {
171
+ padding-top: calc(var(--tma-header-height) + var(--tma-spacing-3xl));
172
+ padding-bottom: var(--tma-spacing-3xl);
173
+ text-align: center;
174
+ position: relative;
175
+ }
176
+
177
+ .tma-hero__container {
178
+ max-width: 900px;
179
+ margin: 0 auto;
180
+ padding: 0 var(--tma-spacing-xl);
181
+ }
182
+
183
+ .tma-hero__badge {
184
+ display: inline-flex;
185
+ align-items: center;
186
+ gap: var(--tma-spacing-sm);
187
+ padding: var(--tma-spacing-xs) var(--tma-spacing-md);
188
+ background: var(--tma-color-accent-muted);
189
+ border: 1px solid rgba(5, 223, 114, 0.3);
190
+ border-radius: 100px;
191
+ font-size: 0.85rem;
192
+ font-weight: 500;
193
+ color: var(--tma-color-accent-primary);
194
+ margin-bottom: var(--tma-spacing-xl);
195
+ animation: fadeInUp 0.6s ease-out;
196
+ }
197
+
198
+ .tma-hero__badge::before {
199
+ content: '✨';
200
+ }
201
+
202
+ .tma-hero__title {
203
+ font-size: clamp(2.5rem, 6vw, 4.5rem);
204
+ font-weight: 800;
205
+ line-height: 1.1;
206
+ letter-spacing: -0.03em;
207
+ margin-bottom: var(--tma-spacing-lg);
208
+ animation: fadeInUp 0.6s ease-out 0.1s both;
209
+ color: var(--tma-color-text-primary);
210
+ }
211
+
212
+ .tma-hero__title-gradient {
213
+ color: var(--tma-color-accent-primary);
214
+ }
215
+
216
+ .tma-hero__subtitle {
217
+ font-size: clamp(1.1rem, 2vw, 1.35rem);
218
+ color: var(--tma-color-text-secondary);
219
+ max-width: 700px;
220
+ margin: 0 auto var(--tma-spacing-2xl);
221
+ line-height: 1.7;
222
+ animation: fadeInUp 0.6s ease-out 0.2s both;
223
+ }
224
+
225
+ .tma-hero__actions {
226
+ display: flex;
227
+ flex-wrap: wrap;
228
+ gap: var(--tma-spacing-md);
229
+ justify-content: center;
230
+ animation: fadeInUp 0.6s ease-out 0.3s both;
231
+ }
232
+
233
+ /* Buttons */
234
+ .tma-btn {
235
+ display: inline-flex;
236
+ align-items: center;
237
+ gap: var(--tma-spacing-sm);
238
+ padding: var(--tma-spacing-md) var(--tma-spacing-xl);
239
+ font-size: 1rem;
240
+ font-weight: 600;
241
+ text-decoration: none;
242
+ border-radius: var(--tma-radius-md);
243
+ transition: all var(--tma-transition-fast);
244
+ cursor: pointer;
245
+ border: none;
246
+ }
247
+
248
+ .tma-btn--primary {
249
+ background: var(--tma-color-accent-primary);
250
+ color: #0a0a0f;
251
+ }
252
+
253
+ .tma-btn--primary:hover {
254
+ background: var(--tma-color-accent-light);
255
+ transform: translateY(-2px);
256
+ box-shadow: var(--tma-shadow-glow);
257
+ }
258
+
259
+ .tma-btn--secondary {
260
+ background: var(--tma-color-bg-tertiary);
261
+ color: var(--tma-color-text-primary);
262
+ border: 1px solid var(--tma-color-border);
263
+ }
264
+
265
+ .tma-btn--secondary:hover {
266
+ background: var(--tma-color-bg-hover);
267
+ border-color: var(--tma-color-border-hover);
268
+ }
269
+
270
+ /* ============================================
271
+ Feature Cards
272
+ ============================================ */
273
+ .tma-features {
274
+ padding: var(--tma-spacing-3xl) var(--tma-spacing-xl);
275
+ max-width: var(--tma-max-width);
276
+ margin: 0 auto;
277
+ }
278
+
279
+ .tma-features__grid {
280
+ display: grid;
281
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
282
+ gap: var(--tma-spacing-lg);
283
+ }
284
+
285
+ .tma-feature-card {
286
+ padding: var(--tma-spacing-xl);
287
+ background: var(--tma-color-bg-secondary);
288
+ border: 1px solid var(--tma-color-border);
289
+ border-radius: var(--tma-radius-lg);
290
+ transition: all var(--tma-transition-normal);
291
+ position: relative;
292
+ overflow: hidden;
293
+ }
294
+
295
+ .tma-feature-card::before {
296
+ content: '';
297
+ position: absolute;
298
+ top: 0;
299
+ left: 0;
300
+ right: 0;
301
+ height: 3px;
302
+ background: var(--tma-color-accent-primary);
303
+ opacity: 0;
304
+ transition: opacity var(--tma-transition-normal);
305
+ }
306
+
307
+ .tma-feature-card:hover {
308
+ border-color: var(--tma-color-border-hover);
309
+ transform: translateY(-4px);
310
+ box-shadow: var(--tma-shadow-lg);
311
+ }
312
+
313
+ .tma-feature-card:hover::before {
314
+ opacity: 1;
315
+ }
316
+
317
+ .tma-feature-card__icon {
318
+ font-size: 2rem;
319
+ margin-bottom: var(--tma-spacing-md);
320
+ display: block;
321
+ }
322
+
323
+ .tma-feature-card__title {
324
+ font-size: 1.25rem;
325
+ font-weight: 700;
326
+ margin-bottom: var(--tma-spacing-sm);
327
+ color: var(--tma-color-text-primary);
328
+ }
329
+
330
+ .tma-feature-card__description {
331
+ color: var(--tma-color-text-secondary);
332
+ font-size: 0.95rem;
333
+ line-height: 1.6;
334
+ }
335
+
336
+ /* ============================================
337
+ Provider Cards
338
+ ============================================ */
339
+ .tma-providers {
340
+ padding: var(--tma-spacing-3xl) var(--tma-spacing-xl);
341
+ max-width: var(--tma-max-width);
342
+ margin: 0 auto;
343
+ }
344
+
345
+ .tma-section-header {
346
+ text-align: center;
347
+ margin-bottom: var(--tma-spacing-2xl);
348
+ }
349
+
350
+ .tma-section-header__title {
351
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
352
+ font-weight: 700;
353
+ margin-bottom: var(--tma-spacing-sm);
354
+ color: var(--tma-color-text-primary);
355
+ }
356
+
357
+ .tma-section-header__subtitle {
358
+ color: var(--tma-color-text-secondary);
359
+ font-size: 1.1rem;
360
+ }
361
+
362
+ .tma-providers__grid {
363
+ display: grid;
364
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
365
+ gap: var(--tma-spacing-lg);
366
+ }
367
+
368
+ .tma-provider-card {
369
+ display: flex;
370
+ flex-direction: column;
371
+ padding: var(--tma-spacing-xl);
372
+ background: var(--tma-color-bg-secondary);
373
+ border: 1px solid var(--tma-color-border);
374
+ border-radius: var(--tma-radius-lg);
375
+ text-decoration: none;
376
+ color: inherit;
377
+ transition: all var(--tma-transition-normal);
378
+ }
379
+
380
+ .tma-provider-card:hover {
381
+ border-color: var(--tma-color-border-hover);
382
+ transform: translateY(-4px);
383
+ box-shadow: var(--tma-shadow-glow);
384
+ }
385
+
386
+ .tma-provider-card__header {
387
+ display: flex;
388
+ align-items: center;
389
+ gap: var(--tma-spacing-md);
390
+ margin-bottom: var(--tma-spacing-md);
391
+ }
392
+
393
+ .tma-provider-card__icon {
394
+ width: 48px;
395
+ height: 48px;
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
399
+ background: var(--tma-color-bg-tertiary);
400
+ border-radius: var(--tma-radius-md);
401
+ font-size: 1.5rem;
402
+ }
403
+
404
+ .tma-provider-card__name {
405
+ font-size: 1.25rem;
406
+ font-weight: 700;
407
+ }
408
+
409
+ .tma-provider-card__badge {
410
+ display: inline-flex;
411
+ padding: var(--tma-spacing-xs) var(--tma-spacing-sm);
412
+ background: var(--tma-color-accent-muted);
413
+ color: var(--tma-color-accent-primary);
414
+ font-size: 0.75rem;
415
+ font-weight: 600;
416
+ border-radius: 100px;
417
+ margin-left: auto;
418
+ }
419
+
420
+ .tma-provider-card__description {
421
+ color: var(--tma-color-text-secondary);
422
+ font-size: 0.9rem;
423
+ flex-grow: 1;
424
+ }
425
+
426
+ .tma-provider-card__link {
427
+ margin-top: var(--tma-spacing-md);
428
+ color: var(--tma-color-accent-primary);
429
+ font-weight: 500;
430
+ font-size: 0.9rem;
431
+ display: flex;
432
+ align-items: center;
433
+ gap: var(--tma-spacing-xs);
434
+ }
435
+
436
+ .tma-provider-card__link::after {
437
+ content: '→';
438
+ transition: transform var(--tma-transition-fast);
439
+ }
440
+
441
+ .tma-provider-card:hover .tma-provider-card__link::after {
442
+ transform: translateX(4px);
443
+ }
444
+
445
+ /* ============================================
446
+ Code Blocks
447
+ ============================================ */
448
+ .tma-code-section {
449
+ padding: var(--tma-spacing-3xl) var(--tma-spacing-xl);
450
+ max-width: 900px;
451
+ margin: 0 auto;
452
+ }
453
+
454
+ pre, .highlight {
455
+ background: var(--tma-color-bg-secondary) !important;
456
+ border: 1px solid var(--tma-color-border);
457
+ border-radius: var(--tma-radius-md);
458
+ padding: var(--tma-spacing-lg);
459
+ overflow-x: auto;
460
+ margin: var(--tma-spacing-lg) 0;
461
+ font-family: var(--tma-font-family-mono);
462
+ font-size: 0.9rem;
463
+ line-height: 1.6;
464
+ }
465
+
466
+ pre code, .highlight code {
467
+ background: none !important;
468
+ padding: 0;
469
+ font-family: inherit;
470
+ color: var(--tma-color-text-primary);
471
+ }
472
+
473
+ code {
474
+ background: var(--tma-color-bg-tertiary);
475
+ padding: 2px 8px;
476
+ border-radius: var(--tma-radius-sm);
477
+ font-family: var(--tma-font-family-mono);
478
+ font-size: 0.875em;
479
+ color: var(--tma-color-accent-primary);
480
+ }
481
+
482
+ /* Syntax Highlighting - Green Theme */
483
+ .highlight .k, .highlight .kd, .highlight .kn { color: #05df72; } /* Keywords */
484
+ .highlight .s, .highlight .s1, .highlight .s2 { color: #fbbf24; } /* Strings - Yellow */
485
+ .highlight .n, .highlight .nf, .highlight .nb { color: #60a5fa; } /* Names - Blue */
486
+ .highlight .c, .highlight .c1 { color: #6b7280; font-style: italic; } /* Comments */
487
+ .highlight .o { color: #f472b6; } /* Operators */
488
+ .highlight .m, .highlight .mi, .highlight .mf { color: #fb923c; } /* Numbers - Orange */
489
+ .highlight .p { color: #a1a1aa; } /* Punctuation */
490
+ .highlight .ss { color: #a78bfa; } /* Symbols */
491
+
492
+ /* ============================================
493
+ Documentation Layout (Sidebar + Content)
494
+ ============================================ */
495
+ .tma-docs-layout {
496
+ max-width: var(--tma-max-width);
497
+ margin: 0 auto;
498
+ display: flex;
499
+ min-height: 100vh;
500
+ padding-top: var(--tma-header-height);
501
+ padding-left: var(--tma-spacing-xl);
502
+ padding-right: var(--tma-spacing-xl);
503
+ }
504
+
505
+ .tma-sidebar {
506
+ position: sticky;
507
+ top: var(--tma-header-height);
508
+ width: var(--tma-sidebar-width);
509
+ min-width: var(--tma-sidebar-width);
510
+ height: calc(100vh - var(--tma-header-height));
511
+ background: var(--tma-color-bg-primary);
512
+ border-right: 1px solid var(--tma-color-border);
513
+ padding: var(--tma-spacing-md) var(--tma-spacing-sm);
514
+ overflow-y: auto;
515
+ scrollbar-width: thin;
516
+ scrollbar-color: var(--tma-color-bg-hover) transparent;
517
+ }
518
+
519
+ .tma-sidebar::-webkit-scrollbar {
520
+ width: 6px;
521
+ }
522
+
523
+ .tma-sidebar::-webkit-scrollbar-track {
524
+ background: transparent;
525
+ }
526
+
527
+ .tma-sidebar::-webkit-scrollbar-thumb {
528
+ background: var(--tma-color-bg-hover);
529
+ border-radius: 3px;
530
+ }
531
+
532
+ .tma-sidebar__section {
533
+ margin-bottom: var(--tma-spacing-md);
534
+ }
535
+
536
+ .tma-sidebar__title {
537
+ font-size: 0.7rem;
538
+ font-weight: 600;
539
+ text-transform: uppercase;
540
+ letter-spacing: 0.08em;
541
+ color: var(--tma-color-text-muted);
542
+ margin-bottom: var(--tma-spacing-sm);
543
+ padding: 0 var(--tma-spacing-sm);
544
+ }
545
+
546
+ .tma-sidebar__list {
547
+ list-style: none;
548
+ }
549
+
550
+ .tma-sidebar__link {
551
+ display: block;
552
+ padding: 6px 10px;
553
+ color: var(--tma-color-text-secondary);
554
+ text-decoration: none;
555
+ font-size: 0.85rem;
556
+ border-radius: var(--tma-radius-sm);
557
+ transition: all var(--tma-transition-fast);
558
+ margin-bottom: 1px;
559
+ }
560
+
561
+ .tma-sidebar__link:hover {
562
+ color: var(--tma-color-text-primary);
563
+ background: var(--tma-color-bg-hover);
564
+ }
565
+
566
+ .tma-sidebar__link--active {
567
+ color: var(--tma-color-accent-primary);
568
+ background: var(--tma-color-accent-muted);
569
+ }
570
+
571
+ .tma-docs-content {
572
+ flex: 1;
573
+ padding: var(--tma-spacing-xl) var(--tma-spacing-2xl);
574
+ min-height: calc(100vh - var(--tma-header-height));
575
+ max-width: 100%;
576
+ }
577
+
578
+ /* ============================================
579
+ Content Styles
580
+ ============================================ */
581
+ .tma-content h1 {
582
+ font-size: 2rem;
583
+ font-weight: 800;
584
+ margin-bottom: var(--tma-spacing-sm);
585
+ letter-spacing: -0.02em;
586
+ color: var(--tma-color-text-primary);
587
+ }
588
+
589
+ .tma-content h2 {
590
+ font-size: 1.4rem;
591
+ font-weight: 700;
592
+ margin-top: var(--tma-spacing-xl);
593
+ margin-bottom: var(--tma-spacing-sm);
594
+ padding-bottom: var(--tma-spacing-xs);
595
+ border-bottom: 1px solid var(--tma-color-border);
596
+ color: var(--tma-color-text-primary);
597
+ }
598
+
599
+ .tma-content h3 {
600
+ font-size: 1.1rem;
601
+ font-weight: 600;
602
+ margin-top: var(--tma-spacing-lg);
603
+ margin-bottom: var(--tma-spacing-xs);
604
+ color: var(--tma-color-text-primary);
605
+ }
606
+
607
+ .tma-content p {
608
+ margin-bottom: var(--tma-spacing-md);
609
+ color: var(--tma-color-text-secondary);
610
+ line-height: 1.8;
611
+ }
612
+
613
+ .tma-content ul, .tma-content ol {
614
+ margin: var(--tma-spacing-md) 0;
615
+ padding-left: var(--tma-spacing-xl);
616
+ }
617
+
618
+ .tma-content li {
619
+ margin-bottom: var(--tma-spacing-sm);
620
+ color: var(--tma-color-text-secondary);
621
+ }
622
+
623
+ .tma-content a {
624
+ color: var(--tma-color-accent-primary);
625
+ text-decoration: none;
626
+ transition: color var(--tma-transition-fast);
627
+ }
628
+
629
+ .tma-content a:hover {
630
+ color: var(--tma-color-accent-light);
631
+ text-decoration: underline;
632
+ }
633
+
634
+ /* Tables */
635
+ .tma-content table {
636
+ width: 100%;
637
+ max-width: 800px;
638
+ border-collapse: collapse;
639
+ margin: var(--tma-spacing-md) 0;
640
+ background: var(--tma-color-bg-secondary);
641
+ border-radius: var(--tma-radius-md);
642
+ overflow: hidden;
643
+ }
644
+
645
+ .tma-content thead {
646
+ background: var(--tma-color-bg-tertiary);
647
+ }
648
+
649
+ .tma-content th, .tma-content td {
650
+ padding: var(--tma-spacing-md);
651
+ text-align: left;
652
+ border-bottom: 1px solid var(--tma-color-border);
653
+ }
654
+
655
+ .tma-content th {
656
+ font-weight: 600;
657
+ color: var(--tma-color-text-primary);
658
+ font-size: 0.9rem;
659
+ }
660
+
661
+ .tma-content td {
662
+ color: var(--tma-color-text-secondary);
663
+ }
664
+
665
+ /* ============================================
666
+ Footer
667
+ ============================================ */
668
+ .tma-footer {
669
+ background: var(--tma-color-bg-secondary);
670
+ border-top: 1px solid var(--tma-color-border);
671
+ padding: var(--tma-spacing-2xl) var(--tma-spacing-xl);
672
+ margin-top: var(--tma-spacing-3xl);
673
+ }
674
+
675
+ .tma-footer__container {
676
+ max-width: var(--tma-max-width);
677
+ margin: 0 auto;
678
+ display: flex;
679
+ justify-content: space-between;
680
+ align-items: center;
681
+ flex-wrap: wrap;
682
+ gap: var(--tma-spacing-lg);
683
+ }
684
+
685
+ .tma-footer__brand {
686
+ font-size: 1.25rem;
687
+ font-weight: 700;
688
+ color: var(--tma-color-accent-primary);
689
+ }
690
+
691
+ .tma-footer__links {
692
+ display: flex;
693
+ gap: var(--tma-spacing-xl);
694
+ list-style: none;
695
+ }
696
+
697
+ .tma-footer__links a {
698
+ color: var(--tma-color-text-secondary);
699
+ text-decoration: none;
700
+ font-size: 0.9rem;
701
+ transition: color var(--tma-transition-fast);
702
+ }
703
+
704
+ .tma-footer__links a:hover {
705
+ color: var(--tma-color-accent-primary);
706
+ }
707
+
708
+ .tma-footer__copy {
709
+ color: var(--tma-color-text-muted);
710
+ font-size: 0.85rem;
711
+ }
712
+
713
+ /* ============================================
714
+ Animations
715
+ ============================================ */
716
+ @keyframes fadeInUp {
717
+ from {
718
+ opacity: 0;
719
+ transform: translateY(20px);
720
+ }
721
+ to {
722
+ opacity: 1;
723
+ transform: translateY(0);
724
+ }
725
+ }
726
+
727
+ /* ============================================
728
+ Responsive Design
729
+ ============================================ */
730
+ @media (max-width: 1024px) {
731
+ .tma-docs-layout {
732
+ padding-left: var(--tma-spacing-md);
733
+ padding-right: var(--tma-spacing-md);
734
+ }
735
+
736
+ .tma-sidebar {
737
+ display: none;
738
+ }
739
+
740
+ .tma-docs-content {
741
+ padding: var(--tma-spacing-lg);
742
+ }
743
+ }
744
+
745
+ @media (max-width: 768px) {
746
+ :root {
747
+ --tma-header-height: 56px;
748
+ }
749
+
750
+ .tma-nav {
751
+ padding: 0 var(--tma-spacing-md);
752
+ }
753
+
754
+ .tma-nav__menu {
755
+ display: none;
756
+ }
757
+
758
+ .tma-hero {
759
+ padding-top: calc(var(--tma-header-height) + var(--tma-spacing-xl));
760
+ }
761
+
762
+ .tma-hero__container {
763
+ padding: 0 var(--tma-spacing-md);
764
+ }
765
+
766
+ .tma-hero__actions {
767
+ flex-direction: column;
768
+ }
769
+
770
+ .tma-btn {
771
+ width: 100%;
772
+ justify-content: center;
773
+ }
774
+
775
+ .tma-features,
776
+ .tma-providers {
777
+ padding: var(--tma-spacing-xl) var(--tma-spacing-md);
778
+ }
779
+
780
+ .tma-content h1 {
781
+ font-size: 2rem;
782
+ }
783
+
784
+ .tma-content h2 {
785
+ font-size: 1.5rem;
786
+ }
787
+
788
+ .tma-footer__container {
789
+ flex-direction: column;
790
+ text-align: center;
791
+ }
792
+
793
+ .tma-footer__links {
794
+ flex-direction: column;
795
+ gap: var(--tma-spacing-md);
796
+ }
797
+ }
798
+
799
+ /* ============================================
800
+ Install Command Box
801
+ ============================================ */
802
+ .tma-install {
803
+ display: flex;
804
+ align-items: center;
805
+ gap: var(--tma-spacing-md);
806
+ background: var(--tma-color-bg-secondary);
807
+ border: 1px solid var(--tma-color-border);
808
+ border-radius: var(--tma-radius-md);
809
+ padding: var(--tma-spacing-md) var(--tma-spacing-lg);
810
+ margin: var(--tma-spacing-lg) 0;
811
+ font-family: var(--tma-font-family-mono);
812
+ font-size: 0.9rem;
813
+ }
814
+
815
+ .tma-install__prefix {
816
+ color: var(--tma-color-text-muted);
817
+ }
818
+
819
+ .tma-install__command {
820
+ color: var(--tma-color-accent-primary);
821
+ flex: 1;
822
+ }
823
+
824
+ /* ============================================
825
+ Callout Boxes
826
+ ============================================ */
827
+ .tma-callout {
828
+ padding: var(--tma-spacing-lg);
829
+ border-radius: var(--tma-radius-md);
830
+ margin: var(--tma-spacing-lg) 0;
831
+ border-left: 4px solid;
832
+ }
833
+
834
+ .tma-callout--info {
835
+ background: rgba(96, 165, 250, 0.1);
836
+ border-color: #60a5fa;
837
+ }
838
+
839
+ .tma-callout--warning {
840
+ background: rgba(251, 191, 36, 0.1);
841
+ border-color: #fbbf24;
842
+ }
843
+
844
+ .tma-callout--tip {
845
+ background: var(--tma-color-accent-muted);
846
+ border-color: var(--tma-color-accent-primary);
847
+ }
848
+
849
+ .tma-callout__title {
850
+ font-weight: 600;
851
+ margin-bottom: var(--tma-spacing-sm);
852
+ }
853
+
854
+ /* ============================================
855
+ Comparison Grid (2 columns)
856
+ ============================================ */
857
+ .tma-comparison-grid {
858
+ display: grid;
859
+ grid-template-columns: repeat(2, 1fr);
860
+ gap: var(--tma-spacing-md);
861
+ margin: var(--tma-spacing-lg) 0;
862
+ max-width: 900px;
863
+ }
864
+
865
+ @media (max-width: 900px) {
866
+ .tma-comparison-grid {
867
+ grid-template-columns: 1fr;
868
+ }
869
+ }
870
+
871
+ .tma-comparison-card {
872
+ background: var(--tma-color-bg-secondary);
873
+ border: 1px solid var(--tma-color-border);
874
+ border-radius: var(--tma-radius-md);
875
+ padding: var(--tma-spacing-md);
876
+ }
877
+
878
+ .tma-comparison-card h3,
879
+ .tma-comparison-card h4 {
880
+ margin-top: 0;
881
+ margin-bottom: var(--tma-spacing-sm);
882
+ color: var(--tma-color-text-primary);
883
+ font-size: 1rem;
884
+ font-weight: 600;
885
+ }
886
+
887
+ .tma-comparison-card ul {
888
+ margin: 0;
889
+ padding-left: 0;
890
+ list-style: none;
891
+ }
892
+
893
+ .tma-comparison-card li {
894
+ padding: 2px 0;
895
+ color: var(--tma-color-text-secondary);
896
+ font-size: 0.85rem;
897
+ }
898
+
899
+ .tma-comparison-card p {
900
+ color: var(--tma-color-text-secondary);
901
+ font-size: 0.9rem;
902
+ margin: 0 0 var(--tma-spacing-md) 0;
903
+ }
904
+
905
+ .tma-comparison-card a {
906
+ color: var(--tma-color-accent-primary);
907
+ font-weight: 500;
908
+ font-size: 0.9rem;
909
+ text-decoration: none;
910
+ }
911
+
912
+ .tma-comparison-card a:hover {
913
+ text-decoration: underline;
914
+ }
915
+
916
+ /* Pro/Con styling */
917
+ .tma-content .pro::before {
918
+ content: '✓ ';
919
+ color: var(--tma-color-accent-primary);
920
+ font-weight: bold;
921
+ }
922
+
923
+ .tma-content .con::before {
924
+ content: '✗ ';
925
+ color: #ef4444;
926
+ font-weight: bold;
927
+ }