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

.page-node-type-theme, .page-node-type-projet{
    /////  menu left
    .block-region-first{
        .field_programme{
            display: none;
        }

        #programme_toc-block_10{
			.views-row{
				padding-left: 1rem;
			}
		}
        // @include breakpoint(small down) {
        //     text-align: center;

        // }
        position: absolute;
        
        top: 0;
        left: 0;
        width: 22%;
        padding: 1rem 1.5rem ;
        .prog-ressources-link{
            font-family: "duke";
            font-size: $font-large;
            cursor: pointer;
            transition: all 250ms;
            text-decoration: none;
            &:hover{
                padding: 0 0 0 .3rem;
                    
            }
        }
        div[id=""] {
            @include breakpoint(small down) {
                display: none;
            }
        }
        .views-element-container{
            @include breakpoint(small down) {
                display: block;
                // &:not(:first-child){
                //     margin-left: 1rem;
                // }
                
            }
            header{
                font-family: "duke";
                font-size: $font-large;
                text-transform: uppercase;
                cursor: pointer;
                transition: all 250ms;
                line-height: 1.1;
                margin-bottom: .5rem;
                &:hover{
                    padding: 0 0 0 .3rem;
                    
                }
            }
            .views-row, .view-grouping{
                display: none;
                padding: 0 0 0 1.2rem;
                margin-bottom: .5rem;
                a{
                    text-decoration: none;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
            .views-row{
                padding: 0;
            }
        }

    }
    /////fin menu left
    // couleur popsu 
    .field_logo{
        display: block;
    }
    .field_programme>div{
        &.programme-1{
           background: $col-1; 
        }
        &.programme-2{
            background: $col-2;
        }
        &.programme-3{
            background: $col-eur;
        }
        &.programme-4{
           background: $col-1;
        }
        &.programme-5{
            background: $col-mond;
        }
        &.programme-6{
            background: $col-ter;
        }
        &.programme-7{
            background: $col-met;
        }
    }
    //fin couleurp popsu 
    // .block-region-first{
    //     padding: 1rem;
    //     .field_programme{
    //         background: black !important;
    //         font-weight: 600;
            
    //         a{
    //             text-decoration: none;
    //         &:hover{
    //             text-decoration: underline;
    //         }
    //         }
    //     }
    // }

    //contenu
    .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: flex;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            
            a{
                text-decoration: none;
            }
            div{
                display: inline-block;
                color: white;
                font-weight: 600;
                padding: .3rem .5rem;
                margin-right: .5rem;
                margin-bottom: .5rem;
            }
        }
       

        ///
        #node\:title{
            margin: 0;
            font-size: $font-large;
            line-height: 1.3;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        #node\:field_image,.field_diaporama,.field_image{
            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 $bck-col 0 -2rem 2rem;
        }
        .body_open{
            height: auto !important;
            padding: 0 0 1.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;
                }
            }
        }
    }
    //end contenus central 

    //menu droite
    .block-region-third{
        margin-top: 14rem;
        @include breakpoint(small down) {
            margin-top: 2rem;
        }
        #node\:field_evenements_lies{
            article{
                display: grid;
                >div{
                    //vgrid-row: 1;
                    text-transform: none;
                    color: #fff !important;
                    background: none;
                    font-size: .6rem;
                    margin: 0;
                    padding: .1rem 1rem;

                }
            }
        }
    }
    // fin menu droite
    
    
    // gallery de projet sous contenu du théme / ville

    .block-region-bottom{
        #node\:field_projets_lies, #node\:field_themes_lies,  #node\:field_comparatifs_associes{
            h2{
                text-align: center;
            }
            .field_projets_lies, .field_themes_lies, .field_comparatifs_associes {
                margin-top: 1rem;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                
                column-gap: 1rem;
                padding: 0 10%;

                @include breakpoint(small down) {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            article{
                margin-bottom: 1.6rem;
                .body{
                    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-bottom: 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);
            grid-template-columns: repeat(2 , 1fr);
            .paragraph{
                
                .field_logo_partenaire{
                    div:first-child{
                        display: none;
                    }
                    grid-column: 1;
                    grid-row: 1;
                    img{
                        max-width: 80%;
                    }
                }
                .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-1;
        }
    }
    
}
&.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, .page-node-type-theme{
    .field_projets_lies, .field_themes_lies, .field_comparatifs_associes{
        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,.field_image {
                position: relative;
                width: 100%;
                overflow: hidden;
                margin-top: .5rem;
                z-index: -1;
                a{
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    img{
                       height: 100% ;
                       width: 100%;
                       object-fit: cover;
                    }
                }
            }
            .field_diaporama:after, .field_image:after {
                content: "";
                display: block;
                padding-top: 100%;

            }

            .field_programme{
                text-transform: uppercase;
                font-weight: 600;
                
                grid-column: 1;
                grid-row: 1;
                // margin-bottom: -.5rem;
                color: #fff;
                display: grid;
                grid-template-columns: 1fr;
                grid-gap: 10px;
                z-index: 100;
                position: absolute;
                div{
                    padding: .02rem .3rem;
                }
                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: $col-1;
            }
            .field_programme{
                background:$col-1 ;
                
            }
        }
        
        &.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 ;                
            }
        }
            
            
        }
    }
}

.page-node-type-projet{
    #node\:title:before{
        content: "ville";
    }
    #node\:field_ressources_liees{
        .field_ressources_liees{
            color:black ;
        }
    }
    #node\:field_equipes{
        border-bottom: 3px dotted gray;
        padding: 0 0 1rem 0;
        h2{
            font-family: "trueno" !important;
            font-size: $font-big;
            font-weight: 600;
            text-transform: initial;
            cursor: pointer;
            display: grid;
            grid-template-columns: 95% 5%;
            align-content: center;
            margin: 1rem 0 0 0;
        }

        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;
        }
        // h2:after{
        //     transform: rotate(180deg);
        //     -webkit-transition: all 250ms ease;
        //     -moz-transition: all 250ms ease;
        //     -o-transition: all 250ms ease;
        //     transition: all 250ms ease;
        // }
        .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_type_equipe{
           font-weight: 500; 
        }
        .field_equipes{
            display: none;
        }
    }
    
}


.page-node-type-theme{
    #node\:title:before{
        content: "thème";
    }
    #node\:field_equipes{
        h2{
            color: white !important;
            text-align: left !important;
            cursor: pointer;
            
        }
        
    }
    // .block-region-third{
    //     #node\:field_partenaires{
    //         h2{
    //             border:none;
    //             font-family: trueno;
    //             font-size: .8rem;
    //             font-weight: 600;
    //             margin-top: 0;
    //             padding: .4rem 0.5rem;
    //             display: block;
    //             &:after{
    //                 display:none;
    //             }
    //         }
    //         .field_partenaires{
    //             display: grid;
    //         }
    //     }
    // }
    
    // si ressources affichée dans page théme
    #node\:field_ressources_liees{
        background: $trame;
        // h2{
        //     text-align: center;
        // }
        &>h2{
            text-align: center;
        }
        // .field_ressources_liees{
        //     background: $trame;
        // }
        article{
            a{
                text-decoration: none;
            }
            // display:grid !important;
            // grid-template-columns: 1fr 1fr;
            h2{
                grid-column: 2;
                grid-row: 1;
                text-align:left;
            }
            &>div{
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                align-items: center;
                background: #fff;
                position: relative;
                height: auto;
                padding: 1rem;
                background-clip: content-box;
            }
            
            .field_type_de_ressource{
                
                grid-column: 2;
            }
            .field_sous_titre{
                
                grid-column: 2;
            }

            ///////
        .field_image{
			grid-row: 2 / span 3;
			// margin-top: -1.5rem;
			z-index: 0;	
			padding: .5rem;
		}
        div{
            margin-bottom: .5rem;
        }
	
		h2{
			font-weight: 400;
			grid-row: 3 / span 1;
			grid-column: 2;
			font-style: italic;
			
            text-transform: none;
            
		}
        .field_type_de_ressource{
            font-weight: 400;
        }
        .field_sous_titre{
            grid-row: 4 / span 1;
        }
		.field_programme{
			&>div{
				display: inline-block;
				width: auto;
				padding: .3rem .5rem;
				
			}

			padding-left: .5rem !important;
			grid-row: 1 / span 1;
			grid-column: 1 / span 2;
			text-transform: uppercase;
			margin-top: -.5rem;
			&>div{
				font-weight: 600;
				display: inline-block;
				width: auto;
				color: white;
				padding: .02rem .3rem;
				// margin-bottom: 1rem;
			}
		}
           
        }
    }
}