Validated Order Card

01.wrapper-grid {
02  --animation-duration: 2.1s;
03  --cube-color: #0000;
04  --highlight-color: #00cc44;
05  --cube-width: 48px;
06  --cube-height: 48px;
07  --font-size: 1.8em;
08
09  position: relative;
10  inset: 0;
11
12  display: grid;
13  grid-template-columns: repeat(7, var(--cube-width));
14  grid-template-rows: auto;
15  grid-gap: 0;
16
17  width: calc(7 * var(--cube-width));
18  height: var(--cube-height);
19  perspective: 350px;
20
21  font-family: "Poppins", sans-serif;
22  font-size: var(--font-size);
23  font-weight: 800;
24  color: transparent;
25}
26
27.cube {
28  position: relative;
29  transform-style: preserve-3d;
30}
31
32.face {
33  position: absolute;
34  display: flex;
35  align-items: center;
36  justify-content: center;
37  width: var(--cube-width);
38  height: var(--cube-height);
39  background-color: var(--cube-color);
40}
41.face-left,
42.face-right,
43.face-back,
44.face-front {
45  box-shadow:
46    inset 0 0 2px 1px #0001,
47    inset 0 0 12px 1px #fff1;
48}
49.face-front {
50  transform: rotateY(0deg) translateZ(calc(var(--cube-width) / 2));
51}
52.face-back {
53  transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2));
54  opacity: 0.6;
55}
56.face-left {
57  transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
58  opacity: 0.6;
59}
60.face-right {
61  transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));
62  opacity: 0.6;
63}
64.face-top {
65  height: var(--cube-width);
66  transform: rotateX(90deg) translateZ(calc(var(--cube-width) / 2));
67  opacity: 0.8;
68}
69.face-bottom {
70  height: var(--cube-width);
71  transform: rotateX(-90deg)
72    translateZ(calc(var(--cube-height) - var(--cube-width) * 0.5));
73  opacity: 0.8;
74}
75
76.cube:nth-child(1) {
77  z-index: 0;
78  animation-delay: 0s;
79}
80.cube:nth-child(2) {
81  z-index: 1;
82  animation-delay: 0.2s;
83}
84.cube:nth-child(3) {
85  z-index: 2;
86  animation-delay: 0.4s;
87}
88.cube:nth-child(4) {
89  z-index: 3;
90  animation-delay: 0.6s;
91}
92.cube:nth-child(5) {
93  z-index: 2;
94  animation-delay: 0.8s;
95}
96.cube:nth-child(6) {
97  z-index: 1;
98  animation-delay: 1s;
99}
100.cube:nth-child(7) {
101  z-index: 0;
102  animation-delay: 1.2s;
103}
104
105.cube {
106  animation: translate-z var(--animation-duration) ease-in-out infinite;
107}
108.cube .face {
109  animation:
110    face-color var(--animation-duration) ease-in-out infinite,
111    /* face-glow var(--animation-duration) ease-in-out infinite, */ edge-glow
112      var(--animation-duration) ease-in-out infinite;
113  animation-delay: inherit;
114}
115.cube .face.face-front {
116  animation:
117    face-color var(--animation-duration) ease-in-out infinite,
118    face-glow var(--animation-duration) ease-in-out infinite,
119    edge-glow var(--animation-duration) ease-in-out infinite;
120  animation-delay: inherit;
121}
122
123@keyframes translate-z {
124  0%,
125  40%,
126  100% {
127    transform: translateZ(-2px);
128  }
129  30% {
130    transform: translateZ(16px) translateY(-1px);
131  }
132}
133@keyframes face-color {
134  0%,
135  50%,
136  100% {
137    background-color: var(--cube-color);
138  }
139  10% {
140    background-color: var(--highlight-color);
141  }
142}
143@keyframes face-glow {
144  0%,
145  50%,
146  100% {
147    color: #fff0;
148    filter: none;
149  }
150  30% {
151    color: #fff;
152    filter: drop-shadow(0 14px 10px var(--highlight-color));
153  }
154}
155@keyframes edge-glow {
156  0%,
157  40%,
158  100% {
159    box-shadow:
160      inset 0 0 2px 1px #0001,
161      inset 0 0 12px 1px #fff1;
162  }
163  30% {
164    box-shadow: 0 0 2px 0px var(--highlight-color);
165  }
166}