/**
* CSS File for Auping application
* 
* @version 0.0.3
* 
* @since 0.0.3 2025-01-10 added sleep backgrounds (with smooth transition)
* @since 0.0.2 2024-12-27 added sleep/active attributes
* @since 0.0.1 2024-03-07 cleaned copy from tatchi css
* 
* @author Hans Druyts <hans.druyts@custom8.be>
*/

/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap');

:root{ 
    /* variables used in different elements */

    --view-h-min: 1024;  /* min height */
    --view-h-max: 3840; /* max height */

    --font-min: 28;     /* font size at min height */
    --font-max: 72;     /* font size at max height */
    
    --font-size: calc( var(--font-min)*1px + (var(--font-max) - var(--font-min)) * ((100vh - var(--view-h-min)*1px) / (var(--view-h-max) - var(--view-h-min))) );

    --design-h-body: 1920;
    --design-w-body: 1080;

    --rel-height: calc(100vh/var(--design-h-body));
    --rel-width: calc(100vw/var(--design-w-body)); 

    --design-h-header: 225;
    --design-h-footer: 245;
    --design-w-margin: 70; /* 100 */

    --height-header: calc( var(--design-h-header) * var(--rel-height));       /* header is 225px of 1920 > 11.72% of total viewport height */
    --height-footer: calc( var(--design-h-footer) * var(--rel-height));       /* footer is 245px of 1920 > 12.76% of total viewport height */
    --height-main: calc(100vh - (var(--height-header) + var(--height-footer)));         /* calculated portion main (viewport - header & footer) */

    --margin-default: calc(var(--rel-width) * var(--design-w-margin));

    --design-h-menu: 73;
    --design-w-menu: 90;

    --height-menu: calc( var(--design-h-menu) * var(--rel-height));
    --width-menu: calc( var(--design-w-menu) * var(--rel-height));

    --design-h-logo: 115;
    --design-w-logo: 361;

    --height-logo: calc( var(--design-h-logo) * var(--rel-height));
    --width-logo: calc( var(--design-w-logo) * var(--rel-height));

    --design-h-scan-logo: 84;
    --design-w-scan-logo: 596;

    --height-scan-logo: calc( var(--design-h-scan-logo) * var(--rel-height));
    --width-scan-logo: calc( var(--design-w-scan-logo) * var(--rel-height));

    --design-h-title: 128;
    --design-w-title: 462;

    --height-title: calc( var(--design-h-title) * var(--rel-height));
    --width-title: calc( var(--design-w-title) * var(--rel-height));

    --design-h-arrow: 64;
    --design-w-arrow: 70;

    --height-arrow: calc( var(--design-h-arrow) * var(--rel-height));
    --width-arrow: calc( var(--design-w-arrow) * var(--rel-height));

    --design-h-start-btn: 95;
    --design-w-start-btn: 336;

    --height-start-btn: calc( var(--design-h-start-btn) * var(--rel-height));
    --width-start-btn: calc( var(--design-w-start-btn) * var(--rel-height));

    --design-h-home-btn: 94;
    --design-w-home-btn: 335;

    --height-home-btn: calc( var(--design-h-home-btn) * var(--rel-height));
    --width-home-btn: calc( var(--design-w-home-btn) * var(--rel-height));

    --design-h-divider: 3;
    --design-w-divider: 700;

    --height-divider: calc( var(--design-h-divider) * var(--rel-height));
    --width-divider: calc( var(--design-w-divider) * var(--rel-height));

    --design-h-intro: 213;
    --design-w-intro: 844;

    --design-h-start: 1367;
    --design-w-start: 751;

    --design-h-startbox-small: 355; 
    --design-w-startbox-small: 440;

    --design-h-startbox-medium: 455; 
    --design-w-startbox-medium: 562;

    --design-h-startbox-large: 535; /* original box */
    --design-w-startbox-large: 663;        

    --design-h-side: 1391;
    --design-w-side: 689;

    --design-h-side-line: 815;
    --design-w-side-line: 488;
    --design-x-side-line: 292; /* 322 */
    --design-y-side-line: 392;

    --design-h-side-result: 1424;
    --design-w-side-result: 536;
    --design-x-side-result: 266;
    --design-y-side-result: 0;

    --design-h-side-dots: 524;
    --design-w-side-dots: 484;
    --design-x-side-dots: 304; /* 234 > 334 */ 
    --design-y-side-dots: 700;

    --design-h-back: 1368;
    --design-w-back: 433;
    --design-x-back: 323;
    --design-y-back: 0;

    --design-h-back-line: 901;
    --design-w-back-line: 98;
    --design-x-back-line: 695; /* 706 */
    --design-y-back-line: 310; /* 277 */

    --design-h-result-mattress: 186;
    --design-w-result-mattress: 770;

    --design-h-result-firmness: 184;
    --design-w-result-firmness: 770;  

    --design-h-result-pillow: 176;
    --design-w-result-pillow: 770;

    --design-h-clock: 387;
    --design-w-clock: 268;

    --design-h-privacy: 271;
    --design-w-privacy: 300;

}

