hds-web 1.22.0 → 1.22.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/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +2 -2
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/src/HDS/components/Cards/StoryCard/storysm.js +6 -6
- package/src/HDS/components/Cards/StoryCard/storyxl.js +108 -91
- package/src/HDS/components/common-components/Icon/IconMap.js +3 -0
- package/src/styles/tailwind.css +150 -0
package/package.json
CHANGED
|
@@ -13,16 +13,16 @@ export default function StoryCard(props) {
|
|
|
13
13
|
href={props.linkUrl}
|
|
14
14
|
className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
|
|
15
15
|
>
|
|
16
|
-
|
|
17
16
|
<>
|
|
18
17
|
<div className='flex items-center justify-between pb-5'>
|
|
19
18
|
{props.brandImageUrl && props.brandImageAlt && (
|
|
20
19
|
<div className="max-h-[64px]">
|
|
21
|
-
<img src={props.brandImageUrl}
|
|
20
|
+
<img src={props.brandImageUrl}
|
|
21
|
+
alt={props.brandImageAlt}
|
|
22
|
+
className="max-h-[44px] brightness-0 transition ease-in-out duration-300 group-hover:brightness-100"
|
|
23
|
+
/>
|
|
22
24
|
</div>
|
|
23
|
-
)
|
|
24
|
-
|
|
25
|
-
}
|
|
25
|
+
)}
|
|
26
26
|
{props.iconVariant &&
|
|
27
27
|
(
|
|
28
28
|
<div className="hidden tb:flex flex-row relative ">
|
|
@@ -87,7 +87,7 @@ StoryCard.defaultProps = {
|
|
|
87
87
|
descTextColor: 'text-neutral-700',
|
|
88
88
|
iconTag: 'Customer Stories',
|
|
89
89
|
titleTextColor: '',
|
|
90
|
-
brandImageUrl: 'https://res.cloudinary.com/
|
|
90
|
+
brandImageUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690909443/hasura-design-system/swiggy_m2hjxy.png',
|
|
91
91
|
brandImageAlt: 'pipe',
|
|
92
92
|
linkUrl: '#',
|
|
93
93
|
iconVariant: 'videorecorder',
|
|
@@ -6,106 +6,123 @@ import { Icon } from "../../common-components";
|
|
|
6
6
|
export default function StoryCardXL(props) {
|
|
7
7
|
return (
|
|
8
8
|
<>
|
|
9
|
-
<div className="flex flex-col-
|
|
9
|
+
<div className="flex flex-col justify-between px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:max-w-7xl min-h-[839px] tb-l:min-h-[676px]">
|
|
10
|
+
<div className="flex flex-col-reverse ">
|
|
11
|
+
<div className="flex flex-col-reverse tb-l:flex-row tb-l:gap-10 db:gap-32">
|
|
12
|
+
<div className="flex flex-col justify-between tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
|
|
13
|
+
{
|
|
14
|
+
props.tagline && (
|
|
15
|
+
<Typography textStyle='h6' className='text-blue-400 tb-l:block uppercase mb-2 hidden '>{props.tagline}</Typography>
|
|
16
|
+
)
|
|
17
|
+
}
|
|
18
|
+
{props.brandImageURL &&
|
|
19
|
+
props.brandImageAlt && (
|
|
20
|
+
<div className="justify-start tb-l:flex hidden">
|
|
21
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className=" " />
|
|
22
|
+
</div>
|
|
23
|
+
)
|
|
10
24
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{props.heroList.map((value, index) => (
|
|
34
|
-
<div key={index} className='flex gap-5'>
|
|
35
|
-
<Icon
|
|
36
|
-
height='tb:h-8 tb:w-8 h-6 w-6' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
|
|
37
|
-
<Typography
|
|
38
|
-
textStyle='sub2' className='text-neutral-700' >
|
|
39
|
-
{value.heroListTitle}
|
|
40
|
-
</Typography>
|
|
25
|
+
}
|
|
26
|
+
{props.title &&
|
|
27
|
+
(
|
|
28
|
+
<div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
|
|
29
|
+
<Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
|
|
30
|
+
{props.heroList &&
|
|
31
|
+
(
|
|
32
|
+
<div>
|
|
33
|
+
<div className="flex flex-col gap-4 tb-l:min-h-[224px]">
|
|
34
|
+
{props.heroList.map((value, index) => (
|
|
35
|
+
<div key={index} className='flex gap-5'>
|
|
36
|
+
<Icon
|
|
37
|
+
height='tb:h-8 tb:w-8 h-6 w-6'
|
|
38
|
+
variant={value.iconVariant}
|
|
39
|
+
strokeClass={value.strokeClass ?? 'stroke-neutral-800'} />
|
|
40
|
+
<Typography
|
|
41
|
+
textStyle='sub2' className='text-neutral-700' >
|
|
42
|
+
{value.title}
|
|
43
|
+
</Typography>
|
|
44
|
+
</div>
|
|
45
|
+
))
|
|
46
|
+
}
|
|
41
47
|
</div>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
<div className="tb-l:flex hidden">
|
|
52
|
+
{props.CTA &&
|
|
53
|
+
<div className="mt-16 tb:mt-10 tb:flex">
|
|
54
|
+
<a href={props.CTA['url']}>
|
|
55
|
+
<HDSButton
|
|
56
|
+
label={props.CTA['text']}
|
|
57
|
+
type={'secondary'}
|
|
58
|
+
size='md'
|
|
59
|
+
rightAnimatedArrowColor="#3970FD"
|
|
60
|
+
/>
|
|
61
|
+
</a>
|
|
62
|
+
</div>}
|
|
45
63
|
</div>
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
64
|
+
</div>
|
|
65
|
+
)}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
</div>
|
|
69
|
+
{(props.heroImageURL &&
|
|
70
|
+
props.heroImageAlt) ?
|
|
71
|
+
(
|
|
72
|
+
<>
|
|
73
|
+
<div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
74
|
+
<img
|
|
75
|
+
src={props.heroImageURL}
|
|
76
|
+
alt={props.heroImageAlt}
|
|
77
|
+
className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[650px] tb-l:max-w-[600px] tb:max-w-[420px] "
|
|
78
|
+
/>
|
|
79
|
+
</div>
|
|
80
|
+
</>
|
|
81
|
+
)
|
|
82
|
+
:
|
|
83
|
+
(
|
|
84
|
+
<>
|
|
85
|
+
{props.video_url && (
|
|
86
|
+
<div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
|
|
87
|
+
<video
|
|
88
|
+
autoPlay
|
|
89
|
+
loop
|
|
90
|
+
playsInline
|
|
91
|
+
muted
|
|
92
|
+
src={props.video_url}
|
|
93
|
+
className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
|
|
94
|
+
/>
|
|
95
|
+
</div>)}
|
|
96
|
+
</>
|
|
97
|
+
)}
|
|
98
|
+
</div>
|
|
99
|
+
<div className="tb-l:hidden pb-6">
|
|
100
|
+
{props.brandImageURL &&
|
|
101
|
+
props.brandImageAlt && (
|
|
102
|
+
<div className="pb-4 ">
|
|
103
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[28px]" />
|
|
104
|
+
</div>
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
<div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
<div className="tb-l:hidden block">
|
|
50
111
|
{props.CTA &&
|
|
51
112
|
<div className="mt-16 tb:mt-10 tb:flex">
|
|
52
113
|
<a href={props.CTA['url']}>
|
|
53
114
|
<HDSButton
|
|
54
115
|
label={props.CTA['text']}
|
|
55
|
-
type={
|
|
116
|
+
type={'secondary'}
|
|
56
117
|
size='md'
|
|
57
118
|
rightAnimatedArrowColor="#3970FD"
|
|
58
119
|
/>
|
|
59
120
|
</a>
|
|
60
121
|
</div>}
|
|
61
122
|
</div>
|
|
62
|
-
{(props.heroImageURL &&
|
|
63
|
-
props.heroImageAlt) ?
|
|
64
|
-
(
|
|
65
|
-
<>
|
|
66
|
-
<div className="flex mt-4 tb:mt-0 justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
67
|
-
<img
|
|
68
|
-
src={props.heroImageURL}
|
|
69
|
-
alt={props.heroImageAlt}
|
|
70
|
-
className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[717px] tb-l:max-w-[600px] max-w-[280px]"
|
|
71
|
-
/>
|
|
72
|
-
</div>
|
|
73
|
-
</>
|
|
74
|
-
)
|
|
75
|
-
:
|
|
76
|
-
(
|
|
77
|
-
<>
|
|
78
|
-
{props.video_url && (
|
|
79
|
-
<div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
|
|
80
|
-
<video
|
|
81
|
-
autoPlay
|
|
82
|
-
loop
|
|
83
|
-
playsInline
|
|
84
|
-
muted
|
|
85
|
-
src={props.video_url}
|
|
86
|
-
className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
|
|
87
|
-
/>
|
|
88
|
-
</div>)}
|
|
89
|
-
</>
|
|
90
|
-
)}
|
|
91
|
-
|
|
92
|
-
<div className="tb-l:hidden pb-6">
|
|
93
|
-
{props.brandImageURL &&
|
|
94
|
-
props.brandImageAlt && (
|
|
95
|
-
<div className="pb-4 ">
|
|
96
|
-
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[28px]" />
|
|
97
|
-
</div>
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
<Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
|
|
101
|
-
</div>
|
|
102
|
-
{
|
|
103
|
-
props.tagline && (
|
|
104
|
-
<Typography textStyle='h6' className='text-blue-400 tb-l:hidden uppercase'>{props.tagline}</Typography>
|
|
105
|
-
)
|
|
106
|
-
}
|
|
107
123
|
</div>
|
|
108
124
|
|
|
125
|
+
|
|
109
126
|
</>
|
|
110
127
|
)
|
|
111
128
|
}
|
|
@@ -116,7 +133,7 @@ StoryCardXL.defaultProps = {
|
|
|
116
133
|
heroIconVariant: 'calendar',
|
|
117
134
|
heroIconStrokeClass: 'stroke-neutral-1000',
|
|
118
135
|
heroListTitle: '100 days from concept to production',
|
|
119
|
-
brandImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/
|
|
136
|
+
brandImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690982687/website%20v3/customers/ushor_zewv16.png',
|
|
120
137
|
brandImageAlt: 'optum',
|
|
121
138
|
title: 'Healthcare giant Optum goes from concept to production in 100 days with Hasura',
|
|
122
139
|
description: 'description1',
|
|
@@ -125,16 +142,16 @@ StoryCardXL.defaultProps = {
|
|
|
125
142
|
},
|
|
126
143
|
heroList: [
|
|
127
144
|
{
|
|
128
|
-
|
|
129
|
-
|
|
145
|
+
iconVariant: 'calendar',
|
|
146
|
+
title: '100 days from concept to production, 100 days from concept to production'
|
|
130
147
|
},
|
|
131
148
|
{
|
|
132
|
-
|
|
133
|
-
|
|
149
|
+
iconVariant: 'database03',
|
|
150
|
+
title: 'Vastly improved access to relevant data, 100 days from concept to production'
|
|
134
151
|
},
|
|
135
152
|
{
|
|
136
|
-
|
|
137
|
-
|
|
153
|
+
iconVariant: 'settings01',
|
|
154
|
+
title: 'Simpler data and API management, 100 days from concept to production'
|
|
138
155
|
}
|
|
139
156
|
]
|
|
140
157
|
// video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
|
|
@@ -2401,6 +2401,9 @@ export default function Icon ({ variant, height, strokeColor, strokeClass, class
|
|
|
2401
2401
|
if (variant === 'meetup') {
|
|
2402
2402
|
IconStrokeCLass = 'fill-neutral-500 group-hover/icon:fill-pink-meetup'
|
|
2403
2403
|
}
|
|
2404
|
+
if (variant === 'graphQL') {
|
|
2405
|
+
IconStrokeCLass = ''
|
|
2406
|
+
}
|
|
2404
2407
|
return (
|
|
2405
2408
|
<div style={{ stroke: `${strokeColor}` }}>
|
|
2406
2409
|
<CurrentActiveIcon
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1740,6 +1740,18 @@ select{
|
|
|
1740
1740
|
max-height: 100vh;
|
|
1741
1741
|
}
|
|
1742
1742
|
|
|
1743
|
+
.max-h-\[34px\]{
|
|
1744
|
+
max-height: 34px;
|
|
1745
|
+
}
|
|
1746
|
+
|
|
1747
|
+
.max-h-\[44px\]{
|
|
1748
|
+
max-height: 44px;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.max-h-\[50px\]{
|
|
1752
|
+
max-height: 50px;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1743
1755
|
.min-h-\[12px\]{
|
|
1744
1756
|
min-height: 12px;
|
|
1745
1757
|
}
|
|
@@ -1776,6 +1788,14 @@ select{
|
|
|
1776
1788
|
min-height: 64px;
|
|
1777
1789
|
}
|
|
1778
1790
|
|
|
1791
|
+
.min-h-\[518px\]{
|
|
1792
|
+
min-height: 518px;
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
.min-h-\[839px\]{
|
|
1796
|
+
min-height: 839px;
|
|
1797
|
+
}
|
|
1798
|
+
|
|
1779
1799
|
.\!w-full{
|
|
1780
1800
|
width: 100% !important;
|
|
1781
1801
|
}
|
|
@@ -2248,6 +2268,18 @@ select{
|
|
|
2248
2268
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2249
2269
|
}
|
|
2250
2270
|
|
|
2271
|
+
.translate-x-2{
|
|
2272
|
+
--tw-translate-x: 0.5rem;
|
|
2273
|
+
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2274
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2275
|
+
}
|
|
2276
|
+
|
|
2277
|
+
.translate-x-px{
|
|
2278
|
+
--tw-translate-x: 1px;
|
|
2279
|
+
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2280
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2281
|
+
}
|
|
2282
|
+
|
|
2251
2283
|
.-rotate-45{
|
|
2252
2284
|
--tw-rotate: -45deg;
|
|
2253
2285
|
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -5807,6 +5839,10 @@ select{
|
|
|
5807
5839
|
fill: #6C737F;
|
|
5808
5840
|
}
|
|
5809
5841
|
|
|
5842
|
+
.fill-neutral-800{
|
|
5843
|
+
fill: #1F2A37;
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5810
5846
|
.stroke-amber-100{
|
|
5811
5847
|
stroke: #FFF3D4;
|
|
5812
5848
|
}
|
|
@@ -7474,6 +7510,10 @@ select{
|
|
|
7474
7510
|
opacity: 0.6;
|
|
7475
7511
|
}
|
|
7476
7512
|
|
|
7513
|
+
.mix-blend-multiply{
|
|
7514
|
+
mix-blend-mode: multiply;
|
|
7515
|
+
}
|
|
7516
|
+
|
|
7477
7517
|
.shadow{
|
|
7478
7518
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
7479
7519
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
@@ -7606,6 +7646,42 @@ select{
|
|
|
7606
7646
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7607
7647
|
}
|
|
7608
7648
|
|
|
7649
|
+
.brightness-0{
|
|
7650
|
+
--tw-brightness: brightness(0);
|
|
7651
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7652
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7653
|
+
}
|
|
7654
|
+
|
|
7655
|
+
.grayscale{
|
|
7656
|
+
--tw-grayscale: grayscale(100%);
|
|
7657
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7658
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7659
|
+
}
|
|
7660
|
+
|
|
7661
|
+
.grayscale-\[50\%\]{
|
|
7662
|
+
--tw-grayscale: grayscale(50%);
|
|
7663
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7664
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7665
|
+
}
|
|
7666
|
+
|
|
7667
|
+
.grayscale-\[30\%\]{
|
|
7668
|
+
--tw-grayscale: grayscale(30%);
|
|
7669
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7670
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7671
|
+
}
|
|
7672
|
+
|
|
7673
|
+
.grayscale-\[70\%\]{
|
|
7674
|
+
--tw-grayscale: grayscale(70%);
|
|
7675
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7676
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7677
|
+
}
|
|
7678
|
+
|
|
7679
|
+
.grayscale-\[\#1F2A37\]{
|
|
7680
|
+
--tw-grayscale: grayscale(#1F2A37);
|
|
7681
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7682
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7683
|
+
}
|
|
7684
|
+
|
|
7609
7685
|
.filter{
|
|
7610
7686
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
7611
7687
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
@@ -7617,6 +7693,24 @@ select{
|
|
|
7617
7693
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7618
7694
|
}
|
|
7619
7695
|
|
|
7696
|
+
.backdrop-brightness-50{
|
|
7697
|
+
--tw-backdrop-brightness: brightness(.5);
|
|
7698
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7699
|
+
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7700
|
+
}
|
|
7701
|
+
|
|
7702
|
+
.backdrop-grayscale{
|
|
7703
|
+
--tw-backdrop-grayscale: grayscale(100%);
|
|
7704
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7705
|
+
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7706
|
+
}
|
|
7707
|
+
|
|
7708
|
+
.backdrop-sepia-0{
|
|
7709
|
+
--tw-backdrop-sepia: sepia(0);
|
|
7710
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7711
|
+
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
7712
|
+
}
|
|
7713
|
+
|
|
7620
7714
|
.transition{
|
|
7621
7715
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
|
7622
7716
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
@@ -7669,6 +7763,10 @@ select{
|
|
|
7669
7763
|
transition-duration: 350ms;
|
|
7670
7764
|
}
|
|
7671
7765
|
|
|
7766
|
+
.duration-1000{
|
|
7767
|
+
transition-duration: 1000ms;
|
|
7768
|
+
}
|
|
7769
|
+
|
|
7672
7770
|
.ease-in{
|
|
7673
7771
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
7674
7772
|
}
|
|
@@ -9815,6 +9913,11 @@ select{
|
|
|
9815
9913
|
background-color: rgb(133 77 24 / var(--tw-bg-opacity));
|
|
9816
9914
|
}
|
|
9817
9915
|
|
|
9916
|
+
.hover\:bg-\[\#1F2A37\]:hover{
|
|
9917
|
+
--tw-bg-opacity: 1;
|
|
9918
|
+
background-color: rgb(31 42 55 / var(--tw-bg-opacity));
|
|
9919
|
+
}
|
|
9920
|
+
|
|
9818
9921
|
.hover\:pl-\[9px\]:hover{
|
|
9819
9922
|
padding-left: 9px;
|
|
9820
9923
|
}
|
|
@@ -9874,6 +9977,17 @@ select{
|
|
|
9874
9977
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
9875
9978
|
}
|
|
9876
9979
|
|
|
9980
|
+
.hover\:grayscale-0:hover{
|
|
9981
|
+
--tw-grayscale: grayscale(0);
|
|
9982
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
9983
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
9984
|
+
}
|
|
9985
|
+
|
|
9986
|
+
.hover\:filter-none:hover{
|
|
9987
|
+
-webkit-filter: none;
|
|
9988
|
+
filter: none;
|
|
9989
|
+
}
|
|
9990
|
+
|
|
9877
9991
|
.hover\:transition:hover{
|
|
9878
9992
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
|
9879
9993
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
@@ -10402,6 +10516,18 @@ select{
|
|
|
10402
10516
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
10403
10517
|
}
|
|
10404
10518
|
|
|
10519
|
+
.group:hover .group-hover\:brightness-100{
|
|
10520
|
+
--tw-brightness: brightness(1);
|
|
10521
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
10522
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
10523
|
+
}
|
|
10524
|
+
|
|
10525
|
+
.group:hover .group-hover\:grayscale-0{
|
|
10526
|
+
--tw-grayscale: grayscale(0);
|
|
10527
|
+
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
10528
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
10529
|
+
}
|
|
10530
|
+
|
|
10405
10531
|
.group:hover .group-hover\:transition-all{
|
|
10406
10532
|
transition-property: all;
|
|
10407
10533
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -10786,6 +10912,10 @@ select{
|
|
|
10786
10912
|
max-width: 763px;
|
|
10787
10913
|
}
|
|
10788
10914
|
|
|
10915
|
+
.tb\:max-w-\[420px\]{
|
|
10916
|
+
max-width: 420px;
|
|
10917
|
+
}
|
|
10918
|
+
|
|
10789
10919
|
.tb\:-translate-y-1\/2{
|
|
10790
10920
|
--tw-translate-y: -50%;
|
|
10791
10921
|
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -11596,6 +11726,14 @@ select{
|
|
|
11596
11726
|
height: 100%;
|
|
11597
11727
|
}
|
|
11598
11728
|
|
|
11729
|
+
.tb-l\:min-h-\[676px\]{
|
|
11730
|
+
min-height: 676px;
|
|
11731
|
+
}
|
|
11732
|
+
|
|
11733
|
+
.tb-l\:min-h-\[224px\]{
|
|
11734
|
+
min-height: 224px;
|
|
11735
|
+
}
|
|
11736
|
+
|
|
11599
11737
|
.tb-l\:w-1\/2{
|
|
11600
11738
|
width: 50%;
|
|
11601
11739
|
}
|
|
@@ -11658,6 +11796,10 @@ select{
|
|
|
11658
11796
|
max-width: 658px;
|
|
11659
11797
|
}
|
|
11660
11798
|
|
|
11799
|
+
.tb-l\:max-w-7xl{
|
|
11800
|
+
max-width: 80rem;
|
|
11801
|
+
}
|
|
11802
|
+
|
|
11661
11803
|
.tb-l\:grid-cols-2{
|
|
11662
11804
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
11663
11805
|
}
|
|
@@ -11670,6 +11812,10 @@ select{
|
|
|
11670
11812
|
flex-direction: column;
|
|
11671
11813
|
}
|
|
11672
11814
|
|
|
11815
|
+
.tb-l\:flex-col-reverse{
|
|
11816
|
+
flex-direction: column-reverse;
|
|
11817
|
+
}
|
|
11818
|
+
|
|
11673
11819
|
.tb-l\:items-center{
|
|
11674
11820
|
align-items: center;
|
|
11675
11821
|
}
|
|
@@ -11922,6 +12068,10 @@ select{
|
|
|
11922
12068
|
max-width: 717px;
|
|
11923
12069
|
}
|
|
11924
12070
|
|
|
12071
|
+
.db-s\:max-w-\[650px\]{
|
|
12072
|
+
max-width: 650px;
|
|
12073
|
+
}
|
|
12074
|
+
|
|
11925
12075
|
.db-s\:flex-row{
|
|
11926
12076
|
flex-direction: row;
|
|
11927
12077
|
}
|