style(web): use black hero whale with hover motion
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user