94 lines
1.8 KiB
SCSS
94 lines
1.8 KiB
SCSS
.page-container--thematiques {
|
|
.inner-content {
|
|
@apply pt-40;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-9xl;
|
|
}
|
|
|
|
--swiper-pagination-bullet-horizontal-gap: 8px;
|
|
|
|
.swiper-pagination-bullet {
|
|
@apply bg-construction;
|
|
transition: scale 0.3s ease-in-out;
|
|
opacity: 0.9;
|
|
scale: 1.2;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
border: 2px solid white;
|
|
scale: 1.5;
|
|
opacity: 1;
|
|
}
|
|
.swiper-pagination {
|
|
bottom: -120px !important;
|
|
}
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
@apply bg-construction p-2 rounded-full w-auto;
|
|
aspect-ratio: 1/1;
|
|
&:after {
|
|
@apply w-8 h-8 block bg-contain bg-no-repeat bg-center;
|
|
content: "";
|
|
background-image: url("../../img/icons/arrow-next.svg");
|
|
}
|
|
}
|
|
.swiper-button-prev {
|
|
left: -140px;
|
|
&:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.swiper-button-next {
|
|
right: -140px;
|
|
}
|
|
.swiper-container {
|
|
@apply mt-32 pb-24 w-full mx-auto overflow-visible;
|
|
max-width: 1200px;
|
|
width: calc(100% - 280px);
|
|
|
|
.swiper-slide {
|
|
@apply h-auto text-center;
|
|
}
|
|
}
|
|
|
|
.game-slide {
|
|
overflow: visible !important;
|
|
&__cover {
|
|
@apply mx-auto border-white border-solid bg-white;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border-width: 28px;
|
|
aspect-ratio: 18/9;
|
|
|
|
img {
|
|
@apply h-full w-full object-cover object-center;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
@apply my-0 absolute top-0 left-1/2 bg-construction px-2 py-1;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
transition: transform 0.3s ease-in-out;
|
|
&:hover {
|
|
transform: translateX(-50%) scale(1.2);
|
|
}
|
|
a {
|
|
@apply text-slate-900 text-4xl text-zuume no-underline block;
|
|
}
|
|
}
|
|
|
|
.cta--play {
|
|
@apply absolute bottom-0 left-1/2;
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
}
|
|
|
|
.swiper-slide:not(.swiper-slide-active) {
|
|
opacity: 0.7;
|
|
.cta--play {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|