popsu-d9/web/themes/custom/popsu/sass/pages/_themes.scss

.page-node-type-theme, .page-node-type-projet{
    .field_logo{
        display: block;
    }
    &.programme-1{
        .field_programme{
            background: $col-1;
        }
        
    }
    &.programme-2{
        .field_programme{
            background: $col-2;
        }
    }
    &.programme-3{
        
        .field_programme{
            background: $col-eur;
        }
    }
    &.programme-4{
        .field_programme{
            background: $col-met;
        }
    }
    &.programme-5{
        .field_programme{
                background: $col-mond;
        }
    }
    &.programme-6{
        .field_programme{
                background: $col-ter;
        }
    }
    &.programme-7{
        .field_programme{
                background: $col-met;
        }
    }
    //tmp hidden
    .block-region-first{
        padding: 1rem;
        .field_programme{
            background: black !important;
            font-weight: 600;
            
            a{
                text-decoration: none;
            &:hover{
                text-decoration: underline;
            }
            }
        }
    }

    .block-region-third{
        margin-top: 30rem;
        #node\:field_equipes{
            visibility: hidden;
        }
    }
    .block-region-second{
        #node\:title:before{
            clear: both;
            display: block;
            width: 100%;
            font-size: $font-small;
            text-transform: uppercase;
            margin-bottom: .8rem;
        }
        ///
        .field_programme{
            display: inline-block;
            // background: gray;
            margin-bottom: 1rem;
            color: white;
            font-weight: 600;
            padding: .3rem .5rem;
            a{
                text-decoration: none;
            }
        }
       

        ///
        #node\:title{
            margin: 0;
            font-size: $font-large;
            line-height: 1.3;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        #node\:field_image,.field_diaporama{
            width: 150%;
            margin-bottom: 1rem;
            max-height: 22rem;
            overflow: hidden;
            @include breakpoint(small down) {
                width: 100%;
            }
            img{
                width: 100%;
                margin-top: -10%;
                
            }
        }
        .body{
            font-size: $font-medium;
            height: 15rem;
            overflow: hidden;
            position: relative;
            -webkit-transition: all 250ms ease;
            -moz-transition: all 250ms ease;
            -o-transition: all 250ms ease;
            transition: all 250ms ease;
            footer{
                position:absolute;
                bottom:0;
                left:0;
                z-index: 1;
    
                width: 100%;
                text-align: center;
    
                
                a{
                    display: inline-block;
                    margin: 0 auto;
                    background: black;
                    color: white;
                    cursor:pointer;
    
                    font-family: "trueno";
                    font-weight: 500;
    
                    padding: .3rem .5rem;
                    font-size: $font-small;
                    text-decoration: none;
                    text-transform: uppercase;
                    
    
                    &:hover{
                        color:black;
                        background: white;
                    }
                }
            }
        }

        .body:after{
            content: "";
            opacity: 1;
            position: absolute;
            top: 0; bottom: 0; left: -15px; right: -15px;
            box-shadow: inset white 0 -2rem 2rem;
        }
        .body_open{
            height: auto !important;
            padding: 0 0 .8rem 0;
            &:after{
                opacity: 0;
                -webkit-transition: all 250ms ease;
                -moz-transition: all 250ms ease;
                -o-transition: all 250ms ease;
                transition: all 250ms ease;
            }
            -webkit-transition: all 250ms ease;
            -moz-transition: all 250ms ease;
            -o-transition: all 250ms ease;
            transition: all 250ms ease;
        }
        .body_open:after{
            display: none;
        }
        .field_textes{
          
            .paragraph{
                // border-top: 1px solid black;
                border-bottom: 3px dotted gray;
                padding: 1rem 0;
                .field_titre{
                    font-size: $font-big;
                    font-weight: 600;
                    text-transform: initial;
                    cursor: pointer;
                    display: grid;
                    grid-template-columns: 95% 5%;
                    align-content: center;
                    // margin-top: 1rem;
                }
                .field_titre:after{
                    content: '▼';
                    -webkit-transition: all 250ms ease;
                    -moz-transition: all 250ms ease;
                    -o-transition: all 250ms ease;
                    transition: all 250ms ease;
                    align-self: center;
                    justify-self: center;
                }
                .rotate:after{
                    transform: rotate(180deg);
                    -webkit-transition: all 250ms ease;
                    -moz-transition: all 250ms ease;
                    -o-transition: all 250ms ease;
                    transition: all 250ms ease;
                }
                .field_texte{
                    height: auto;
                    position: relative;
                    h2{
                        text-transform: inherit;
                    }
                    p{
                        margin-top: .5rem;
                    }
                    -webkit-transition: all 250ms ease;
                    -moz-transition: all 250ms ease;
                    -o-transition: all 250ms ease;
                    transition: all 250ms ease;
                }
                
                .crop{
                    height: 0;
                    overflow: hidden;
                    display: none;
                    -webkit-transition: all 250ms ease;
                    -moz-transition: all 250ms ease;
                    -o-transition: all 250ms ease;
                    transition: all 250ms ease;
                }
            }
        }
    }
    
    .block-region-bottom{
        #node\:field_projets_lies{
            h2{
                text-align: center;
            }
            .field_projets_lies{
                margin-top: 1rem;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                column-gap: 1rem;
                padding: 0 10%;
            }
            article{
                margin-bottom: 1.6rem;
                .body{
                    display: none;
                }
            }
        }
    }


   
    #node\:field_equipes{
        margin-top: 1rem;
        h2{
            cursor: pointer;
            display: grid;
            grid-template-columns: 95% 5%;
            align-content: center;
            font-family: "trueno";
            font-size: 1rem;
            font-weight: 600;
            text-transform: initial;
            // text-align: center;
        }

        h2:after{
            content: '▼';
            -webkit-transition: all 250ms ease;
            -moz-transition: all 250ms ease;
            -o-transition: all 250ms ease;
            transition: all 250ms ease;
            align-self: center;
            justify-self: center;
            font-size: $font-big;
        }
        .rotate:after{
            transform: rotate(180deg);
            -webkit-transition: all 250ms ease;
            -moz-transition: all 250ms ease;
            -o-transition: all 250ms ease;
            transition: all 250ms ease;
        }
        .field_equipes{
            display: none;
           .paragraph{
                display: grid;
                .field_membres{
                    grid-row: 2;
                    // >div:first-child{
                    //     display: none;
                    // }
                    .paragraph{
                        display: grid;
                        grid-template-columns: auto 1fr;
                        .field_nom{
                            grid-column: 2;
                            grid-row: 1;
                            padding-left: .3rem;
                            display: inline-block;
                            width: auto;
                            font-weight: 500;
                            >div:first-child{
                                display: none;
                            }
                            div:nth-of-type(2){
                                display: inline-block;
                                width: auto;                                
                            }
                        }
                        .field_prenom{
                            grid-column: 1;
                            grid-row: 1;
                            display: inline-block;
                            font-weight: 500;
                            >div:first-child{
                                display: none;
                            }
                            div:nth-of-type(2){
                                display: inline-block;
                                width: auto;                                
                            }
                        }
                        .field_fonction{
                            grid-column: 1 / span 2;
                            >div:first-child{
                                display: none;
                            }
                        }
                        margin-bottom: 1rem;
                    }
                    margin-bottom: 1rem;
                }
                .field_type_equipe{
                    grid-row: 1;
                    font-weight: 600;
                    font-size: $font-medium;
                    margin-bottom: .5rem;
                    div:first-child{
                        display: none;
                    }
                }
            }
        }
    }
    #node\:field_partenaires{
        h2{
            //color: black;
            font-family: "trueno";
            font-size: 1rem;
            font-weight: 600;
            text-transform: initial;
            margin-top: 1rem;
            padding: .4rem 0;
            border-top: 3px dotted gray;

            cursor: pointer;
            display: grid;
            grid-template-columns: 95% 5%;
            text-transform: initial;
        }

        h2:after{
            content: '▼';
            -webkit-transition: all 250ms ease;
            -moz-transition: all 250ms ease;
            -o-transition: all 250ms ease;
            transition: all 250ms ease;
            align-self: center;
            justify-self: center;
            font-size: $font-big;
        }
        .rotate:after{
            transform: rotate(180deg);
            -webkit-transition: all 250ms ease;
            -moz-transition: all 250ms ease;
            -o-transition: all 250ms ease;
            transition: all 250ms ease;
        }
        .field_partenaires{
            display: none;
            align-items: center;
            justify-items: center;
            grid-template-columns: repeat(5 , 1fr);
            .paragraph{
                
                .field_logo_partenaire{
                    div:first-child{
                        display: none;
                    }
                    grid-column: 1;
                    grid-row: 1;
                    img{
                        max-width: 60%;
                    }
                }
                .field_nom_partenaire{
                    display: none;
                    div:first-child{
                        display: none;
                    }
                    grid-column: 2;
                    grid-row: 1;
                }
            }
        }
    }

&.programme-1{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
            color: $col-1;
        }
    }
}
&.programme-2{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
            color: $col-2;
        }
    }
    

}
&.programme-3{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
            color: $col-eur;
        }
    }
    
}
&.programme-4{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
            color: $col-met;
        }
    }
    
}
&.programme-5{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
            color: $col-mond;
        }
    }
    
}
&.programme-6{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
            color: $col-ter;
        }
    }
           
}
&.programme-7{
    .block-region-second{
        h2,h3,h4,h5,h6,.field_titre{
                color: $col-met;
            }
    }
    
}

    // font-size: $font-small;
    //temp hidden 
    .computed_projets_references, .computed_themes_references{
        display: none;
    }
    
    
    
}


.page-node-type-projet{
    #node\:title:before{
        content: "ville";
    }

}
.page-node-type-theme{
    #node\:title:before{
        content: "thème";
    }
    #node\:field_equipes{
        h2{
            color: white !important;
            text-align: left !important;
            cursor: pointer;
            
        }
        
    }
    .field_projets_lies{
        article{
            display: grid;
            h2{
                grid-row: 2;
                text-align: left !important;
                text-transform: none !important;
                line-height: 1.3;
                margin: .5rem 0 0 0;
                font-size: $font-normal;
                font-weight: 400;
                a{
                    text-decoration: none;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
            .field_diaporama {
                position: relative;
                width: 100%;
                overflow: hidden;
                a{
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    img{
                       height: 100% ;
                       width: 100%;
                       object-fit: cover;
                    }
                }
            }
            .field_diaporama:after {
                content: "";
                display: block;
                padding-top: 100%;

            }

            .field_programme{
                text-transform: uppercase;
                display: inline-block;
                font-weight: 600;
                
                padding: .02rem .3rem;
                grid-column: 1;
                grid-row: 1;
                z-index: 1;
                margin-bottom: -.5rem;
                margin-left: .2rem;
                
                color: white;
                a{
                    text-decoration: none;
                }
            }

        //// prog color
        &.programme-1{
            h2{ 
                color: $col-1 !important;
            }
            .field_programme{
                background: $col-1 ;
            }
        }
        &.programme-2{
            h2{
                color: $col-2 !important;
            }
            .field_programme{
                background: $col-2 ;
            }
        }
        &.programme-3{

            h2{
                color: $col-eur !important;
            }
            .field_programme{
                background: $col-eur ;
                
            }
        }
        &.programme-4{
            h2{ 
                color: black;
            }
            .field_programme{
                background:black ;
                
            }
        }
        
        &.programme-5{
            
            h2{
                color: $col-mond !important;
            }
            .field_programme{
                background: $col-mond ;
            }
        }
        &.programme-6{

            h2{
                color: $col-ter !important;
            }
            .field_programme{
                    background: $col-ter ;
            }

        }
        &.programme-7{
            h2{
                color: $col-met !important;
            }
            .field_programme{
                    background: $col-met ;                
            }
        }
            
            
        }
    }

}