/**
* 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))) );

    --height-header: 9vh;                                                         /* header is 8% of total viewport height */
    --height-footer: 6vh;                                                         /* footer is 6% of total viewport height */

    --margin-logo: 8vw;
    --height-logo: var(--height-header);
    --width-logo: calc(var(--height-logo) * 117/184);   /* logo: 117x184 // 195x310*/

    --margin-settings: 3vw;
    --height-settings: calc(var(--height-footer) - var(--margin-settings));

    --height-main: calc(100vh - (var(--height-header) + var(--height-footer)));   /* calculated portion main (viewport - header & footer) */
    --height-main-xl: calc((100vh - var(--height-header)));                       /* calculated portion main (no footer) */

    /* COLORS */
    --color-auping-blue: rgb(9,83,159);
    --color-night-blue: rgb(45, 84, 113);
    --color-morning-grey: rgb(81, 81, 81);
    --color-font-blue: rgb(0,91,122);
    --color-dark-blue: #0c0230;

}

/* GENERAL PAGE SETTINGS */
html, body {

	height: 100%;

	font-size: var(--font-size);
    color: var(--color-font-blue);

    /* font-family: 'Roboto Slab', serif; */
    font-family: 'Roboto', serif;
    font-weight: 400;

    /*background-color: rgb(178, 218, 236);*/
    background-color: var(--color-auping-blue);

}

body.sleep {
    background-color: var(--color-dark-blue);
}

/* BACKGROUND IMAGES */
body.p01 {
    /*background-color: var(--color-auping-blue);*/
    background-image: url('/img/back/P_01_1920.png');
    -webkit-transition: background-image 5s;
}
body.p02 {
    background-image: url('/img/back/P_02_1920.png');
    -webkit-transition: background-image 5s;
}
body.p03 {
    background-image: url('/img/back/P_03_1920.png');
    -webkit-transition: background-image 5s;
}
body.p04 {
    background-image: url('/img/back/P_04_1920.png');
    -webkit-transition: background-image 5s;
}
body.p05 {
    background-image: url('/img/back/P_05_1920.png');
    -webkit-transition: background-image 5s;
}
body.p06 {
    background-image: url('/img/back/P_06_1920.png');
    -webkit-transition: background-image 5s;
}
body.p07 {
    background-image: url('/img/back/P_07_1920.png');
    -webkit-transition: background-image 5s;
}
body.p08 {
    background-image: url('/img/back/P_08_1920.png');
    -webkit-transition: background-image 5s;
}
body.p09 {
    background-image: url('/img/back/P_09_1920.png');
    -webkit-transition: background-image 5s;
}
body.p10 {
    background-image: url('/img/back/P_10_1920.png');
    -webkit-transition: background-image 5s;
}
body.p11 {
    background-image: url('/img/back/P_11_1920.png');
    -webkit-transition: background-image 5s;
}
body.p12 {
    background-image: url('/img/back/P_12_1920.png');
    -webkit-transition: background-image 5s;
}

/* pre-load images (hidden) */
body::after {
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
    content:
        url('/img/back/P_01_1920.png') 
        url('/img/back/P_02_1920.png') 
        url('/img/back/P_03_1920.png') 
        url('/img/back/P_04_1920.png') 
        url('/img/back/P_05_1920.png') 
        url('/img/back/P_06_1920.png') 
        url('/img/back/P_07_1920.png') 
        url('/img/back/P_08_1920.png') 
        url('/img/back/P_09_1920.png') 
        url('/img/back/P_10_1920.png') 
        url('/img/back/P_11_1920.png') 
        url('/img/back/P_12_1920.png'); 
}

body.active {
    background-color: rgb(178, 218, 236);
    background-image: url('/img/back/scene_Background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

/* main.active { background: var(--color-light-ivory); } */
/* main.sleep { background: var(--color-dark-blue); }    */

/* 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;
}
p.settings{
    font-weight: 300;
    font-size: 0.8rem;
}

.modal-footer {
    color: var(--color-morning-grey);
}

/* GENERAL SETTINGS - BUTTONS */

.btn-primary {

    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-font-blue);
    --bs-btn-hover-bg: var(--color-night-blue);
    font-weight: 500;
    padding: 0.5rem 1.5rem;

}

.btn-secondary {

    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-night-blue);
    --bs-btn-hover-bg: var(--color-morning-grey);
}

button.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/btn/A-label.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;

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

}

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

    outline: none; 
    border: 0;

    background-image: url('/img/btn/Instellingen.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;

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

}

/* PAGE SETUP - GENERAL DIVISIONS */

/* header (with LOGO) */
#header {
    height: -webkit-calc(var(--height-header));
    height: -moz-calc(var(--height-header));
    height: var(--height-header);
    margin: 0;
    padding: 0;
}

/* main part, BETWEEN header and footer */
#main {
    height: -webkit-calc(var(--height-main));
    height: -moz-calc(var(--height-main));
    height: var(--height-main);
    /*width: 100%;*/
    
    margin-right: var(--margin-logo);
    margin-left: var(--margin-logo);
}

/* main part extended : BELOW header BUT NO FOOTER */
#main.no-footer {
    height: -webkit-calc(var(--height-main-xl));
    height: -moz-calc(var(--height-main-xl));
    height: var(--height-main-xl);  
}

/* footer (with settings wheel) */
#footer {
    height: -webkit-calc(var(--height-footer));
    height: -moz-calc(var(--height-footer));
    height: var(--height-footer);
}

/* PAGE SETUP - SUBPARTS  */

.wrapper {
    position: relative;

}

/* Status window */
#status {
    justify-content: space-between;
    display: flex;
    /*margin-top: 1.5rem;*/
    /*margin-bottom: 1rem;*/
}
.wrapper.status {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
.subtitle {
    position: absolute;
    left: 0;
    bottom: -0.75rem;
}
.content {
    /*margin-top: 0.5rem;
    margin-bottom: 0.5rem;*/
    /*padding-top: 0.4rem;*/
    padding-top: 5vh;
}

/* Animations (measuring, timer, taper...) */
.anim {
    position: relative;
}
.anim img {
    position: absolute;
    z-index: 1; 
    visibility: hidden;
    left: 50%;
    transform: translate(-50%);
}
.anim img.active { 
    z-index: 3; 
    visibility: visible;
}

.firmness {
    position: relative;
}

.firmness img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wpos {
    position: relative;
    top: 17%;
    z-index: 5; 
    display: none;
    color: white;
    /*font-size: 0.8rem;*/
    font-size: 40px;
}

.wpos.big {
    left: 20%;
    /*font-size: 0.9rem;*/
    font-size: 50px;
}

.middle {
    max-width: fit-content;
    margin-inline: auto;
}

img.middle {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

/* Action division (start measurement button) */
.action{
    margin-top: 1.5rem;
    text-align: center;
}

.demo{
    font-size:0.5rem;
    position: fixed;
    top: 5px;
    left: 60px;
}

.timing{
    font-size:0.5rem;
    position: fixed;
    top: 5px;
    left: 10px;
}
.debug{
    font-size:0.5rem;
    position: fixed;
    top: 25px;
    left: 10px;
    display: none;
}

.button.config {
    /*display: block;
    margin-right: auto;*/
    margin-left: var(--margin-settings);
    display: none;
    object-fit: contain;
}
.button.next {
    /*display: block;*/
    /*margin-left: auto;*/
    margin-right: var(--margin-settings);
    display: none;
}
.button.start {
    display: none;
}