1/* Initial form state */
2.form {
3  --col1: #fff;
4  --col2: #252325;
5  --col3: rgba(232, 213, 196, 0.9);
6  --col4: #ffffff;
7  --col5: #683363;
8  --sh: rgba(80, 80, 80, 0.35);
9  --rad: 4px;
10  --radBig: 10px;
11  border-radius: 0 0 var(--radBig) var(--radBig);
12  box-shadow: 0 0 20px var(--sh);
13  display: flex;
14  flex-direction: column;
15  gap: 1.5em 1em;
16  padding: 1em;
17  position: relative;
18  max-width: 75%;
19  max-height: 90px;
20  transition: background .3s ease-out, max-height .3s ease-out;
21  overflow: hidden;
22}
23
24.form::before {
25  content: 'Ready to purchase?';
26  color: var(--col2);
27  font-size: 1.2em;
28  font-weight: 700;
29  display: grid;
30  width: calc(100% - 2em);
31  height: 60%;
32  position: absolute;
33  place-items: center;
34  z-index: 99999;
35}
36
37.form::after {
38  content: '';
39  backdrop-filter: blur(6px) grayscale(100%);
40  background: linear-gradient(-180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 70%, rgba(255, 255, 255, 0.3) 90%);
41  height: 100%;
42  width: 100%;
43  left: 0;
44  top: 0;
45  display: block;
46  position: absolute;
47  z-index: 999;
48}
49
50.form::after,
51.form::before {
52  border-radius: 0 0 var(--radBig) var(--radBig);
53  pointer-events: none;
54  transition: all .5s ease-out;
55}
56
57/* Form hover and focus */
58.form:hover,
59.form:focus-within {
60  max-width: 100%;
61  max-height: 380px;
62}
63
64.form:focus-within {
65  overflow: initial;
66}
67
68.form:hover::before,
69.form:hover::after {
70  opacity: 0;
71}
72
73.form:hover::after {
74  backdrop-filter: blur(0) grayscale(0%);
75}
76
77.form header {
78  color: var(--col1);
79  font-size: 1.25rem;
80  font-weight: 600;
81}
82/* Labels and inputs UI */
83:is(.form) label span, label input {
84  flex: 1 100%;
85  transition: all .3s ease-out;
86}
87
88:is(.form) input, select, button {
89  appearance: none;
90  border: 0;
91  padding: .75em;
92  border-radius: var(--rad);
93  transition: all .3s ease-out;
94}
95
96.form label {
97  display: flex;
98  flex-flow: row wrap;
99  color: var(--col4);
100  gap: .5em;
101}
102
103.form input {
104  box-shadow: inset 3px 3px 1px var(--sh);
105}
106
107.form fieldset {
108  display: flex;
109  backdrop-filter: blur(10px);
110  flex-flow: row nowrap;
111  gap: 1em;
112  position: relative;
113  transition: all .3s ease-out;
114  padding: 1rem;
115  z-index: 10;
116  border: 3px double var(--col1);
117  border-radius: var(--rad);
118}
119
120.form fieldset label {
121  flex: 1;
122  display: flex;
123  flex-flow: row wrap;
124  font-size: .75em;
125}
126
127.sm {
128  justify-content: space-around;
129}
130
131.sm span {
132  text-align: center;
133}
134
135.form select {
136  box-shadow: inset 3px 3px 1px var(--sh);
137  padding: .75em 1.75em .75em 0.5em;
138  position: relative;
139}
140
141.custom-select {
142  position: relative;
143}
144
145.custom-select::after {
146  position: absolute;
147  content: "";
148  top: 45%;
149  right: 5px;
150  width: 0;
151  height: 0;
152  border: 6px solid transparent;
153  border-color: var(--col5) transparent transparent transparent;
154}
155
156.form fieldset span {
157  flex: 1 100%;
158}
159
160.form fieldset input {
161  flex: 0 1 40px;
162}
163
164.form button {
165  background-color: var(--col1);
166  color: var(--col4);
167  border: 2px solid var(--col4);
168  font-size: 1em;
169  font-weight: 700;
170  align-self: center;
171  padding: .5em 1.5em;
172  appearance: none;
173}
174
175/* Form and UI valid and invalid states */
176.form input:focus,
177.form select:focus {
178  outline: 3px solid var(--col3);
179  outline-offset: 1px;
180}
181
182.form input:invalid:not(:focus),
183.form select:invalid:not(:focus) {
184  background-color: var(--col3);
185  outline: 3px solid var(--col4);
186  outline-offset: 1px;
187}
188
189.form input:valid:not(:focus),
190.form select:valid:not(:focus) {
191  outline: 3px solid var(--col1);
192  outline-offset: 1px;
193}
194
195.form .message {
196  display: block;
197  opacity: 0;
198  font-size: .75em;
199  font-weight: 400;
200  transition: all .3s ease-out;
201  margin: -1rem 0 0;
202}
203
204.form:has(:invalid) .message {
205  opacity: 1;
206  margin: .25rem 0 0 0;
207}
208
209label:has(input:invalid),
210label:has(select:invalid) {
211  color: var(--col3);
212  opacity: .8;
213}
214
215label:has(input:valid),
216label:has(select:valid) {
217  opacity: 1;
218}
219
220.form:hover:has(:focus, :active):valid .submitCard {
221  max-height: 180px;
222  opacity: 1;
223  transition: opacity 1s ease-out .5s, translate 1.3s ease-out;
224  translate: 0 100%;
225}
226
227.form:hover:invalid {
228  transition: all .3s ease-out;
229  background-color: var(--col5);
230}
231
232.form:hover:valid {
233  transition: all .3s ease-out;
234  background-color: var(--col1);
235}
236
237.form:hover:valid * {
238  color: var(--col2);
239}
240
241.form:hover:valid input,
242.form:hover:valid select {
243  outline: 3px solid var(--col2);
244}
245
246.form:hover:invalid fieldset {
247  border: 1px dashed var(--col3);
248}
249
250.form:hover:valid fieldset {
251  border: 1px dashed var(--col2);
252}
253
254/* Submit block */
255.form .submitCard {
256  display: flex;
257  justify-content: center;
258  background-color: var(--col2);
259  border-radius: 0 0 var(--rad) var(--rad);
260  bottom: 0;
261  padding: .5em;
262  opacity: 0;
263  max-height: 0;
264  translate: 0 -100%;
265  position: absolute;
266  width: calc(100% - 2em);
267  transition: all .5s ease-out .1s;
268  z-index: -1;
269}