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

.page-template-tpl-audit-inscription{
    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, 9.5vmin, 135px);
            line-height: 0.95;

            @include mixins.respondTo('md'){
                font-size: clamp(50px, 6vmin, 90px);
            }

            @include mixins.respondTo('xs'){
                @include mixins.fontSize(50,50);
            }
    
            em, i{
                color: variables.$cPrimary;
            }

            .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;
            text-align: left;

            @include mixins.respondTo('sm'){
                margin-bottom: 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{
            .wpcf7-email{
                width: 100%;
                @include mixins.fontSize(70,70);
                padding: 20px;
                text-align: center;
                border: 1px solid #686868;
                color: #FFF;
                
                @include mixins.respondTo('xs'){
                    @include mixins.fontSize(30,30);
                }
            }
            .wpcf7-not-valid-tip{
                margin-top: 10px;
            }
    
            .wpcf7 form .wpcf7-response-output{
                margin-top: 20px;
                margin-left: 5.5555%;
                border: 0 !important;
                padding-left: 0;
            }
        }
    }
}

.p-1{
    position: absolute;
    z-index: -1;
    top: 2vh; right: 45vw;
    color: rgba(255, 255, 255, 0.2);
    mix-blend-mode: lighten;
    opacity: 0.1;
    pointer-events: none;

    @include mixins.respondTo('xs'){
        display: none;
    }
}

.p-2{
    position: absolute;
    z-index: -1;
    bottom: 44vh; left: 68vw;
    color: rgba(255, 255, 255, 0.2);
    mix-blend-mode: lighten;
    opacity: 0.1;
    pointer-events: none;

    @include mixins.respondTo('xs'){
        display: none;
    }
}

.p-3{
    position: absolute;
    z-index: -1;
    top: 75vh; left: 32vw;
    color: rgba(255, 255, 255, 0.2);
    mix-blend-mode: lighten;
    opacity: 0.1;
    pointer-events: none;

    @include mixins.respondTo('xs'){
        display: none;
    }
}
