@viewdo/dxp-story-player-assets/less/templates/vanillabean/scenes/direct.less

## Installation

.viewdo-direct(@primary: #2d5174, @secondary: #6d5f8c, @theme: default){

    p {
        text-align: left;
        a {
            color: white;
        }
    }

    @media only screen and (min-width: 862px) {
        .direct iframe {
          min-height: 50rem;
        }
    }
    @media only screen and (max-width: 861px) {
        .direct iframe {
            min-height: 35rem;
        }
    }

    .viewdo-ctas-header{
        margin-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,.3);
        
        img{
            display: block;
            margin: 0 auto;
        }

        >:last-child{
            padding-bottom: 1.5rem;
        }
    }

    body #state-player section:not(.ivx-state-video-section).direct{
        width: 100%;
        max-width: @experienceWidth;
        box-sizing: border-box;
        padding: 0 1rem;

        h1{
            margin: 0 auto 2rem;
            min-width: 320px;
        }
    }

    .direct-template-thumbnails,
    .direct-template-default{
        .ivx-navigation-state-links-container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 30rem;
            margin: auto;
            .genButtons(default, @defaultButtonStyles);

            .ivx-input-buttons{
                width: 100%;
            }

            .ivx-input-buttons-cta-persistent{
                box-shadow: none;
                font-size: 1rem;
                text-transform: none;
                background: @ctaButtonPersistentBg;
                color: @ctaButtonPersistentTextColor;
            }

            .ivx-input-buttons-cta{
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: @ctaButtonShadow;
                background: @ctaButtonBg;
                color: @ctaButtonTextColor;
            }

            .ivx-link-container{
                &:nth-child(1){
                    flex: 0 0 100%;
                }
                &:nth-child(2),
                &:nth-child(3){
                    float: none;
                    width: auto;
                    flex: 1;
                    margin: 2% .5%;
                }
            }
        }        
    }
    
    .direct-template-ctas{

        .ivx-navigation-state-links-container{
            .ivx-link-container{
                a{
                    color: inherit;
                    text-decoration: none;
                }

                img,span{
                    text-align: center;
                    margin: 0 auto;
                }

                img{
                    display: block;
                    margin-bottom: 1rem;
                    max-width: 25%;
                }

                span{
                    display: inline-block;
                    background: @secondary;
                    padding: .5rem 1rem;
                    color: contrast(@secondary);
                    border-radius: 100px;
                    margin: 1rem;
                }

                ul,ol{
                    display: block;
                    margin: 0;
                    padding-left: 0;
                    text-align: left;
    
                    li{
                        margin-left: 2rem;

                        &.bold{
                            font-weight: bold;
                        }

                        &.italic{
                            font-style: italic;
                        }

                        &.highlight{
                            color: @secondary;
                        }
                    }
                
                    &:before{
                        content:attr(data-header);
                        font-size:120%;
                        font-weight:bold;                  
                    }
                }                

                &:first-child{
                    span{
                        background: @highlight;
                        color: contrast(@ctaButtonPersistentBg, @darkText, @lightText);
                        font-size: 1em;
                        padding: 0.5rem 1rem;              
                    }
                }
            }
        }

        ._desktopTemplateCTAs{
            .ivx-navigation-state-links-container{
                display: flex;
    
                .ivx-link-container{
                    flex-basis: 0;
                    flex-grow: 1;
                    padding: 0 .6667rem 0 0;

                    &:first-child{
                        order: 2;
                        padding: 0 .3333rem;

                        span{
                            font-size: 1em;
                            padding: .75rem 1rem;
                        }                        
                    }

                    &:last-child{
                        order: 3;
                        padding: 0 0 0 .6667rem;
                    }                    
                }
            }
        }
        .responsive(desktop,{
            ._desktopTemplateCTAs;
        });          

        ._mobileTemplateCTAs{
            .ivx-navigation-state-links-container{
    
                .ivx-link-container{
                    &:nth-child(n+2){
                        margin-top: 1rem;
                    }
                }
            }            
        }        
        .responsive(mobile,{
            ._mobileTemplateCTAs;
        });        

    }

    .viewdo-cta-instructions{
        border-top: 1px solid rgba(255,255,255,.3);
        margin: 1.5rem 0;
        padding-top: 1.5rem;        
    }
    
    div[class^="viewdo-cta-grid-"]{

        display: flex;
        flex-flow: wrap;
        justify-content: center;
        width: 100%;

        .viewdo-cta-thumb{
            margin: 1%;
            width: 48%;

            >div,
            a{
                display: block;
                text-decoration: none;
                color: inherit;
                cursor: pointer;                
                
                .background-holder{
                    padding-top: 64%;
                    position: relative;
                    overflow: hidden;

                    .background{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        transition: all 0.5s ease;
                        top: 0;
                        z-index: -1;
                    }  
                }              

                .label{
                    padding: 1rem;
                    font-size: .875em;
                    text-align: left;
                }

                &:hover{
                    .background{
                        transform: scale3d(1.2, 1.2, 1);
                    }
                }
            }            
        }

    }    

}