luciddom 1.0.0 → 1.0.2

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/styles.css DELETED
@@ -1,739 +0,0 @@
1
- :root {
2
- color-scheme: light;
3
- --bg: #fffaf3;
4
- --surface: #ffffff;
5
- --fg: #f6f0e7;
6
- --text: #25231f;
7
- --secText: #77736c;
8
- --accent: #f29a38;
9
- --accent-deep: #df791b;
10
- --line: #eee7dc;
11
- --shadow: 0 20px 55px rgba(79, 57, 29, 0.09);
12
- font-family: 'Segoe UI', Aptos, Arial, sans-serif;
13
- color: var(--text);
14
- background: var(--bg);
15
- font-synthesis: none;
16
- text-rendering: optimizeLegibility;
17
- -webkit-font-smoothing: antialiased;
18
- }
19
-
20
- * {
21
- box-sizing: border-box;
22
- }
23
-
24
- html {
25
- scroll-behavior: smooth;
26
- scroll-padding-top: 5rem;
27
- }
28
-
29
- body {
30
- min-width: 320px;
31
- margin: 0;
32
- background:
33
- radial-gradient(ellipse at 88% 18%, rgba(255, 227, 186, 0.28), transparent 28rem),
34
- var(--bg);
35
- }
36
-
37
- a {
38
- color: inherit;
39
- text-decoration: none;
40
- }
41
-
42
- button {
43
- font: inherit;
44
- }
45
-
46
- .site-header {
47
- display: flex;
48
- align-items: center;
49
- justify-content: space-between;
50
- width: min(1120px, calc(100% - 48px));
51
- min-height: 82px;
52
- margin: 0 auto;
53
- }
54
-
55
- .brand {
56
- display: inline-flex;
57
- align-items: center;
58
- gap: 0.6rem;
59
- font-family: 'Segoe UI', Aptos, Arial, sans-serif;
60
- font-size: 1.2rem;
61
- font-weight: 800;
62
- letter-spacing: -0.06em;
63
- }
64
-
65
- .brand-mark {
66
- display: grid;
67
- width: 34px;
68
- height: 34px;
69
- place-items: center;
70
- border-radius: 11px;
71
- color: #fff;
72
- background: var(--text);
73
- font-family: Consolas, monospace;
74
- font-size: 0.8rem;
75
- letter-spacing: -0.1em;
76
- }
77
-
78
- .brand-dot {
79
- color: var(--accent-deep);
80
- }
81
-
82
- .main-nav {
83
- display: flex;
84
- align-items: center;
85
- gap: 2rem;
86
- color: var(--secText);
87
- font-size: 0.9rem;
88
- font-weight: 600;
89
- }
90
-
91
- .main-nav a,
92
- .site-footer > a:last-child,
93
- .text-link {
94
- transition: color 160ms ease;
95
- }
96
-
97
- .main-nav a:hover,
98
- .site-footer > a:last-child:hover,
99
- .text-link:hover {
100
- color: var(--accent-deep);
101
- }
102
-
103
- .main-nav .nav-cta {
104
- padding: 0.7rem 1rem;
105
- border: 1px solid var(--line);
106
- border-radius: 9px;
107
- color: var(--text);
108
- background: rgba(255, 255, 255, 0.65);
109
- }
110
-
111
- .main-nav .nav-cta:hover {
112
- border-color: var(--accent);
113
- color: var(--accent-deep);
114
- }
115
-
116
- .hero {
117
- position: relative;
118
- display: grid;
119
- grid-template-columns: 1.05fr 0.95fr;
120
- align-items: center;
121
- gap: clamp(3rem, 8vw, 7rem);
122
- width: min(1060px, calc(100% - 48px));
123
- min-height: 570px;
124
- margin: 0 auto;
125
- padding: 4.5rem 0 5rem;
126
- }
127
-
128
- .hero-copy {
129
- position: relative;
130
- z-index: 1;
131
- }
132
-
133
- .eyebrow {
134
- display: flex;
135
- align-items: center;
136
- gap: 0.55rem;
137
- margin: 0 0 1.25rem;
138
- color: var(--secText);
139
- font-size: 0.76rem;
140
- font-weight: 700;
141
- letter-spacing: 0.12em;
142
- text-transform: uppercase;
143
- }
144
-
145
- .eyebrow-dot {
146
- width: 8px;
147
- height: 8px;
148
- border-radius: 50%;
149
- background: var(--accent);
150
- box-shadow: 0 0 0 4px rgba(242, 154, 56, 0.14);
151
- }
152
-
153
- h1,
154
- h2,
155
- h3,
156
- p {
157
- margin-top: 0;
158
- }
159
-
160
- h1,
161
- h2,
162
- h3 {
163
- font-family: 'Segoe UI', Aptos, Arial, sans-serif;
164
- }
165
-
166
- .hero h1 {
167
- margin-bottom: 1.15rem;
168
- font-size: clamp(3.3rem, 6.5vw, 5.25rem);
169
- font-weight: 800;
170
- letter-spacing: -0.085em;
171
- line-height: 0.99;
172
- }
173
-
174
- .headline-accent {
175
- color: var(--accent-deep);
176
- }
177
-
178
- .hero-description {
179
- max-width: 440px;
180
- margin-bottom: 1.8rem;
181
- color: var(--secText);
182
- font-size: 1.05rem;
183
- line-height: 1.8;
184
- }
185
-
186
- .hero-actions {
187
- display: flex;
188
- flex-wrap: wrap;
189
- gap: 0.75rem;
190
- }
191
-
192
- .button {
193
- display: inline-flex;
194
- min-height: 48px;
195
- align-items: center;
196
- justify-content: center;
197
- gap: 0.7rem;
198
- padding: 0.8rem 1.1rem;
199
- border: 1px solid transparent;
200
- border-radius: 9px;
201
- font-size: 0.88rem;
202
- font-weight: 700;
203
- transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
204
- }
205
-
206
- .button:hover {
207
- transform: translateY(-2px);
208
- }
209
-
210
- .button-primary {
211
- color: #fff;
212
- background: var(--text);
213
- box-shadow: 0 8px 20px rgba(37, 35, 31, 0.14);
214
- }
215
-
216
- .button-primary:hover {
217
- background: #403b34;
218
- box-shadow: 0 12px 24px rgba(37, 35, 31, 0.18);
219
- }
220
-
221
- .button-secondary {
222
- border-color: var(--line);
223
- background: rgba(255, 255, 255, 0.65);
224
- }
225
-
226
- .button-secondary:hover {
227
- background: var(--surface);
228
- }
229
-
230
- .hero-footnote {
231
- margin: 1.5rem 0 0;
232
- color: #918b81;
233
- font-size: 0.8rem;
234
- }
235
-
236
- .hero-footnote span {
237
- margin-right: 0.35rem;
238
- color: var(--accent-deep);
239
- }
240
-
241
- .code-card {
242
- position: relative;
243
- z-index: 1;
244
- overflow: hidden;
245
- border: 1px solid rgba(255, 255, 255, 0.12);
246
- border-radius: 16px;
247
- color: #e8e5df;
248
- background: #252522;
249
- box-shadow: 0 28px 70px rgba(55, 43, 28, 0.2);
250
- transform: rotate(1.2deg);
251
- }
252
-
253
- .code-card-top {
254
- display: flex;
255
- align-items: center;
256
- justify-content: space-between;
257
- padding: 1.1rem 1.25rem;
258
- border-bottom: 1px solid rgba(255, 255, 255, 0.09);
259
- }
260
-
261
- .window-dots {
262
- display: flex;
263
- gap: 6px;
264
- }
265
-
266
- .window-dots span {
267
- width: 9px;
268
- height: 9px;
269
- border-radius: 50%;
270
- background: #ff6d5e;
271
- }
272
-
273
- .window-dots span:nth-child(2) {
274
- background: #f6bd4f;
275
- }
276
-
277
- .window-dots span:nth-child(3) {
278
- background: #58c66d;
279
- }
280
-
281
- .code-label {
282
- color: #99978f;
283
- font-size: 0.72rem;
284
- }
285
-
286
- .code-card pre {
287
- overflow-x: auto;
288
- margin: 0;
289
- padding: 1.55rem 1.5rem 1.7rem;
290
- font-family: Consolas, 'Courier New', monospace;
291
- font-size: clamp(0.7rem, 1.25vw, 0.85rem);
292
- line-height: 1.8;
293
- }
294
-
295
- .code-purple {
296
- color: #c5a5ff;
297
- }
298
-
299
- .code-green {
300
- color: #a9d993;
301
- }
302
-
303
- .code-blue {
304
- color: #7bc6e8;
305
- }
306
-
307
- .code-yellow {
308
- color: #f6ce78;
309
- }
310
-
311
- .code-card-caption {
312
- display: flex;
313
- align-items: center;
314
- gap: 0.55rem;
315
- padding: 0.9rem 1.25rem;
316
- border-top: 1px solid rgba(255, 255, 255, 0.09);
317
- color: #bdb9ae;
318
- font-size: 0.76rem;
319
- }
320
-
321
- .caption-check {
322
- display: grid;
323
- width: 17px;
324
- height: 17px;
325
- place-items: center;
326
- border-radius: 50%;
327
- color: #252522;
328
- background: #a9d993;
329
- font-size: 0.68rem;
330
- font-weight: 800;
331
- }
332
-
333
- .hero-spark {
334
- position: absolute;
335
- color: #efb560;
336
- pointer-events: none;
337
- }
338
-
339
- .hero-spark-one {
340
- top: 13%;
341
- right: 0;
342
- font-size: 2rem;
343
- }
344
-
345
- .hero-spark-two {
346
- right: 42%;
347
- bottom: 10%;
348
- color: #e5c9a0;
349
- font-size: 1.2rem;
350
- }
351
-
352
- .feature-section {
353
- padding: 5.5rem 24px 6rem;
354
- background: var(--surface);
355
- }
356
-
357
- .section-heading {
358
- width: min(650px, 100%);
359
- margin: 0 auto 2.5rem;
360
- text-align: center;
361
- }
362
-
363
- .section-heading .eyebrow {
364
- justify-content: center;
365
- margin-bottom: 0.8rem;
366
- }
367
-
368
- .section-heading h2,
369
- .playground-copy h2 {
370
- margin-bottom: 0.85rem;
371
- font-size: clamp(2rem, 4vw, 2.8rem);
372
- font-weight: 800;
373
- letter-spacing: -0.065em;
374
- line-height: 1.15;
375
- }
376
-
377
- .section-heading > p:last-child,
378
- .playground-copy > p:not(.eyebrow) {
379
- color: var(--secText);
380
- line-height: 1.75;
381
- }
382
-
383
- .feature-grid {
384
- display: grid;
385
- grid-template-columns: repeat(3, minmax(0, 1fr));
386
- gap: 1rem;
387
- width: min(1000px, 100%);
388
- margin: 0 auto;
389
- }
390
-
391
- .feature-card {
392
- padding: 1.5rem;
393
- border: 1px solid var(--line);
394
- border-radius: 12px;
395
- background: #fffdfa;
396
- transition: transform 180ms ease, box-shadow 180ms ease;
397
- }
398
-
399
- .feature-card:hover {
400
- transform: translateY(-4px);
401
- box-shadow: var(--shadow);
402
- }
403
-
404
- .feature-icon {
405
- display: grid;
406
- width: 42px;
407
- height: 42px;
408
- place-items: center;
409
- margin-bottom: 1.25rem;
410
- border-radius: 12px;
411
- font-size: 1.35rem;
412
- font-weight: 600;
413
- }
414
-
415
- .icon-create {
416
- color: #c86e1c;
417
- background: #fff0d9;
418
- }
419
-
420
- .icon-select {
421
- color: #63786a;
422
- background: #eaf2e8;
423
- }
424
-
425
- .icon-update {
426
- color: #7470a0;
427
- background: #efedfb;
428
- }
429
-
430
- .feature-card h3 {
431
- margin-bottom: 0.55rem;
432
- font-size: 1.05rem;
433
- letter-spacing: -0.025em;
434
- }
435
-
436
- .feature-card p {
437
- min-height: 4.5rem;
438
- margin-bottom: 1.1rem;
439
- color: var(--secText);
440
- font-size: 0.88rem;
441
- line-height: 1.7;
442
- }
443
-
444
- .feature-card code {
445
- display: inline-block;
446
- padding: 0.4rem 0.55rem;
447
- border-radius: 5px;
448
- color: #a35c16;
449
- background: #fff2df;
450
- font-family: Consolas, 'Courier New', monospace;
451
- font-size: 0.72rem;
452
- }
453
-
454
- .playground-section {
455
- display: grid;
456
- grid-template-columns: 1fr 0.85fr;
457
- align-items: center;
458
- gap: clamp(3rem, 10vw, 8rem);
459
- width: min(900px, calc(100% - 48px));
460
- margin: 0 auto;
461
- padding: 6.5rem 0;
462
- }
463
-
464
- .playground-copy .eyebrow {
465
- margin-bottom: 0.8rem;
466
- }
467
-
468
- .playground-copy h2 {
469
- font-size: clamp(2.2rem, 4vw, 3rem);
470
- }
471
-
472
- .playground-copy > p:not(.eyebrow) {
473
- max-width: 425px;
474
- margin-bottom: 1rem;
475
- }
476
-
477
- .text-link {
478
- display: inline-flex;
479
- gap: 0.5rem;
480
- color: var(--accent-deep);
481
- font-size: 0.9rem;
482
- font-weight: 700;
483
- }
484
-
485
- .counter-card {
486
- padding: 1.5rem;
487
- border: 1px solid var(--line);
488
- border-radius: 16px;
489
- background: var(--surface);
490
- box-shadow: var(--shadow);
491
- }
492
-
493
- .counter-card-top {
494
- display: flex;
495
- align-items: center;
496
- justify-content: space-between;
497
- }
498
-
499
- .counter-badge {
500
- display: inline-flex;
501
- align-items: center;
502
- gap: 0.45rem;
503
- padding: 0.35rem 0.55rem;
504
- border-radius: 5px;
505
- color: #4d7851;
506
- background: #edf7eb;
507
- font-size: 0.65rem;
508
- font-weight: 800;
509
- letter-spacing: 0.08em;
510
- }
511
-
512
- .counter-badge span {
513
- color: #58a961;
514
- font-size: 0.5rem;
515
- }
516
-
517
- .counter-spark {
518
- color: var(--accent);
519
- font-size: 1.4rem;
520
- }
521
-
522
- .counter-label {
523
- margin: 1.4rem 0 0.1rem;
524
- color: var(--secText);
525
- font-size: 0.85rem;
526
- font-weight: 600;
527
- }
528
-
529
- .counter {
530
- display: block;
531
- margin-bottom: 1.1rem;
532
- font-family: 'Manrope', sans-serif;
533
- font-size: 4.5rem;
534
- font-weight: 800;
535
- letter-spacing: -0.08em;
536
- line-height: 1.15;
537
- font-variant-numeric: tabular-nums;
538
- }
539
-
540
- .counter-controls {
541
- display: grid;
542
- grid-template-columns: 1fr 1fr;
543
- gap: 0.6rem;
544
- }
545
-
546
- .counter-controls .btn {
547
- min-height: 48px;
548
- border: 1px solid var(--line);
549
- border-radius: 8px;
550
- cursor: pointer;
551
- font-size: 1.25rem;
552
- font-weight: 700;
553
- transition: transform 140ms ease, background 140ms ease, border 140ms ease;
554
- }
555
-
556
- .counter-controls .btn:hover {
557
- transform: translateY(-2px);
558
- }
559
-
560
- .counter-controls .sec {
561
- color: var(--text);
562
- background: #fff;
563
- }
564
-
565
- .counter-controls .sec:hover {
566
- border-color: #d8c8b0;
567
- background: #fffaf3;
568
- }
569
-
570
- .counter-controls .prim {
571
- border-color: var(--text);
572
- color: #fff;
573
- background: var(--text);
574
- }
575
-
576
- .counter-controls .prim:hover {
577
- background: #403b34;
578
- }
579
-
580
- .counter-controls .btn:focus-visible,
581
- a:focus-visible {
582
- outline: 3px solid rgba(242, 154, 56, 0.6);
583
- outline-offset: 3px;
584
- }
585
-
586
- .counter-hint {
587
- margin: 0.9rem 0 0;
588
- color: #969087;
589
- font-size: 0.75rem;
590
- text-align: center;
591
- }
592
-
593
- .site-footer {
594
- display: flex;
595
- align-items: center;
596
- justify-content: space-between;
597
- gap: 1rem;
598
- width: min(1120px, calc(100% - 48px));
599
- min-height: 88px;
600
- margin: 0 auto;
601
- border-top: 1px solid var(--line);
602
- }
603
-
604
- .footer-brand {
605
- font-size: 1rem;
606
- }
607
-
608
- .footer-brand .brand-mark {
609
- width: 29px;
610
- height: 29px;
611
- border-radius: 9px;
612
- font-size: 0.7rem;
613
- }
614
-
615
- .site-footer p,
616
- .site-footer > a:last-child {
617
- margin: 0;
618
- color: var(--secText);
619
- font-size: 0.78rem;
620
- }
621
-
622
- .site-footer > a:last-child span {
623
- color: var(--accent-deep);
624
- }
625
-
626
- @media (max-width: 760px) {
627
- .hero {
628
- grid-template-columns: 1fr;
629
- gap: 3rem;
630
- min-height: auto;
631
- padding: 4rem 0 4.5rem;
632
- }
633
-
634
- .hero-copy {
635
- max-width: 580px;
636
- }
637
-
638
- .code-card {
639
- width: min(560px, 100%);
640
- margin: 0 auto;
641
- transform: none;
642
- }
643
-
644
- .hero-spark-one {
645
- top: 7%;
646
- right: 2%;
647
- }
648
-
649
- .hero-spark-two {
650
- display: none;
651
- }
652
-
653
- .feature-grid {
654
- grid-template-columns: 1fr;
655
- max-width: 520px;
656
- }
657
-
658
- .feature-card p {
659
- min-height: 0;
660
- }
661
-
662
- .playground-section {
663
- grid-template-columns: 1fr;
664
- gap: 2rem;
665
- max-width: 560px;
666
- padding: 4.5rem 0;
667
- }
668
- }
669
-
670
- @media (max-width: 520px) {
671
- .site-header,
672
- .site-footer,
673
- .hero,
674
- .playground-section {
675
- width: calc(100% - 36px);
676
- }
677
-
678
- .site-header {
679
- min-height: 72px;
680
- }
681
-
682
- .main-nav {
683
- gap: 0.8rem;
684
- font-size: 0.78rem;
685
- }
686
-
687
- .main-nav .nav-cta {
688
- padding: 0.55rem 0.65rem;
689
- }
690
-
691
- .hero {
692
- padding-top: 3.5rem;
693
- }
694
-
695
- .hero h1 {
696
- font-size: clamp(3rem, 15vw, 4.3rem);
697
- }
698
-
699
- .hero-description {
700
- font-size: 0.96rem;
701
- }
702
-
703
- .button {
704
- min-height: 44px;
705
- padding: 0.7rem 0.85rem;
706
- font-size: 0.8rem;
707
- }
708
-
709
- .code-card pre {
710
- padding: 1.2rem 1rem;
711
- font-size: 0.68rem;
712
- }
713
-
714
- .feature-section {
715
- padding: 4rem 18px;
716
- }
717
-
718
- .site-footer {
719
- flex-wrap: wrap;
720
- justify-content: space-between;
721
- padding: 1.25rem 0;
722
- }
723
-
724
- .site-footer p {
725
- order: 1;
726
- width: 100%;
727
- }
728
- }
729
-
730
- @media (prefers-reduced-motion: reduce) {
731
- *,
732
- *::before,
733
- *::after {
734
- scroll-behavior: auto !important;
735
- transition-duration: 0.01ms !important;
736
- animation-duration: 0.01ms !important;
737
- animation-iteration-count: 1 !important;
738
- }
739
- }