html {
height: 100%;
/* <------------ */
}
body {
height: 100%;
/* <------------ */
}
.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.next-deal-container {
--d: 6px;
/* folded part */
--c: #007bff;
/* color */
--f: 16px;
/* ribbon font-size */
position: relative;
}
.prev-deal-container {
--d: 6px;
/* folded part */
--c: #dc3545;
/* color */
--f: 16px;
/* ribbon font-size */
position: relative;
}
.deal-container::before {
color: #fff;
content: attr(data-ribbon);
font-size: var(--f);
/* I : position & coloration */
position: absolute;
top: 0;
right: 0;
transform: translate(29.29%, -100%) rotate(45deg);
transform-origin: bottom left;
padding: 5px 35px calc(var(--d) + 5px);
background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d) no-repeat var(--c);
/* II : clipping */
clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), 0 100%);
/* III : masking */
-webkit-mask:
linear-gradient(135deg, transparent calc(50% - var(--d)*0.707), #fff 0) bottom left,
linear-gradient(-135deg, transparent calc(50% - var(--d)*0.707), #fff 0) bottom right;
-webkit-mask-size: 300vmax 300vmax;
-webkit-mask-composite: destination-in;
mask-composite: intersect;
z-index: 1000;
}
.left::before {
left: 0;
right: auto;
transform: translate(-29.29%, -100%) rotate(-45deg);
transform-origin: bottom right;
}
.badge-expired{
background-color: #fff;
color: #dc3545;
}
#timed_deals {
position: relative;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Center the overlay text */
background-color: #bababacc;
/* Semi-transparent background */
padding: 20px;
z-index: 1;
/* Ensure overlay is on top */
}
.overlay-text h1 {
position: absolute;
color: #616161;
text-shadow: #e0e0e0 1px 1px 0;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#deals-heading {
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
.dd-share-modal {
max-width: 400px !important;
}
.dd-logo-single {
content: url('data:image/svg+xml,');
display: inline-block;
width: 200px;
}