|
|
@@ -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
|
ZiyaZhang