2188 lines
52 KiB
SCSS
Vendored
2188 lines
52 KiB
SCSS
Vendored
.sub_header {
|
|
width: 100%;
|
|
margin-top: $menuBaseHeight;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
position: relative;
|
|
|
|
@media print {
|
|
margin-top: inherit !important;
|
|
}
|
|
|
|
& .content {
|
|
position: relative;
|
|
|
|
& .sub-content {
|
|
position: absolute;
|
|
right: 20%;
|
|
top: 5%;
|
|
|
|
@media screen and (max-width: $large_screen) {
|
|
right: 2%;
|
|
}
|
|
|
|
@include max-width($tablet) {
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
top: 80%;
|
|
}
|
|
|
|
& > a {
|
|
font-family: "Catamaran-Black";
|
|
font-size: 1.2em;
|
|
color: white;
|
|
|
|
& > span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
& > i {
|
|
position: relative;
|
|
vertical-align: middle;
|
|
padding-right: 10px;
|
|
font-size: 1.3em;
|
|
|
|
& .notifications-count {
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
top: -10px;
|
|
right: 30%;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
border-radius: 50%;
|
|
background-color: #e43b4e;
|
|
font-size: 0.5em;
|
|
font-family: "Catamaran-Bold";
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
& .size-icon {
|
|
font-size: 1.8em;
|
|
padding-right: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .text {
|
|
position: absolute;
|
|
top: 25%;
|
|
right: 10%;
|
|
width: 45%;
|
|
text-align: right;
|
|
|
|
& .catch {
|
|
position: relative;
|
|
text-align: right;
|
|
margin-bottom: 10px;
|
|
font-size: 3.2em;
|
|
font-family: "CreamyScriptRegular";
|
|
color: #02621e;
|
|
}
|
|
|
|
& .title {
|
|
position: relative;
|
|
text-align: right;
|
|
text-decoration: none;
|
|
line-height: 1em;
|
|
margin-bottom: 35px;
|
|
font-size: 7em;
|
|
font-family: "Veneer";
|
|
color: #02621e;
|
|
|
|
@media screen and (max-width: $large_screen) {
|
|
font-size: 5em;
|
|
}
|
|
}
|
|
|
|
& .btn {
|
|
position: relative;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
font-family: "Veneer";
|
|
font-size: 1.4em;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
& picture {
|
|
& img {
|
|
width: 100%;
|
|
|
|
@include max-width($mobile) {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .club-promo {
|
|
position: absolute;
|
|
left: 20%;
|
|
bottom: 20%;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
font-size: 4.6em;
|
|
|
|
@media screen and (max-width: $large_screen) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& .img-club {
|
|
width: 100%;
|
|
|
|
@media screen and (max-width: $desktop) {
|
|
height: 350px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.entete-white {
|
|
&:after {
|
|
content: "";
|
|
background-image: url("~@/images/commun/entete-tracabilite.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center 101%;
|
|
background-size: 101% auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
background-image: url("~@/images/entete.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center 94%;
|
|
background-size: 101% auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 81px;
|
|
bottom: -5%;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
|
|
@include max-width($large_screen) {
|
|
background-position: center 88%;
|
|
}
|
|
@include max-width($desktop) {
|
|
background-position: center 84%;
|
|
}
|
|
@include max-width($tablet) {
|
|
background-image: none !important;
|
|
& > h1 {
|
|
font-size: 5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&_onsengage,
|
|
&_breedingPage,
|
|
&_actu,
|
|
&_brand,
|
|
&_saga,
|
|
&_ocb,
|
|
&_danslespres,
|
|
&_onsengage {
|
|
width: 100%;
|
|
height: 345px;
|
|
margin-top: 70px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.sub_header.home {
|
|
& .content {
|
|
& .text {
|
|
width: 90%;
|
|
text-align: center;
|
|
top: 55%;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
|
|
& .catch {
|
|
font-size: 2.8em;
|
|
}
|
|
|
|
& .title {
|
|
width: 100%;
|
|
font-size: 3em;
|
|
}
|
|
|
|
& .btn {
|
|
display: inline;
|
|
text-align: center;
|
|
font-size: 2.4em;
|
|
border-radius: 20px;
|
|
padding: 3px 20px 7px;
|
|
}
|
|
}
|
|
& picture {
|
|
& img {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
@include min-width($mobile) {
|
|
min-height: 15rem;
|
|
.text {
|
|
width: 40%;
|
|
text-align: right;
|
|
top: 5%;
|
|
right: 1rem;
|
|
font-size: 0.8em;
|
|
transform: inherit;
|
|
left: inherit;
|
|
}
|
|
}
|
|
|
|
@include min-width($mobile + 160px) {
|
|
.text {
|
|
top: 15%;
|
|
font-size: 0.85em;
|
|
}
|
|
}
|
|
@include min-width($tablet) {
|
|
.text {
|
|
top: 15%;
|
|
font-size: 0.85em;
|
|
}
|
|
}
|
|
@include min-width($desktop - 100px) {
|
|
.text {
|
|
right: 1.2rem;
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
@include min-width($big_screen) {
|
|
.text {
|
|
top: 21%;
|
|
right: 2rem;
|
|
font-size: 1.4em;
|
|
}
|
|
}
|
|
@include min-width($large_screen) {
|
|
.text {
|
|
top: 21%;
|
|
right: 3rem;
|
|
font-size: 1.6em;
|
|
}
|
|
}
|
|
|
|
// @include max-width($mobile) {
|
|
// & .text {
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// width: 100%;
|
|
// text-align: center;
|
|
|
|
// & .catch {
|
|
// font-size: 3.5em;
|
|
// text-align: center;
|
|
// }
|
|
|
|
// & .title {
|
|
// width: 100%;
|
|
// text-align: center;
|
|
// font-size: 3.5em;
|
|
// }
|
|
|
|
// & .btn {
|
|
// display: inline;
|
|
// text-align: center;
|
|
// font-size: 1.4em;
|
|
// border-radius: 20px;
|
|
// padding: 3px 20px 7px;
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
|
|
.sub_header_club_index {
|
|
margin-top: $menuBaseHeight;
|
|
}
|
|
|
|
.sub_header_club {
|
|
margin-top: $menuBaseHeight;
|
|
padding-bottom: 1rem;
|
|
|
|
& .content {
|
|
// padding-bottom: 2rem;
|
|
|
|
& .img-club {
|
|
height: 28rem;
|
|
|
|
@include max-width($tablet) {
|
|
height: 20rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .title-club-account {
|
|
position: absolute;
|
|
top: 9rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
@include max-width($tablet) {
|
|
top: 3rem;
|
|
|
|
& > p {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 4.5em !important;
|
|
& img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > p {
|
|
font-family: "Veneer";
|
|
font-size: 5.5em;
|
|
color: white;
|
|
white-space: nowrap;
|
|
|
|
& > img {
|
|
width: 150px;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_club_departaimants {
|
|
min-height: 440px;
|
|
background-image: url("~@/images/club/bg-departaimant.png");
|
|
background-position: center top;
|
|
background-repeat: repeat;
|
|
background-size: auto;
|
|
position: relative;
|
|
margin-top: $menuBaseHeight;
|
|
|
|
& .content {
|
|
height: 100%;
|
|
& .logos {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
padding-top: 10vh;
|
|
margin-bottom: 12rem;
|
|
& picture {
|
|
margin-top: 1rem;
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
& img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-club {
|
|
position: absolute;
|
|
top: 35%;
|
|
left: 50%;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
transform: translateX(-50%) translateY(-50%);
|
|
font-size: inherit;
|
|
|
|
& .up {
|
|
color: #ffcd38;
|
|
font-family: "CreamyScriptRegular";
|
|
font-size: 15em;
|
|
line-height: 0.5em;
|
|
padding-left: 15px;
|
|
transform: rotate(-5deg);
|
|
|
|
@media screen and (max-width: $tablet - 120) {
|
|
font-size: 10em;
|
|
}
|
|
}
|
|
|
|
& .down {
|
|
color: white;
|
|
font-family: "Veneer";
|
|
font-size: 6em;
|
|
transform: skew(0, -5deg);
|
|
|
|
@media screen and (max-width: $tablet - 120) {
|
|
font-size: 5em;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
content: url("~@/images/club/logo-club-block__title_before.png");
|
|
position: relative;
|
|
top: -13px;
|
|
|
|
@include max-width($mobile) {
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: url("~@/images/club/logo-club-block__title_after.png");
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.sub_header_poultry_page {
|
|
width: 100%;
|
|
margin-top: 5rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: auto;
|
|
height: 50vw;
|
|
max-height: 29.33rem;
|
|
min-height: 21rem;
|
|
background-image: url("~@/images/marque/marque_background.jpg");
|
|
|
|
&::after {
|
|
content: "";
|
|
background-image: none;
|
|
z-index: 0;
|
|
background-repeat: no-repeat;
|
|
background-position: initial;
|
|
background-size: contain;
|
|
position: inherit;
|
|
}
|
|
|
|
.content-poultry {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
& .title {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
font-size: 6.5em;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
& img {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
|
|
@include min-width($large_screen) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@include max-width($large_screen) {
|
|
background-position: center 88%;
|
|
}
|
|
@include max-width($desktop) {
|
|
background-position: center 84%;
|
|
}
|
|
@include max-width($tablet) {
|
|
background-image: none;
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_products {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 43em;
|
|
|
|
&:after {
|
|
background: none;
|
|
}
|
|
|
|
@include max-width($desktop) {
|
|
height: 40em;
|
|
}
|
|
@include max-width($tablet) {
|
|
height: 35em;
|
|
& .title {
|
|
margin: 12em 0 0 !important;
|
|
& > h1 {
|
|
font-size: 6em !important;
|
|
}
|
|
}
|
|
}
|
|
@include max-width($mobile) {
|
|
height: 30em;
|
|
& .title {
|
|
margin: 9em 0 0 !important;
|
|
& > h1 {
|
|
font-size: 5em !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 210px 0 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 7em;
|
|
font-family: "Veneer";
|
|
display: inline-block;
|
|
padding: 0 0.3em;
|
|
}
|
|
}
|
|
|
|
& img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.header_product_vegetal {
|
|
background-image: url("~@/images/produit/bandeau-produit-desktop-vegetal.jpg") !important;
|
|
}
|
|
|
|
.sub_header_product {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 640px;
|
|
overflow: inherit !important;
|
|
|
|
background-image: url("~@/images/produit/bandeau-produit-desktop.jpg");
|
|
background-position: center bottom;
|
|
background-size: cover;
|
|
|
|
&:after {
|
|
background: none !important;
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding-top: 11vh;
|
|
|
|
@include max-width($tablet) {
|
|
height: inherit !important;
|
|
}
|
|
|
|
.set-cart {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.set-cart.hide {
|
|
display: none !important;
|
|
}
|
|
|
|
.product-img {
|
|
text-align: center;
|
|
display: none;
|
|
object-fit: contain;
|
|
& > img {
|
|
object-fit: contain;
|
|
@include max-width(328px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .aside {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 7vw;
|
|
margin-left: 13vw;
|
|
z-index: 15;
|
|
height: 38em;
|
|
|
|
@include max-width($large_screen) {
|
|
margin-right: 3vw !important;
|
|
}
|
|
@include max-width($big_screen) {
|
|
margin-left: 6vw !important;
|
|
}
|
|
@include max-width($desktop) {
|
|
margin-right: 0vw !important;
|
|
margin-left: 0vw !important;
|
|
}
|
|
|
|
@include max-width($tablet) {
|
|
display: none;
|
|
}
|
|
|
|
& img {
|
|
width: 300px;
|
|
}
|
|
& > span,
|
|
> a {
|
|
font-family: "Catamaran-Black";
|
|
font-size: 1.5em;
|
|
text-transform: uppercase;
|
|
line-height: 18px;
|
|
color: $color5;
|
|
display: flex;
|
|
cursor: pointer;
|
|
|
|
& [data-icon="cart-plus"],
|
|
[data-icon="cart-arrow-down"] {
|
|
float: left;
|
|
display: block;
|
|
font-size: 2em;
|
|
margin-right: 10px;
|
|
margin-top: 7px;
|
|
color: $color5;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .infos {
|
|
width: 660px;
|
|
@include max-width($tablet) {
|
|
width: 100%;
|
|
padding: 0 2em;
|
|
padding-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
& h1 {
|
|
font-size: 5.5em;
|
|
line-height: 1;
|
|
color: $color5;
|
|
font-family: "Veneer";
|
|
}
|
|
& h2 {
|
|
line-height: 1;
|
|
font-size: 4em;
|
|
font-family: "CreamyScriptRegular";
|
|
margin-bottom: 18px;
|
|
text-decoration: none;
|
|
color: $color5;
|
|
}
|
|
& .rsmBackLink {
|
|
margin-bottom: 0.799rem;
|
|
& a {
|
|
font-family: "CreamyScriptRegular";
|
|
font-size: 2.666rem;
|
|
text-decoration: underline;
|
|
color: $engagementDarkGreen;
|
|
}
|
|
}
|
|
& .tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 60px;
|
|
@include max-width($tablet) {
|
|
justify-content: center;
|
|
}
|
|
& p {
|
|
border-radius: 1.999rem;
|
|
font-family: "CreamyScriptRegular";
|
|
color: white;
|
|
font-size: 2.4em;
|
|
padding: 0 13px;
|
|
text-align: center;
|
|
margin: 0.1em;
|
|
flex: 0 0 auto;
|
|
|
|
&.green {
|
|
color: $vegetalTitle;
|
|
border: 1px solid $vegetalTitle;
|
|
}
|
|
&.orange {
|
|
background-color: $orange;
|
|
}
|
|
&.blue {
|
|
color: $color3;
|
|
border: 1px solid $color3;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .pictos {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
@include max-width($tablet) {
|
|
justify-content: center;
|
|
}
|
|
|
|
& > img {
|
|
margin-right: 0.3rem;
|
|
margin-top: 0.2rem;
|
|
max-width: 8rem;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
& .infos {
|
|
width: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-top: 0.799rem;
|
|
|
|
& > li {
|
|
line-height: 27px;
|
|
font-family: "CreamyScriptRegular";
|
|
color: $color5;
|
|
font-size: 3em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
&:before {
|
|
font-family: "icomoon";
|
|
color: $orange;
|
|
font-size: 0.5em;
|
|
display: inline-block;
|
|
padding: 0 14px 0;
|
|
content: "\e902";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .button-vegetal {
|
|
position: relative;
|
|
font-family: "Catamaran-Black";
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
border: 0;
|
|
border-radius: 27px;
|
|
display: inline-block;
|
|
padding: 6px 17px;
|
|
line-height: 1.3em;
|
|
font-size: 1.4em;
|
|
background-color: #a2e48a;
|
|
color: #006e43;
|
|
margin-top: 1.3em;
|
|
|
|
& > span {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
left: 43%;
|
|
bottom: -50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: $color6;
|
|
border-radius: 50%;
|
|
font-family: "icomoon";
|
|
color: white;
|
|
|
|
&:before {
|
|
content: "\e91b";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet) {
|
|
flex-direction: column;
|
|
padding-top: 1rem;
|
|
height: 780px;
|
|
.product-img {
|
|
display: block;
|
|
}
|
|
h1 {
|
|
font-size: 4em !important;
|
|
}
|
|
h2 {
|
|
font-size: 3em !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_opinsta {
|
|
width: 100%;
|
|
height: 36em;
|
|
background-image: url("~@/images/opinsta/FOND-HEADER-mobile.png");
|
|
background-color: #FFF;
|
|
|
|
.title {
|
|
font-size: 1rem;
|
|
margin-top: 7rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
|
|
h1 {
|
|
color: #FFF;
|
|
text-align: center;
|
|
font-family: "bourton";
|
|
// 33px
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h2 {
|
|
color: #FFF;
|
|
text-align: center;
|
|
font-family: "bakerie";
|
|
// 30px
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
@include min-width($tablet) {
|
|
height: 37em;
|
|
margin-top: 3rem;
|
|
background-color: $opinsta-yellow;
|
|
background-image: inherit;
|
|
|
|
&::after {
|
|
background-image: url("~@/images/entete-opinsta.svg");
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
right: 14%;
|
|
transform: translateX(14%);
|
|
width: 50%;
|
|
h1 {
|
|
// 45px
|
|
font-size: 3rem;
|
|
}
|
|
h2 {
|
|
// 35px
|
|
font-size: 2.333rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include min-width($desktop) {
|
|
height: 50em;
|
|
|
|
.title {
|
|
top: 1rem;
|
|
h1 {
|
|
// 60px
|
|
font-size: 4rem;
|
|
}
|
|
h2 {
|
|
// 50px
|
|
font-size: 3.333rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_mention {
|
|
background-image: url("~@/images/faq/faq_background.jpg");
|
|
width: 100%;
|
|
height: 44em;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 6rem 0 0;
|
|
width: 100%;
|
|
font-size: 1.2em;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
height: 34em;
|
|
& .title {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
height: 28em;
|
|
}
|
|
}
|
|
|
|
.sub_header_contact {
|
|
background-image: url("~@/images/faq/faq_background.jpg");
|
|
width: 100%;
|
|
height: 44em;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
@include min-width($desktop - 70px) {
|
|
&:after {
|
|
background-image: url("~@/images/commun/entete-contact.svg") !important;
|
|
background-size: 102% auto !important;
|
|
}
|
|
}
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 6rem 0 0;
|
|
width: 100%;
|
|
font-size: 1.2em;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
height: 34em;
|
|
& .title {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
height: 28em;
|
|
}
|
|
}
|
|
|
|
// sub header de référence
|
|
.sub_header_faq {
|
|
background-image: url("~@/images/faq/faq_background.jpg");
|
|
width: 100%;
|
|
height: 44em;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 6rem 0 0;
|
|
width: 100%;
|
|
font-size: 1.2em;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
height: 34em;
|
|
& .title {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
height: 28em;
|
|
}
|
|
}
|
|
|
|
.sub_header_auth {
|
|
background-image: url("~@/images/faq/faq_background.jpg");
|
|
width: 100%;
|
|
height: 44em;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 6rem 0 0;
|
|
width: 100%;
|
|
font-size: 1.2em;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
height: 34em;
|
|
& .title {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
height: 28em;
|
|
}
|
|
}
|
|
|
|
.sub_header_onsengage {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-image: url("~@/images/onsengage/onsengage_banner.jpg");
|
|
overflow: visible;
|
|
|
|
& .logo {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 4rem 0 0;
|
|
font-size: 1.2em;
|
|
z-index: 11;
|
|
}
|
|
|
|
// @include max-width($tablet + 60px) {
|
|
// height: 34em;
|
|
// & .title {
|
|
// font-size: 1em;
|
|
// }
|
|
// }
|
|
// @include max-width($tablet - 80px) {
|
|
// height: 28em;
|
|
// }
|
|
}
|
|
|
|
.sub_header_joinus {
|
|
width: 100%;
|
|
margin-top: 5rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
height: 50vw;
|
|
max-height: 26.33rem;
|
|
min-height: 21rem;
|
|
background-image: url("~@/images/joinus/nr_banner.jpg");
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 6rem 0 0;
|
|
width: 100%;
|
|
font-size: 1.2em;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
height: 34em;
|
|
& .title {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
height: 28em;
|
|
}
|
|
}
|
|
|
|
.sub_header_moment {
|
|
width: 100%;
|
|
height: 44rem;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
& .content {
|
|
height: 100%;
|
|
}
|
|
|
|
& .img-moment-header {
|
|
position: absolute;
|
|
top: 5rem;
|
|
left: 50%;
|
|
width: 23rem;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
& .title {
|
|
position: absolute;
|
|
top: 14rem;
|
|
left: 50%;
|
|
z-index: 20;
|
|
text-decoration: none;
|
|
line-height: 1em;
|
|
font-size: 5.6em;
|
|
padding: 10px 20px;
|
|
transform: translateX(-50%) rotate(-7deg);
|
|
font-family: "Veneer";
|
|
color: white;
|
|
}
|
|
|
|
& .img-cover {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
height: 34em;
|
|
& .title {
|
|
font-size: 3em;
|
|
}
|
|
& .img-cover {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_recipes {
|
|
background-image: url("~@/images/recette/recette_background.jpg");
|
|
width: 100%;
|
|
height: 44em;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
&:after {
|
|
background: none !important;
|
|
}
|
|
|
|
@include max-width($tablet + 60px) {
|
|
& .title {
|
|
font-size: 1.4em;
|
|
margin: 3rem 0 0 !important;
|
|
}
|
|
& .search-field {
|
|
margin: 21em 0 0 !important;
|
|
}
|
|
& .wrap-btn-right {
|
|
top: 36em !important;
|
|
right: inherit !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
left: 50% !important;
|
|
display: flex !important;
|
|
& a {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
& .title {
|
|
margin: 2rem 0 0 !important;
|
|
}
|
|
& .wrap-btn-right {
|
|
top: 39em !important;
|
|
}
|
|
}
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 4rem 0 0;
|
|
width: 100%;
|
|
font-size: 1.8em;
|
|
|
|
& h1 {
|
|
color: white;
|
|
text-align: center;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
|
|
.search-field {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 31em 0 0;
|
|
width: 70em;
|
|
z-index: 1;
|
|
|
|
@include max-width($big_screen) {
|
|
width: 70em;
|
|
input[type="text"] {
|
|
width: 15em !important;
|
|
}
|
|
}
|
|
@include max-width($desktop) {
|
|
width: 70em;
|
|
input[type="text"] {
|
|
width: 14em !important;
|
|
}
|
|
input[type="submit"] {
|
|
width: 8em !important;
|
|
}
|
|
}
|
|
@include max-width($tablet + 60px) {
|
|
width: 70em;
|
|
input[type="text"] {
|
|
width: 18em !important;
|
|
}
|
|
input[type="submit"] {
|
|
width: 8em !important;
|
|
}
|
|
}
|
|
@include max-width($tablet - 80px) {
|
|
width: 100%;
|
|
padding: 0 3em;
|
|
top: -5em;
|
|
|
|
input[type="text"] {
|
|
width: 100% !important;
|
|
}
|
|
input[type="submit"] {
|
|
width: 100% !important;
|
|
margin: 4em 0 !important;
|
|
}
|
|
.search {
|
|
width: 100% !important;
|
|
}
|
|
.checkbox-wrap {
|
|
position: absolute !important;
|
|
top: 8em;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 26em;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
width: 80%;
|
|
position: relative;
|
|
|
|
svg {
|
|
position: absolute;
|
|
left: 0.4em;
|
|
top: 0.6em;
|
|
font-size: 2.6em;
|
|
color: $color10;
|
|
}
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
float: left;
|
|
}
|
|
input[type="text"] {
|
|
color: $color10;
|
|
width: 18em;
|
|
height: 2em;
|
|
font-family: "CreamyScriptRegular";
|
|
font-size: 2.8em;
|
|
border-radius: 0.1em;
|
|
padding: 0 0.1em 0 2em;
|
|
}
|
|
input[type="submit"] {
|
|
background: $color5;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 1.5em;
|
|
font-family: "Catamaran-Black";
|
|
margin-left: 1.4em;
|
|
width: 11em;
|
|
height: 3.6em;
|
|
border-radius: 0.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.checkbox-wrap {
|
|
float: right;
|
|
margin: 1em 21em 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
& > label {
|
|
font-family: "CreamyScriptRegular";
|
|
font-size: 3em;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
&.label_video {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]:not(:checked),
|
|
input[type="checkbox"]:checked {
|
|
/* Cache la checkbox sans
|
|
la rendre invisible aux
|
|
lecteurs d'écran */
|
|
position: absolute;
|
|
left: 0;
|
|
opacity: 0.01;
|
|
}
|
|
|
|
input[type="checkbox"] + label {
|
|
position: relative; /* permet de positionner la checkbox */
|
|
padding-left: 2.3em; /* place pour la box */
|
|
font-size: 1.05em;
|
|
line-height: 1.7;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-family: "CreamyScriptRegular";
|
|
color: #fff;
|
|
top: -0.1em;
|
|
right: -1em;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 2em;
|
|
width: 2em;
|
|
background-color: #fff;
|
|
border-color: #e5dace;
|
|
border-radius: 0.2em;
|
|
border-style: solid;
|
|
border-width: 0.2em;
|
|
}
|
|
|
|
&:after {
|
|
position: absolute;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
color: #e5dace;
|
|
content: "\e902";
|
|
font-family: "icomoon";
|
|
font-size: 0.8em;
|
|
left: 0.5em;
|
|
top: 0.5em;
|
|
display: none;
|
|
}
|
|
}
|
|
input[type="checkbox"]:checked + label {
|
|
&:before {
|
|
border: $color5;
|
|
background: $color5;
|
|
}
|
|
&:after {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrap-btn-right {
|
|
position: absolute;
|
|
right: 10%;
|
|
top: 235px;
|
|
display: block;
|
|
|
|
@include max-width($large_screen + 20px) {
|
|
right: 1%;
|
|
}
|
|
|
|
@include max-width($mobile) {
|
|
.btn_cplm {
|
|
width: 5em !important;
|
|
padding: 0.2em 0 0 0.2em !important;
|
|
&:before {
|
|
font-size: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn_cplm {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
color: $color5;
|
|
display: block;
|
|
width: 7em;
|
|
height: 2.2em;
|
|
font-family: "CreamyScriptRegular";
|
|
font-size: 3em;
|
|
line-height: 0.8em;
|
|
margin-bottom: 0.5em;
|
|
border-radius: 0.2em;
|
|
padding: 0.2em 0 0 2.2em;
|
|
position: relative;
|
|
span {
|
|
font-family: "Veneer";
|
|
font-size: 1em;
|
|
display: block;
|
|
}
|
|
&.propose_recipe {
|
|
&:before {
|
|
content: "\e932";
|
|
color: $color5;
|
|
font-family: "icomoon" !important;
|
|
font-size: 1.3em;
|
|
position: absolute;
|
|
left: 0.35em;
|
|
top: 50%;
|
|
margin-top: -0.4em;
|
|
}
|
|
}
|
|
&.favorite_recipe {
|
|
&:before {
|
|
content: "\e909";
|
|
color: $color5;
|
|
font-family: "icomoon" !important;
|
|
font-size: 1em;
|
|
position: absolute;
|
|
left: 0.5em;
|
|
top: 50%;
|
|
margin-top: -0.4em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_recipe {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&.vegetal {
|
|
@include max-width($tablet + 100px) {
|
|
.recipeDetailHeader > h1 {
|
|
background-color: rgba(141, 209, 117, 0.902) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include max-width($tablet + 100px) {
|
|
flex-direction: column;
|
|
.recipeVisualHeader {
|
|
width: 100% !important;
|
|
height: 20rem !important;
|
|
}
|
|
.recipeDetailHeader {
|
|
width: 100% !important;
|
|
height: inherit !important;
|
|
padding-top: 1rem;
|
|
|
|
& > h1 {
|
|
margin-top: 0 !important;
|
|
position: absolute;
|
|
top: 4rem;
|
|
color: #fff !important;
|
|
background-color: rgba(67, 153, 152, 0.902);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
background: none !important;
|
|
}
|
|
|
|
h1 {
|
|
font-family: "Veneer";
|
|
}
|
|
h5 {
|
|
font-family: "CreamyScriptRegular";
|
|
color: $color5;
|
|
}
|
|
|
|
.recipeVisualHeader {
|
|
width: 50%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
@include max-width($tablet) {
|
|
height: 50%;
|
|
width: 100%;
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.recipeDetailHeader {
|
|
width: 50%;
|
|
background-color: $color1;
|
|
padding-bottom: 1rem;
|
|
|
|
@media print {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
h1 {
|
|
color: $color5;
|
|
margin-top: 2.5em;
|
|
margin-left: 0.5em;
|
|
margin-right: 0;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
font-size: 5.4em;
|
|
line-height: 1em;
|
|
width: 80%;
|
|
@include max-width($desktop) {
|
|
font-size: 4.5em !important;
|
|
}
|
|
@include max-width($tablet) {
|
|
margin: 0;
|
|
padding: 20px;
|
|
width: 100%;
|
|
}
|
|
@include max-width($mobile) {
|
|
font-size: 3.8em !important;
|
|
}
|
|
}
|
|
.recipeTags {
|
|
width: 80%;
|
|
margin-left: 2em;
|
|
margin-right: 0;
|
|
text-align: left;
|
|
display: flex;
|
|
margin-top: 2em;
|
|
@include max-width($tablet) {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
@media print {
|
|
display: none !important;
|
|
}
|
|
|
|
.recipeTag {
|
|
font-family: "CreamyScriptRegular";
|
|
background-color: $color6;
|
|
color: #fff;
|
|
font-size: 2em;
|
|
padding: 0.1em 0.8em;
|
|
margin-right: 0.5em;
|
|
border-radius: 1em;
|
|
}
|
|
}
|
|
|
|
.recipeIcons {
|
|
width: 80%;
|
|
margin-left: 2em;
|
|
display: flex;
|
|
margin-top: 6em;
|
|
|
|
& > div {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
h5 {
|
|
margin-top: 0.5em;
|
|
text-align: center;
|
|
font-size: 3em;
|
|
line-height: 0.8em;
|
|
@include max-width($desktop) {
|
|
font-size: 2.3em;
|
|
}
|
|
@include max-width($mobile) {
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-size: 4em;
|
|
color: $color5;
|
|
opacity: 0.6;
|
|
@include max-width($mobile) {
|
|
font-size: 3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.persons,
|
|
.preptime,
|
|
.cooktime {
|
|
border-right: 1px solid $color5;
|
|
}
|
|
|
|
.difficulty {
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 5em;
|
|
}
|
|
.medium i {
|
|
font-size: 3em;
|
|
@include max-width($mobile) {
|
|
font-size: 2.5em;
|
|
}
|
|
}
|
|
.hard i {
|
|
font-size: 2.5em;
|
|
@include max-width($mobile) {
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
.expert i {
|
|
font-size: 2em;
|
|
@include max-width($mobile) {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
@include max-width($tablet) {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
@media print {
|
|
margin-top: 0.4rem !important;
|
|
margin-bottom: 0.4rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vegetal {
|
|
.recipeDetailHeader {
|
|
background-color: $vegetalBodyBG;
|
|
h1 {
|
|
color: #fff;
|
|
}
|
|
.recipeTags {
|
|
@media print {
|
|
display: none !important;
|
|
}
|
|
.recipeTag {
|
|
background-color: $vegetalTitle;
|
|
}
|
|
}
|
|
.recipeIcons {
|
|
& > div {
|
|
h5 {
|
|
color: #fff;
|
|
font-family: "CreamyScriptRegular";
|
|
}
|
|
i {
|
|
color: $vegetalTitle;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.persons {
|
|
border-right: 1px solid transparent;
|
|
}
|
|
.preptime {
|
|
border-right: 1px solid transparent;
|
|
}
|
|
.cooktime {
|
|
border-right: 1px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Override breadcrumb position for recipes show
|
|
#app.recipeShow {
|
|
left: inherit !important;
|
|
@include min-width($tablet) {
|
|
#breadcrumb {
|
|
right: 50%;
|
|
left: inherit !important;
|
|
transform: translateX(103%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#kitchenSideSubHeader {
|
|
&:after {
|
|
content: "";
|
|
background-image: url("~@/images/entete.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center 100%;
|
|
background-size: 101% auto;
|
|
height: 101%;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
& .title {
|
|
font-size: 1.4em;
|
|
}
|
|
}
|
|
|
|
.sub_header_danslespres {
|
|
background-position: top;
|
|
background-image: url("~@/images/danslespres/EDLP-V4.jpg");
|
|
}
|
|
|
|
.sub_header_ocb {
|
|
background-position: center;
|
|
background-image: url("~@/images/ocb/oui-header.jpg");
|
|
}
|
|
|
|
.sub_header_ocb,
|
|
.sub_header_danslespres {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
& .content {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
& .text {
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 5;
|
|
@include max-width($tablet) {
|
|
top: 6em;
|
|
}
|
|
|
|
& .title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
text-decoration: none;
|
|
line-height: 1em;
|
|
font-size: 6.9em;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
white-space: nowrap;
|
|
@include max-width($big_screen) {
|
|
margin-top: 5rem;
|
|
font-size: 5.9em;
|
|
}
|
|
@include max-width($desktop) {
|
|
margin-top: 7rem;
|
|
font-size: 4.9em;
|
|
}
|
|
@include max-width($tablet) {
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
@include max-width($mobile + 160px) {
|
|
text-align: center;
|
|
margin-top: 0;
|
|
font-size: 3.9em;
|
|
white-space: unset;
|
|
}
|
|
}
|
|
|
|
& .btn {
|
|
position: relative;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
font-family: "catamaran-black";
|
|
font-size: 1.4em;
|
|
border-radius: 20px;
|
|
padding: 3px 20px 7px;
|
|
overflow: hidden;
|
|
background-color: #37b35b;
|
|
}
|
|
}
|
|
& img {
|
|
width: 12rem;
|
|
margin-left: 25px;
|
|
@include max-width($big_screen) {
|
|
width: 10rem !important;
|
|
}
|
|
@include max-width($desktop) {
|
|
width: 8rem !important;
|
|
}
|
|
@include max-width($tablet) {
|
|
width: 8rem !important;
|
|
}
|
|
@include max-width($mobile + 160px) {
|
|
width: 6rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
background-image: url("~@/images/entete-ocb.svg");
|
|
}
|
|
|
|
&.nogreen:after {
|
|
background-image: url("~@/images/entete.svg");
|
|
}
|
|
|
|
&.sub_testimony {
|
|
position: inherit;
|
|
|
|
&:after {
|
|
background-size: inherit;
|
|
background-position: inherit;
|
|
background-image: inherit;
|
|
position: inherit;
|
|
z-index: inherit;
|
|
}
|
|
}
|
|
|
|
& .entete-white {
|
|
content: "";
|
|
background-image: url("~@/images/entete.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center 101%;
|
|
background-size: 101% auto;
|
|
filter: brightness(0) invert(1);
|
|
height: 345px;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 9;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.sub_header_saga {
|
|
.video-bg {
|
|
background-color: #000;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
z-index: -100;
|
|
|
|
.video-opa {
|
|
opacity: 0.6;
|
|
}
|
|
.header-bg_video {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: auto;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
@include max-width(632px) {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.entete_content-saga {
|
|
background-image: url("~@/images/commun/entete.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center 94%;
|
|
background-size: 101% auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
h1 {
|
|
color: white;
|
|
margin-top: 81px;
|
|
text-align: center;
|
|
}
|
|
|
|
@include max-width($large_screen) {
|
|
background-position: center 88%;
|
|
}
|
|
@include max-width($desktop) {
|
|
background-position: center 84%;
|
|
}
|
|
@include max-width($tablet) {
|
|
background-image: none;
|
|
& > h1 {
|
|
font-size: 5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_brand {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-image: url("~@/images/marque/fond-bois.png");
|
|
|
|
.content-brand {
|
|
height: 100%;
|
|
width: 100%;
|
|
h1 {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
& .title {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
font-size: 6.5em;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
& img {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
|
|
@include min-width($large_screen) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_actu {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-image: url("~@/images/marque/marque_background.jpg");
|
|
|
|
.content-actu {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
& .title {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
font-size: 6.5em;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
& img {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
|
|
@include min-width($large_screen) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_breedingPage {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-image: url("~@/images/marque/marque_background.jpg");
|
|
|
|
.content-breeding {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
& .title {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
font-size: 6.5em;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 1;
|
|
@include max-width($desktop) {
|
|
font-size: 5.5em;
|
|
}
|
|
@include max-width($mobile) {
|
|
font-size: 4.5em;
|
|
}
|
|
}
|
|
|
|
& img {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
|
|
@include min-width($large_screen) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@include max-width($large_screen) {
|
|
background-position: center 88%;
|
|
}
|
|
@include max-width($desktop) {
|
|
background-position: center 84%;
|
|
}
|
|
@include max-width($tablet) {
|
|
background-image: none;
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_health_nutrition {
|
|
background-image: url("~@/images/sante-nutrition/nutrition_bg.jpg");
|
|
width: 100%;
|
|
margin-top: 70px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 26em;
|
|
|
|
@include min-width($mobile) {
|
|
height: 32em !important;
|
|
& .title {
|
|
margin: 10em 0 0 !important;
|
|
& div {
|
|
display: block;
|
|
font-size: 6em !important;
|
|
}
|
|
}
|
|
}
|
|
@include min-width($tablet) {
|
|
height: 36em !important;
|
|
& .title {
|
|
margin: 10em 0 0 !important;
|
|
& div {
|
|
font-size: 7em !important;
|
|
}
|
|
}
|
|
}
|
|
@include min-width($desktop) {
|
|
height: 40em !important;
|
|
& .title {
|
|
margin: 12em 0 0 !important;
|
|
& div {
|
|
font-size: 7.5em !important;
|
|
}
|
|
}
|
|
}
|
|
@include min-width($big_screen) {
|
|
height: 42em !important;
|
|
& .title {
|
|
margin: 13em 0 0 !important;
|
|
& div {
|
|
font-size: 7.5em !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
margin: 6em 0 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
|
|
& div {
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 5em;
|
|
font-family: "Veneer";
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub_header_register {
|
|
width: 100%;
|
|
margin-top: 70px;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
position: relative;
|
|
|
|
& .content {
|
|
position: relative;
|
|
|
|
& .text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
& .title {
|
|
position: relative;
|
|
text-align: right;
|
|
text-decoration: none;
|
|
line-height: 1em;
|
|
font-size: 4em;
|
|
font-family: "Veneer";
|
|
color: white;
|
|
white-space: nowrap;
|
|
|
|
@include min-width($tablet) {
|
|
font-size: 7em;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > img {
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
background-image: url("~@/images/entete.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center 101%;
|
|
background-size: 101% auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
}
|