hero style has component
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
This commit is contained in:
Julie Blanc
parent
239f018a37
commit
0cd10384c0
5 changed files with 255 additions and 252 deletions
|
|
@ -507,6 +507,122 @@ button:disabled {
|
|||
fill: var(--grey-100);
|
||||
}
|
||||
|
||||
#hero {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
}
|
||||
#hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing) * 0.5) var(--padding-body);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#hero figcaption {
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
}
|
||||
#hero figure {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#hero figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/1;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
#hero .swiper-slide {
|
||||
position: relative;
|
||||
}
|
||||
#hero .swiper-button-prev, #hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 32px;
|
||||
--swiper-navigation-size: 32px;
|
||||
opacity: 0.8;
|
||||
top: calc(450vw - var(--swiper-navigation-size) * 0.5);
|
||||
margin-top: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#hero .swiper-button-prev, #hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 15px;
|
||||
--swiper-navigation-size: 15px;
|
||||
}
|
||||
}
|
||||
#hero .swiper-button-prev svg, #hero .swiper-button-next svg {
|
||||
color: white;
|
||||
}
|
||||
#hero .swiper-pagination {
|
||||
position: static;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
padding: 0 var(--padding-body);
|
||||
text-align: center;
|
||||
}
|
||||
#hero .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
#hero .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
#hero .player-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
aspect-ratio: 2/1;
|
||||
}
|
||||
#hero .player-container .extract, #hero .player-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
#hero .player-container .video-full {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
#hero .player-container .video-full iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#hero .player-container #hero-play-video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#hero .player-container #hero-play-video .btn--bold {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 1ch;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#hero .player-container #hero-play-video .btn--bold:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#hero .player-container #hero-play-video .text {
|
||||
color: black;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
#hero .player-container #hero-play-video svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: black;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.form__newsletter {
|
||||
--size: 24px;
|
||||
position: relative;
|
||||
|
|
@ -1449,121 +1565,6 @@ body main {
|
|||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing) * 0.5) var(--padding-body);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figure {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/1;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .swiper-slide {
|
||||
position: relative;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .swiper-button-prev, [data-template=investigation-summary] main #hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 32px;
|
||||
--swiper-navigation-size: 32px;
|
||||
opacity: 0.8;
|
||||
top: calc(450vw - var(--swiper-navigation-size) * 0.5);
|
||||
margin-top: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigation-summary] main #hero .swiper-button-prev, [data-template=investigation-summary] main #hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 15px;
|
||||
--swiper-navigation-size: 15px;
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .swiper-button-prev svg, [data-template=investigation-summary] main #hero .swiper-button-next svg {
|
||||
color: white;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .swiper-pagination {
|
||||
position: static;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
padding: 0 var(--padding-body);
|
||||
text-align: center;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
aspect-ratio: 2/1;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container .extract, [data-template=investigation-summary] main #hero .player-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container .video-full {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container .video-full iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container #hero-play-video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container #hero-play-video .btn--bold {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 1ch;
|
||||
opacity: 0.8;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container #hero-play-video .btn--bold:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container #hero-play-video .text {
|
||||
color: black;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero .player-container #hero-play-video svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: black;
|
||||
opacity: 0.8;
|
||||
}
|
||||
[data-template=investigation-summary] main #nav--page ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue