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

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

    .webinaire{
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: space-between;
        padding: 6vh 0;
        
        @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: 6vh;
            text-align: center;
            font-size: clamp(70px, 12vmin, 150px);
            line-height: 0.95;

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

            .word{
                display: inline-block;
            }
        }

        &_date{
            margin-bottom: 3.5vh;
            padding-bottom: 1.5vh;
            border-bottom: 1px solid #FFF;
            text-transform: uppercase;
            font-family: variables.$ffC;
            text-transform: uppercase;
            @include mixins.fontSize(20,20);
            letter-spacing: 3px;
        }

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

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

        &_action{
            position: relative;
            display: block;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 12vh 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;
            }

            &::before{
                content: "";
                position: absolute;
                top: 50%; left: 50%;
                width: 240px; height: 240px;
                margin-top: -120px;
                margin-left: -120px;
                background-image: url(../images/webinar.svg);
                opacity: 0.5;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                animation: rotate 10s linear infinite;

                @include mixins.respondTo('xs'){
                    width: 180px; height: 180px;
                    margin-top: -90px;
                    margin-left: -90px;
                }
            }
        }        
    }

    .trailImg{
        max-width: 400px;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        will-change: transform;
        transform-origin: center center;
    }

    .trailEffect{
        position: absolute;
        z-index: 0;
        top: 0; left: 0;
        opacity: 0.6;
        filter: grayscale(100%);

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

}

.webinaire{

    &_form{
        position: fixed;
        z-index: 400;
        top: 0; left: 0; right: 0; bottom: 0;
        display: none;

        &, *{
            cursor: auto !important;
        }
    
        &_mask{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: color.adjust(variables.$cDark, $alpha: -0.4);
            cursor: pointer !important;
            opacity: 0;
        }
    
        &_content{
            position: absolute;
            top: 0; right: 0; bottom: 0;
            max-width: 960px;
            width: 80%;
            overflow: auto;
            background-color: #FFF;
            color: variables.$cDark;
            transform: translateX(101%) translateZ(0px);
    
            @include mixins.respondTo('xs'){
                width: 90%;
            }
        }
    
        &_scroller{
            padding: 6vw 6vw;
    
            @include mixins.respondTo('xs'){
                position: relative;
                overflow: hidden;
                padding-top: 5vh;
                padding-bottom: 5vh;
            }
        }

        &_title{
            position: relative;
            text-transform: uppercase;
            font-family: variables.$ffC;
            @include mixins.fontSize(20,20);
            font-weight: 700;
            padding: 10px 0 20px 25px;
            margin-bottom: 20px;
            border-bottom: 2px solid #000;

            &::before{
                content: "";
                position: absolute;
                top: 14px; left: 0;
                width: 10px; height: 10px;
                border-radius: 10px;
                background-color: variables.$cGreyBlue;
            }
        }

        &_intro{
            @include mixins.fontSize(30,45);
            margin-bottom: 20px;

            strong,b{
                color: variables.$cPrimary;
            }
        }

        &_code{
            .iframe-wrapper, iframe{
                height: 600px !important;

                @include mixins.respondTo('xs'){
                    height: 700px !important;
                }
            }
        }
        
        &_iframe{
            width: 100%;
            height: 630px;
            // min-height: calc(100vh - 12vw - 200px);
            
            @include mixins.respondTo('xs'){
                height: 850px;
            }
        }

        &--opened{
            display: block;
        }
    }
}