.kpi-icons.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 34px);
grid-template-rows: repeat(3, 34px);
gap: 12px;
justify-content: center;
margin-bottom: 6px;
}
.kpi-icons .icon {
display: block;
width: 34px;
height: 34px;
opacity: 0;
transform: translate(18px, 18px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
.kpi-icons .icon.filled {
opacity: 1;
transform: translate(0, 0);
} .kpi-years .kpi-icons.kpi-grid,
.kpi-people .kpi-icons.kpi-grid {
transform: rotate(180deg);
}
.kpi-years .kpi-icons .icon,
.kpi-people .kpi-icons .icon {
transform: rotate(180deg) translate(18px, 18px);
}
.kpi-years .kpi-icons .icon.filled,
.kpi-people .kpi-icons .icon.filled {
transform: rotate(180deg) translate(0, 0);
} .kpi-years .icon {
background: url(https://faustmann-moebel.at/wp-content/themes/hello-biz-child/assets/kpi/icons/kpi-year-icon.svg) no-repeat center / contain;
}
.kpi-people .icon {
background: url(https://faustmann-moebel.at/wp-content/themes/hello-biz-child/assets/kpi/icons/kpi-icon-people.svg) no-repeat center / contain;
} .kpi-calendar .icon {
position: relative;
}
.kpi-calendar .icon::before {
content: "";
position: absolute;
inset: 0;
background: url(https://faustmann-moebel.at/wp-content/themes/hello-biz-child/assets/kpi/icons/kpi-icon-projects.svg) no-repeat center / contain;
opacity: 1;
transition: opacity 0.22s ease;
}
.kpi-calendar .icon::after {
content: "";
position: absolute;
inset: 0;
background: url(https://faustmann-moebel.at/wp-content/themes/hello-biz-child/assets/kpi/icons/kpi-icon-projects-full.svg) no-repeat center / contain;
opacity: 0;
transform: translate3d(0, 8px, 0) scale(0.985);
transition: opacity 0.38s ease,
transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kpi-calendar .icon.is-full::before {
opacity: 0;
}
.kpi-calendar .icon.is-full::after {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.kpi-block {
display: flex;
flex-direction: column;
align-items: center;
--kpi-grid-width: calc(4 * 34px + 3 * 12px);
}
.kpi-block .kpi-icons.kpi-grid,
.kpi-block .kpi-text {
width: var(--kpi-grid-width);
margin-left: auto;
margin-right: auto;
}
.kpi-block .kpi-text {
display: flex;
align-items: center;
justify-content: center;
column-gap: 8px;
text-align: left;
opacity: 0;
transition: opacity 0.6s ease;
}
.kpi-block .kpi-text > * {
flex: 0 0 auto;
}
.kpi-text.show {
opacity: 1;
}
.kpi-number {
font-size: 56px;
font-weight: 400;
line-height: 1;
text-align: right;
font-variant-numeric: tabular-nums;
}
.kpi-label {
font-size: 16px;
line-height: 1.35;
width: min-content;
display: inline-block;
}
.kpi-years .kpi-label {
width: auto;
max-width: 140px;
}