html,
body {
margin: 0;
padding: 0;
} .wdm-projects-scene {
position: relative;
width: 100%;
height: 100vh;
min-height: 720px;
overflow: hidden;
background:
radial-gradient(
circle at 50% 42%,
#f5f3ed 0%,
#efede7 55%,
#e7e4dc 100%
);
color: #111;
isolation: isolate;
} #wdm-projects-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#wdm-projects-canvas canvas {
display: block;
width: 100% !important;
height: 100% !important;
outline: none;
} .wdm-projects-header {
position: absolute;
top: 38px;
left: 48px;
right: 48px;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.wdm-projects-logo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.wdm-projects-help {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
letter-spacing: 0.08em;
opacity: 0.45;
} .wdm-projects-tooltip {
position: fixed;
left: 0;
top: 0;
z-index: 999;
padding: 9px 14px;
background: rgba(18, 18, 18, 0.92);
color: #fff;
border-radius: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transform:
translate(-50%, -150%)
scale(0.92);
transition:
opacity 0.18s ease,
transform 0.18s ease;
}
.wdm-projects-tooltip.is-visible {
opacity: 1;
transform:
translate(-50%, -150%)
scale(1);
} .wdm-projects-vinyl-status {
position: absolute;
bottom: 27px;
left: 50%;
z-index: 10;
transform: translateX(-50%);
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
letter-spacing: 0.13em;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.wdm-projects-vinyl-status.is-visible {
opacity: 0.45;
} .wdm-projects-loader {
position: absolute;
inset: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background: #efede7;
transition:
opacity 0.8s ease,
visibility 0.8s ease;
}
.wdm-projects-loader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.wdm-projects-loader__content {
width: min(300px, 70vw);
text-align: center;
}
.wdm-projects-loader__title {
margin-bottom: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
}
.wdm-projects-loader__bar {
position: relative;
width: 100%;
height: 1px;
overflow: hidden;
background: rgba(0, 0, 0, 0.12);
}
.wdm-projects-loader__bar span {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #111;
transition: width 0.2s ease;
}
.wdm-projects-loader__percent {
margin-top: 11px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
opacity: 0.4;
} @media (max-width: 1024px) {
.wdm-projects-header {
top: 28px;
left: 28px;
right: 28px;
}
}
@media (max-width: 767px) {
.wdm-projects-scene {
min-height: 620px;
}
.wdm-projects-header {
top: 20px;
left: 18px;
right: 18px;
}
.wdm-projects-help {
display: none;
}
} .wdm-projects-intro {
width: 100%;
padding: 36px 20px 20px;
box-sizing: border-box;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: 400;
line-height: 1.2;
color: #181818;
background: #efede7;
} .wdm-projects-tooltip {
display: none !important;
}
@media (max-width: 767px) {
.wdm-projects-intro {
padding: 28px 20px 15px;
font-size: 24px;
}
}