1.card {
2  --cardbg: 245, 245, 245;
3  --cardBase: 235, 16, 206;
4  --cardText: 100, 100, 100;
5  --cardTextBtn: 106, 16, 88;
6  --cardsquares: 156, 113, 227;
7  display: flex;
8  flex-flow: column nowrap;
9  place-items: center;
10  text-align: center;
11  border: 1px solid #ccc;
12  box-shadow: 0 0 3em rgba(var(--cardBase), .25),
13  inset 0 -.25em 1px rgba(var(--cardBase), .125);
14  border-radius: 4px;
15  background: rgba(var(--cardbg), 1);
16  position: relative;
17  width: 220px;
18  height: 310px;
19  perspective: 1000px;
20  z-index: 0;
21  transition: all 1s ease-out;
22}
23
24.card:hover {
25  filter: grayscale(0%);
26  scale: 1.025;
27  box-shadow: 0 0 5em rgba(var(--cardBase), .5);
28}
29
30.card::after,
31.card::before {
32  content: '';
33  width: 200px;
34  height: 50%;
35  display: block;
36  background-color: rgba(var(--cardsquares), .5);
37  filter: blur(10px);
38  position: absolute;
39  transition: all 5s ease-out;
40  opacity: .1;
41  z-index: 0;
42}
43
44.card:hover::after,
45.card:hover::before {
46  opacity: .5;
47  rotate: 60deg;
48}
49
50.card:hover::after {
51  translate: 100% 0;
52}
53
54.card:hover::before {
55  translate: -100% 0;
56}
57
58.card .card-title {
59  color: rgba(var(--cardText), .75);
60  font-size: 1.1em;
61  font-weight: 600;
62  margin: .5em;
63  position: relative;
64  transition: all .3s ease-out;
65  z-index: 100;
66  text-shadow: 0px 0px 0px rgba(var(--cardText), .25);
67}
68
69.card:hover h3 {
70  color: rgba(var(--cardText), 1);
71  text-shadow: 0px 8px 5px rgba(var(--cardText), .35);
72}
73
74.card:hover span {
75  filter: grayscale(0%);
76}
77
78/* Inner card */
79.card-info::after {
80  left: -6rem;
81  bottom: 0;
82}
83
84.card-info::before {
85  right: -6rem;
86  top: 1rem;
87}
88
89/* Avatar container */
90.card-info span {
91  color: rgba(var(--cardBase), 1);
92  display: flex;
93  place-items: center;
94  text-align: center;
95  border-radius: 50%;
96  overflow: hidden;
97  background-color: rgba(var(--cardBase), .5);
98  height: 80px;
99  width: 50%;
100  box-shadow: inset 0px 2px 4px rgba(var(--cardBase), .95),
101  inset 0px 2px 40px rgba(var(--cardbg), .95);
102  position: relative;
103  transition: all .3s ease-out .1s;
104  filter: grayscale(75%);
105  z-index: 0;
106}
107
108.card-info span:hover .avatar {
109  scale: 1.5;
110}
111
112.avatar {
113  transition: all .3s ease-out;
114  position: relative;
115}
116
117/* Inner card container and UI */
118.card-info {
119  --angle: 0deg;
120  display: flex;
121  flex-flow: column nowrap;
122  place-items: center;
123  padding: 1em;
124  margin: 0 .75em;
125  color: rgba(var(--cardText), 1);
126  background-color: rgba(250, 246, 246, 1);
127  transition: all .5s ease-out;
128  animation: animateBorder 10s linear infinite reverse;
129  border: .15em solid;
130  position: relative;
131  z-index: 10;
132  border-image: linear-gradient(var(--angle), rgba(var(--cardbg), 1), rgba(var(--cardBase), .5), rgba(var(--cardbg), 1)) 1;
133}
134
135.card-info p {
136  color: rgba(var(--cardText), 1);
137  line-height: 1.25em;
138  display: -webkit-box;
139  -webkit-box-orient: vertical;
140  overflow: hidden;
141  text-overflow: ellipsis;
142  -webkit-line-clamp: 3;
143  font-size: 1em;
144  margin: 1em 0;
145  transition: all .3s ease-out .3s;
146}
147
148.card-info .btn {
149  display: block;
150  padding: 8px 16px;
151  background-color: rgba(var(--cardBase), .35);
152  color: rgba(var(--cardTextBtn), .75);
153  text-decoration: none;
154  border-radius: 4px;
155  font-size: .85em;
156  transition: all 0.3s ease-in-out;
157}
158
159.card-info .btn:hover {
160  cursor: pointer;
161  background-color: rgba(var(--cardsquares), .35);
162}
163
164.card-info .btn:active {
165  box-shadow: inset 0px -2px 3px rgba(var(--cardBase), .25);
166}
167
168/* Card links container */
169.card-links {
170  transition: all .3s linear;
171  opacity: 0;
172  display: flex;
173  flex-flow: row wrap;
174  gap: 1em;
175  position: relative;
176  top: -2rem;
177  list-style: none;
178  color: rgba(var(--cardText), 1);
179  font-size: .75em
180}
181
182.card-links a {
183  transition: color .3s ease-out;
184}
185
186.card-links a:hover {
187  color: rgba(var(--cardBase), .75);
188}
189
190/* Card chckbox active state */
191.card input[type="checkbox"] {
192  visibility: hidden;
193}
194
195.card:hover:has(#toggle:checked) .card-title {
196  text-shadow: 0px 2px 5px rgba(var(--cardText), .35);
197}
198
199.card:has(#toggle:checked) {
200  border-radius: 10px;
201  height: 295px;
202}
203
204.card:has(#toggle:checked) .card-info > *:not(.btn):not(span) {
205  opacity: 0;
206}
207
208.card:has(#toggle:checked) .card-info {
209  translate: 0 -20%;
210  border-width: 1px;
211  border: none;
212  box-shadow: inset 0 0 5px rgba(var(--cardBase), .5),
213  inset 0px 0px 2px rgba(var(--cardText), .25),
214  inset 0px 30px 40px rgba(var(--cardBase), .25);
215  border-radius: 10px;
216}
217
218.card:has(#toggle:checked) .card-info span {
219  translate: 0 75%;
220}
221
222.card:has(#toggle:checked) .card-info p {
223  transition: all .1s ease-out;
224}
225
226.card:has(#toggle:checked) .card-links {
227  opacity: 1;
228  top: -2rem;
229}
230
231.card #toggle {
232  visibility: hidden;
233}
234
235@keyframes animateBorder {
236  to {
237    --angle: 360deg;
238  }
239}
240
241@property --angle {
242  syntax: '<angle>';
243  initial-value: 0deg;
244  inherits: false;
245}