1.card p {
2  font-size: 17px;
3  font-weight: 400;
4  line-height: 20px;
5  color: #666;
6}
7
8.card p.small {
9  font-size: 14px;
10}
11
12.go-corner {
13  display: flex;
14  align-items: center;
15  justify-content: center;
16  position: absolute;
17  width: 32px;
18  height: 32px;
19  overflow: hidden;
20  top: 0;
21  right: 0;
22  background-color: #00838d;
23  border-radius: 0 4px 0 32px;
24}
25
26.go-arrow {
27  margin-top: -4px;
28  margin-right: -4px;
29  color: white;
30  font-family: courier, sans;
31}
32
33.card1 {
34  display: block;
35  position: relative;
36  max-width: 262px;
37  background-color: #f2f8f9;
38  border-radius: 4px;
39  padding: 32px 24px;
40  margin: 12px;
41  text-decoration: none;
42  z-index: 0;
43  overflow: hidden;
44}
45
46.card1:before {
47  content: "";
48  position: absolute;
49  z-index: -1;
50  top: -16px;
51  right: -16px;
52  background: #00838d;
53  height: 32px;
54  width: 32px;
55  border-radius: 32px;
56  transform: scale(1);
57  transform-origin: 50% 50%;
58  transition: transform 0.25s ease-out;
59}
60
61.card1:hover:before {
62  transform: scale(21);
63}
64
65.card1:hover p {
66  transition: all 0.3s ease-out;
67  color: rgba(255, 255, 255, 0.8);
68}
69
70.card1:hover h3 {
71  transition: all 0.3s ease-out;
72  color: #fff;
73}
74
75.card2 {
76  display: block;
77  top: 0px;
78  position: relative;
79  max-width: 262px;
80  background-color: #f2f8f9;
81  border-radius: 4px;
82  padding: 32px 24px;
83  margin: 12px;
84  text-decoration: none;
85  z-index: 0;
86  overflow: hidden;
87  border: 1px solid #f2f8f9;
88}
89
90.card2:hover {
91  transition: all 0.2s ease-out;
92  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
93  top: -4px;
94  border: 1px solid #ccc;
95  background-color: white;
96}
97
98.card2:before {
99  content: "";
100  position: absolute;
101  z-index: -1;
102  top: -16px;
103  right: -16px;
104  background: #00838d;
105  height: 32px;
106  width: 32px;
107  border-radius: 32px;
108  transform: scale(2);
109  transform-origin: 50% 50%;
110  transition: transform 0.15s ease-out;
111}
112
113.card2:hover:before {
114  transform: scale(2.15);
115}
116
117.card3 {
118  display: block;
119  top: 0px;
120  position: relative;
121  max-width: 262px;
122  background-color: #f2f8f9;
123  border-radius: 4px;
124  padding: 32px 24px;
125  margin: 12px;
126  text-decoration: none;
127  overflow: hidden;
128  border: 1px solid #f2f8f9;
129}
130
131.card3 .go-corner {
132  opacity: 0.7;
133}
134
135.card3:hover {
136  border: 1px solid #00838d;
137  box-shadow: 0px 0px 999px 999px rgba(255, 255, 255, 0.5);
138  z-index: 500;
139}
140
141.card3:hover p {
142  color: #00838d;
143}
144
145.card3:hover .go-corner {
146  transition: opactiy 0.3s linear;
147  opacity: 1;
148}
149
150.card4 {
151  display: block;
152  top: 0px;
153  position: relative;
154  max-width: 262px;
155  background-color: #fff;
156  border-radius: 4px;
157  padding: 32px 24px;
158  margin: 12px;
159  text-decoration: none;
160  overflow: hidden;
161  border: 1px solid #ccc;
162}
163
164.card4 .go-corner {
165  background-color: #00838d;
166  height: 100%;
167  width: 16px;
168  padding-right: 9px;
169  border-radius: 0;
170  transform: skew(6deg);
171  margin-right: -36px;
172  align-items: start;
173  background-image: linear-gradient(-45deg, #8f479a 1%, #dc2a74 100%);
174}
175
176.card4 .go-arrow {
177  transform: skew(-6deg);
178  margin-left: -2px;
179  margin-top: 9px;
180  opacity: 0;
181}
182
183.card4:hover {
184  border: 1px solid #cd3d73;
185}
186
187.card4 h3 {
188  margin-top: 8px;
189}
190
191.card4:hover .go-corner {
192  margin-right: -12px;
193}
194
195.card4:hover .go-arrow {
196  opacity: 1;
197}