@arclux/arc-ui-html 1.0.0 → 1.2.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 +110 -4
- package/css/button.css +15 -0
- 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
|
|
|
@@ -1996,6 +2084,21 @@
|
|
|
1996
2084
|
/* Disabled */
|
|
1997
2085
|
.arc-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
|
|
1998
2086
|
|
|
2087
|
+
/* Prefix / Suffix */
|
|
2088
|
+
.arc-button .btn__prefix,
|
|
2089
|
+
.arc-button .btn__suffix {
|
|
2090
|
+
display: inline-flex;
|
|
2091
|
+
align-items: center;
|
|
2092
|
+
}
|
|
2093
|
+
|
|
2094
|
+
.arc-button .btn__prefix--empty,
|
|
2095
|
+
.arc-button .btn__suffix--empty { display: none; }
|
|
2096
|
+
|
|
2097
|
+
::slotted([slot="prefix"]),
|
|
2098
|
+
::slotted([slot="suffix"]) {
|
|
2099
|
+
display: flex;
|
|
2100
|
+
}
|
|
2101
|
+
|
|
1999
2102
|
@media (prefers-reduced-motion: reduce) {
|
|
2000
2103
|
.arc-button *,
|
|
2001
2104
|
.arc-button *::before,
|
|
@@ -2551,10 +2654,13 @@
|
|
|
2551
2654
|
|
|
2552
2655
|
.arc-page-header .page-header {
|
|
2553
2656
|
padding: var(--space-lg) 0 var(--space-md);
|
|
2657
|
+
}
|
|
2658
|
+
|
|
2659
|
+
.arc-page-header[border] .page-header {
|
|
2554
2660
|
border-bottom: 1px solid var(--border-subtle);
|
|
2555
2661
|
}
|
|
2556
2662
|
|
|
2557
|
-
.arc-page-header .page-
|
|
2663
|
+
.arc-page-header .page-header__above {
|
|
2558
2664
|
margin-bottom: var(--space-sm);
|
|
2559
2665
|
}
|
|
2560
2666
|
|
|
@@ -2569,13 +2675,13 @@
|
|
|
2569
2675
|
.arc-page-header .page-header__heading {
|
|
2570
2676
|
margin: 0;
|
|
2571
2677
|
font-family: var(--font-body);
|
|
2572
|
-
font-size: 28px;
|
|
2678
|
+
font-size: 28px;
|
|
2573
2679
|
font-weight: 700;
|
|
2574
2680
|
color: var(--text-primary);
|
|
2575
2681
|
line-height: 1.2;
|
|
2576
2682
|
}
|
|
2577
2683
|
|
|
2578
|
-
.arc-page-header .page-
|
|
2684
|
+
.arc-page-header .page-header__aside {
|
|
2579
2685
|
display: flex;
|
|
2580
2686
|
align-items: center;
|
|
2581
2687
|
gap: var(--space-sm);
|
|
@@ -2589,7 +2695,7 @@
|
|
|
2589
2695
|
line-height: 1.5;
|
|
2590
2696
|
}
|
|
2591
2697
|
|
|
2592
|
-
.arc-page-header .page-
|
|
2698
|
+
.arc-page-header .page-header__below {
|
|
2593
2699
|
margin-top: var(--space-md);
|
|
2594
2700
|
}
|
|
2595
2701
|
|
package/css/button.css
CHANGED
|
@@ -83,6 +83,21 @@
|
|
|
83
83
|
/* Disabled */
|
|
84
84
|
.arc-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
|
|
85
85
|
|
|
86
|
+
/* Prefix / Suffix */
|
|
87
|
+
.arc-button .btn__prefix,
|
|
88
|
+
.arc-button .btn__suffix {
|
|
89
|
+
display: inline-flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.arc-button .btn__prefix--empty,
|
|
94
|
+
.arc-button .btn__suffix--empty { display: none; }
|
|
95
|
+
|
|
96
|
+
::slotted([slot="prefix"]),
|
|
97
|
+
::slotted([slot="suffix"]) {
|
|
98
|
+
display: flex;
|
|
99
|
+
}
|
|
100
|
+
|
|
86
101
|
@media (prefers-reduced-motion: reduce) {
|
|
87
102
|
.arc-button *,
|
|
88
103
|
.arc-button *::before,
|
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>
|