carhop__carhop-theme__DEV/resources/css/blocks/revues-precedentes.css
Antoine M 8266e783d5
All checks were successful
continuous-integration/drone/push Build is passing
STYLE Refining heading coherence
2025-10-09 15:57:11 +02:00

133 lines
3.1 KiB
CSS

.block-revues-precedentes {
@apply bg-carhop-blue-50 py-20;
.block-revues-precedentes__header {
}
.swiper-actions-wrapper,
.swiper-pagination-fraction,
.swiper-pagination {
@apply px-20;
}
.swiper-wrapper {
@apply mb-16;
}
.swiper-actions-wrapper {
@apply md:flex justify-between items-center gap-4;
#discover-all-revues {
@apply internal-link-with-icon;
@apply font-bold text-lg;
}
}
&__inner {
@apply max-w-screen-2xl mx-auto;
}
&__header {
@apply flex flex-col justify-center items-center gap-4;
.block-title {
@apply text-lg mb-3 font-bold tracking-bigbig uppercase nunito;
}
.block-subtitle {
@apply text-5xl font-normal uppercase;
}
}
&__slider-content {
@apply py-16 pt-8 md:pt-16 2xl:pt-32 pb-0;
}
.card-revue {
@apply flex flex-col lg:grid lg:grid-cols-2 gap-y-2 md:gap-y-6 2xl:gap-y-16 pb-1 2xl:pb-12 gap-x-12 2xl:gap-x-24 lg:px-20 px-4;
@screen lg {
grid-template-columns: 65fr 35fr;
}
.content-meta {
@apply col-span-2 w-full max-w-full mb-0 text-primary;
.issue-number-group {
@apply flex gap-2;
}
.label {
@apply text-primary sr-only;
}
@apply flex items-center gap-2;
.value {
@apply bg-primary text-white p-3 font-medium uppercase;
}
}
&__image {
@apply w-full h-full object-cover;
}
&__content {
@apply mx-0;
h4.title {
@apply uppercase text-3xl md:text-5xl lg:text-5xl font-normal pb-8;
line-height: 1.02;
}
h5.edito-title {
@apply text-2xl font-bold uppercase pb-8;
}
}
&__issue-thumbnail-wrapper {
@apply relative w-full;
.card-background {
@apply absolute border-primary border bg-white top-20 left-8;
width: 104%;
height: 300px;
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
rotateX(1deg) scale(0.98) translateY(-40px);
z-index: 0;
&::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
z-index: 0;
}
}
}
&__issue-thumbnail,
.card-background {
height: 300px;
}
&__issue-thumbnail {
@apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
position: relative;
z-index: 10;
height: 300px;
img {
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
object-fit: cover;
position: relative;
z-index: 2;
}
}
&__post-details {
@apply md:flex gap-8 pt-12;
.label {
@apply uppercase font-bold tracking-bigbig !mb-0 text-primary;
}
.card-revue__parution {
@apply text-primary;
}
}
}
}