diff --git a/src/App/Home/index.js b/src/App/Home/index.js
index 332c1242de..2eb3ec05f4 100644
--- a/src/App/Home/index.js
+++ b/src/App/Home/index.js
@@ -59,21 +59,23 @@ const Home = () => {
-
+
-
+
Utilities
diff --git a/src/less/components/card.less b/src/less/components/card.less
index a335695c9c..5f1f16b027 100644
--- a/src/less/components/card.less
+++ b/src/less/components/card.less
@@ -1,7 +1,6 @@
@import "../global.less";
// TODO: sera que el card title TIENE que llevar la clase .h4 ? or ponemos un title mas abstracto?
-// provide fallback style pa support a los que no han hecho la migracion, chequeando si llevas unas de las nuevas clases (e.g. .cards-cta) -> pa ellos provide un fallback style as close as possible, until next Major release
.cards:has(.cards-cta) {
--border-radius: 16px;
@@ -9,7 +8,6 @@
--cards-dark-gray: var(--base-2);
--min-width: 240px;
--max-width: 700px;
- --transition-duration: 0.1s;
--padding-outer: 1.5rem;
--grid-min-gap: 0.5rem;
@@ -33,12 +31,11 @@
text-decoration: none;
background-color: var(--cards-light-gray);
cursor: pointer;
- transition: var(--transition-duration);
overflow: clip;
&:hover {
.cards-cta span.arrow:before {
- animation: scroll 0.5s ease-in-out;
+ animation: scroll 0.6s cubic-bezier(0.46, 0.06, 0, 1.02);
}
}
@@ -289,11 +286,9 @@
&:hover {
background-color: var(--cards-dark-gray);
color: var(--white);
- transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
.h4 {
color: inherit;
- transition: inherit;
}
}
@@ -318,7 +313,6 @@
& span.arrow {
width: 40px;
- transition: all 0.5s ease;
display: grid;
overflow: clip;
@@ -345,7 +339,6 @@
font-family: var(--brand-headline);
text-align: start;
margin-block: 0;
- transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
}
@keyframes scroll {