diff --git a/assets/css/atoms-molecules/hocus.css b/assets/css/atoms-molecules/hocus.css
index 5ed9b49f3..022b4ba83 100644
--- a/assets/css/atoms-molecules/hocus.css
+++ b/assets/css/atoms-molecules/hocus.css
@@ -1,8 +1,42 @@
 /* Zoom on image on hover */
 .ts-hocus-scale img {
-	transition: transform 300ms cubic-bezier(0, 1.25, 1, 1.25);
+	transition: transform 400ms ease-in-out;
 }
 .ts-hocus-scale:hover img {
 	transform: scale(1.02);
 }
 
+/* Shadow */
+.hocus-card-shadow {
+	transition: var(--transition-default);
+}
+.hocus-card-shadow:hover {
+	box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.10);
+}
+
+/* Card hover/focus style */
+.card-overlay-link:hover + .card-title-hocus,
+.card-title-hocus:focus {
+	text-decoration: underline;
+	text-underline-offset: var(--spacer-2xs);
+	transition: all var(--transition-default);
+}
+
+/* Underline */
+.hocus-underline {
+	transition: var(--transition-default);
+}
+.hocus-underline {
+	@apply hover:underline focus:underline underline-offset-4;
+}
+
+/* Action color text */
+.hocus-action {
+	transition: var(--transition-default);
+}
+.hocus-action:hover,
+.hocus-action:focus {
+	color: var(--color-action);
+}
+
+