@arclux/arc-ui-html 1.0.0 → 1.1.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.
- package/css/arc-ui.css +95 -4
- package/css/card.css +14 -0
- package/css/cta-banner.css +75 -0
- package/css/page-header.css +7 -4
- package/examples/cta-banner.html +17 -0
- package/examples/cta-banner.inline.html +26 -0
- package/package.json +1 -1
package/css/arc-ui.css
CHANGED
|
@@ -529,6 +529,8 @@
|
|
|
529
529
|
padding: var(--space-xl) var(--space-lg);
|
|
530
530
|
flex: 1;
|
|
531
531
|
min-height: 0;
|
|
532
|
+
display: flex;
|
|
533
|
+
flex-direction: column;
|
|
532
534
|
transition: box-shadow var(--transition-slow);
|
|
533
535
|
}
|
|
534
536
|
|
|
@@ -538,6 +540,18 @@
|
|
|
538
540
|
|
|
539
541
|
.arc-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
|
|
540
542
|
|
|
543
|
+
.arc-card .card__body {
|
|
544
|
+
flex: 1;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.arc-card .card__footer {
|
|
548
|
+
margin-top: var(--space-md);
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.arc-card .card__footer--empty {
|
|
552
|
+
display: none;
|
|
553
|
+
}
|
|
554
|
+
|
|
541
555
|
@media (max-width: 768px) {
|
|
542
556
|
.arc-card .card__inner { padding: var(--space-lg) var(--space-md); }
|
|
543
557
|
}
|
|
@@ -683,6 +697,80 @@
|
|
|
683
697
|
}
|
|
684
698
|
}
|
|
685
699
|
|
|
700
|
+
/* arc-cta-banner */
|
|
701
|
+
.arc-cta-banner { display: block; position: relative; overflow: hidden; }
|
|
702
|
+
|
|
703
|
+
.arc-cta-banner .cta {
|
|
704
|
+
position: relative;
|
|
705
|
+
padding: var(--space-3xl) var(--space-lg);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.arc-cta-banner .cta__bg {
|
|
709
|
+
position: absolute;
|
|
710
|
+
inset: 0;
|
|
711
|
+
background:
|
|
712
|
+
radial-gradient(ellipse at 30% 50%, rgba(var(--accent-primary-rgb), 0.1), transparent 60%),
|
|
713
|
+
radial-gradient(ellipse at 70% 50%, rgba(var(--accent-secondary-rgb), 0.08), transparent 60%);
|
|
714
|
+
pointer-events: none;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.arc-cta-banner[nogradient] .cta__bg { display: none; }
|
|
718
|
+
|
|
719
|
+
.arc-cta-banner .cta__inner {
|
|
720
|
+
position: relative;
|
|
721
|
+
max-width: var(--max-width, 1200px);
|
|
722
|
+
margin-inline: auto;
|
|
723
|
+
display: flex;
|
|
724
|
+
flex-direction: column;
|
|
725
|
+
align-items: center;
|
|
726
|
+
text-align: center;
|
|
727
|
+
gap: var(--space-md);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.arc-cta-banner .cta__eyebrow {
|
|
731
|
+
font-family: var(--font-accent);
|
|
732
|
+
font-weight: 600;
|
|
733
|
+
font-size: var(--text-xs);
|
|
734
|
+
letter-spacing: 4px;
|
|
735
|
+
text-transform: uppercase;
|
|
736
|
+
background: var(--gradient-accent-text);
|
|
737
|
+
-webkit-background-clip: text;
|
|
738
|
+
-webkit-text-fill-color: transparent;
|
|
739
|
+
background-clip: text;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.arc-cta-banner .cta__headline {
|
|
743
|
+
font-size: clamp(28px, 4vw, 40px);
|
|
744
|
+
font-weight: 500;
|
|
745
|
+
letter-spacing: -1px;
|
|
746
|
+
background: var(--gradient-display-text);
|
|
747
|
+
-webkit-background-clip: text;
|
|
748
|
+
-webkit-text-fill-color: transparent;
|
|
749
|
+
background-clip: text;
|
|
750
|
+
margin: 0;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.arc-cta-banner .cta__body {
|
|
754
|
+
color: var(--text-secondary);
|
|
755
|
+
font-size: var(--text-md);
|
|
756
|
+
max-width: 480px;
|
|
757
|
+
text-wrap: balance;
|
|
758
|
+
line-height: 1.7;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.arc-cta-banner .cta__body ::slotted(*) { margin: 0; }
|
|
762
|
+
|
|
763
|
+
.arc-cta-banner .cta__actions {
|
|
764
|
+
display: flex;
|
|
765
|
+
gap: var(--space-md);
|
|
766
|
+
margin-top: var(--space-sm);
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
@media (max-width: 768px) {
|
|
770
|
+
.arc-cta-banner .cta { padding: var(--space-xl) var(--space-md); }
|
|
771
|
+
.arc-cta-banner .cta__actions { flex-direction: column; align-items: center; }
|
|
772
|
+
}
|
|
773
|
+
|
|
686
774
|
/* arc-divider */
|
|
687
775
|
.arc-divider { display: block; width: 100%; }
|
|
688
776
|
|
|
@@ -2551,10 +2639,13 @@
|
|
|
2551
2639
|
|
|
2552
2640
|
.arc-page-header .page-header {
|
|
2553
2641
|
padding: var(--space-lg) 0 var(--space-md);
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2644
|
+
.arc-page-header[border] .page-header {
|
|
2554
2645
|
border-bottom: 1px solid var(--border-subtle);
|
|
2555
2646
|
}
|
|
2556
2647
|
|
|
2557
|
-
.arc-page-header .page-
|
|
2648
|
+
.arc-page-header .page-header__above {
|
|
2558
2649
|
margin-bottom: var(--space-sm);
|
|
2559
2650
|
}
|
|
2560
2651
|
|
|
@@ -2569,13 +2660,13 @@
|
|
|
2569
2660
|
.arc-page-header .page-header__heading {
|
|
2570
2661
|
margin: 0;
|
|
2571
2662
|
font-family: var(--font-body);
|
|
2572
|
-
font-size: 28px;
|
|
2663
|
+
font-size: 28px;
|
|
2573
2664
|
font-weight: 700;
|
|
2574
2665
|
color: var(--text-primary);
|
|
2575
2666
|
line-height: 1.2;
|
|
2576
2667
|
}
|
|
2577
2668
|
|
|
2578
|
-
.arc-page-header .page-
|
|
2669
|
+
.arc-page-header .page-header__aside {
|
|
2579
2670
|
display: flex;
|
|
2580
2671
|
align-items: center;
|
|
2581
2672
|
gap: var(--space-sm);
|
|
@@ -2589,7 +2680,7 @@
|
|
|
2589
2680
|
line-height: 1.5;
|
|
2590
2681
|
}
|
|
2591
2682
|
|
|
2592
|
-
.arc-page-header .page-
|
|
2683
|
+
.arc-page-header .page-header__below {
|
|
2593
2684
|
margin-top: var(--space-md);
|
|
2594
2685
|
}
|
|
2595
2686
|
|
package/css/card.css
CHANGED
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
padding: var(--space-xl) var(--space-lg);
|
|
27
27
|
flex: 1;
|
|
28
28
|
min-height: 0;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
29
31
|
transition: box-shadow var(--transition-slow);
|
|
30
32
|
}
|
|
31
33
|
|
|
@@ -35,6 +37,18 @@
|
|
|
35
37
|
|
|
36
38
|
.arc-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
|
|
37
39
|
|
|
40
|
+
.arc-card .card__body {
|
|
41
|
+
flex: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.arc-card .card__footer {
|
|
45
|
+
margin-top: var(--space-md);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.arc-card .card__footer--empty {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
38
52
|
@media (max-width: 768px) {
|
|
39
53
|
.arc-card .card__inner { padding: var(--space-lg) var(--space-md); }
|
|
40
54
|
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* Auto-generated by @arclux/prism — do not edit manually */
|
|
2
|
+
|
|
3
|
+
/* arc-cta-banner */
|
|
4
|
+
.arc-cta-banner { display: block; position: relative; overflow: hidden; }
|
|
5
|
+
|
|
6
|
+
.arc-cta-banner .cta {
|
|
7
|
+
position: relative;
|
|
8
|
+
padding: var(--space-3xl) var(--space-lg);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.arc-cta-banner .cta__bg {
|
|
12
|
+
position: absolute;
|
|
13
|
+
inset: 0;
|
|
14
|
+
background:
|
|
15
|
+
radial-gradient(ellipse at 30% 50%, rgba(var(--accent-primary-rgb), 0.1), transparent 60%),
|
|
16
|
+
radial-gradient(ellipse at 70% 50%, rgba(var(--accent-secondary-rgb), 0.08), transparent 60%);
|
|
17
|
+
pointer-events: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.arc-cta-banner[nogradient] .cta__bg { display: none; }
|
|
21
|
+
|
|
22
|
+
.arc-cta-banner .cta__inner {
|
|
23
|
+
position: relative;
|
|
24
|
+
max-width: var(--max-width, 1200px);
|
|
25
|
+
margin-inline: auto;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
align-items: center;
|
|
29
|
+
text-align: center;
|
|
30
|
+
gap: var(--space-md);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.arc-cta-banner .cta__eyebrow {
|
|
34
|
+
font-family: var(--font-accent);
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
font-size: var(--text-xs);
|
|
37
|
+
letter-spacing: 4px;
|
|
38
|
+
text-transform: uppercase;
|
|
39
|
+
background: var(--gradient-accent-text);
|
|
40
|
+
-webkit-background-clip: text;
|
|
41
|
+
-webkit-text-fill-color: transparent;
|
|
42
|
+
background-clip: text;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.arc-cta-banner .cta__headline {
|
|
46
|
+
font-size: clamp(28px, 4vw, 40px);
|
|
47
|
+
font-weight: 500;
|
|
48
|
+
letter-spacing: -1px;
|
|
49
|
+
background: var(--gradient-display-text);
|
|
50
|
+
-webkit-background-clip: text;
|
|
51
|
+
-webkit-text-fill-color: transparent;
|
|
52
|
+
background-clip: text;
|
|
53
|
+
margin: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.arc-cta-banner .cta__body {
|
|
57
|
+
color: var(--text-secondary);
|
|
58
|
+
font-size: var(--text-md);
|
|
59
|
+
max-width: 480px;
|
|
60
|
+
text-wrap: balance;
|
|
61
|
+
line-height: 1.7;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.arc-cta-banner .cta__body ::slotted(*) { margin: 0; }
|
|
65
|
+
|
|
66
|
+
.arc-cta-banner .cta__actions {
|
|
67
|
+
display: flex;
|
|
68
|
+
gap: var(--space-md);
|
|
69
|
+
margin-top: var(--space-sm);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media (max-width: 768px) {
|
|
73
|
+
.arc-cta-banner .cta { padding: var(--space-xl) var(--space-md); }
|
|
74
|
+
.arc-cta-banner .cta__actions { flex-direction: column; align-items: center; }
|
|
75
|
+
}
|
package/css/page-header.css
CHANGED
|
@@ -8,10 +8,13 @@
|
|
|
8
8
|
|
|
9
9
|
.arc-page-header .page-header {
|
|
10
10
|
padding: var(--space-lg) 0 var(--space-md);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.arc-page-header[border] .page-header {
|
|
11
14
|
border-bottom: 1px solid var(--border-subtle);
|
|
12
15
|
}
|
|
13
16
|
|
|
14
|
-
.arc-page-header .page-
|
|
17
|
+
.arc-page-header .page-header__above {
|
|
15
18
|
margin-bottom: var(--space-sm);
|
|
16
19
|
}
|
|
17
20
|
|
|
@@ -26,13 +29,13 @@
|
|
|
26
29
|
.arc-page-header .page-header__heading {
|
|
27
30
|
margin: 0;
|
|
28
31
|
font-family: var(--font-body);
|
|
29
|
-
font-size: 28px;
|
|
32
|
+
font-size: 28px;
|
|
30
33
|
font-weight: 700;
|
|
31
34
|
color: var(--text-primary);
|
|
32
35
|
line-height: 1.2;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
|
-
.arc-page-header .page-
|
|
38
|
+
.arc-page-header .page-header__aside {
|
|
36
39
|
display: flex;
|
|
37
40
|
align-items: center;
|
|
38
41
|
gap: var(--space-sm);
|
|
@@ -46,7 +49,7 @@
|
|
|
46
49
|
line-height: 1.5;
|
|
47
50
|
}
|
|
48
51
|
|
|
49
|
-
.arc-page-header .page-
|
|
52
|
+
.arc-page-header .page-header__below {
|
|
50
53
|
margin-top: var(--space-md);
|
|
51
54
|
}
|
|
52
55
|
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<!-- Auto-generated by @arclux/prism — do not edit manually -->
|
|
2
|
+
<!-- arc-cta-banner — requires cta-banner.css + tokens.css (or arc-ui.css) -->
|
|
3
|
+
<div class="arc-cta-banner">
|
|
4
|
+
<div class="cta">
|
|
5
|
+
<div class="cta__bg"></div>
|
|
6
|
+
<div class="cta__inner">
|
|
7
|
+
Eyebrow
|
|
8
|
+
Headline
|
|
9
|
+
<div class="cta__body">
|
|
10
|
+
Cta Banner
|
|
11
|
+
</div>
|
|
12
|
+
<div class="cta__actions">
|
|
13
|
+
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!-- Auto-generated by @arclux/prism — do not edit manually -->
|
|
2
|
+
<!-- arc-cta-banner — self-contained, no external CSS needed -->
|
|
3
|
+
<style>
|
|
4
|
+
@media (max-width: 768px) {
|
|
5
|
+
.arc-cta-banner .cta { padding: 40px var(--space-md); }
|
|
6
|
+
}
|
|
7
|
+
@media (max-width: 768px) {
|
|
8
|
+
.arc-cta-banner .cta__actions { flex-direction: column; align-items: center; }
|
|
9
|
+
}
|
|
10
|
+
</style>
|
|
11
|
+
<div class="arc-cta-banner" style="display: block; position: relative; overflow: hidden">
|
|
12
|
+
<div class="cta" style="position: relative; padding: 96px 24px">
|
|
13
|
+
<div style="position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(77, 126, 247, 0.1), transparent 60%),
|
|
14
|
+
radial-gradient(ellipse at 70% 50%, rgba(139, 92, 246, 0.08), transparent 60%); pointer-events: none"></div>
|
|
15
|
+
<div style="position: relative; max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px">
|
|
16
|
+
Eyebrow
|
|
17
|
+
Headline
|
|
18
|
+
<div style="color: rgb(160, 165, 195); font-size: 15px; max-width: 480px; text-wrap: balance; line-height: 1.7">
|
|
19
|
+
Cta Banner
|
|
20
|
+
</div>
|
|
21
|
+
<div class="cta__actions" style="display: flex; gap: var(--space-md); margin-top: 8px">
|
|
22
|
+
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|