mirror of
https://github.com/zooai/design.git
synced 2026-10-30 14:50:04 +00:00
zeekay
8e572430a8
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Zoo surface — loadable and editable.
25 lines
1.5 KiB
CSS
25 lines
1.5 KiB
CSS
/* Motion is restrained: fade + small rise, CSS-only hovers, one breathing glow.
|
|
No springs, no bounce, no parallax, no autoplay carousels. */
|
|
:root{
|
|
--duration-fast:150ms; /* @kind other */ /* dropdown / panel open */
|
|
--duration-base:300ms; /* @kind other */ /* slide-up-fade */
|
|
--duration-slow:400ms; /* @kind other */ /* hero element entry */
|
|
--duration-slower:500ms; /* @kind other */ /* section entry */
|
|
--duration-glow:9s; /* @kind other */ /* ambient radial breathe */
|
|
--ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
|
|
--ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
|
|
--stagger:60ms; /* @kind other */ /* per-element delay in a group */
|
|
--entry-rise:16px; /* hero y-offset */
|
|
--entry-rise-lg:24px; /* card y-offset */
|
|
}
|
|
|
|
@keyframes zoo-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes zoo-fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes zoo-slide-up-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes zoo-glow{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.65}}
|
|
@keyframes zoo-pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
|
|
|
|
@media (prefers-reduced-motion:reduce){
|
|
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
|
|
}
|