.image-video-popup__placeholder {
margin: 0;
padding: var(--wp--preset--spacing--2);
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--2);
background: var(--wp--preset--color--tertiary);
}
.image-video-popup__trigger {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
display: block;
cursor: pointer;
text-align: left;
}
.image-video-popup__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--wp--preset--color--tertiary);
}
.image-video-popup__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-video-popup__media::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1; pointer-events: none;
}
.image-video-popup__trigger:hover .image-video-popup__media::after,
.image-video-popup__trigger:focus-visible .image-video-popup__media::after {
opacity: 1;
}
.image-video-popup__picto {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 2;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
transition: transform 0.2s ease;
}
.image-video-popup__trigger:hover .image-video-popup__picto,
.image-video-popup__trigger:focus-visible .image-video-popup__picto {
transform: translateY(-4px);
}
.image-video-popup__picto img {
display: block;
width: 100%;
height: auto;
} .image-video-popup__modal[hidden] {
display: none !important;
}
.image-video-popup__modal {
position: fixed;
inset: 0;
z-index: 10000;
}
.image-video-popup__modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
}
.image-video-popup__modal-panel {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(1920px, 92vw);
height: min(1080px, 80vh);
background: var(--wp--preset--color--white);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 12px 60px rgba(0, 0, 0, 0.35);
}
.image-video-popup__modal-title {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.image-video-popup__modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 999px;
border: 0;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 28px;
line-height: 40px;
cursor: pointer;
z-index: 2;
}
.image-video-popup__modal-close:hover,
.image-video-popup__modal-close:focus-visible {
background: rgba(0, 0, 0, 0.8);
outline: none;
}
.image-video-popup__player {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.image-video-popup__player iframe,
.image-video-popup__player video {
width: 100%;
height: 100%;
display: block;
} body.ivp-modal-open {
overflow: hidden;
}
@media (max-width: 768px) {
.image-video-popup__picto {
width: 24px;
height: 24px;
}
}