/* GENERAL PAGE SETTINGS */
html, body {
	height: 100%;
	font-size: var(--font-size);
    /* font-family: 'Roboto Slab', serif; */
    font-family: 'Roboto', serif;
    font-weight: 400;

    background-image: url('/img/back/blue_dark.png');
    background-size: cover;
    background-repeat: no-repeat;
}

/* SPECIFIC FONT WEIGHTS & SIZES */
h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 3rem;
}
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 2rem;
}
h3 {
    font-weight: 400;
    font-size: 1.5rem;
}
h3.center {
    text-align: center;
}
h5 {
    font-weight: 200;
    font-size: 1rem;
}

p {
    font-family: 'Roboto', 'serif';
}
p.light {
    color: whitesmoke;
}
p.big {
    font-weight: 500;
    font-size: 1.1rem;
}
p.bigger {
    font-weight: 500;
    font-size: 1.8rem;
}
p.center {
    text-align: center;
}
p.settings{
    font-weight: 250;
    font-size: 0.6rem;
}

ul.settings li {
    list-style-type: none;
    font-weight: 150;
    font-size: 0.6rem;
}

/* pre-load background images (hidden) */
body::after {
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
    content:
        url('/img/back/soft.png')
        url('/img/back/blue_light.png') 
        url('/img/back/blue_light_fuzzy.png')
        url('/img/back/blue_dark.png');    
}
body.light {

    background-image: url('/img/back/blue_light.png');
    background-size: cover;
    background-repeat: no-repeat;

}
body.fuzzy {

    background-image: url('/img/back/blue_light_fuzzy.png');
    background-size: cover;
    background-repeat: no-repeat;

}
body.soft {

    background-image: url('/img/back/soft.png');
    background-size: cover;
    background-repeat: no-repeat;

}
body.dark {

    background-image: url('/img/back/blue_dark.png');
    background-size: cover;
    background-repeat: no-repeat;

}

div.divider {

    height: -webkit-calc(var(--height-divider));
    height: -moz-calc(var(--height-divider));
    height: var(--height-divider);
    width: var(--width-divider);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/divider.png'); 
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block; /* default: visible */
    margin-top: var(--margin-default);

}



/* GENERAL PAGE SETUP - MAIN DIVISIONS */
/* ----------------------------------- */

header {
    height: -webkit-calc(var(--height-header));
    height: -moz-calc(var(--height-header));
    height: var(--height-header);
    margin: 0;
    padding: 0;
}

main {
    height: -webkit-calc(var(--height-main));
    height: -moz-calc(var(--height-main));
    height: var(--height-main);
    /*width: 100%;*/

    margin: 0;
    padding: 0;

    position: relative;

}

/* hide all div in main */
main > div {
    position: relative;
    display: none;
}

footer {
    height: -webkit-calc(var(--height-footer));
    height: -moz-calc(var(--height-footer));
    height: var(--height-footer);

    margin: 0;
    padding: 0;
}

/* wrapping DIV to position subparts of the interface */
.wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* SUBDIV TO ALIGN IN CENTER (HORIZONTAL & VERTICAL) */

.outer {
  display: table;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  /* width: 400px; */
  /* Whatever width you want */
}

/* Model > z-index 1..3 */
.model img {
    position: absolute;
    z-index: 3; 
    visibility: hidden;
}
.model img.active { 
    z-index: 5; 
    visibility: visible;
}

