vtex-css-sanitizer-cli 1.0.5 → 1.0.7

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.
package/docs/styles.css DELETED
@@ -1,745 +0,0 @@
1
- /* ========================================
2
- VTEX CSS Sanitizer — Landing Page
3
- Minimalista · Neutro · Profesional
4
- ======================================== */
5
-
6
- /* --- Reset & Base --- */
7
- *,
8
- *::before,
9
- *::after {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
-
15
- :root {
16
- /* Neutral dark palette */
17
- --bg: #0a0a0f;
18
- --bg-elevated: #12121a;
19
- --bg-card: #16161f;
20
- --bg-card-hover: #1c1c28;
21
-
22
- --border: #23232f;
23
- --border-light: #2d2d3a;
24
-
25
- --text: #e8e8ed;
26
- --text-muted: #8b8b9e;
27
- --text-dim: #5c5c72;
28
-
29
- --accent: #6366f1;
30
- /* indigo */
31
- --accent-soft: rgba(99, 102, 241, 0.12);
32
- --accent-glow: rgba(99, 102, 241, 0.25);
33
-
34
- --green: #22c55e;
35
- --green-soft: rgba(34, 197, 94, 0.12);
36
-
37
- --radius: 12px;
38
- --radius-sm: 8px;
39
- --radius-xs: 6px;
40
-
41
- --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
42
- --mono: 'JetBrains Mono', 'Fira Code', monospace;
43
-
44
- --transition: 0.2s ease;
45
- --max-width: 1100px;
46
- }
47
-
48
- html {
49
- scroll-behavior: smooth;
50
- -webkit-font-smoothing: antialiased;
51
- -moz-osx-font-smoothing: grayscale;
52
- }
53
-
54
- body {
55
- font-family: var(--font);
56
- background: var(--bg);
57
- color: var(--text);
58
- line-height: 1.6;
59
- overflow-x: hidden;
60
- }
61
-
62
- a {
63
- color: inherit;
64
- text-decoration: none;
65
- }
66
-
67
- code {
68
- font-family: var(--mono);
69
- font-size: 0.88em;
70
- background: var(--accent-soft);
71
- color: var(--accent);
72
- padding: 0.15em 0.45em;
73
- border-radius: var(--radius-xs);
74
- }
75
-
76
- img {
77
- max-width: 100%;
78
- height: auto;
79
- display: block;
80
- }
81
-
82
- .container {
83
- width: 100%;
84
- max-width: var(--max-width);
85
- margin: 0 auto;
86
- padding: 0 24px;
87
- }
88
-
89
- /* --- Nav --- */
90
- .nav {
91
- position: fixed;
92
- top: 0;
93
- left: 0;
94
- right: 0;
95
- z-index: 100;
96
- background: rgba(10, 10, 15, 0.8);
97
- backdrop-filter: blur(16px);
98
- -webkit-backdrop-filter: blur(16px);
99
- border-bottom: 1px solid var(--border);
100
- transition: background var(--transition);
101
- }
102
-
103
- .nav__container {
104
- max-width: var(--max-width);
105
- margin: 0 auto;
106
- padding: 0 24px;
107
- height: 64px;
108
- display: flex;
109
- align-items: center;
110
- justify-content: space-between;
111
- }
112
-
113
- .nav__logo {
114
- display: flex;
115
- align-items: center;
116
- gap: 10px;
117
- font-weight: 600;
118
- font-size: 0.95rem;
119
- color: var(--text);
120
- transition: color var(--transition);
121
- }
122
-
123
- .nav__logo:hover {
124
- color: var(--accent);
125
- }
126
-
127
- .nav__icon {
128
- width: 22px;
129
- height: 22px;
130
- color: var(--accent);
131
- }
132
-
133
- .nav__links {
134
- display: flex;
135
- align-items: center;
136
- gap: 28px;
137
- }
138
-
139
- .nav__links a {
140
- font-size: 0.875rem;
141
- color: var(--text-muted);
142
- transition: color var(--transition);
143
- }
144
-
145
- .nav__links a:hover {
146
- color: var(--text);
147
- }
148
-
149
- .nav__github {
150
- display: flex;
151
- align-items: center;
152
- opacity: 0.7;
153
- transition: opacity var(--transition);
154
- }
155
-
156
- .nav__github:hover {
157
- opacity: 1;
158
- }
159
-
160
- /* --- Hero --- */
161
- .hero {
162
- position: relative;
163
- padding: 160px 0 100px;
164
- text-align: center;
165
- overflow: hidden;
166
- }
167
-
168
- .hero__glow {
169
- position: absolute;
170
- top: -200px;
171
- left: 50%;
172
- transform: translateX(-50%);
173
- width: 600px;
174
- height: 600px;
175
- background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
176
- pointer-events: none;
177
- opacity: 0.5;
178
- }
179
-
180
- .hero__badges {
181
- display: flex;
182
- justify-content: center;
183
- gap: 12px;
184
- margin-bottom: 32px;
185
- }
186
-
187
- .badge {
188
- display: inline-flex;
189
- align-items: center;
190
- gap: 8px;
191
- padding: 6px 14px;
192
- background: var(--bg-card);
193
- border: 1px solid var(--border);
194
- border-radius: 100px;
195
- font-size: 0.8rem;
196
- font-weight: 500;
197
- color: var(--text-muted);
198
- transition: border-color var(--transition), color var(--transition);
199
- }
200
-
201
- .badge:hover {
202
- border-color: var(--border-light);
203
- color: var(--text);
204
- }
205
-
206
- .badge__dot {
207
- width: 8px;
208
- height: 8px;
209
- border-radius: 50%;
210
- }
211
-
212
- .badge__dot--npm {
213
- background: #cb3837;
214
- }
215
-
216
- .badge__dot--gh {
217
- background: var(--green);
218
- }
219
-
220
- .hero__title {
221
- font-size: clamp(2.5rem, 6vw, 4rem);
222
- font-weight: 700;
223
- line-height: 1.1;
224
- letter-spacing: -0.03em;
225
- margin-bottom: 24px;
226
- }
227
-
228
- .hero__highlight {
229
- background: linear-gradient(135deg, var(--accent), #a78bfa);
230
- -webkit-background-clip: text;
231
- -webkit-text-fill-color: transparent;
232
- background-clip: text;
233
- }
234
-
235
- .hero__subtitle {
236
- font-size: 1.125rem;
237
- color: var(--text-muted);
238
- max-width: 520px;
239
- margin: 0 auto 40px;
240
- line-height: 1.7;
241
- }
242
-
243
- .hero__actions {
244
- display: flex;
245
- justify-content: center;
246
- gap: 14px;
247
- flex-wrap: wrap;
248
- }
249
-
250
- /* --- Buttons --- */
251
- .btn {
252
- display: inline-flex;
253
- align-items: center;
254
- gap: 8px;
255
- padding: 12px 28px;
256
- font-family: var(--font);
257
- font-size: 0.9rem;
258
- font-weight: 600;
259
- border-radius: var(--radius-sm);
260
- border: none;
261
- cursor: pointer;
262
- transition: all var(--transition);
263
- text-decoration: none;
264
- }
265
-
266
- .btn--primary {
267
- background: var(--accent);
268
- color: #fff;
269
- }
270
-
271
- .btn--primary:hover {
272
- background: #5558e6;
273
- box-shadow: 0 4px 24px var(--accent-glow);
274
- transform: translateY(-1px);
275
- }
276
-
277
- .btn--outline {
278
- background: transparent;
279
- color: var(--text-muted);
280
- border: 1px solid var(--border);
281
- }
282
-
283
- .btn--outline:hover {
284
- border-color: var(--border-light);
285
- color: var(--text);
286
- background: var(--bg-elevated);
287
- }
288
-
289
- .btn--download {
290
- background: var(--bg-card);
291
- color: var(--text);
292
- border: 1px solid var(--border);
293
- width: 100%;
294
- justify-content: center;
295
- }
296
-
297
- .btn--download:hover {
298
- border-color: var(--accent);
299
- background: var(--accent-soft);
300
- color: var(--accent);
301
- transform: translateY(-1px);
302
- }
303
-
304
- /* --- Section --- */
305
- .section__label {
306
- display: inline-block;
307
- font-size: 0.8rem;
308
- font-weight: 600;
309
- text-transform: uppercase;
310
- letter-spacing: 0.08em;
311
- color: var(--accent);
312
- margin-bottom: 12px;
313
- }
314
-
315
- .section__title {
316
- font-size: clamp(1.75rem, 4vw, 2.5rem);
317
- font-weight: 700;
318
- letter-spacing: -0.02em;
319
- margin-bottom: 16px;
320
- }
321
-
322
- .section__desc {
323
- color: var(--text-muted);
324
- font-size: 1.05rem;
325
- margin-bottom: 48px;
326
- }
327
-
328
- /* --- Features --- */
329
- .features {
330
- padding: 100px 0;
331
- text-align: center;
332
- }
333
-
334
- .features__grid {
335
- display: grid;
336
- grid-template-columns: repeat(3, 1fr);
337
- gap: 20px;
338
- margin-top: 48px;
339
- }
340
-
341
- .feature-card {
342
- background: var(--bg-card);
343
- border: 1px solid var(--border);
344
- border-radius: var(--radius);
345
- padding: 32px 24px;
346
- text-align: left;
347
- transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
348
- }
349
-
350
- .feature-card:hover {
351
- border-color: var(--border-light);
352
- transform: translateY(-2px);
353
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
354
- }
355
-
356
- .feature-card__icon {
357
- width: 44px;
358
- height: 44px;
359
- display: flex;
360
- align-items: center;
361
- justify-content: center;
362
- background: var(--accent-soft);
363
- border-radius: var(--radius-sm);
364
- margin-bottom: 20px;
365
- }
366
-
367
- .feature-card__icon svg {
368
- width: 22px;
369
- height: 22px;
370
- color: var(--accent);
371
- }
372
-
373
- .feature-card h3 {
374
- font-size: 1rem;
375
- font-weight: 600;
376
- margin-bottom: 8px;
377
- }
378
-
379
- .feature-card p {
380
- font-size: 0.875rem;
381
- color: var(--text-muted);
382
- line-height: 1.6;
383
- }
384
-
385
- /* --- Versions --- */
386
- .versions {
387
- padding: 100px 0;
388
- text-align: center;
389
- }
390
-
391
- .versions__grid {
392
- display: grid;
393
- grid-template-columns: repeat(2, 1fr);
394
- gap: 24px;
395
- margin-top: 48px;
396
- }
397
-
398
- .version-card {
399
- background: var(--bg-card);
400
- border: 1px solid var(--border);
401
- border-radius: var(--radius);
402
- overflow: hidden;
403
- text-align: left;
404
- transition: border-color var(--transition);
405
- display: flex;
406
- flex-direction: column;
407
- }
408
-
409
- .version-card:hover {
410
- border-color: var(--border-light);
411
- }
412
-
413
- .version-card__header {
414
- padding: 32px 28px 20px;
415
- min-height: 178px;
416
- }
417
-
418
- .version-card__tag {
419
- display: inline-block;
420
- font-size: 0.7rem;
421
- font-weight: 700;
422
- text-transform: uppercase;
423
- letter-spacing: 0.08em;
424
- padding: 4px 12px;
425
- border-radius: 100px;
426
- background: var(--accent-soft);
427
- color: var(--accent);
428
- margin-bottom: 14px;
429
- }
430
-
431
- .version-card__tag--gui {
432
- background: var(--green-soft);
433
- color: var(--green);
434
- }
435
-
436
- .version-card__header h3 {
437
- font-size: 1.25rem;
438
- font-weight: 600;
439
- margin-bottom: 8px;
440
- }
441
-
442
- .version-card__header p {
443
- font-size: 0.9rem;
444
- color: var(--text-muted);
445
- line-height: 1.5;
446
- }
447
-
448
- .version-card__preview {
449
- padding: 0 20px;
450
- margin-bottom: 8px;
451
- flex: 1;
452
- display: flex;
453
- }
454
-
455
- .version-card__preview img {
456
- border-radius: var(--radius-sm);
457
- border: 1px solid var(--border);
458
- width: 100%;
459
- max-height: 320px;
460
- object-fit: contain;
461
- object-position: center;
462
- height: 267px;
463
- }
464
-
465
- .version-card__install {
466
- padding: 16px 28px 28px;
467
- }
468
-
469
- .version-card__platforms {
470
- display: flex;
471
- gap: 10px;
472
- padding: 16px 28px 28px;
473
- }
474
-
475
- .platform-chip {
476
- display: inline-flex;
477
- align-items: center;
478
- gap: 6px;
479
- padding: 8px 16px;
480
- font-size: 0.8rem;
481
- font-weight: 500;
482
- color: var(--text-muted);
483
- background: var(--bg-elevated);
484
- border: 1px solid var(--border);
485
- border-radius: var(--radius-xs);
486
- }
487
-
488
- /* --- Copy Block --- */
489
- .copy-block {
490
- display: flex;
491
- align-items: center;
492
- justify-content: space-between;
493
- background: var(--bg);
494
- border: 1px solid var(--border);
495
- border-radius: var(--radius-sm);
496
- padding: 6px 13px;
497
- gap: 12px;
498
- }
499
-
500
- .copy-block code {
501
- background: none;
502
- color: var(--text-muted);
503
- padding: 0;
504
- font-size: 0.85rem;
505
- white-space: nowrap;
506
- overflow: hidden;
507
- text-overflow: ellipsis;
508
- }
509
-
510
- .copy-block__btn {
511
- display: flex;
512
- align-items: center;
513
- justify-content: center;
514
- flex-shrink: 0;
515
- width: 36px;
516
- height: 36px;
517
- background: var(--bg-card);
518
- border: 1px solid var(--border);
519
- border-radius: var(--radius-xs);
520
- cursor: pointer;
521
- transition: all var(--transition);
522
- color: var(--text-muted);
523
- }
524
-
525
- .copy-block__btn:hover {
526
- border-color: var(--accent);
527
- color: var(--accent);
528
- background: var(--accent-soft);
529
- }
530
-
531
- .copy-block__icon {
532
- width: 16px;
533
- height: 16px;
534
- }
535
-
536
- .copy-block__icon--check {
537
- display: none;
538
- color: var(--green);
539
- }
540
-
541
- .copy-block.copied .copy-block__icon--copy {
542
- display: none;
543
- }
544
-
545
- .copy-block.copied .copy-block__icon--check {
546
- display: block;
547
- }
548
-
549
- .copy-block.copied .copy-block__btn {
550
- border-color: var(--green);
551
- background: var(--green-soft);
552
- }
553
-
554
- .copy-block--small {
555
- padding: 10px 14px;
556
- }
557
-
558
- .copy-block--small code {
559
- font-size: 0.82rem;
560
- }
561
-
562
- /* --- Downloads --- */
563
- .downloads {
564
- padding: 100px 0;
565
- text-align: center;
566
- }
567
-
568
- .downloads__grid {
569
- display: grid;
570
- grid-template-columns: repeat(3, 1fr);
571
- gap: 20px;
572
- margin-top: 48px;
573
- }
574
-
575
- .download-card {
576
- background: var(--bg-card);
577
- border: 1px solid var(--border);
578
- border-radius: var(--radius);
579
- padding: 32px 24px;
580
- text-align: center;
581
- transition: border-color var(--transition), transform var(--transition);
582
- display: flex;
583
- flex-direction: column;
584
- justify-content: space-between;
585
- }
586
-
587
- .download-card:hover {
588
- border-color: var(--border-light);
589
- transform: translateY(-2px);
590
- }
591
-
592
- .download-card__icon {
593
- width: 56px;
594
- height: 56px;
595
- display: flex;
596
- align-items: center;
597
- justify-content: center;
598
- margin: 0 auto 20px;
599
- border-radius: var(--radius);
600
- }
601
-
602
- .download-card__icon--npm {
603
- background: rgba(203, 56, 55, 0.1);
604
- color: #cb3837;
605
- }
606
-
607
- .download-card__icon--win {
608
- background: rgba(0, 120, 215, 0.1);
609
- color: #0078d7;
610
- }
611
-
612
- .download-card__icon--linux {
613
- background: rgba(255, 193, 7, 0.1);
614
- color: #ffc107;
615
- }
616
-
617
- .download-card h3 {
618
- font-size: 1.05rem;
619
- font-weight: 600;
620
- margin-bottom: 8px;
621
- }
622
-
623
- .download-card p {
624
- font-size: 0.875rem;
625
- color: var(--text-muted);
626
- margin-bottom: 20px;
627
- line-height: 1.5;
628
- }
629
-
630
- /* --- Footer --- */
631
- .footer {
632
- border-top: 1px solid var(--border);
633
- padding: 32px 0;
634
- }
635
-
636
- .footer__inner {
637
- display: flex;
638
- align-items: center;
639
- justify-content: space-between;
640
- flex-wrap: wrap;
641
- gap: 16px;
642
- }
643
-
644
- .footer__left {
645
- display: flex;
646
- flex-direction: column;
647
- gap: 4px;
648
- }
649
-
650
- .footer__brand {
651
- font-weight: 600;
652
- font-size: 0.9rem;
653
- }
654
-
655
- .footer__copy {
656
- font-size: 0.8rem;
657
- color: var(--text-dim);
658
- }
659
-
660
- .footer__links {
661
- display: flex;
662
- gap: 24px;
663
- }
664
-
665
- .footer__links a {
666
- font-size: 0.85rem;
667
- color: var(--text-muted);
668
- transition: color var(--transition);
669
- }
670
-
671
- .footer__links a:hover {
672
- color: var(--text);
673
- }
674
-
675
- /* --- Reveal Animation --- */
676
- .reveal {
677
- opacity: 0;
678
- transform: translateY(20px);
679
- transition: opacity 0.6s ease, transform 0.6s ease;
680
- }
681
-
682
- .reveal.visible {
683
- opacity: 1;
684
- transform: translateY(0);
685
- }
686
-
687
- /* --- Responsive --- */
688
- @media (max-width: 768px) {
689
- .nav__links a:not(.nav__github) {
690
- display: none;
691
- }
692
-
693
- .hero {
694
- padding: 130px 0 80px;
695
- }
696
-
697
- .hero__title {
698
- font-size: 2.2rem;
699
- }
700
-
701
- .hero__subtitle {
702
- font-size: 1rem;
703
- }
704
-
705
- .features__grid {
706
- grid-template-columns: 1fr;
707
- gap: 14px;
708
- }
709
-
710
- .versions__grid {
711
- grid-template-columns: 1fr;
712
- gap: 16px;
713
- }
714
-
715
- .downloads__grid {
716
- grid-template-columns: 1fr;
717
- gap: 14px;
718
- }
719
-
720
- .footer__inner {
721
- flex-direction: column;
722
- text-align: center;
723
- }
724
-
725
- .footer__links {
726
- justify-content: center;
727
- }
728
- }
729
-
730
- @media (max-width: 480px) {
731
- .hero__badges {
732
- flex-direction: column;
733
- align-items: center;
734
- }
735
-
736
- .hero__actions {
737
- flex-direction: column;
738
- align-items: center;
739
- }
740
-
741
- .btn {
742
- width: 100%;
743
- justify-content: center;
744
- }
745
- }