homegrade_theme_production/template-components/card-thematique.css
2023-06-28 16:01:58 +02:00

74 lines
1.4 KiB
CSS

.card-thematique {
@apply flex flex-col p-8 rounded-3xl relative bg-white;
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;
}
}
}