homegrade_theme_production/template-blocks/home/show-thematiques/show-thematiques.css
2023-06-15 17:59:33 +02:00

87 lines
1.8 KiB
CSS
Executable File

.section-show-thematiques {
@apply pt-8 pb-32;
.thematiques-container {
@apply grid
grid-cols-3
gap-8
gap-y-32
max-w-screen-xl
mx-auto
pt-16;
}
.card-thematique {
@apply bg-white flex flex-col p-8 rounded-3xl relative;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
&__thumbnail {
@apply w-full self-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
&__title {
@apply text-lg font-bold pb-4;
}
&__descritpion {
}
&__cta {
@apply after:absolute
after:inset-0
font-bold
hover:opacity-100
pt-8
flex
items-center
justify-between;
transition: font-weight 0.3s ease-in-out;
.cta_arrow_button {
@apply block;
width: 50px;
height: 50px;
}
}
&:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
.cta_arrow_button {
opacity: 1;
}
}
&.card-acoustique:hover,
&.card-petites-coproprietes:hover {
.cta_arrow_button {
@apply filter-acoustique-coproprietes;
}
}
&.card-au-quotidien:hover,
&.card-isolation:hover {
.cta_arrow_button {
@apply filter-isolation-quotidien;
}
}
&.card-energies:hover,
&.card-urbanisme:hover {
.cta_arrow_button {
@apply filter-energies-urbanisme;
}
}
&.card-location:hover {
.cta_arrow_button {
@apply filter-location;
}
}
&.card-patrimoine:hover {
.cta_arrow_button {
@apply filter-patrimoine;
}
}
}
}