style(web): use black hero whale with hover motion

This commit is contained in:
ZiyaZhang
2026-08-11 07:41:51 -07:00
parent 564a853a04
commit 1d7ce83894

View File

@@ -61,11 +61,33 @@
white-space: nowrap;
}
/* figma fish fill rides business blue. */
/* Keep the hero mark in the same primary ink as its headline. */
.fish {
grid-row: 1;
grid-column: 1;
color: var(--dsw-alias-state-business-primary);
color: var(--dsw-alias-label-primary);
transform-box: fill-box;
transform-origin: 50% 60%;
}
@keyframes hero-fish-swim {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
35% {
transform: translate(-1px, -1px) rotate(-5deg);
}
70% {
transform: translate(1px, 0) rotate(3deg);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.fish:hover {
animation: hero-fish-swim 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
/* Workspace row sits 12px above the input card (figma y80 → y112). The blue