.bottle-screen {
container-type: inline-size;
--bg-opacity: 0;
--color-1: #ffbfbf;
--color-2: #f0dbff;
--color-3: #c8e3ff;
--color-4: #fcdfe5;
position: relative;
width: 100%;
height: 100svh;
overflow: hidden;
}
.bottle-screen::before {
content: "";
position: absolute;
display: block;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: var(--bg-opacity);
background: linear-gradient(52deg, var(--color-1) 0%, var(--color-2) 33%, var(--color-3) 66%, var(--color-4) 100%);
}
.bottle-screen .bottle-screen__title {
position: absolute;
top: 0; left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: clamp(40px, 6vw, 120px) 0;
padding: 0 80px;
}
.bottle-screen .bottle-screen__title h2 {
text-transform: uppercase;
font-size: 18px !important;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
@media (max-width: 1350px) {
.bottle-screen .bottle-screen__title { padding: 0 40px; }
}
@media (max-width: 768px) {
.bottle-screen .bottle-screen__title { padding: 0 20px; }
}
.bottle-screen__bg {
position: absolute;
top: calc(50% - 50cqmax);
left: calc(50% - 50cqmax);
width: 100cqmax;
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(30, 1fr);
grid-template-rows: repeat(30, 1fr);
user-select: none;
background-color: white;
mix-blend-mode: color-burn;
opacity: 0;
}
@media (max-width: 992px) {
.bottle-screen__bg { display: none; }
}
.bottle-screen__number {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5vmax;
color: black;
font-weight: 520;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
.bottle-screen__fg {
position: absolute;
top: calc(50% - 50svmax);
left: calc(50% - 50svmax);
width: 100svmax;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottle-screen__model {
mix-blend-mode: luminosity;
}
.bottle-screen__current-number {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 520;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: 20vmax;
mix-blend-mode: difference;
color: #fff;
pointer-events: none;
}
.bottle-screen__bottom {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
bottom: 0; left: 0;
width: 100%;
margin-bottom: clamp(20px, 6vw, 80px);
justify-content: center;
gap: 10px;
transition: all .3s ease-in-out;
}
.bottle-screen__bottom--is-hidden {
transform: translate3d(0, -25%, 0);
opacity: 0;
}
.bottle-screen__product-title {
text-transform: uppercase;
font-size: 18px !important;
font-weight: 700;
margin: 0;
}
.bottle-screen__prev-next {
position: absolute;
display: flex;
top: 50%;
left: 50%;
justify-content: space-between;
transform: translate3d(-50%, -50%, 0);
width: calc(20vmax * 3);
font-size: 22px !important;
}
@media (max-width: 992px) {
.bottle-screen__prev-next {
width: calc(20vmax * 2.5);
font-size: 15px !important;
}
}
.bottle-screen__more-info {
font-size: 15px !important;
}
@media (max-width: 992px) {
.bottle-screen__more-info { font-size: 12px !important; }
}
.prev-next {
appearance: none;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
cursor: pointer;
font-weight: 700;
font-size: 22px !important;
color: inherit;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bottle-screen__ctas a {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 10px !important;
font-weight: 700;
text-decoration: none !important;
text-align: center;
padding: 1.7em 1.4em;
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
text-transform: uppercase;
color: #000;
background-color: transparent;
border: 1px solid #000;
backdrop-filter: blur(20px);
transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
.bottle-screen__ctas a:hover {
color: #fff;
background-color: #000;
}