/* Overlay > z-index 3..5 */
.overlay img {
    position: absolute;
    z-index: 3; 
    visibility: hidden;
}
.overlay img.active { 
    z-index: 5; 
    visibility: visible;
}

/* LOGIN  */

#login_wrapper {

    display: block;
}

/* SLEEP */

#sleep {
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, calc(-1 * var(--height-header)));
    z-index: 100;

    background-color: black;
    /*
    background-image: url('/img/back/achtergrond_blauw_donker.png');
    background-size: cover;
    background-repeat: no-repeat;
    */

}

#sleep img {
    position: absolute;
    z-index: 8; 
    visibility: hidden;
    height: 100%;
    width: 100%;
}

#sleep img.active { 
    z-index: 10; 
    visibility: visible;
}

/* INTRO */

#intro_model {
    width: calc(var(--design-w-intro) * var(--rel-width));
    height: calc(var(--design-h-intro) * var(--rel-width));
    margin: auto;
}
#intro_text {
    margin: auto;
    width: var(--width-divider);
}
#introduction {
    text-align: center;
    margin-top: var(--margin-default);
}

/* START */

#start_model {
    width: calc(var(--design-w-start) * var(--rel-height));
    height: calc(var(--design-h-start) * var(--rel-height));
    position: absolute;
    left: 0px;
    bottom: calc((var(--height-main) - var(--design-h-start)*var(--rel-height))/2);
    
}

#start_textbox {
    width: calc(var(--design-w-startbox-medium) * var(--rel-height));
    height: calc(var(--design-h-startbox-medium) * var(--rel-height));
    position: absolute;
    left: 50%;
    bottom: calc((var(--height-main) - var(--design-h-startbox-medium)*var(--rel-height))/2);
    transform: translate(-50%);
    z-index: 3;
}
#start_text {

    position: relative;
    visibility: hidden;

    display: flex;
    align-items: center;
    /*justify-content: center;*/
    text-align: center;

    height: 100%;
    z-index: 6;
    padding: 1.2rem;

}

/* SIDE */

#side_model {
    width: calc(var(--design-w-side) * var(--rel-height));
    height: calc(var(--design-h-side) * var(--rel-height));
    position: absolute;
    left: var(--margin-default);
    bottom: calc((var(--height-main) - var(--design-h-side)*var(--rel-height))/2);
}
#side_line {
    width: calc(var(--design-w-side-line) * var(--rel-height));
    height: calc(var(--design-h-side-line) * var(--rel-height));
    position: absolute;
    left: calc( var(--design-x-side-line) * var(--rel-width));
    bottom: calc( var(--design-y-side-line) * var(--rel-height));
}
#side_result {
    position: absolute;
    /*
    width: calc(var(--design-w-side-result) * var(--rel-height));
    height: calc(var(--design-h-side-result) * var(--rel-height));
    left: calc( var(--design-x-side-result) * var(--rel-width));
    bottom: calc( var(--design-y-side-result) * var(--rel-height));
    */
    width: calc(var(--design-w-side-dots) * var(--rel-height));
    height: calc(var(--design-h-side-dots) * var(--rel-height));
    left: calc( var(--design-x-side-dots) * var(--rel-width));
    bottom: calc( var(--design-y-side-dots) * var(--rel-height));
}

/* BACK */

#back_model {
    width: calc(var(--design-w-back) * var(--rel-height));
    height: calc(var(--design-h-back) * var(--rel-height));
    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);*/
    left: calc( var(--design-x-back) * var(--rel-width));
    bottom: calc((var(--height-main) - var(--design-h-back)*var(--rel-height))/2);
}
#back_line {
    width: calc(var(--design-w-back-line) * var(--rel-height));
    height: calc(var(--design-h-back-line) * var(--rel-height));
    position: absolute;
    left: calc( var(--design-x-back-line) * var(--rel-width));
    bottom: calc( var(--design-y-back-line) * var(--rel-height));
}

/* RESULT */

.inner.result {
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    margin-left: calc(var(--rel-width)*(var(--design-w-body) - var(--design-w-result-mattress))/2);
}

#result_mattress_model {
    width: calc(var(--design-w-result-mattress) * var(--rel-height));
    height: calc(var(--design-h-result-mattress) * var(--rel-height));
    /*margin-top: var(--margin-default);*/
}

