website/assets/sass/adhesion.scss

132 lines
2.1 KiB
SCSS
Raw Normal View History

2023-07-14 09:57:56 +00:00
.adhesion-body {
overflow: hidden !important;
}
.root {
min-height: 100%;
}
.adhesion-container {
background-color: black;
height: 100%;
width: 100%;
min-height: 100%;
height: 90vh;
.video-presentation {
height: 100%;
iframe {
width: 100%;
height: 100%;
}
}
}
.adhesion {
}
.adhesion-footer {
background-color: $background;
width: 100%;
height: 10vh;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
}
.adhesion-btns {
display: flex;
justify-content: space-between;
}
.btn {
background-color: white;
opacity: 0.8;
transition: 0.2s all;
.btn__icon {
margin-right: 1rem;
width: 2rem;
height: 2rem;
}
&:hover {
opacity: 1;
}
}
.subscribe-button {
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
border-radius: 35px;
color: black;
text-decoration: none;
padding: .7rem 2rem;
}
.socials {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
li {
background-color: white;
border-radius: 50%;
width: 3rem;
height: 3rem;
margin-right: 1rem;
a {
display: block;
width: 100%;
height: 100%;
text-transform: uppercase;
svg {
display: block;
padding: .7rem;
fill: black;
width: 100%;
height: 100%;
}
}
}
}
@media (max-width: $md-breakpoint) {
.adhesion-container {
height: 85vh;
}
.adhesion-footer {
height: 15vh;
}
}
@media (max-width: $xs-breakpoint) {
.adhesion-container {
height: 80vh;
}
.adhesion-footer {
height: 20vh;
.subscribe-button {
margin-bottom: 1rem;
}
.adhesion-btns {
flex-direction: column;
}
.socials {
justify-content: center;
}
}
}