@use "sass:color";
@use "../abstracts/mixins";
@use "../abstracts/variables";

.page-template-tpl-audit-validation{
    background-color: #212020;
    color: variables.$cLight;
    
    .logoContainer,
    .menuToggle,
    .footer{
        display: none;
    }

    .audit{
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: space-between;
        padding: 6vh 0 12vh;
        
        @include mixins.respondTo('sm'){
            min-height: 100vh;
        }

        &_header{
            text-align: center;
            font-family: variables.$ffC;
            text-transform: uppercase;
            @include mixins.fontSize(18,20);
            letter-spacing: 3px;
            color: color.adjust(#FFF, $alpha: -0.6);
    
            h2{
                @include mixins.fontSize(30,45);
                color: #FFF;
                font-weight: 300;
            }
        }

        &_title{
            margin-top: 3vh;
            text-align: center;
            font-size: clamp(70px, 11vmin, 150px);
            line-height: 0.95;

            @include mixins.respondTo('xs'){
                @include mixins.fontSize(50,50);
            }
    
            strong, b{
                color: variables.$cPrimary;
                font-weight: normal;
            }

            .word{
                display: inline-block;
            }
        }

        &_content{
            padding-top: 3.5vh;
            padding-bottom: 3.5vh;
            position: relative;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #FFF;
            @include mixins.fontSize(16,24);
            margin-top: 4vh;

            &_icon{
                position: absolute;
                top: calc(3.5vh + 0px);
                right: calc(100% + 30px);
                color: variables.$cPrimary;
            }
        }

        &_action{
            position: relative;
            display: block;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0 auto 0 auto;
            background-color: variables.$cPrimary;
            @include mixins.fontSize(26,30);
            text-transform: uppercase;
            transition: transform 0.8s variables.$ExpoEaseOut;

            strong{
                font-style: italic;
            }

            &:hover{
                transform: scale(1.2) !important;
            }

            @include mixins.respondTo('xs'){
                margin-top: 4vh;
                width: 140px;
                height: 140px;
                @include mixins.fontSize(20,30);
            }
        }        
    }

    .audit{
        &_form{
            form{
                p{
                    &:first-child{
                        text-align: center;
                        width: 50%;
                        margin: auto auto 40px auto;
                        color: color.adjust(#FFF, $alpha: -0.6);
    
                        @include mixins.respondTo('xs'){
                            display: block;
                            width: 100%;
                            margin: 40px auto;
                        }
                    }
    
                    &:last-child{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 80%;
                        margin: auto;
    
                        @include mixins.respondTo('xs'){
                            display: block;
                            width: 100%;
                            text-align: center;
                        }
                    }
                }
            }
            label{
                text-transform: uppercase;
                font-weight: 800;
                @include mixins.fontSize(18,20);
                letter-spacing: 3px;
                color: color.adjust(#FFF, $alpha: -0.6);
    
                input{
                    display: block;
                    margin-top: 20px;
                    width: 100%;
                    @include mixins.fontSize(70,70);
                    padding: 20px;
                    text-align: left;
                    border: 1px solid #686868;
                    color: #FFF;
    
                    @include mixins.respondTo('xs'){
                        text-align: center;
                        @include mixins.fontSize(40,40);
                        padding: 20px;
                    }
                }
            }
            input[type="submit"]{
                position: relative;
                display: block;
                width: 180px;
                height: 180px;
                min-width: 180px;
                border-radius: 50%;
                margin-left: 50px;
                background-color: variables.$cPrimary;
                @include mixins.fontSize(22,30);
                font-weight: 700;
                text-transform: uppercase;
                transition: transform 0.8s variables.$ExpoEaseOut;
    
                strong{
                    font-style: italic;
                }
    
                &:hover{
                    transform: scale(1.1) !important;
                }
    
                @include mixins.respondTo('xs'){
                    margin-top: 4vh;
                    width: 140px;
                    height: 140px;
                    min-width: 140px;
                    @include mixins.fontSize(20,30);
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }
    
        .open-audit{
            position: relative;
            display: block;
            width: 180px;
            height: 180px;
            min-width: 180px;
            border-radius: 50%;
            margin: auto;
            background-color: variables.$cPrimary;
            @include mixins.fontSize(22,30);
            font-weight: 700;
            text-transform: uppercase;
            transition: transform 0.8s variables.$ExpoEaseOut;
        }
    
        &_iframe{
            position: fixed;
            z-index: 400;
            top: 0; left: 0; right: 0; bottom: 0;
    
            &, *{
                cursor: auto !important;
            }
    
            &_mask{
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background-color: color.adjust(#D41136, $alpha: -0.5);
            }
        
            &_content{
                position: absolute;
                top: 5vh; left: 50%; bottom: 5vh;
                max-width: 800px;
                width: 80%;
                margin: auto;
                overflow: auto;
                background-color: #FFF;
                color: variables.$cDark;
                transform: translateX(-50%) translateZ(0px);
                // transition: transform 1.2s $ExpoEaseOut;
        
                @include mixins.respondTo('xs'){
                    width: 90%;
                }
            }
        }
    }
}