#result_firmness_model {
    width: calc(var(--design-w-result-firmness) * var(--rel-height));
    height: calc(var(--design-h-result-firmness) * var(--rel-height));
    /*margin-top: var(--margin-default);*/
    /*margin-left: calc(var(--rel-width) * (var(--design-w-result-mattress) - var(--design-w-result-firmness))/2);*/
}

#result_pillow_model {
    width: calc(var(--design-w-result-pillow) * var(--rel-height));
    height: calc(var(--design-h-result-pillow) * var(--rel-height));
    /*margin-top: var(--margin-default);*/
    /*margin-left: calc(var(--rel-width) * (var(--design-w-result-mattress) - var(--design-w-result-pillow))/2);*/
}

/* CHECKING */

#clock {
    width: calc(var(--design-w-clock) * var(--rel-height));
    height: calc(var(--design-h-clock) * var(--rel-height));
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* GENERAL SETTINGS - BUTTONS & SPANS */

/* HEADER buttons */

button.menu {

    height: -webkit-calc(var(--height-menu));
    height: -moz-calc(var(--height-menu));
    height: var(--height-menu);
    width: var(--width-menu);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/menu.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-default);

}

span.logo {

    height: -webkit-calc(var(--height-logo));
    height: -moz-calc(var(--height-logo));
    height: var(--height-logo);
    width: var(--width-logo);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/auping.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: none; /* default: not visible */

    margin-left: calc(100vw/var(--design-w-body)*((var(--design-w-body) - var(--design-w-logo))/2)); 
    margin-right: auto;
}

span.scan {

    height: -webkit-calc(var(--height-scan-logo));
    height: -moz-calc(var(--height-scan-logo));
    height: var(--height-scan-logo);
    width: var(--width-scan-logo);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/sleepscan_logo.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: none; /* default: not visible */

    margin-left: calc(100vw/var(--design-w-body)*((var(--design-w-body) - var(--design-w-scan-logo))/2)); 
    margin-right: auto;

    translate: 0px 160px; /* 80 */
}


span.title {

    height: -webkit-calc(var(--height-title));
    height: -moz-calc(var(--height-title));
    height: var(--height-title);
    width: var(--width-title);

    outline: none; 
    border: 0;

    background-image: url('/img/scene/05_result/title/result_nl.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: none; /* default: not visible */

    margin-left: calc(100vw/var(--design-w-body)*((var(--design-w-body) - var(--design-w-title))/2)); 
    margin-right: auto;

}

/* span.title.nl{}*/

span.title.en{
    background-image: url('/img/scene/05_result/title/result_en.png');
}
span.title.be-nl{
    background-image: url('/img/scene/05_result/title/result_nl.png');
}
span.title.be-fr{
    background-image: url('/img/scene/05_result/title/result_fr.png');
}
span.title.de{
    background-image: url('/img/scene/05_result/title/result_de.png');
}


/* FOOTER buttons */

button.previous {

    height: -webkit-calc(var(--height-arrow));
    height: -moz-calc(var(--height-arrow));
    height: var(--height-arrow);
    width: var(--width-arrow);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/previous.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: none;

    margin-left: var(--margin-default);
    margin-right: auto;

}

button.next {

    height: -webkit-calc(var(--height-arrow));
    height: -moz-calc(var(--height-arrow));
    height: var(--height-arrow);
    width: var(--width-arrow);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/next.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-default);

}

button.start {
    height: -webkit-calc(var(--height-start-btn));
    height: -moz-calc(var(--height-start-btn));
    height: var(--height-start-btn);
    width: var(--width-start-btn);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/start.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: none; /* default: not visible */

    margin-left: calc( var(--rel-width) * ((var(--design-w-body) - var(--design-w-start-btn))/2)); 
    margin-right: auto;
}

button.home {
    height: -webkit-calc(var(--height-home-btn));
    height: -moz-calc(var(--height-home-btn));
    height: var(--height-home-btn);
    width: var(--width-home-btn);

    outline: none; 
    border: 0;

    background-image: url('/img/icon/home.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: none; /* default: not visible */

    margin-left: calc( var(--rel-width) * ((var(--design-w-body) - var(--design-w-home-btn))/2)); 
    margin-right: auto;
}