/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
/* Page - Age Checker */
#age-checker{
--height-header: 68px;
width: 100%;min-height: 100vh;min-height: 100svh;background-color: var(--color-secondary);
overflow: hidden;
}
/* Header */
#age-checker .checker__header{padding: 12px 48px;padding-top: 32px;display: flex;justify-content: flex-end;}
#age-checker .checker__header a.lang{font-family: var(--ff-sans);color: var(--color-text-white);}
#age-checker .checker__header a.lang.active{background-color: white;color: var(--color-secondary);}
/* Body */
.checker__body{
min-height: calc(100vh - var(--height-header));
padding-inline: var(--padding-sectionX);
padding-bottom: var(--padding-sectionX);
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.checker__body .logo-eza img{
/* height: 152px; */
width: 20vw;
min-width: 200px;
max-width: 300px;
}
.checker__body .logo img{
/* height: 274px; */
width: 20vw;
min-width: 240px;
max-width: 450px;
}
#age-checker__main.grid-column{
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}
/*.checker__container{margin-bottom: 70px;}*/
.checker__title{
margin-top: 40px;
margin-bottom: 5px;
color: var(--color-gold);
}
.checker__title.h1{
font-size: calc(var(--fs-900) * 0.95);
}
.checker__subtitle{
/* font-family: var(--ff-cera); */
font-family: var(--ff-sans);
font-size: var(--fs-500);
line-height: var(--lh-200);
}
.checker__disclaimer a{text-decoration: underline;}
.checker__body .grid-column{
display: flex;
align-items: center;
}
.checker__container{
position: relative;
width: 100%;
}
.checker__products{
/* position: absolute;
bottom: -10px;
left: 0;
z-index: 0;
width: 50%;
height: 100%; */
position: absolute;
bottom: -6%;
left: -25%;
z-index: 0;
width: 80%;
height: 100%;
}
.checker__products::before{
content: '';
position: absolute;
bottom: 45%;
left: 45%;
width: 30%;
height: 50%;
background-repeat: no-repeat;
background-size: contain;
background-position: top;
z-index: -1;
}
.checker__products::before{background-image: url('data:image/svg+xml,');}
/* .checker__products::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 60%;
height: 20px;
border-radius: 50%;
background-color: #000000;
filter: blur(20px);
opacity: 0.8;
transform: translateX(-50%);
} */
.checker__products img{
width: auto;
height: 100%;
object-fit: contain;
object-position: bottom;
}
.checker__human{
position: relative;
display: flex;
justify-content: flex-end;
width: 30vw;
/* width: 25vw; */
margin-left: auto;
}
.checker__slider{
/* --height-slider: 50px; */
/* --height-slider: 60px; */
--height-slider: 55px;
--angle: 30deg;
/* --golden-something: 3.3vw; */
--golden-something: 4.4vw;
width: 50%;
max-width: 400px;
margin-inline:auto;
display: flex;
align-items: center;
gap:0;
position: absolute;
top: 6%;
right: 0;
transform-origin: top right;
transform: rotate(calc(-1 * var(--angle))) translateY(-50%);
}
.checker__slider input{
position: relative;
z-index: 2000;
}
.checker__range{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.checker__range::before {
content: "";
position: absolute;
top:50%;
right: 0;
width: 80%;
height: 1px;
/* border-bottom: 1px dashed; */
background-image: linear-gradient(to right, #FFFFFF 50%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 16px 1px;
background-repeat: repeat-x;
transform: translateY(-50%);
right: calc(0.5 * var(--golden-something));
width: calc(100% - var(--golden-something));
}
.checker__range::after{
content: '';
position: absolute;
top: 0;
right: 0;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
/* width: 100%;
height: 100%; */
width: var(--golden-something);
/* height: calc(var(--height-slider)* 1.3);
transform: translateY(-6%); */
/*height: calc(var(--height-slider)* 1.7);
transform: translateY(-14%); */
height: calc(var(--height-slider)* 1.5);
transform: translateY(-10%);
}
.checker__range::after{background-image: url('data:image/svg+xml,');}
.checker__range::after{background-image: url('data:image/svg+xml,');}
.checker__helper {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 200%);
font-size: 15px;
margin-top: 10px;
}
.checker__helper{
-webkit-animation: 1.2s blink infinite;
-moz-animation: 1.2s blink infinite;
-ms-animation: 1.2s blink infinite;
-o-animation: 1.2s blink infinite;
animation: 1.2s blink infinite;
}
@keyframes blink {0%, 100% {opacity: 0;}50% {opacity: 1;}}
@media(max-width:767px){
.checker__helper {
transform: translate(-50%, -120%);
margin-top: 0;
white-space: nowrap;
}
}
.span-age1 {z-index: 1;}
.span-age2 {z-index: 1;}
.checker__slider .checker__label{
font-family: var(--ff-cera);
font-size: 28px;
flex-shrink: 0;
line-height: 1;
display: flex;
justify-content: center;
cursor: pointer;
padding:0;
align-items:center;
position:absolute;
top: calc(100% + 20px);
transform-origin: left;
transform: rotate(var(--angle));
transition: all 250ms ease-in-out;
}
.checker__slider .checker__label#label_under{
left: 0;
transform: rotate(var(--angle)) translateX(-50%);
}
.checker__slider .checker__label#label_over{
right: 0;
transform: rotate(var(--angle)) translate(0%, -20%);
}
/* @media(max-width: 767px){
#age-checker{
--header-height: 100px;
}
.checker__header .logo img{height: 80px;}
.checker__body{
padding-bottom: 100px;
background-position: bottom center;
background-size: 40%;
}
.checker__container{margin-bottom: 0;}
.checker__slider{margin-block: 50px;gap:0px;flex-wrap: wrap;}
.checker__slider .checker__label{width: 40%;font-size: 24px;height:80px;padding:20px 0;}
.checker__slider .checker__label:first-child{
justify-content: center;
margin-right:10%
}
.checker__slider .checker__label:last-child{
justify-content: center;
margin-left:10%
}
.specialimg {object-fit: cover;height:220px;margin-top:40px}
.span-age1 {text-align:left;}
.span-age2 {text-align:right;}
} */
/** RANGE **/
input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 100%;
margin: 0px;
background: transparent;
}
input[type=range]:focus {outline: none;}
/* WEBKIT*/
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: var(--height-slider);
background-color: #FFFFFF00;
cursor: pointer;
/* box-shadow: inset 0 4px 4px rgba(0,0,0,.05);
-webkit-box-shadow: inset 0 4px 4px rgba(0,0,0,.05); */
}
input[type=range]::-webkit-slider-thumb {
width: var(--golden-something);
height: 100%;
background-color:transparent;
background-size: contain;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
-webkit-appearance: none;
box-shadow: none !important;
filter:brightness(10);
transition: var(--trans);
}
input[type=range]::-webkit-slider-thumb{background-image: url('../images/age-arrow--gold.svg');}
.checker__range.text-gold input[type=range]::-webkit-slider-thumb{filter:brightness(1);}
/**************************************************************************/
/* Firefox ****************************************************************/
/**************************************************************************/
input[type=range]::-moz-range-track {
width: 100%;
height: 20px;
cursor: pointer;
background: transparent;
border: 0px;
animate: 0.2s;
width: 100%;
height: var(--height-slider);
background-color: #FFFFFF00;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
border: 0px;
width: 50px;
background-color: transparent;
background-image: url('../images/age-arrow.svg');
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
width: var(--golden-something);
height: 100%;
background-color:transparent;
background-size: contain;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/**************************************************************************/
/* IE *********************************************************************/
/**************************************************************************/
input[type=range]::-ms-track {
width: 100%;
height: 14px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 40px 0;
color: transparent;
animate: 0.2s;
width: 100%;
height: var(--height-slider);
background-color: #FFFFFF00;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]::-ms-fill-lower {background: var(--color-glass);border: 0px;-webkit-appearance: none;}
input[type=range]::-ms-fill-upper {background: var(--color-glass);border: 0px;-webkit-appearance: none;}
input[type=range]:focus::-ms-fill-lower {background: var(--color-glass);-webkit-appearance: none;}
input[type=range]:focus::-ms-fill-upper {background: var(--color-glass);-webkit-appearance: none;}
/*************************************************************************************/
/** Login with Facebook **************************************************************/
/*************************************************************************************/
.facebook__login{padding: var(--padding-button);display: inline-flex;justify-content: center;align-items: center;gap: 15px;font-family: var(--ff-cera);font-size: var(--fs-btn);line-height: var(--lh-200);font-weight: 700;background-color: #78252F;color: white;}
.facebook__login,
.facebook__login svg path{transition: var(--trans);}
.facebook__login__icon,
.facebook__login__label{display: flex;}
.facebook__login__icon svg{width: 14px;height: 24px;}
.facebook__login__label{margin-top: 3px;}
.facebook__login:hover,
.facebook__login:focus{background-color: white;color: var(--color-secondary);}
.facebook__login:hover svg path,
.facebook__login:focus svg path{fill: var(--color-secondary);}
@media(min-width: 1025px){
.checker__body{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media(max-width: 1024px){
.checker__slider {
--golden-something: 7.5vw;
}
.checker__body{gap: 120px;}
.grid-column#age-checker__main{order: 1;}
.grid-column#age-checker__range{order: 2;}
.grid-column#age-checker__mobile{order: 3;}
.checker__human{
width: 50%;
margin-inline: auto;
}
.checker__products {
width: auto;
height: 60%;
}
.checker__human{min-width: 300px;}
.checker__range::after{
min-width: 45px;
height: calc(var(--height-slider) * 1.0);
transform: translateY(5%);
}
.checker__slider .checker__label{
font-size: 24px;
}
}
@media(max-width: 767px){
#age-checker .checker__header {padding: 24px;}
.checker__body{gap: 60px;}
#age-checker .checker__products{
height: 55%;
left: auto;
right: 0;
bottom: -4%;
}
#age-checker .checker__slider .checker__label{font-size: 18px;}
#age-checker .checker__slider .checker__label#label_under{transform: rotate(var(--angle)) translateX(-80%);}
#age-checker .checker__slider .checker__label#label_over{transform: rotate(var(--angle)) translate(-45%, -50%);}
}
/* Visibility */
.visible-lg,
.visible-md{
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
@media(min-width: 1025px){
.visible-lg{display: flex !important;}
.visible-md{display: none !important;}
}
@media(max-width: 1024px){
.visible-lg{display: none !important;}
.visible-md{display: flex !important;}
}
/* MOZILLA FIREFOX */
@-moz-document url-prefix() {
.checker__range::after{
transform: translateY(-14%);
}
@media(max-width:767px){
#age-checker .checker__products{
width: 50%;
}
.checker__range::after{
transform: translateY(4%);
}
}
input[type="range"]{
height: var(--height-slider);
}
}