studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

slider hero
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-08 14:53:08 +01:00
parent 6cf52a6703
commit 43e50ebc37
21 changed files with 578 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

72
assets/css/template/_investigation-summary.scss
View file

@ -6,12 +6,14 @@
header{
.page-type{
text-transform: uppercase;
// text-transform: uppercase;
color: var(--color-txt-light);
margin-bottom: calc(var(--spacing)*0.5);
}
h2{
font-size: var(--fs-xbig);
.page-title{
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
line-height: var(--leading-tight);
}
}
@ -36,24 +38,66 @@
color: var(--color-txt-light);
font-size: var(--fs-small);
@media #{$x-small}{ font-size: var(--fs-xsmall); }
padding-top: calc(var(--spacing)*0.5);
padding: calc(var(--spacing)*0.5) var(--padding-body);
padding-bottom: 0;
}
&.hero-video{
figure{
figure{
width: 100%;
position: relative;
img{
width: 100%;
img{
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
aspect-ratio: 16/9;
object-fit: cover;
}
}
.swiper-slide{
position: relative;
}
.swiper-button-prev, .swiper-button-next{
--swiper-navigation-sides-offset: 32px;
--swiper-navigation-size: 32px;
@media #{$x-small}{
--swiper-navigation-sides-offset: 15px;
--swiper-navigation-size: 15px;
}
opacity: 0.8;
// Position buttons relative to the image (16/9 aspect ratio)
// Calculate: 50% of image height = 50% * (9/16) of width
// Image is 100vw wide, so center at: (100vw * 9/16) / 2
top: calc(100vw * 9 / 16 / 2 - var(--swiper-navigation-size)*0.5);
margin-top: 0;
svg{ color: white; }
}
.swiper-pagination{
position: static;
margin-top: calc(var(--spacing)*0.5);
padding: 0 var(--padding-body);
text-align: center;
.swiper-pagination-bullet{
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
// opacity: 0.4;
}
.swiper-pagination-bullet-active{
background: var(--color-txt);
opacity: 0.8;
}
}
}
#nav--page{