popsu-d9/web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

//header
.header_top_middle_container{
	.programme-1{
		.views-field-field-programme{
			.field-content{
				background: $col-1;
			}
			
		}
		.views-field{
				color: $col-1;
		}
		.views-field-title{
			color: $col-1;
			&:hover{
				background: $col-1;
				color:white;
			}
		}
	}

	.programme-2{
		.views-field-field-programme{
			.field-content{
				background: $col-2;
			}
			
		}
		.views-field{
				color: $col-2;
		}
		.views-field-title{
			color: $col-2;
			&:hover{
				background: $col-2;
				color:white;
			}
		}
	}

	.programme-3{
		.views-field-field-programme{
			.field-content{
				background: $col-eur;
			}
		}
		.views-field{
			color: $col-eur;
		}
		.views-field-title{
			color: $col-eur;
			&:hover{
				background: $col-eur;
				color:white;
			}
		}
	}

	.programme-4{
		.views-field-field-programme{
			.field-content{
				background: $col-2;
			}
		}
		.views-field{
			color: $col-2;
		}
		.views-field-title{
			color: $col-2;
			&:hover{
				background: $col-2;
				color:white;
			}
		}
	}

	.programme-5{
		.views-field-field-programme{
			.field-content{
				background: $col-mond;
			}
		}
		.views-field{
			color: $col-mond;
		}
		.views-field-title{
			color: $col-mond;
			&:hover{
				background: $col-mond;
				color:white;
			}
		}
	}
	.programme-6{
		.views-field-field-programme{
			.field-content{
				background: $col-ter;
			}
		}
		.views-field{
			color: $col-ter;
		}
		.views-field-title{
			color: $col-ter;
			&:hover{
				background: $col-ter;
				color:white;
			}
		}
	}
	.programme-7{
		.views-field-field-programme{
			.field-content{
				background: $col-met;
			}
		}
		.views-field{
			color: $col-met;
		}
		.views-field-title{
			color: $col-met;
			&:hover{
				background: $col-met;
				color:white;
			}
		}
	}
}

////////////////////////////////////////@at-root


#header-top{
	height: 5rem;
    background: white;
    padding-bottom: 1rem;
    padding-top: 1rem;
}
.header_top_left_container{
	height: 100%;
	&>div:first-child{
		height: 100%;
	}
	a[rel~='home']{
		height: 100%;
		display: block;
        font-size: 0;
		color: transparent;
		background: left / contain no-repeat url(../images/POPSU_logo.svg);
	}
}

.header_top_middle_container{
	height: 100%;
	// solution to access views container
	.views-element-container{
		height: 100%;
		&>div:first-child{
			height: 100%;
			&>div:first-child{
				height: 100%;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				align-items: center;
                &>div:first-child{
                    grid-column-start: 2;
                }
			}
			
		}
	}

	.views-row{
		text-align: center;
		display: inline-block;
		width: auto;
        a{
            text-transform: uppercase;
            text-decoration: none;
            font-weight: 600;
        }
        .views-field-title{
            display: inline-block;
            width: auto;
            padding: .2rem .5rem;
        }
        
	}

}
.close-block, .open-block{
	// background: red;
	cursor:pointer;
    span{
		display: block;
		width: 33px;
		height: 2px;
		position: relative;
		background: black;
		border-radius: 3px;
		z-index: 1;
	}
}
.close-block{
    padding-top: 1rem;
    span{
        transform-origin: center;
    }
    &>div>span:first-child{
        
        transform: translateY(57%)rotate(45deg);
    }
    &>div>span:nth-child(2){
        transform: rotate(-45deg);
    }
}
.open-block{
    height: 100%;
    display: grid;
    align-items: center;
	span{
		margin-bottom: 5px;	
		transform-origin: 4px 0px;
	}
}

#header-top-right{
	.header_top_right_container{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: white;
		display: none;
		grid-template-columns: 10% 25% 25% 30% 10%;
		padding: 1rem 0;
		z-index: 100;
		line-height: 2;
		nav{
			grid-column-start: 2;
		}
		// padding: 1rem .5rem 1rem .5rem;
		a{
			text-decoration: none;
			font-weight: 400;
			&:hover{
				text-decoration: underline;
			}
		}
		h2{
			font-weight: 100;
			margin-bottom: .3rem;
		}
        .views-field-title{
            color: black !important;
            &:hover{
                background: transparent;
            }
        }   
		.is-active{
			font-weight: 800;
		}
		#block-views-block-programmes-block-2{
			.views-row{
				width: 100%;
                
			}
            
		}
	}
}


footer{
    background: white;
   
}
#footer-bottom{
    padding: 2rem 0;
    height: 15rem;
	*{
		word-wrap: break-word;
	}
    h2{
        font-weight: 500;
    }
    .footer_bottom_left_container{
        height: 100%;
        div{
            height: 100%;
        }
        p{
            height: 100%;
            display: grid;
        }
    }
    .logo-gouv{
        height: 100%;
		display: block;
		color: transparent;
        font-size: 0;
		background: left / contain no-repeat url(../images/gouv.svg);
    }
    .logo-puca{
        height: 100%;
		display: block;
		color: transparent;
        font-size: 0;
		background: left / contain no-repeat url(../images/puca.svg);
        margin-top: -1.5rem;
    }

    #block-pieddepage{
        ul{
            line-height: 2;
            li{
                a{
                    text-transform: uppercase;
                    text-decoration: none;
                    font-weight: 400;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .footer_bottom_right_container{
        &>div>div{
            // display: grid;
            // grid-template-columns: repeat(3,1fr);
            p{
                display: inline-block;
                a{
                    min-width: 3rem;
                    min-height: 3rem;

                }
                a[href*='twitter']{
                    height: 100%;
                    display: block;
                    font-size: 0;
                    color: transparent;
                    background: left / contain no-repeat url(../images/tw.svg);
                }
                a[href*='linkedin']{
                    height: 100%;
                    display: block;
                    font-size: 0;
                    color: transparent;
                    background: left / contain no-repeat url(../images/ln.svg);
                }
                a[href*='youtube']{
                    height: 100%;
                    display: block;
                    font-size: 0;
                    color: transparent;
                    background: left / contain no-repeat url(../images/yt.svg);
                }
            }
        }
    }
}