426 lines
10 KiB
SCSS
426 lines
10 KiB
SCSS
.ornements_top_over {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 30vh;
|
|
right: -55vw;
|
|
top: -5vh;
|
|
z-index: 0;
|
|
transition: left 0.05s ease, top 0.05s ease;
|
|
> div {
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: left 0.05s ease, top 0.05s ease;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_4.png);
|
|
top: -3vh;
|
|
right: 5vw;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_5.png);
|
|
right: -13vw;
|
|
}
|
|
> div:nth-of-type(3) {
|
|
background-image: url(../assets/formes/forme_3.png);
|
|
top: 4vh;
|
|
right: -8vw;
|
|
}
|
|
@media (min-width: $breakpoint_tablet) {
|
|
left: -35vw;
|
|
top: -20vw;
|
|
> div {
|
|
transform: scaleX(-1);
|
|
left: -55vw;
|
|
}
|
|
> div:first-of-type {
|
|
display: none;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
display: none;
|
|
}
|
|
> div:nth-of-type(3) {
|
|
background-image: url(../assets/formes/forme_6.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ornements_top_under {
|
|
pointer-events: none;
|
|
display: none;
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 30vh;
|
|
left: -30vw;
|
|
top: 0vw;
|
|
transition: left 0.05s ease, top 0.05s ease;
|
|
> div {
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: scaleX(-1);
|
|
transition: left 0.05s ease, top 0.05s ease;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_4.png);
|
|
top: -3vh;
|
|
left: -45vw;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_5.png);
|
|
left: -60vw;
|
|
}
|
|
@media (min-width: $breakpoint_tablet) {
|
|
display: block;
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
> div:first-of-type {
|
|
top: 1vh;
|
|
left: -50vw;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
top: 6vh;
|
|
left: -56.5vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ornements_bottom_over {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 30vh;
|
|
left: -30vw;
|
|
bottom: -20vh;
|
|
> div {
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_1.png);
|
|
left: 8vw;
|
|
bottom: -4vh;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_2.png);
|
|
bottom: -15vh;
|
|
left: -3vw;
|
|
}
|
|
@media (min-width: $breakpoint_tablet) {
|
|
left: unset;
|
|
right: -8vw;
|
|
bottom: -25vh;
|
|
> div {
|
|
transform: scaleX(-1);
|
|
}
|
|
> div:nth-of-type(2) {
|
|
left: 18vw;
|
|
bottom: -11vh;
|
|
}
|
|
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
> div:first-of-type {
|
|
bottom: 6vh;
|
|
left: 20vw;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
bottom: -9vh;
|
|
left: 25vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fullpage.actus {
|
|
.ornements_top_over, .ornements_top_under {
|
|
top: -12vh;
|
|
}
|
|
.ornements_bottom_over {
|
|
bottom: -28vh;
|
|
> div:nth-of-type(2) {
|
|
bottom: -10vh;
|
|
left: -7vh;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint_tablet) {
|
|
width: auto;
|
|
margin-left: $x_margin;
|
|
margin-right: $x_margin;
|
|
.actus_list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
.actus_list {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.ornements_top_over {
|
|
> div:nth-of-type(3) {
|
|
top: -28vh;
|
|
}
|
|
}
|
|
.ornements_bottom_over {
|
|
> div:first-of-type {
|
|
bottom: 0vh;
|
|
left: -3vw;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
left: 6vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel_container {
|
|
position: relative;
|
|
.ornements_carousel_top {
|
|
position: absolute;
|
|
display: none;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url(../assets/formes/forme_5.png);
|
|
@media (min-width: $breakpoint_tablet) {
|
|
display: block;
|
|
width: 20vw;
|
|
height: 50vh;
|
|
top: -25vh;
|
|
left: 3vw;
|
|
transform: rotate(-90deg);
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
top: 20vh;
|
|
left: -10vw;
|
|
height: 30vh;
|
|
}
|
|
}
|
|
|
|
.ornements_carousel_bottom {
|
|
position: absolute;
|
|
display: none;
|
|
overflow: hidden;
|
|
@media (min-width: $breakpoint_tablet) {
|
|
display: block;
|
|
width: 20vw;
|
|
height: 50vh;
|
|
right: 0;
|
|
bottom: 1px;
|
|
> div:first-of-type {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url(../assets/formes/forme_5.png);
|
|
position: absolute;
|
|
top: 35vh;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url(../assets/formes/forme_2.png);
|
|
position: absolute;
|
|
top: 40vh;
|
|
left: 12vw;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
width: 12vw;
|
|
bottom: unset;
|
|
top: 0;
|
|
right: -2vw;
|
|
> div:first-of-type {
|
|
top: -16vh;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
top: -8vh;
|
|
left: 4vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ornements_presentation_left {
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
height: 20vh;
|
|
width: 20vw;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
> div {
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_4.png);
|
|
transform: rotate(180deg);
|
|
width: 200%;
|
|
left: -20vw;
|
|
bottom: -8vh;
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_5.png);
|
|
transform: rotate(180deg);
|
|
width: 130%;
|
|
left: -10vw;
|
|
bottom: -5vh;
|
|
@media (min-width: $breakpoint_tablet) {
|
|
width: 170%;
|
|
height: 120%;
|
|
left: -21vw;
|
|
bottom: -3vh;
|
|
}
|
|
}
|
|
> div:nth-of-type(3) {
|
|
background-image: url(../assets/formes/forme_3.png);
|
|
transform: rotate(180deg);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
width: 200%;
|
|
left: -22vw;
|
|
bottom: -3vh;
|
|
}
|
|
}
|
|
|
|
.ornements_presentation_right {
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
height: 20vh;
|
|
width: 20vw;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
> div {
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_1.png);
|
|
transform: rotate(-90deg);
|
|
right: -15vw;
|
|
bottom: -6vh;
|
|
@media (min-width: $breakpoint_tablet) {
|
|
bottom: -3vh;
|
|
right: -6vw;
|
|
}
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_2.png);
|
|
bottom: -12vh;
|
|
right: -12vw;
|
|
}
|
|
}
|
|
|
|
.ornements_consultation_left {
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
height: 20vh;
|
|
width: 30vw;
|
|
bottom: -8vh;
|
|
left: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
> div {
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_4.png);
|
|
transform: rotate(180deg);
|
|
width: 200%;
|
|
height: 120%;
|
|
left: -30vw;
|
|
bottom: -10vh;
|
|
@media (min-width: $breakpoint_desktop) {
|
|
transform: rotate(0deg);
|
|
bottom: 5vh;
|
|
left: 0;
|
|
width: 60%;
|
|
}
|
|
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_5.png);
|
|
transform: rotate(180deg);
|
|
left: -12vw;
|
|
@media (min-width: $breakpoint_desktop) {
|
|
left: -20vw;
|
|
top: -5vh;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
top:0;
|
|
}
|
|
}
|
|
|
|
.ornements_consultation_right {
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
height: 20vh;
|
|
width: 30vw;
|
|
bottom: -8vh;
|
|
right: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
> div {
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
> div:first-of-type {
|
|
background-image: url(../assets/formes/forme_1.png);
|
|
transform: rotate(-90deg);
|
|
width: 80%;
|
|
height: 80%;
|
|
right: -8vw;
|
|
bottom: -2vh;
|
|
@media (min-width: $breakpoint_desktop) {
|
|
right: -3vw;
|
|
bottom: 6vh;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
> div:nth-of-type(2) {
|
|
background-image: url(../assets/formes/forme_3.png);
|
|
transform: rotate(180deg);
|
|
right: -4vw;
|
|
width: 100%;
|
|
@media (min-width: $breakpoint_tablet) {
|
|
width: 30%;
|
|
bottom: 3vh;
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
transform: none;
|
|
width: 60%;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
bottom: unset;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
} |