diff --git a/resources/css/blocks/dernieres-dynamiques.css b/resources/css/blocks/dernieres-dynamiques.css new file mode 100644 index 0000000..5329509 --- /dev/null +++ b/resources/css/blocks/dernieres-dynamiques.css @@ -0,0 +1,115 @@ +.block-dernieres-dynamiques { + @apply bg-carhop-orange-50 px-12 xl:px-24 py-32; + &__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-primary 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-primary 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-6xl uppercase pb-12; + line-height: 1.1; + } + &__issue-content-wrapper { + @apply grid gap-12 2xl:gap-24 pb-12; + + grid-template-columns: 61.8fr 38.2fr; + } + &__issue-content { + } + &__issue-thumbnail-wrapper { + @apply relative; + .card-background { + @apply absolute inset-0 border-primary border bg-white top-5 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% - 32px); + height: calc(100% - 32px); + left: 16px; + top: 16px; + + z-index: 0; + } + } + } + &__issue-thumbnail { + @apply bg-white border-primary border relative; + transform: perspective(800px) rotateY(10deg) skewX(2deg); + height: 300px; + position: relative; + z-index: 10; + + img { + height: 100%; + object-fit: cover; + position: relative; + z-index: 2; + } + } + + &__issue-description { + @apply text-xl; + } + + .related-articles { + &__title { + @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito; + } + } +}