148 lines
4.4 KiB
SCSS
148 lines
4.4 KiB
SCSS
.banner-header-wrapper.story::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-story.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.ranges::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-ranges.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.products::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-products.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.engagments::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-engagments.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.btob::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-b-to-b.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.breeder::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-breeder.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.adn::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-adn.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.ideas::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-ideas.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.tips::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-tips.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.recipes::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-recipes.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.news::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-news.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.contact::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-contact.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.search-summary::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-contact.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.search::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-contact.jpg");
|
|
}
|
|
|
|
.banner-header-wrapper.legals::before {
|
|
background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-legals.jpg");
|
|
}
|
|
.banner-wrapper { background-color: $color-bg-banner; }
|
|
|
|
.banner-wrapper .picture-wrapper { width: 295px; }
|
|
|
|
.banner-wrapper img {
|
|
border: 1px solid;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
translate: -50% 0;
|
|
}
|
|
|
|
.banner-wrapper img:nth-child(1) {
|
|
@include size(91px);
|
|
|
|
top: 21px;
|
|
left: 34%;
|
|
}
|
|
|
|
.banner-wrapper img:nth-child(2) {
|
|
@include size(75px);
|
|
|
|
top: 42px;
|
|
left: 58%;
|
|
}
|
|
|
|
.banner-wrapper img:nth-child(3) {
|
|
@include size(97px);
|
|
|
|
top: -28px;
|
|
left: 73%;
|
|
}
|
|
|
|
.banner-wrapper img:nth-child(4) {
|
|
@include size(112px);
|
|
|
|
top: -56px;
|
|
left: 50%;
|
|
}
|
|
|
|
.banner-wrapper svg { @include size(38px); }
|
|
.banner-wrapper svg path { transition: all 0.3s ease-in-out; }
|
|
|
|
.social-wrapper svg {
|
|
.bg-lin { fill: $blanc; }
|
|
.img-lin { fill: $color-bg-banner; }
|
|
.bg-yt { fill: $blanc; }
|
|
.img-yt { fill: $color-bg-banner; }
|
|
.bg-in { fill: $blanc; }
|
|
.img-in { fill: $color-bg-banner; }
|
|
}
|
|
|
|
.social-wrapper svg:first-of-type:hover {
|
|
.bg-lin { fill: $bleu2; }
|
|
.img-lin { fill: $blanc; }
|
|
}
|
|
|
|
.social-wrapper svg:nth-of-type(1):hover {
|
|
.bg-yt { fill: $rouge; }
|
|
.img-yt { fill: $blanc; }
|
|
}
|
|
|
|
.social-wrapper svg:last-of-type:hover {
|
|
.bg-in { fill: $orange; }
|
|
.img-in { fill: $blanc; }
|
|
}
|
|
|
|
.banner-header-wrapper { height: 300px; }
|
|
|
|
.banner-header-wrapper::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
filter: brightness(0.7);
|
|
}
|
|
|
|
.banner-header-wrapper .breadcrumb-wrapper {
|
|
z-index: 1;
|
|
}
|
|
|
|
.banner-header-wrapper .text-header {
|
|
$nblines: 6;
|
|
|
|
@include txt-overflow-fade($nblines, 1rem, var(--bs-body-line-height));
|
|
}
|