146 lines
3.5 KiB
CSS
146 lines
3.5 KiB
CSS
.block-dernieres-dynamiques {
|
|
@apply bg-primary text-white px-12 xl:px-24 pt-20;
|
|
overflow: hidden;
|
|
|
|
*:not(.article-card *) {
|
|
@apply text-white;
|
|
}
|
|
|
|
&__inner {
|
|
@apply max-w-screen-2xl mx-auto;
|
|
}
|
|
|
|
&__header {
|
|
@apply flex items-end justify-between gap-8 uppercase text-4xl mb-12;
|
|
|
|
.block-title {
|
|
@apply flex grow items-end justify-between gap-8 uppercase text-4xl;
|
|
span {
|
|
@apply block shrink-0;
|
|
}
|
|
&:after {
|
|
@apply w-full z-50 bg-white block mb-2;
|
|
height: 1px;
|
|
content: ' ';
|
|
}
|
|
}
|
|
.header-link {
|
|
@apply text-lg font-bold 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-xl;
|
|
}
|
|
.block-dernieres-dynamiques__issue-reading-time {
|
|
line-height: 27px;
|
|
}
|
|
}
|
|
|
|
&__issue-title {
|
|
@apply text-7xl uppercase pb-12;
|
|
line-height: 1.1;
|
|
}
|
|
&__issue-content-wrapper {
|
|
@apply grid gap-12 2xl:gap-24 pb-24;
|
|
|
|
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: 94%;
|
|
width: 104%;
|
|
transform: perspective(800px) rotateY(10deg)
|
|
skewX(1deg) rotateZ(4deg) rotateX(1deg) scale(0.98)
|
|
translateY(-2px);
|
|
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;
|
|
|
|
img {
|
|
width: calc(100% - 42px);
|
|
height: calc(100% - 42px);
|
|
left: 21px;
|
|
top: 21px;
|
|
object-fit: cover;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
&__issue-description-title {
|
|
@apply uppercase nunito text-xl pb-4 font-bold;
|
|
letter-spacing: 4px;
|
|
}
|
|
&__issue-description {
|
|
@apply text-xl;
|
|
}
|
|
|
|
.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);
|
|
transform: translateY(100px) translateX(-50%)
|
|
perspective(800px) skewX(1deg) rotateZ(-2deg)
|
|
rotateY(-4deg) scaleX(1.98);
|
|
}
|
|
&__title {
|
|
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;
|
|
}
|
|
&__show-all {
|
|
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito text-primary text-center mx-auto block mt-12;
|
|
}
|
|
}
|
|
}
|