1.form {
2  background-color: #15172b;
3  border-radius: 20px;
4  box-sizing: border-box;
5  height: 350px;
6  padding: 20px;
7  width: 320px;
8}
9
10.title {
11  color: #eee;
12  font-family: sans-serif;
13  font-size: 36px;
14  font-weight: 600;
15}
16
17.subtitle {
18  color: #eee;
19  font-family: sans-serif;
20  font-size: 16px;
21  font-weight: 600;
22}
23
24.input-container {
25  height: 40px;
26  position: relative;
27  width: 100%;
28}
29
30.ic1 {
31  margin-top: 20px;
32}
33
34.ic2 {
35  margin-top: 30px;
36}
37
38.input {
39  background-color: #303245;
40  border-radius: 12px;
41  border: 0;
42  box-sizing: border-box;
43  color: #eee;
44  font-size: 18px;
45  height: 40px;
46  outline: 0;
47  padding: 4px 10px 0;
48  width: 100%;
49}
50
51.cut {
52  background-color: #15172b;
53  border-radius: 10px;
54  height: 10px;
55  left: 20px;
56  position: absolute;
57  top: -20px;
58  transform: translateY(0);
59  transition: transform 200ms;
60  width: 76px;
61}
62
63.cut-short {
64  width: 30px;
65}
66
67.input:focus ~ .cut,
68.input:not(:placeholder-shown) ~ .cut {
69  transform: translateY(8px);
70}
71
72.placeholder {
73  color: #65657b;
74  font-family: sans-serif;
75  left: 20px;
76  line-height: 14px;
77  pointer-events: none;
78  position: absolute;
79  transform-origin: 0 50%;
80  transition: transform 200ms, color 200ms;
81  top: 20px;
82}
83
84.input:focus ~ .placeholder,
85.input:not(:placeholder-shown) ~ .placeholder {
86  transform: translateY(-30px) translateX(10px) scale(0.75);
87}
88
89.input:not(:placeholder-shown) ~ .placeholder {
90  color: #808097;
91}
92
93.input:focus ~ .placeholder {
94  color: #dc2f55;
95}
96
97.submit {
98  background-color: #08d;
99  border-radius: 12px;
100  border: 0;
101  box-sizing: border-box;
102  color: #eee;
103  cursor: pointer;
104  font-size: 18px;
105  height: 50px;
106  margin-top: 38px;
107  text-align: center;
108  width: 100%;
109}
110
111.submit:active {
112  background-color: #06b;
113}
114