:root {
--repeat-angle: 45deg;
--rotate-deg: 0deg;
}
.scroller-outer *{
box-sizing: border-box;
}
.scroller-outer {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transform: translateY(540px);
height: 10px;
}
.scroller-inner {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
-webkit-transform: perspective(2000px) rotateY(var(--rotate-deg)) translateY(-400px) rotateX(0deg);
transform: perspective(2000px) rotateY(var(--rotate-deg)) translateY(-400px) rotateX(0deg);
}
.scroller-inner:after,
.scroller-inner:before {
content: '';
width: 600px;
height: 600px;
border-radius: 50%;
border: 40px solid var(--color-orange);
top: 50%;
left: 50%;
position: absolute;
pointer-events: none;
}
.scroller-inner:before {
transform: translate(-50%, -45%) rotateX(90deg);
border-color: #a4511c;
}
.scroller-inner:after {
transform: translate(-50%, -44%) rotateX(90deg);
}
.scroll-item {
position: absolute;
font-size: 10em;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
-webkit-transform: rotateY(calc(var(--i) * var(--repeat-angle))) translateZ(440px);
transform: rotateY(calc(var(--i) * var(--repeat-angle))) translateZ(440px);
border-radius: 20px;
transition: 0.3s;
cursor: pointer;
}
a.scroll-item:focus-visible,
a.scroll-item:focus,
a.scroll-item:focus-within,
a.scroll-item:visited
{
box-shadow: 0 0 0 5px var(--color-orange);
outline: none;
background: radial-gradient(white, #413024)!important;
border-radius: 50%;
z-index: 100;
}
.scroll-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
.scroll-loading:after {
position: absolute;
inset: 0;
border: 7px dotted var(--color-orange);
content: '';
z-index: -1;
border-radius: 50%;
animation: loadspin 1s linear infinite;
}
.machine-item img {
width: 100%;
height: 80%;
object-fit: contain;
}
.scroll-item .caption, .machine-item .caption {
background-color: var(--color-dark-brown);
text-decoration: none;
opacity: 0.8;
color: white;
font-size: 17px;
text-align: center;
text-wrap: nowrap;
position: absolute;
bottom: -0.5em;
left: 50%;
transform: translateX(-50%);
padding: 0.25em 1em;
border-radius: 100px;
border: 1px solid var(--color-orange);
transition: 0.3s;
}
.machine-item .caption {
position: absolute;
font-size: 0.7em;
left: 50%;
transform: none;
bottom: auto;
top: 50%;
text-wrap: wrap!important;
border-radius: 10px;
opacity: 1;
transition: 0.3s;
top: auto;
bottom: 0;
transform: translate(-50%);
max-height: 5em;
overflow: hidden;
padding: 0.25em;
line-height: 1em;
width: 100%;
}
.machine-item:hover .caption {
opacity: 1;
}
.scroll-item:hover .caption {
padding: 1em 2em;
border-width: 3px;
opacity: 1;
}
.scroll-item:hover, .machine-item {
background: radial-gradient(rgba(255,255,255,0.5), transparent 70%);
}
@keyframes loadspin {
100% {
transform: rotate(360deg);
}
}
@media only screen and (max-width: 1200px) {
:root {
--site-width: 100%;
--small-corner: 10px;
--half-corner: 5px;
--medium-corner: 22px;
}
}
@media only screen and (max-width: 1024px) {
:root {
--responsive--alignwide-width: calc(100vw - 1em);
}
}
@media only screen and (max-width: 782px) {
}
@media only screen and (max-width: 612px) {
.scroller-outer {
scale: 0.8;
}
body.home .content {
padding-top: 340px;
}
}
@media only screen and (max-width: 484px) {
.scroller-outer {
scale: 0.6;
}
body.home .content {
padding-top: 300px;
}
}