.TEG-stage {
--stage-ratio: 2.5vw;
position: relative;
inset: auto 50%;
width: 100vw;
max-width: 220rem;
aspect-ratio: 2/3;
background-color: var(--tdk-color-grey-30);
padding: 0 !important;
transform: translateX(-50%);
@media (min-width: 576px) {
--stage-ratio: clamp(1rem, 1.7vw, 3.8rem);
aspect-ratio: 2/1;
}
@media (min-width: 1400px) {
--stage-ratio: clamp(1rem, 1vw, 2rem);
aspect-ratio: 5/2;
/* height: 80vh; */
}
/* #region STAGE ELEMENTS */
&>.elementlist {
position: relative;
height: 100%;
margin: 0;
/* STAGE ITEM */
&>div {
position: absolute;
inset: 0;
z-index: 1;
display: block;
overflow: hidden;
background-color: var(--tdk-color-grey-30);
&.active {
z-index: 9;
}
/* TMP */
/* &:nth-child(1n+2) {
display: none;
} */
& .elementlist {
/* VISUAL MOBILE */
&>div:nth-child(1) {
@media (min-width: 576px) {
display: none;
}
}
/* VISUAL DESKTOP */
&>div:nth-child(2) {
@media (max-width: 576px) {
display: none;
}
}
/* VISUALS */
&>div:nth-child(1),
&>div:nth-child(2) {
pointer-events: none;
position: absolute;
inset: 0;
& .image-wrapper {
margin: 0;
@media (min-width: 576px) {
height: 50vw !important;
max-height: 100% !important;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
&::after {
/* hide default loading spinner */
display: none !important;
}
}
}
}
/* LINK/TEXT */
&>div:last-child {
& a.teaser {
position: absolute;
inset: 0;
display: block;
background-color: transparent;
margin: 0 !important;
& .text-column {
position: absolute;
inset: auto 0 0;
text-align: right;
z-index: 10;
padding: calc(var(--stage-ratio) * 4);
@media (min-width: 576px) {
top: calc(var(--stage-ratio) * 2);
left: auto;
width: calc(var(--stage-ratio) * 28);
}
@media (min-width: 1400px) {
width: calc(var(--stage-ratio)* 40);
padding-top: calc(var(--stage-ratio)* 6);
padding-right: calc(var(--stage-ratio)* 10);
}
& * {
line-height: 1.2;
color: var(--tdk-color-white);
}
& .teaser-meta {
padding: 0;
& .teaser-subtitle {
font-weight: 700;
font-size: calc(var(--stage-ratio) * 1.6);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--tdk-color-steel);
color: var(--tdk-color-white-80);
margin: 0 0 calc(var(--stage-ratio) * 2);
@media (min-width: 576px) {
font-size: calc(var(--stage-ratio) * 1.2);
}
}
& .teaser-text {
display: block;
padding: 0;
& h3 {
font-weight: 400;
font-size: calc(var(--stage-ratio) * 3.5);
letter-spacing: -0.01em;
margin: 0 0 calc(var(--stage-ratio) * 3);
@media (min-width: 576px) {
font-size: calc(var(--stage-ratio) * 2.2);
}
}
& pre {
display: inline-block;
font-family: inherit;
font-weight: 400;
font-size: calc(var(--stage-ratio) * 1.5);
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: nowrap;
color: var(--tdk-color-white);
background-color: var(--tdk-color-orange);
border: 1px solid transparent;
border-color: var(--tdk-color-orange);
border-radius: 0.33em;
padding: 0.5em 1.5em;
margin: 0;
transition: all .152 ease-in-out;
transition: background-color .152 ease-in-out;
@media (min-width: 576px) {
font-size: calc(var(--stage-ratio) * 1);
}
&:hover {
background-color: color-mix(in srgb, var(--tdk-color-orange) 60%, white) !important;
}
}
}
}
& .teaser-more {
display: none;
}
}
&::before {
/* LOADING SPINNER */
content: '';
position: relative;
z-index: -1;
display: block;
width: 10em;
height: 10em;
font-size: 10px;
text-indent: -9999em;
border: 1.1em solid var(--tdk-color-blue-30);
border-left: 1.1em solid var(--tdk-color-blue);
border-radius: 50%;
transform: translateZ(0);
translate: -50% -50%;
animation: loading 1s infinite linear;
}
@media (max-width: 575.98px) {
&::before {
left: 50%;
top: 35%;
}
}
@media (min-width: 576px) {
&::before {
top: 50%;
left: 35%;
}
}
}
}
/* & .image-wrapper,
& .video-wrapper {
--ar: 16/9;
pointer-events: none;
position: absolute;
inset: 0;
display: block;
margin: 0 !important;
& img,
& iframe {
position: relative;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: calc(100% / var(--ar));
height: calc(100% * var(--ar));
transform: translate(-50%, -50%);
aspect-ratio: var(--ar);
border: none;
}
& img {
_transform: translate(-50%, -50%) scaleX(-1);
}
} */
/* &>div {
position: absolute;
inset: 0;
display: block;
&:first-child {
z-index: 0;
}
&:last-child {
left: 75vw;
z-index: 10;
}
} */
}
/* SHAPE */
&>.shape a.teaser {
&::after {
content: '';
position: absolute;
z-index: 5;
opacity: .9;
background: center/cover no-repeat url('data:image/svg+xml;utf8,');
filter: drop-shadow(0 0 30px var(--tdk-color-black));
}
@media (max-width: 575.98px) {
&::after {
left: 0;
bottom: -25vw;
width: 100vw;
height: 100vw;
}
}
@media (min-width: 576px) {
&::after {
inset: 0 0 0 55%;
background-image: url('data:image/svg+xml;utf8,');
background-position: top right;
transform: scaleX(-1);
}
}
@media (min-width: 1400px) {
&::after {
left: 60%;
}
}
}
&>.shape.white a.teaser {
&::after {
background-image: center/cover no-repeat url('data:image/svg+xml;utf8,');
}
@media (min-width: 576px) {
&::after {
background-image: url('data:image/svg+xml;utf8,');
}
}
}
&>.shape.opaque a.teaser {
&::after {
opacity: 1 !important;
}
}
@media (max-width: 576px) {
&>.hide-last-small-text-mobile .teaser-meta {
& br:has(+.text-size--1),
& br:has(+.text-size--2),
& .text-size--2:last-child,
& .text-size--1:last-child {
display: none;
}
}
}
@media (min-width: 576px) {
&>.small-text-only-mobile .teaser-meta {
& .text-size--2 {
font-size: unset;
line-height: unset;
}
}
}
@media (max-width: 576px) {
&>.hide-button-mobile .teaser-meta {
& h3 {
margin-bottom: 0 !important;
}
& pre {
display: none !important;
}
}
}
}
}
/* #endregion STAGE ELEMENTS */
/* #region STAGE PAGING */
& .paging {
display: none;
@media (min-width: 576px) {
display: block;
cursor: pointer;
position: absolute;
bottom: calc(var(--stage-ratio) * 2);
z-index: 999;
width: calc(var(--stage-ratio) * 2);
aspect-ratio: 1;
background-color: transparent;
border-radius: 50%;
border: calc(var(--stage-ratio) * .15) solid var(--tdk-color-white);
&::after {
content: '';
position: absolute;
top: 50%;
width: 45%;
aspect-ratio: 1;
transform: translateY(-50%);
border: calc(var(--stage-ratio) * .15) solid var(--tdk-color-white);
border-bottom: 0;
transform-origin: top center;
}
&:hover {
background-color: var(--tdk-color-white);
&::after {
border-color: var(--tdk-color-blue);
}
}
&#prev {
right: calc(var(--stage-ratio) * 6.5);
&::after {
left: 38%;
border-right: 0;
rotate: -45deg;
}
}
&#next {
right: calc(var(--stage-ratio) * 4);
&::after {
right: 38%;
border-left: 0;
rotate: 45deg;
}
}
}
@media (min-width: 1400px) {
width: calc(var(--stage-ratio) * 2.5);
&#prev {
right: calc(var(--stage-ratio) * 13.5);
}
&#next {
right: calc(var(--stage-ratio) * 10);
}
}
}
/* #endregion STAGE PAGING */
/* #region STAGE LOADING */
& .progress {
pointer-events: none;
position: absolute;
inset: auto 0 0;
z-index: 998;
height: calc(var(--stage-ratio) * .3);
background-color: var(--tdk-color-blue-10);
&.interval {
&::after {
content: '';
position: absolute;
inset: 0;
right: auto;
width: 0%;
background-color: var(--tdk-color-blue-30);
/* transform: skewX(-20deg); */
animation: 5s infinite loadingbar;
}
}
}
/* #endregion STAGE LOADING */
}
@keyframes loadingbar {
from {
width: 0%;
}
to {
width: 100%;
}
}