160 lines
3.9 KiB
CSS
160 lines
3.9 KiB
CSS
.block-dernieres-dynamiques {
|
|
@apply bg-primary text-white pt-20 px-4 md:px-16;
|
|
/* overflow: visible !important; */
|
|
overflow: hidden !important;
|
|
|
|
&__inner {
|
|
@apply max-w-screen-2xl mx-auto;
|
|
}
|
|
|
|
&__header {
|
|
@apply flex flex-wrap items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-12;
|
|
|
|
.block-title {
|
|
@apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl;
|
|
span {
|
|
@apply block shrink-0;
|
|
}
|
|
&:after {
|
|
@apply w-full z-20 bg-white block mb-2;
|
|
height: 1px;
|
|
content: ' ';
|
|
}
|
|
}
|
|
.header-link {
|
|
@apply text-lg font-medium nunito flex items-center gap-3;
|
|
text-transform: none;
|
|
span {
|
|
@apply pt-1;
|
|
}
|
|
|
|
svg {
|
|
@apply w-8 h-8;
|
|
transition: transform 0.3s ease-in-out;
|
|
path,
|
|
circle {
|
|
@apply stroke-white stroke-2;
|
|
}
|
|
}
|
|
&:hover {
|
|
svg {
|
|
@apply rotate-45 translate-x-2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__issue-info {
|
|
@apply flex items-end gap-6 mb-10;
|
|
|
|
.block-dernieres-dynamiques__issue-type::before {
|
|
@apply content-[''] mr-2 h-3 w-3 rounded-full bg-carhop-orange-400 inline-block;
|
|
}
|
|
.block-dernieres-dynamiques__issue-type {
|
|
@apply font-bold text-lg;
|
|
}
|
|
.block-dernieres-dynamiques__issue-reading-time {
|
|
line-height: 27px;
|
|
}
|
|
}
|
|
|
|
&__issue-title {
|
|
@apply lg:text-5xl text-4xl uppercase pb-12;
|
|
line-height: 1.2;
|
|
font-weight: 100 !important;
|
|
}
|
|
&__issue-content-wrapper {
|
|
@apply grid gap-12 lg:gap-36 pb-24 overflow-hidden lg:overflow-visible;
|
|
@screen md {
|
|
grid-template-columns: 61.8fr 38.2fr;
|
|
}
|
|
}
|
|
|
|
&__issue-thumbnail-wrapper {
|
|
@apply relative;
|
|
.card-background {
|
|
@apply absolute border-primary border bg-white top-20 left-8;
|
|
height: 330px;
|
|
|
|
width: 104%;
|
|
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg) rotateX(1deg)
|
|
scale(0.95) translateY(-2px) translateX(-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 {
|
|
@apply bg-white border-primary border relative;
|
|
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
|
|
height: 330px;
|
|
position: relative;
|
|
z-index: 10;
|
|
transform: translateX(-30px);
|
|
|
|
img {
|
|
width: calc(100% - 42px);
|
|
height: calc(100% - 42px);
|
|
left: 21px;
|
|
top: 21px;
|
|
object-fit: cover;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&__issue-description,
|
|
&__issue-parution {
|
|
@apply mb-12;
|
|
|
|
h4.title {
|
|
@apply uppercase nunito text-lg font-bold pb-2 tracking-bigbig;
|
|
}
|
|
}
|
|
|
|
&__issue-description {
|
|
@apply text-lg;
|
|
}
|
|
|
|
.dernieres-dynamiques-swiper {
|
|
@apply overflow-visible;
|
|
}
|
|
.related-articles {
|
|
@apply relative pb-8;
|
|
|
|
& > * {
|
|
@apply relative z-10;
|
|
}
|
|
|
|
&:after {
|
|
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen left-1/2 -translate-x-1/2;
|
|
z-index: 0;
|
|
/* opacity: 0.5; */
|
|
top: 100px;
|
|
height: calc(100% - 150px);
|
|
@screen lg {
|
|
transform: translateY(100px) translateX(-50%) perspective(800px) skewX(1deg)
|
|
rotateZ(-2deg) rotateY(-4deg) scaleX(1.98);
|
|
}
|
|
}
|
|
&__title {
|
|
@apply uppercase nunito text-lg font-bold pb-8 tracking-bigbig;
|
|
}
|
|
&__show-all {
|
|
@apply text-base font-extrabold uppercase pb-8 tracking-bigbig nunito text-primary text-center mx-auto block mt-12;
|
|
}
|
|
}
|
|
|
|
:is(p, span, h1, h2, h3, h4, h5, h6):not(.article-card *) {
|
|
@apply text-white;
|
|
}
|
|
}
|