44 lines
1.0 KiB
CSS
44 lines
1.0 KiB
CSS
.cta {
|
|
@apply block w-fit my-2 text-base font-bold;
|
|
&--button {
|
|
@apply rounded-full px-8 py-4 focus:rounded-full font-bold;
|
|
}
|
|
&--primary {
|
|
@apply bg-primary text-white;
|
|
}
|
|
&--shadowed {
|
|
@apply shadowed;
|
|
}
|
|
&--streched {
|
|
@apply after:absolute after:inset-0;
|
|
}
|
|
&--outline {
|
|
@apply border-2 bg-transparent;
|
|
}
|
|
|
|
&.cta--button.cta--outline {
|
|
@apply border-black text-primary;
|
|
}
|
|
|
|
&--read-more {
|
|
@apply flex text-primary hover:text-secondary w-full justify-between items-center mt-auto;
|
|
.icon {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
&:hover .icon {
|
|
filter: invert(27%) sepia(69%) saturate(6074%)
|
|
hue-rotate(348deg) brightness(87%) contrast(100%);
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.external-link {
|
|
@apply font-semibold hover:text-secondary flex w-fit items-center;
|
|
&:after {
|
|
@apply ml-2 block;
|
|
content: url('../resources/img/graphic-assets/icone-external-link.svg');
|
|
transform: translateY(1px);
|
|
}
|
|
}
|